/* ============================================================
   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; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
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; flex-shrink:0;}
.site-header .contenedor > a:first-child{flex-shrink:0;}
.site-header nav{display:flex; gap:var(--u4); align-items:center; flex-wrap:wrap;}
/* .nav-toplevel = SOLO los 5 enlaces de primer nivel (Inicio/Empresa/Productos/
   Pantone/Contacto). Los enlaces de dentro del mega-menu NUNCA llevan esta
   clase, para que no hereden el estilo "fila grande con separador" -- ese
   era el bug: antes ".site-header nav a" (generico) cazaba tambien los
   enlaces anidados del desplegable. */
.site-header nav a.nav-toplevel{
  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.nav-toplevel:hover{color:var(--tinta); border-color:var(--tinta);}
.site-header .btn{font-size:.85rem; padding:11px 20px;}

/* ---------- Menu hamburguesa (movil) --- */
.menu-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  flex-direction:column; justify-content:center; gap:5px; z-index:110; flex-shrink:0;
}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--tinta); transition:transform .2s ease, opacity .2s ease;}
.site-header.nav-abierto .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-header.nav-abierto .menu-toggle span:nth-child(2){opacity:0;}
.site-header.nav-abierto .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Submenu de "Productos": franja a todo el ancho ----------
   Intentos anteriores centraban el panel SOBRE el enlace "Productos"
   (position:absolute + left:50% + transform). Como "Productos" no esta en
   el centro de la pagina, en portatiles de 1280-1366px la mitad del panel
   se salia de la pantalla -- eso era el "no cabe". Arreglo real: el panel
   NO se ancla al enlace, se ancla al header entero (quitando el
   position:relative de .nav-item-dropdown, el navegador busca el siguiente
   antepasado posicionado, que es .site-header). left:0;right:0 lo hace
   ocupar exactamente el ancho del header -- nunca mas ni nunca menos que
   la pantalla, sea cual sea el ancho. Dentro, el mismo .contenedor
   centrado de 1200px que usa el resto de la web. Se abre/cierra con JS
   (ver MENU_TOGGLE_SCRIPT), no con :hover en CSS -- mas fiable, sin
   parpadeos al cruzar el hueco entre el enlace y el panel. */
.nav-item-dropdown{display:flex; align-items:center; gap:2px;}
.nav-caret-btn{
  display:none; background:none; border:none; padding:6px; cursor:pointer;
  color:var(--gris-500); flex-shrink:0;
}
.nav-caret-btn svg{display:block; transition:transform .2s ease;}
.nav-dropdown-panel{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  background:var(--blanco); border-top:var(--borde); border-bottom:var(--borde);
  box-shadow:0 16px 40px rgba(11,18,32,.10);
  z-index:120;
}
.site-header.productos-abierto .nav-dropdown-panel{display:block;}
.nav-dropdown-inner{
  position:relative; display:flex; gap:var(--u5);
  max-height:70vh; overflow:hidden; padding:var(--u5) var(--u4);
}
.nav-dropdown-marca{
  position:absolute; top:-10px; right:0; width:150px; height:150px;
  color:var(--azul); opacity:.06; pointer-events:none; z-index:-1;
}

.nav-rail{display:flex; flex-direction:column; flex-shrink:0; gap:2px; width:230px; overflow-y:auto;}
.nav-rail-btn{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--f-cuerpo); font-size:.88rem; font-weight:500; color:var(--gris-700);
  padding:12px 14px; border-radius:var(--radio); border-left:3px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.nav-rail-btn:hover:not(.activa){background:var(--gris-100);}
.nav-rail-btn .n{
  display:block; font-family:var(--f-mono); font-size:.68rem; font-weight:400;
  color:var(--gris-500); margin-top:2px;
}
.nav-rail-btn.activa{background:var(--gris-100); color:var(--tinta); border-left-color:var(--azul);}
.nav-rail-btn.activa .n{color:var(--azul-texto);}

.nav-rail-body{flex:1; min-width:0; border-left:var(--borde); padding-left:var(--u5); overflow-y:auto;}
.nav-rail-cat h3{
  font-family:var(--f-display); font-weight:500; font-size:1.15rem; margin:0 0 4px; color:var(--tinta);
}
.nav-rail-desc{font-size:.82rem; color:var(--gris-500); margin:0 0 var(--u3); max-width:52ch;}
.nav-rail-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.nav-rail-grid a{
  display:block; color:var(--tinta); font-size:.83rem; font-weight:500; line-height:1.3;
  padding:10px 13px; border:1px solid var(--gris-300); border-radius:var(--radio);
  text-decoration:none; transition:border-color .15s ease, background .15s ease;
}
.nav-rail-grid a:hover{border-color:var(--azul); background:var(--gris-100);}
.nav-rail-vertodo{
  display:inline-block; margin-top:var(--u3); font-size:.83rem; font-weight:600;
  color:var(--azul-texto); text-decoration:none;
}
.nav-rail-vertodo:hover{text-decoration:underline;}

@media (max-width:860px){
  .site-header .contenedor{flex-wrap:wrap;}
  .menu-toggle{display:flex;}
  .nav-caret-btn{display:block;}
  .nav-item-dropdown{flex-wrap:wrap; width:100%;}
  /* CRITICO: .nav-dropdown-panel es hijo flex de .nav-item-dropdown. Sin un
     width:100% explicito, un hijo flex se dimensiona por el ancho de SU
     CONTENIDO (min/max-content), no por el del contenedor -- y con la
     rejilla de dentro, ese contenido pide mas de 375px. Sin esta linea el
     panel se sale de la pantalla en movil aunque todo lo de dentro tenga
     su propio ancho correcto. Este fue el bug real de la version anterior. */
  .nav-dropdown-panel{
    display:none; position:static; box-shadow:none; border:none; z-index:auto;
    width:100%; flex-basis:100%; min-width:0;
  }
  .site-header.productos-abierto .nav-dropdown-panel{display:block;}
  .nav-dropdown-inner{
    flex-direction:column; max-height:none; overflow:visible; padding:0 0 var(--u3); gap:var(--u3);
  }
  .nav-item-dropdown.submenu-abierto .nav-caret-btn svg{transform:rotate(180deg);}
  .nav-rail{
    width:100%; flex-direction:row; gap:8px; overflow-x:auto; overflow-y:visible; padding-bottom:2px;
  }
  .nav-rail-btn{
    flex-shrink:0; white-space:nowrap; border-left:none;
    border:1px solid var(--gris-300); border-radius:999px; padding:9px 16px; background:var(--blanco);
  }
  .nav-rail-btn .n{display:none;}
  .nav-rail-btn.activa{background:var(--tinta); color:var(--blanco); border-color:var(--tinta);}
  .nav-rail-body{border-left:none; padding-left:0;}
  .nav-rail-grid{grid-template-columns:1fr 1fr;}
  .site-header nav{
    display:none; width:100%; flex-direction:column; align-items:stretch;
    gap:0; padding-top:var(--u2); border-top:var(--borde);
  }
  .site-header nav a.nav-toplevel{padding:var(--u3) 0; text-align:center; border-bottom:var(--borde); display:block;}
  .nav-item-dropdown a.nav-toplevel{border-bottom:none;}
  .nav-item-dropdown{border-bottom:var(--borde);}
  .site-header .btn{display:none; width:100%; justify-content:center; margin-top:var(--u3);}
  .site-header.nav-abierto nav{display:flex;}
  .site-header.nav-abierto .btn{display:flex;}
}
@media (max-width:520px){
  .nav-rail-grid{grid-template-columns:1fr;}
}

/* ---------- 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;}
/* boton "+" como circulo real (no solo un caracter suelto): area de toque
   clara y gira a "x" al abrir con la misma logica que el toggle del 3er
   nivel del menu, en vez del viejo truco de cambiar el caracter a un guion. */
.ficha summary::after{
  content:"+"; font-family:var(--f-display); font-size:1.05rem; line-height:1; color:var(--gris-500);
  flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gris-300); border-radius:50%;
  transition:transform .25s var(--curva), border-color .15s ease, color .15s ease;
}
.ficha summary:hover::after{border-color:var(--azul); color:var(--azul-texto);}
.ficha[open] summary::after{transform:rotate(45deg); border-color:var(--tinta); color:var(--tinta);}
.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;}
  /* el summary SIGUE siendo una fila en movil (nombre a la izquierda, "+" a
     la derecha, todo en la misma linea) -- antes se forzaba a columna
     pensando en las tags de ficha_acordeon(), que no se usan en ningun
     sitio real del site: el resultado era el "+" cayendo suelto debajo
     del nombre en vez de alineado con el. */
  .ficha-tags{justify-content:flex-start; flex-wrap:wrap;}
}

/* ---------- 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;}
  /* zonas tocables un poco mas comodas en movil (checklist UX: min. area de toque) */
  footer ul li a{display:block; padding:var(--u1) 0;}
  form button[type="submit"]{width:100%; justify-content:center;}
}

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