/* ==========================================================================
   PARIDAD DE FORMATOS
   Hoja final: iguala lo que las capas anteriores dejaban distinto entre el
   formato de pantalla completa y el resto (tablet, vertical, móvil). Se carga
   la última en todas las páginas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Navegación 720–1079 px
   A partir de 1080 la navegación es una píldora con borde, fondo translúcido
   y enlaces de 0.67rem. Entre 720 y 1079 sólo la portada la mostraba, y lo
   hacía desnuda: sin píldora, sin fondo y con el cuerpo bajado a 0.58rem, así
   que el mismo menú se leía como otro componente. Aquí se reconstruye la
   misma píldora, a escala, y se extiende al resto de páginas.
   -------------------------------------------------------------------------- */
@media (min-width: 720px) and (max-width: 1079px) {
  .main-nav,
  body.page-home .main-nav {
    position: fixed !important;
    top: 22px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 10023 !important;
    display: block !important;
    width: max-content !important;
    height: auto !important;
    max-height: none !important;
    padding: 4px !important;
    overflow: visible !important;
    border: 1px solid var(--neo-line, rgba(198, 198, 198, 0.2)) !important;
    border-radius: 15px 4px 15px 4px !important;
    background: linear-gradient(135deg, rgba(23, 23, 23, 0.82), rgba(4, 4, 4, 0.76)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 16px 40px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(18px) saturate(145%);
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) !important;
  }

  .main-nav ul,
  body.page-home .main-nav ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: max-content !important;
    height: auto !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-nav li {
    margin: 0 !important;
    border: 0 !important;
  }

  .main-nav a,
  body.page-home .main-nav a {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 10px !important;
    border-radius: 10px 3px 10px 3px !important;
    color: rgba(245, 248, 255, 0.7) !important;
    /* Por debajo de 900 la hoja base cambiaba los enlaces a la display
       condensada: el mismo menú parecía otra marca. */
    font-family: "Archivo", Arial, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.09em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Sin esto el subrayado deslizante de la versión compacta pintaba una línea
     suelta bajo la píldora. */
  .main-nav a::before,
  .main-nav a::after,
  body.page-home .main-nav a::before,
  body.page-home .main-nav a::after {
    display: none !important;
  }

  .site-header .main-nav a:hover,
  .site-header .main-nav a:focus-visible {
    color: var(--neo-ice, #f5f7ff) !important;
    background: rgba(255, 255, 255, 0.07) !important;
  }

  .site-header .main-nav a[aria-current="page"] {
    color: #2be72e !important;
    background: rgba(43, 231, 46, 0.16) !important;
    box-shadow: inset 0 -2px #2be72e !important;
  }
}

/* Con la navegación visible entre 720 y 1079, el logo y las acciones vuelven
   a las esquinas como en pantalla completa (el bloque compacto los centraba
   y los dejaba pisando la píldora). */
@media (min-width: 720px) and (max-width: 899px) {
  .site-header .logo,
  body.rh-intro-running .site-header .logo,
  body.rh-intro-complete .site-header .logo {
    left: 24px !important;
    transform: none !important;
  }

  .header-actions {
    right: 24px !important;
    left: auto !important;
    width: auto !important;
    justify-content: flex-end !important;
  }
}

/* --------------------------------------------------------------------------
   2. Filigrana "T-MAXX" de la sección destacada
   En pantalla completa la filigrana vive detrás del titular, en la columna
   izquierda, recortada por el borde. Al apilarse la sección el titular sube y
   la filigrana se queda a la altura de la foto del producto —que es opaca—,
   así que de los 272px sólo asomaban 14 por la izquierda: se leía como un
   rectángulo gris suelto, no como una marca de agua.

   Aquí se ancla al titular, centrada como el resto del bloque apilado.
   -------------------------------------------------------------------------- */
/* Sólo en vertical: en apaisado la sección recupera las dos columnas de la
   referencia (bloque 9), y con ellas la filigrana anclada al borde izquierdo
   que tiene allí. */
@media (max-width: 899px) and (orientation: portrait) {
  .page-home .feature-hero .ghost {
    top: 21% !important;
    left: 50% !important;
    font-size: 30vw !important;
  }
}

/* --------------------------------------------------------------------------
   3. Abanico de la comunidad en teléfonos
   La apertura ya estaba topada para que la ficha exterior entrara completa,
   pero el ancho de ficha (36vw) no bajaba con ella: a 390px las siete fichas
   se repartían 172px de apertura con 101px de ancho cada una, o sea un 70% de
   solape. El abanico dejaba de leerse como un abanico.

   Bajando la ficha a 22vw la apertura sube a ~128px y el solape cae al 20–40%,
   que es el aire con el que se leen las siete en pantalla completa. Por encima
   de 600px no cambia nada: ahí el abanico ya respiraba.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  /* Las dos declaraciones tienen que moverse juntas: `--fan-card-w` sólo
     alimenta el cálculo de la apertura, el ancho real lo fija esta otra. */
  .page-home .community-section .social-fan {
    --fan-card-w: clamp(84px, 22.5vw, 112px);
  }

  /* El alto es una declaración aparte: al bajar sólo el ancho, las fichas
     pasaban de 1.5:1 a 2.4:1 y se leían como tiras, no como reels. */
  .page-home .community-section .social-fan .deck-card {
    width: clamp(84px, 22.5vw, 112px) !important;
    height: clamp(126px, 33.75vw, 168px) !important;
  }

  /* -56px estaba calculado para el abanico de tablet; sobre uno más corto los
     botones caían en mitad de las fichas en vez de apoyarse en su base. */
  .community-section .social-links {
    margin-top: clamp(-56px, -7vw, -20px) !important;
  }
}

/* Las fichas del abanico están ancladas al pie de `.social-fan`, así que el
   alto de esa caja es el que decide cuánto aire queda entre el titular y el
   abanico. En pantalla completa ese hueco es del 4% del alto de pantalla; con
   el alto heredado se iba al 10% en tablet y al 26% en teléfono, y la sección
   se partía en dos. Los valores de abajo devuelven el mismo margen de holgura
   sobre la ficha (~11%) que tiene la referencia ancha. */
@media (min-width: 600px) and (max-width: 899px) {
  .page-home .community-section .social-fan {
    height: clamp(230px, 36vw, 300px) !important;
  }
}

@media (max-width: 599px) {
  .page-home .community-section .social-fan {
    height: clamp(150px, 40vw, 200px) !important;
  }
}

/* --------------------------------------------------------------------------
   4. Manifiesto en vertical
   La capa móvil conservaba la pendiente de escritorio (7.15vw) para que las
   cuatro frases cayeran en una línea cada una, igual que en pantalla completa.
   El corte de línea salía idéntico, pero el cuerpo bajaba a 29px: el bloque
   pasaba de ocupar el 53% de la pantalla a ocupar el 13%, y el manifiesto
   —que en ancho es la escena más rotunda del sitio— se leía como un pie de
   página perdido en medio de la sección.

   Se prioriza el peso sobre el corte: las frases pueden partirse en dos
   líneas y el cuerpo sube hasta que el bloque vuelve a ocupar ~53% del alto.
   `min(vw, svh)` es lo que impide que en una tablet vertical (768 × 1024) el
   mismo 14.5vw se coma la pantalla entera.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) and (orientation: portrait) {
  .ln-manifesto-copy {
    font-size: clamp(34px, min(14.5vw, 8svh), 7.8rem) !important;
    line-height: 0.96 !important;
  }

  /* Sin esto la cuarta frase (que va en `nowrap`) se salía de pantalla en
     cuanto el cuerpo subía. */
  .ln-manifesto-copy .ln-serif {
    white-space: normal !important;
  }
}

/* --------------------------------------------------------------------------
   5. Filas de datos de "Estamos en Quito"
   El sangrado negativo de las filas (-8px en ancho, -12px en compacto) está
   pensado para morder el canal del contenedor sin salirse: con 60px de canal
   la fila sigue entrando 52px; con 14px se iba a 2px y las líneas separadoras
   quedaban pegadas al borde de la pantalla, en vez de alineadas con el
   titular como en pantalla completa.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .info-item {
    margin-inline: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   6. Fotos de las tarjetas de proceso (Nosotros / Servicio técnico)
   El -18px de sangrado está pensado para una tarjeta con 18px de relleno
   lateral, pero por debajo de 900 la tarjeta va sin relleno: la foto acababa
   36px más ancha que su propia tarjeta y la primera del carril se salía de la
   pantalla por la izquierda (se leía "sión" en vez de "Pasión"). En pantalla
   completa la foto ocupa exactamente el ancho de la tarjeta.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .static-step-card .step-media {
    margin-inline: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   7. Halo verde del pie
   El halo se define con un radio absoluto (27rem = 432px). Sobre 1440px eso
   es el 30% del ancho y se lee como un reflejo en la esquina; sobre 390px
   cubre el 110% y teñía de verde el pie entero. Se topa al mismo 30% del
   ancho para que el reflejo ocupe siempre la misma proporción.
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  .site-footer {
    background:
      linear-gradient(rgba(47, 255, 50, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(47, 255, 50, 0.055) 1px, transparent 1px),
      radial-gradient(circle at 84% 18%, rgba(61, 254, 64, 0.11), transparent min(27rem, 30vw)),
      #000000 !important;
    /* La retícula también es absoluta: 72px sobre 1440 son 20 columnas que se
       leen como textura; sobre 390 quedaban 5 columnas y se veía como una
       cuadrícula dibujada. Atada al ancho mantiene las 20 columnas. */
    background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px),
      clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto !important;
  }
}

/* --------------------------------------------------------------------------
   8. Retícula y halos de las páginas internas
   Mismo problema que en el pie, y en todas las secciones de las páginas
   internas: la retícula se declara en 72px y los halos en rem. Sobre 1440px
   la retícula da 20 columnas (textura) y el halo mide un tercio del ancho;
   sobre 390px quedan 5 columnas dibujadas y el halo cubre la pantalla entera,
   así que el mismo fondo cambia de carácter según el dispositivo.

   Aquí las dos cosas pasan a ser proporcionales al ancho: los valores en
   1440px son exactamente los actuales (5vw = 72px, 34vw = 31rem…), así que
   el formato de pantalla completa no se mueve ni un píxel.
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  .page-hero {
    background:
      linear-gradient(rgba(67, 198, 69, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(67, 198, 69, 0.09) 1px, transparent 1px),
      radial-gradient(circle at 72% 25%, rgba(47, 255, 50, 0.18), transparent min(29rem, 32vw)),
      radial-gradient(circle at 15% 78%, rgba(61, 254, 64, 0.13), transparent min(27rem, 30vw)),
      var(--neo-night) !important;
    background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px),
      clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto, auto !important;
  }

  body:not(.page-home) .page-hero {
    background-color: var(--rh-internal-night) !important;
    background-image:
      linear-gradient(rgba(67, 198, 69, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(67, 198, 69, 0.09) 1px, transparent 1px),
      radial-gradient(circle at 74% 28%, rgba(47, 255, 50, 0.2), transparent min(31rem, 34vw)),
      radial-gradient(circle at 13% 81%, rgba(61, 254, 64, 0.15), transparent min(29rem, 32vw)),
      linear-gradient(155deg, #0a0a0a, #000000) !important;
    background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px),
      clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto, auto !important;
  }

  body:not(.page-home) main > section {
    background-image:
      linear-gradient(rgba(67, 198, 69, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(67, 198, 69, 0.07) 1px, transparent 1px),
      radial-gradient(circle at 84% 22%, rgba(47, 255, 50, 0.16), transparent min(31rem, 34vw)),
      radial-gradient(circle at 12% 82%, rgba(61, 254, 64, 0.1), transparent min(29rem, 32vw)) !important;
    background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px),
      clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto !important;
  }

  body:not(.page-home) main > section:nth-of-type(even) {
    background-image:
      linear-gradient(rgba(67, 198, 69, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(67, 198, 69, 0.055) 1px, transparent 1px),
      radial-gradient(circle at 16% 18%, rgba(47, 255, 50, 0.15), transparent min(30rem, 33vw)),
      radial-gradient(circle at 88% 78%, rgba(61, 254, 64, 0.11), transparent min(30rem, 33vw)),
      linear-gradient(145deg, #0a0a0a, #000000) !important;
    background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px),
      clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto, auto !important;
  }
}

/* La misma retícula, dentro de las tarjetas grandes (404 y banda de catálogo):
   44px sobre una tarjeta de 760px son 17 columnas; sobre una de 359px eran 8.
   5.5vw da 44px justos a 1440 y ~21px en teléfono, o sea las mismas columnas. */
@media (max-width: 1439px) {
  .page-error .error-page .container,
  .page-catalog .pit-band .container {
    background-size: min(44px, 5.5vw) min(44px, 5.5vw),
      min(44px, 5.5vw) min(44px, 5.5vw), auto !important;
  }
}

/* ==========================================================================
   9. Secciones de la portada en apaisado de teléfono
   Las escenas de la portada están fijadas a `100svh`, y sus cabeceras están
   dimensionadas en `vw` con suelos en px pensados para pantallas altas. En un
   teléfono en horizontal (844 × 390) esos suelos se comían el 65% del alto —
   en la referencia ancha son el 47%— y lo que quedaba era inservible:

     · las fichas del carril quedaban en 300 × 137 (relación 2.2:1 en vez de
       0.78:1), o sea una banda con la foto recortada;
     · la vitrina se pasaba 42px del alto fijado y se cortaba;
     · en la ficha destacada la foto del producto se quedaba en 2px de alto —
       el producto protagonista, literalmente invisible.

   Todo lo de abajo devuelve las proporciones de la referencia ancha atando
   cabeceras y rellenos al alto de pantalla. El corte a 500px de alto deja
   fuera las ventanas de 600 y 700 px, que ya funcionaban.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  /* --- Carriles horizontales (categorías y vitrina) ------------------- */
  html.lando-anim [data-lando-horizontal] {
    padding-block: 10svh 4svh !important;
  }

  /* 8svh reproduce el 16% del alto que ocupa el titular de dos líneas en la
     referencia ancha (81px sobre 900). El suelo de 3.6rem lo dejaba en 58px
     sobre 390, o sea el 26%. */
  html.lando-anim [data-lando-horizontal] .sec-title,
  html.lando-anim .page-home .editorial-garage .sec-title,
  html.lando-anim .page-home .home-showcase .sec-title {
    font-size: min(10.6vw, 8svh) !important;
    line-height: 0.94 !important;
  }

  /* El tope de 8ch partía "EXPLORA POR CATEGORÍA" en TRES líneas (en ancho
     son dos), y esa tercera línea es justo el alto que les falta a las
     fichas. 6.42em son los 13ch de la referencia ancha medidos sobre Anton,
     pero en una unidad que no cambia con la fuente resuelta. */
  html.lando-anim [data-lando-horizontal] .sec-title,
  html.lando-anim .page-home .editorial-garage .sec-title,
  html.lando-anim .page-home .home-showcase .sec-title {
    max-width: 6.42em !important;
  }

  html.lando-anim [data-lando-horizontal] .sec-head,
  html.lando-anim [data-lando-horizontal] .vitrina-head {
    margin-bottom: 3svh !important;
  }

  /* La ficha recupera la relación de la referencia ancha (374 × 480) sobre el
     alto que le queda a la banda.

     El `min-width` no es cosmético: el carril sólo se fija y se desplaza si
     el recorrido supera los 300px (si no, `main.js` le quita el atributo y la
     sección deja de ser una escena). Con fichas de 177px el carril medía 953
     sobre 844 de pantalla, se desactivaba, y las dos últimas fichas quedaban
     recortadas sin forma de llegar a ellas.

     El ancho va en `svh`, no en `aspect-ratio` sobre `height: 100%`: con la
     relación de aspecto el ancho depende del alto que el carril tenga en el
     instante en que `main.js` lo mide, y esa medida ocurre antes de que la
     escena se fije. Salía un carril corto, se desactivaba, y con él se caía
     el `height: 100svh` de la sección. */
  html.lando-anim .page-home [data-lando-htrack] > .rh-hcard {
    width: max(220px, calc(56svh * 0.78)) !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
  }

  /* --- Ficha destacada: vuelve a dos columnas ------------------------- */
  /* Apilada no cabe: sólo el titular pedía 90px de los 390 disponibles. En
     apaisado la pantalla es ancha, así que se recupera exactamente la
     retícula de la referencia (copia a la izquierda, producto a la derecha)
     que ya está declarada fuera de las media queries. */
  .page-home .feature-hero {
    padding-block: 9svh 4svh !important;
  }

  /* La retícula de la referencia reserva `minmax(420px, 1.1fr)` para la foto:
     sobre un contenedor de 619px (667 de pantalla) eso dejaba la columna de
     texto en 138px, el nombre del producto se partía en cinco líneas y las
     acciones caían 56px por debajo del borde de la escena. Aquí las dos
     columnas se reparten el ancho y ninguna tiene suelo en píxeles. */
  .page-home .feature-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
    flex-direction: row !important;
    min-height: 0 !important;
    height: 100% !important;
    align-content: center !important;
    text-align: left !important;
    row-gap: 1.5svh !important;
  }

  .page-home .feature-tag,
  .page-home .feature-name,
  .page-home .feature-price,
  .page-home .feature-inner > .hero-ctas {
    order: 0 !important;
    align-self: center !important;
    justify-self: start !important;
    text-align: left !important;
  }

  .page-home .feature-name {
    max-width: 100% !important;
    /* 12.8svh es el peso que tiene el titular del producto en la referencia
       ancha (115px sobre 900). */
    font-size: min(8vw, 12.8svh) !important;
    line-height: 0.86 !important;
  }

  /* Alto definido, no `100%`: como la sección es de alto automático, un
     `height: 100%` se resolvía en `auto` y la foto pasaba a medir lo que le
     pedía su proporción (392px sobre un viewport de 430). Eso estiraba la
     sección a 470 y cortaba el botón "Ver ficha". 81svh es justo la banda que
     dejan los rellenos (15svh arriba, 3svh abajo) con un par de píxeles de
     margen. */
  .page-home .feature-visual {
    order: 0 !important;
    flex: none !important;
    width: 100% !important;
    height: 81svh !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .page-home .feature-hero .hero-ctas {
    margin-top: 1.5svh !important;
  }
}

/* Las fichas de producto de la vitrina no son como las de categorías: su
   cuerpo (categoría, nombre, precio y botón) mide 160px fijos. Sobre la banda
   de 227px que deja un teléfono en horizontal, a la foto le quedaban 63px y el
   producto —lo único que importa de esa tarjeta— desaparecía.

   En apaisado la ficha se tumba: foto a la izquierda, datos a la derecha. Es
   el mismo contenido y la misma jerarquía que en pantalla completa, sobre la
   forma que pide una pantalla apaisada. */
@media (orientation: landscape) and (max-height: 500px) {
  html.lando-anim .page-home .home-showcase [data-lando-htrack] > .rh-hcard {
    width: max(330px, calc(56svh * 1.2)) !important;
  }

  .page-home .vitrina-grid .tile .rh-card {
    flex-direction: row !important;
    align-items: stretch !important;
  }

  /* La especificidad tiene que superar a
     `html.lando-anim [data-lando-htrack] > .rh-hcard .tile-media`, que fija
     `flex: auto !important` para la retícula en columna. */
  html.lando-anim .page-home .vitrina-grid .tile .rh-card .tile-media,
  html.lando-anim .page-home .vitrina-grid .tile .rh-card .prod-media {
    flex: 0 0 46% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  html.lando-anim .page-home .vitrina-grid .tile .rh-card .tile-body,
  html.lando-anim .page-home .vitrina-grid .tile .rh-card .prod-body {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 12px 14px !important;
  }
}

/* El menú inmersivo escala su tipografía con el ancho: en un teléfono en
   horizontal (844 × 390) los enlaces salían a 89.6px y la lista medía 527px
   sobre 390 de pantalla — de los cinco enlaces sólo se llegaba a tres, y sin
   forma de bajar. Se topa por alto: 7.2svh deja la lista en el ~42% de la
   pantalla, entre el 48% de la referencia ancha y el 37% del móvil vertical. */
@media (orientation: landscape) and (max-height: 500px) {
  .rh-nav-link {
    font-size: min(10.6vw, 7.2svh) !important;
    line-height: 0.98 !important;
  }

  .rh-nav-panel {
    align-content: center !important;
  }

  .rh-nav-content {
    align-self: center !important;
  }

  .rh-nav-meta {
    margin-top: 2svh !important;
  }
}

/* ==========================================================================
   10. Páginas internas en apaisado de teléfono
   Los rellenos y los titulares de las páginas internas están en `vw`: sobre
   una pantalla ancha y baja (844 × 390) el relleno vertical de una sección
   sumaba el 47% del alto —en la referencia ancha es el 35%— y el titular de
   portadilla salía a 109px por línea, o sea 300px de las 390 disponibles.
   Nada se cortaba, porque estas secciones no van fijadas, pero cada bloque
   pedía dos pantallas de scroll donde en ancho ocupa una.

   Los topes de abajo reproducen la proporción de la referencia ancha
   (17.6% de relleno, 12.8% de alto por línea de titular).
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  /* Las escenas fijadas quedan fuera: su relleno lo fija el bloque 9, más
     apretado, porque ahí el alto se reparte con el carril. */
  body:not(.page-home) main > section:not(.page-hero):not([data-lando-horizontal]),
  body:not(.page-home) .pin-spacer > section:not(.page-hero):not([data-lando-horizontal]) {
    padding-block: clamp(44px, 17.6svh, 168px) !important;
  }

  .page-hero {
    padding-block: clamp(60px, 16.4svh, 148px) clamp(28px, 10svh, 90px) !important;
    min-height: 0 !important;
  }

  /* La lista de clases de página no es decorativa: cada página redeclara el
     titular de portadilla con `.page-about .page-hero h1` y equivalentes, y
     un `.page-hero h1` a secas pierde contra ellas por especificidad. */
  .page-about .page-hero h1,
  .page-catalog .page-hero h1,
  .page-contact .page-hero h1,
  .page-error .page-hero h1,
  .page-garantia .page-hero h1,
  .page-privacy .page-hero h1,
  .page-service .page-hero h1 {
    font-size: min(17vw, 12.8svh) !important;
  }

  /* `body:not(.page-home) .sec-title` es exactamente el selector que declara
     el tamaño compacto: repetirlo aquí gana por orden, no por especificidad. */
  body:not(.page-home) .sec-title,
  .page-home .community-section .sec-title,
  .page-home .home-location .sec-title {
    font-size: min(10vw, 9.5svh) !important;
  }
}

/* La ficha de producto en apaisado de teléfono
   En pantalla completa la ficha mide 780 × 428 sobre 900 de alto: se ve
   entera y queda por debajo de la cabecera. Sobre 390 de alto pedía 422px de
   contenido dentro de un tope de 343, así que el precio y "Agregar al
   carrito" —el único punto de acción de la ficha— quedaban fuera de vista, y
   además la píldora de navegación (z-index 10023, contra los 140 del velo)
   se pintaba por encima del borde superior de la tarjeta.

   Se comprimen los rellenos hasta que el contenido entra completo y el velo
   pasa por delante de la cabecera. Sólo aquí: en ancho la ficha ya cabe y la
   cabecera nunca la toca. */
@media (orientation: landscape) and (max-height: 500px) {
  .modal-backdrop {
    z-index: 10040 !important;
  }

  .modal {
    max-height: 94svh !important;
  }

  .modal-media,
  .modal-body {
    padding: 14px 16px !important;
  }

  .modal-body {
    gap: 8px !important;
  }

  .modal-specs {
    padding-block: 4px !important;
  }

  .modal-foot {
    padding-top: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   11. Número duplicado en las tarjetas de proceso
   `.step::before` es un contador CSS que en pantalla completa está anulado
   (`content: none`), porque dentro de un carril el número lo pinta `main.js`
   como `.rh-card-num`, superpuesto sobre la foto. Por debajo de 900px el
   contador vuelve a activarse: la tarjeta mostraba DOS números y, como el
   `::before` va en flujo (48px de cuerpo + 16 de margen), empujaba el resto
   de la tarjeta 64px hacia abajo. En un teléfono en horizontal eso bastaba
   para que el pie de la tarjeta se saliera de la escena fijada.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  html.lando-anim [data-lando-htrack] > .static-step-card::before {
    content: none !important;
  }
}

/* En las páginas internas el número del carril es un acento verde sobre la
   foto (`--neo-orange-hot`), pero esa regla está detrás de un `min-width:
   900px`: por debajo caía a la marca de agua gris del carril de la portada
   —invisible sobre las fotos— y las tarjetas de proceso perdían su numeración
   ordinal, que es lo que las convierte en pasos. */
@media (max-width: 899px) {
  html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard .rh-card-num {
    color: var(--neo-orange-hot) !important;
    opacity: 0.92 !important;
  }
}


/* El ordinal del carril se dibuja sobre la foto. En pantalla completa entra
   un 12% del ancho de la tarjeta; en compacto se pegaba a 14px de la esquina
   (un 5%) y se leía como una etiqueta de sistema, no como parte de la
   composición. */
@media (max-width: 899px) {
  html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard .rh-card-num {
    top: 8% !important;
    left: 11% !important;
  }
}

/* ==========================================================================
   PANTALLAS BAJAS — apaisado de teléfono y ventanas cortas
   En vertical las tres escenas de pantalla completa ya miden 100svh, pero con
   390px de alto (un teléfono girado) los suelos de las fórmulas anteriores
   —92px de relleno, un abanico de 300px, una tarjeta de mapa de 279px— sumaban
   663px en comunidad y 476px en ubicación. Aquí todo pasa a estar acotado por
   ALTO además de por ancho. Se activa por `max-height`, así que ningún
   escritorio ni tablet en vertical entra: a 900px o 1024px de alto no aplica.
   ========================================================================== */
@media (max-height: 620px) and (min-width: 600px) {
  .page-home .community-section {
    padding-block: clamp(20px, 6svh, 92px) clamp(10px, 3svh, 46px) !important;
  }

  .page-home .community-section .sec-title {
    font-size: min(clamp(3.35rem, 14vw, 5.1rem), 10svh) !important;
  }

  .page-home .community-section .social-fan {
    height: min(clamp(342px, 99vw, 456px), 41svh) !important;
    margin-block: clamp(10px, 3svh, 42px) clamp(8px, 2svh, 24px) !important;
  }

  .page-home .community-section .social-fan .deck-card {
    width: min(clamp(128px, 36vw, 188px), 30svh) !important;
    height: min(clamp(195px, 54vw, 285px), 44svh) !important;
  }

  .page-home .community-section .social-links {
    margin-block: 0 clamp(8px, 2svh, 24px) !important;
  }

  .page-home .home-location {
    padding: clamp(20px, 6svh, 118px) 0 clamp(10px, 2.5svh, 42px) !important;
  }

  .page-home .home-location .sec-title {
    font-size: min(clamp(2.1rem, 10.6vw, 3.6rem), 9.6svh) !important;
  }

  .page-home .home-location .sec-head {
    margin-bottom: clamp(6px, 1.6svh, 26px) !important;
  }

  /* Dos columnas: la fila mide lo que el más alto de los dos bloques, así que
     ambos tienen que caber en el hueco que deja el rótulo. */
  .page-home .home-location .info-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(12px, 2vw, 30px) !important;
  }

  .page-home .home-location .info-item {
    gap: 10px !important;
    padding: clamp(1px, 0.5svh, 8px) 6px !important;
  }

  .page-home .home-location .info-item h3 {
    margin-bottom: 1px !important;
    font-size: 0.58rem !important;
  }

  .page-home .home-location .info-item p,
  .page-home .home-location .info-item a {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  .page-home .home-location .map-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .page-home .home-location .map-consent {
    position: static !important;
    gap: 4px !important;
    padding: clamp(8px, 2svh, 28px) 14px clamp(64px, 18svh, 92px) !important;
  }

  .page-home .home-location .map-consent h3 {
    font-size: min(clamp(1.3rem, 5.3vw, 2.4rem), 7.5svh) !important;
  }

  .page-home .home-location .map-pin {
    width: clamp(26px, 7svh, 48px) !important;
    height: clamp(26px, 7svh, 48px) !important;
  }

  .page-home .home-location .map-pin svg {
    width: 45% !important;
    height: 45% !important;
  }

  /* El producto protagonista y las galerías ya se ciñen a 100svh, pero su
     relleno superior dejaba el rótulo pegado a la cabecera fija. */
  .page-home .feature-hero {
    padding: clamp(52px, 15svh, 128px) 0 clamp(12px, 3svh, 56px) !important;
  }

  html.lando-anim [data-lando-horizontal] {
    padding: clamp(52px, 15svh, 112px) 0 clamp(10px, 3svh, 52px) !important;
  }
}

/* El botón flotante del mapa mide 50px + 16 de separación: la reserva
   inferior del aviso tiene que superarlos o asoma por debajo del borde. */
@media (max-height: 620px) and (min-width: 600px) {
  .page-home .home-location .map-card .map-cta {
    left: 14px !important;
    bottom: 12px !important;
    min-height: 42px !important;
    padding-inline: 16px !important;
    font-size: 0.62rem !important;
  }
}

/* El hero en pantallas bajas. La retícula de dos columnas se conserva, pero
   sus medidas verticales tenían suelos en píxeles (180px de arranque, 76px de
   hueco antes de las acciones) pensados para un teléfono en vertical: sobre
   390px de alto empujaban las acciones al 93-97%, contra el 76-89% de la
   referencia ancha. Aquí cada tramo pasa a estar acotado por `svh`. */
@media (max-height: 620px) and (min-width: 600px) {
  .page-home .hero-meta {
    /* Por debajo del logotipo de la cabecera (22px + 54 de alto). */
    top: clamp(80px, 15svh, 168px) !important;
  }

  .page-home .hero,
  .page-home .hero > .container {
    /* El suelo de 152px no es decorativo: el bloque de meta arranca a 80px y
       mide 61 (ciudad + píldora de horario), así que acaba en 141. Sin el
       suelo, `31svh` devolvía 121px a 844x390 y 116 a 667x375 y el titular se
       pintaba ENCIMA de la píldora de horario. Por encima de 500px de alto el
       `min()` sigue mandando y el valor no se mueve (182 a 1024x600, 190 a
       1440x700). */
    --home-title-top: max(152px, min(clamp(180px, 30.4svh, 340px), 31svh));
    --home-copy-size: min(clamp(1.5rem, 7.9vw, 5.6rem), 10svh);
    --home-sub-gap: clamp(8px, 2.4svh, 40px);
    --home-cta-gap: clamp(30px, 9svh, 200px);
  }

  .page-home .hero .hero-ctas .btn {
    min-height: 42px !important;
  }

  /* Los últimos 14px de ubicación a 667x375. */
  .page-home .home-location .info-list {
    gap: 0 !important;
  }
}

/* Teléfonos pequeños girados (667x375): la lista de seis datos es la columna
   más alta y dejaba la sección 11px por encima de la pantalla. */
@media (max-height: 400px) and (min-width: 600px) {
  .page-home .home-location {
    padding-top: 16px !important;
  }

  .page-home .home-location .info-item h3 {
    font-size: 0.54rem !important;
  }

  .page-home .home-location .info-item p,
  .page-home .home-location .info-item a {
    font-size: 0.66rem !important;
    line-height: 1.16 !important;
  }
}

/* --------------------------------------------------------------------------
   12. Carrito con productos en apaisado de teléfono
   El pie del carrito (total, botón de pedido, vaciar y nota legal) mide 237px
   fijos. En pantalla completa eso es el 30% de un cajón de 792px y a la lista
   le quedan 466. Sobre 390 de alto el cajón mide 343, el pie sigue midiendo
   237 y a la lista le quedaban **21px**: el carrito se abría con el total y el
   botón, pero sin ningún producto a la vista.

   El cajón pasa a ocupar la pantalla completa (en apaisado no hay sitio para
   dejarlo por debajo de la cabecera, y además la píldora de navegación se le
   pintaba encima), y cabecera y pie se comprimen hasta devolver a la lista el
   ~60% del alto que tiene en la referencia ancha.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
  .cart-drawer {
    top: 0 !important;
    height: 100svh !important;
    max-height: 100svh !important;
    z-index: 10040 !important;
  }

  .cart-head {
    padding: 10px 18px !important;
  }

  .cart-items {
    padding-block: 6px !important;
  }

  .cart-foot {
    padding: 10px 18px 12px !important;
    gap: 8px !important;
  }

  .cart-note {
    font-size: 0.62rem !important;
    line-height: 1.25 !important;
  }
}

/* El rótulo "Categorías · desliza para explorar →" se mostraba en todos los
   formatos, pero el carril de categorías sólo se desliza por debajo de 560px:
   por encima las categorías se reparten en dos filas y la instrucción era
   falsa. Se muestra sólo donde el gesto existe. */
@media (min-width: 561px) {
  .catalog-rail-hint {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   13. Remates de la capa de pantallas bajas
   Dos cosas que la retícula de dos columnas y el abanico todavía no resolvían
   con 375–430px de alto.
   -------------------------------------------------------------------------- */

/* a) Las acciones del producto destacado. A 932x430 la columna izquierda mide
   354px y los dos botones piden 381: se partían en dos filas, la sección
   crecía a 470px sobre un viewport de 430 y "Ver ficha" quedaba cortada. Con
   el relleno atado al ancho caben en una fila, como en pantalla completa. */
@media (orientation: landscape) and (max-height: 500px) {
  .page-home .feature-hero .hero-ctas {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .page-home .feature-hero .hero-ctas .btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding-inline: clamp(10px, 1.6vw, 22px) !important;
    white-space: nowrap !important;
  }
}

/* b) El abanico de la comunidad. Las fichas son más altas que la caja del
   abanico y su escalonado vertical (`--fan-y`) va en píxeles fijos pensados
   para una caja de 400px: sobre una de 154 las empujaba por encima del
   titular y por debajo del borde de la escena. Ficha y escalonado pasan a
   `svh` conservando las proporciones de la referencia ancha (19% / 11% / 4.5%
   del alto del abanico). */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .page-home .community-section .social-fan .deck-card {
    width: min(clamp(128px, 36vw, 188px), 21svh) !important;
    height: min(clamp(195px, 54vw, 285px), 32svh) !important;
  }

  .page-home .community-section .social-fan .deck-card:nth-child(1),
  .page-home .community-section .social-fan .deck-card:nth-child(7) {
    --fan-y: 7.8svh;
  }

  .page-home .community-section .social-fan .deck-card:nth-child(2),
  .page-home .community-section .social-fan .deck-card:nth-child(6) {
    --fan-y: 4.6svh;
  }

  .page-home .community-section .social-fan .deck-card:nth-child(3),
  .page-home .community-section .social-fan .deck-card:nth-child(5) {
    --fan-y: 1.85svh;
  }

  .page-home .community-section .social-fan .deck-card:nth-child(4) {
    --fan-y: 0;
  }
}