/* ==========================================================================
   SaniFlow — Landing de línea · Exova / FluidsControl SA
   Tokens de marca en :root (CLAUDE.md §3). Mobile-first.
   ========================================================================== */

:root{
  /* Tipografía — Exo (display/marca) + Barlow Condensed (cuerpo, labels, tablas) */
  --font-display: 'Exo', system-ui, sans-serif;            /* pesos 700/800 */
  --font-body: 'Barlow Condensed', system-ui, sans-serif;  /* 400 cuerpo, 600/700 labels, 800 títulos */

  /* Oscuro neutro (identidad marketing: placas de LinkedIn) */
  --c-dark:        #10151C;   /* color de TEXTO y títulos */
  --c-blue-deep:   #0B1130;   /* azul bien oscuro de las franjas formato Siemens (print 20-07-2026) */

  /* Acentos de marca (celeste del logo + cyan de placas + teal del catálogo) */
  --c-blue:        #2AA6F8;   /* celeste primario: botones, wordmarks, destacados */
  --c-blue-bright: #009AFF;
  --c-cyan:        #35B6EA;   /* stop medio de los degradés de acento */
  --c-teal:        #65DDD1;   /* celeste verdoso de la literatura de producto (degradés) */
  --c-green:       #30E49E;   /* verde de la "X" de marca (print del usuario, 20-07-2026) */
  --c-green-soft:  #BDF6E0;   /* verde claro: fondo de franjas (visible, no lavado) */
  /* Azul accesible para texto/links sobre blanco, --c-bg-soft y --c-green-soft:
     --c-blue no alcanza AA (2.7:1); este da 5.5 / 5.0 / 4.6 */
  --c-blue-text:   #0067B0;

  /* Grises acero + neutros */
  --c-steel-700:   #343E48;
  --c-steel-500:   #545D64;
  --c-steel-300:   #BEC2C5;
  --c-bg-soft:     #F5F5F5;
  --c-white:       #FFFFFF;
  --c-error:       #B3261E;

  /* Espaciado / radios / sombras */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-6:3rem; --sp-8:4rem;
  --radius: 10px; --radius-lg: 16px;
  --shadow-card: 0 6px 24px rgba(6,16,32,.08);
  --maxw: 1200px;

  --header-h: 72px;
}

/* ---------- Reset y base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px);
  /* Escala tipográfica base compartida con AgileReact: sube ~11% los tamaños
     en rem (nav, labels, títulos); el cuerpo se compensa abajo (~18px). */
  font-size:111%;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.02rem; /* ~18px: cuerpo legible para lectura técnica */
  line-height:1.55;
  color:var(--c-steel-700);
  background:var(--c-white);
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:var(--c-blue-text); }
address{ font-style:normal; }
code{ font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:.92em; }
button{ font:inherit; cursor:pointer; }

:focus-visible{ outline:3px solid var(--c-blue-text); outline-offset:2px; border-radius:2px; }
.site-footer :focus-visible{ outline-color:var(--c-dark); }

.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-3); }
.section{ padding-block: clamp(64px, 9vw, 120px); }

/* Etiqueta chica sobre los títulos de sección (patrón compartido con AgileReact) */
.eyebrow{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.82rem;
  color:var(--c-blue-text);
  margin:0 0 .8rem;
}

h2{
  font-family:var(--font-body);
  font-weight:800;
  color:var(--c-dark);
  font-size:clamp(1.75rem, 4vw, 2.5rem);
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:.02em;
}
h3{ font-family:var(--font-body); font-weight:700; color:var(--c-dark); font-size:1.3rem; line-height:1.2; }
.section-lead{
  max-width:52ch;
  margin-top:var(--sp-2);
  color:var(--c-steel-500);
  font-size:clamp(1.1rem, 1.8vw, 1.25rem);
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--sp-2); top:-100px; z-index:200;
  background:var(--c-blue); color:var(--c-dark);
  padding:.6rem 1rem; border-radius:var(--radius); font-weight:700;
  transition:top .15s ease;
}
.skip-link:focus{ top:var(--sp-1); }

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
  text-decoration:none;
  text-align:center;
  border:2px solid transparent;
  border-radius:var(--radius);
  padding:.7rem 1.4rem;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-primary{ background:var(--c-blue); color:var(--c-dark); }
.btn-primary:hover{ background:var(--c-blue-bright); transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--c-dark); border-color:var(--c-dark); }
/* Hover en celeste de marca (nunca relleno negro) */
.btn-secondary:hover{ border-color:var(--c-blue); background:var(--c-blue); color:var(--c-dark); }
.btn-lg{ padding:.8rem 1.75rem; font-size:1.15rem; }
.btn-block{ display:block; width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  /* Vidrio translúcido: "transparente" sobre el hero claro, legible al scrollear */
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(16,21,28,.08);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 2px 16px rgba(6,16,32,.1); }
.header-inner{
  display:flex; align-items:center; gap:var(--sp-2);
  min-height:var(--header-h);
}
.brand{ display:inline-flex; align-items:center; flex-shrink:0; }
.brand img{ width:132px; height:auto; }

.main-nav{ display:none; }
.main-nav ul{ display:flex; gap:var(--sp-3); }
.main-nav a{
  color:var(--c-dark); text-decoration:none; font-weight:600;
  font-size:1.1rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.4rem .15rem; position:relative;
  transition:color .18s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:var(--c-blue);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.main-nav a:hover{ color:var(--c-dark); }
.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; }

.lang-toggle{
  display:flex; border:1px solid var(--c-steel-300); border-radius:var(--radius); overflow:hidden;
}
.lang-toggle button{
  background:transparent; color:var(--c-dark); border:0;
  padding:.32rem .55rem; font-weight:600; font-size:.9rem; letter-spacing:.04em;
}
.lang-toggle button[aria-pressed="true"]{ background:var(--c-blue); color:var(--c-dark); }
.lang-toggle button:not([aria-pressed="true"]):hover{ background:rgba(16,21,28,.06); }

.btn-header{ padding:.5rem 1.15rem; font-size:1.1rem; }

.nav-burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:9px;
  background:transparent; border:1px solid var(--c-steel-300); border-radius:var(--radius);
}
.nav-burger span{
  display:block; height:2px; width:100%; background:var(--c-dark);
  border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Nav colapsada (mobile) */
.main-nav.open{
  display:block;
  position:absolute; left:0; right:0; top:var(--header-h);
  background:var(--c-white);
  border-top:1px solid rgba(16,21,28,.08);
  box-shadow:0 12px 24px rgba(6,16,32,.12);
}
.main-nav.open ul{ flex-direction:column; gap:0; padding:var(--sp-2) var(--sp-3); }
.main-nav.open a{ display:block; padding:.8rem 0; border-bottom:1px solid rgba(16,21,28,.08); }
.main-nav.open a::after{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  color:var(--c-steel-700);
  background:linear-gradient(160deg, var(--c-white) 0%, var(--c-green-soft) 100%);
  overflow:hidden;
}
/* Red de puntos (motivo de los catálogos), sutil */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg stroke='%2330E49E' stroke-width='1' opacity='.35'%3E%3Cline x1='20' y1='40' x2='120' y2='90'/%3E%3Cline x1='120' y1='90' x2='230' y2='30'/%3E%3Cline x1='120' y1='90' x2='80' y2='200'/%3E%3Cline x1='80' y1='200' x2='210' y2='170'/%3E%3Cline x1='230' y1='30' x2='210' y2='170'/%3E%3Cline x1='20' y1='40' x2='80' y2='200' opacity='.5'/%3E%3C/g%3E%3Cg fill='%2330E49E'%3E%3Ccircle cx='20' cy='40' r='3'/%3E%3Ccircle cx='120' cy='90' r='4'/%3E%3Ccircle cx='230' cy='30' r='2.5'/%3E%3Ccircle cx='80' cy='200' r='3.5'/%3E%3Ccircle cx='210' cy='170' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 260px;
  opacity:.14;
  pointer-events:none;
}
/* Video de fondo opcional (activado por JS solo si el archivo existe).
   object-fit:cover llena el ancho (sin barras negras) y scale(1.08) recorta
   los bordes, donde suelen vivir las marcas de agua. */
.hero-media{
  position:absolute; inset:0; overflow:hidden;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Video 16:9 (26-07-21): ya viene procesado — recortado el arranque (salto
     de toma de Veo) y con la marca de agua borrada por delogo. Sin zoom CSS. */
  object-position:50% 45%;
  /* Gris de estudio de Gemini → punto blanco y saturación con moderación
     (brillo alto + velo = efecto "filtro blanco", descartado 19-07-2026) */
  filter:brightness(1.12) saturate(1.45);
}
/* Scrim BLANCO solo en la columna de texto: se apaga antes de llegar al
   equipo para que el video no quede con "filtro blanco" encima */
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.5) 48%, rgba(255,255,255,0) 72%);
}
/* Fundido inferior: transición al bloque siguiente y cobertura de la franja
   baja del video en viewports altos (donde vive la marca de agua) */
.hero-media::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:16%;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.85) 60%, var(--c-white) 100%);
}
.hero--video .hero-photo{ display:none; }
.hero--video .hero-inner{ grid-template-columns:1fr; }

.hero-inner{
  position:relative;
  display:grid; gap:var(--sp-4);
  padding-block:clamp(3rem, 8vw, 5.5rem);
}
.hero-brandline{
  text-transform:uppercase; letter-spacing:.14em; font-weight:600;
  color:var(--c-blue-text); font-size:.95rem;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(3rem, 9vw, 5.25rem);
  line-height:1;
  margin-top:var(--sp-1);
  /* Celeste de marca: wordmark del producto (exención de logo WCAG) */
  color:var(--c-blue);
}
.hero-tm{ font-size:.35em; vertical-align:super; font-weight:700; opacity:.85; }
.hero-sub{
  margin-top:var(--sp-2);
  font-size:clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight:600;
  max-width:34ch;
  color:var(--c-dark);
}
.hero-industries{
  margin-top:var(--sp-2);
  text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--c-blue-text); font-size:1rem;
}
/* Característica rotativa: aparece y desaparece de a una (patrón compartido
   con AgileReact, estilo videos de marketing) — GRANDE, como en el video del reactor */
.hero-feature{
  margin-top:var(--sp-2);
  min-height:2.5em; /* reserva 2 líneas: los CTAs no saltan al rotar */
  font-size:clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight:800;
  line-height:1.2;
  color:var(--c-dark);
  max-width:24ch;
  opacity:1;
  transition:opacity .35s ease;
}
.hero-feature.is-out{ opacity:0; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); }
/* Render transparente flotando sobre el hero claro, con brillo sutil detrás */
.hero-photo{
  justify-self:center;
  max-width:440px;
  position:relative;
  padding:var(--sp-2);
}
.hero-photo::before{
  content:"";
  position:absolute; inset:6%;
  background:radial-gradient(ellipse at 50% 55%, rgba(53,182,234,.16) 0%, rgba(42,166,248,.08) 45%, transparent 72%);
  pointer-events:none;
}
.hero-photo img{
  position:relative;
  filter:drop-shadow(0 24px 40px rgba(6,16,32,.25));
}

/* ---------- Propuesta de valor ---------- */
.vp-grid{ display:grid; gap:var(--sp-3); margin-top:var(--sp-6); }
.vp-card{
  background:var(--c-white);
  border:1px solid var(--c-bg-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--sp-4) var(--sp-3);
}
.vp-icon{
  width:52px; height:52px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(42,166,248,.12);
  color:var(--c-blue-text);
  margin-bottom:var(--sp-2);
}
.vp-card h3{ margin-bottom:var(--sp-1); }
.vp-card p{ color:var(--c-steel-500); }

/* ---------- Franja de confianza ---------- */
/* Franja formato Siemens (print del usuario, 20-07-2026): fondo azul bien
   oscuro, textos blancos/grises claros y el celeste de marca como acento */
.trust-band{
  background:var(--c-blue-deep);
  color:var(--c-white);
  padding-block:var(--sp-6);
}
.trust-badges{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  text-align:center;
}
.trust-badges li{ display:grid; gap:.3rem; padding-inline:var(--sp-1); }
.trust-accent{
  font-family:var(--font-body); font-weight:800; font-size:1.35rem;
  color:var(--c-blue); letter-spacing:.02em;
}
.trust-badges li > span:last-child{ color:rgba(255,255,255,.75); font-size:1rem; }
.trust-industries{
  margin-top:var(--sp-4);
  text-align:center;
  color:rgba(255,255,255,.75);
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:var(--sp-3);
  font-size:1.1rem;
}
.trust-industries strong{ color:var(--c-white); letter-spacing:.04em; }

/* ---------- Selector de modelos ---------- */
.models{ background:var(--c-bg-soft); }

.filters{
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.filter-group{ border:0; padding:0; margin:0; }
.filter-group legend{
  font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:.85rem; color:var(--c-steel-500); margin-bottom:.4rem; padding:0;
}
.filter-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  border:1.5px solid var(--c-steel-300);
  background:var(--c-white);
  color:var(--c-steel-700);
  border-radius:999px;
  padding:.3rem .9rem;
  font-weight:600; font-size:.95rem;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover{ border-color:var(--c-blue); }
.chip.active{ background:var(--c-blue); border-color:var(--c-blue); color:var(--c-dark); }

.filter-empty{
  margin-top:var(--sp-4); padding:var(--sp-3);
  background:var(--c-white); border-radius:var(--radius);
  border:1px dashed var(--c-steel-300); color:var(--c-steel-500);
}

.model-grid{
  display:grid; gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.model-card{
  background:var(--c-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.model-card:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(6,16,32,.14); }
/* Galería de fotos por modelo: foto GRANDE y varias vistas que se pasan
   hacia la derecha (scroll-snap + flechas + puntos, patrón compartido con
   AgileReact). Render transparente flotando en la tarjeta. */
.model-photo{
  position:relative;
  background:linear-gradient(180deg, #FBFCFD 0%, var(--c-bg-soft) 100%);
  padding:var(--sp-1) var(--sp-1) var(--sp-3);
}
.model-gallery{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.model-gallery::-webkit-scrollbar{ display:none; }
.model-gallery img{
  flex:0 0 100%;
  width:100%; height:310px; object-fit:contain;
  scroll-snap-align:center;
  filter:drop-shadow(0 10px 18px rgba(6,16,32,.16));
}
.gal-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow-card);
  color:var(--c-dark);
  transition:background-color .18s ease;
}
.gal-btn:hover{ background:var(--c-blue); }
.gal-btn svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.gal-prev{ left:10px; }
.gal-next{ right:10px; }
.gal-dots{
  position:absolute; left:0; right:0; bottom:8px;
  display:flex; justify-content:center; gap:6px;
}
.gal-dots span{
  width:8px; height:8px; border-radius:50%;
  background:var(--c-steel-300);
  transition:background-color .18s ease;
}
.gal-dots span.is-active{ background:var(--c-blue); }
.cert-flag{
  position:absolute; top:var(--sp-2); left:var(--sp-2);
  background:var(--c-blue); color:var(--c-dark);
  font-size:.8rem; font-weight:700; letter-spacing:.04em;
  padding:.2rem .6rem; border-radius:999px;
}
.model-body{ padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.model-body h3{ font-size:1.5rem; letter-spacing:.02em; }
.model-tags{ display:flex; flex-wrap:wrap; gap:.35rem; }
.model-tags li{
  background:var(--c-bg-soft); color:var(--c-steel-700);
  font-size:.85rem; font-weight:600; letter-spacing:.03em;
  padding:.15rem .6rem; border-radius:999px;
}
.model-body p{ color:var(--c-steel-500); flex:1; }
.model-cta{ display:grid; gap:.5rem; }
.link-cotizar{
  font-weight:700; color:var(--c-blue-text); text-decoration:none;
  font-size:1rem;
}
.link-cotizar:hover{ text-decoration:underline; }

/* Tabla comparativa */
.compare{ margin-top:var(--sp-8); }
.compare h3{ font-size:1.5rem; margin-bottom:var(--sp-3); text-transform:uppercase; letter-spacing:.02em; }
.table-scroll{ overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow-card); }
.compare-table{
  width:100%; min-width:760px;
  border-collapse:collapse;
  background:var(--c-white);
  font-size:1rem;
}
.compare-table th, .compare-table td{
  padding:.7rem 1rem; text-align:left;
  border-bottom:1px solid var(--c-bg-soft);
}
.compare-table thead th{
  /* Fila de títulos en celeste de marca con texto oscuro (pasa AA) */
  background:var(--c-blue); color:var(--c-dark);
  text-transform:uppercase; letter-spacing:.06em; font-size:.85rem;
  position:sticky; top:0;
}
.compare-table tbody th{ font-weight:700; }
.compare-table tbody th a{ color:var(--c-blue-text); text-decoration:none; }
.compare-table tbody th a:hover{ text-decoration:underline; }
.compare-table tbody tr:nth-child(even){ background:#FAFBFC; }

/* ---------- Detalle por modelo ---------- */
.model-details .section-lead{ margin-bottom:var(--sp-4); }
.model-detail{
  background:var(--c-white);
  border:1px solid var(--c-bg-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  margin-top:var(--sp-3);
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.model-detail summary{
  list-style:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem var(--sp-2);
  padding:var(--sp-3);
  cursor:pointer;
  border-radius:var(--radius-lg);
}
.model-detail summary::-webkit-details-marker{ display:none; }
.model-detail summary:hover{ background:#FAFBFC; }
.md-name{
  font-family:var(--font-body); font-weight:800; font-size:1.6rem;
  color:var(--c-dark); letter-spacing:.02em;
}
.md-sub{ color:var(--c-steel-500); font-size:1.05rem; flex:1 1 260px; }
.md-cert{
  background:var(--c-blue); color:var(--c-dark);
  font-size:.8rem; font-weight:700; letter-spacing:.04em;
  padding:.2rem .6rem; border-radius:999px;
}
.md-chevron{
  width:12px; height:12px; margin-left:auto; flex-shrink:0;
  border-right:2.5px solid var(--c-blue-text);
  border-bottom:2.5px solid var(--c-blue-text);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.model-detail[open] .md-chevron{ transform:rotate(225deg); }
.md-body{
  padding:0 var(--sp-3) var(--sp-3);
  display:grid; gap:var(--sp-4);
  border-top:1px solid var(--c-bg-soft);
  padding-top:var(--sp-3);
}
.md-info{ display:grid; gap:var(--sp-3); }
.md-photo{
  background:linear-gradient(180deg, #FBFCFD 0%, var(--c-bg-soft) 100%);
  border-radius:var(--radius);
  display:grid; place-items:center;
  padding:var(--sp-2);
}
.md-photo img{
  max-height:360px; width:auto; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(6,16,32,.16));
}
.md-text > p:first-child{ color:var(--c-steel-700); font-size:1.1rem; }
.specs{
  width:100%; border-collapse:collapse; margin-top:var(--sp-3); font-size:1rem;
}
.specs th, .specs td{
  text-align:left; padding:.5rem .75rem;
  border-bottom:1px solid var(--c-bg-soft);
  vertical-align:top;
}
.specs th{
  width:38%;
  color:var(--c-dark); font-weight:700;
  text-transform:uppercase; font-size:.85rem; letter-spacing:.05em;
}
.specs tr:nth-child(even){ background:#FAFBFC; }
.md-apps{ margin-top:var(--sp-3); color:var(--c-steel-500); }
.md-apps strong{ color:var(--c-dark); text-transform:uppercase; font-size:.9rem; letter-spacing:.05em; }
.md-note{
  margin-top:var(--sp-2);
  padding:var(--sp-2);
  background:var(--c-bg-soft);
  border-left:3px solid var(--c-blue);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--c-steel-700);
  font-size:1rem;
}

/* ---------- Configurador ---------- */
.configurator{
  background:var(--c-bg-soft);
  border-radius:var(--radius-lg);
  padding:var(--sp-3);
  align-self:start;
}
.config-title{
  font-weight:800; color:var(--c-dark); font-size:1.2rem;
  text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:var(--sp-1);
}
.config-help{ color:var(--c-steel-500); font-size:.95rem; margin-bottom:var(--sp-3); }
.config-fields{ display:grid; gap:var(--sp-2); }
.config-field label,
.config-field .config-label{
  display:block;
  font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--c-blue-text);
  margin-bottom:.25rem;
}
.config-field select{
  width:100%;
  font-family:var(--font-body); font-size:1rem; color:var(--c-steel-700);
  padding:.5rem .6rem;
  border:1.5px solid var(--c-steel-300); border-radius:var(--radius);
  background:var(--c-white);
}
.config-field select:hover{ border-color:var(--c-blue); }
.config-fixed{
  display:flex; align-items:center; gap:.5rem;
  background:var(--c-white); border:1.5px dashed var(--c-steel-300);
  border-radius:var(--radius); padding:.5rem .6rem;
  color:var(--c-steel-500); font-size:1rem;
}
.config-fixed code{ font-weight:700; color:var(--c-dark); }
.config-result{
  margin-top:var(--sp-3);
  background:var(--c-white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:var(--sp-2) var(--sp-3);
  position:sticky; bottom:var(--sp-1);
}
.config-result-label{
  font-size:.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--c-steel-500);
}
.config-code{
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:clamp(1.05rem, 3.4vw, 1.45rem);
  font-weight:700;
  color:var(--c-dark);
  margin:.35rem 0 var(--sp-2);
  word-break:break-all;
}
.configurator .btn{ width:100%; }
.configurator-doe .config-result{ position:static; }
.doe-note{ color:var(--c-steel-500); margin-bottom:var(--sp-2); }

/* ---------- Accesorios ---------- */
.accessories{ background:var(--c-bg-soft); }
.acc-grid{
  display:grid; gap:var(--sp-3); margin-top:var(--sp-4);
}
.acc-card{
  background:var(--c-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--sp-3);
}
.acc-card h3{ font-size:1.2rem; }
.acc-mat{ color:var(--c-steel-500); font-size:.95rem; margin:.25rem 0 var(--sp-2); }
.acc-parts{ width:100%; border-collapse:collapse; font-size:.98rem; }
.acc-parts td{ padding:.35rem 0; border-bottom:1px solid var(--c-bg-soft); }
.acc-parts td:last-child{ text-align:right; }
.acc-parts code{ color:var(--c-dark); font-weight:600; }
.acc-cta{ margin-top:var(--sp-4); font-size:1.1rem; }

/* ---------- Somos fabricantes ---------- */
.makers{
  background:var(--c-blue-deep);
  color:var(--c-white);
  padding-block:clamp(64px, 9vw, 120px);
}
.makers-inner{ display:grid; gap:var(--sp-4); align-items:center; }
/* Título de la sección en azul eléctrico (prueba del usuario, 20-07-2026) */
.makers h2{ color:var(--c-blue-bright); }
.makers-lead{
  color:rgba(255,255,255,.75); font-size:clamp(1.15rem, 2vw, 1.35rem);
  margin-top:var(--sp-2); max-width:48ch;
}
.makers-points{ display:grid; gap:var(--sp-2); margin:var(--sp-4) 0; }
.makers-points li{
  display:grid; gap:.15rem;
  padding-left:1.5rem; position:relative;
}
.makers-points li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:.6rem; height:.6rem; border-radius:2px;
  background:var(--c-white);
}
.makers-points strong{ color:var(--c-blue-bright); font-size:1.15rem; }
.makers-points span{ color:rgba(255,255,255,.72); }
/* Foto PNG transparente flotando sobre la franja oscura (sin recuadro blanco) */
.makers-photo img{
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.45));
}

/* ---------- Skids ---------- */
.skids-inner{ display:grid; gap:var(--sp-4); align-items:center; }
/* Foto PNG transparente flotando sobre el fondo (sin recuadro blanco) */
.skids-photo img{
  filter:drop-shadow(0 18px 32px rgba(6,16,32,.22));
}
.skids-copy h2{ margin-bottom:var(--sp-2); color:var(--c-blue-bright); }
.skids-copy > p{ color:var(--c-steel-500); margin-bottom:var(--sp-2); }
.skids-list{ margin:var(--sp-2) 0 var(--sp-3); display:grid; gap:.6rem; }
.skids-list li{
  padding-left:1.4rem; position:relative; color:var(--c-steel-700);
}
.skids-list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:.55rem; height:.55rem; border-radius:2px;
  background:var(--c-blue);
}

/* ---------- Formulario ---------- */
.quote{
  background:var(--c-blue-deep);
  color:var(--c-white);
}
/* Formato Siemens sobre azul oscuro: kicker y título en BLANCO, celeste de acento */
.quote .eyebrow{ color:var(--c-white); }
.quote-inner{ display:grid; gap:var(--sp-4); }
.quote-intro h2{ color:var(--c-blue-bright); }
.quote-intro > p{ color:rgba(255,255,255,.75); margin-top:var(--sp-2); max-width:46ch; font-size:1.15rem; }
.quote-points{ margin-top:var(--sp-3); display:grid; gap:.6rem; }
.quote-points li{
  padding-left:1.6rem; position:relative; color:rgba(255,255,255,.85);
}
.quote-points li::before{
  content:"✓"; position:absolute; left:0;
  color:var(--c-blue); font-weight:800;
}
.quote-form{
  background:var(--c-white);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 48px rgba(6,16,32,.14);
  padding:var(--sp-4) var(--sp-3);
  color:var(--c-steel-700);
  display:grid; gap:var(--sp-2);
}
.form-row{ display:grid; gap:var(--sp-2); }
.form-field label{
  display:block; font-weight:700; font-size:.95rem;
  letter-spacing:.02em; color:var(--c-dark); margin-bottom:.25rem;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  font-family:var(--font-body); font-size:1.05rem; color:var(--c-steel-700);
  padding:.55rem .7rem;
  border:1.5px solid var(--c-steel-300);
  border-radius:var(--radius);
  background:var(--c-white);
}
.form-field textarea{ resize:vertical; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover{ border-color:var(--c-steel-500); }

/* Selects con flecha propia + anillo de foco celeste (patrón compartido con AgileReact) */
.config-field select,
.form-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23545D64' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  padding-right:2.2rem;
}
.config-field select:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(42,166,248,.18);
}
.form-field.invalid input, .form-field.invalid select{ border-color:var(--c-error); }
.field-error{ display:none; color:var(--c-error); font-size:.9rem; margin-top:.25rem; }
.form-field.invalid .field-error{ display:block; }
.field-hint{ color:var(--c-steel-500); font-size:.9rem; margin-top:.25rem; }
.form-feedback{ font-weight:600; min-height:1.4em; }
.form-feedback.ok{ color:#1B7F4B; }
.form-feedback.error{ color:var(--c-error); }

/* ---------- Footer ---------- */
/* Footer degradé celeste → cyan → teal, texto oscuro */
.site-footer{
  background:linear-gradient(160deg, var(--c-blue) 0%, var(--c-cyan) 45%, var(--c-teal) 100%);
  color:rgba(16,21,28,.82);
  padding-block:var(--sp-6) var(--sp-3);
}
.footer-grid{ display:grid; gap:var(--sp-4); }
.footer-brand img{ width:150px; }
.footer-brand p{ margin-top:var(--sp-2); max-width:34ch; }
.site-footer h2{
  color:var(--c-dark); font-size:1rem; letter-spacing:.1em;
  margin-bottom:var(--sp-2);
}
.footer-contact p{ margin-bottom:.4rem; }
.site-footer a{ color:var(--c-dark); font-weight:700; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-nav ul{ display:grid; gap:.4rem; }
/* Texto legal a todo el ancho del contenedor (fuera de las columnas del grid) */
.footer-legal{
  margin-top:var(--sp-6);
  border-top:1px solid rgba(16,21,28,.18);
  padding-top:var(--sp-3);
  font-size:.82rem;
  color:rgba(16,21,28,.78);
  width:100%;
}
.footer-legal p{ max-width:none; }
.footer-legal p + p{ margin-top:.4rem; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* ---------- Breakpoints ---------- */
/* Header compacto: logo + idioma + CTA "Cotizar" + burger entran en 360px */
@media (max-width: 560px){
  .brand img{ width:96px; }
  .header-inner{ gap:.6rem; }
  .lang-toggle button{ padding:.25rem .4rem; font-size:.8rem; }
  .btn-header{ padding:.4rem .7rem; font-size:.95rem; }
  .nav-burger{ width:38px; height:38px; }
}

@media (min-width: 640px){
  .form-row{ grid-template-columns:1fr 1fr; }
  .vp-grid{ grid-template-columns:1fr 1fr; }
  .model-grid{ grid-template-columns:repeat(2, 1fr); }
  .acc-grid{ grid-template-columns:repeat(2, 1fr); }
  .config-fields{ grid-template-columns:1fr 1fr; }
}

@media (min-width: 900px){
  .main-nav{ display:block; margin-left:var(--sp-3); }
  .nav-burger{ display:none; }
  .hero-inner{ grid-template-columns:1.15fr .85fr; align-items:center; }
  .hero-photo{ justify-self:end; }
  .model-grid{ grid-template-columns:repeat(3, 1fr); }
  .acc-grid{ grid-template-columns:repeat(3, 1fr); }
  .skids-inner{ grid-template-columns:.9fr 1.1fr; }
  /* Columna de foto más ancha: el skid se ve GRANDE (pedido 20-07-2026) */
  .makers-inner{ grid-template-columns:.9fr 1.1fr; }
  .quote-inner{ grid-template-columns:.8fr 1.2fr; align-items:start; }
  .footer-grid{ grid-template-columns:1.2fr 1fr .6fr; }
  .config-result{ position:static; }
}

@media (min-width: 1100px){
  .vp-grid{ grid-template-columns:repeat(4, 1fr); }
  .md-body{ grid-template-columns:1.35fr 1fr; align-items:start; }
  .md-info{ grid-template-columns:.8fr 1.2fr; align-items:start; }
  .configurator{ position:sticky; top:calc(var(--header-h) + 16px); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .model-card:hover{ transform:none; }
  /* Fallback estático: sin video de fondo, queda el degradé claro + foto */
  .hero-media{ display:none !important; }
  .hero--video .hero-photo{ display:block; }
  .hero--video .hero-inner{ grid-template-columns:inherit; }
}