:root{
  --font-display:'Goldman', system-ui, sans-serif;
  --font-sans:'DM Sans', system-ui, sans-serif;
  --font-mono:'DM Mono', ui-monospace, monospace;
  --ink:#181a22;
  --ink-soft:#20232d;
  --line:#2e3240;
  --paper:#f4f5f7;
  --muted:#9aa0b0;
  --accent:#6bf400;
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:#fff;text-decoration:none}

/* Header / footer (shared markup copied from the home page) */
.site-header a:hover{color:var(--accent)}
.site-header a:focus-visible,
.site-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.site-footer a:hover{color:var(--accent)}

/* "Industrias" nav dropdown — CSS-only via <details>, no new JS */
.nav-industrias{position:relative}
.nav-industrias::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px}
.nav-industrias__toggle{cursor:pointer;background:none;border:0;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.75);padding:8px 4px}
.nav-industrias__toggle:hover{color:var(--accent)}
.nav-industrias__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.nav-industrias.is-open .nav-industrias__toggle,
html:not(.js-nav) .nav-industrias:hover .nav-industrias__toggle,
html:not(.js-nav) .nav-industrias:focus-within .nav-industrias__toggle{color:var(--accent)}
.nav-industrias__menu{position:absolute;top:calc(100% + 10px);left:0;min-width:230px;background:var(--ink-soft);border:1px solid var(--line);border-radius:6px;padding:8px;display:none;flex-direction:column;gap:2px;z-index:40}
.nav-industrias.is-open .nav-industrias__menu,
html:not(.js-nav) .nav-industrias:hover .nav-industrias__menu,
html:not(.js-nav) .nav-industrias:focus-within .nav-industrias__menu{display:flex}
.nav-industrias__divider{height:1px;margin:6px 4px;background:var(--line)}
.nav-industrias__menu a[aria-disabled="true"]{color:rgba(255,255,255,.55);cursor:default}
.nav-tag{margin-left:8px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.nav-industrias__menu a{display:block;padding:10px 12px;border-radius:4px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);transition:background .2s ease-out,color .2s ease-out}
.nav-industrias__menu a:hover,.nav-industrias__menu a:focus-visible{background:rgba(255,255,255,.06);color:var(--accent);outline:none}

/* Industria template */
.industria__hero{max-width:1400px;margin:0 auto;padding:clamp(140px,20vw,190px) clamp(20px,4.5vw,72px) clamp(56px,8vw,88px)}
.industria__kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.industria__h1{margin:0;font-family:var(--font-sans);font-weight:800;font-size:clamp(30px,4.6vw,58px);line-height:1.05;letter-spacing:-.025em;max-width:20ch}
.industria__bajada{margin:20px 0 0;max-width:62ch;font-size:clamp(15.5px,1.4vw,19px);line-height:1.6;color:rgba(255,255,255,.65)}

.industria__contexto,
.industria__construimos,
.industria__invitacion{max-width:1400px;margin:0 auto;padding:clamp(56px,8vw,88px) clamp(20px,4.5vw,72px);border-top:1px solid rgba(255,255,255,.1)}

.industria__titulo{margin:0;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;max-width:24ch}
.industria__titulo--goldman{font-family:var(--font-display);font-weight:700}
.industria__titulo--sans{font-family:var(--font-sans);font-weight:800}

.industria__contexto p{margin:24px 0 0;max-width:70ch;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.7)}
.industria__contexto p + p{margin-top:18px}

.industria__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:clamp(36px,5vw,56px)}
.industria__card{background:var(--ink-soft);border:1px solid var(--line);border-radius:6px;padding:clamp(24px,2.4vw,32px);transition:border-color .2s ease-out}
.industria__card:hover{border-color:var(--accent)}
.industria__card h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.4vw,19px);line-height:1.25;color:#fff}
.industria__card p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
/* Tarjeta con ilustración al inicio (SVG inline, trazo fino, sin acento) */
.industria__card--media{padding:0;overflow:hidden}
.industria__card-media{aspect-ratio:16/9;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.industria__card-media svg,.industria__card-media img{display:block;width:100%;height:100%}
.industria__card-media img{object-fit:cover}
.industria__card-body{padding:clamp(24px,2.4vw,32px)}
.ill{fill:none;stroke:var(--paper);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ill *{vector-effect:non-scaling-stroke}
.ill--dim{stroke-opacity:.4}
.ill__f{fill:var(--paper);stroke:none}

.industria__invitacion{display:flex;flex-wrap:wrap;gap:28px clamp(32px,4vw,56px);align-items:center;justify-content:space-between}
.industria__invitacion-texto{margin:0;flex:1 1 420px;max-width:62ch;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:#fff}
.industria__cta{flex:none;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);background:var(--accent);padding:16px 26px;border-radius:2px;transition:background .2s ease-out}
.industria__cta:hover{background:#8bff2e}
.industria__cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .industria__card,.industria__cta,.nav-industrias__menu a{transition:none}
}

/* ==========================================================================
   Industria — plantilla v2 (wireframe). Namespace separado (.industria-page__)
   para no afectar a las páginas que todavía usan .industria__* de arriba
   mientras se migran una por una.
   ========================================================================== */

/* Imagen con fallback sin JS: si el <img> no carga, su propio "broken state"
   deja ver el fondo --line y el nombre de archivo esperado (::before del
   contenedor) porque un <img> roto no pinta un fondo opaco. */
.industria-page__media{position:relative;overflow:hidden;background:var(--line)}
.industria-page__media::before{content:attr(data-expected);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.5;color:rgba(255,255,255,.4);z-index:0}
.industria-page__media-img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover}

/* 1. Hero — ancho completo, ~70vh, imagen o video + overlay oscuro.
   Patrón estático, independiente de .hero-scroll (video en scroll de
   automotriz): esta sección solo depende de un <img> parametrizado por
   página vía data-expected (fallback) y la variable --hero-focal. */
.industria-page__hero{position:relative;min-height:max(520px,70vh);padding-top:88px;display:flex;align-items:center;justify-content:center;background:var(--ink);overflow:hidden}
.industria-page__hero .industria-page__media{position:absolute;inset:0}
.industria-page__hero .industria-page__media-img{object-position:var(--hero-focal,center)}
.industria-page__hero-overlay{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(24,26,34,.55) 0%,rgba(24,26,34,.75) 50%,rgba(24,26,34,.9) 100%)}
.industria-page__hero-content{position:relative;z-index:3;max-width:1040px;padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.industria-page__hero-content .industria-page__h1{font-size:clamp(28px,3.6vw,44px);line-height:1.12;color:var(--paper)}
.industria-page__hero-content .industria-page__bajada{max-width:780px;color:rgba(244,245,247,.85)}

/* Unión con la sección siguiente — capa independiente del overlay de
   contraste de arriba. Uno resuelve legibilidad, este resuelve el empalme
   de color. Compartida por el hero estático y por .hero-sticky (video). */
.hero-fade-bottom{position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;z-index:2;background:linear-gradient(to bottom,rgba(24,26,34,0) 0%,rgba(24,26,34,.55) 55%,rgba(24,26,34,.9) 82%,rgba(24,26,34,1) 94%)}
/* .industria__contexto trae border-top de fábrica (separador entre
   subsecciones internas); cuando es la sección que sigue justo al hero de
   video, ese borde crea el escalón que el degradado ya resuelve. Se quita
   solo en ese caso puntual, sin tocar el resto de usos de la clase. */
.hero-scroll + .industria__contexto{border-top:0}

@media (max-width:759.98px){
  .industria-page__hero{min-height:60vh}
  .industria-page__hero .industria-page__media-img{object-position:center center}
  .hero-fade-bottom{height:28%}
}
.industria-page__kicker{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.industria-page__h1{margin:0;font-family:var(--font-sans);font-weight:800;font-size:clamp(30px,5vw,52px);line-height:1.1;letter-spacing:-.025em;color:#fff}
.industria-page__bajada{margin:0;max-width:64ch;font-size:clamp(15.5px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,.75)}
.industria-page__cta{margin-top:6px;display:inline-block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);background:var(--accent);padding:16px 26px;border-radius:2px;transition:background .2s ease-out}
.industria-page__cta:hover{background:#8bff2e}
.industria-page__cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 2. Contexto — dos columnas, fondo --ink (toda la página es oscura) */
.industria-page__contexto{background:var(--ink);color:var(--paper)}
.industria-page__contexto-inner{max-width:1400px;margin:0 auto;padding:clamp(56px,8vw,96px) clamp(20px,4.5vw,72px) clamp(24px,4vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.industria-page__contexto .industria-page__media{border-radius:12px;aspect-ratio:4/3}
.industria-page__titulo{margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.15;letter-spacing:-.02em;max-width:24ch;color:var(--paper)}
.industria-page__titulo--goldman{font-family:var(--font-display);font-weight:700}
.industria-page__titulo--sans{font-family:var(--font-sans);font-weight:800}
.industria-page__parrafo{margin:0 0 1em;font-size:17px;line-height:1.7;color:var(--muted)}
.industria-page__parrafo:last-child{margin-bottom:0}
.industria-page__contexto-body .industria-page__titulo{margin-bottom:20px}

/* 3. Qué construimos — mismo --ink, sin corte de color; se separa con espacio */
.industria-page__construimos{background:var(--ink);color:var(--paper)}
.industria-page__construimos-inner{max-width:1400px;margin:0 auto;padding:clamp(24px,4vw,40px) clamp(20px,4.5vw,72px) clamp(72px,10vw,112px)}
.industria-page__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:clamp(32px,4.5vw,48px);align-items:stretch}
.industria-page__card{display:flex;flex-direction:column;background:var(--ink-soft);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:border-color .2s ease-out,transform .2s ease-out}
.industria-page__card:hover{border-color:var(--accent);transform:translateY(-2px)}
.industria-page__card .industria-page__media{aspect-ratio:4/3;border-radius:0}
.industria-page__card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.industria-page__card-titulo{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.2vw,16px);line-height:1.3;color:var(--paper)}
.industria-page__card-texto{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}

/* 4. Cierre — dos columnas asimétricas, --ink, separador --line arriba */
.industria-page__cierre{background:var(--ink);color:var(--paper);border-top:1px solid var(--line)}
.industria-page__cierre-inner{max-width:1400px;margin:0 auto;padding:clamp(48px,7vw,80px) clamp(20px,4.5vw,72px);display:grid;grid-template-columns:1fr auto;gap:32px clamp(32px,4vw,56px);align-items:center}
.industria-page__cierre-texto{margin:0;max-width:620px;font-size:17px;line-height:1.7;color:var(--paper)}
.industria-page__cierre .industria-page__cta{justify-self:end;margin-top:0}

@media (max-width:780px){
  .industria-page__contexto-inner{grid-template-columns:1fr;gap:28px}
  .industria-page__cierre-inner{grid-template-columns:1fr;gap:20px}
  .industria-page__cierre .industria-page__cta{justify-self:start}
}

@media (prefers-reduced-motion: reduce){
  .industria-page__card,.industria-page__cta{transition:none}
}

/* ==========================================================================
   Qué construimos — destacado + miniaturas (namespace propio, no toca
   .industria-page__card ni .nivel del home). Requiere assets/industrias-showcase.js
   ========================================================================== */
.industria-showcase{margin-top:clamp(32px,4.5vw,48px)}
.industria-showcase__panel{background:var(--ink-soft);border-radius:16px;padding:32px}
.industria-showcase__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.industria-showcase__item{min-width:0}
.industria-showcase__item.is-active{grid-column:1 / -1;order:-1;margin-bottom:16px}

.industria-showcase__card{position:relative;height:100%;display:flex;flex-direction:column;background:var(--ink-soft);border:1px solid var(--line);border-radius:10px}
.industria-showcase__item.is-active .industria-showcase__card{border:0;background:transparent}

.industria-showcase__trigger{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;padding:0;background:transparent;border:0;cursor:pointer;border-radius:10px}
.industria-showcase__item.is-active .industria-showcase__trigger{cursor:default}
.industria-showcase__trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.industria-showcase__media{position:relative;overflow:hidden;border-radius:10px 10px 0 0;background:var(--line);aspect-ratio:16/7}
.industria-showcase__item.is-active .industria-showcase__media{aspect-ratio:21/9;border-radius:12px}
.industria-showcase__media::before{content:attr(data-expected);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;line-height:1.5;color:rgba(255,255,255,.4)}
.industria-showcase__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease-out}
.industria-showcase__item:not(.is-active) .industria-showcase__img--thumb{opacity:1}
.industria-showcase__item.is-active .industria-showcase__img--wide{opacity:1}

.industria-showcase__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(24,26,34,.95),rgba(24,26,34,0) 60%);opacity:0;transition:opacity .4s ease-out;pointer-events:none}
.industria-showcase__item.is-active .industria-showcase__overlay{opacity:1}

.industria-showcase__body{padding:20px;transition:opacity .4s ease-out,transform .4s ease-out}
.industria-showcase__titulo{margin:0;font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.3;color:var(--paper)}
.industria-showcase__texto{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}

.industria-showcase__item.is-active .industria-showcase__body{position:absolute;left:0;right:0;bottom:0;padding:40px;max-width:620px;transform:translateY(0)}
.industria-showcase__item.is-active .industria-showcase__titulo{font-family:var(--font-sans);font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.02em;color:var(--paper)}
.industria-showcase__item.is-active .industria-showcase__texto{margin-top:12px;font-size:17px;line-height:1.6;color:rgba(244,245,247,.85)}

@media (min-width:761px) and (max-width:1024px){
  .industria-showcase__list{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  /* Sin carrusel: las cuatro se muestran apiladas como tarjetas normales */
  .industria-showcase__list{grid-template-columns:1fr}
  .industria-showcase__item{grid-column:auto !important;order:0 !important;margin-bottom:0}
  .industria-showcase__card{border:1px solid var(--line);background:var(--ink-soft)}
  .industria-showcase__media{aspect-ratio:16/9 !important;border-radius:10px 10px 0 0 !important}
  .industria-showcase__img--wide{opacity:0 !important}
  .industria-showcase__img--thumb{opacity:1 !important}
  .industria-showcase__overlay{opacity:0 !important}
  .industria-showcase__body{position:static !important;padding:20px !important;max-width:none !important;transform:none !important}
  .industria-showcase__titulo{font-family:var(--font-display) !important;font-weight:700 !important;font-size:15px !important;color:var(--paper) !important}
  .industria-showcase__texto{margin-top:8px !important;font-size:14px !important;line-height:1.6 !important;color:var(--muted) !important}
  .industria-showcase__trigger{cursor:default}
}

@media (prefers-reduced-motion: reduce){
  .industria-showcase__img,.industria-showcase__overlay,.industria-showcase__body{transition:none}
}

/* ==========================================================================
   Hero con video en scroll (namespace propio; no toca .industria-page__hero
   de las páginas que aún no migran a este patrón).
   Requiere assets/industrias-hero-scroll.js
   ========================================================================== */
.hero-scroll{position:relative;height:220vh;background:var(--ink)}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink) center/cover no-repeat}
.hero-sticky__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Parallax opt-in (data-hero-parallax): la imagen es 20% más alta que el hero y
   industrias-hero-scroll.js la desplaza con el scroll. */
.hero-scroll.is-parallax .hero-sticky__bg{top:-10%;height:120%;will-change:transform}
.hero-sticky__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-sticky__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,26,34,.55) 0%,rgba(24,26,34,.6) 45%,rgba(24,26,34,.92) 100%)}
.hero-sticky__content{position:relative;z-index:3;height:100%;max-width:900px;margin:0 auto;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}

@media (max-width:1023.98px){
  .hero-scroll{height:80vh}
  .hero-sticky{position:relative;top:auto;height:100%}
  .hero-fade-bottom{height:28%}
}

@media (prefers-reduced-motion: reduce){
  .hero-scroll{height:auto}
  .hero-sticky{position:relative;top:auto;height:80vh}
}

/* ==========================================================================
   Página /nosotros — clases nuevas (sin equivalente previo). El resto de la
   página reutiliza .industria-page__titulo, .industria-page__construimos*,
   .industria-page__card* y .industria-page__cierre* de arriba.
   ========================================================================== */

/* Hero de Nosotros: sin imagen/video, ~55vh, alineado a la izquierda */
.nosotros-hero{position:relative;min-height:55vh;display:flex;align-items:center;padding:clamp(96px,14vw,120px) clamp(20px,4.5vw,72px) clamp(48px,7vw,72px);border-bottom:1px solid var(--line);background:var(--ink)}
.nosotros-hero__content{max-width:900px}

/* Contenedor genérico de sección (fondo --ink, ancho 1400px) */
.nosotros-section{max-width:1400px;margin:0 auto;padding:clamp(56px,8vw,96px) clamp(20px,4.5vw,72px)}

/* Columna de lectura: texto corrido de una sola columna, más grande que las tarjetas */
.reading-column{max-width:680px}
.reading-column p{margin:0 0 1em;font-size:17px;line-height:1.7;color:var(--muted)}
.reading-column p:last-child{margin-bottom:0}

/* Los seis compromisos (mismo contenido y diseño que el home, sin clase previa que reutilizar) */
.compromisos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));border-top:1px solid var(--line);margin-top:clamp(36px,5vw,56px)}
.compromiso{display:flex;gap:20px;align-items:flex-start;padding:clamp(26px,2.6vw,38px) clamp(24px,3vw,56px) clamp(26px,2.6vw,38px) 0;border-bottom:1px solid var(--line)}
.compromiso:nth-child(odd){border-right:1px solid var(--line)}
.compromiso:nth-child(even){padding-left:clamp(24px,3vw,56px);padding-right:0}
.compromiso svg{flex:none;margin-top:2px}
.compromiso__titulo{font-family:var(--font-sans);font-weight:600;font-size:clamp(17px,1.4vw,19px);margin-bottom:10px;color:var(--paper)}
.compromiso__texto{margin:0;max-width:44ch;font-size:15px;line-height:1.6;color:var(--muted)}

/* Nota debajo del grid de clientes */
.grid-nota{margin-top:24px;font-size:15px;line-height:1.6;color:var(--muted)}

/* Logo de cliente dentro de .industria-page__card: mismo mecanismo de fallback
   sin JS que .industria-page__media (el ::before se ve si el <img> no carga) */
.cliente-logo{position:relative;height:40px;overflow:hidden;background:var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cliente-logo::before{content:attr(data-name);position:relative;z-index:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cliente-logo img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;padding:6px}
/* Logo real cargado: más alto, sin placa ni nombre de respaldo detrás */
.cliente-logo--img{height:72px;background:none}
.cliente-logo--img::before{content:none}
.cliente-logo--img img{padding:0}
.clientes-grid .industria-page__card-body{text-align:center}

/* ==========================================================================
   Qué construimos — overlay a sangre + tira de tarjetas (namespace propio).
   Requiere assets/industrias-overlay-showcase.js
   Por defecto (sin JS, o <900px) se ve como tarjetas apiladas normales —
   esa es también la caída elegante sin JavaScript en cualquier ancho.
   ========================================================================== */
.overlay-showcase{position:relative;background:var(--ink)}
.overlay-showcase__heading{margin:0 0 24px}

/* Capas de fondo — ocultas hasta que el JS confirma escritorio/tablet y
   agrega .js-enabled; sin eso, .overlay-showcase__bg nunca llega a tener src */
.overlay-showcase__bg,
.overlay-showcase__gradient,
.overlay-showcase__scrim{display:none}
.overlay-showcase__bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease-out}
.overlay-showcase__bg-img.is-visible{opacity:1}

/* Texto dinámico — oculto por defecto; visible solo en el patrón habilitado */
.overlay-showcase__text{display:none}
.overlay-showcase__titulo{margin:0;font-family:var(--font-sans);font-weight:800;font-size:clamp(32px,4vw,48px);line-height:1.05;color:var(--paper);transition:opacity .3s ease-out}
.overlay-showcase__parrafo{margin:16px 0 0;max-width:44ch;font-size:15px;line-height:1.65;color:rgba(244,245,247,.85);transition:opacity .3s ease-out}
.overlay-showcase__text.is-fading .overlay-showcase__titulo,
.overlay-showcase__text.is-fading .overlay-showcase__parrafo{opacity:0}

/* Lista/tira de tarjetas — por defecto (sin JS o <900px): apiladas normales */
.overlay-showcase__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.overlay-showcase__item{min-width:0}
.overlay-showcase__card{display:flex;flex-direction:column;height:100%;background:var(--ink-soft);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.overlay-showcase__trigger{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;margin:0;border:0;background:none;cursor:default}
.overlay-showcase__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.overlay-showcase__caption-body{padding:20px}
.overlay-showcase__caption-body .overlay-showcase__caption-titulo{margin:0;font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.3;color:var(--paper)}
.overlay-showcase__caption-body .overlay-showcase__caption-texto{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}

/* ---- >=900px con JS: patrón overlay habilitado ---- */
@media (min-width:900px){
  .overlay-showcase.js-enabled{min-height:640px;overflow:hidden}
  .overlay-showcase.js-enabled .overlay-showcase__bg,
  .overlay-showcase.js-enabled .overlay-showcase__gradient,
  .overlay-showcase.js-enabled .overlay-showcase__scrim{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
  .overlay-showcase.js-enabled .overlay-showcase__gradient{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 32%,rgba(24,26,34,.75) 52%,rgba(24,26,34,.25) 78%,transparent 100%)}
  .overlay-showcase.js-enabled .overlay-showcase__scrim{background:rgba(24,26,34,.35)}

  .overlay-showcase.js-enabled .overlay-showcase__text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;max-width:420px;padding:56px 64px}

  .overlay-showcase.js-enabled .overlay-showcase__strip{position:relative;z-index:3}
  .overlay-showcase.js-enabled .overlay-showcase__list{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:16px;padding:16px 32px 32px;-ms-overflow-style:none;scrollbar-width:none;cursor:grab}
  .overlay-showcase.js-enabled .overlay-showcase__list::-webkit-scrollbar{display:none}
  .overlay-showcase.js-enabled .overlay-showcase__list.is-dragging{cursor:grabbing}
  .overlay-showcase.js-enabled .overlay-showcase__item{flex:none}
  .overlay-showcase.js-enabled .overlay-showcase__card{background:none;border:0;border-radius:0}
  .overlay-showcase.js-enabled .overlay-showcase__trigger{position:relative;z-index:1;width:160px;aspect-ratio:3/4;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--ink-soft);cursor:pointer;opacity:.5;transition:opacity .25s ease-out,transform .25s ease-out,border-color .25s ease-out}
  .overlay-showcase.js-enabled .overlay-showcase__trigger:hover{opacity:.85}
  .overlay-showcase.js-enabled .overlay-showcase__item.is-active .overlay-showcase__trigger{opacity:1;border:2px solid var(--accent);transform:scale(1.06)}
  .overlay-showcase.js-enabled .overlay-showcase__item.is-active .overlay-showcase__trigger::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent)}
  .overlay-showcase.js-enabled .overlay-showcase__trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  /* Visualmente oculta pero accesible/indexable: el JS solo copia este texto
     a la columna dinámica, nunca lo retira del DOM ni del árbol de accesibilidad */
  .overlay-showcase.js-enabled .overlay-showcase__caption-body{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* ---- >=1280px con JS: texto a la izquierda, tira anclada abajo-derecha ---- */
@media (min-width:1280px){
  .overlay-showcase.js-enabled{display:block}
  .overlay-showcase.js-enabled .overlay-showcase__text{position:absolute;top:0;left:0;bottom:0;max-width:420px;padding:64px}
  .overlay-showcase.js-enabled .overlay-showcase__strip{position:absolute;left:420px;right:0;bottom:0;padding-bottom:32px}
  .overlay-showcase.js-enabled .overlay-showcase__list{padding:16px 32px}
  .overlay-showcase.js-enabled .overlay-showcase__trigger{width:200px}
}

@media (prefers-reduced-motion: reduce){
  .overlay-showcase__bg-img,
  .overlay-showcase__titulo,
  .overlay-showcase__parrafo,
  .overlay-showcase__trigger,
  .overlay-showcase__list{transition:none}
  .overlay-showcase__item.is-active .overlay-showcase__trigger{transform:none}
}

/* ==========================================================================
   Menú móvil (hamburguesa) — reemplaza la barra completa de nav+CTA cuando
   no cabe en una fila. <details> nativo: abre/cierra con clic sin JS.
   ========================================================================== */
.nav-mobile{display:none}
.nav-desktop{display:flex;align-items:center;gap:20px}

@media (max-width:760px){
  .nav-desktop{display:none}
  .nav-mobile{display:block;position:relative}
}

.nav-mobile__toggle{cursor:pointer;list-style:none;width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:4px}
.nav-mobile__toggle::-webkit-details-marker{display:none}
.nav-mobile__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav-mobile__bar{display:block;width:22px;height:2px;background:#fff;border-radius:1px;transition:transform .2s ease-out,opacity .2s ease-out}
.nav-mobile[open] .nav-mobile__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-mobile[open] .nav-mobile__bar:nth-child(2){opacity:0}
.nav-mobile[open] .nav-mobile__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-mobile__panel{position:absolute;top:calc(100% + 10px);right:0;min-width:240px;max-width:calc(100vw - 40px);background:var(--ink-soft);border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:2px;z-index:40}
.nav-mobile__panel a{display:block;padding:12px;border-radius:4px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.nav-mobile__panel a:hover,.nav-mobile__panel a:focus-visible{background:rgba(255,255,255,.06);color:var(--accent);outline:none}
.nav-mobile__label{margin:6px 0 0;padding:8px 12px 2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nav-mobile__panel a[aria-disabled="true"]{color:rgba(255,255,255,.55)}
.nav-mobile__cta{margin-top:8px;text-align:center;color:var(--ink) !important;background:var(--accent)}
.nav-mobile__cta:hover,.nav-mobile__cta:focus-visible{background:#8bff2e;color:var(--ink) !important}

@media (prefers-reduced-motion: reduce){
  .nav-mobile__bar{transition:none}
}