/* ============================================================
   Parsagraf — sistema de diseño
   Base: Swiss Modernism 2.0 (rejilla, espaciado matemático,
   un unico acento, cero decoracion superflua) + tipografia
   editorial (Newsreader + IBM Plex Sans/Mono). Color de marca
   real (#4468FF) muestreado del logo autentico de Parsagraf
   (el #105BAB usado hasta el 08-ago-2026 salia del logo de ISO
   por error — ver nota en :root).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- color: un solo acento, resto neutros ---
     08-ago-2026: el #105BAB anterior salia del logo EQUIVOCADO (el de ISO,
     que llevaba meses puesto por error en vez del logo real de Parsagraf).
     Azul real, muestreado del logo recuperado del snapshot pre-hackeo:
     #4468FF. Es demasiado claro para texto (4.50:1 con blanco, al limite de
     AA); --azul-texto es el mismo tono a menor luminosidad (9.16:1) para
     enlaces/texto/botones. --azul se reserva para iconos, fondos y el logo. */
  --azul:        #4468FF;   /* azul de marca real (del logo recuperado) */
  --azul-texto:  #0029D6;   /* mismo tono, oscurecido para contraste AA en texto */
  --tinta:       #0B1220;   /* casi-negro con temperatura fria, no #000 puro */
  --gris-900:    #171E2B;
  --gris-700:    #3D4657;
  --gris-500:    #6B7385;
  --gris-300:    #D7DBE3;
  --gris-100:    #F2F4F7;
  --papel:       #FCFCFB;
  --blanco:      #FFFFFF;

  /* --- tipografia --- */
  /* IBM Plex en vez de Inter a secas: es el tipo de una empresa de ingenieria
     real (IBM), con caracter tecnico que encaja con una imprenta industrial —
     y Plex Mono da cifras tabulares reales para specs/envases, no decorativas. */
  --f-display: "Newsreader", Georgia, serif;
  --f-cuerpo:  "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* --- rejilla / espaciado: base 8px --- */
  --u1: 8px;  --u2: 16px; --u3: 24px; --u4: 32px;
  --u6: 48px; --u8: 64px; --u10: 80px; --u12: 96px;
  --max: 1200px;

  --radio: 2px;         /* casi cuadrado, no burbujas */
  --borde: 1px solid var(--gris-300);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-cuerpo);
  color:var(--gris-900);
  background:var(--papel);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* Trama de medios tonos: no es "ruido" generico de plantilla IA, es el propio
   punto de retícula con el que se imprime en offset — textura con sentido,
   no decoración. Fija sobre toda la pagina, casi imperceptible. */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:2000;
  background-image:radial-gradient(var(--gris-900) .6px, transparent .6px);
  background-size:4px 4px;
  opacity:.035;
}
:focus-visible{outline:2px solid var(--azul-texto); outline-offset:2px;}
.num-tabular{font-variant-numeric:tabular-nums;}

/* ============================================================
   MOTION — el sitio no aparece de golpe, se revela.
   Curva propia con masa (no ease-in-out de fabrica), animando
   solo transform/opacity/filter para que vaya a 60fps.
   ============================================================ */
:root{
  --curva: cubic-bezier(.22,.61,.36,1);      /* salida suave, con peso */
  --curva-fuerte: cubic-bezier(.32,.72,0,1); /* entradas cinematograficas */
}

.reveal{
  opacity:0; transform:translateY(28px); filter:blur(6px);
  transition:opacity .9s var(--curva-fuerte), transform .9s var(--curva-fuerte), filter .9s var(--curva-fuerte);
  transition-delay:var(--d, 0ms);
  will-change:transform, opacity;
}
.reveal.visible{opacity:1; transform:none; filter:blur(0);}
/* al terminar, soltar will-change para no dejar capas GPU colgadas */
.reveal.done{will-change:auto;}

/* Parallax del hero sin listener de scroll: animacion nativa ligada al
   scroll donde el navegador lo soporta; donde no, simplemente no hay
   parallax y no pasa nada. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hero-foto{
      animation:heroPan linear both;
      animation-timeline:scroll(root);
      animation-range:0 90vh;
    }
    @keyframes heroPan{
      from{transform:scale(1.06) translateY(0);}
      to{transform:scale(1.06) translateY(46px);}
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; filter:none; transition:none;}
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}
img{max-width:100%;display:block;}
a{color:var(--azul-texto);text-decoration:none;}
a:hover{text-decoration:underline;}
.contenedor{max-width:var(--max);margin:0 auto;padding:0 var(--u4);}
section{padding:var(--u12) 0;}

/* --- tipografia: jerarquia clara, sin decoracion --- */
h1,h2,h3{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--tinta);
}
h1{font-size:clamp(2.6rem, 5vw, 4.2rem); font-weight:500;}
h2{font-size:clamp(1.7rem, 3vw, 2.4rem); margin-bottom:var(--u3);}
h3{font-size:1.25rem; font-weight:600; font-family:var(--f-cuerpo); color:var(--tinta);}
p{margin-bottom:var(--u2); color:var(--gris-700); max-width:62ch;}
.eyebrow{
  font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--azul-texto); margin-bottom:var(--u2); display:flex; align-items:center; gap:7px;
}
.eyebrow svg{width:13px; height:13px; flex-shrink:0; opacity:.85;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--tinta); color:var(--blanco);
  padding:14px 26px; border-radius:var(--radio);
  font-weight:500; font-size:.95rem; border:1px solid var(--tinta);
  cursor:pointer; position:relative;
  transition:background .35s var(--curva), color .35s var(--curva),
             border-color .35s var(--curva), transform .35s var(--curva);
}
/* peso fisico: al pulsar se hunde ligeramente */
.btn:active{transform:scale(.985);}
/* flecha con tension cinetica propia */
.btn .flecha{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.14);
  transition:transform .4s var(--curva-fuerte), background .35s var(--curva);
  font-size:.8rem; line-height:1;
}
.btn:hover .flecha{transform:translateX(3px); background:rgba(255,255,255,.24);}
.btn-outline .flecha{background:rgba(11,18,32,.08);}
.btn-outline:hover .flecha{background:rgba(11,18,32,.14);}
.btn:hover{background:var(--azul-texto); border-color:var(--azul-texto); color:var(--blanco); text-decoration:none;}
.btn-outline{background:transparent; color:var(--tinta); border:1px solid var(--gris-300);}
.btn-outline:hover{background:transparent; border-color:var(--tinta); color:var(--tinta);}
.btn-sobre-azul{background:var(--blanco); color:var(--azul-texto); border-color:var(--blanco);}
.btn-sobre-azul:hover{background:var(--tinta); color:var(--blanco); border-color:var(--tinta);}

/* ---------- Header: minimo, sin sombras --- */
.site-header{
  border-bottom:var(--borde);
  position:sticky; top:0; background:rgba(252,252,251,.92); backdrop-filter:blur(6px);
  z-index:100;
}
.site-header .contenedor{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:var(--u2); padding-bottom:var(--u2); gap:var(--u4);
}
.site-header img{height:38px; width:auto;}
.site-header nav{display:flex; gap:var(--u4); align-items:center; flex-wrap:wrap;}
.site-header nav a{
  color:var(--gris-700); font-weight:500; font-size:.92rem; text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color .15s ease, color .15s ease;
}
.site-header nav a:hover{color:var(--tinta); border-color:var(--tinta);}
.site-header .btn{font-size:.85rem; padding:11px 20px;}

@media (max-width:860px){
  .site-header .contenedor{flex-wrap:wrap;}
  .site-header nav{width:100%; justify-content:center; gap:var(--u3); padding-top:var(--u2); border-top:var(--borde);}
}

/* ---------- Marca de registro: motivo grafico recurrente (marca de imprenta
   real, usada para registrar planchas de color) — sustituye a iconografia
   generica/stock y ancla la marca en el oficio real de la empresa ---------- */
.marca-fondo{
  position:absolute; pointer-events:none; z-index:0;
  color:var(--azul); opacity:.08;
}
/* ---------- HERO: fotografia real a sangre. El negocio es tinta y color:
   la web tiene que enseñarlo, no describirlo. Foto propia del cliente
   (maquina de impresion con tinta), sin stock. ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:min(88dvh, 820px);
  display:flex; align-items:flex-end;
  padding:var(--u12) 0 var(--u8);
  background:var(--tinta);
  isolation:isolate;
}
.hero-foto{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}
/* Doble velo: uno vertical para asentar el texto abajo, otro lateral para
   que el titular tenga fondo limpio sin tapar la foto del todo. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(11,18,32,.96) 0%, rgba(11,18,32,.86) 32%, rgba(11,18,32,.42) 62%, rgba(11,18,32,.28) 100%),
    linear-gradient(to right, rgba(11,18,32,.78) 0%, rgba(11,18,32,.25) 55%, transparent 85%);
}
.hero .marca-fondo{width:520px; height:520px; top:-130px; right:-150px; color:#fff; opacity:.10; z-index:-1;}
.hero .contenedor{position:relative; z-index:1; width:100%;}
@media (max-width:900px){ .hero .marca-fondo{width:300px; height:300px; top:-70px; right:-120px;} }

.franja-superior{
  display:flex; align-items:center; gap:var(--u2); margin-bottom:var(--u6);
  color:var(--gris-500); font-size:.85rem;
}
.franja-superior .linea{flex:1; height:1px; background:var(--gris-300);}
.hero .franja-superior{color:rgba(255,255,255,.72);}
.hero .franja-superior .linea{background:rgba(255,255,255,.28);}

.hero-grid{display:grid; grid-template-columns:1.35fr .85fr; gap:var(--u10); align-items:end;}
.hero h1{margin-bottom:var(--u3); color:var(--blanco); text-wrap:balance;}
.hero .lead{font-size:1.15rem; color:rgba(255,255,255,.86); max-width:46ch;}
.hero .acciones{display:flex; gap:var(--u2); margin-top:var(--u4); flex-wrap:wrap;}
/* sobre foto, el boton primario va en blanco solido: maximo contraste */
.hero .acciones .btn{background:var(--blanco); color:var(--tinta); border-color:var(--blanco);}
.hero .acciones .btn:hover{background:var(--azul); border-color:var(--azul); color:var(--blanco);}
.hero .acciones .btn-outline{background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.5);}
.hero .acciones .btn-outline:hover{background:rgba(255,255,255,.12); border-color:var(--blanco); color:var(--blanco);}

/* cifras: fila inferior con separadores, tipografia tabular */
.hero-cifras{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--u3);
  border-top:1px solid rgba(255,255,255,.22); padding-top:var(--u4);
}
.hero-cifras .cifra{display:flex; flex-direction:column; gap:6px;}
.hero-cifras .num{
  font-family:var(--f-display); font-size:2rem; font-weight:500; color:var(--blanco);
  line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.hero-cifras .etiqueta{font-size:.78rem; color:rgba(255,255,255,.62); line-height:1.35; max-width:16ch;}
@media (max-width:900px){
  .hero{min-height:auto; padding:var(--u10) 0 var(--u6);}
  .hero-grid{grid-template-columns:1fr; gap:var(--u8);}
}
@media (max-width:560px){
  .hero-cifras{grid-template-columns:1fr; gap:var(--u3);}
  .hero-cifras .cifra{flex-direction:row; align-items:baseline; gap:var(--u2);}
  .hero-cifras .etiqueta{max-width:none;}
}

/* ---------- Valores: folios gigantes tipo colofon editorial, no tarjetas
   con icono — la misma tecnica que un pliego numerado, no un feature-row
   generico de SaaS ---------- */
.valores{border-top:var(--borde); border-bottom:var(--borde); background:var(--gris-100);}
.valores .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.valor{padding:var(--u6) var(--u4); border-right:var(--borde); position:relative; overflow:hidden;}
.valor:last-child{border-right:none;}
/* folio en la linea de base del texto, no cortado por el borde superior */
.valor .folio{
  display:block; margin-bottom:var(--u2);
  font-family:var(--f-display); font-size:2.6rem; font-weight:500; line-height:1;
  color:var(--azul); opacity:.28; font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.valor h3{
  font-family:var(--f-display); font-weight:500; font-size:1.2rem; color:var(--tinta);
  margin-bottom:var(--u2); position:relative;
}
.valor p{margin-bottom:0; font-size:.95rem; position:relative;}
@media (max-width:760px){
  .valores .grid{grid-template-columns:1fr;}
  .valor{border-right:none; border-bottom:var(--borde);}
  .valor:last-child{border-bottom:none;}
}

/* ---------- Categorias: grid asimetrico por profundidad real de catalogo
   (Offset = 5 subfamilias/17 tintas -> destacada; Auxiliares = 16 productos
   -> media; Flexografia = 4 tintas -> la mas pequeña) — nunca 3 cajas
   iguales, es el layout mas generico que existe ---------- */
.categorias .cabecera{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--u4); margin-bottom:var(--u6); flex-wrap:wrap;}
.categorias .cabecera h2{margin-bottom:0;}
/* filas 'auto': cada tarjeta ocupa lo que necesita. Con 1fr/1.3fr la
   destacada se estiraba a la altura de las otras dos y dejaba un hueco
   muerto enorme bajo el texto. */
.categorias .grid{
  display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:auto auto; gap:var(--u3);
  align-items:start;
}
.categorias .grid .tarjeta:nth-child(1){grid-column:1; grid-row:1 / span 2;}
.categorias .grid .tarjeta:nth-child(2){grid-column:2; grid-row:1;}
.categorias .grid .tarjeta:nth-child(3){grid-column:2; grid-row:2;}
.tarjeta{
  border:var(--borde); border-radius:var(--radio); padding:0;
  background:var(--blanco);
  display:flex; flex-direction:column;
  overflow:hidden; position:relative;
  transition:border-color .4s var(--curva), transform .5s var(--curva-fuerte),
             box-shadow .5s var(--curva);
}
/* la tarjeta se levanta con sombra tintada del propio fondo, no negro puro */
.tarjeta:hover{
  border-color:var(--tinta); transform:translateY(-4px);
  box-shadow:0 18px 40px -18px rgba(11,18,32,.28);
}
/* foto real de producto: la categoria se ve, no solo se lee */
.tarjeta-foto{
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
  background:var(--gris-100);
  transition:transform .8s var(--curva-fuerte);
}
.tarjeta:hover .tarjeta-foto{transform:scale(1.045);}
.tarjeta-cuerpo{padding:var(--u4); display:flex; flex-direction:column; flex:1;}
.tarjeta h3{margin-bottom:var(--u2);}
.tarjeta p{font-size:.95rem; flex:1;}
.tarjeta a.enlace{
  font-weight:600; font-size:.88rem; text-transform:uppercase; letter-spacing:.03em;
  color:var(--tinta); margin-top:var(--u2); display:inline-flex; align-items:center; gap:6px;
}
.tarjeta a.enlace:hover{color:var(--azul-texto); text-decoration:none;}
.tarjeta--destacada .tarjeta-foto{aspect-ratio:4/3;}
.tarjeta--destacada .tarjeta-cuerpo{padding:var(--u6) var(--u4);}
.tarjeta--destacada .icono{width:46px; height:46px;}
.tarjeta--destacada h3{font-family:var(--f-display); font-weight:500; font-size:1.6rem;}
@media (max-width:860px){
  .categorias .grid{grid-template-columns:1fr; grid-template-rows:none;}
  .categorias .grid .tarjeta:nth-child(1),
  .categorias .grid .tarjeta:nth-child(2),
  .categorias .grid .tarjeta:nth-child(3){grid-column:1; grid-row:auto;}
}

/* ============================================================
   SHOWCASE — una idea por pantalla.
   Patron medido sobre apple.com: titular ~56px/600 centrado con
   tracking negativo, una sola frase, dos botones pildora y la
   FOTO como protagonista. Fondos alternos, cero cajas con borde.
   ============================================================ */
.showcase{
  padding:var(--u12) 0 0;
  text-align:center;
  overflow:hidden;
  background:var(--blanco);
}
.showcase--alt{background:#F5F5F7;}   /* el gris exacto de Apple, neutro y frio */
.showcase--tinta{background:var(--tinta);}
.showcase--tinta .showcase-titular,
.showcase--tinta .showcase-frase{color:var(--blanco);}
.showcase--tinta .showcase-frase{color:rgba(255,255,255,.72);}

.showcase-cabecera{max-width:820px; margin:0 auto; padding:0 var(--u4);}
.showcase-eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--azul-texto); margin-bottom:var(--u2); display:block;
}
.showcase--tinta .showcase-eyebrow{color:#8098FF;}
.showcase-titular{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(2.4rem, 5.2vw, 3.5rem);   /* ~56px en desktop, como Apple */
  line-height:1.06; letter-spacing:-.022em;
  color:var(--tinta); margin:0 0 var(--u2);
  text-wrap:balance;
}
.showcase-frase{
  font-size:clamp(1.05rem, 1.5vw, 1.3rem); line-height:1.45;
  color:var(--gris-700); max-width:34ch; margin:0 auto var(--u4);
}
/* acciones: dos pildoras, la logica de Apple (solida + contorno) */
.showcase-acciones{display:flex; gap:var(--u2); justify-content:center; flex-wrap:wrap; margin-bottom:var(--u8);}
.btn-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:980px;      /* pildora real */
  font-size:1rem; font-weight:400; line-height:1.2;
  border:1px solid transparent; cursor:pointer;
  transition:background .3s var(--curva), color .3s var(--curva),
             border-color .3s var(--curva), transform .3s var(--curva);
}
.btn-pill:active{transform:scale(.97);}
.btn-pill--solido{background:var(--azul-texto); color:var(--blanco); border-color:var(--azul-texto);}
.btn-pill--solido:hover{background:var(--tinta); border-color:var(--tinta); text-decoration:none; color:var(--blanco);}
.btn-pill--linea{background:transparent; color:var(--azul-texto); border-color:var(--azul-texto);}
.btn-pill--linea:hover{background:var(--azul-texto); color:var(--blanco); text-decoration:none;}
.showcase--tinta .btn-pill--solido{background:var(--blanco); color:var(--tinta); border-color:var(--blanco);}
.showcase--tinta .btn-pill--solido:hover{background:var(--azul); border-color:var(--azul); color:var(--blanco);}
.showcase--tinta .btn-pill--linea{color:var(--blanco); border-color:rgba(255,255,255,.5);}
.showcase--tinta .btn-pill--linea:hover{background:var(--blanco); color:var(--tinta); border-color:var(--blanco);}

/* la foto manda: ancha, sin borde, sangrando por abajo */
.showcase-foto{
  display:block; width:min(100%, 1100px); margin:0 auto;
  height:auto; object-fit:cover;
}
.showcase-foto--ancha{width:100%; max-width:none;}
.showcase--sin-foto{padding-bottom:var(--u12);}
/* cabecera mas ancha cuando lleva prosa en vez de una sola frase */
.showcase-cabecera--ancha{max-width:900px;}
.texto-centrado{margin-top:var(--u4);}
.texto-centrado p{
  max-width:68ch; margin-left:auto; margin-right:auto;
  text-align:left; color:var(--gris-700); margin-bottom:var(--u3);
}
.texto-centrado p:last-child{margin-bottom:0;}
.showcase--tinta .texto-centrado p{color:rgba(255,255,255,.75);}
.showcase--tinta .texto-centrado strong{color:var(--blanco);}
/* logos sobre fondo tinta: tarjeta clara para que respiren */
.marcas-fila--sobre-tinta{margin-top:var(--u4); padding-bottom:var(--u12);}

/* ---------- Pasos numerados (servicio de color) ---------- */
.pasos{
  list-style:none; counter-reset:paso; margin:var(--u6) auto var(--u6);
  max-width:640px; text-align:left; display:grid; gap:var(--u3);
}
.pasos li{display:flex; gap:var(--u3); align-items:flex-start;}
.paso-num{
  font-family:var(--f-display); font-size:1.1rem; font-weight:500;
  color:var(--azul); flex-shrink:0; width:2ch; line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.paso-texto{color:rgba(255,255,255,.75); line-height:1.6;}
.paso-texto strong{color:var(--blanco); font-weight:600;}
@media (max-width:600px){ .pasos{gap:var(--u2);} }
.sello--centrado{
  width:150px; height:150px; margin:0 auto var(--u12); display:block;
  border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
@media (max-width:760px){
  .showcase{padding-top:var(--u10);}
  .showcase-frase{max-width:30ch;}
  .showcase-acciones{margin-bottom:var(--u6);}
  .showcase--sin-foto{padding-bottom:var(--u10);}
  .sello--centrado{width:110px; height:110px; margin-bottom:var(--u10);}
}

/* ---------- Franja de cifras: datos duros, tipografia tabular ---------- */
.cifras-franja{padding:var(--u10) 0; border-bottom:var(--borde); background:var(--blanco);}
.cifras-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--u6); text-align:center;}
.cifras-grid .cifra{display:flex; flex-direction:column; gap:8px; align-items:center;}
.cifras-grid .num{
  font-family:var(--f-display); font-weight:500; font-size:clamp(1.9rem, 3.4vw, 2.8rem);
  line-height:1; color:var(--tinta); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.cifras-grid .etiqueta{font-size:.88rem; color:var(--gris-500);}
@media (max-width:700px){
  .cifras-grid{grid-template-columns:1fr; gap:var(--u4);}
  .cifras-franja{padding:var(--u8) 0;}
}

/* ---------- Franja de marcas y certificaciones: prueba real (fabricantes
   que distribuye + homologaciones), no logos de relleno ---------- */
/* Los logos originales son JPG con fondo propio (rojo Fogra, colores Jänecke):
   en escala de grises quedaban rectangulos sucios. Se presentan como fichas
   blancas de altura uniforme — leen como credenciales, no como banners. */
.marcas{padding:var(--u8) 0; border-bottom:var(--borde); background:var(--papel);}
.marcas .rotulo{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris-500); text-align:center; margin:0 auto var(--u6); max-width:none;
}
.marcas-fila{
  display:flex; align-items:stretch; justify-content:center;
  gap:var(--u3); flex-wrap:wrap;
}
.marcas-fila .marca{
  display:flex; align-items:center; justify-content:center;
  background:var(--blanco); border:var(--borde); border-radius:var(--radio);
  padding:var(--u3) var(--u4); min-width:170px; min-height:92px;
  transition:border-color .2s ease;
}
.marcas-fila .marca:hover{border-color:var(--gris-500);}
.marcas-fila img{height:44px; width:auto; display:block;}
.marcas-fila .marca-isega img{height:62px;}
@media (max-width:700px){
  .marcas-fila{gap:var(--u2);}
  .marcas-fila .marca{min-width:132px; min-height:74px; padding:var(--u2) var(--u3);}
  .marcas-fila img{height:32px;}
  .marcas-fila .marca-isega img{height:46px;}
}

/* ---------- Bloque Pantone: el color como argumento de venta.
   Foto a sangre a un lado, texto al otro. ---------- */
.pantone{padding:0; border-bottom:var(--borde); background:var(--gris-100);}
.pantone-grid{display:grid; grid-template-columns:1fr 1fr; align-items:stretch;}
.pantone-foto{width:100%; height:100%; min-height:440px; object-fit:cover; object-position:center 62%; display:block;}
.pantone-texto{padding:var(--u12) var(--u8); display:flex; flex-direction:column; justify-content:center;}
.pantone-texto h2{margin-bottom:var(--u3);}
.pantone-texto .lista{list-style:none; margin:var(--u3) 0 var(--u4);}
.pantone-texto .lista li{
  padding:var(--u2) 0; border-bottom:var(--borde); font-size:.95rem; color:var(--gris-700);
  display:flex; gap:var(--u2); align-items:baseline;
}
.pantone-texto .lista li::before{
  content:""; width:9px; height:9px; flex-shrink:0; border-radius:50%;
  background:var(--azul); transform:translateY(-1px);
}
@media (max-width:900px){
  .pantone-grid{grid-template-columns:1fr;}
  .pantone-foto{min-height:280px;}
  .pantone-texto{padding:var(--u8) var(--u4);}
}

/* ---------- Sello +45 años: activo de marca propio del cliente.
   Aro fino para despegarlo del fondo oscuro de la franja. ---------- */
.sello{
  width:150px; height:150px; flex-shrink:0; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
@media (max-width:760px){ .sello{width:110px; height:110px;} }

/* ---------- Franja destacada: tinta solida, tipografia editorial ---------- */
.franja{background:var(--tinta); color:var(--blanco); text-align:left; position:relative; overflow:hidden;}
.franja .marca-fondo{width:480px; height:480px; bottom:-180px; left:-140px; color:var(--blanco); opacity:.05;}
.franja .contenedor{max-width:var(--max); position:relative; z-index:1;}
.franja h2{color:var(--blanco); margin-bottom:var(--u3);}
.franja p{color:#C7CDDA; margin-bottom:var(--u4);}
.franja-grid{display:grid; grid-template-columns:1fr auto; gap:var(--u10); align-items:center;}
.franja-grid > div{max-width:680px;}
@media (max-width:760px){ .franja-grid{grid-template-columns:1fr; gap:var(--u6);} }

/* ---------- Iconos de categoria: geometria tecnica, no ilustracion de stock ---------- */
.tarjeta .icono{width:34px; height:34px; color:var(--azul); margin-bottom:var(--u3);}

/* ---------- CTA final ---------- */
.cta-final{text-align:center;}
.cta-final .contenedor{max-width:640px;}
.cta-final h2{margin-bottom:var(--u2);}

/* ---------- Listado de familias (pagina Productos) ----------
   Reescrito al lenguaje showcase: cada familia es una seccion a
   sangre con cabecera centrada, fondos alternos y sin bordes. */
.familia{padding:var(--u12) 0; background:var(--blanco); margin:0; border:none;}
.familia--alt{background:#F5F5F7;}
.familia-cabecera{max-width:820px; margin:0 auto var(--u8); padding:0 var(--u4); text-align:center;}
.familia-cabecera .showcase-frase{margin-bottom:0;}
.showcase-titular--medio{font-size:clamp(1.9rem, 3.6vw, 2.6rem);}
.familia .eyebrow{margin-bottom:var(--u1);}
.familia-intro{max-width:64ch; margin-bottom:var(--u6); color:var(--gris-700);}
.showcase--compacto{padding-bottom:0;}
@media (max-width:760px){ .familia{padding:var(--u10) 0;} .familia-cabecera{margin-bottom:var(--u6);} }
.familia ul{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--u4);}
.familia li a{
  display:block; padding:var(--u2) 0; border-bottom:var(--borde); color:var(--gris-700);
  font-size:.98rem;
}
.familia li a:hover{color:var(--azul-texto); text-decoration:none;}
@media (max-width:600px){ .familia ul{grid-template-columns:1fr;} }

/* ---------- Fichas tecnicas: acordeon <details> por familia ---------- */
.fichas{border-top:var(--borde);}
.ficha{border-bottom:var(--borde);}
.ficha summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--u3);
  padding:var(--u3) 0; cursor:pointer; list-style:none;
}
.ficha summary::-webkit-details-marker{display:none;}
.ficha summary::after{
  content:"+"; font-family:var(--f-display); font-size:1.5rem; line-height:1; color:var(--gris-500);
  flex-shrink:0; width:20px; text-align:center;
}
.ficha[open] summary::after{content:"\2013";} /* en dash */
.ficha summary:hover .ficha-nombre{color:var(--azul-texto);}
.ficha-nombre{font-weight:600; color:var(--tinta); font-size:1.02rem; transition:color .15s ease;}
.ficha-tags{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.tag{
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  color:var(--azul-texto); border:1px solid var(--gris-300); border-radius:var(--radio);
  padding:3px 9px; white-space:nowrap;
}
.ficha-cuerpo{padding:0 0 var(--u5); max-width:72ch;}
.ficha-cuerpo p{font-size:.95rem;}
.ficha-cuerpo p strong{color:var(--tinta);}
.specs{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--u3) var(--u4);
  margin:0 0 var(--u3); padding:var(--u3); background:var(--gris-100); border-radius:var(--radio);
}
.specs dt{font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--gris-500); margin-bottom:3px;}
.specs dd{font-size:.92rem; color:var(--tinta);}
.caracteristicas{list-style:none; margin:0 0 var(--u3); display:flex; flex-wrap:wrap; gap:8px;}
.caracteristicas li{
  font-size:.85rem; color:var(--gris-700); background:var(--blanco); border:1px solid var(--gris-300);
  border-radius:var(--radio); padding:4px 10px;
}
.envases, .normativas{font-size:.85rem; color:var(--gris-500); margin-bottom:var(--u1);}
.normativas{font-size:.78rem; line-height:1.5;}
.ficha-cuerpo--simple .caracteristicas{
  flex-direction:column; gap:6px; list-style:disc; padding-left:20px;
}
.ficha-cuerpo--simple .caracteristicas li{border:none; padding:0; background:transparent; font-size:.95rem;}
@media (max-width:600px){
  .specs{grid-template-columns:1fr;}
  .ficha summary{align-items:flex-start; flex-direction:column; gap:8px;}
  .ficha-tags{justify-content:flex-start;}
}

/* ---------- Nav rapida de familias (chips bajo el H1 de Productos) ---------- */
/* nav de familias: chips centrados bajo el hero del catalogo */
.familias-nav{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  max-width:900px; margin:var(--u4) auto 0; padding:0 var(--u4) var(--u10);
}
.familias-nav a{
  font-size:.82rem; font-weight:500; color:var(--gris-700); border:1px solid var(--gris-300);
  border-radius:var(--radio); padding:7px 14px; text-decoration:none; transition:border-color .15s ease, color .15s ease;
}
.familias-nav a:hover{border-color:var(--tinta); color:var(--tinta); text-decoration:none;}

/* ---------- Formulario contacto ---------- */
.contacto-grid{display:grid; grid-template-columns:1.3fr .8fr; gap:var(--u10); align-items:start;}
@media (max-width:760px){ .contacto-grid{grid-template-columns:1fr;} }
.form-contacto{max-width:640px;}
.form-contacto--centrado{margin:0 auto; max-width:720px;}
.campos-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--u3);}
@media (max-width:600px){ .campos-grid{grid-template-columns:1fr;} }
/* datos de contacto en la franja: pares titulo/valor */
.cifras-grid--contacto{grid-template-columns:repeat(4,1fr);}
.dato-titulo{
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gris-500);
}
.dato-valor{font-size:1rem; color:var(--tinta); font-weight:500; line-height:1.45;}
a.dato-valor:hover{color:var(--azul-texto);}
@media (max-width:900px){ .cifras-grid--contacto{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .cifras-grid--contacto{grid-template-columns:1fr;} }
.campo{margin-bottom:var(--u3);}
.campo label{display:block; font-weight:500; margin-bottom:6px; font-size:.9rem; color:var(--gris-700);}
.campo input, .campo textarea{
  width:100%; padding:12px 14px; border:var(--borde); border-radius:var(--radio);
  font-family:var(--f-cuerpo); font-size:1rem; background:var(--blanco);
}
.campo textarea{min-height:140px; resize:vertical;}
.campo input:focus, .campo textarea:focus{outline:2px solid var(--tinta); outline-offset:1px; border-color:var(--tinta);}

.datos-contacto{border:var(--borde); border-radius:var(--radio); padding:var(--u4); background:var(--gris-100);}
.datos-contacto h3{margin-bottom:var(--u3);}
.datos-contacto p{margin-bottom:var(--u2); font-size:.95rem;}
.datos-contacto strong{color:var(--tinta); display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px;}

/* ---------- Page header: hero ligero para paginas internas (empresa, contacto) ---------- */
.page-header{padding:var(--u10) 0 var(--u8);}
.page-header h1{margin-bottom:var(--u3); max-width:24ch;}
.page-header .lead{font-size:1.15rem; color:var(--gris-700); max-width:62ch;}
.page-header .hero-cifras{
  border-left:none; border-top:var(--borde); flex-direction:row; flex-wrap:wrap;
  padding-left:0; padding-top:var(--u4); gap:var(--u8); margin-top:var(--u6);
}

/* ---------- Seccion con fondo alterno (rompe la monotonia en paginas de prosa) ---------- */
.seccion-alt{background:var(--gris-100); border-top:var(--borde); border-bottom:var(--borde);}
.seccion-alt .contenido-simple{padding-top:0; padding-bottom:0;}

/* ---------- Migas de pan ---------- */
.migas{font-size:.85rem; color:var(--gris-500); padding:var(--u3) 0;}
.migas a{color:var(--gris-500);}

/* ---------- Footer ---------- */
/* sin margin-top: ahora cada seccion gestiona su propio espacio y el margen
   dejaba una franja del fondo del body entre la ultima seccion y el pie */
footer{background:var(--tinta); color:#9AA3B5; padding:var(--u10) 0 var(--u4);}
footer .grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--u6); margin-bottom:var(--u6); padding-bottom:var(--u6); border-bottom:1px solid #262E3F;}
footer h4{color:var(--blanco); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--u3); font-weight:600;}
footer ul{list-style:none;}
footer li{margin-bottom:var(--u1);}
footer a{color:#9AA3B5; font-size:.92rem;}
footer a:hover{color:var(--blanco); text-decoration:none;}
footer .legal{font-size:.8rem; text-align:left;}
@media (max-width:760px){ footer .grid{grid-template-columns:1fr;} }

/* ---------- Paginas de contenido simple (legales, ficha tecnica) ---------- */
.contenido-simple{max-width:760px; padding:var(--u10) 0;}
.contenido-simple h1{margin-bottom:var(--u4);}
.showcase--legal{padding-bottom:var(--u10);}
.contenido-simple h2{font-size:1.3rem; margin-top:var(--u6); font-family:var(--f-cuerpo); font-weight:600;}
.contenido-simple ul, .contenido-simple ol{margin:0 0 var(--u2) 22px; color:var(--gris-700);}

/* ---------- Aviso de mantenimiento (banner opcional) ---------- */
.aviso-migracion{
  background:var(--gris-100); border-bottom:var(--borde); color:var(--gris-700);
  text-align:center; padding:10px 16px; font-size:.85rem;
}