/* --- Tipografía ----------------------------------------------------------
   SF Pro, servida por nosotros. Apple usa dos cortes de la misma familia y
   cambia de uno al otro alrededor de los 20 px: Text está dibujado para leerse
   chico (más espacio entre letras, ojales más abiertos) y Display para titular
   (más ajustado). Respetar eso es la mitad de por qué se ve como se ve.

   Los archivos están recortados al alfabeto latino: 39 a 43 KB cada uno contra
   los 2,2 MB del OTF completo. Con font-display: swap el texto se ve desde el
   primer instante con la fuente del sistema y cambia cuando llega la real. */
@font-face {
  font-family: "SF Pro Text"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("../fuentes/SF-Pro-Text-Regular.6070b901cda4.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Text"; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("../fuentes/SF-Pro-Text-Medium.87a36a27cc5d.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Text"; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("../fuentes/SF-Pro-Text-Semibold.90e18ddc7183.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Display"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("../fuentes/SF-Pro-Display-Regular.cc2b9a0bfcf4.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Display"; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("../fuentes/SF-Pro-Display-Medium.9f3f59fb8ed6.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Display"; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("../fuentes/SF-Pro-Display-Semibold.2efd8dd68d0a.woff2") format("woff2");
}

/* Sistema visual de iMasters Store.
   Los valores salen del canvas de diseño aprobado. No redondear a una grilla de
   4 u 8 ni a defaults de un framework: el tracking negativo creciente es lo que
   hace que se lea como tipografía de sistema Apple.

   Orden del archivo: tokens · base · tipografía · estructura · controles ·
   componentes · chrome del sitio · páginas · movimiento · respuesta al ancho.
   Las medidas de ancho viven TODAS al final, en un solo bloque por corte, para
   que no haya dos reglas peleándose por el mismo elemento. */

:root {
  /* Superficies */
  --bg: #f6f6f7;
  --surface: #ffffff;
  --panel: #eef0f4;
  --terciario: #f0f0f2;
  --pie: #f1f1f3;
  --oscuro: #101014;

  /* Líneas */
  --linea: #e2e2e6;
  --linea-tarjeta: #ececed;
  --divisor: #e8e8ea;
  --linea-campo: #dcdce0;
  --linea-chip: #e4e4e7;
  --divisor-oscuro: #26262d;

  /* Tinta */
  --ink: #16161a;
  --ink-2: #5b5b64;
  --ink-3: #8e8e98;
  --ink-4: #a9a9b1;
  --placeholder: #adadb5;
  --ink-oscuro: #a9a9b2;

  /* Acción y estado. El acento y la confirmación comparten luminosidad y croma;
     sólo cambia el tono. */
  --acento: #2e4bc6;          /* oklch(.52 .17 262) */
  --acento-hover: #213a9e;
  --acento-bg: #f0f2fb;
  --ok: #0a7f5c;              /* oklch(.52 .17 160) */
  --ok-bg: #eaf5f0;
  --error: #b3261e;
  /* El ámbar de «esto todavía no está listo», entre el verde y el rojo. Existía
     sólo como el valor por omisión de `var(--alerta, #b45309)` en
     `.punto-alerta`, así que cualquier `var(--alerta)` sin fallback quedaba sin
     color y el texto salía negro. */
  --alerta: #b45309;
  --off: #c9cbd6;

  /* Radios */
  --r-chip: 6px;
  --r-campo: 12px;
  --r-mini: 14px;
  --r-tarjeta: 18px;
  --r-panel: 24px;
  --r-pill: 999px;

  /* Espaciado */
  --e1: 4px;  --e2: 8px;   --e3: 12px; --e4: 16px; --e5: 20px;
  --e6: 28px; --e7: 44px;  --e8: 72px; --e9: 88px;

  /* Ancho. El contenedor mide 1200 y trae 40 de aire adentro: sobre una pantalla
     de 1440 eso deja los 160 px de margen lateral del diseño aprobado, y sobre
     390 deja los 20. No hace falta ninguna media query para el ancho del texto. */
  /* El de apple.com/store, medido ahí: 1680 px de caja y el resto de margen.
     Con 1200 la grilla de cuatro daba tarjetas de 265 px y la página quedaba
     angosta en un monitor grande. Los bloques de texto no se estiran con esto
     porque tienen su propio tope (.t-parrafo 640, .prosa 680, .medio 720): un
     renglón de 1680 px no lo lee nadie. */
  --contenedor: 1680px;
  --lado: clamp(20px, 4.4vw, 40px);
  --nav-h: 56px;
  --franja-h: 34px;

  /* Texto para leer, Display para titular. Si la fuente no llegó todavía, cae
     en la del sistema, que en Mac y iPhone ES San Francisco. */
  --fuente: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter",
            "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-titulo: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter",
            "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Movimiento: corto, con salida suave. Nada rebota. */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Que el ancla no quede tapada por la barra pegajosa. */
  scroll-padding-top: calc(var(--franja-h) + var(--nav-h) + 16px);
}

body {
  margin: 0;
  /* clip y no hidden: corta el desborde lateral sin romper position:sticky. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.52;
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  -webkit-tap-highlight-color: rgba(46, 75, 198, .12);
}

img { max-width: 100%; display: block; }

/* El azul es la ÚNICA acción clickeable: si algo es azul, se toca.
   El verde nunca es un botón. */
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, label:focus-within {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }

/* Saltar al contenido: la primera parada del teclado, invisible hasta que se usa. */
.saltar {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--surface); color: var(--acento);
  padding: 12px 18px; border-radius: var(--r-pill); border: 1px solid var(--linea);
  font-size: 14px; font-weight: 600;
}
.saltar:focus { left: 12px; }

/* --- Escala tipográfica --------------------------------------------------- */
/* De 20 px para arriba, el corte Display: es donde Apple hace el cambio. */
.t-hero, .t-seccion, .t-pagina, .t-seccion-2, .t-movil, .t-bloque, .t-paso,
.hero-bajada, .pagina-bajada, .precio, .precio-md, .cifra-valor, .prosa h2 {
  font-family: var(--fuente-titulo);
}

/* Los cuerpos son los de apple.com, medidos ahí: 40 px el título de una banda
   («The latest.»), 24 el de una tarjeta, 17 el texto corrido, 12 la letra chica.
   Todo esto estaba entre un 15 % y un 20 % más grande, y en una página con
   mucho para leer —precios por modelo, programas de servicio— eso se siente
   como que el sitio te grita. El único que sigue grande es el nombre de la
   página, que en Apple también lo es: el contraste es entre UNA palabra enorme
   y todo lo demás chico, no entre todo grande. */
.t-hero      { font-size: 58px; line-height: 1.06; font-weight: 600; letter-spacing: -0.032em; }
.t-seccion   { font-size: 40px; line-height: 1.10; font-weight: 600; letter-spacing: -0.026em; }
.t-pagina    { font-size: 34px; line-height: 1.12; font-weight: 600; letter-spacing: -0.026em; }
.t-seccion-2 { font-size: 28px; line-height: 1.16; font-weight: 600; letter-spacing: -0.022em; }
.t-movil     { font-size: 26px; line-height: 1.18; font-weight: 600; letter-spacing: -0.024em; }
.t-bloque    { font-size: 22px; line-height: 1.22; font-weight: 600; letter-spacing: -0.020em; }
.t-paso      { font-size: 18px; line-height: 1.28; font-weight: 600; letter-spacing: -0.018em; }
.t-producto  { font-size: 16px; line-height: 1.32; font-weight: 600; letter-spacing: -0.014em; }
.t-parrafo   { font-size: 17px; line-height: 1.52; max-width: 640px; text-wrap: pretty; }
.t-parrafo-2 { font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.t-aux       { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.t-nota      { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.t-etiqueta  { font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
               text-transform: uppercase; color: var(--ink-3); }

/* Los números de precio en cifras de ancho fijo: no bailan al cambiar de modelo. */
.precio, .precio-md, .precio-sm { font-variant-numeric: tabular-nums; }
.precio    { font-size: 27px; font-weight: 600; letter-spacing: -0.028em; }
.precio-md { font-size: 24px; font-weight: 600; letter-spacing: -0.028em; }
.precio-sm { font-size: 16px; font-weight: 600; letter-spacing: -0.018em; }

/* --- Estructura ----------------------------------------------------------- */
.contenedor { width: 100%; max-width: var(--contenedor); margin-inline: auto;
              padding-left: max(var(--lado), env(safe-area-inset-left));
              padding-right: max(var(--lado), env(safe-area-inset-right)); }
.seccion    { padding-top: var(--e9); }
.banda      { width: 100%; max-width: 1440px; margin-inline: auto; }

/* --- Botones. Sin sombras en ningún lado: la jerarquía la dan el borde de
       1 px y el fondo. -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding-inline: 24px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 500; font-family: inherit;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.985); }
.btn-primario   { background: var(--acento); color: #fff; }
.btn-primario:hover { background: var(--acento-hover); color: #fff; }
.btn-secundario { background: var(--surface); color: var(--ink); border-color: var(--linea-campo); }
.btn-secundario:hover { color: var(--ink); border-color: var(--ink-3); }
.btn-claro      { background: #fff; color: var(--oscuro); }
.btn-claro:hover { background: #ececef; color: var(--oscuro); }
.btn-borde-oscuro { background: transparent; color: #fff; border-color: #35353d; }
.btn-borde-oscuro:hover { color: #fff; border-color: #55555f; }
.btn-en-tarjeta { height: 46px; padding-inline: 24px; font-size: 15px; }
.btn-terciario  { height: 42px; padding-inline: 20px; font-size: 14px;
                  background: var(--terciario); color: var(--ink); }
.btn-terciario:hover { background: #e6e6ea; color: var(--ink); }
/* 34 px es la única excepción al mínimo táctil de 44: vive dentro de la grilla
   de productos, donde la tarjeta entera es clickeable. En mobile sube a 44. */
.btn-agregar    { height: 34px; padding-inline: 16px; font-size: 13px;
                  background: var(--terciario); color: var(--ink); }
.btn-agregar:hover { background: var(--acento); color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--off); color: #fff; border-color: transparent;
  cursor: not-allowed; pointer-events: none; transform: none;
}
/* Ancho completo a pedido, en vez de que la media query se lo imponga a todos:
   el botón de la barra de búsqueda no tiene por qué medir lo mismo que un CTA. */
.btn-ancho { width: 100%; }

/* Enlace con flecha que se corre un pelo al pasar el mouse. */
.enlace-flecha { display: inline-flex; align-items: center; gap: 5px;
                 min-height: 44px; font-size: 16px; font-weight: 500; }
.enlace-flecha .ico { transition: transform .25s var(--ease-out); }
.enlace-flecha:hover .ico { transform: translateX(3px); }

/* --- Campos --------------------------------------------------------------- */
.campo {
  width: 100%; height: 48px; padding-inline: 15px;
  border: 1px solid var(--linea-campo); border-radius: var(--r-campo);
  background: var(--surface); color: var(--ink);
  font-size: 15px; font-family: inherit;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.campo::placeholder { color: var(--placeholder); }
.campo:focus {
  outline: none; border: 1.5px solid var(--acento);
  box-shadow: 0 0 0 3px rgba(46, 75, 198, 0.13);
}
.campo[aria-invalid="true"] { border: 1.5px solid var(--error); }
.campo-etiqueta { display: block; font-size: 12px; font-weight: 600;
                  color: var(--ink-3); margin-bottom: 7px; }
.campo-error { font-size: 12px; color: var(--error); margin-top: 6px; }
textarea.campo { height: auto; min-height: 110px; padding-block: 12px; line-height: 1.5; }

/* --- Tarjetas y paneles --------------------------------------------------- */
.tarjeta { background: var(--surface); border: 1px solid var(--linea-tarjeta);
           border-radius: var(--r-tarjeta); }
.panel   { background: var(--surface); border: 1px solid var(--linea-tarjeta);
           border-radius: var(--r-panel); overflow: hidden; }
.panel-oscuro { background: var(--oscuro); color: #fff; border-radius: var(--r-panel);
                overflow: hidden; }

/* --- Chips de estado. El verde nunca es un botón. ------------------------- */
.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
        padding: 5px 11px; border-radius: var(--r-pill); }
.chip .ico { margin-right: 6px; }
.chip-ok     { color: var(--ok);     background: rgba(10, 127, 92, 0.10); }
.chip-neutro { color: var(--ink-3);  background: var(--terciario); }
.chip-info   { color: var(--acento); background: var(--acento-bg); }
.chip-error  { color: var(--error);  background: rgba(179, 38, 30, 0.09); }
.chip-pago   { color: var(--ink-3); border: 1px solid var(--linea-chip);
               background: #fff; border-radius: var(--r-chip); padding: 5px 10px;
               font-size: 11px; font-weight: 600; }
a.chip { transition: background-color .2s var(--ease), color .2s var(--ease); }
a.chip-neutro:hover { background: #e6e6ea; color: var(--ink-2); }

.contador { display: inline-flex; align-items: center; justify-content: center;
            min-width: 17px; height: 17px; padding-inline: 5px;
            border-radius: var(--r-pill); background: var(--acento); color: #fff;
            font-size: 11px; font-weight: 600; letter-spacing: 0; }

/* --- Iconos: SVG de trazo sobre grilla de 24. Sin emoji en la interfaz. ---
   El dibujo vive una sola vez en el sprite de _iconos.html y se referencia
   con <svg class="ico"><use href="#i-nombre"></svg>. */
.ico { width: 18px; height: 18px; flex-shrink: 0;
       fill: none; stroke: currentColor;
       stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
       vector-effect: non-scaling-stroke; }
.ico-lg { width: 24px; height: 24px; stroke-width: 1.5; }
.ico-xl { width: 28px; height: 28px; stroke-width: 1.4; }
.ico-sm { width: 15px; height: 15px; stroke-width: 1.9; }
.ico-relleno { fill: currentColor; stroke: none; }

/* --- Chrome del sitio ----------------------------------------------------- */
/* Franja institucional: es lo primero que se lee y dice que el taller es
   autorizado por Apple. Se esconde en mobile para no comerle alto al menú. */
.franja {
  position: sticky; top: 0; z-index: 31;
  background: var(--oscuro); color: var(--ink-oscuro);
  font-size: 12px; letter-spacing: -0.002em;
}
.franja-fila { display: flex; align-items: center; gap: 18px; height: var(--franja-h); }
.franja strong { color: #fff; font-weight: 600; display: inline-flex;
                 align-items: center; gap: 6px; }
.franja-sep { flex-grow: 1; }
.franja a { color: var(--ink-oscuro); display: inline-flex; align-items: center; gap: 6px; }
.franja a:hover { color: #fff; }

/* La barra se pega JUSTO debajo de la franja, no arriba de todo: las dos
   quedan a la vista mientras se scrollea y el sello de autorizado no se va. */
.nav { position: sticky; top: var(--franja-h); z-index: 30;
       background: rgba(255,255,255,.82);
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       border-bottom: 1px solid transparent;
       transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.nav-scroll { border-bottom-color: var(--linea); background: rgba(255,255,255,.9); }
.nav-fila { display: flex; align-items: center; gap: 26px; height: var(--nav-h); }
.nav-logo { display: flex; align-items: center; flex-shrink: 0;
            min-height: 44px; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; flex-grow: 1; }
.nav-links a { font-size: 13px; color: var(--ink-2); white-space: nowrap;
               transition: color .18s var(--ease); }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-acciones { display: flex; align-items: center; gap: 4px; color: var(--ink-2);
                margin-left: auto; }
/* Los iconos del header son controles: 44 px de zona táctil aunque el dibujo mida 17. */
.nav-acciones > a { display: inline-flex; align-items: center; justify-content: center;
                    width: 44px; height: 44px; border-radius: var(--r-pill);
                    color: var(--ink-2); transition: color .18s var(--ease),
                    background-color .18s var(--ease); }
.nav-acciones > a:hover { color: var(--ink); background: rgba(0,0,0,.045); }
.nav-carrito { position: relative; }
.nav-carrito .contador { position: absolute; top: 6px; right: 5px; }
.nav-hamburguesa { display: none; width: 44px; height: 44px;
                   align-items: center; justify-content: center;
                   background: none; border: 0; color: var(--ink); cursor: pointer;
                   border-radius: var(--r-pill); }
.nav-hamburguesa:hover { background: rgba(0,0,0,.045); }
.nav-hamburguesa .ico-cerrar { display: none; }
.nav-hamburguesa[aria-expanded="true"] .ico-abrir { display: none; }
.nav-hamburguesa[aria-expanded="true"] .ico-cerrar { display: block; }

.avisos { padding-top: 16px; display: grid; gap: 8px; }
.aviso { padding: 14px 18px; border-radius: var(--r-campo); font-size: 15px;
         border: 1px solid var(--linea-tarjeta); background: var(--surface); }
.aviso-success { color: var(--ok); background: rgba(10,127,92,.08); border-color: transparent; }
.aviso-error   { color: var(--error); background: rgba(179,38,30,.08); border-color: transparent; }

.pie { margin-top: var(--e9); border-top: 1px solid var(--linea);
       background: var(--pie); padding-block: 56px 40px; }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.pie-marca img { height: 26px; width: auto; }
.pie-col { display: flex; flex-direction: column; gap: 9px; }
.pie-col a { font-size: 13px; color: var(--ink-2); transition: color .18s var(--ease); }
.pie-col a:hover { color: var(--ink); }
.pie-redes { display: flex; gap: 6px; margin-top: 14px; color: var(--ink-2); }
.pie-redes a { display: inline-flex; align-items: center; justify-content: center;
               width: 40px; height: 40px; border-radius: var(--r-pill);
               color: var(--ink-2); transition: color .18s var(--ease),
               background-color .18s var(--ease); }
.pie-redes a:hover { color: var(--ink); background: rgba(0,0,0,.05); }
.pie-legal { display: flex; align-items: center; justify-content: space-between;
             gap: 16px; margin-top: 44px; padding-top: 22px;
             border-top: 1px solid var(--linea); }
.pie-pagos { display: flex; gap: 8px; flex-wrap: wrap; }

/* Selector de idioma. Dos botones chiquitos: no hay tantos idiomas como para
   justificar un desplegable, y un clic es mejor que dos. */
.idiomas { display: inline-flex; gap: 2px; margin: 0; padding: 2px;
           border-radius: var(--r-pill); background: rgba(255,255,255,.10); }
.idioma { padding: 3px 9px; border: 0; border-radius: var(--r-pill);
          background: none; color: var(--ink-oscuro); cursor: pointer;
          font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em;
          transition: background-color .18s var(--ease), color .18s var(--ease); }
.idioma:hover { color: #fff; }
.idioma.on { background: rgba(255,255,255,.92); color: var(--oscuro); }

/* En el pie el fondo es claro, así que se invierte. */
.pie-idioma .idiomas { background: rgba(0,0,0,.05); }
.pie-idioma .idioma { color: var(--ink-2); }
.pie-idioma .idioma:hover { color: var(--ink); }
.pie-idioma .idioma.on { background: var(--ink); color: #fff; }

@media (max-width: 640px) {
  /* La franja se achica y esconde los links, pero el idioma se queda. */
  .franja a, .franja-sep { display: none; }
  .franja-fila { justify-content: center; gap: 12px; }
  .franja .idiomas { display: inline-flex; }
}

/* --- Home ----------------------------------------------------------------- */
.hero { padding-top: var(--e8); text-align: center; }
.hero .chip { margin-bottom: 26px; }
.hero-bajada { font-size: 21px; line-height: 1.45; letter-spacing: -0.012em;
               color: var(--ink-2); max-width: 640px; margin: 22px auto 0;
               text-wrap: pretty; }
.hero-botones { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
.hero-foto { margin: 44px auto 0; mix-blend-mode: multiply; }

/* Sello de taller autorizado. Dice de qué se trata sin usar el logo de Apple. */
.sello { display: inline-flex; align-items: center; gap: 8px;
         padding: 7px 15px 7px 11px; border-radius: var(--r-pill);
         background: var(--ok-bg); color: var(--ok);
         font-size: 13px; font-weight: 600; letter-spacing: -0.008em; }
.sello .ico { width: 16px; height: 16px; }

.promesas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1px; background: var(--linea); margin-top: var(--e6);
            border-block: 1px solid var(--linea); }
.promesa { display: flex; flex-direction: column; gap: 10px;
           padding: var(--e7) 60px; background: var(--surface); }
.promesa .ico { color: var(--acento); }

/* Bloque institucional del taller autorizado. */
.autorizado { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
              gap: var(--e5); margin-top: var(--e6); }
.autorizado-item { display: flex; flex-direction: column; gap: 9px;
                   padding: 28px; background: var(--surface);
                   border: 1px solid var(--linea-tarjeta); border-radius: var(--r-tarjeta);
                   transition: border-color .25s var(--ease), transform .25s var(--ease); }
.autorizado-item:hover { border-color: var(--linea-campo); transform: translateY(-2px); }
a.tarjeta { transition: border-color .25s var(--ease), transform .25s var(--ease); }
a.tarjeta:hover { border-color: var(--linea-campo); transform: translateY(-2px); }
a.tarjeta:hover .t-producto { color: var(--acento); }
.autorizado-item .ico { color: var(--acento); }

.cabecera { display: flex; align-items: flex-end; justify-content: space-between;
            gap: 24px; margin-bottom: 32px; }
.cabecera .t-etiqueta { display: block; margin-bottom: 10px; }
.cabecera a { display: inline-flex; align-items: center; gap: 5px;
              font-size: 16px; font-weight: 500; padding-bottom: 8px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e5); }

/* Grilla de productos: en columnas de ancho fijo y con la última fila centrada.

   Con siete productos, cuatro columnas dejan 4 arriba y 3 abajo pegados a la
   izquierda, y el hueco de la cuarta se lee como que falta algo. Grid no sabe
   centrar una fila incompleta —reparte por columnas y listo—, así que esto es
   flex: las filas llenas quedan igual que antes y la última se centra sola.

   El ancho de la tarjeta es el mismo que calculaba la grilla de cuatro, para
   que nada cambie de tamaño: cuatro columnas y tres huecos de var(--e5). */
.grid-productos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--e5);
}
.grid-productos > * { flex: 0 1 calc((100% - 3 * var(--e5)) / 4); min-width: 0; }
@media (max-width: 1000px) {
  .grid-productos > * { flex-basis: calc((100% - var(--e5)) / 2); }
}
@media (max-width: 560px) {
  .grid-productos > * { flex-basis: 100%; }
}

.tarjeta-rep { display: flex; flex-direction: column;
               transition: border-color .25s var(--ease), transform .25s var(--ease); }
.tarjeta-rep:hover { border-color: var(--linea-campo); transform: translateY(-2px); }
.tarjeta-rep-foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel); }
.tarjeta-rep-foto img { width: 100%; height: 100%; object-fit: contain;
                        padding: 22px; background: #fff;
                        transition: transform .6s var(--ease-out); }
.tarjeta-rep:hover .tarjeta-rep-foto img { transform: scale(1.03); }
.tarjeta-rep-cuerpo { padding: 32px; display: flex; flex-direction: column; flex-grow: 1; gap: 10px; }
.fila-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila-precio { display: flex; align-items: center; justify-content: space-between;
               gap: 16px; margin-top: auto; padding-top: 22px; flex-wrap: wrap; }

.bloque-partido { display: flex; }
.bloque-texto { flex: 1 1 0; min-width: 0; padding: 48px; display: flex;
                flex-direction: column; justify-content: center; gap: 12px; }
.bloque-texto .btn { align-self: flex-start; }
.bloque-foto { flex: 1 1 0; min-width: 0; display: flex; align-items: center;
               justify-content: center; overflow: hidden; padding: 0; }
.bloque-foto img { width: 100%; height: 100%; object-fit: cover; }
.panel-oscuro .bloque-foto { padding: 40px; }
.bloque-mapa { min-height: 420px; background: #e9eaee; }
.fila-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.fila-chips .chip { font-size: 13px; font-weight: 500; color: var(--ink); padding: 8px 14px; }

.lista-datos { list-style: none; margin: 28px 0 0; padding: 0;
               display: flex; flex-direction: column; gap: 14px; }
.lista-datos li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-3); }
.lista-datos .ico { margin-top: 2px; }
.lista-datos strong { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.lista-datos .t-nota { display: block; margin-top: 2px; }
.lista-datos a { color: var(--acento); }

/* --- Rotador del hero -----------------------------------------------------
   Cinco fotos que giran solas: iPhone, MacBook, iMac, la tienda y el taller.
   Cada una viene ya recortada a la medida exacta del marco — una versión 16:9
   para escritorio y una cuadrada para el teléfono — así que al navegador no le
   queda nada que recortar. El texto va en una tarjeta esmerilada, que se lee
   igual de bien sobre blanco que sobre una foto.

   Si el visitante pidió menos movimiento, no gira solo: quedan los puntos. */
.rotador {
  position: relative; margin-top: 44px;
  aspect-ratio: 16 / 9; border-radius: var(--r-panel); overflow: hidden;
  background: var(--panel); border: 1px solid var(--linea-tarjeta);
}

/* --- Portada fusionada -----------------------------------------------------
   El título va SOBRE la foto. Antes eran dos bloques apilados que juntos se
   comían una pantalla entera: un título de dos renglones enormes y abajo un
   16:9 de 765 px. Había que hacer scroll para enterarse de que el sitio seguía.

   Fusionados se gana media pantalla y el equipo queda detrás de lo que
   decimos, que es de donde sale la fuerza. */
.hero-fusion { position: relative; }

.hero-fusion .rotador {
  margin-top: 0;
  border-radius: 0; border: 0;
  width: 100vw; margin-inline: calc(50% - 50vw); max-width: 100vw;
  aspect-ratio: 16 / 9;
  max-height: min(72vh, 620px);
}

/* El pie de la foto, apagado contra el fondo de la página: sin esto la foto
   termina en una línea recta y se ve el corte del recuadro.

   Acá vivía además una veladura lateral de izquierda a derecha, para que el
   texto oscuro se leyera sobre cualquier diapositiva. Se sacó: tapaba media
   foto en todas para resolver el peor caso de unas pocas. Lo que sostiene el
   texto ahora es un halo del color del fondo detrás de las letras (ver
   `.hero-encima .t-hero`), que ilumina los tres milímetros que rodean cada
   letra en vez de blanquear media imagen. */
.hero-fusion .rotador::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
              rgb(246 246 247) 0%,
              rgb(246 246 247 / .72) 4%,
              rgb(246 246 247 / .28) 9%,
              rgb(246 246 247 / 0) 16%);
}

.hero-encima {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  text-align: left; pointer-events: none;
}
.hero-encima > * { pointer-events: auto; }
/* El halo que reemplaza a la veladura. Es el color del fondo de la página, no
   negro: sobre texto oscuro un halo claro abre las letras en vez de engordarlas,
   y donde la foto ya es clara no se ve. Cuesta cero sobre la foto, que es lo que
   se quería recuperar.

   Cuatro capas y no dos, porque dos no alcanzaban en las diapositivas oscuras.
   Medido sobre la zona exacta del texto de cada foto: la del iPhone tiene el
   76 % de los píxeles por debajo de 110 de brillo y la del iPad el 44 %. Las
   dos primeras son opacas y cortas: pegan el borde de la letra y son las que
   de verdad la separan del fondo. Las dos anchas despegan el bloque entero de
   una foto con detalle, sin llegar a ser un velo: se apagan a los 30 px, así
   que el resto de la imagen queda intacto. */
.hero-encima .t-hero,
.hero-encima .hero-bajada {
  text-shadow:
    0 0 2px rgb(246 246 247 / 1),
    0 0 5px rgb(246 246 247 / .98),
    0 1px 3px rgb(246 246 247 / .95),
    0 0 30px rgb(246 246 247 / .88);
}
.hero-encima .t-hero { font-size: clamp(32px, 4.4vw, 56px); margin-top: 20px; max-width: 15ch; }
.hero-encima .t-etiqueta { display: block; margin-bottom: 2px; color: var(--ink-3); }

/* Los cinco titulares en la misma celda de grilla: la altura la manda el más
   largo, así que al cambiar de foto no salta nada de lo que está abajo. */
.hero-textos { display: grid; }
.hero-textos > .hero-texto {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .6s var(--ease), visibility .6s var(--ease),
              transform .6s var(--ease-out);
}
.hero-textos > .hero-texto.activa { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-textos > .hero-texto { transform: none; transition: none; }
}
/* `margin-inline: 0` porque la bajada trae `auto` del hero centrado de antes:
   sin esto queda corrida a la derecha y no alinea con el título. */
.hero-encima .hero-bajada { margin: 16px 0 0; max-width: 44ch; }
.hero-encima .hero-botones { justify-content: flex-start; }
.hero-encima .hero-botones { margin-top: 28px; }

.hero-fusion .rotador-puntos { z-index: 4; }

@media (max-width: 900px) {
  /* Apilados: texto arriba, foto abajo. Sobre una pantalla angosta el título
     encima del equipo no se lee ni deja ver la foto — se probó y era peor.

     El texto ahora vive DENTRO del rotador, que recorta y tiene proporción
     fija, así que no alcanza con volverlo estático: hay que sacarle al rotador
     el recorte y la proporción, y pasárselos a la lista de fotos. El rotador
     queda de columna: texto primero, fotos después. */
  .hero-fusion .rotador {
    aspect-ratio: auto; max-height: none; overflow: visible;
    display: flex; flex-direction: column;
  }
  .hero-fusion .rotador > ul {
    order: 2; position: relative; width: 100%;
    aspect-ratio: 4 / 3; overflow: hidden;
  }
  /* Los mismos cortes que arriba, corridos: el recorte del móvil es más bajo
     y el degradé tiene menos alto para apagarse. */
  .hero-fusion .rotador::after {
    background: linear-gradient(to top,
                rgb(246 246 247) 0%,
                rgb(246 246 247 / .70) 5%,
                rgb(246 246 247 / .25) 11%,
                rgb(246 246 247 / 0) 19%);
  }
  .hero-encima { position: static; order: 1; padding: 30px var(--lado) 24px;
                 align-items: center; text-align: center; }
  .hero-encima .t-hero { max-width: none; }
  .hero-encima .hero-bajada { max-width: none; }
  .hero-encima .hero-botones { justify-content: center; }
  /* Mismo centrado que arriba. Con `right` acá y `left` en la regla general
     quedaban las dos puestas y la caja se estiraba de lado a lado. */
  .hero-fusion .rotador-puntos { top: auto; bottom: 14px; left: 50%; right: auto; transform: translateX(-50%); }
}

/* `clip` y no `hidden`: hidden convierte al body en contenedor de scroll y
   rompe todo lo que está pegado con position:sticky. */
body { overflow-x: clip; }
.rotador-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .85s var(--ease), visibility .85s var(--ease);
}
.rotador-slide.activa { opacity: 1; visibility: visible; }
.rotador-slide picture { display: block; width: 100%; height: 100%; }
.rotador-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Deriva lentísima mientras la foto está a la vista. 4,5 % en nueve segundos:
   no se ve moverse, se siente que respira. */
@media (prefers-reduced-motion: no-preference) {
  .rotador-slide.activa img { animation: deriva 9s var(--ease-out) both; }
}
@keyframes deriva { from { transform: scale(1); } to { transform: scale(1.045); } }

/* Centrados abajo. Antes vivían pegados a la derecha, donde el ojo no los busca
   y donde en algunas fotos quedaban sobre el detalle que más se mira. */
.rotador-puntos {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
/* La pausa: discreta, del tamaño de un punto, separada por una línea fina para
   que se lea como otra cosa y no como una diapositiva más. */
.rotador-pausa {
  width: 28px; height: 28px; padding: 0; border: 0; background: none;
  margin-left: 4px; padding-left: 6px; border-left: 1px solid rgba(22,22,26,.16);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: rgba(22,22,26,.5); border-radius: 0;
}
.rotador-pausa:hover { color: var(--ink); }
.rotador-pausa svg { width: 11px; height: 11px; fill: currentColor; }
.rotador-pausa .icono-play { display: none; }
.rotador-pausa[aria-pressed="true"] .icono-play { display: block; }
.rotador-pausa[aria-pressed="true"] .icono-pausa { display: none; }
.rotador-punto {
  width: 32px; height: 32px; padding: 0; border: 0; background: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rotador-punto::before {
  content: ""; display: block; width: 7px; height: 7px; border-radius: var(--r-pill);
  background: rgba(22,22,26,.26);
  transition: width .35s var(--ease-out), background-color .3s var(--ease);
}
.rotador-punto[aria-current="true"]::before { width: 20px; background: var(--ink); }
.rotador-punto:hover::before { background: rgba(22,22,26,.5); }

@media (max-width: 900px) {
  /* Cuadrado, no apaisado: en 16:9 la tarjeta de texto se comía casi toda la
     foto. Acá entra el recorte cuadrado, que calza justo. */
  .rotador { aspect-ratio: 1 / 1; margin-top: 32px; }
  .rotador-puntos { left: 50%; transform: translateX(-50%); bottom: auto; top: 12px; }
}

/* --- Cinta de fotos ------------------------------------------------------
   Va a todo el ancho de la pantalla, no adentro del contenedor: es una tira que
   pasa sola, de izquierda a derecha, sin botones. La lista está DUPLICADA en el
   HTML y la animación corre exactamente media pista: cuando termina, la segunda
   mitad quedó donde estaba la primera y el salto no se ve.

   Se frena al pasar el mouse o al entrar con el teclado. Si el visitante pidió
   menos movimiento, no corre: queda una tira que se arrastra a mano. */
.cinta {
  margin-top: 34px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cinta-pista {
  display: flex; gap: 18px; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: cinta-correr 56s linear infinite;
}
.cinta:hover .cinta-pista, .cinta:focus-within .cinta-pista { animation-play-state: paused; }
@keyframes cinta-correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 9px), 0, 0); }
}
.cinta-foto {
  flex: 0 0 auto; width: clamp(230px, 25vw, 400px); aspect-ratio: 3 / 2;
  border-radius: var(--r-tarjeta); overflow: hidden;
  background: var(--panel); border: 1px solid var(--linea-tarjeta);
}
.cinta-foto img { width: 100%; height: 100%; object-fit: cover;
                  transition: transform .7s var(--ease-out); }
.cinta-foto:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .cinta { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .cinta::-webkit-scrollbar { display: none; }
  .cinta-pista { animation: none; padding-inline: var(--lado); }
}
@media (max-width: 900px) {
  .cinta { margin-top: 24px; }
  .cinta-pista { gap: 12px; animation-duration: 42s; }
  @keyframes cinta-correr {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-50% - 6px), 0, 0); }
  }
}

/* --- Catálogo y fichas ---------------------------------------------------- */
.miga { display: flex; align-items: center; gap: 8px; padding-top: 22px;
        font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.miga a { color: var(--ink-3); }
.miga a:hover { color: var(--ink-2); }

/* --- Producto en la grilla -------------------------------------------------
   Sin caja ni borde: el producto se apoya sobre la página y el texto va abajo,
   centrado. Es lo que hace que una grilla de accesorios se lea como una tienda
   y no como una tabla con fotos.

   Toda la tarjeta es un solo enlace: antes había dos —la foto y el botón— que
   llevaban al mismo lado, y en el teclado eran dos paradas para lo mismo. */
.prod { container-type: inline-size; }

.prod-enlace {
  display: flex; flex-direction: column; gap: 18px;
  color: var(--ink); text-decoration: none;
}
.prod-enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 6px;
                             border-radius: var(--r-tarjeta); }

.prod-foto {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1; padding: 12%;
  background: var(--panel); border-radius: var(--r-tarjeta);
  overflow: hidden;
}
.prod-foto img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply;
  transition: transform .5s var(--ease-out);
}
.prod-enlace:hover .prod-foto img { transform: scale(1.04); }
.prod-chip { position: absolute; top: 14px; left: 14px; }

.prod-datos {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
}
.prod-nombre {
  font-family: var(--fuente-titulo); font-size: 17px; font-weight: 600;
  letter-spacing: -0.012em; line-height: 1.3;
  transition: color .18s var(--ease);
}
.prod-enlace:hover .prod-nombre { color: var(--acento); }
.prod-resumen {
  font-size: 14px; color: var(--ink-2); line-height: 1.45;
  max-width: 30ch;
}
.prod-precio {
  font-family: var(--fuente-titulo); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; margin-top: 3px;
}
.prod-ahorro { font-size: 13px; color: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .prod-foto img, .prod-nombre { transition: none; }
  .prod-enlace:hover .prod-foto img { transform: none; }
}

@container (max-width: 220px) {
  .prod-nombre { font-size: 15.5px; }
  .prod-foto { padding: 9%; }
}

.barra-filtros { display: flex; gap: 12px; margin-top: 24px; align-items: center; }
.barra-filtros .campo { flex: 1 1 auto; min-width: 0; }
.barra-filtros .btn { flex: 0 0 auto; }
.filtros-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.filtros-chips .chip { text-decoration: none; }

.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 470px);
         gap: 72px; padding-top: 32px; align-items: start; }
.ficha-foto { aspect-ratio: 1 / 1; max-height: 560px; border-radius: var(--r-panel);
              background: var(--panel);
              display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ficha-foto img { max-height: 82%; max-width: 82%; width: auto; object-fit: contain;
                  mix-blend-mode: multiply; }
.ficha-miniaturas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.ficha-mini { aspect-ratio: 1 / 1; border-radius: var(--r-mini); background: var(--panel); overflow: hidden; }
.ficha-info { display: flex; flex-direction: column; min-width: 0; }
.ficha-precio { display: flex; align-items: baseline; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.ficha-form { margin-top: 28px; display: flex; flex-direction: column; }
.ficha-acciones { display: flex; gap: 12px; margin-top: 28px; }
.ficha-acciones .btn { flex-grow: 1; }
.campo-cantidad { width: 88px; flex-shrink: 0; text-align: center; }

.estado-ok { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
             font-size: 13px; font-weight: 500; color: var(--ok); }
.punto { width: 7px; height: 7px; border-radius: var(--r-pill);
         background: currentColor; display: inline-block; flex-shrink: 0; }
.punto-ok { background: var(--ok); } .punto-error { background: var(--error); }
.punto-off { background: var(--ink-3); }

/* Swatches y opciones. El foco se ve: son controles de teclado, no adornos. */
.swatches { display: flex; gap: 18px; margin-top: 4px; flex-wrap: wrap; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch span { display: block; width: 38px; height: 38px; border-radius: var(--r-pill);
               cursor: pointer; box-shadow: 0 0 0 1.5px rgba(0,0,0,.10);
               transition: box-shadow .2s var(--ease); }
.swatch input:checked + span { box-shadow: 0 0 0 1.5px rgba(0,0,0,.10),
                                           0 0 0 3px var(--bg), 0 0 0 5px var(--acento); }
.swatch input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 4px; }

.grid-modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid-modelos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.opcion { display: flex; flex-direction: column; justify-content: center; gap: 2px;
          min-height: 46px; padding: 8px 16px; border: 1px solid var(--linea-campo);
          border-radius: var(--r-mini); background: var(--surface);
          font-size: 15px; cursor: pointer; color: var(--ink);
          transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.opcion:hover { border-color: var(--ink-4); color: var(--ink); }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion:has(input:checked), .opcion-on { border: 1.5px solid var(--acento); background: #fbfcff; }
.opcion:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcion-off { background: #fafafb; border-color: var(--linea-tarjeta);
              color: var(--placeholder); cursor: not-allowed; }
.opcion-off:hover { border-color: var(--linea-tarjeta); color: var(--placeholder); }
.opcion-precio { min-height: 64px; }
.opcion-nombre { font-weight: 600; }
.opcion-precio-valor { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.opcion:has(input:checked) .opcion-precio-valor { color: var(--acento); font-weight: 600; }
.opcion-turno { flex-direction: row; align-items: center; font-size: 14px; font-weight: 500;
                border-radius: var(--r-pill); padding-inline: 18px; }

.opcion-caja { display: flex; align-items: flex-start; gap: 12px; padding: 20px;
               border: 1px solid var(--linea); border-radius: 16px;
               background: var(--surface); cursor: pointer;
               transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.opcion-caja:has(input:checked), .opcion-caja.opcion-on { border: 1.5px solid var(--acento); background: #fbfcff; }
.opcion-caja.opcion-off { background: #fafafb; color: var(--placeholder); cursor: not-allowed; }
.opcion-caja input { margin-top: 3px; accent-color: var(--acento); width: 18px; height: 18px;
                     flex-shrink: 0; }
.opcion-caja strong { display: block; font-size: 15px; font-weight: 600; }
.opcion-caja .t-nota { display: block; margin-top: 4px; }
.opcion-caja .pie-pagos { margin-left: auto; }

/* Vista previa del equipo elegido, en el resumen de la reparación. */
.modelo-elegido { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.modelo-foto { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--r-mini);
               background: var(--panel); display: flex; align-items: center;
               justify-content: center; overflow: hidden; }
.modelo-foto img { max-width: 78%; max-height: 78%; width: auto; object-fit: contain;
                   transition: opacity .22s var(--ease), transform .3s var(--ease-out); }
.modelo-foto img.cambiando { opacity: 0; transform: scale(.94); }
.modelo-elegido strong { display: block; font-size: 15px; font-weight: 600; }
.modelo-elegido .t-nota { display: block; margin-top: 2px; }

/* --- Carrito, checkout y resúmenes --------------------------------------- */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px;
                align-items: start; margin-top: 28px; }
.pasos { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px;
         align-items: start; padding-top: 36px; }
.pasos-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.resumen, .pasos-resumen { position: sticky; top: calc(var(--nav-h) + 20px); min-width: 0; }

.fila-paso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.num { width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--ink);
       color: #fff; font-size: 13px; font-weight: 600; display: flex;
       align-items: center; justify-content: center; flex-shrink: 0; }

.lista-carrito { padding: 8px 28px; }
.linea { display: flex; gap: 22px; align-items: center; padding: 26px 0;
         border-bottom: 1px solid #eeeef0; }
.linea:last-child { border-bottom: none; }
.linea-foto { width: 104px; height: 104px; flex-shrink: 0; border-radius: var(--r-mini);
              background: var(--panel); display: flex; align-items: center; justify-content: center; }
.linea-foto img { max-height: 88px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.linea-datos { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.linea-cantidad { width: 88px; flex-shrink: 0; }
.linea-cantidad .campo { text-align: center; height: 44px; }
.linea-precio { width: 110px; text-align: right; flex-shrink: 0; }
.boton-icono { width: 44px; height: 44px; display: flex; align-items: center;
               justify-content: center; background: none; border: 0;
               color: var(--ink-3); cursor: pointer; border-radius: var(--r-pill);
               flex-shrink: 0; transition: color .18s var(--ease), background-color .18s var(--ease); }
.boton-icono:hover { color: var(--ink); background: rgba(0,0,0,.045); }

.fila-total { display: flex; align-items: baseline; justify-content: space-between;
              gap: 16px; margin-top: 10px; }
.resumen-linea { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.resumen-linea strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.resumen-linea .t-nota { display: block; margin-top: 2px; }
.divisor { height: 1px; background: var(--divisor); margin: 22px 0; }

.lista-tildes { list-style: none; padding: 0; margin: 20px 0 0;
                display: flex; flex-direction: column; gap: 11px; }
.lista-tildes li { display: flex; gap: 10px; align-items: flex-start;
                   font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.lista-tildes .ico { color: var(--ok); stroke-width: 2.4; margin-top: 2px; }

.caja-terminos { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px;
                 padding: 16px; border-radius: var(--r-mini);
                 background: var(--acento-bg); border: 1px solid #dfe5f8;
                 font-size: 13px; line-height: 1.5; cursor: pointer; }
.caja-terminos.caja-simple { background: var(--surface); border-color: var(--linea-tarjeta); }
.caja-terminos input { margin-top: 2px; width: 17px; height: 17px;
                       accent-color: var(--acento); flex-shrink: 0; }

/* --- Panel interno -------------------------------------------------------- */
.aviso-interno { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px;
                 padding: 18px 22px; border-radius: 16px;
                 background: #fdf7e6; border: 1px solid #f0e0b0; color: #6b551a; }
.aviso-interno p { font-size: 14px; line-height: 1.55; margin: 0; }
.aviso-interno .ico { color: #8a6d1f; flex-shrink: 0; margin-top: 1px; }

.tabla-envoltorio { overflow-x: auto; margin-top: 16px;
                    border: 1px solid var(--linea-tarjeta); border-radius: var(--r-tarjeta);
                    background: var(--surface); -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; min-width: 860px; }
.tabla th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
            color: var(--ink-3); text-align: left; padding: 14px 24px;
            background: #fafafb; border-bottom: 1px solid #eeeef0; white-space: nowrap; }
.tabla td { padding: 16px 24px; border-bottom: 1px solid #eeeef0;
            font-size: 14px; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }
.tabla .der { text-align: right; }
.tabla .mono { font-family: "SF Mono", ui-monospace, Menlo, monospace;
               font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.tabla td .t-nota { display: block; margin-top: 2px; }
.tabla-pie { display: flex; align-items: center; justify-content: space-between;
             gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.tabla-pie .punto { margin-right: 6px; }

/* --- Páginas angostas (login, pago) --------------------------------------
   El max-width va acá adentro, NUNCA sobre .contenedor: ese ya trae su padding
   lateral y el contenido terminaba aplastado. */
.angosto { max-width: 420px; margin-inline: auto; }
.angosto .btn { width: 100%; }
.medio { max-width: 720px; margin-inline: auto; }

/* Mapa embebido de Google */
.mapa-embed { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

.programas { margin-top: 44px; }
.programas .tabla { min-width: 720px; }
/* El dibujo del equipo, al lado del nombre del programa. Ayuda a reconocer el
   propio de un vistazo en una lista larga. */
.fila-programa { display: flex; align-items: flex-start; gap: 14px; }
.programa-icono { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-mini);
                  background: var(--panel); color: var(--ink-2);
                  display: flex; align-items: center; justify-content: center; }
.fila-programa strong { font-weight: 600; }

/* En el celular una tabla de cuatro columnas se lee arrastrando de costado, que
   es la peor manera de leer nada. Cada fila pasa a ser una ficha: el nombre del
   programa arriba y los datos abajo, cada uno con su etiqueta. */
@media (max-width: 640px) {
  .programas { overflow-x: visible; }
  .programas .tabla { min-width: 0; display: block; }
  .programas thead { display: none; }
  .programas tbody, .programas tr, .programas td { display: block; width: 100%; }
  .programas tr { padding: 18px 20px; border-bottom: 1px solid #eeeef0; }
  .programas tr:last-child { border-bottom: 0; }
  .programas td { padding: 0; border: 0; }
  .programas td:first-child { font-size: 15px; line-height: 1.35; margin-bottom: 12px; }
  .fila-programa { align-items: center; }
  .programa-icono { width: 34px; height: 34px; }
  .programas td[data-th] { display: flex; gap: 14px; justify-content: space-between;
                           align-items: baseline; padding-block: 5px; text-align: left; }
  .programas td[data-th]::before {
    content: attr(data-th); flex: 0 0 auto;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-4);
  }
  .programas td[data-th]:empty { display: none; }
  .programas td.der { text-align: right; }
}


/* --- Movimiento ----------------------------------------------------------
   El contenido se revela al entrar en pantalla. El <noscript> del head deja
   todo visible si el JS no corre: nada queda escondido para siempre. */
@media (prefers-reduced-motion: no-preference) {
  /* Lo que está arriba de todo entra con una animación de CSS y no depende
     del observador: si el JS tarda, el hero no puede quedar en blanco. */
  .entrada { animation: entrada-subir .7s var(--ease-out) both; }
  .entrada-1 { animation-delay: .07s; }
  .entrada-2 { animation-delay: .14s; }
  .entrada-3 { animation-delay: .21s; }
  @keyframes entrada-subir {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }

  /* Nada se esconde hasta que el JS pone .rv-on en el <html>, y sólo lo pone
     cuando ya tiene el observador andando. Sin esa clase, .rv no hace nada:
     un bloque invisible para siempre es mucho peor que una animación que no
     se ve. Vale para el JS caído, la pestaña en segundo plano y el
     prerenderizado, donde el observador nunca contesta. */
  .rv-on .rv { opacity: 0; transform: translateY(12px);
               transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
  .rv-on .rv-visible { opacity: 1; transform: none; }
  /* La demora sale de una sola cuenta: el índice del elemento entre sus
     hermanos por 55 ms. El JS lo pone solo, así que un grupo nuevo cae en
     cascada sin que haya que escribir una clase por posición. Las clases
     siguen andando para cuando se quiera forzar un orden distinto. */
  .rv-on .rv { transition-delay: calc(var(--rv-i, 0) * 55ms); }
  /* «Fundido»: la misma entrada sin el desplazamiento. Es la única otra opción
     que tiene un bloque, a propósito: la duración y la curva son del sistema. */
  .rv-on .rv.rv-fundido { transform: none; }
  .rv-d1 { --rv-i: 1; }
  .rv-d2 { --rv-i: 2; }
  .rv-d3 { --rv-i: 3; }

  /* Las fotos entran con un fundido corto en vez de aparecer de golpe cuando
     terminan de bajar. Igual que el revelado: sólo se esconden si hay quién las
     vuelva a mostrar — la clase .img-on la pone el JS justo antes de engancharse
     a cada foto. Si el archivo no carga, no se esconde nada. */
  .img-on img[loading="lazy"] { opacity: 0; transition: opacity .5s var(--ease); }
  .img-on img[loading="lazy"].lista { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important;
                           transition-duration: 0.01ms !important;
                           scroll-behavior: auto !important; }
}

/* --- Páginas institucionales ---------------------------------------------
   El problema del diseño anterior no era el centrado: era que no había
   estructura. Un título a todo lo ancho y abajo una columna de texto de 640 px
   pegada a la izquierda se lee como un error de alineación, aunque el
   contenedor esté perfecto. Encabezado centrado + columna de lectura centrada
   + bandas a todo lo ancho: cada cosa alineada con algo. */
.pagina-hero { padding-top: var(--e8); text-align: center; }
.pagina-hero .t-etiqueta { display: block; margin-bottom: 14px; }
.pagina-bajada { font-size: 21px; line-height: 1.45; letter-spacing: -0.012em;
                 color: var(--ink-2); max-width: 660px; margin: 18px auto 0;
                 text-wrap: pretty; }

.banda-foto { margin-top: var(--e7); border-radius: var(--r-panel); overflow: hidden;
              background: var(--panel); aspect-ratio: 16 / 6; }
.banda-foto img { width: 100%; height: 100%; object-fit: cover; }
.banda-foto-contain img { object-fit: contain; padding: 20px; }

/* Columna de lectura. Centrada a propósito: es el ancho de línea cómodo, y
   centrado se lee como una decisión y no como un descuido. */
.prosa { max-width: 680px; margin-inline: auto; }
.prosa > p { font-size: 17px; line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.prosa > p + p { margin-top: 20px; }
.prosa > p strong, .prosa > p b { color: var(--ink); font-weight: 600; }
.prosa h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.022em;
            margin-top: 44px; margin-bottom: 12px; }
.prosa h2:first-child { margin-top: 0; }

/* Dato grande: una cifra sola, con su explicación abajo. */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 1px; background: var(--linea); border-block: 1px solid var(--linea);
          margin-top: var(--e8); }
.cifra { background: var(--surface); padding: var(--e7) 32px; text-align: center; }
.cifra-valor { font-size: 46px; line-height: 1.05; font-weight: 600;
               letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cifra .t-aux { margin-top: 8px; }

/* Cierre de página: el paso siguiente, siempre a la vista. */
.cierre { margin-top: var(--e8); padding: var(--e8) var(--e7); text-align: center;
          background: var(--surface); border: 1px solid var(--linea-tarjeta);
          border-radius: var(--r-panel); }
.cierre .hero-botones { margin-top: 26px; }

/* --- Banner ancho con foto de fondo -------------------------------------- */
.banner { position: relative; isolation: isolate; overflow: hidden;
          border-radius: var(--r-panel); background: var(--oscuro); color: #fff;
          min-height: 380px; display: flex; align-items: flex-end; }
.banner-foto { position: absolute; inset: 0; width: 100%; height: 100%;
               object-fit: cover; z-index: -2;
               transition: transform 1.2s var(--ease-out); }
.banner:hover .banner-foto { transform: scale(1.035); }

/* El banner con las fotos del local girando. `.rotador` trae de fábrica un
   16:9, un borde y 44 px de aire arriba que acá sobran: el alto lo pone el
   texto. Y se apaga el zoom del hover, que pelearía con la deriva. */
.banner.rotador { aspect-ratio: auto; margin-top: 0; border: 0;
                  background: var(--oscuro); border-radius: var(--r-panel); }
.banner-fotos { position: absolute; inset: 0; z-index: -2;
                list-style: none; margin: 0; padding: 0; }
.banner-fotos .rotador-slide { position: absolute; inset: 0; }
.banner-fotos .banner-foto { z-index: auto; }
.banner-local:hover .banner-foto { transform: none; }
.banner-local .banner-texto { position: relative; z-index: 1; }
.banner-local .rotador-puntos { z-index: 2; }
/* El cartel y la fachada tienen lo importante arriba; centrado se corta. */
.banner-fotos .banner-foto { object-position: center 38%; }
/* Velo oscuro: sin esto el texto blanco sobre una foto de día no se lee. */
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1;
                 background: linear-gradient(180deg, rgba(6,6,10,.05) 0%,
                             rgba(6,6,10,.55) 55%, rgba(6,6,10,.82) 100%); }
.banner-texto { padding: 48px; max-width: 620px; }
.banner-texto .t-etiqueta { color: rgba(255,255,255,.72); display: block; margin-bottom: 12px; }
.banner-texto .t-parrafo-2 { color: rgba(255,255,255,.82); margin-top: 12px; }
.banner-texto .btn { margin-top: 26px; }
.banner-datos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.banner-datos span { display: inline-flex; align-items: center; gap: 7px;
                     padding: 7px 13px; border-radius: var(--r-pill);
                     background: rgba(255,255,255,.13); color: #fff;
                     font-size: 13px; font-weight: 500;
                     -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* =========================================================================
   RESPUESTA AL ANCHO
   Cuatro cortes y ni uno más. 1080: el menú de 7 ítems no entra en una fila.
   900: se cae la segunda columna de las fichas y el checkout. 700: tablet
   angosta. 640: teléfono. La tarjeta de producto no usa ninguno: se acomoda
   por su propio ancho con una consulta de contenedor.
   ========================================================================= */

/* --- La tarjeta de producto, por su ancho ------------------------------- */
@container (max-width: 220px) {
  .prod-foto { height: auto; aspect-ratio: 1 / 1; }
  .prod-foto img { max-height: 76%; max-width: 76%; }
  .prod-cuerpo { padding: 14px 14px 16px; }
  .prod-pie { flex-direction: column; align-items: stretch; gap: 10px; }
  .prod-pie .btn-agregar { width: 100%; }
}

/* --- Hasta 1080: el menú de 7 ítems no entra en una fila ------------------ */
@media (max-width: 1080px) {
  .nav-hamburguesa { display: inline-flex; order: 3; }
  .nav-acciones { order: 2; margin-left: auto; }
  /* El menú de mobile cuelga de la barra. Arranca cerrado y se abre con la
     clase .abierto: el display discreto + @starting-style dejan que la
     aparición se anime en vez de aparecer de golpe. Donde el navegador no lo
     soporte, aparece sin transición — y funciona igual. */
  .nav-links {
    order: 4; display: none; position: fixed; top: calc(var(--franja-h) + var(--nav-h));
    left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--linea);
    padding: var(--e2) var(--lado) var(--e4);
    max-height: calc(100dvh - var(--franja-h) - var(--nav-h)); overflow-y: auto;
    opacity: 0; transform: translateY(-10px);
    transition: opacity .22s var(--ease), transform .28s var(--ease-out),
                display .28s var(--ease) allow-discrete;
  }
  .nav-links.abierto { display: flex; opacity: 1; transform: none; }
  @starting-style {
    .nav-links.abierto { opacity: 0; transform: translateY(-10px); }
  }
  .nav-links a { font-size: 16px; min-height: 48px; display: flex; align-items: center;
                 border-bottom: 1px solid var(--divisor); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a::after { display: none; }

  .ficha { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 40px; }
  .dos-columnas, .pasos { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
  .promesa { padding: 34px 32px; }
  .autorizado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Hasta 900: se cae la columna del resumen ---------------------------- */
@media (max-width: 900px) {
  :root { --e9: 44px; --e8: 44px; }

  .t-hero      { font-size: 44px; letter-spacing: -0.032em; line-height: 1.06; }
  .t-seccion   { font-size: 32px; letter-spacing: -0.028em; line-height: 1.14; }
  .t-pagina    { font-size: 32px; }
  .t-seccion-2 { font-size: 26px; }
  .t-bloque    { font-size: 23px; }
  .hero-bajada { font-size: 18px; }

  /* En mobile ningún control baja de 46. */
  .btn { min-height: 46px; }
  .btn-agregar { height: 44px; font-size: 14px; padding-inline: 18px; }
  .btn-terciario { height: 46px; }
  /* Los chips de filtro son controles, no etiquetas: se tocan con el pulgar. */
  .filtros-chips .chip { min-height: 44px; padding-inline: 16px; font-size: 13px; }
  .enlace-flecha { min-height: 44px; }

  .ficha, .dos-columnas, .pasos { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .resumen, .pasos-resumen { position: static; }
  .ficha-foto { aspect-ratio: 4 / 3; }

  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-modelos-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .autorizado { gap: var(--e3); }
  .autorizado-item { padding: 22px; }

  /* Ancho completo sólo donde el botón es la acción principal del bloque. */
  .hero-botones { flex-direction: column; align-items: stretch; }
  .hero-botones .btn, .bloque-texto .btn, .ficha-acciones .btn,
  .angosto .btn, .medio .btn { width: 100%; }

  .cabecera { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bloque-partido { flex-direction: column; }
  .bloque-texto { padding: 32px 28px; }
  .bloque-foto { min-height: 240px; }
  .bloque-mapa, .mapa-embed { min-height: 300px; }

  .lista-carrito { padding: 4px 20px; }
  .linea { flex-wrap: wrap; gap: 14px; row-gap: 10px; }
  .linea-precio { margin-left: auto; }

  .pie { padding-block: 40px 32px; }
  .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .pie-marca { grid-column: 1 / -1; }
  .pie-col a { min-height: 44px; display: flex; align-items: center; }
  .pie-legal { flex-direction: column; align-items: flex-start; gap: 16px; }

  .tarjeta-rep-cuerpo { padding: 26px; }
  .tarjeta-rep-foto img { padding: 14px; }
  .galeria-item { flex-basis: 78%; }
  .galeria-flechas { display: none; }
  .pagina-bajada { font-size: 17px; }
  .banda-foto { aspect-ratio: 4 / 3; margin-top: var(--e6); }
  .cifras { grid-template-columns: minmax(0, 1fr); }
  .cifra { padding: 26px 20px; }
  .cifra-valor { font-size: 34px; }
  .cierre { padding: var(--e7) 24px; }
  .banner { min-height: 320px; }
  .banner-texto { padding: 28px 24px; }
  .banner-texto .btn { width: 100%; }
  .tabla th, .tabla td { padding: 12px 16px; }
}

/* --- Hasta 700: tablet angosta ------------------------------------------- */
@media (max-width: 700px) {
  .promesas, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
  .promesa { padding: 26px var(--lado); }
  .autorizado { grid-template-columns: minmax(0, 1fr); }
  .ficha-miniaturas { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* --- Hasta 640: teléfono -------------------------------------------------- */
@media (max-width: 640px) {
  /* La franja NO se esconde: el sello de autorizado es lo más importante que
     tiene la página. Se le sacan la dirección y el teléfono, que ya están en
     el pie y en contacto, y queda sólo el sello, centrado. */
  :root { --franja-h: 32px; }
  .franja-fila { justify-content: center; gap: 0; }
  .franja a, .franja-sep { display: none; }
  .franja strong { font-size: 11.5px; }

  .t-hero { font-size: 40px; }
  .hero { padding-top: 36px; }
  .hero-foto { margin-top: 32px; }

  .barra-filtros { gap: 8px; }
  .barra-filtros .campo { flex: 1 1 0; min-width: 0; }
  .barra-filtros .btn { flex: 0 0 auto; padding-inline: 20px; }

  .grid-modelos, .grid-modelos-3 { grid-template-columns: minmax(0, 1fr); }
  .fila-precio { flex-direction: column; align-items: stretch; gap: 12px; }
  .fila-precio .btn { width: 100%; }

  .linea-datos { flex: 1 1 100%; order: 1; }
  .linea-foto { width: 72px; height: 72px; }
  .linea-foto img { max-height: 60px; }
  .linea-cantidad { order: 2; }
  .linea-precio { order: 3; text-align: right; }
  /* La cruz de quitar va arriba a la derecha, al lado de la foto: si queda con
     el orden por defecto aparece pegada a la miniatura y parece un error. */
  .linea > form:last-child { margin-left: auto; }

  .ficha-acciones { flex-wrap: wrap; }
  .ficha-acciones .campo-cantidad { width: 100%; }
  .lista-carrito { padding: 4px 16px; }
  .tarjeta-rep-cuerpo { padding: 20px; }
  .bloque-texto { padding: 24px 20px; }
  .opcion-caja { flex-wrap: wrap; }
  .opcion-caja .pie-pagos { margin-left: 0; }
}

/* --- WhatsApp flotante -----------------------------------------------------
   Abajo a la derecha, sobre todo lo demás. En el celular se achica a la burbuja
   sola: el texto al lado se comería media pantalla justo donde está el pulgar. */
.wa-flotante {
  position: fixed;
  /* A la izquierda: la derecha es donde el pulgar sube y baja la página, y un
     botón justo ahí se aprieta sin querer. */
  left: clamp(16px, 3vw, 26px);
  bottom: calc(clamp(16px, 3vw, 26px) + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  /* Verde de WhatsApp, pero apagado: el verde de la marca a full contra un
     sitio de grises y azul grita, y esto tiene que estar disponible sin pedir
     atención. Se aviva al pasar por encima. */
  background: #f0f7f2;
  color: #1c7a45;
  border: 1px solid #d7e8de;
  text-decoration: none;
  box-shadow: 0 2px 10px rgb(20 22 30 / .08);
  transition: background var(--t-rapida, 160ms) ease,
              color var(--t-rapida, 160ms) ease,
              border-color var(--t-rapida, 160ms) ease;
}
.wa-flotante .ico { width: 22px; height: 22px; }
.wa-flotante:hover {
  background: #25d366;
  border-color: #25d366;
  color: #06331a;
}
.wa-flotante:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .wa-flotante { transition: none; } }
@media print { .wa-flotante { display: none; } }

/* --- Bloques propios de la portada ----------------------------------------
   Los escribe quien atiende desde el panel. Se apoyan en las clases que ya usa
   el resto del sitio para que no se noten pegados. */
.bloque-panel { background: var(--panel); }
.bloque-centrado { max-width: 680px; margin-inline: auto; text-align: center; }
.bloque-centrado .t-etiqueta { display: block; margin-bottom: 10px; }
.bloque-llamada { padding: clamp(32px, 5vw, 56px); text-align: center;
                  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bloque-llamada .btn { margin-top: 10px; }


/* --- Volver arriba ---------------------------------------------------------
   Aparece recién cuando bajaste lo suficiente como para que volver a mano sea
   un fastidio. Antes de eso no está: un botón que no hace falta es ruido. */
.ir-arriba {
  position: fixed;
  right: clamp(16px, 3vw, 26px);
  bottom: calc(clamp(16px, 3vw, 26px) + env(safe-area-inset-bottom));
  z-index: 59;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--linea); border-radius: 50%;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  box-shadow: 0 2px 10px rgb(20 22 30 / .10);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-rapida, 160ms) ease,
              visibility var(--t-rapida, 160ms) ease,
              transform var(--t-rapida, 160ms) ease,
              color var(--t-rapida, 160ms) ease;
}
.ir-arriba.se-ve { opacity: 1; visibility: visible; transform: none; }
.ir-arriba:hover { color: var(--ink); border-color: var(--ink-3); }
.ir-arriba:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.ir-arriba .ico { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .ir-arriba { transition: opacity 1ms linear; transform: none; }
}
@media print { .ir-arriba { display: none; } }

/* --- La promesa de los reacondicionados ------------------------------------
   Va arriba de la grilla y antes de cualquier precio. Quien mira un usado no
   duda del descuento: duda de si anda. */
.promesas-refu {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: 18px 30px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.promesas-refu li { display: flex; gap: 12px; align-items: flex-start; }
.promesas-refu .ico { width: 20px; height: 20px; color: var(--ok); margin-top: 2px; }
.promesas-refu strong { display: block; font-size: 15px; font-weight: 600;
                        letter-spacing: -0.008em; }
.promesas-refu span { display: block; margin-top: 3px; font-size: 14px;
                      color: var(--ink-2); line-height: 1.45; }

/* --- Miniaturas de la tarjeta ----------------------------------------------
   Los colores de las variantes y las otras fotos, debajo del precio. Es la
   dinámica que hace que una grilla de productos se sienta una tienda: se ve
   que hay más sin tener que entrar a cada ficha. */
.prod-miniaturas {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-top: 12px;
}

.prod-color {
  width: 15px; height: 15px; padding: 0; border-radius: 50%;
  background: var(--color); cursor: pointer;
  border: 1px solid rgb(0 0 0 / .16);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px transparent;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
/* Sin cursor ni foco: informan, no se tocan. Ver el comentario de _tarjeta.html. */
.prod-color { cursor: default; pointer-events: auto; }
.prod-color-inactivo:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink-3);
  outline: none;
}

.prod-mini {
  width: 34px; height: 34px; padding: 3px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--linea-tarjeta);
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .18s var(--ease);
}
.prod-mini img { max-width: 100%; max-height: 100%; object-fit: contain;
                 mix-blend-mode: multiply; }
.prod-mini:hover, .prod-mini:focus-visible { border-color: var(--ink-3); outline: none; }

@media (prefers-reduced-motion: reduce) {
  .prod-color { transition: none; }
  .prod-color-inactivo:hover { transform: none; }
}

/* --- Opiniones de Google ---------------------------------------------------
   Discreto y verificable. Las estrellas en ámbar, que es el color que la gente
   ya asocia con una calificación, y el resto en el gris del sitio para que no
   grite. */
.opiniones {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px; padding: 9px 14px 9px 12px;
  border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--linea);
  text-decoration: none; color: var(--ink-2); font-size: 14px;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.opiniones:hover { border-color: var(--ink-3); color: var(--ink); }
.opiniones-estrellas { display: inline-flex; gap: 1px; }
.opiniones-estrellas svg { width: 15px; height: 15px; fill: #f0a020; stroke: none; }
.opiniones-texto strong { color: var(--ink); font-weight: 600; }
.opiniones .ico { color: var(--ink-4); }
.hero-encima .opiniones { align-self: flex-start; }

@media (max-width: 900px) { .hero-encima .opiniones { align-self: center; } }

/* La tarjeta de opiniones del hero: a la derecha, sobre la parte nítida de la
   foto. Es el mismo dato que la píldora, con el puntaje grande adelante para
   que se lea de un vistazo y el «verlas en Google» explícito: el enlace es lo
   que convierte el número en algo comprobable, así que se nombra. */
/* Los botones del encabezado de una página. En pantalla chica ocupan el ancho:
   en un teléfono el pulgar no busca un botón angosto centrado. */
.pagina-botones { margin-top: 26px; }
@media (max-width: 640px) {
  .pagina-botones { flex-direction: column; align-items: stretch; }
  .pagina-botones .btn { justify-content: center; }
}

.opiniones-tarjeta {
  position: absolute; right: 28px; bottom: 84px; z-index: 4;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 16px;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(22,22,26,.08);
  box-shadow: 0 6px 28px rgba(0,0,0,.10);
  text-decoration: none; color: var(--ink-2);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease);
}
.opiniones-tarjeta:hover {
  transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0,0,0,.14);
}
.opiniones-puntaje {
  font-size: 34px; font-weight: 600; line-height: 1; color: var(--ink);
  font-family: var(--tipo-titulo, inherit);
}
.opiniones-detalle { display: flex; flex-direction: column; gap: 3px; }
.opiniones-cuantas { font-size: 13px; color: var(--ink-3); }
.opiniones-ver {
  font-size: 13px; font-weight: 600; color: var(--accion, #0b57d0);
  display: inline-flex; align-items: center; gap: 3px;
}
.opiniones-ver .ico { color: currentColor; }

@media (max-width: 900px) {
  /* En pantalla chica no hay «derecha de la foto»: vuelve al hilo, después del
     texto, centrada y sin flotar sobre nada. */
  .opiniones-tarjeta {
    position: static; margin: 18px auto 0; display: inline-flex;
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .hero-fusion { text-align: center; }
}

/* --- Recuadro con fotos del local ------------------------------------------
   Se apoya en el rotador del hero. 3:2 en vez de 16:9 porque las fotos del
   local son verticales de contenido: se pierde menos. */


/* --- Contacto: las vías directas, primero ---------------------------------- */
.contacto-directo {
  display: grid; gap: 14px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.contacto-via {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 24px; border-radius: var(--r-tarjeta);
  background: var(--surface); border: 1px solid var(--linea-tarjeta);
  text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.contacto-via:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.contacto-via strong { display: block; font-size: 16px; font-weight: 600; }
.contacto-via .t-nota { display: block; margin-top: 2px; }
.contacto-valor { display: block; margin-top: 10px; font-size: 16px;
                  font-weight: 600; color: var(--acento); }
.contacto-icono { display: grid; place-items: center; flex: none;
                  width: 42px; height: 42px; border-radius: 50%;
                  background: var(--acento-bg); color: var(--acento); }
.contacto-icono.contacto-wa { background: #f0f7f2; color: #1c7a45; }

@media (prefers-reduced-motion: reduce) {
  .contacto-via { transition: none; }
  .contacto-via:hover { transform: none; }
}

/* El turnero de Apple: presente y claro, pero sin competir con el contacto
   directo que está arriba. */
.caja-turnero {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding: 22px 24px;
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
}
.caja-turnero .ico { color: var(--ink-3); flex: none; margin-top: 2px; }
.caja-turnero .crece { flex: 1; min-width: 260px; }
.caja-turnero strong { font-size: 16px; font-weight: 600; }

/* Los puntitos del recuadro del local, abajo a la derecha: arriba en el centro
   tapaban justo el cartel, que es lo que la foto tiene que mostrar. */

/* =========================================================================
   La tienda, con la dinámica del store de Apple
   ========================================================================= */

/* Un titular grande y solo, con la segunda frase en gris. Es lo que hace Apple
   en «Store. The best way to buy...»: una sola línea que cambia de color a la
   mitad, y ningún adorno alrededor. */
/* La cabecera de apple.com/store: el nombre de la página enorme a la izquierda
   y, arriba a la derecha, la frase que la explica con dos enlaces debajo. El
   peso está repartido en dos esquinas en vez de apilado en una columna. */
.portada {
  /* `padding-block` y NO el atajo `padding`: el atajo pone en cero los lados y
     eso borra el margen lateral que trae `.contenedor`, con lo que el título
     terminaba pegado al borde de la ventana. */
  padding-block: 52px 8px;
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: flex-start; justify-content: space-between;
}
.portada-nombre {
  /* 46 px en un monitor de 1280 y 56 en uno ancho. Estaba en 80 fijo: en Apple
     «Store» llega a ese cuerpo recién a 2000 px de ventana, y además es una
     palabra de cinco letras. «Reacondicionados» al mismo tamaño se come el
     renglón entero. */
  font-size: clamp(32px, 3.6vw, 56px); line-height: 1.02;
  letter-spacing: -0.034em; font-weight: 600;
}
.portada-lado { margin-left: auto; max-width: 32ch; text-align: right; }
.portada-lema {
  font-size: clamp(16px, 1.5vw, 21px); line-height: 1.24;
  font-weight: 600; letter-spacing: -0.016em;
  font-family: var(--fuente-titulo);
}
.portada-enlace {
  display: block; margin-top: 9px; font-size: 15px;
  color: var(--acento); text-decoration: none;
}
.portada-enlace:hover { text-decoration: underline; }
.portada-enlace .ico { width: 12px; height: 12px; vertical-align: -1px; margin-left: 2px; }
@media (max-width: 760px) {
  /* Apilado y todo a la izquierda: en pantalla angosta las dos esquinas quedan
     una arriba de la otra, y un párrafo alineado a la derecha ahí se lee mal. */
  .portada { padding-top: 34px; }
  .portada-lado { margin-left: 0; text-align: left; max-width: none; }
}


/* La tira de categorías. Ancha de verdad: se arrastra de costado y el primer y
   último item respiran contra el borde. */
.tira { margin-top: 30px; }
.tira-pista {
  display: flex; gap: 8px; list-style: none; margin: 0; padding-block: 4px 14px;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  /* `safe` es la palabra clave que importa: con cinco categorías sobra ancho y
     van centradas, pero cuando sean quince y haya que arrastrar, un `center`
     pelado dejaría la primera cortada del lado de afuera, sin forma de llegar
     a ella. Con `safe` se alinea al comienzo apenas hay desborde. */
  justify-content: safe center;
}
.tira-pista::-webkit-scrollbar { display: none; }
.tira-pista > li { flex: 0 0 auto; scroll-snap-align: start; }
.tira-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 152px; padding: 10px 8px 12px;
  text-decoration: none; color: var(--ink-2);
  transition: color .25s var(--ease);
}
.tira-item:hover, .tira-item.activo { color: var(--ink); }
/* Sin círculo ni recuadro: el producto recortado sobre el fondo de la página,
   que es como lo muestra Apple. Un círculo obliga a recortar la foto y a un
   cable enrollado o a un soporte abierto los parte por la mitad. */
.tira-foto {
  --alto-foto: 104px;
  width: 100%; height: var(--alto-foto);
  display: grid; place-items: center;
  color: var(--ink-3);
  transition: transform .35s var(--ease-out);
}
.tira-item:hover .tira-foto { transform: translateY(-4px); }
.tira-item.activo .tira-foto { color: var(--ink); }
/* El tope en píxeles y no en `100%`: adentro de una grilla el porcentaje se
   mide contra el área de la celda, que el navegador trata como indefinida, y
   `max-height: 100%` termina computando `none`. La foto cuadrada de 2000 px se
   resolvía entonces por el ancho —136×136 en una caja de 104— y el sobrante
   caía encima del nombre de la categoría. */
.tira-foto img {
  max-width: 100%; max-height: var(--alto-foto);
  width: auto; height: auto;
  object-fit: contain; display: block;
  /* Las fotos vienen de tres orígenes con tres fondos: las de Apple traen un
     gris #F5F5F7 incrustado, las nuestras con transparencia salen en WebP y las
     que no tienen alfa salen en JPEG sobre blanco puro. Sin esto, las últimas
     se ven como un rectángulo blanco recortado sobre el gris de la página.
     `multiply` sobre fondo claro deja el blanco en el color del fondo y no toca
     lo oscuro: los tres orígenes quedan iguales sin retocar ningún archivo. */
  mix-blend-mode: multiply;
}
.tira-nombre { font-size: 13px; font-weight: 500; text-align: center; line-height: 1.25; }
/* Subrayado de la categoría abierta, como la pestaña activa del menú. */
.tira-item.activo .tira-nombre { box-shadow: 0 2px 0 var(--ink); padding-bottom: 3px; }

/* --- El carrusel de destacados ---------------------------------------------
   La pista va a todo el ancho de la ventana aunque el marco viva adentro del
   contenedor: así la tarjeta siguiente asoma por el borde derecho y se ve que
   hay más. El padding la vuelve a alinear con el resto de la página.

   Ese asomo es intencional y es el que hacía parecer «cortado» al vidrio
   templado cuando no había flechas: sin un control a la vista, media tarjeta
   se lee como un error de maquetado y no como una invitación a seguir. */
.carrusel-marco { position: relative; margin-top: 28px; }
.carrusel {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-block: 4px 20px;
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--lado), calc((100vw - var(--contenedor)) / 2 + var(--lado)));
  scroll-padding-inline: max(var(--lado), calc((100vw - var(--contenedor)) / 2 + var(--lado)));
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.carrusel > * { flex: 0 0 clamp(250px, 27vw, 330px); scroll-snap-align: start; }

.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.86); color: var(--ink);
  box-shadow: 0 2px 14px rgb(0 0 0 / .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .2s var(--ease), transform .2s var(--ease-out);
}
.carrusel-flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.carrusel-flecha[hidden] { display: none; }
.carrusel-antes { left: -10px; }
.carrusel-antes .ico { transform: rotate(180deg); }
.carrusel-despues { right: -10px; }
@media (hover: none) {
  /* En pantalla táctil se arrastra con el dedo: las flechas sólo tapan. */
  .carrusel-flecha { display: none; }
}

/* --- La tarjeta grande del carrusel ---------------------------------------- */
.prod-grande {
  display: flex; flex-direction: column;
  padding: 26px 24px 22px; border-radius: 20px;
  background: #fff; border: 1px solid var(--linea-tarjeta);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.prod-grande:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgb(0 0 0 / .07); }
.prod-grande-enlace {
  display: flex; flex-direction: column; flex: 1;
  color: inherit; text-decoration: none;
}
.prod-grande-enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 6px; border-radius: 10px; }
.prod-grande-nombre { font-size: 21px; line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; }
.prod-grande-resumen { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.prod-grande-foto {
  position: relative; display: grid; place-items: center;
  flex: 1; min-height: 190px; margin-top: 18px;
}
.prod-grande-foto img { max-width: 100%; max-height: 210px; object-fit: contain; display: block; }
.prod-grande-colores { display: flex; gap: 7px; justify-content: center; margin-top: 14px; }
.prod-color-punto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.prod-grande-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px;
}
.prod-grande-precio { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.btn-comprar { padding: 9px 20px; font-size: 14px; }

/* Título de sección en dos tonos, como «The latest. Take a look...» */
.t-seccion-doble span { color: var(--ink-3); }

/* Las tres fichas de «Cómo comprar». Dos son enlaces y una no: se ven igual,
   pero solo las que llevan a algún lado se levantan al pasar el mouse. */
.modo-compra { display: block; padding: 26px; text-decoration: none; color: inherit; }
.modo-compra .ico-lg { color: var(--ink-3); }
.modo-compra h3 { margin-top: 14px; font-size: 17px; letter-spacing: -0.015em; }
.modo-compra p { margin-top: 6px; }
a.modo-compra { transition: transform .3s var(--ease-out), border-color .3s var(--ease); }
a.modo-compra:hover { transform: translateY(-3px); border-color: var(--linea); }

@media (max-width: 700px) {
  .portada { padding-block: 34px 4px; }   /* block y no el atajo: los lados los pone .contenedor */
  .tira-item { width: 104px; }
  .tira-foto { width: 60px; height: 60px; }
}

/* La miniatura del programa: dibujo del equipo por defecto, y la foto que
   publica Apple cuando la cargaron. La foto va sin relleno y a sangre del
   círculo; el dibujo, centrado y con aire. */
/* La foto entera adentro del cuadrito, no recortada: con `cover` un MacBook
   —que es ancho— entraba partido por la mitad y no se reconocía, que es
   justamente para lo que está la miniatura. Un poco más grande que el dibujo,
   porque una foto necesita más lugar que un icono para leerse. */
.programa-icono.con-foto { width: 52px; height: 52px; padding: 5px; overflow: hidden; }
.programa-icono.con-foto img {
  max-width: 100%; max-height: 42px; width: auto; height: auto;
  object-fit: contain; display: block; margin: auto;
}

/* Los equipos que no tienen precio publicado: no llevan botón propio porque no
   hay nada que elegir todavía — el llamado a la acción es uno solo, al final. */
.otro-equipo { padding: 26px; }
.otro-equipo .ico-lg { color: var(--ink-3); }
.otro-equipo h3 { margin-top: 14px; font-size: 17px; letter-spacing: -0.015em; }
.otro-equipo p { margin-top: 6px; }

.cierre-traelo {
  margin-top: 28px; padding: 26px 30px; border-radius: var(--r-panel);
  background: var(--panel); border: 1px solid var(--linea-tarjeta);
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.cierre-traelo p { margin-top: 4px; color: var(--ink-2); }
.cierre-traelo-botones { display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================================
   La retícula «bento» de la tienda
   -------------------------------------------------------------------------
   Una ficha alta a la izquierda y seis chicas al lado, como «The Apple Store
   difference». Sobre 1680 px de caja entran 4 columnas: la alta ocupa una y
   las seis chicas llenan las otras tres en dos filas.
   ========================================================================= */
.bento {
  display: grid; gap: 18px; margin-top: 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bento-alta {
  grid-row: span 2;
  display: flex; flex-direction: column;
  padding: 28px; border-radius: 20px;
  background: #fff; border: 1px solid var(--linea-tarjeta);
}
.bento-etiqueta {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #b25000;
}
.bento-alta .t-bloque { margin-top: 10px; }
.bento-alta p { margin-top: 8px; }
/* La foto se estira hasta el pie de la ficha, que es lo que le da el aire de
   pieza de vidriera: el texto arriba, la imagen ocupando todo lo que sobra. */
.bento-foto {
  flex: 1; min-height: 190px; margin-top: 20px;
  border-radius: 14px; overflow: hidden; background: var(--panel);
  display: block;
}
.bento-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bento-ficha {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px; border-radius: 20px;
  background: #fff; border: 1px solid var(--linea-tarjeta);
}
.bento-ficha .ico-lg { color: var(--tinte, var(--ink-3)); }
.bento-ficha p {
  font-size: 19px; line-height: 1.28; letter-spacing: -0.016em;
  font-family: var(--fuente-titulo); font-weight: 600;
  color: var(--ink); text-wrap: pretty;
}
/* La mitad que queremos que quede, en el color de la ficha. El resto en negro:
   si se pintara todo, no resaltaría nada. */
.bento-ficha b, .bento-ficha strong { color: var(--tinte, var(--ink)); font-weight: 600; }

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-alta { grid-row: span 1; grid-column: span 2; }
  .bento-foto { min-height: 220px; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento-alta { grid-column: span 1; }
  .bento-ficha p { font-size: 17px; }
}

/* La prosa a dos columnas cuando hay lugar. El tope de 680 px por columna se
   mantiene: lo que cambia es que entran dos, no que el renglón se estire. */
.prosa-columnas {
  max-width: none;
  display: grid; gap: 8px 64px;
  grid-template-columns: repeat(2, minmax(0, 620px));
  justify-content: center;
  align-items: start;
}
.prosa-columnas .prosa-bloque { margin-bottom: 30px; }
/* El primer bloque es la bajada, sin subtítulo: va solo, cruzando las dos
   columnas, porque es la entrada al texto y no un tema más. */
.prosa-columnas .prosa-bloque:first-child:not(:has(h2)) {
  grid-column: 1 / -1; max-width: 720px;
}
.prosa-columnas h2 { margin-top: 0; }
@media (max-width: 1040px) {
  .prosa-columnas { grid-template-columns: minmax(0, 680px); }
}

/* Texto sólo para lectores de pantalla. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Bloques propios: formas nuevas y variantes -------------------------- */
.bloque-partido.foto-izquierda { flex-direction: row-reverse; }
@media (max-width: 900px) { .bloque-partido.foto-izquierda { flex-direction: column; } }
.bloque-llamada .bloque-icono { display: block; margin: 0 auto 14px; color: var(--acento); width: 36px; height: 36px; }

.galeria-bloque { margin-top: 8px; }
.galeria-foto { margin: 0; }
.galeria-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.galeria-foto figcaption { margin-top: 8px; }

.preguntas { max-width: 760px; margin: 8px auto 0; border-top: 1px solid var(--linea-tarjeta); }
.pregunta { border-bottom: 1px solid var(--linea-tarjeta); padding: 4px 0; }
.pregunta summary { cursor: pointer; padding: 14px 32px 14px 0; position: relative; list-style: none; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; position: absolute; right: 4px; top: 12px; color: var(--accion); font-size: 20px; font-weight: 400; }
.pregunta[open] summary::after { content: "–"; }
.pregunta p { padding: 0 0 16px; }

.testimonios { margin-top: 8px; }
.testimonio { margin: 0; padding: 28px; }
.testimonio blockquote { margin: 0; }
.testimonio figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonio figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonio figcaption span span { display: block; }
.testimonio-cita { padding: 8px 0; }
.testimonio-cita blockquote { font-size: 22px; line-height: 1.35; }
.bloque-oscuro .testimonio.tarjeta { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }

.video-bloque { max-width: 1100px; margin: 8px auto 0; }
.video-bloque.video-angosto { max-width: 720px; }
.video-bloque iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; display: block; }
.video-vacio { padding: 48px 20px; text-align: center; border: 1px dashed var(--linea-tarjeta); border-radius: 12px; }
.video-link { text-align: center; margin-top: 8px; }

.separador { border: 0; height: 1px; margin: 0; background: var(--linea-tarjeta); }
.separador-espacio { background: transparent; height: 32px; }
.bloque-propio:has(> .separador) { padding-block: 8px; }

/* --- Menú con subítems --------------------------------------------------- */
.nav-grupo { position: relative; }
.nav-abre { display: inline-flex; align-items: center; gap: 4px; border: 0;
            background: transparent; cursor: pointer; font: inherit;
            color: inherit; padding: 0; }
.nav-abre .ico { transition: transform .18s var(--ease); }
.nav-abre[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav-desplegable {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 220px; margin: 0; padding: 8px; list-style: none; z-index: 40;
  background: var(--surface); border: 1px solid var(--linea-tarjeta);
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.10);
  display: none;
}
.nav-abre[aria-expanded="true"] + .nav-desplegable { display: block; }
.nav-desplegable a { display: block; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.nav-desplegable a:hover, .nav-desplegable a:focus { background: var(--panel); }

/* En el teléfono el menú es una columna: los hijos van indentados bajo el padre,
   siempre a la vista. Un desplegable adentro de un desplegable no se toca. */
@media (max-width: 1080px) {
  .nav-grupo { width: 100%; }
  .nav-abre { pointer-events: none; opacity: .7; font-size: 13px;
              text-transform: uppercase; letter-spacing: .04em; }
  .nav-abre .ico { display: none; }
  .nav-desplegable { display: block; position: static; transform: none;
                     border: 0; box-shadow: none; background: transparent;
                     padding: 0 0 0 14px; min-width: 0; }
  .nav-desplegable a { padding: 8px 0; }
}