/* -------------------------------------------------- hero a pantalla completa
   La foto es el fondo, de borde a borde; el texto va sobre un degradé crema
   que empieza opaco a la izquierda y se abre hacia la derecha, donde está el
   sujeto de cada foto. */
.hero {
  position: relative;
  width: 100%;
  /* Lo que queda de pantalla debajo del nav: así los botones nunca caen fuera. */
  height: min(calc(100svh - var(--nav-h, 130px)), 780px);
  min-height: 540px;
  overflow: hidden;
  padding: 0;
}

.hero__bg { position: absolute; inset: 0; z-index: 1; }

/* Disolvencia cinematográfica: la que entra se funde ENCIMA de la que sale
   (que se mantiene opaca con .is-leaving hasta que termina el fundido), así
   nunca se ve el fondo crema en el medio. Ken Burns lento en cada slide,
   alternando acercar/alejar y el punto de origen para que no se repita. */
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: opacity var(--hero-fade, 1.8s) cubic-bezier(.45, .05, .25, 1);
  animation-duration: var(--hero-ken, 8.6s);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.hero__slide.is-leaving { opacity: 1; z-index: 1; }
.hero__slide.is-active  { opacity: 1; z-index: 2; }
/* Fundido inverso: si se vuelve a la foto que estaba saliendo (todavía opaca
   debajo), la que entraba se apaga ENCIMA en vez de que la otra la tape en
   seco. main.js la marca .is-out mientras dura la transición. */
.hero__slide.is-out     { opacity: 0; z-index: 3; }
.hero__slide:nth-child(3n + 1) { transform-origin: 58% 60%; }
.hero__slide:nth-child(3n + 2) { transform-origin: 66% 30%; }
.hero__slide:nth-child(3n + 3) { transform-origin: 42% 32%; }
@media (prefers-reduced-motion: no-preference) {
  .hero__slide:is(.is-active, .is-leaving, .is-out):nth-child(3n + 1) { animation-name: heroKenIn;  }
  .hero__slide:is(.is-active, .is-leaving, .is-out):nth-child(3n + 2) { animation-name: heroKenOut; }
  .hero__slide:is(.is-active, .is-leaving, .is-out):nth-child(3n + 3) { animation-name: heroKenIn;  }
}
@keyframes heroKenIn  { from { transform: scale(1);    } to { transform: scale(1.06); } }
@keyframes heroKenOut { from { transform: scale(1.06); } to { transform: scale(1);    } }

.hero__overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(248,246,242,.98) 0%,
      rgba(248,246,242,.95) 30%,
      rgba(248,246,242,.66) 47%,
      rgba(248,246,242,.16) 64%,
      rgba(248,246,242,0) 78%),
    linear-gradient(to top, rgba(20,18,16,.28), transparent 42%);
}

.hero__inner {
  position: relative; z-index: 3;
  height: 100%;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 3vw, 2rem);
  /* Franja reservada abajo para las barras de progreso (.hero__dots): el
     contenido se centra en lo que queda arriba y nunca las pisa, ni en
     ventanas bajas donde el hero se queda en su min-height. */
  --hero-dots-zona: calc(clamp(1.1rem, 3vw, 2.25rem) + 2.5rem);
  padding-bottom: var(--hero-dots-zona);
  display: flex; align-items: center;
}
.hero__content { max-width: 42rem; }
.hero__title { margin-bottom: 1.4rem; }
/* Tres tratamientos en un mismo título: macizo, contorno y resaltado. */
.hero__title em {
  font-style: normal; display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.hero__title .mark { color: var(--ink); background: var(--accent); padding-inline: .12em; }
.hero__lead { margin-bottom: 1.9rem; color: var(--fg); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__rki {
  position: absolute; z-index: 4;
  /* Corrido a la izquierda del botón flotante de WhatsApp, que vive ahí. */
  right: calc(clamp(1rem, 3vw, 2.5rem) + 70px);
  bottom: clamp(1rem, 3vw, 2.5rem);
  margin: 0;
}

/* Indicador de progreso del hero: tres barras finas abajo a la izquierda,
   alineadas con el texto. La activa se llena con --accent durante la vida
   del slide (--hero-dur); main.js escucha el animationend para avanzar, así
   pausar la animación pausa también el ciclo. Los crea main.js. */
.hero__dots {
  position: absolute; z-index: 4;
  left: clamp(1.15rem, 3vw, 2rem);
  bottom: clamp(1.1rem, 3vw, 2.25rem);
  display: flex; gap: .55rem;
  margin: 0; padding: 0;
}
.hero__dot {
  appearance: none; -webkit-appearance: none;
  position: relative; display: block;
  width: 36px; padding: .7rem 0; margin: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--ink);
}
.hero__dot::before, .hero__dot::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
}
.hero__dot::before { background: rgba(20, 18, 16, .25); }
.hero__dot::after {
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  animation-duration: var(--hero-dur, 6.5s);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__dot[aria-current="true"]::after { animation-name: heroBarra; }
}
.hero.is-paused .hero__dot::after { animation-play-state: paused; }
.hero__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@keyframes heroBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  /* Sin Ken Burns, sin fundido y sin rotación automática (no hay animationend
     que la dispare); los indicadores cambian de imagen al instante. */
  .hero__slide { transition: none; transform: none; }
  .hero__dot[aria-current="true"]::after { transform: scaleX(1); }
}

@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; }
  /* overflow hidden: el zoom del Ken Burns escala la foto y, sin recorte, se
     asomaba una franja nítida por debajo del degradé, sobre el texto. */
  .hero__bg { position: relative; height: 46vh; min-height: 260px; overflow: hidden; }
  .hero__slide { position: absolute; }
  /* Anclado arriba, del mismo alto que .hero__bg: así el degradé cae sobre
     el borde inferior de la foto y no sobre el bloque de texto. */
  .hero__overlay {
    inset: 0 0 auto 0; height: 46vh; min-height: 260px;
    background: linear-gradient(to top, rgba(248,246,242,.96), rgba(248,246,242,.1) 65%);
  }
  .hero__inner { padding-block: clamp(1.75rem, 6vw, 2.5rem) clamp(2rem, 7vw, 3rem); }
  .hero__slide { object-position: 50% 22% !important; }
  .hero__content { max-width: none; }
  .hero__rki { position: static; margin: 1.5rem clamp(1.15rem, 3vw, 2rem) 0; }
  /* En móvil el texto va debajo de la foto: las barras se cuelgan del borde
     inferior de la imagen, justo encima del bloque de texto, lejos del sello
     RKI y del botón flotante de WhatsApp. */
  .hero__dots { bottom: auto; top: 0; translate: 0 calc(-100% - .35rem); }
}

/* -------------------------------------------------- qué detectamos
   Una tarjeta por gas: la fórmula manda, y el riesgo se nombra por lo que
   realmente hace ese gas — envenena, explota o desplaza el oxígeno. */
.gascards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  margin-top: 2.5rem;
}
.gascard {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.35rem 1.25rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .22s var(--ease), box-shadow .28s var(--ease), border-color .22s var(--ease);
}
.gascard__formula {
  font: 500 1.85rem/1 var(--mono);
  letter-spacing: .01em; color: var(--ink);
}
.gascard__nombre { font-size: var(--fs-small); color: var(--fg); font-weight: 500; }
.gascard__n {
  font: 600 var(--fs-micro)/1 var(--head);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .55rem;
}
.gascard__riesgo {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: auto; width: fit-content;
  padding: .28rem .55rem;
  border-radius: var(--radius);
  font: 600 var(--fs-micro)/1 var(--body);
  letter-spacing: .06em; text-transform: uppercase;
}
.gascard__riesgo svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.riesgo--tox { background: #fdecea; color: #8c1d18; }
.riesgo--exp { background: #fff4d6; color: #7a4a00; }
.riesgo--asf { background: #e8f1fb; color: #14457a; }

/* ==========================================================================
   PreventGas — home.css
   Hero + escala de alarma (firma), empresa, destacados, aplicaciones,
   clientes y contacto.
   ========================================================================== */

/* -------------------------------------------------- contadores: cinturón
   Franja pegada al borde inferior del hero, sin aire en el medio: las tres
   cifras en una sola línea, número y etiqueta lado a lado, sobre superficie
   crema y con un filete arriba que la separa de la foto. El marquee en
   tinta va justo debajo y cierra el bloque. */
.cinturon { background: var(--surface); border-top: 1px solid var(--border-2); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat {
  display: flex; align-items: baseline; gap: .8rem;
  padding: 1.05rem 1.5rem 1.05rem 0;
  border-right: 1px solid var(--border-2);
}
.stat + .stat { padding-left: 1.5rem; }
.stat:last-child { border-right: 0; }
.stat b {
  font: 400 clamp(2.2rem, 4vw, 3.2rem)/1 var(--display);
  letter-spacing: .03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat span {
  font: 500 var(--fs-micro)/1.35 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  max-width: 12ch;
}
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { border-right: 0; border-bottom: 1px solid var(--border); padding: .7rem 0; }
  .stat:last-child { border-bottom: 0; }
  .stat span { max-width: none; }
}

/* -------------------------------------------------- empresa */
.empresa__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
}
/* El título queda fijo mientras se lee el texto de al lado: así la columna
   izquierda no es un bloque de blanco, y no hace falta rellenarla con nada. */
.empresa__texto { position: sticky; top: calc(var(--nav-stuck, 108px) + 2.5rem); }
/* Con foto la columna ya tiene contenido propio y no necesita quedarse fija. */
.empresa__texto:has(.empresa__foto) { position: static; }

.empresa__foto {
  margin: 2rem 0 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--card);
}
.empresa__foto img { width: 100%; height: auto; display: block; }
.empresa__foto figcaption {
  padding: .85rem 1.1rem; border-top: 1px solid var(--border);
  font-size: var(--fs-small); color: var(--muted);
}
@media (max-width: 900px) {
  .empresa__foto img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%; }
}
.empresa__texto p { color: var(--fg); }
.empresa__texto p:first-of-type { font-size: var(--fs-lead); }
/* Cuatro razones, cuatro columnas a lo ancho de la página. */
.empresa__cards {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--border);
}
/* Cada rasgo es una fila de ficha: rótulo a la izquierda, texto a la derecha,
   separados por un filete. Antes eran tarjetas en cuatro columnas y el quinto
   rasgo quedaba huérfano; así entra cualquier cantidad sin romper nada. */
.ecard {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: .5rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(.95rem, 2vw, 1.3rem) 0;
  border-bottom: 1px solid var(--border);
}
.ecard b {
  font: 600 clamp(1rem, 1.6vw, 1.15rem)/1.25 var(--head); color: var(--ink);
  position: relative; padding-left: 1rem;
}
.ecard b::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .4rem; height: .4rem; background: var(--accent);
}
.ecard p { margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: 62ch; }
@media (max-width: 900px) {
  .empresa__grid { grid-template-columns: 1fr; }
  .empresa__texto { position: static; }
}
@media (max-width: 640px) {
  .ecard { grid-template-columns: 1fr; gap: .3rem; }
  .ecard p { padding-left: 1rem; }
}

/* -------------------------------------------------- destacados
   Cuatro tarjetas, no más: el home dejó de ser un catálogo. El botón de
   arriba y el pie llevan a productos/, donde están los cincuenta. */
.dest__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem;
}
#destacados .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { #destacados .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { #destacados .pgrid { grid-template-columns: 1fr; } }
.dest__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border-2);
}
.dest__pie p { margin: 0; color: var(--muted); max-width: 52ch; }
.dest__pie .btn { padding-block: 1.05rem; }

/* -------------------------------------------------- aplicaciones
   Carrusel de fotos grandes: una diapositiva protagonista casi a todo el
   ancho y la siguiente asomando por la derecha. El scroll-snap hace el
   trabajo pesado (arrastre, inercia, alineación); main.js suma el pase
   automático, las flechas, los puntos y la pausa. La pista sale del .wrap
   para que las fotos lleguen al borde, pero la primera arranca alineada con
   el texto de arriba: el padding replica el margen del .wrap. */
.apps__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 3rem; align-items: end; margin-bottom: 2rem;
}
.apps__head .lead { margin: 0; }
.apps {
  --apps-gutter: clamp(1.15rem, 4vw, 2.75rem);
  --apps-pad: max(var(--apps-gutter), calc((100% - var(--maxw)) / 2 + var(--apps-gutter)));
  --apps-dur: 5s;
}
.apps__pista {
  list-style: none; margin: 0;
  position: relative;
  display: flex; gap: clamp(.9rem, 2vw, 1.5rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: .5rem var(--apps-pad);
  scroll-padding-inline: var(--apps-pad);
  scrollbar-width: none;
}
.apps__pista::-webkit-scrollbar { display: none; }
/* Cola al final para que la última diapositiva también pueda alinearse al
   margen izquierdo: sin esto, el scroll se queda corto y no llega a snapear. */
.apps__pista::after { content: ''; flex: 0 0 max(7vw, calc(100% - 1120px)); }
.appslide {
  flex: 0 0 min(calc(100% - 7vw), 1120px);
  scroll-snap-align: start;
  container-type: scroll-state;
}
.appslide__caja {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 8;
  border-radius: var(--radius); background: var(--ink);
  transition: opacity .45s var(--ease), scale .45s var(--ease);
}
.appslide__caja img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.appslide__texto {
  position: absolute; inset: auto 0 0 0;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "t d" "g cta";
  gap: .9rem clamp(1.5rem, 4vw, 3.5rem); align-items: end;
  padding: clamp(4.5rem, 12vw, 8rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem);
  background: linear-gradient(to top, rgba(20,18,16,.94) 0%, rgba(20,18,16,.62) 48%, rgba(20,18,16,0) 100%);
}
.appslide__t {
  grid-area: t; margin: 0;
  font: 700 clamp(1.9rem, 4.2vw, 3.6rem)/.95 var(--head);
  text-transform: uppercase; letter-spacing: .01em; color: #fff;
}
.appslide__gases { grid-area: g; display: flex; flex-wrap: wrap; gap: .35rem; }
.appslide__gas {
  background: var(--accent); color: var(--accent-fg);
  font: 500 var(--fs-small)/1 var(--mono); letter-spacing: .02em;
  padding: .32rem .5rem; border-radius: var(--radius);
}
.appslide__d {
  grid-area: d; margin: 0;
  font-size: var(--fs-body); line-height: 1.55; color: rgba(255,255,255,.84);
  max-width: 48ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.appslide__cta { grid-area: cta; justify-self: start; }
.appslide--sinfoto .appslide__caja {
  background: var(--ink) linear-gradient(140deg, rgba(245,196,0,.16), transparent 60%);
}

/* La diapositiva alineada es la protagonista: las otras, más apagadas y un
   pelo más chicas. main.js marca .is-activa (vale en todos los navegadores) y,
   donde existe, scroll-state la sigue en tiempo real mientras se arrastra. */
@media (prefers-reduced-motion: no-preference) {
  .apps.js .appslide__caja { opacity: .55; scale: .97; }
  .apps.js .appslide.is-activa .appslide__caja { opacity: 1; scale: 1; }
  @supports (container-type: scroll-state) {
    @container scroll-state(snapped: x) { .apps.js .appslide__caja { opacity: 1; scale: 1; } }
  }
  .appslide.is-activa .appslide__caja:hover img { transform: scale(1.04); }
}

.apps__mando {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.25rem;
}
.apps__puntos { display: flex; gap: .4rem; }
/* Cada punto es una barra de 44 px: la activa se llena en los 5 s que dura
   el pase, como en el hero. Cuando el pase se para, queda llena. */
.apps__punto {
  appearance: none; -webkit-appearance: none;
  position: relative; display: block;
  width: 44px; height: 26px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer;
}
.apps__punto::before, .apps__punto::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
}
.apps__punto::before { background: rgba(20,18,16,.2); }
.apps__punto::after {
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  animation-duration: var(--apps-dur); animation-timing-function: linear; animation-fill-mode: forwards;
}
.apps__punto[aria-current="true"]::after { transform: scaleX(1); }
.apps.is-auto .apps__punto[aria-current="true"]::after { transform: scaleX(0); animation-name: appsBarra; }
.apps.is-auto.is-paused .apps__punto::after { animation-play-state: paused; }
.apps__punto:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@keyframes appsBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.apps__botones { display: flex; align-items: center; gap: .5rem; }
.apps__flecha {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--card); border: 1.5px solid var(--border-2);
  border-radius: var(--radius); color: var(--ink); font-size: 1.05rem;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.apps__pausa {
  height: 44px; padding: 0 .9rem; margin-right: .5rem;
  background: none; border: 1.5px solid var(--border-2); border-radius: var(--radius);
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.apps__pausa[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }

@media (max-width: 900px) {
  .apps__head { grid-template-columns: 1fr; }
  .appslide__caja { aspect-ratio: 4 / 3; }
  .appslide__texto { grid-template-columns: 1fr; grid-template-areas: "t" "g" "d" "cta"; gap: .7rem; }
}
@media (max-width: 620px) {
  .appslide { flex-basis: calc(100% - 9vw); }
  .appslide__caja { aspect-ratio: 3 / 4; }
  .appslide__d { -webkit-line-clamp: 3; font-size: var(--fs-small); }
  .apps__punto { width: 28px; }
  .apps__pausa span { display: none; }
  /* Dos filas: los puntos arriba y los botones abajo a la izquierda, con aire
     a la derecha para no chocar con el botón flotante de WhatsApp. */
  .apps__mando { flex-wrap: wrap; justify-content: flex-start; row-gap: .75rem; }
  .apps__puntos { flex-basis: 100%; }
  .apps__botones { padding-right: 84px; }
}

/* -------------------------------------------------- clientes */
.clientes {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12);
}
.clientes li {
  background: var(--ink); display: grid; place-items: center;
  padding: 1.4rem 1rem; min-height: 96px;
}
.clientes img {
  max-height: 40px; width: auto;
  filter: brightness(0) invert(1); opacity: .55;
  transition: opacity .25s var(--ease);
}
@media (max-width: 860px) { .clientes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .clientes { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------- faq
   Once preguntas en una sola columna daban casi mil píxeles de alto y la
   sección se leía como un trámite. Van en dos columnas independientes: cada
   una tiene su propia línea superior y su propia pila, de modo que abrir una
   respuesta de la izquierda no abre un hueco al lado de la de la derecha. */
.faq {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq__col { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; cursor: pointer; list-style: none;
  font: 600 .98rem/1.3 var(--head); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: none;
  font: 400 1.35rem/1 var(--mono); color: var(--accent);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: 1.1rem; margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* En el celular vuelven a ser una sola pila: la línea superior de la segunda
   columna sobra, porque ya está la de abajo de la última pregunta. */
@media (max-width: 760px) {
  .faq { grid-template-columns: 1fr; }
  .faq__col + .faq__col { border-top: 0; }
}

/* -------------------------------------------------- contacto */
.contacto__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
.datos { display: grid; gap: 1.15rem; }
.dato {
  display: grid; gap: .2rem;
  padding-bottom: 1.15rem; border-bottom: 1px solid var(--border);
}
.dato span {
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.dato b { font: 600 1.08rem/1.3 var(--head); color: var(--ink); }
@media (max-width: 900px) { .contacto__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* -------------------------------------------------- escala dentro de empresa */
.escala { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.escala__bar {
  position: relative; height: 46px;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
}
.escala__bar::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 9px;
  background: repeating-linear-gradient(90deg, var(--border-2) 0 1px, transparent 1px 5%);
}
.escala__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, rgba(245,196,0,.14), rgba(245,196,0,.48));
  border-right: 2px solid var(--accent);
  transition: width 2.2s var(--ease);
}
.escala.is-in .escala__fill { width: var(--nivel, 38%); }
.escala__umbral { position: absolute; top: 0; bottom: 0; left: var(--umbral, 38%); border-left: 2px dashed var(--ink); }
.escala__umbral b {
  position: absolute; left: .4rem; top: .35rem; white-space: nowrap;
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-fg); background: var(--accent); padding: .2rem .35rem;
}
.escala__peligro {
  position: absolute; top: 0; bottom: 0; left: var(--peligro, 70%); right: 0;
  background: repeating-linear-gradient(45deg, rgba(20,18,16,.055) 0 5px, transparent 5px 10px);
  border-left: 1px solid var(--border-2);
}
.escala__peligro b {
  position: absolute; right: .5rem; top: .4rem; white-space: nowrap;
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.escala__pies {
  display: flex; justify-content: space-between; margin-top: .45rem;
  font: 400 var(--fs-micro)/1 var(--mono); letter-spacing: .1em; color: var(--muted);
}
.escala__nota { margin: .9rem 0 0; font-size: var(--fs-small); color: var(--muted); }



/* -------------------------------------------------- casos de éxito
   Grilla editorial asimétrica sobre doce columnas: dos filas de dos, con la
   foto ancha alternando de lado (7/5 y luego 5/7). Los cuatro se ven a la
   vez, sin carrusel: cada uno con industria, título, descripción, lugar y
   los equipos o normas que lista site.json. Los anchos codifican algo real:
   el caso ancho de cada fila es el que tiene más equipos que nombrar. */
.casos__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 3rem; align-items: end; margin-bottom: 2.5rem;
}
.casos__head .lead { margin: 0; }
.casos {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.25rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2rem);
}
.caso { grid-column: span 5; display: grid; gap: 1.1rem; align-content: start; }
.caso:nth-child(4n + 1), .caso:nth-child(4n) { grid-column: span 7; }

.caso__media {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius);
  background: var(--surface);
}
.caso:nth-child(4n + 1) .caso__media, .caso:nth-child(4n) .caso__media { aspect-ratio: 16 / 10; }
.caso__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }

.caso__texto { display: grid; gap: .6rem; align-content: start; }
/* En los anchos el texto va a dos columnas: título a la izquierda, relato a
   la derecha, para que el bloque no quede como una tira debajo de la foto. */
.caso:nth-child(4n + 1) .caso__texto, .caso:nth-child(4n) .caso__texto {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "ind d" "t d" "loc tags";
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
}
.caso__ind {
  grid-area: ind;
  display: inline-flex; align-items: center; gap: .55rem;
  font: 700 var(--fs-small)/1 var(--head);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
/* El amarillo va de marca, no de texto: sobre crema da 1.52 de contraste. */
.caso__ind::before { content: ''; width: 18px; height: 3px; flex: none; background: var(--accent); }
.caso__t {
  grid-area: t; margin: 0;
  font: 700 clamp(1.45rem, 2.4vw, 2rem)/1.02 var(--head);
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink);
  max-width: 18ch;
}
.caso__d { grid-area: d; margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--fg); max-width: 52ch; }
.caso__loc {
  grid-area: loc; align-self: end;
  font: 500 var(--fs-micro)/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.caso__tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.caso__tags-l {
  margin-right: .3rem;
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.caso__tags span:not(.caso__tags-l) {
  font: 500 var(--fs-micro)/1 var(--mono); padding: .3rem .5rem;
  background: var(--card); border: 1px solid var(--border-2); border-radius: var(--radius);
  color: var(--ink);
}
/* Los casos angostos (2.º y 3.º) no definen áreas: sin este reset, los
   grid-area con nombre de arriba caen todos en la misma celda y el texto se
   superpone. Vuelven al flujo normal, una fila por elemento. */
.caso:not(:nth-child(4n + 1)):not(:nth-child(4n)) .caso__texto > * { grid-area: auto; }
.caso:not(:nth-child(4n + 1)):not(:nth-child(4n)) .caso__loc { align-self: start; }
/* Sin foto en disco el caso se sostiene solo, como una ficha: una columna,
   ancho de media pieza y el mismo ritmo vertical que los demás. Antes tomaba
   el layout ancho de dos columnas, pensado para ir al lado de una foto, y
   quedaba media tarjeta vacía. */
.caso--sinfoto { grid-column: span 5; }
.caso--sinfoto .caso__texto,
.caso--sinfoto:nth-child(4n + 1) .caso__texto,
.caso--sinfoto:nth-child(4n) .caso__texto {
  grid-template-columns: 1fr;
  grid-template-areas: "ind" "t" "d" "loc" "tags";
  gap: .9rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--surface);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  height: 100%;
}
.caso--sinfoto .caso__t { max-width: 14ch; }
.caso--sinfoto .caso__d { max-width: 46ch; }
.caso--sinfoto .caso__loc:empty { display: none; }
.caso--sinfoto .caso__tags { margin-top: .2rem; }
@media (max-width: 900px) {
  .casos__head { grid-template-columns: 1fr; }
  .caso, .caso:nth-child(4n + 1), .caso:nth-child(4n) { grid-column: 1 / -1; }
  .caso:nth-child(4n + 1) .caso__texto, .caso:nth-child(4n) .caso__texto {
    grid-template-columns: 1fr; grid-template-areas: "ind" "t" "d" "loc" "tags";
  }
  .caso__media, .caso:nth-child(4n + 1) .caso__media, .caso:nth-child(4n) .caso__media { aspect-ratio: 16 / 10; }
  .caso__t { max-width: none; }
}

/* -------------------------------------------------- equipos estrella
   Tres secciones, una por producto, cada una con su composición: la 'a' en
   crema con el producto grande a la derecha; la 'b' en tinta, producto
   enorme a la izquierda y ficha mono a la derecha; la 'c' en superficie,
   producto a la izquierda y la lista de dónde se usa. La foto es el gesto
   audaz de cada bloque: flota, con sombra de contacto, sin caja.

   Giro por scroll: la sección es una pista alta (escenario + --pin de
   recorrido) y adentro el escenario queda pegado bajo el nav. Mientras se
   baja, los cuadros del giro se van fundiendo uno en otro según --i/--n, el
   producto oscila en perspectiva, la sombra se estira y las cualidades
   entran de a una según --s/--d (build.py las reparte). Todo con
   animation-timeline sobre la pista; home.js pone --p donde no hay soporte
   (.is-fallback) y, con menos movimiento, no hay pista: foto + miniaturas. */
.estrella { overflow: clip; }   /* clip y no hidden: hidden crearía un contenedor de scroll y rompería el sticky */
.estrella__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.estrella__kicker {
  display: flex; flex-wrap: wrap; gap: .4rem .85rem; margin: 0 0 1.15rem;
  font: 500 var(--fs-micro)/1.6 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.estrella__kicker span + span { padding-left: .85rem; border-left: 1px solid var(--border-2); }
.estrella__kicker span:first-child { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }

.estrella__t { font-size: clamp(1.9rem, 3.8vw, 3.1rem); margin-bottom: 1.2rem; max-width: 20ch; }
.estrella__t em { font-style: normal; display: block; }
.estrella--a .estrella__t em { color: var(--accent-fg); background: var(--accent); padding-inline: .12em; width: fit-content; }
.estrella--b .estrella__t em { color: var(--accent); }
.estrella--c .estrella__t em { color: transparent; -webkit-text-stroke: 1.3px var(--ink); }

.estrella__d { font-size: var(--fs-lead); color: var(--fg); max-width: 52ch; margin: 0 0 1.25rem; }
.estrella .gaschips { margin-bottom: 1.25rem; }
.estrella__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* Cifras duras: número grande en Barlow, unidad chica, etiqueta mono. */
.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1rem 1.25rem; margin: 1.6rem 0 1.5rem;
  border-top: 1px solid var(--border-2);
}
.cifra { padding-top: .85rem; }
.cifra b {
  display: block; font: 700 clamp(2.2rem, 4vw, 3.2rem)/1 var(--head);
  letter-spacing: .01em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.cifra b small {
  font: 600 .42em/1 var(--head); margin-left: .18em;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.cifra span {
  display: block; margin-top: .4rem;
  font: 500 var(--fs-micro)/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* Pista y escenario. La pista mide escenario + --pin; el escenario se pega
   bajo el nav y ocupa lo que queda de pantalla. Si el contenido no entra
   (pantallas bajas), crece: lo que sobra por abajo se ve al terminar la
   pista, y home.js corrige el rango con --over para que el giro complete
   justo cuando se despega. */
.giro { --pin: 190svh; position: relative; padding-block: 0; }
/* El recorrido va como contenido (::after) y no como padding: el sticky se
   limita a la caja de contenido del padre, y con padding la escena no tenía
   espacio para pegarse. */
.giro::after { content: ''; display: block; height: var(--pin); }
/* Arrastrar sobre la foto también gira (home.js): que se note. */
.giro__cuadros { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.giro__cuadros.is-arrastrando { cursor: grabbing; }
.giro__cuadros:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.giro__escena {
  position: sticky; top: var(--nav-stuck, 108px);
  min-height: calc(100svh - var(--nav-stuck, 108px));
  display: grid; align-items: center;
  padding-block: clamp(1.25rem, 3vh, 2.5rem);
}
.giro__escena > .wrap { width: 100%; }

/* La foto: recorte transparente que flota sobre el fondo. La sombra de
   contacto es un degradé radial debajo, fuera del plano que gira. */
.estrella__media { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.estrella__foto { position: relative; width: 100%; max-width: var(--foto-max, 560px); }
.estrella__foto::before {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: 2%; height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sombra, rgba(20,18,16,.22)), transparent);
}
/* Los cuadros del giro, apilados en la misma celda: la altura la da el más
   alto, así no hay salto de layout. Solo el primero se ve sin scroll. */
/* Sin preserve-3d ni backface-visibility ni filter por cuadro: con esa
   combinación Chrome dejaba de pintar los cuadros mientras se scrolleaba y
   recién los mostraba al detenerse. La sombra de contacto la da ::before. */
.giro__cuadros { position: relative; display: grid; }
.giro__cuadro {
  grid-area: 1 / 1; width: 100%; height: auto; opacity: .012;
  /* Tramo del cuadro i de n, como fracción de la pista: cada uno dura 1/n y
     se estira un 12% para que el final de uno se funda con el arranque del
     siguiente (los dos fundidos ocupan exactamente la misma franja). */
  --L: calc(1 / var(--n, 1) / .88);
  --gs: calc(var(--i, 0) / var(--n, 1) - .06 * var(--L));
  --ge: calc(var(--gs) + var(--L));
  --w: calc(.12 * var(--L));
}
.giro__cuadro:first-child { opacity: 1; }

/* Miniaturas: solo cuando el usuario pidió menos movimiento (abajo). */
.estrella__vistas { display: none; flex-wrap: wrap; gap: .5rem; }
.estrella__vistas button {
  width: 64px; height: 64px; padding: .4rem;
  background: var(--card); border: 1px solid var(--border-2); border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.estrella__vistas button img { width: 100%; height: 100%; object-fit: contain; }
.estrella__vistas button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }

/* Indicador: línea de 2 px al borde izquierdo del escenario, con una marca
   por cambio de cuadro; el relleno --accent avanza con la pista. Lejos del
   botón de WhatsApp, que vive abajo a la derecha. */
.giro__barra {
  position: absolute; left: clamp(.7rem, 1.6vw, 1.5rem); top: 50%;
  width: 2px; height: min(30vh, 260px); translate: 0 -50%;
  background: var(--border-2); pointer-events: none;
}
.giro__barra b { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.giro__barra i { position: absolute; left: -3px; width: 8px; height: 2px; top: calc(var(--i) / var(--n) * 100%); background: var(--ink); }
.giro__hint {
  position: absolute; top: calc(100% + .8rem); left: 50%; translate: -50% 0;
  writing-mode: vertical-rl; white-space: nowrap;
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* Giro nativo: timeline con nombre sobre la pista (con el nav descontado
   por arriba) y rangos por cuadro/cualidad resueltos con calc(). --fin es
   el final real del recorrido: 100% menos lo que el escenario excede a la
   pantalla (home.js lo mide en --over). Propiedades de animación separadas
   a propósito: el atajo `animation` pisa animation-timeline. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    .giro {
      --fin: calc(100% - var(--over, 0px));
      view-timeline: --giro block;
      view-timeline-inset: var(--nav-stuck, 108px) 0;
    }
    .giro__cuadro, .giro__cuadros, .estrella__foto::before, .giro [data-giro], .giro__barra b, .giro__hint {
      animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --giro;
    }
    .giro__cuadro {
      animation-name: giroCuadroMedio;
      animation-range: contain calc(var(--gs) * var(--fin)) contain calc(var(--ge) * var(--fin));
    }
    .giro__cuadro:first-child { animation-name: giroCuadroPrimero; }
    .giro__cuadro:last-child  { animation-name: giroCuadroUltimo; }
    .giro__cuadro:only-child  { animation-name: none; }
    /* Sin oscilación 3D del contenedor: con perspective()+rotateY() animados
       por scroll, Chrome recién pintaba los cuadros al detenerse el scroll. */
    .estrella__foto::before { animation-name: giroSombra; animation-range: contain 0% contain var(--fin); }
    .giro [data-giro] {
      animation-name: giroItem;
      animation-range: contain calc(var(--s) * var(--fin)) contain calc((var(--s) + var(--d)) * var(--fin));
    }
    .giro tr[data-giro] { animation-name: giroFila; }
    .giro__barra b { animation-name: giroBarra; animation-range: contain 0% contain var(--fin); }
    .giro__hint { animation-name: giroHint; animation-range: contain 0% contain calc(.15 * var(--fin)); }
  }
}
/* Opacidad mínima .012 y no 0: Chrome no rasteriza una capa totalmente
   transparente y, al girar, el cuadro aparecía con retraso. Con .012 la capa
   queda lista e invisible a la vista. */
@keyframes giroCuadroMedio   { 0% { opacity: .012; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: .012; } }
@keyframes giroCuadroPrimero { 0%, 88% { opacity: 1; } 100% { opacity: .012; } }
@keyframes giroCuadroUltimo  { 0% { opacity: .012; } 12%, 100% { opacity: 1; } }
@keyframes giroOscila {
  from { transform: perspective(1400px) rotateY(-11deg); }
  to   { transform: perspective(1400px) rotateY(11deg); }
}
@keyframes giroSombra {
  from { transform: scale(.82, 1); opacity: 1; }
  to   { transform: scale(1.22, .85); opacity: .6; }
}
@keyframes giroItem { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes giroFila { from { opacity: 0; } to { opacity: 1; } }
@keyframes giroBarra { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes giroHint { from { opacity: 1; } to { opacity: 0; } }

/* Fallback (Firefox): home.js pone --p (0..1) en la sección y acá todo se
   deriva de --p con las mismas fracciones. Solo si hay JS: sin él, la foto
   principal y el texto se ven completos. */
.giro.is-fallback { --p: 0; }
.giro.is-fallback .giro__cuadro {
  opacity: clamp(.012, min(calc((var(--p) - var(--gs)) / var(--w)), calc((var(--ge) - var(--p)) / var(--w))), 1);
}
.giro.is-fallback .giro__cuadro:first-child { opacity: clamp(.012, calc((var(--ge) - var(--p)) / var(--w)), 1); }
.giro.is-fallback .giro__cuadro:last-child  { opacity: clamp(.012, calc((var(--p) - var(--gs)) / var(--w)), 1); }
.giro.is-fallback .giro__cuadro:only-child  { opacity: 1; }
.giro.is-fallback .estrella__foto::before {
  transform: scale(calc(.82 + var(--p) * .4), calc(1 - var(--p) * .15));
  opacity: calc(1 - var(--p) * .4);
}
.giro.is-fallback [data-giro] {
  --k: clamp(0, calc((var(--p) - var(--s)) / var(--d)), 1);
  opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 18px));
}
.giro.is-fallback tr[data-giro] { transform: none; }
.giro.is-fallback .giro__barra b { transform: scaleY(var(--p)); }
.giro.is-fallback .giro__hint { opacity: clamp(0, calc(1 - var(--p) / .15), 1); }

/* a: crema, texto a la izquierda, producto grande a la derecha */
.estrella--a .estrella__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.estrella--a .estrella__foto { --foto-max: min(560px, 70svh); }

/* b: tinta, producto enorme a la izquierda, texto claro, ficha mono a la derecha */
.estrella--b .estrella__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .75fr); }
.estrella--b .estrella__foto { --foto-max: min(520px, 66svh); --sombra: rgba(245,196,0,.09); }
.estrella--b .estrella__kicker { color: #9d9484; }
.estrella--b .estrella__kicker span:first-child { color: var(--bg); }
.estrella--b .estrella__kicker span + span { border-left-color: rgba(255,255,255,.22); }
.estrella--b .estrella__d { color: #cfc7ba; }
.estrella--b .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top-color: rgba(255,255,255,.22); }
.estrella--b .cifra b { color: var(--bg); }
.estrella--b .cifra b small, .estrella--b .cifra span { color: #9d9484; }
.estrella--b .gaschip { background: transparent; border-color: rgba(255,255,255,.3); color: var(--bg); }
.estrella--b .btn--secondary { --btn-fg: var(--bg); --btn-bd: var(--bg); }
.estrella--b .estrella__vistas button { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); }
.estrella--b .giro__barra { background: rgba(255,255,255,.22); }
.estrella--b .giro__barra i { background: var(--bg); }
.estrella--b .giro__hint { color: #9d9484; }
.estrella__datos { align-self: center; }
.estrella__tabla {
  width: 100%; border-collapse: collapse;
  font: 400 var(--fs-small)/1.45 var(--mono);
  border-top: 1px solid rgba(255,255,255,.3);
}
.estrella__tabla th, .estrella__tabla td {
  padding: .6rem 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.estrella__tabla th {
  width: 36%; padding-right: 1rem; font-weight: 500;
  font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: #9d9484;
}
.estrella__tabla th:empty { border-bottom-color: transparent; }
.estrella__tabla td { color: var(--bg); }

/* c: superficie, producto a la izquierda y debajo dónde se usa (casos y
   aplicaciones reales); a la derecha el texto. */
.estrella--c .estrella__grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "media texto" "donde texto";
  align-items: center;
}
.estrella--c .estrella__media { grid-area: media; align-self: end; }
.estrella--c .estrella__texto { grid-area: texto; }
.estrella--c .estrella__foto { --foto-max: min(400px, 46svh); }
.estrella__variantes { margin: 0 0 1.25rem; border-top: 1px solid var(--border-2); }
.estrella__variantes li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
  font-size: var(--fs-small); color: var(--fg);
}
.estrella__variantes b { font: 500 var(--fs-small)/1.5 var(--mono); color: var(--ink); }
.estrella__donde { grid-area: donde; align-self: start; border-top: 1px solid var(--border-2); padding-top: 1.25rem; }
.estrella__h3 {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
  font: 700 1.1rem/1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.estrella__h3::before { content: ''; width: 18px; height: 3px; background: var(--accent); }
.estrella__usos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; }
.uso { padding-left: 1rem; border-left: 2px solid var(--border-2); }
.uso--caso { grid-column: 1 / -1; border-left-color: var(--accent); }
.uso__k {
  display: block; margin-bottom: .35rem;
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.uso b { display: block; margin-bottom: .35rem; font: 600 1.05rem/1.2 var(--head); color: var(--ink); }
.uso p { margin: 0 0 .45rem; font-size: var(--fs-small); color: var(--fg); max-width: 62ch; }
.uso .gaschips { margin: 0; }
.uso__loc { font: 500 var(--fs-micro)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 1100px) {
  .estrella--b .estrella__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .estrella--b .estrella__media { grid-row: 1 / 3; }
  .estrella--b .estrella__datos { align-self: start; }
}
/* Móvil: producto arriba, chico, y el texto compactado para que entre en
   el escenario (390×844 con el nav descontado). La tabla (b) y dónde se
   usa (c) quedan al final del escenario: se ven al terminar la pista. */
@media (max-width: 900px) {
  .giro { --pin: 120svh; }
  .giro__escena { align-items: start; padding-block: .9rem 1.5rem; }
  .estrella__grid, .estrella--a .estrella__grid, .estrella--b .estrella__grid, .estrella--c .estrella__grid {
    grid-template-columns: 1fr; grid-template-areas: none; gap: .75rem;
  }
  .estrella__media, .estrella--b .estrella__media, .estrella--c .estrella__media {
    order: -1; grid-row: auto; grid-area: auto; align-self: auto;
  }
  .estrella--c .estrella__texto, .estrella__donde { grid-area: auto; }
  .estrella__foto, .estrella--a .estrella__foto, .estrella--b .estrella__foto, .estrella--c .estrella__foto {
    --foto-max: min(58vw, 30svh);
  }
  .estrella__kicker { margin-bottom: .6rem; }
  .estrella__t { max-width: none; font-size: clamp(1.55rem, 6.6vw, 1.9rem); margin-bottom: .75rem; }
  .estrella__d { font-size: var(--fs-small); margin-bottom: .8rem; }
  .estrella .gaschips { margin-bottom: .8rem; }
  .cifras, .estrella--b .cifras { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: .6rem .75rem; margin: .9rem 0 .8rem; }
  .cifra { padding-top: .5rem; }
  .cifra b { font-size: 1.75rem; }
  .cifra span { margin-top: .25rem; letter-spacing: .08em; }
  .estrella__cta { margin-top: .9rem; gap: .5rem; }
  .estrella__cta .btn { padding: .7rem 1rem; }
  .estrella__variantes { margin-bottom: .8rem; }
  .estrella__variantes li { grid-template-columns: 6rem minmax(0, 1fr); padding: .4rem 0; }
  .estrella__datos, .estrella__donde { margin-top: 1rem; }
  .giro__barra { left: .3rem; height: 22vh; }
  .giro__hint { display: none; }
}

/* Menos movimiento: sin pista ni escenario pegajoso; la foto principal
   quieta con las miniaturas para cambiar de vista (home.js). */
@media (prefers-reduced-motion: reduce) {
  .giro { padding-block: var(--pad-sec); }
  .giro__escena { position: static; min-height: 0; padding: 0; }
  .giro__cuadro, .giro__cuadros, .estrella__foto::before, .giro [data-giro], .giro__barra b { animation-name: none; }
  .giro__cuadros { transform: none; }
  .giro__cuadro { opacity: 0; }
  .giro__cuadro:first-child { opacity: 1; }
  .giro__cuadros:has(.is-activa) .giro__cuadro { opacity: 0; }
  .giro__cuadro.is-activa { opacity: 1; }
  .giro [data-giro] { opacity: 1; transform: none; }
  .giro__barra { display: none; }
  .estrella__vistas { display: flex; }
}

/* -------------------------------------------------- cómo elegir
   Tres caminos en una sola columna con filetes: el nombre grande a la
   izquierda, la explicación al medio y el enlace al catálogo filtrado. */
.caminos__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3rem; align-items: end; margin-bottom: 2.5rem;
}
/* El botón es hijo directo de la grilla: sin esto se estira a todo el ancho
   de su columna y queda como una barra deforme. */
.caminos__head .btn { justify-self: end; align-self: end; white-space: nowrap; }
@media (max-width: 720px) {
  .caminos__head { grid-template-columns: 1fr; }
  .caminos__head .btn { justify-self: start; }
}
.caminos__head .lead { margin: 0; }
.caminos { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.camino {
  /* Tercera columna de ancho fijo: si fuera `auto`, cada fila alinearía el
     cuerpo en un lugar distinto según lo largo del botón. */
  display: grid; grid-template-columns: minmax(0, .62fr) 11rem minmax(0, 1.5fr) 11.5rem;
  gap: 1.25rem clamp(1.5rem, 3.5vw, 3rem); align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--border-2);
}
.camino__nombre { display: block; }
.camino__nombre .display { display: block; font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: .9; transition: color .2s var(--ease); }
.camino__nombre small {
  display: block; margin-top: .55rem;
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.camino__cuerpo b { display: block; margin-bottom: .45rem; font: 600 1.3rem/1.15 var(--head); color: var(--ink); }
.camino__cuerpo p { margin: 0 0 .9rem; color: var(--fg); max-width: 62ch; }
.camino__ej { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.camino__ej span {
  margin-right: .3rem;
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.camino__ej a {
  padding: .32rem .55rem;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--card);
  font: 500 var(--fs-micro)/1 var(--mono); color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.camino__ir { align-self: center; justify-self: end; white-space: nowrap; }
/* Sin fotos que mostrar, el camino vuelve a tres columnas. */
.camino--sinpase { grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr) 11.5rem; }
@media (max-width: 900px) {
  .caminos__head { grid-template-columns: 1fr; }
  .camino, .camino--sinpase { grid-template-columns: 1fr; gap: .75rem; }
  .camino__ir { justify-self: start; }
  .pase { width: min(100%, 13rem); }
}

/* Pase de fotos reales de la categoría: los cuadros van apilados y se
   funden uno por vez cada 2,5 s, sin JavaScript. Cada cuadro sabe su lugar
   (--i) y cuántos son (--n): la duración es n × paso y el retraso i × paso,
   y los @keyframes pase2…pase6 abren la ventana visible de 1/n del ciclo.
   Se para al pasar el puntero o al enfocar un cuadro; con reduced-motion
   queda el primero, quieto. Los cuadros que no se ven están con
   visibility:hidden: no roban clics ni tabulación. */
.pase {
  --paso: 2.5s;
  position: relative; aspect-ratio: 5 / 6;
}
.pase::before {
  content: ''; position: absolute; left: 16%; right: 16%; bottom: 1.55rem; height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,18,16,.2), transparent);
}
.pase__cuadro {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .5rem;
  opacity: 0; visibility: hidden;
  animation-duration: calc(var(--n) * var(--paso));
  animation-delay: calc(var(--i) * var(--paso));
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.pase__cuadro img {
  width: 100%; height: 100%; min-height: 0; object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(20,18,16,.12));
}
.pase__n {
  font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .06em; color: var(--ink);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pase__cuadro:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.pase[data-n="1"] .pase__cuadro { animation: none; opacity: 1; visibility: visible; }
.pase[data-n="2"] .pase__cuadro { animation-name: pase2; }
.pase[data-n="3"] .pase__cuadro { animation-name: pase3; }
.pase[data-n="4"] .pase__cuadro { animation-name: pase4; }
.pase[data-n="5"] .pase__cuadro { animation-name: pase5; }
.pase[data-n="6"] .pase__cuadro { animation-name: pase6; }
/* El nombre no se funde con la foto: aparece de golpe en la meseta del
   cuadro y se esconde antes del fundido, así nunca se superponen dos nombres. */
.pase__n { animation: inherit; }
.pase[data-n="2"] .pase__n { animation-name: paseN2; }
.pase[data-n="3"] .pase__n { animation-name: paseN3; }
.pase[data-n="4"] .pase__n { animation-name: paseN4; }
.pase[data-n="5"] .pase__n { animation-name: paseN5; }
.pase[data-n="6"] .pase__n { animation-name: paseN6; }
@keyframes paseN2 { 0%, 12.000% { visibility: hidden; } 12.001%, 50.000% { visibility: visible; } 50.001%, 100% { visibility: hidden; } }
@keyframes paseN3 { 0%, 8.000% { visibility: hidden; } 8.001%, 33.333% { visibility: visible; } 33.334%, 100% { visibility: hidden; } }
@keyframes paseN4 { 0%, 6.000% { visibility: hidden; } 6.001%, 25.000% { visibility: visible; } 25.001%, 100% { visibility: hidden; } }
@keyframes paseN5 { 0%, 4.800% { visibility: hidden; } 4.801%, 20.000% { visibility: visible; } 20.001%, 100% { visibility: hidden; } }
@keyframes paseN6 { 0%, 4.000% { visibility: hidden; } 4.001%, 16.667% { visibility: visible; } 16.668%, 100% { visibility: hidden; } }
@keyframes pase2 { 0% { opacity: 0; visibility: hidden; } 12.000% { opacity: 1; visibility: visible; } 50.000% { opacity: 1; visibility: visible; } 62.000% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes pase3 { 0% { opacity: 0; visibility: hidden; } 8.000% { opacity: 1; visibility: visible; } 33.333% { opacity: 1; visibility: visible; } 41.333% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes pase4 { 0% { opacity: 0; visibility: hidden; } 6.000% { opacity: 1; visibility: visible; } 25.000% { opacity: 1; visibility: visible; } 31.000% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes pase5 { 0% { opacity: 0; visibility: hidden; } 4.800% { opacity: 1; visibility: visible; } 20.000% { opacity: 1; visibility: visible; } 24.800% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes pase6 { 0% { opacity: 0; visibility: hidden; } 4.000% { opacity: 1; visibility: visible; } 16.667% { opacity: 1; visibility: visible; } 20.667% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .pase__cuadro { animation: none; }
  .pase__cuadro:first-child { opacity: 1; visibility: visible; }
}

/* -------------------------------------------------- hover solo con mouse
   En una pantalla táctil no hay hover: el navegador lo simula y el estilo
   queda pegado después de tocar. Estas reglas son las mismas de arriba,
   movidas acá sin cambiarles nada, para que solo corran donde hay puntero
   fino. El feedback táctil va por :active, que funciona en todo. */
@media (hover: hover) and (pointer: fine) {
  .hero__dot:hover::before { background: rgba(20, 18, 16, .45); }
  .gascard:hover, .gascard:focus-visible {
    transform: translateY(-3px);
    border-color: var(--border-2);
    box-shadow: var(--shadow-2);
  }
  .apps__punto:hover::before { background: rgba(20,18,16,.45); }
  .apps__flecha:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .apps__pausa:hover { color: var(--ink); border-color: var(--ink); }
  .clientes li:hover img { opacity: 1; }
  .dato a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .caso:hover .caso__media img { transform: scale(1.03); }
  .estrella__vistas button:hover { border-color: var(--ink); }
  .estrella--b .btn--secondary:hover { --btn-bg: var(--bg); --btn-fg: var(--ink); }
  .estrella--b .estrella__vistas button:hover,
  .estrella--b .estrella__vistas button[aria-pressed="true"] { border-color: var(--bg); }
  .camino__nombre:hover .display {
    text-decoration: underline; text-decoration-color: var(--accent);
    text-decoration-thickness: .08em; text-underline-offset: .06em;
  }
  .camino__ej a:hover { border-color: var(--ink); }
  .pase__cuadro:hover .pase__n { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .pase:is(:hover, :focus-within) .pase__cuadro { animation-play-state: paused; }
}