/* ============ header / nav ============ */

header.site { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
/* Vertical padding only — a `padding: .9rem 0` shorthand here would cancel
   .wrap's horizontal gutter and jam the logo against the screen edge. */
.navrow { display: grid; grid-template-columns: auto 1fr; align-items: center; padding-block: .9rem; gap: 1.4rem; }
.nav-der { display: flex; align-items: center; justify-content: flex-end; gap: 1.9rem; }

.pie-idioma { text-decoration: underline; text-underline-offset: 3px; }
.logo { display: flex; align-items: center; gap: .6rem; }
.logo img { height: 36px; width: auto; }
.navlinks { display: flex; gap: 1.9rem; font-size: .94rem; font-weight: 600; }
.navlinks a { color: var(--ink-soft); }
.navlinks a:hover { color: var(--pine); }
@media (max-width: 860px) { .navlinks { display: none; } }

/* Portada: el encabezado se alinea con el borde interior de la tarjeta del hero
   y pierde la línea, para que logo, menú y titular compartan márgenes. El
   botón del menú pasa a contorno: el botón fuerte es el del hero. */
body:has(.hero) header.site { border-bottom-color: transparent; }
body:has(.hero) header.site .navrow.wrap { max-width: none; padding-inline: calc(clamp(.5rem, 1.6vw, 1.25rem) + 1.25rem); }
.navrow .btn-accent.desktop-only { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.navrow .btn-accent.desktop-only:hover { background: var(--ink); color: #fff; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .65rem; }
@media (max-width: 860px) { .nav-toggle { display: inline-flex; } .navrow .btn-accent.desktop-only { display: none; } }

.mobile-nav { display: none; flex-direction: column; border-top: 1px solid var(--line); background: var(--paper); padding: 1rem 1.2rem 1.4rem; }
.mobile-nav[data-open="true"] { display: flex; }
.mobile-nav a { padding: .6rem 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-of-type { border-bottom: none; }

/* ============ hero — full-bleed video ============ */
/* El hero se queda con la pantalla entera para el video y el titular, como
   marathon.vc. La tira de clientes va debajo, en su propia sección. */
.hero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--dark);
  margin: .75rem clamp(.5rem, 1.6vw, 1.25rem) 0; border-radius: 28px; isolation: isolate; }
@media (max-width: 860px) { .hero { min-height: 78vh; border-radius: 20px; } }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Scrim: keeps white type legible over moving footage at any frame. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(16,26,53,.86) 0%, rgba(16,26,53,.55) 34%, rgba(16,26,53,.08) 66%, rgba(16,26,53,0) 100%),
    linear-gradient(100deg, rgba(16,26,53,.55) 0%, rgba(16,26,53,0) 55%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 5.5rem 0 3rem; }
@media (max-width: 640px) { .hero-inner { padding: 4rem 0 1.75rem; } }
/* 1.3x sobre el tamaño anterior (2.4/5.4/4.2), a pedido de Armando. */
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); max-width: 16ch; color: #fff; letter-spacing: -.025em; line-height: 1.02; }
.hero .eyebrow { color: #fff; opacity: .82; }
.hero .dek { margin-top: 1.3rem; max-width: 52ch; color: rgba(255,255,255,.86); font-size: 1.4rem; line-height: 1.5; }
/* On a phone this paragraph pushes the CTAs off screen. Headline + buttons
   carry the hero; the same copy is on the About page and in the meta
   description, so nothing is lost. */
@media (max-width: 640px) { .hero .dek { display: none; } }
.hero .cta-row { display: flex; gap: 1.4rem; margin-top: 2rem; flex-wrap: wrap; align-items: center; }
/* El botón principal va en blanco, como el de la referencia: un solo botón
   pesa; WhatsApp queda como enlace para no competir con él. */
.hero .btn-accent { background: #fff; color: var(--ink); }
.hero .btn-accent:hover { background: #f1f4fa; }
.hero-wa { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 5px; }
.hero-wa:hover { text-decoration-color: #fff; }
/* Reseñas de Google: sólo si site.googleReviews tiene datos reales. Va entre la
   descripción y los botones, en una píldora alargada, para que no se encime
   con los botones flotantes de WhatsApp y preguntas. */
.hero-trust { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; margin-top: 1.4rem;
  padding: .55rem 1.1rem .55rem .6rem; border-radius: 999px; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hero-stars { color: #f6c445; letter-spacing: .12em; font-size: 1rem; }
.hero-trust-num { font-size: 1.35rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.hero-trust-txt { font-size: .9rem; opacity: .9; }



/* ============ section head ============ */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.section-head .eyebrow { margin-bottom: .6rem; display: block; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); max-width: 20ch; }
.section-head p.lede { max-width: 38ch; color: var(--ink-soft); font-size: .95rem; }

/* ============ capability stepper ============ */
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .stepper { grid-template-columns: 1fr; border-bottom: none; } }
.step { padding: 1.7rem 1.4rem; border-left: 1px solid var(--line); }
.step:first-child { border-left: none; padding-left: 0; }
@media (max-width: 900px) { .step { border-left: none; border-bottom: 1px solid var(--line); padding-left: 0; } }
.step .n { font-family: var(--font-mono); color: var(--ink-faint); font-size: .8rem; letter-spacing: .1em; }
.step[data-active="true"] .n { color: var(--pine); }
.step h3 { font-size: 1.05rem; font-weight: 700; margin-top: .6rem; margin-bottom: .5rem; }
.step p { color: var(--ink-soft); font-size: .9rem; }

/* Línea de tiempo que recorre el stepper (stepper.js). Cada paso lleva un
   punto sobre el riel, alineado con su número; la línea verde avanza con el
   scroll y el punto se llena cuando llega. Sólo con .stepper-vivo, que pone
   el script: sin JavaScript el stepper se ve como siempre. */
.stepper-vivo { position: relative; }
.stepper-vivo .step { position: relative; }
.stepper-vivo .step::before {
  content: ""; position: absolute; top: -7px; left: 1.4rem;
  width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
}
.stepper-vivo .step:first-child::before { left: 0; }
.stepper-vivo .step[data-active="true"]::before { background: var(--pine); border-color: var(--pine); }
.stepper-linea {
  position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--pine); pointer-events: none;
  transform: scaleX(var(--avance, 0)); transform-origin: left;
}
@media (max-width: 900px) {
  /* En una columna la línea baja por la izquierda. */
  .stepper-vivo { border-top: none; padding-left: 1.6rem; }
  .stepper-vivo::before {
    content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--line);
  }
  .stepper-linea {
    left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
    transform: scaleY(var(--avance, 0)); transform-origin: top;
  }
  .stepper-vivo .step::before,
  .stepper-vivo .step:first-child::before { left: calc(-1.6rem); top: calc(1.7rem + .48rem - 6px); }
}

/* ============ product cards / catalog ============ */
.catalog-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filter-chip {
  font-family: var(--font-mono); font-size: .76rem; padding: .5rem 1rem; border-radius: 99px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer;
}
.filter-chip[aria-pressed="true"] { background: var(--pine); color: #fff; border-color: var(--pine); }

.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 900px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prod-grid { grid-template-columns: 1fr; } }
.prod-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.prod-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.prod-card .shot { aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; }
.prod-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.prod-card .body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.prod-card h3 { font-size: 1.05rem; font-weight: 700; }
.prod-card p { font-size: .86rem; color: var(--ink-faint); flex: 1; }
.prod-card .link { font-size: .84rem; font-weight: 700; color: var(--pine); margin-top: auto; }

/* ============ team ============ */
/* Tres columnas fijas y no auto-fit: con seis personas el auto-fit daba cuatro
   arriba y dos abajo, con la segunda fila coja. Tres y tres queda parejo. El
   ancho se limita para que las tarjetas no queden nadando en espacio vacío. */
.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1.4rem;
  max-width: 840px; margin-inline: auto;
}
@media (max-width: 800px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }
/* Sustituto cuando todavía no hay retrato. Un icono neutro y no la inicial:
   la letra sola se lee como si fuera la foto de la persona. */
.headshot-icono {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: var(--pine); background: var(--pine-tint);
}
.headshot-icono svg { width: 52%; height: 52%; opacity: .55; }
.team-card { text-align: center; }
.team-card .headshot { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 1rem; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.team-card .headshot img { width: 100%; height: 100%; object-fit: cover; }
.team-card h4 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .15rem; }
.team-card .role { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .7rem; }
.team-card .contact { font-size: .84rem; color: var(--ink-soft); margin-bottom: .7rem; }
.team-card .wa { font-size: .8rem; font-weight: 700; color: var(--pine); display: inline-flex; align-items: center; gap: .35rem; }

/* ============ dark CTA band ============ */
.dark-band { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.dark-band .wrap { padding: 3.8rem 2.2rem; }
.dark-band h1, .dark-band h2, .dark-band h3 { color: #fff; }
.dark-band .eyebrow { color: #fff; opacity: .75; }

/* ============ clients & certifications ============ */
/* Carrusel de clientes: UNA sola fila, a lo ancho completo de la ventana.
   Antes eran dos filas de logos chicos; una fila deja que cada marca sea casi
   el doble de grande, que es el punto -- son la prueba social más fuerte que
   tiene la página y a 62px de alto no se reconocían.
   La pista se duplica en el HTML para que el ciclo cierre sin salto. */
.logo-carousel { position: relative; overflow: hidden; }
/* Difuminar las orillas para que los logos entren y salgan en vez de cortarse. */
.logo-carousel::before, .logo-carousel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.logo-carousel::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.logo-carousel::after { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }

.logo-track {
  display: flex; width: max-content; gap: 1.1rem; padding: .5rem 0;
  animation: logo-drift 64s linear infinite;
  /* Sin esto el texto de los logos tiembla mientras se desplaza en algunos
     navegadores: fuerza a la GPU a componer la pista como una sola capa. */
  will-change: transform;
}
/* Pausa al pasar el mouse, para poder leer una marca en concreto. */
.logo-carousel:hover .logo-track,
.logo-carousel:focus-within .logo-track { animation-play-state: paused; }

@keyframes logo-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: se vuelve una cuadrícula centrada. La copia duplicada se
     esconde porque ya no hay ciclo que cerrar y se verían los logos dos veces. */
  .logo-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .logo-cell[aria-hidden="true"] { display: none; }
  .logo-carousel::before, .logo-carousel::after { display: none; }
}

.logo-cell {
  flex: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-width: 270px; min-height: 160px; padding: 1.5rem 2rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
/* El tope de ALTURA es el que manda: estas marcas van desde logotipos 4:1 hasta
   composiciones de icono sobre nombre y escudos redondos. Se limitan los dos
   ejes y cada una conserva su proporción, en vez de deformarlas para igualarlas. */
.logo-cell img { max-height: 96px; max-width: 220px; width: auto; object-fit: contain; }

@media (max-width: 700px) {
  /* En celular se achica lo justo para que quepan dos y media en pantalla: si
     sólo cabe una, deja de leerse como carrusel y parece un error. */
  .logo-cell { min-width: 190px; min-height: 118px; padding: 1rem 1.2rem; }
  .logo-cell img { max-height: 68px; max-width: 150px; }
  .logo-carousel::before, .logo-carousel::after { width: 48px; }
}

/* Tarjetas de certificación: TRES en fila, iguales. Estaban en dos columnas y
   con tres tarjetas la tercera caía sola en un segundo renglón, descuadrada.
   A tres columnas caben las tres en una sola fila y grid las iguala de altura
   por sí solo, sin necesidad de grid-auto-rows.

   Al angostarse, la tarjeta vuelve a ser VERTICAL --logo arriba, texto abajo--:
   en horizontal el texto se quedaba en una columna de 180 px y se partía en
   palabras sueltas. */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
.cert-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
  overflow: hidden; display: flex; flex-direction: column;
}
/* Altura FIJA de la placa, no mínima: así los tres logos quedan centrados en el
   mismo eje y las líneas divisorias coinciden, sin importar la proporción de
   cada marca. */
.cert-plate {
  display: flex; align-items: center; justify-content: center;
  height: 150px; flex: none; padding: 1.2rem;
  background: #fff; border-bottom: 1px solid var(--line); border-right: none;
}
.cert-plate img { width: 100%; max-height: 92px; object-fit: contain; }
.cert-plate-text { background: var(--ink); }
.cert-plate-text span {
  font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  text-align: center; line-height: 1.2;
}
.cert-body { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.cert-body b { display: block; font-size: 1.1rem; font-weight: 700; margin-bottom: .45rem; line-height: 1.3; }
.cert-body span { font-size: .94rem; color: var(--ink-soft); line-height: 1.5; }
.cert-meta {
  display: block; margin-top: auto; padding-top: .7rem; font-family: var(--font-mono);
  font-style: normal; font-size: .76rem; letter-spacing: .02em; color: var(--ink-faint);
}
.cert-link { display: inline-block; margin-top: .6rem; font-size: .86rem; font-weight: 700; color: var(--pine); text-decoration: none; }

@media (max-width: 900px) { .cert-grid { grid-template-columns: 1fr; } .cert-plate { height: 128px; } }

/* ============ values list ============ */
.values-list { border-top: 1px solid var(--line); }
.value-row { display: grid; grid-template-columns: 3rem 12rem 1fr; gap: 1.4rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
@media (max-width: 700px) { .value-row { grid-template-columns: 2.4rem 1fr; } .value-row p { grid-column: 2; } }
.value-row .n { font-family: var(--font-mono); color: var(--pine); font-size: .8rem; }
.value-row h3 { font-size: 1rem; font-weight: 700; }
.value-row p { font-size: .92rem; color: var(--ink-soft); }

/* ============ checklist ============ */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.4rem; }
@media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } }
.checklist li { display: flex; align-items: flex-start; gap: .6rem; font-size: .94rem; color: var(--ink-soft); }
.checklist svg { flex: none; margin-top: .18rem; color: var(--pine); }

/* ============ photo grids ============ */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 800px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
.photo-tile { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile.tall { aspect-ratio: 3/4; }
.photo-tile.wide { grid-column: span 2; aspect-ratio: 16/9; }

/* ============ spec table ============ */
.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .86rem; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table td { padding: .65rem .2rem; vertical-align: top; }
.spec-table td:first-child { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; width: 40%; }

/* ============ footer ============ */
footer.site { background: var(--ink); color: var(--on-dark-soft); }
footer.site .wrap { padding: 3.4rem 2.2rem 1.6rem; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2.2rem; }
@media (max-width: 800px) { footer.site .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer.site .wrap { grid-template-columns: 1fr; } }
footer.site h5 { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: .9rem; }
footer.site .flogo img { height: 32px; filter: brightness(0) invert(1); margin-bottom: .9rem; }
footer.site p, footer.site a { font-size: .86rem; line-height: 1.7; color: var(--on-dark-soft); }
footer.site a:hover { color: #fff; }
footer.site .fbottom { border-top: 1px solid rgba(255,255,255,.14); padding: 1.1rem 2.2rem; font-family: var(--font-mono); font-size: .7rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ============ responsive two-column split ============ */
/* Inline `grid-template-columns: 1fr 1fr` can't carry a media query, which is
   how the contact page ended up scrolling sideways on a phone. Use these. */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.split-2.is-weighted { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 860px) {
  .split-2, .split-2.is-weighted { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ============ legal pages ============ */
.legal-wrap { max-width: 70ch; }
.legal-wrap h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-top: .6rem; }
.legal-updated { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-faint); margin-top: .5rem; }
.legal-wrap h2 { font-size: 1.15rem; margin: 2.2rem 0 .7rem; }
.legal-wrap p { color: var(--ink-soft); margin-bottom: .8rem; }
.legal-wrap ul { color: var(--ink-soft); padding-left: 1.2rem; margin: 0 0 1rem; }
.legal-wrap li { margin-bottom: .5rem; }
.legal-wrap strong { color: var(--ink); }
.legal-wrap a { color: var(--pine); font-weight: 600; }
.legal-flag {
  background: var(--pine-tint); border: 1px solid var(--line); border-left: 3px solid var(--pine);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.4rem 0 2rem;
  font-size: .88rem; color: var(--ink-soft);
}

/* ============ guided quote form ============ */
.quote-wrap { max-width: 620px; }
.quote-wrap h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
.quote-lede { margin-top: .6rem; color: var(--ink-soft); font-size: .95rem; }

.quote-progress {
  list-style: none; display: flex; gap: .4rem; margin: 1.4rem 0 1.2rem; padding: 0;
}
.quote-progress li {
  flex: 1; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-top: .5rem; border-top: 3px solid var(--line);
}
/* La raya de color es un relleno encima del riel gris, no el borde: así puede
   avanzar de izquierda a derecha (motion.css) en vez de aparecer de golpe. */
.quote-progress li { position: relative; }
.quote-progress li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: var(--pine); transform: scaleX(0); transform-origin: left;
}
.quote-progress li[data-state="current"] { color: var(--pine); }
.quote-progress li[data-state="current"]::before,
.quote-progress li[data-state="done"]::before { transform: scaleX(1); }

/* Resumen de respuestas (lo arma quote-flow.js). */
.quote-resumen {
  list-style: none; margin: -.4rem 0 1.2rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.quote-resumen[hidden] { display: none; }
.quote-ficha {
  font-family: var(--font-body); font-size: .78rem; font-weight: 600; line-height: 1.2;
  color: var(--pine); background: var(--pine-tint);
  border: 1px solid transparent; border-radius: 999px;
  padding: .4rem .75rem; min-height: 32px; cursor: pointer; text-align: left;
}
.quote-ficha:hover, .quote-ficha:focus-visible { border-color: var(--pine); }

.quote-form fieldset { border: none; margin: 0; padding: 0; }
.quote-form fieldset[hidden] { display: none; }
.quote-legend {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: -.02em; color: var(--ink); margin-bottom: 1rem; padding: 0;
}
/* Quote page is a task, not a landing page — get the form above the fold. */
.quote-wrap { padding-top: 0; }
@media (max-width: 640px) {
  .section-pad:has(.quote-wrap) { padding-top: 1.6rem; padding-bottom: 2.4rem; }
}
.form-field .opt { color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field-help { font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; }
.field-error { font-size: .8rem; color: #b4231c; font-weight: 600; margin-top: .35rem; }

.quote-form input[type="file"] {
  font-family: var(--font-body); font-size: .88rem; padding: .7rem;
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); width: 100%;
}
.file-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.file-list li {
  font-family: var(--font-mono); font-size: .74rem; color: var(--pine);
  background: var(--pine-tint); padding: .35rem .6rem; border-radius: var(--radius);
}

.quote-nav { display: flex; gap: .7rem; margin-top: 1.6rem; }
.quote-nav .btn-accent { flex: 1; justify-content: center; }
@media (max-width: 420px) {
  .quote-nav { flex-direction: column-reverse; }
  .quote-nav .btn { width: 100%; justify-content: center; }
}

.quote-alt {
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-soft);
}
.quote-alt .btn-wa { margin-top: .7rem; }
.quote-foot { margin-top: 1.6rem; font-size: .85rem; color: var(--ink-faint); }
.quote-foot a, .quote-alt a:not(.btn) { color: var(--pine); font-weight: 600; }

/* location combobox */
.location-field { position: relative; }
.location-results {
  list-style: none; margin: .3rem 0 0; padding: .3rem;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 240px; overflow-y: auto;
}
.location-results button {
  width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius);
  padding: .55rem .7rem; font-size: .9rem; color: var(--ink); font-weight: 500;
}
.location-results button:hover { background: var(--pine-tint); color: var(--pine); }

/* ============ scripted assistant ============ */
/* Sits directly above the WhatsApp bubble, same right edge. column-reverse so
   the panel opens upward from the launcher. */
.assistant {
  position: fixed; right: 1.3rem; bottom: 5.9rem; z-index: 55;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .6rem;
}

/* Small round "?" bubble, matched to the WhatsApp float. */
.assistant-launcher {
  width: 56px; height: 56px; padding: 0; flex: none;
  background: var(--ink); color: #fff; border: none; border-radius: 50%;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.5rem; line-height: 1;
}
.assistant-launcher:hover { background: var(--dark); }
.assistant-launcher[aria-expanded="true"] { display: none; }

.assistant-panel {
  width: 360px; max-width: calc(100vw - 2.6rem); max-height: min(72vh, 560px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); display: flex; flex-direction: column; overflow: hidden;
}
/* `display: flex` above outranks the UA's [hidden] rule, so the close button
   would set hidden="" and the panel would stay on screen. Restore it. */
.assistant-panel[hidden] { display: none; }
@media (max-width: 560px) { .assistant-panel { width: calc(100vw - 2.6rem); } }

.assistant-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.1rem; background: var(--ink); color: #fff;
}
.assistant-head strong { display: block; font-size: .95rem; }
.assistant-head span { font-size: .78rem; color: var(--on-dark-soft); }
.assistant-close { background: none; border: none; color: #fff; padding: .25rem; border-radius: var(--radius); }
.assistant-close:hover { background: rgba(255,255,255,.15); }

.assistant-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.assistant-msg { font-size: .9rem; line-height: 1.5; padding: .7rem .9rem; border-radius: var(--radius-lg); max-width: 92%; }
.assistant-msg.from-site { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); }
.assistant-msg.from-visitor { background: var(--pine); color: #fff; align-self: flex-end; font-weight: 600; }

.assistant-action {
  display: block; margin-top: .7rem; text-align: center;
  font-weight: 700; font-size: .84rem; padding: .6rem .9rem; border-radius: 99px;
  background: var(--pine); color: #fff;
}
.assistant-action:hover { background: var(--pine-deep); }
.assistant-action.is-wa { background: var(--wa); }
.assistant-action.is-wa:hover { background: var(--wa-deep); }

.assistant-choices { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .9rem; }
.assistant-chip {
  font-size: .82rem; font-weight: 600; padding: .5rem .85rem; border-radius: 99px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.assistant-chip:hover { border-color: var(--pine); color: var(--pine); }
.assistant-chip.is-quiet { color: var(--ink-faint); font-weight: 500; }

.assistant-foot {
  border-top: 1px solid var(--line); padding: .7rem 1.1rem;
  font-size: .78rem; color: var(--ink-faint); background: var(--surface);
}
.assistant-foot a { color: var(--pine); font-weight: 700; }

/* ============ whatsapp float ============ */
.wa-float {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); border: none;
}
.wa-float:hover { background: var(--wa-deep); }

/* ============ aviso de cookies ============ */
.cookie-banner {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 60; max-width: 26rem;
  padding: 1rem 1.1rem; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: grid; gap: .8rem; font-size: .9rem; line-height: 1.5;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; }
.cookie-banner a { color: var(--pine); font-weight: 700; text-decoration: underline; }
.cookie-banner__btns { display: flex; gap: .6rem; }
.cookie-banner__btns .btn { flex: 1; justify-content: center; min-height: 44px; }
@media (max-width: 560px) {
  .cookie-banner { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; }
}

/* ============ clips de producto en uso ============
   El video va encima de la foto, invisible hasta que ya tiene imagen
   (clip.js le pone .reproduciendo en el evento `playing`). */
.prod-card .shot, .prod-shot, .cat-tarjeta-foto, .foto-ficha { position: relative; }
.clip-producto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
}
.clip-producto.reproduciendo { opacity: 1; }

/* ============ lista de cotización ============
   Icono con contador en el header, botón de agregar en la ficha, la copia que
   vuela hasta el icono, y la lista dentro del formulario. lista-cotizar.js. */
.nav-acciones { display: flex; align-items: center; gap: .8rem; }
.lista-icono {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
}
.lista-icono[hidden] { display: none; }
.lista-icono:hover, .lista-icono:focus-visible { border-color: var(--pine); color: var(--pine); }
.lista-cuenta {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--pine); color: #fff;
  font-size: .7rem; font-weight: 800; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}

.agrega-lista {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  background: none; border: none; padding: .55rem 0; min-height: 44px;
  font-family: var(--font-body); font-size: .92rem; font-weight: 700; color: var(--pine);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.agrega-lista[hidden] { display: none; }
.agrega-lista:hover { color: var(--pine-deep, var(--pine)); text-decoration-thickness: 2px; }
.agrega-lista[aria-pressed="true"] { text-decoration: none; }
.agrega-lista--color { margin-top: .6rem; }

.lista-vuelo {
  position: fixed; z-index: 300; pointer-events: none;
  border-radius: var(--radius-lg); background-size: cover; background-position: center;
  background-color: var(--pine); box-shadow: var(--shadow-lift);
}

.lista-form { margin-bottom: 1.3rem; }
.lista-form[hidden] { display: none; }
.lista-form-et {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
}
.lista-form ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lista-form li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .3rem .3rem .3rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-weight: 600; font-size: .92rem; color: var(--ink);
}
.lista-form li button {
  flex: none; width: 36px; height: 36px; border: none; border-radius: var(--radius);
  background: none; color: var(--ink-faint); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.lista-form li button:hover, .lista-form li button:focus-visible { background: var(--pine-tint); color: var(--pine); }

/* ============ barra de cotizar (celular) ============
   Fija abajo, debajo de las dos burbujas (z-index 45 < 50 y 55). El hueco a
   la derecha es para la burbuja de WhatsApp, que cuando hay barra baja para
   quedar centrada dentro de ella (motion.css). */
.barra-cotizar { display: none; }
@media (max-width: 860px) {
  .barra-cotizar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 10px calc(1.3rem + 56px + .8rem) calc(10px + env(safe-area-inset-bottom, 0px)) 1rem;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px -12px rgba(16,26,53,.35);
    transform: translateY(110%); visibility: hidden;
  }
  .barra-cotizar.visible { transform: none; visibility: visible; }
  .barra-cotizar .btn { flex: 1; justify-content: center; min-height: 48px; }
  /* 68 px de barra, burbuja de 56: centrada queda a 6 px del borde, 15 px
     más abajo que su lugar normal. El "?" baja lo mismo para no separarse. */
  .con-barra .wa-float,
  .con-barra .assistant { transform: translateY(calc(15px - env(safe-area-inset-bottom, 0px))); }
}

/* ============ forms ============ */
.form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.form-field label { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.form-field input, .form-field textarea, .form-field select {
  font-family: var(--font-body); font-size: .95rem; padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--pine); }
.form-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: var(--ink-soft); margin: 1.1rem 0; }
.form-check input { margin-top: .2rem; }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ reveal-on-scroll ============ */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ============ list + photo-swap panel ============ */
.swap-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: stretch; }
@media (max-width: 800px) { .swap-panel { grid-template-columns: 1fr; } }
.swap-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.swap-list li { border-bottom: 1px solid var(--line); }
.swap-list button { width: 100%; text-align: left; background: none; border: none; border-radius: 0; padding: 1rem .4rem; font-family: var(--font-body); font-size: 1rem; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; }
.swap-list button[aria-current="true"] { color: var(--pine); font-weight: 700; }
.swap-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); min-height: 260px; }
.swap-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.swap-photo img[data-active="true"] { opacity: 1; }

/* Aviso de error devuelto por /api/lead (ver assets/js/form-alert.js). Rojo y
   arriba del formulario, no junto a un campo: el rechazo viene del servidor y
   no siempre corresponde a un campo en concreto. */
.form-alert {
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  border: 1px solid #b4231c;
  border-left-width: 4px;
  border-radius: var(--radius-sm, 6px);
  background: #fdf2f1;
  color: #8e1b16;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Dato legal que todavía no tenemos (filtro `pendiente`, ver legal.js). A
   propósito imposible de pasar por alto: si esto llega a producción, el aviso
   de privacidad está incompleto y no identifica bien al responsable. */
.legal-todo {
  background: #ffe8e6;
  color: #8e1b16;
  font-family: var(--font-mono);
  font-size: .8em;
  font-weight: 700;
  padding: .1em .45em;
  border: 1px dashed #b4231c;
  border-radius: 4px;
}

/* Aclaración dentro de un documento legal: se distingue del cuerpo sin gritar.
   Se usa para deslindar este aviso del corporativo, no para letra chica. */
.legal-wrap .legal-nota {
  font-size: .86rem;
  border-left: 2px solid var(--line);
  padding-left: .9rem;
  margin-top: .9rem;
}

/* Liga al PDF del certificado. Es lo que separa "dice que está certificado" de
   "aquí está el certificado": el archivo trae el QR de verificación de Intertek. */
.cert-link {
  display: inline-block; margin-top: .7rem;
  font-size: .82rem; font-weight: 700; color: var(--pine); text-decoration: none;
}

/* Tabla de categorías de datos del aviso legal. En su propio contenedor con
   scroll: es la única tabla del sitio y en un celular no cabe de otro modo,
   pero el cuerpo de la página nunca debe desplazarse en horizontal. */
.tabla-scroll { overflow-x: auto; margin: 0 0 1rem; -webkit-overflow-scrolling: touch; }
.legal-tabla { border-collapse: collapse; width: 100%; min-width: 420px; font-size: .88rem; }
.legal-tabla th, .legal-tabla td {
  border: 1px solid var(--line); padding: .7rem .85rem; text-align: left; vertical-align: top;
}
.legal-tabla thead th { background: var(--surface); font-weight: 700; color: var(--ink); }
.legal-tabla tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.legal-tabla td { color: var(--ink-soft); line-height: 1.6; }
.legal-wrap h3 { font-size: 1rem; margin: 1.6rem 0 .6rem; }

/* Alcance del aviso, debajo del título. Va arriba y visible porque es lo
   primero que alguien necesita saber: si este documento le aplica o no. */
.legal-alcance {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pine); font-weight: 700;
  margin-top: .45rem;
}

/* Tira de logos comprimida, justo debajo de la barra de confianza. Es la misma
   mecánica del carrusel pero a menor escala: la idea es que un comprador vea a
   quién le vendemos antes de llegar al catálogo, SIN empujar el catálogo hacia
   abajo. Por eso no lleva encabezado de sección ni relleno vertical grande. */
.logo-band { background: var(--paper); border-bottom: 1px solid var(--line); padding: 3.4rem 0 3.6rem; }
.logo-band-label {
  font-family: var(--font-mono); font-size: .9rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); font-weight: 700;
  margin-bottom: 1.5rem;
}
/* Celdas más chicas y sin caja: aquí los logos acompañan, no protagonizan.
   Las tarjetas grandes del carrusel se quedan para donde sí protagonizan. */
.logo-band .logo-cell {
  min-width: 270px; min-height: 124px; padding: 0 2.2rem;
  background: transparent; border: none; border-radius: 0;
}
.logo-band .logo-cell img { max-height: 90px; max-width: 232px; width: auto; }
.logo-band .logo-carousel::before,
.logo-band .logo-carousel::after { background: linear-gradient(90deg, var(--paper), transparent); width: 70px; }
.logo-band .logo-carousel::after { background: linear-gradient(270deg, var(--paper), transparent); }
.logo-band .logo-track { gap: 0; animation-duration: 58s; }
@media (max-width: 700px) {
  .logo-band .logo-cell { min-width: 186px; min-height: 92px; padding: 0 1.2rem; }
  .logo-band .logo-cell img { max-height: 66px; max-width: 164px; }
}

/* Marcador para las líneas del catálogo que todavía no tienen fotografía.
   Es un bloque con el nombre, no una imagen rota: se lee como algo intencional
   mientras llegan las fotos de producto reales. */
.shot-pendiente {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 150px; padding: 1.2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center;
}

/* Clips de la línea de producción. Verticales porque se grabaron en celular:
   en vez de recortarlos a horizontal y perder la mitad del encuadre, se les da
   proporción de teléfono y se ponen en pareja. */
.linea-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 720px; }
.linea-clip { margin: 0; }
.linea-clip video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--ink);
}
.linea-clip figcaption {
  margin-top: .7rem; font-size: .84rem; color: var(--ink-soft); line-height: 1.4;
}
@media (max-width: 560px) { .linea-videos { gap: .9rem; } }
@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: se queda el póster, que es un cuadro de la misma toma. */
  .linea-clip video { animation: none; }
}

/* Etiqueta de la tira de clientes: centrada, a pedido de Armando. */
.logo-band-label { text-align: center; }

/* Sección "Inside our plant": encabezado y videos centrados. .section-head
   normalmente reparte título y bajada en dos columnas; aquí no hay bajada y
   sólo van dos clips, así que alineado a la izquierda dejaba medio ancho vacío. */
.section-head.centrado { display: block; text-align: center; }
.planta .linea-videos { margin-left: auto; margin-right: auto; }
/* Con cuatro clips verticales, la rejilla de 2x2 ocupaba casi dos pantallas:
   en escritorio van los cuatro en fila; en teléfono se quedan de dos en dos. */
.planta .linea-videos { grid-template-columns: repeat(4, 1fr); max-width: 1100px; }
@media (max-width: 760px) { .planta .linea-videos { grid-template-columns: repeat(2, 1fr); } }

/* Banda del catálogo: ancho completo, con el encabezado encima de la foto.
   La altura está topada a propósito -- si la banda crece, la rejilla de
   productos se va abajo del pliegue y entrar al catálogo deja de servir. */
.catalogo-hero { position: relative; isolation: isolate; overflow: hidden; }
.catalogo-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 72%; z-index: 0;
}
/* Degradado desde la izquierda: la foto es clara y el texto es blanco. Más
   oscuro donde va el texto y transparente sobre el producto, para no taparlo. */
.catalogo-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10,18,38,.88) 0%, rgba(10,18,38,.72) 38%, rgba(10,18,38,.18) 70%, rgba(10,18,38,.05) 100%);
}
.catalogo-hero-texto {
  position: relative; z-index: 2;
  padding-block: clamp(2.6rem, 6vw, 4.2rem);
  min-height: clamp(230px, 30vh, 330px);
  display: flex; flex-direction: column; justify-content: center;
}
.catalogo-hero-texto .eyebrow { color: rgba(255,255,255,.82); }
.catalogo-hero-texto h1 {
  color: #fff; margin-top: .6rem; max-width: 18ch;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
}
.catalogo-hero-texto .lede {
  color: rgba(255,255,255,.88); margin-top: .9rem; max-width: 52ch; font-size: 1.02rem;
}
/* La rejilla arranca pegada a la banda: cada píxel de separación aquí es un
   píxel menos de producto visible al entrar. */
.catalogo-lista { padding-top: 1.6rem; }

/* Banda de foto de ancho completo con texto encima. Misma mecánica que la del
   catálogo: la imagen es el fondo, no un bloque que se suma a la altura. */
.banda-foto { position: relative; isolation: isolate; overflow: hidden; }
.banda-foto-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 70%; z-index: 0;
}
.banda-foto-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10,18,38,.9) 0%, rgba(10,18,38,.74) 40%, rgba(10,18,38,.2) 72%, rgba(10,18,38,.05) 100%);
}
.banda-foto-texto {
  position: relative; z-index: 2;
  padding-block: clamp(3rem, 7vw, 5rem);
  min-height: clamp(260px, 34vh, 380px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.banda-foto-texto h2 { color: #fff; max-width: 17ch; }
.banda-foto-texto p { color: rgba(255,255,255,.88); margin-top: .9rem; max-width: 48ch; }
.banda-foto-texto .btn { margin-top: 1.6rem; }

/* Foto en la página de cotización: entre el texto y el formulario. */
.quote-foto { margin: 1.6rem 0 2rem; }
.quote-foto img {
  /* Mismo motivo que arriba: sin height:auto gana el atributo height del <img>. */
  width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 68%;
  border-radius: var(--radius-lg); border: 1px solid var(--line); display: block;
}

/* Banda de anaquel arriba del formulario de contacto. */
.contacto-foto { margin: 0; }
.contacto-foto img {
  width: 100%; height: clamp(180px, 26vh, 300px); object-fit: cover;
  display: block; border-bottom: 1px solid var(--line);
}

/* Galería de la ficha de producto. */
.prod-galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: .6rem; margin-top: .6rem;
}
.prod-galeria figure { margin: 0; position: relative; }

/* De la quinta en adelante sólo viven en el HTML para que el visor arme la
   lista completa; en la rejilla no se pintan. */
.prod-galeria .galeria-extra { display: none; }

/* "+N" sobre la cuarta miniatura. pointer-events:none para que el clic llegue
   al botón que lightbox.js pone debajo y no se lo coma la capa. */
.galeria-mas {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 30, .58); color: #fff;
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: .04em;
}
.prod-galeria img {
  /* height:auto es obligatorio: eleventy-img escribe height="1599" en el <img>
     y ese atributo fija la altura, con lo que aspect-ratio deja de aplicar y la
     miniatura sale como una tira vertical. */
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius); background: var(--surface);
}

/* ============ visor de galería ============ */
/* El botón lo crea lightbox.js al ejecutarse: si no hay JavaScript no aparece
   un control muerto, sólo queda la miniatura como estaba. */
.visor-abre {
  display: block; width: 100%; padding: 0; border: none; background: none;
  cursor: zoom-in; border-radius: var(--radius); overflow: hidden;
  position: relative;
}
.visor-abre:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
.visor-abre img { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.visor-abre:hover img { transform: scale(1.06); }

.visor {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 14, 30, .93);
}
.visor[hidden] { display: none; }
.visor-marco { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; }
.visor-marco img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius-lg); display: block; margin: 0 auto;
}
.visor-marco figcaption {
  margin-top: .8rem; text-align: center; color: rgba(255,255,255,.78); font-size: .88rem;
}
.visor-cerrar, .visor-nav {
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  color: #fff; border-radius: 999px; cursor: pointer; line-height: 1;
  transition: background-color .18s ease;
}
.visor-cerrar:hover, .visor-nav:hover { background: rgba(255,255,255,.2); }
.visor-cerrar:focus-visible, .visor-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visor-cerrar {
  position: absolute; top: clamp(.8rem,3vw,1.6rem); right: clamp(.8rem,3vw,1.6rem);
  width: 44px; height: 44px; font-size: 1.7rem;
}
.visor-nav { flex: none; width: 48px; height: 48px; font-size: 2rem; }
.visor-nav[hidden] { display: none; }
.visor-contador {
  position: absolute; bottom: clamp(.8rem,3vw,1.6rem); left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.66);
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em;
}
@media (max-width: 600px) {
  /* En celular las flechas encima de la foto la tapan: se van abajo. */
  .visor { flex-wrap: wrap; }
  .visor-marco { order: 1; flex: 1 0 100%; }
  .visor-nav { order: 2; }
  .visor-contador { position: static; order: 3; flex: 1 0 100%; margin-top: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .visor-abre img { transition: none; }
  .visor-abre:hover img { transform: none; }
}

/* Misión y visión, lado a lado. Dos párrafos, sin encabezado grande: en una
   página "sobre nosotros" un apartado de misión de media cuartilla no lo lee
   nadie. */
.mision-vision { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.mision-vision p { color: var(--ink-soft); margin-top: .7rem; font-size: 1.02rem; line-height: 1.65; }
.mision-vision em { color: var(--ink); font-style: italic; }
@media (max-width: 800px) { .mision-vision { grid-template-columns: 1fr; gap: 1.8rem; } }

/* Títulos de misión y visión. En negritas y del tamaño de un h2 normal, no como
   etiqueta pequeña: son dos apartados, no dos pies de foto. */
.mv-titulo { font-size: 1.45rem; font-weight: 700; color: var(--ink); margin: 0; }

/* Foto única de About. */
.about-foto { margin: 0; }
.about-foto img {
  width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: center 68%;
  border-radius: var(--radius-lg); border: 1px solid var(--line); display: block;
}
.about-foto figcaption {
  margin-top: .7rem; font-size: .84rem; color: var(--ink-faint); font-family: var(--font-mono);
}

/* Video de la empresa en About: 16:9, mismo marco que la foto única. */
.about-video { margin: 0; }
.about-video__marco {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface);
}
.about-video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.about-video figcaption {
  margin-top: .7rem; font-size: .84rem; color: var(--ink-faint); font-family: var(--font-mono);
}

/* Intro de About a dos columnas: historia a la izquierda, foto vertical a la
   derecha. La foto se queda pegada arriba con sticky mientras se lee el texto
   -- son tres párrafos y sin eso la columna derecha se vacía a la mitad. */
.about-intro {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 3rem; align-items: start;
}
.about-intro__texto p {
  margin-top: 1rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7;
}
.about-intro__texto p:first-of-type { margin-top: 1.2rem; }
.about-intro__foto { margin: 0; position: sticky; top: 7.5rem; }
.about-intro__foto img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%;
  border-radius: var(--radius-lg); border: 1px solid var(--line); display: block;
}
.about-intro__foto figcaption {
  margin-top: .7rem; font-size: .84rem; color: var(--ink-faint); font-family: var(--font-mono);
}
@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; gap: 2rem; }
  .about-intro__foto { position: static; }
  .about-intro__foto img { aspect-ratio: 16 / 10; }
}


/* ============ ficha de producto ampliada ============ */
/* Secciones nuevas de la página de producto: cultivos, preguntas y líneas
   relacionadas. Se agregaron porque las páginas tenían 120 palabras contra las
   1,158 de Fox Packaging, y porque no hablaban del cultivo, que es como busca
   un comprador. */
.cultivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem 2rem; }
.cultivo h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 0 0 .4rem; }
.cultivo p { color: var(--ink-soft); font-size: .96rem; line-height: 1.65; margin: 0; }

.faq-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.6rem 2.4rem; margin-top: 1.4rem; }
.faq-item h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 .4rem; }
.faq-item p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65; margin: 0; }

/* Aviso de origen: sólo lo llevan las líneas que no fabricamos, y tiene que
   leerse antes de que alguien asuma que salió de Guadalajara. */
.nota-origen {
  margin-top: 1rem; padding: .8rem 1rem; font-size: .9rem; line-height: 1.5;
  color: var(--ink-soft); background: var(--surface);
  border-left: 3px solid var(--pine); border-radius: 0 var(--radius) var(--radius) 0;
}

/* ============ buscador del catálogo ============ */
/* El control lo inyecta catalog-search.js: sin JavaScript no aparece una caja
   de búsqueda que no busca. */
.catalog-search {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .7rem 1.1rem; margin-bottom: 1rem; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.catalog-search:focus-within { border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-tint); }
.catalog-search svg { width: 18px; height: 18px; flex: none; color: var(--ink-faint); }
.catalog-search input {
  flex: 1; border: none; outline: none; background: none;
  font: inherit; font-size: .95rem; color: var(--ink); min-width: 0;
}
.catalog-search input::placeholder { color: var(--ink-faint); }
@media (max-width: 620px) {
  /* El placeholder largo se corta a media frase en un teléfono. Ahí el JS pone
     uno corto; esto sólo aprieta el control. */
  .catalog-search { padding: .62rem .9rem; }
  .catalog-search input { font-size: .9rem; }
}
.catalog-search input::-webkit-search-cancel-button { display: none; }
.catalog-search-x {
  flex: none; border: none; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--ink-faint); padding: 0 .2rem;
}
.catalog-search-x:hover { color: var(--ink); }
/* base.css le da display:inline-flex a todo `button`, y eso le gana a la regla
   [hidden] del navegador: sin esta línea la equis se ve con el campo vacío. */
.catalog-search-x[hidden] { display: none; }
.catalog-search-aviso {
  font-family: var(--font-mono); font-size: .8rem; color: var(--ink-faint);
  margin: 0 0 1rem;
}
/* La búsqueda oculta con clase y el filtro por familia con el atributo
   `hidden`. Así una tarjeta sólo se ve si ninguno de los dos la escondió, y
   ninguno pisa la bandera del otro. */
.prod-grid .oculto-por-busqueda { display: none; }

/* ============ páginas por cultivo ============ */
.cultivo-intro { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 2.6rem; margin-top: 1.6rem; align-items: start; }
.cultivo-intro > div > p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; margin-top: 1rem; }
.cultivo-necesita { background: var(--surface); border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; }
.cultivo-necesita h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .8rem; }
.cultivo-necesita ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
@media (max-width: 900px) { .cultivo-intro { grid-template-columns: 1fr; gap: 1.6rem; } }

/* Una línea por fila, foto chica a la izquierda: se comparan formatos, y en
   rejilla de tarjetas grandes no se pueden leer uno contra otro. */
.cultivo-lineas { display: flex; flex-direction: column; gap: 1.6rem; }
.cultivo-linea { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 1.6rem; align-items: start; }
.cultivo-linea-foto { display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.cultivo-linea-foto img { width: 100%; height: 140px; object-fit: cover; display: block; }
.cultivo-linea h3 { font-size: 1.15rem; font-weight: 700; margin: .3rem 0 .5rem; }
.cultivo-linea h3 a { color: var(--ink); }
.cultivo-linea h3 a:hover { color: var(--pine); }
.cultivo-linea p { color: var(--ink-soft); font-size: .97rem; line-height: 1.65; margin: 0 0 .7rem; }
@media (max-width: 700px) {
  .cultivo-linea { grid-template-columns: 1fr; gap: .9rem; }
  .cultivo-linea-foto img { height: 180px; }
}

.cultivo-otros { display: flex; flex-wrap: wrap; gap: .7rem; }
.cultivo-chip {
  display: inline-block; padding: .55rem 1.1rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease;
}
.cultivo-chip:hover { border-color: var(--pine); color: var(--pine); }

/* Atajo por cultivo en el catálogo. */
.catalogo-cultivos { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1rem; margin: 0 0 1.8rem; }
.catalogo-cultivos-et { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cultivo .cultivo a, .cultivo h3 a { color: var(--ink); border-bottom: 1px solid var(--line); }
.cultivo h3 a:hover { color: var(--pine); border-bottom-color: var(--pine); }

/* ============ selector de color de malla ============ */
.colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 1rem; }
.color-ficha {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  padding: .7rem .5rem; cursor: pointer; font: inherit; text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.color-ficha:hover { border-color: var(--line); background: var(--surface); }
.color-ficha[aria-pressed="true"] { border-color: var(--pine); background: var(--pine-tint); }
.color-ficha:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.color-muestra {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.14); box-shadow: inset 0 -6px 12px rgba(0,0,0,.14);
}
/* Los colores que la línea ofrece pero de los que no tenemos foto para medir:
   rayado, no un hex inventado. */
.color-muestra--pendiente {
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 6px, #fff 6px 12px);
}
.color-nombre { font-size: .86rem; font-weight: 600; color: var(--ink); }
.color-pendiente { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-faint); line-height: 1.2; }
.colores-nota { margin-top: 1.4rem; font-size: .88rem; line-height: 1.6; color: var(--ink-faint); max-width: 70ch; }
.colores-elegido {
  margin-top: 1rem; padding: .85rem 1.1rem; font-size: .92rem; line-height: 1.55;
  color: var(--ink-soft); background: var(--surface);
  border-left: 3px solid var(--pine); border-radius: 0 var(--radius) var(--radius) 0;
}

/* ============ filtro por cultivo del catálogo ============ */
/* Lo inyecta catalogo.js con los cultivos que las tarjetas declaran, así que
   no hay una segunda lista que mantener. */
.filtro-cultivo { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem .9rem; margin: 0 0 1.4rem; }
.filtro-cultivo-et {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); flex: none;
}
.filtro-cultivo-ops { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro-cultivo-op {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: .42rem .95rem; font-size: .86rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filtro-cultivo-op:hover { border-color: var(--pine); color: var(--pine); }
.filtro-cultivo-op[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
.filtro-cultivo-op:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.aviso-guia { color: var(--pine); font-weight: 700; border-bottom: 1px solid var(--pine); }

/* ============ caja del catálogo en la portada ============ */
/* Una sola caja que se despliega, con la galería de la familia elegida al
   lado. No seis tarjetas apiladas: eso ocupaba toda la columna y obligaba a
   leer las seis descripciones para elegir una. */
.cat-caja { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2.4rem; align-items: start; }
@media (max-width: 900px) { .cat-caja { grid-template-columns: 1fr; gap: 1.6rem; } }

.cat-izq { display: flex; flex-direction: column; gap: 1.2rem; }
.cat-selector { position: relative; }

.cat-disparador {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1rem 1.25rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  cursor: pointer; text-align: left; font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cat-disparador:hover { border-color: var(--pine); }
.cat-disparador[aria-expanded="true"] { border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-tint); }
.cat-disparador:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.cat-disparador-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cat-disparador-et {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cat-disparador-nombre { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.cat-disparador svg { width: 20px; height: 20px; flex: none; color: var(--ink-faint); transition: transform .2s ease; }
.cat-disparador[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--pine); }

/* Sin JS la lista se ve completa, como una lista normal. Con JS se convierte
   en el desplegable y se esconde hasta que alguien abre. */
.cat-opciones { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.cat-caja[data-js="on"] .cat-opciones {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 20;
  margin: 0; padding: .4rem; gap: 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(20,32,61,.14); max-height: 340px; overflow-y: auto;
}
.cat-caja[data-js="on"] .cat-opciones[hidden] { display: none; }
.cat-opciones li {
  display: flex; flex-direction: column; gap: .1rem; cursor: pointer;
  padding: .75rem .95rem; border-radius: var(--radius); border: 1px solid transparent;
}
.cat-caja:not([data-js="on"]) .cat-opciones li { border-color: var(--line); background: #fff; cursor: default; }
.cat-opciones li:hover, .cat-opciones li:focus-visible { background: var(--surface); outline: none; }
.cat-opciones li[aria-selected="true"] { background: var(--pine-tint); }
.cat-opcion-nombre { font-size: 1rem; font-weight: 700; color: var(--ink); }
.cat-opcion-resumen { font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }

.cat-detalle p { font-size: .95rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 .8rem; }
.cat-caja[data-js="on"] .cat-detalle[hidden] { display: none; }
.cat-familia-lineas { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.cat-familia-lineas a {
  display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--ink-soft);
}
.cat-familia-lineas a:hover { border-color: var(--pine); color: var(--pine); }
.cat-todas { align-self: flex-start; }

.cat-caja[data-js="on"] .cat-panel[hidden] { display: none; }
.cat-panel-et {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .9rem;
}
.cat-panel + .cat-panel { margin-top: 2rem; }
.cat-panel-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.cat-tarjeta { display: flex; flex-direction: column; gap: .6rem; }
.cat-tarjeta-foto {
  display: block; aspect-ratio: 4 / 3; border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2); border: 1px solid var(--line);
}
.cat-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.cat-tarjeta:hover .cat-tarjeta-foto img { transform: scale(1.05); }
.cat-tarjeta-nombre { font-size: .93rem; font-weight: 700; color: var(--ink); }
.cat-tarjeta:hover .cat-tarjeta-nombre { color: var(--pine); }
@media (prefers-reduced-motion: reduce) {
  .cat-tarjeta-foto img, .cat-disparador svg { transition: none; }
  .cat-tarjeta:hover .cat-tarjeta-foto img { transform: none; }
}

/* ============ páginas por cultivo ============ */
.cultivo-intro { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 2.6rem; margin-top: 1.6rem; align-items: start; }
.cultivo-intro > div > p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; margin-top: 1rem; }
.cultivo-necesita { background: var(--surface); border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; }
.cultivo-necesita h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .8rem; }
.cultivo-necesita ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
@media (max-width: 900px) { .cultivo-intro { grid-template-columns: 1fr; gap: 1.6rem; } }

/* Una línea por fila, foto chica a la izquierda: se comparan formatos, y en
   rejilla de tarjetas grandes no se pueden leer uno contra otro. */
.cultivo-lineas { display: flex; flex-direction: column; gap: 1.6rem; }
.cultivo-linea { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 1.6rem; align-items: start; }
.cultivo-linea-foto { display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.cultivo-linea-foto img { width: 100%; height: 140px; object-fit: cover; display: block; }
.cultivo-linea h3 { font-size: 1.15rem; font-weight: 700; margin: .3rem 0 .5rem; }
.cultivo-linea h3 a { color: var(--ink); }
.cultivo-linea h3 a:hover { color: var(--pine); }
.cultivo-linea p { color: var(--ink-soft); font-size: .97rem; line-height: 1.65; margin: 0 0 .7rem; }
@media (max-width: 700px) {
  .cultivo-linea { grid-template-columns: 1fr; gap: .9rem; }
  .cultivo-linea-foto img { height: 180px; }
}

.cultivo-otros { display: flex; flex-wrap: wrap; gap: .7rem; }
.cultivo-chip {
  display: inline-block; padding: .55rem 1.1rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease;
}
.cultivo-chip:hover { border-color: var(--pine); color: var(--pine); }

/* Atajo por cultivo en el catálogo. */
.catalogo-cultivos { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1rem; margin: 0 0 1.8rem; }
.catalogo-cultivos-et { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cultivo .cultivo a, .cultivo h3 a { color: var(--ink); border-bottom: 1px solid var(--line); }
.cultivo h3 a:hover { color: var(--pine); border-bottom-color: var(--pine); }

/* ============ selector de color de malla ============ */
.colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 1rem; }
.color-ficha {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  padding: .7rem .5rem; cursor: pointer; font: inherit; text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.color-ficha:hover { border-color: var(--line); background: var(--surface); }
.color-ficha[aria-pressed="true"] { border-color: var(--pine); background: var(--pine-tint); }
.color-ficha:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.color-muestra {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.14); box-shadow: inset 0 -6px 12px rgba(0,0,0,.14);
}
/* Los colores que la línea ofrece pero de los que no tenemos foto para medir:
   rayado, no un hex inventado. */
.color-muestra--pendiente {
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 6px, #fff 6px 12px);
}
.color-nombre { font-size: .86rem; font-weight: 600; color: var(--ink); }
.color-pendiente { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-faint); line-height: 1.2; }
.colores-nota { margin-top: 1.4rem; font-size: .88rem; line-height: 1.6; color: var(--ink-faint); max-width: 70ch; }
.colores-elegido {
  margin-top: 1rem; padding: .85rem 1.1rem; font-size: .92rem; line-height: 1.55;
  color: var(--ink-soft); background: var(--surface);
  border-left: 3px solid var(--pine); border-radius: 0 var(--radius) var(--radius) 0;
}

/* ============ filtro por cultivo del catálogo ============ */
/* Lo inyecta catalogo.js con los cultivos que las tarjetas declaran, así que
   no hay una segunda lista que mantener. */
.filtro-cultivo { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem .9rem; margin: 0 0 1.4rem; }
.filtro-cultivo-et {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); flex: none;
}
.filtro-cultivo-ops { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro-cultivo-op {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: .42rem .95rem; font-size: .86rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filtro-cultivo-op:hover { border-color: var(--pine); color: var(--pine); }
.filtro-cultivo-op[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
.filtro-cultivo-op:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
/* El emoji conserva su tamaño y su color propio: en la mayoría de las
   plataformas es un glifo de color fijo y forzarle el color del botón sólo
   lo apagaría cuando el chip está activo. */
.filtro-cultivo-ico {
  margin-right: .42rem; font-size: 1.05em; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.aviso-guia { color: var(--pine); font-weight: 700; border-bottom: 1px solid var(--pine); }

/* ============ caja del catálogo en la portada ============ */
.cat-caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.4rem; align-items: start; }
@media (max-width: 900px) { .cat-caja { grid-template-columns: 1fr; gap: 1.6rem; } }

.cat-familias { display: flex; flex-direction: column; gap: .7rem; }
.cat-familia { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cat-familia-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.1rem 1.3rem; background: none; border: none;
  cursor: pointer; text-align: left; font: inherit;
}
.cat-familia-txt { display: flex; flex-direction: column; gap: .15rem; }
.cat-familia-nombre { font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.cat-familia-resumen { font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.cat-familia-flecha { width: 20px; height: 20px; flex: none; color: var(--ink-faint); transition: transform .2s ease; }
.cat-familia-cab[aria-expanded="true"] { background: var(--pine-tint); }
.cat-familia-cab[aria-expanded="true"] .cat-familia-flecha { transform: rotate(180deg); color: var(--pine); }
.cat-familia-cab:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; }
.cat-familia-cuerpo { padding: 0 1.3rem 1.2rem; }
.cat-familia-cuerpo p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 .7rem; }
.cat-familia-lineas { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.cat-familia-lineas a {
  display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--ink-soft);
}
.cat-familia-lineas a:hover { border-color: var(--pine); color: var(--pine); }
/* Con JS el cuerpo sólo se ve en la familia abierta. Sin JS se ven todos. */
.cat-caja[data-js="on"] .cat-familia-cab[aria-expanded="false"] + .cat-familia-cuerpo { display: none; }
.cat-todas { margin-top: .6rem; align-self: flex-start; }

.cat-panel-et {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .9rem;
}
.cat-panel-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.cat-tarjeta { display: flex; flex-direction: column; gap: .6rem; }
.cat-tarjeta-foto {
  display: block; aspect-ratio: 4 / 3; border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2); border: 1px solid var(--line);
}
.cat-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.cat-tarjeta:hover .cat-tarjeta-foto img { transform: scale(1.05); }
.cat-tarjeta-nombre { font-size: .93rem; font-weight: 700; color: var(--ink); }
.cat-tarjeta:hover .cat-tarjeta-nombre { color: var(--pine); }
@media (prefers-reduced-motion: reduce) {
  .cat-tarjeta-foto img, .cat-familia-flecha { transition: none; }
  .cat-tarjeta:hover .cat-tarjeta-foto img { transform: none; }
}

/* ============ blog ============ */
.art-lista { display: flex; flex-direction: column; gap: 2.2rem; max-width: 70ch; }
.art-item-meta { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.art-item h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: -.01em; }
.art-item h2 a { color: var(--ink); }
.art-item h2 a:hover { color: var(--pine); }
.art-item p { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; margin: 0 0 .6rem; }

.art-cab { padding: 3.5rem 0 2rem; }
.art-tema { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pine); margin: 1rem 0 .6rem; }
.art-cab h1 { font-size: clamp(1.9rem,4vw,2.9rem); max-width: 22ch; letter-spacing: -.02em; }
.art-resumen { margin-top: 1rem; max-width: 60ch; font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); }
.art-meta { margin-top: 1.4rem; font-family: var(--font-mono); font-size: .78rem;
  color: var(--ink-faint); display: flex; gap: .55rem; flex-wrap: wrap; }

/* Columna angosta a propósito: el cuerpo de un artículo se lee a ~65
   caracteres, no al ancho del contenedor. Va en un div DENTRO del .wrap y no
   en el .wrap mismo: ése centra con margin auto, y ponerle un ancho menor
   recentraba el texto en vez de alinearlo con el encabezado. */
.art-cuerpo { max-width: 68ch; padding-bottom: 1rem; }
.art-cuerpo h2 { font-size: 1.45rem; font-weight: 700; margin: 2.4rem 0 .8rem; letter-spacing: -.01em; }
.art-cuerpo p { font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 1.1rem; }
.art-cuerpo p strong, .art-cuerpo strong { color: var(--ink); font-weight: 700; }
.art-cuerpo ul, .art-cuerpo ol { margin: 0 0 1.2rem; padding-left: 1.3rem; color: var(--ink-soft);
  font-size: 1.05rem; line-height: 1.75; }
.art-cuerpo li { margin-bottom: .4rem; }
.art-cuerpo a { color: var(--pine); border-bottom: 1px solid var(--line); }
.art-cuerpo a:hover { border-bottom-color: var(--pine); }

.art-pie { max-width: 70ch; }
.art-cta { display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  flex-wrap: wrap; padding: 1.8rem 0 0; }
.art-cta h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .4rem; }
.art-cta p { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; margin: 0; max-width: 42ch; }
.art-cta-botones { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ============ video explicativo ============ */
/* Distinto de .linea-clip: aquéllos son bucles mudos de ambiente; éstos llevan
   audio, duran medio minuto y se ven a propósito. Por eso van con controles. */
.video-explica { margin: 0; max-width: 880px; }
.video-explica--ancho { margin-inline: auto; }
.video-explica video {
  width: 100%; height: auto; display: block; background: var(--dark);
  border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.video-explica figcaption {
  margin-top: .7rem; font-family: var(--font-mono); font-size: .78rem;
  color: var(--ink-faint);
}
.stepper + .video-explica, .video-explica + .stepper { margin-top: 2rem; }

/* .section-head.centrado sólo ponía text-align:center. Con un h2 corto se ve
   bien, pero los h2 llevan max-width y margen cero: en cuanto el título es
   largo, el texto se centra DENTRO de un bloque que sigue pegado a la
   izquierda. Esto centra también el bloque. */
.section-head.centrado > div > * { margin-inline: auto; }

/* ============ artículos relacionados en ficha y cultivo ============ */
.lista-articulos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; max-width: 62ch; }
.lista-articulos li { padding-left: 1rem; border-left: 2px solid var(--line); }
.lista-articulos a {
  font-weight: 700; font-size: 1.05rem; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid var(--accent);
}
.lista-articulos a:hover { color: var(--accent); }
.lista-articulos p { margin-top: .35rem; color: var(--ink-soft); font-size: .93rem; }

/* ============ barra de cambio de idioma ============ */
/* La inyecta idioma.js sólo cuando la página tiene gemela y el navegador
   está en el otro idioma. No es un aviso permanente: se cierra y no vuelve. */
.barra-idioma {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: var(--ink); color: #fff; font-size: .92rem;
}
.barra-idioma p { margin: 0; flex: 1 1 14rem; }
.barra-idioma .btn { padding: .45rem 1rem; font-size: .88rem; }
.barra-idioma-x {
  background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: 0 .3rem; opacity: .7;
}
.barra-idioma-x:hover { opacity: 1; }
.barra-idioma-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============ selector de idioma en el menú ============ */
.cambia-idioma {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .5rem; border: 0; border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.cambia-idioma:hover { color: var(--pine); background: var(--surface); }
.cambia-idioma:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
/* La bandera es un emoji: se deja con su tipografía de color propia, porque
   forzarle la del sitio la vuelve un cuadro vacío en algunos Windows. */
.cambia-idioma-bandera {
  font-size: 1.05rem; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
@media (max-width: 900px) { .cambia-idioma { display: none; } }

/* El descriptor en español debajo del nombre del catálogo. El nombre no se
   traduce --es el mismo en la orden de compra y en el teléfono-- pero quien
   no lo conoce busca por el descriptor, así que tiene que estar en la
   página. Subordinado al nombre, no compitiendo con él. */
.nombre-es {
  margin: .2rem 0 0; color: var(--ink-soft);
  font-size: .95rem; font-weight: 500;
}
h1 + .nombre-es { font-size: 1.05rem; }
.cat-tarjeta .nombre-es, .prod-body .nombre-es { font-size: .85rem; }

/* Mapa de la planta en contacto. 4:3 para que en teléfono no se coma la
   pantalla y en escritorio quepa en la columna de oficinas. */
.mapa-planta { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--surface-2); }
.mapa-planta iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Franja ancha en el inicio; en teléfono vuelve a 4:3 para que se pueda usar. */
.mapa-planta--ancho { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .mapa-planta--ancho { aspect-ratio: 4 / 3; } }

/* ============ vitrina del catálogo (portada) ============
   Una línea a la vista, foto grande a la derecha, lista a la izquierda. Una
   sola barra fina marca el tiempo de la línea activa para que se entienda que
   gira; desaparece con "reducir movimiento". */
.vit-titulo { font-size: clamp(1.9rem, 3.6vw, 2.8rem); max-width: 18ch; margin-bottom: 2.2rem; }
.vit { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: stretch; }
.vit-pildoras { display: flex; flex-direction: column; gap: .6rem; }
.vit-movil { display: none; }
.vit-lista { display: flex; flex-direction: column; gap: .6rem; }
.vit-item { position: relative; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease; }
.vit-item:has([aria-expanded="true"]) { border-color: transparent; box-shadow: var(--shadow); }
.vit-cab { margin: 0; font: inherit; }
.vit-boton { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); }
.vit-nombre { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.vit-boton svg { width: 20px; height: 20px; flex: none; color: var(--ink-faint); transition: transform .25s ease; }
.vit-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.vit-boton:focus-visible { outline: 2px solid var(--pine); outline-offset: -3px; border-radius: 18px; }
.vit-cuerpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.vit-cuerpo-int { overflow: hidden; padding: 0 1.3rem; }
.vit-cuerpo-int p { margin: 0 0 .7rem; color: var(--ink-soft); line-height: 1.55; max-width: 44ch; }
.vit-enlace { display: inline-block; margin-bottom: 1.2rem; font-weight: 600; color: var(--pine); text-decoration: underline; text-underline-offset: 4px; }
.vit[data-js="on"] .vit-item:not(:has([aria-expanded="true"])) .vit-cuerpo { grid-template-rows: 0fr; }
.vit[data-js="on"] .vit-item:not(:has([aria-expanded="true"])) .vit-cuerpo-int { visibility: hidden; }
.vit-prog { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 0; height: 3px; border-radius: 3px; background: var(--pine); transform-origin: left; transform: scaleX(0); opacity: 0; }
.vit[data-js="on"][data-gira="on"] .vit-item:has([aria-expanded="true"]) .vit-prog { opacity: 1; animation: vit-llena var(--vit-ms, 6500ms) linear forwards; }
.vit[data-pausa="on"] .vit-prog { animation-play-state: paused; }
@keyframes vit-llena { to { transform: scaleX(1); } }
.vit-todas { align-self: flex-start; margin-top: .6rem; }
.vit-escenario { position: relative; min-height: 380px; border-radius: 28px; overflow: hidden; background: var(--surface); }
@media (max-width: 900px) { .vit-escenario { min-height: 0; aspect-ratio: 4 / 3; } }
.vit-foto { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: block; }
.vit-foto.is-activa { opacity: 1; }
.vit-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vit:not([data-js="on"]) .vit-foto:not(:first-child) { display: none; }
@media (prefers-reduced-motion: reduce) { .vit-prog { display: none; } .vit-foto, .vit-cuerpo, .vit-boton svg { transition: none; } }

/* Celular: foto arriba, UNA fila de píldoras que se desliza de lado y la
   descripción de la activa justo debajo. Todo cabe en una pantalla, sin bajar
   y subir. Sin JavaScript queda la lista abierta de siempre. */
@media (max-width: 900px) {
  .vit { grid-template-columns: 1fr; gap: 1rem; }
  .vit-titulo { margin-bottom: 1.2rem; }
  .vit-lista { display: contents; }
  .vit-escenario { order: 1; min-height: 0; aspect-ratio: 4 / 3; max-height: 40vh; width: 100%; border-radius: 20px; }
  .vit[data-js="on"] .vit-pildoras { order: 2; flex-direction: row; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter, 1.2rem) * -1); padding-inline: var(--gutter, 1.2rem); scrollbar-width: none; }
  .vit[data-js="on"] .vit-pildoras::-webkit-scrollbar { display: none; }
  .vit[data-js="on"] .vit-item { flex: none; border-radius: 999px; scroll-snap-align: center; }
  .vit[data-js="on"] .vit-item:has([aria-expanded="true"]) { background: var(--ink); border-color: var(--ink); box-shadow: none; }
  .vit[data-js="on"] .vit-item:has([aria-expanded="true"]) .vit-nombre { color: #fff; }
  .vit[data-js="on"] .vit-boton { padding: .6rem 1.1rem; }
  .vit[data-js="on"] .vit-nombre { font-size: .98rem; white-space: nowrap; }
  .vit[data-js="on"] .vit-boton svg, .vit[data-js="on"] .vit-cuerpo, .vit[data-js="on"] .vit-prog { display: none; }
  .vit[data-js="on"] .vit-movil { order: 3; display: block; min-height: 5.2rem; }
  .vit-movil p { margin: 0 0 .5rem; color: var(--ink-soft); line-height: 1.5; }
  .vit-movil .vit-enlace { margin-bottom: 0; }
  .vit-todas { order: 4; }
}
.vit { --gutter: 2.2rem; }
@media (max-width: 640px) { .vit { --gutter: 1.2rem; } }

.hero-trust-top { display: flex; align-items: center; gap: .55rem; }
.hero-g { flex: none; background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; width: 20px; height: 20px; }

/* Caras de quienes reseñaron: círculos encimados, como en la referencia. */
.hero-caras { display: flex; }
.hero-caras img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); object-fit: cover; background: #fff; }
.hero-caras img + img { margin-left: -9px; }

/* ============ hero en celular ============
   Texto centrado, sin video (ver hero-video.js) y tarjeta de Google compacta. */
@media (max-width: 640px) {
  .hero { min-height: 82vh; }
  .hero-inner { text-align: center; }
  .hero h1 { margin-inline: auto; font-size: clamp(2.3rem, 10vw, 3rem); }
  .hero .cta-row { flex-direction: column; align-items: center; gap: 1rem; margin-top: 1.4rem; }
  .hero-trust { gap: .3rem .6rem; padding: .4rem .8rem .4rem .45rem; margin-top: 1.1rem; justify-content: center; }
  .hero-caras img { width: 24px; height: 24px; border-width: 1.5px; }
  .hero-caras img + img { margin-left: -7px; }
  .hero-g { width: 16px; height: 16px; padding: 2px; }
  .hero-trust-top { gap: .35rem; }
  .hero-stars { font-size: .78rem; letter-spacing: .06em; }
  .hero-trust-num { font-size: 1rem; }
  .hero-trust-txt { font-size: .74rem; flex-basis: 100%; text-align: center; margin-top: -.1rem; }
}

/* ============ portada en celular: hero a pantalla completa ============
   La imagen ocupa todo el alto visible y el encabezado flota encima como barra
   de vidrio, así que titular, tarjeta de Google y botones se ven sin bajar.
   svh = el alto con las barras del navegador ya descontadas: sin él, el botón
   de WhatsApp quedaba tapado por la barra de abajo de Chrome. */
@media (max-width: 640px) {
  body:has(.hero) header.site {
    position: fixed; top: .6rem; left: .6rem; right: .6rem; z-index: 60;
    border: 0; border-radius: 18px; overflow: hidden;
    background: rgba(249, 248, 245, .86);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px -14px rgba(16, 26, 53, .45);
  }
  body:has(.hero) header.site .navrow.wrap { padding-inline: .9rem; padding-block: .45rem; }
  body:has(.hero) .logo img { height: 32px; }
  body:has(.hero) .mobile-nav { background: rgba(249, 248, 245, .96); }
  .hero { margin: 0; border-radius: 0; min-height: 100vh; min-height: 100svh; }
  .hero-inner { padding: 5.2rem 0 calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* Flotantes escondidos mientras se ve el hero (ver hero-fab.js). */
.wa-float, .assistant { transition: transform .32s cubic-bezier(.2,.7,.3,1), opacity .25s ease, visibility 0s linear 0s; }
body.fab-oculto .wa-float, body.fab-oculto .assistant {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px);
  transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s;
}
@media (prefers-reduced-motion: reduce) { .wa-float, .assistant, body.fab-oculto .wa-float, body.fab-oculto .assistant { transition: none; } }

/* ============ hero: la foto primero, el video encima ============
   Antes, hasta que llegaba el primer cuadro del video se veía el fondo azul
   vacío (y en Safari, que no arranca el video solo, se quedaba así). Ahora la
   foto de portada es el fondo del hero y se ve al instante; el video queda
   invisible hasta que empieza a correr (hero-video.js le pone .is-on). */
.hero { background-image: url(/assets/video/hero-poster-hd.jpg); background-size: cover; background-position: center; }
.hero-video { opacity: 0; transition: opacity .8s ease; }
.hero-video.is-on { opacity: 1; }
@media (max-width: 640px) { .hero { background-image: url(/assets/video/hero-poster-movil.jpg); } }
@media (prefers-reduced-motion: reduce) { .hero-video { transition: none; } }