/* adirit.mx · «Próximamente» · hoja única, sin dependencias externas.
   Paleta de marca de Adirit: la del logo y la caja (pos_adirit_branding): rosa #E2579E, su oscuro #C04A86
   (hover/activo), tinte #FCEBF3, texto #212529 / #495057, grises de borde #DEE2E6 / #F8F9FA. Lato desde /fonts/.
   Contraste (Corrección 2): el rosa #E2579E con blanco da 3.45:1, sólo AA de texto grande; por eso el texto del
   botón relleno va en negrita (700) y de ≥ 19 px. Todo otro texto ≥ 4.5:1 (prueba/probar.py, «contraste»). */

@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/lato-medium-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/lato-semibold-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/lato-bold-latin.woff2') format('woff2');
}

:root {
  --rosa: #E2579E;           /* --adirit-primary · el rosa del logo: botones, insignias, línea del encabezado, bordes */
  --rosa-hover: #C04A86;     /* --adirit-primary-85 · hover y activo; también el rosa de TEXTO normal sobre blanco (4.60:1) */
  --rosa-tinte: #FCEBF3;     /* --adirit-selection-bg · fondo claro */
  --texto: #212529;          /* --adirit-text */
  --texto-cuerpo: #495057;   /* --adirit-text-2 · texto secundario */
  --borde: #DEE2E6;          /* --adirit-border */
  --fondo: #FFFFFF;
  --fondo-alt: #F8F9FA;      /* --adirit-bg */
  --radio: 8px;              /* $t4cw-radio */
  --radio-pastilla: 999px;   /* $t4cw-radio-pastilla */
  --alto-ctrl: 44px;         /* $t4cw-alto-ctrl */
  --caja: 1230px;            /* $t4cw-ancho-caja */
  --aire: 16px;              /* $t4cw-aire */
  --sombra: 0 1px 3px rgba(16, 24, 40, .10), 0 3px 6px rgba(16, 24, 40, .06);              /* $t4cw-e1-5 */
  --sombra-hover: 0 2px 5px rgba(16, 24, 40, .14), 0 8px 18px rgba(16, 24, 40, .12);       /* $t4cw-e1-7 */
  --halo: 0 2px 8px rgba(226, 87, 158, .35);                                                /* $t4cw-halo */
  --halo-fuerte: 0 3px 10px rgba(226, 87, 158, .45);                                        /* $t4cw-halo-fuerte */
  --anillo-foco: 0 0 0 4px rgba(226, 87, 158, .20);                                         /* $t4cw-anillo-foco-pos */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
  --font: 'Lato', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto-cuerpo);
  font-family: var(--font); font-weight: 500; font-size: 1rem; line-height: 1.55;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--texto); font-weight: 600; line-height: 1.2; margin: 0; }
p { margin: 0; }
strong, b { font-weight: 600; }

.caja { max-width: var(--caja); margin: 0 auto; padding: 0 var(--aire); }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* foco visible: contorno 3 px #C04A86 (4.60:1 sobre blanco, 4.01 sobre el tinte; mínimo 3:1) + anillo del POS */
:focus-visible { outline: 3px solid var(--rosa-hover); outline-offset: 2px; box-shadow: var(--anillo-foco); }

.saltar {
  position: absolute; left: var(--aire); top: -100px; z-index: 10;
  background: var(--fondo); color: var(--rosa-hover); padding: 10px 16px;
  border: 2px solid var(--rosa); border-radius: var(--radio); font-weight: 600;
}
.saltar:focus { top: var(--aire); }

/* ---- cabecera ---- */
.cabecera { background: var(--fondo); border-bottom: 3px solid var(--rosa); }
.cabecera .caja { display: flex; align-items: center; min-height: 72px; }
.logo { display: inline-flex; border-radius: var(--radio); }
.logo img { display: block; height: 40px; width: auto; }

/* ---- portada «Próximamente» ---- */
.portada { background: var(--rosa-tinte); text-align: center; padding: 56px 0 48px; }
.etiqueta {
  display: inline-block; margin-bottom: 16px; padding: 6px 16px; border-radius: var(--radio-pastilla);
  background: var(--fondo); border: 2px solid var(--rosa); color: var(--rosa-hover);
  font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.portada h1 { font-size: clamp(2.5rem, 9vw, 4.5rem); letter-spacing: -.01em; }
.portada .sub { margin: 16px auto 0; max-width: 34em; font-size: clamp(1.0625rem, 2.6vw, 1.25rem); color: var(--texto-cuerpo); }
.portada .raya { display: block; width: 72px; height: 4px; margin: 24px auto 0; border-radius: var(--radio-pastilla); background: var(--rosa); }

/* ---- ubicaciones ---- */
.tiendas { padding: 48px 0 56px; background: var(--fondo-alt); }
.tiendas > .caja > h2 { font-size: clamp(1.5rem, 4.5vw, 2rem); text-align: center; }
.tiendas > .caja > .intro { text-align: center; margin: 8px auto 32px; max-width: 34em; }
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }

.tienda {
  display: flex; flex-direction: column; height: 100%;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 24px 20px; box-shadow: var(--sombra);
  transition: box-shadow var(--dur) var(--ease);
}
.tienda:hover { box-shadow: var(--sombra-hover); }
.tienda h3 { font-size: 1.1875rem; }
.tienda .asociada {
  align-self: flex-start; margin-bottom: 12px; padding: 4px 12px; border-radius: var(--radio-pastilla);
  background: var(--fondo); border: 2px solid var(--rosa); color: var(--rosa-hover);
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.tienda .marca { display: block; width: 168px; height: auto; margin: 0 0 12px; }
.tienda address { font-style: normal; margin-top: 12px; }
.horario { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--borde); }
.horario div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.horario dt { color: var(--texto-cuerpo); }
.horario dd { margin: 0; color: var(--texto); font-weight: 600; text-align: right; }
.contacto { margin-top: 16px; }
.contacto b { color: var(--texto); }
.acciones { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }

/* botones: primario sólido #E2579E + texto blanco; con 3.45:1 sólo vale como TEXTO GRANDE (AA ≥ 3:1), por eso todo
   botón va en negrita (700, Lato Bold) y de al menos 19 px (14.25 pt; el umbral es 14 pt en negrita). El secundario
   lleva el borde #E2579E y el texto #C04A86 sobre blanco (4.60:1). Hover y activo: #C04A86. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alto-ctrl); padding: 0 18px; border-radius: var(--radio-pastilla);
  border: 2px solid var(--rosa); font: inherit; font-weight: 700; font-size: max(19px, 1.1875rem); line-height: 1.2;
  text-decoration: none; cursor: pointer; flex: 1 1 auto;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.boton svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.boton--primario { background: var(--rosa); color: #FFFFFF; box-shadow: var(--halo); }
.boton--secundario { background: var(--fondo); color: var(--rosa-hover); }
.boton--primario:hover, .boton--primario:active { background: var(--rosa-hover); border-color: var(--rosa-hover); }
.boton--secundario:hover, .boton--secundario:active { background: var(--rosa-tinte); border-color: var(--rosa-hover); }
.boton--primario:hover { box-shadow: var(--halo-fuerte); transform: translateY(-1px); }
.boton--secundario:hover { box-shadow: var(--sombra-hover); transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

/* ---- pie ---- */
.pie { background: var(--fondo); border-top: 1px solid var(--borde); padding: 24px 0; text-align: center; font-size: .9375rem; }
.pie a { color: var(--rosa-hover); font-weight: 600; }

/* ---- 404 y marcador ---- */
.centro { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px var(--aire); }
.centro h1 { font-size: clamp(2rem, 7vw, 3rem); margin-top: 24px; }
.centro p { margin-top: 12px; max-width: 30em; }
.centro .boton { margin-top: 24px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .boton:hover, .boton:active { transform: none; }
}
@media (forced-colors: active) {
  .boton, .tienda { border: 2px solid ButtonText; }
}
@media print {
  .portada, .tiendas { background: none; }
  .acciones { display: none; }
}