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

header.site { position: sticky; top: 0; z-index: 40; background: #fff; 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: flex; align-items: center; justify-content: space-between; padding-block: .9rem; gap: 1.4rem; }
.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; } }

.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: #fff; 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: 90vh; display: flex; align-items: center; overflow: hidden; background: var(--dark); }
@media (max-width: 860px) { .hero { min-height: 84vh; } }
.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(100deg, rgba(16,26,53,.92) 0%, rgba(16,26,53,.78) 42%, rgba(16,26,53,.42) 72%, rgba(16,26,53,.30) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 5.5rem 0; }
@media (max-width: 640px) { .hero-inner { padding: 4rem 0; } }
/* 1.3x sobre el tamaño anterior (2.4/5.4/4.2), a pedido de Armando. */
.hero h1 { font-size: clamp(3.1rem, 7vw, 5.5rem); max-width: 17ch; color: #fff; }
.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: .8rem; margin-top: 2.2rem; flex-wrap: wrap; }


/* ============ 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; }

/* ============ 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 ============ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.8rem 1.4rem; }
@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; } }
.headshot-initials {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 2.4rem; font-weight: 800; color: var(--pine); background: var(--pine-tint);
}
.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);
}
.quote-progress li[data-state="current"] { color: var(--pine); border-top-color: var(--pine); }
.quote-progress li[data-state="done"] { border-top-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.6rem; 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: 52px; height: 52px; 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); }

/* ============ 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: #fff; 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, #fff, transparent); width: 70px; }
.logo-band .logo-carousel::after { background: linear-gradient(270deg, #fff, 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; }

/* 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);
}

/* 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; }
}

}