/* ==========================================================================
   FARMAWALL — Sistema de diseño 2026
   Estética: lineal, minimalista, hairline grid, transiciones suaves.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Superficies */
  --bone:      #F2F1EB;
  --paper:     #F6F6F4;
  --ink:       #121210;
  --ink-80:    rgba(18,18,16,.80);
  --ink-64:    rgba(18,18,16,.64);
  --ink-40:    rgba(18,18,16,.40);
  --ink-2:     #3A3A36;
  --muted:     #706E63;
  --line:      #D9D8CF;
  --line-2:    #B6B5AB;
  --accent:    #0F7FC4;          /* azul de marca profundizado — texto y UI */
  --accent-80: rgba(15,127,196,.85);
  --accent-dk: #0B5F94;          /* estados hover sobre fondo claro */
  --cyan:      #29ABE2;          /* cyan institucional — isotipo y detalles */

  /* Tipografía */
  --sans: "Geist","Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono: "Geist Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  /* Métrica */
  --pad:       clamp(20px, 4.2vw, 64px);
  --maxw:      1560px;
  --nav-h:     68px;
  --hair:      1px;

  /* Curvas */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:auto}

/* Lenis (scroll suave) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}

/* --- 3. Grilla vertical de fondo (hairlines) ----------------------------- */
.grid-lines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.grid-lines span{border-left:var(--hair) solid var(--line)}
.grid-lines span:first-child{border-left-color:transparent}
@media (min-width:1000px){
  .grid-lines{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:640px){ .grid-lines{display:none} }

/* --- 4. Layout ----------------------------------------------------------- */
.wrap{
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  position:relative; z-index:2;
}
.rule{
  border-top:var(--hair) solid var(--line);
  max-width:var(--maxw); margin-inline:auto;
  position:relative; z-index:2;
}
.rule--full{max-width:none}
section{position:relative; z-index:2}
.pad-y{padding-block:clamp(56px,8vw,132px)}
.pad-y-sm{padding-block:clamp(36px,4.5vw,68px)}

/* Fila de sección: etiqueta a la izquierda, contenido a la derecha.
   align-items:start evita que la etiqueta se estire y quede centrada. */
.row{
  display:grid; gap:clamp(20px,3vw,48px);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:900px){
  .row{grid-template-columns:minmax(180px,2fr) 9fr}
  .row--half{grid-template-columns:1fr 1fr}
}

/* --- 5. Tipografía ------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:.7em;
}
.eyebrow .num{color:var(--accent)}
.eyebrow .sep{color:var(--line-2)}

.d1{
  font-size:clamp(2.6rem,7.4vw,6.4rem);
  line-height:.94; letter-spacing:-.035em; font-weight:600;
  text-wrap:balance;
}
.d2{
  font-size:clamp(2rem,4.6vw,4rem);
  line-height:1.02; letter-spacing:-.032em; font-weight:600;
  text-wrap:balance;
}
.d3{
  font-size:clamp(1.35rem,2.1vw,2rem);
  line-height:1.14; letter-spacing:-.025em; font-weight:500;
}
.d4{
  font-size:clamp(1.05rem,1.35vw,1.28rem);
  line-height:1.28; letter-spacing:-.02em; font-weight:500;
}
.lead{
  font-size:clamp(1.02rem,1.35vw,1.28rem);
  line-height:1.5; letter-spacing:-.015em; color:var(--ink-80);
  max-width:62ch;
}
.body{color:var(--ink-80); max-width:74ch}
.body + .body{margin-top:1.1em}
.body strong,.body b{font-weight:600;color:var(--ink)}
.small{font-size:14px;line-height:1.55;color:var(--muted)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.accent{color:var(--accent)}

/* --- 6. Enlaces y botones ------------------------------------------------ */
.link{
  position:relative; display:inline-block;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:3px;
}
.link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:var(--hair); background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .6s var(--ease);
}
.link:hover::after{transform:scaleX(1); transform-origin:left}

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
  transition:opacity .4s var(--ease);
}
.btn::before{content:"["; color:var(--accent); transition:transform .5s var(--ease)}
.btn::after{content:"]"; color:var(--accent); transition:transform .5s var(--ease)}
.btn:hover::before{transform:translateX(-4px)}
.btn:hover::after{transform:translateX(4px)}

/* Botones con relleno que barre de izquierda a derecha al pasar el cursor.
   El ::before va en z-index -1 con isolation:isolate, así queda sobre el
   fondo del botón pero debajo del texto, sin envolverlo en un span. */
.btn-solid,
.btn-ghost{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  height:52px; padding-inline:28px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  transition:color .8s cubic-bezier(.16,1,.3,1),
             border-color .8s cubic-bezier(.16,1,.3,1);
}
.btn-solid::before,
.btn-ghost::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.btn-solid:hover::before,
.btn-ghost:hover::before{transform:scaleX(1)}

/* Sólido: azul de marca, barrido en el cyan institucional */
.btn-solid{background:var(--accent); color:#fff}
.btn-solid::before{background:var(--cyan)}
.btn-solid:hover{color:var(--ink)}

/* Contorneado sobre fondo claro: barrido en tinta */
.btn-ghost{border:var(--hair) solid var(--line-2); color:var(--ink)}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:var(--bone); border-color:var(--ink)}

/* Contorneado sobre la portada: barrido en claro */
.btn-ghost--light{border-color:rgba(255,255,255,.44); color:#fff}
.btn-ghost--light::before{background:var(--paper)}
.btn-ghost--light:hover{color:var(--ink); border-color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  .btn-solid::before,.btn-ghost::before{transition:none}
}

/* --- 7. Navegación (topbar glass) ---------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  border-bottom:var(--hair) solid transparent;
  transition:background .6s var(--ease), border-color .6s var(--ease),
             backdrop-filter .6s var(--ease), transform .7s var(--ease);
}
.nav.is-glass{
  background:rgba(242,241,235,.62);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-100%)}

/* Sobre la portada a pantalla completa: mismo glass y misma línea divisoria,
   en versión oscura para que funcione sobre la imagen. */
.nav.is-inverted{
  background:rgba(16,20,26,.07);
  -webkit-backdrop-filter:blur(7px) saturate(125%);
  backdrop-filter:blur(7px) saturate(125%);
  border-bottom-color:rgba(255,255,255,.11);
}
.nav.is-inverted .brand__mark,
.nav.is-inverted .brand__tag,
.nav.is-inverted .nav__link,
.nav.is-inverted .btn{text-shadow:0 1px 14px rgba(8,11,15,.55)}
.nav.is-inverted .brand__mark{color:#fff}
.nav.is-inverted .brand__tag{color:rgba(255,255,255,.62)}
.nav.is-inverted .nav__link{color:rgba(255,255,255,.76)}
.nav.is-inverted .nav__link:hover,
.nav.is-inverted .nav__link.is-active{color:#fff}
.nav.is-inverted .btn{color:#fff}
.nav.is-inverted .btn::before,
.nav.is-inverted .btn::after{color:#fff}
.nav.is-inverted .burger span{background:#fff}

/* El desplegable acompaña el modo invertido: mismo cristal, en oscuro */
.nav.is-inverted .nav__drop{
  background:rgba(16,20,26,.24);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-color:rgba(255,255,255,.14);
}
.nav.is-inverted .nav__drop a{color:rgba(255,255,255,.86); text-shadow:0 1px 14px rgba(8,11,15,.55)}
.nav.is-inverted .nav__drop a:hover{color:#fff; background:rgba(255,255,255,.10)}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; height:100%;
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:11px}
/* El logo real viene en blanco: se usa como máscara para que tome el color
   que corresponde a cada fondo (cyan sobre claro, blanco sobre la portada). */
.brand__icon{
  width:27px; height:26px; flex:none; display:block;
  background:var(--cyan);
  -webkit-mask:url(../img/brand/isotipo-128.png) center/contain no-repeat;
  mask:url(../img/brand/isotipo-128.png) center/contain no-repeat;
  transition:background .5s var(--ease);
}
.nav.is-inverted .brand__icon{background:#fff}
.brand__text{display:grid; gap:1px}
.brand__mark{
  font-size:19px; font-weight:600; letter-spacing:-.03em; line-height:1.05;
}
.brand__tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); line-height:1.1;
}
@media (max-width:400px){ .brand__tag{display:none} }

.nav__menu{display:flex; align-items:center; gap:clamp(16px,2vw,34px)}
.nav__link{
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-64); position:relative; padding-block:6px;
  transition:color .4s var(--ease);
}
.nav__link:hover,.nav__link.is-active{color:var(--ink)}
.nav__link.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:var(--hair); background:var(--accent);
}
@media (max-width:1000px){ .nav__menu{display:none} }

/* Grupo con submenú */
.nav__group{position:relative}
.nav__drop{
  position:absolute; top:calc(100% + 14px); left:-18px;
  min-width:210px; padding:8px 0;
  background:rgba(246,246,244,.66);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  border:var(--hair) solid rgba(18,18,16,.10);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.nav__group:hover .nav__drop{opacity:1; visibility:visible; transform:translateY(0)}
.nav__drop a{
  display:block; padding:9px 18px;
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-80);
  transition:color .35s var(--ease), background .35s var(--ease);
}
.nav__drop a:hover{color:var(--ink); background:rgba(18,18,16,.06)}

/* Botón hamburguesa */
.burger{
  display:none; width:38px; height:38px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{
  display:block; width:20px; height:var(--hair); background:var(--ink);
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-3px) rotate(-45deg)}
@media (max-width:1000px){ .burger{display:flex} }

/* Menú móvil */
.menu{
  position:fixed; inset:var(--nav-h) 0 0; z-index:99;
  background:rgba(242,241,235,.72);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  padding:clamp(24px,5vw,48px) var(--pad);
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity .55s var(--ease), visibility .55s;
}
.menu.is-open{opacity:1; visibility:visible}
.menu__list li{border-top:var(--hair) solid var(--line)}
.menu__list li:last-child{border-bottom:var(--hair) solid var(--line)}
.menu__list a{
  display:flex; align-items:baseline; gap:1em;
  padding:18px 0;
  font-size:clamp(1.5rem,5.5vw,2.2rem); font-weight:500; letter-spacing:-.03em;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .35s var(--ease);
}
.menu.is-open .menu__list a{opacity:1; transform:none}
.menu__list a:hover{color:var(--accent)}
.menu__list a .i{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.1em}
.menu__foot{margin-top:36px; display:grid; gap:6px}

/* --- 8. Hero -------------------------------------------------------------
   Portada a pantalla completa: imagen de fondo + titular centrado encima.
   Las hairlines siguen presentes sobre la imagen para no perder la retícula.
   ------------------------------------------------------------------------ */
.hero-full{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + clamp(48px,8vw,96px)) var(--pad) clamp(96px,12vh,140px);
  overflow:hidden;
  background:var(--ink);
  text-align:center;
}

/* Fondo: pila de imágenes que se funden entre sí.
   El scroll escala este contenedor — de ahí la sensación de entrar en la sala. */
.hero-full__bg{
  position:absolute; inset:0; z-index:0;
  transform-origin:center 55%;
  will-change:transform;
}
.hero-full__slide{
  position:absolute; inset:0; z-index:1;
  opacity:0;
  transition:opacity 1.6s cubic-bezier(.45,0,.55,1);
  will-change:opacity;
}
.hero-full__slide.is-active{opacity:1}
.hero-full__slide img{
  width:100%; height:100%; object-fit:cover; object-position:center 46%;
  transform:scale(1.04);
  transition:transform 9s linear;
}
/* Deriva lenta mientras la imagen está a la vista */
.hero-full__slide.is-active img{transform:scale(1.14)}
/* Velo: oscurece lo justo para que el texto blanco tenga contraste real
   sin apagar la sala. Más denso arriba y abajo que en el centro. */
.hero-full::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* franja superior: da contraste a la navegación */
    linear-gradient(to bottom, rgba(8,11,15,.74) 0%, rgba(8,11,15,.34) 15%,
                               rgba(8,11,15,.20) 38%, rgba(8,11,15,.26) 62%,
                               rgba(8,11,15,.78) 100%),
    /* velo plano mínimo: sostiene el texto sin apagar la sala */
    rgba(10,14,20,.12);
}

/* Retícula sobre la imagen */
.hero-full__lines{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.hero-full__lines span{border-left:var(--hair) solid rgba(255,255,255,.16)}
.hero-full__lines span:first-child{border-left-color:transparent}
@media (min-width:1000px){ .hero-full__lines{grid-template-columns:repeat(6,1fr)} }
@media (max-width:640px){ .hero-full__lines{display:none} }

/* Contenido */
.hero-full__inner{
  position:relative; z-index:2;
  will-change:transform, opacity;
  display:grid; justify-items:center; gap:0;
  max-width:1180px;
}
.hero-full__eyebrow{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
  margin-bottom:clamp(20px,3vh,34px);
}
.hero-full__title{
  font-size:clamp(2.5rem,6.6vw,6rem);
  line-height:1.0; letter-spacing:-.035em; font-weight:500;
  color:#fff; text-wrap:balance;
  text-shadow:0 2px 40px rgba(8,10,14,.35);
}

.hero-full__lead{
  margin-top:clamp(22px,3.4vh,38px);
  max-width:54ch;
  font-size:clamp(1rem,1.3vw,1.22rem);
  line-height:1.5; letter-spacing:-.012em;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 24px rgba(8,10,14,.4);
}
.hero-full__note{
  margin-top:clamp(18px,2.6vh,28px);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 20px rgba(8,10,14,.5);
}
.hero-full__cta{
  margin-top:clamp(34px,5.4vh,58px);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}

/* Indicador de scroll */
.hero-full__dots{
  position:absolute; left:var(--pad); bottom:clamp(30px,4.4vh,48px); z-index:3;
  display:flex; gap:10px;
}
.hero-full__dots button{
  width:34px; height:2px; padding:0;
  background:rgba(255,255,255,.32);
  position:relative; overflow:hidden;
  transition:background .5s var(--ease);
}
.hero-full__dots button:hover{background:rgba(255,255,255,.55)}
.hero-full__dots button.is-active{background:rgba(255,255,255,.85)}
@media (max-width:640px){
  .hero-full__dots{left:50%; transform:translateX(-50%); bottom:clamp(74px,9vh,96px)}
}

.hero-full__scroll{
  position:absolute; left:50%; bottom:clamp(26px,4vh,44px);
  transform:translateX(-50%); z-index:2;
  display:grid; justify-items:center; gap:12px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  transition:color .4s var(--ease);
}
.hero-full__scroll:hover{color:#fff}
.hero-full__arrow{
  width:var(--hair); height:44px;
  background:linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0));
  animation:scrollHint 2.6s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scrollHint{
  0%,100%{transform:scaleY(.35); opacity:.5}
  45%    {transform:scaleY(1);   opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .hero-full__arrow{animation:none; transform:none}
  .hero-full__slide img{transform:none; transition:none}
  .hero-full__slide{transition:none}
}

/* Banda de imagen de páginas interiores */
.hero-media{
  position:relative; overflow:hidden;
  height:clamp(280px,46vh,520px);
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 1.6s var(--ease);
}
.hero-media.is-in img{transform:scale(1)}
.hero-media__cap{
  position:absolute; left:var(--pad); bottom:0;
  padding:10px 16px;
  background:var(--ink); color:var(--bone);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase;
}

/* --- 9b. Marquesina de sellos (clientes) --------------------------------
   Dos pistas idénticas desplazándose: al terminar la primera empieza la
   segunda, sin corte visible. Se detiene al pasar el cursor.
   ------------------------------------------------------------------------ */
.sellos{
  display:flex; width:100%; overflow:hidden;
  border-block:var(--hair) solid var(--line);
  background:var(--bone);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.sellos__track{
  display:flex; align-items:center; flex:none;
  gap:clamp(38px,5vw,80px);
  padding-block:clamp(22px,2.6vw,34px);
  padding-inline:clamp(19px,2.5vw,40px);
  animation:sellos 46s linear infinite;
}
.sellos:hover .sellos__track{animation-play-state:paused}
@keyframes sellos{ to{ transform:translateX(-100%) } }

.sello{flex:none; display:flex; align-items:center; justify-content:center}
.sello img{
  /* El tamaño sale de los atributos width/height del HTML: están calculados
     para que todos los sellos pesen ópticamente lo mismo. No sobreescribir. */
  max-width:none;
  filter:grayscale(1) contrast(.72) brightness(.62);
  opacity:.62;
  transition:filter .5s var(--ease), opacity .5s var(--ease);
}
.sello img:hover{ filter:none; opacity:1 }

@media (prefers-reduced-motion:reduce){
  .sellos__track{animation:none}
  .sellos{overflow-x:auto}
}

/* --- 10. Listado indexado (productos / servicios) ------------------------ */
.index__item{
  display:block; border-top:var(--hair) solid var(--line);
  position:relative; overflow:hidden;
}
.index__item:last-child{border-bottom:var(--hair) solid var(--line)}
.index__inner{
  display:grid; gap:8px clamp(16px,3vw,48px);
  grid-template-columns:1fr;
  padding-block:clamp(22px,3vw,38px);
  position:relative; z-index:2;
  transition:padding-left .7s var(--ease), color .5s var(--ease);
}
@media (min-width:900px){
  .index__inner{grid-template-columns:64px minmax(200px,2.4fr) 4fr 130px; align-items:baseline}
}
.index__item:hover .index__inner{padding-left:clamp(10px,1.6vw,26px)}
.index__n{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted)}
.index__t{font-size:clamp(1.35rem,2.5vw,2.15rem); font-weight:500; letter-spacing:-.03em; line-height:1.05}
.index__d{color:var(--ink-64); font-size:15px; line-height:1.5; max-width:56ch}
.index__go{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  justify-self:start;
}
@media (min-width:900px){ .index__go{justify-self:end} }
.index__item::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(18,18,16,.028);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .75s var(--ease);
}
.index__item:hover::after{transform:scaleY(1); transform-origin:top}

/* Miniatura flotante que sigue al cursor */
.hover-thumb{
  position:fixed; top:0; left:0; z-index:60;
  width:clamp(200px,17vw,300px); aspect-ratio:4/3;
  overflow:hidden; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.9);
  transition:opacity .5s var(--ease), transform .7s var(--ease);
  will-change:transform;
}
.hover-thumb.is-on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.hover-thumb img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){ .hover-thumb{display:none} }

/* --- 10b. Línea de proceso -----------------------------------------------
   Eje vertical que se dibuja con el scroll. Sólo una etapa está abierta a la
   vez: al bajar se revela la siguiente, al subir vuelve a cerrarse.
   ------------------------------------------------------------------------ */
.proceso{
  --axis-x: 10px;
  --p: 0;                       /* progreso 0→1 del trazo, lo mueve el JS */
  position:relative;
  padding:clamp(70px,12vh,150px) 0 clamp(80px,14vh,170px);
  padding-left:calc(var(--axis-x) + clamp(30px,4vw,58px));
}
@media (min-width:900px){ .proceso{--axis-x:18px} }

/* Eje y su trazo de avance */
.proceso__axis{
  position:absolute; left:var(--axis-x); z-index:1;
  top:clamp(70px,12vh,150px);
  height:var(--axis-h, 0px);        /* termina en el último punto: lo mide el JS */
  width:0; border-left:var(--hair) solid var(--line);
}
.proceso__axis i{
  position:absolute; left:-1px; top:0; width:var(--hair);
  height:calc(var(--p) * 100%);
  background:var(--accent);
}

/* Extremos */
.proceso__end{position:absolute; left:var(--axis-x); z-index:3; display:block; height:0}
.proceso__end--ini{top:clamp(70px,12vh,150px)}
.proceso__end--fin{bottom:clamp(80px,14vh,170px)}
.proceso__tick{
  position:absolute; top:0; left:0; display:block;
  width:9px; height:0; border-top:var(--hair) solid var(--line-2);
  transform:translate(-50%,-50%);
}
.proceso__end em{
  position:absolute; bottom:14px; left:-14px;
  font-family:var(--mono); font-style:normal; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
.proceso__end--fin em{color:var(--accent)}

/* Etapas */
.paso{
  position:relative;
  border-top:var(--hair) solid var(--line);
  padding-block:clamp(24px,3.4vh,40px);
  min-height:clamp(150px,23vh,260px);
  display:flex; flex-direction:column; justify-content:center;
}
.paso:last-of-type{border-bottom:var(--hair) solid var(--line)}

.paso__marker{
  position:absolute; z-index:3;
  left:calc(-1 * clamp(30px,4vw,58px));
  top:calc(clamp(24px,3.4vh,40px) + .6em);
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:13px; line-height:1;
  color:var(--line-2);
  transition:color .45s var(--ease);
}
.paso__marker::before{content:"["}
.paso__marker::after{content:"]"}
.paso__marker i{
  display:block; width:9px; height:9px;
  background:var(--line-2);
  transition:background .45s var(--ease), transform .55s var(--ease);
}
.paso.is-on .paso__marker{color:var(--ink-40)}
.paso.is-on .paso__marker i{background:var(--accent); transform:scale(1.1)}

.paso__head{display:flex; align-items:baseline; gap:clamp(14px,2vw,26px)}
.paso__n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); flex:none;
  transition:color .45s var(--ease);
}
.paso.is-on .paso__n{color:var(--accent)}
.paso__t{
  font-size:clamp(1.15rem,1.9vw,1.6rem); font-weight:500;
  letter-spacing:-.025em; line-height:1.15;
  color:var(--ink-40);
  transition:color .5s var(--ease);
}
.paso.is-on .paso__t{color:var(--ink)}

/* Cuerpo revelable: se abre al activarse y se cierra al volver atrás */
.paso__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .75s var(--ease), opacity .5s var(--ease);
  opacity:0;
}
.paso.is-on .paso__body{grid-template-rows:1fr; opacity:1}
.paso__body > div{overflow:hidden}
.paso__d{
  font-size:15px; line-height:1.55; color:var(--ink-64);
  max-width:62ch;
  padding-top:10px;
  padding-left:calc(10.5px + clamp(14px,2vw,26px));
}

@media (prefers-reduced-motion:reduce){
  .paso__body{grid-template-rows:1fr; opacity:1; transition:none}
  .paso__t{color:var(--ink)}
}

/* --- 10c. Placa de acento ------------------------------------------------
   Bloque macizo en el azul de marca: titular entre corchetes, regla y una
   línea de contacto debajo.
   ------------------------------------------------------------------------ */
.paso--final .placa{
  margin-top:18px;
  /* se abre desde el centro hacia los cuatro lados, sin deformar el texto */
  clip-path:inset(50% 50% 50% 50%);
  transition:clip-path .95s var(--ease);
}
.paso--final.is-on .placa{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .paso--final .placa{clip-path:none; transition:none}
}
.paso--final .paso__d{display:none}
.placa{
  background:var(--accent);
  padding:clamp(30px,4vw,42px) clamp(26px,3.6vw,40px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(20px,2.6vw,28px);
  text-align:center;
  max-width:660px;
}
.placa__t{
  display:inline-block;
  font-size:clamp(1.15rem,2vw,1.51rem);
  font-weight:700; letter-spacing:-.03em; line-height:1.2;
  color:var(--paper);
}
.placa__t::before{content:"["; color:rgba(246,246,244,.6); margin-right:6px}
.placa__t::after{content:"]"; color:rgba(246,246,244,.6); margin-left:6px}
/* Etiquetas de acompañamiento */
.chips{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.chip{
  display:inline-flex; align-items:center;
  height:26px; padding-inline:11px;
  border:var(--hair) solid var(--line-2);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.paso.is-on .chip{color:var(--ink-64); border-color:var(--ink-40)}

/* Sobre la placa de acento, en versión clara */
.placa .chip,
.paso.is-on .placa .chip{
  border-color:rgba(246,246,244,.42);
  color:rgba(246,246,244,.92);
}

/* --- 11. Tarjetas / celdas ----------------------------------------------- */
.cells{
  display:grid; grid-template-columns:1fr;
  border-top:var(--hair) solid var(--line);
  border-left:var(--hair) solid var(--line);
}
@media (min-width:700px){ .cells--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:700px){ .cells--3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .cells--3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:700px){ .cells--4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .cells--4{grid-template-columns:repeat(4,1fr)} }
.cell{
  border-right:var(--hair) solid var(--line);
  border-bottom:var(--hair) solid var(--line);
  padding:clamp(22px,2.6vw,38px);
  display:flex; flex-direction:column; gap:14px;
  position:relative; overflow:hidden;
  background:var(--bone);
  transition:background .6s var(--ease);
}
.cell:hover{background:var(--paper)}
.cell__n{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--accent)}
.cell__t{font-size:clamp(1.05rem,1.5vw,1.32rem); font-weight:500; letter-spacing:-.02em; line-height:1.2}
.cell__d{font-size:14.5px; line-height:1.55; color:var(--ink-64)}
.cell--media{padding:0}
.cell--media figure{position:relative; overflow:hidden; aspect-ratio:4/3}
.cell--media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.cell--media:hover img{transform:scale(1.045)}

/* --- 12. Galería (transición tipo cortina) ------------------------------- */
.gallery{
  display:grid; gap:var(--hair);
  grid-template-columns:repeat(2,1fr);
  background:var(--line);
  border-block:var(--hair) solid var(--line);
}
@media (min-width:820px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1280px){ .gallery{grid-template-columns:repeat(4,1fr)} }
.shot{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  background:var(--paper); cursor:pointer; display:block;
}
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease), filter .8s var(--ease);
}
.shot:hover img{transform:scale(1.06); filter:saturate(1.05)}
.shot__veil{
  position:absolute; inset:0; background:var(--ink);
  transform:scaleY(1); transform-origin:top;
  transition:transform 1.1s var(--ease);
}
.shot.is-in .shot__veil{transform:scaleY(0); transform-origin:bottom}
.shot__label{
  position:absolute; left:14px; bottom:12px; z-index:3;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#fff;
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.shot:hover .shot__label{opacity:1; transform:none}

/* Filtros de galería */
.filters{display:flex; flex-wrap:wrap; gap:8px}
.filters button{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  padding:9px 16px; border:var(--hair) solid var(--line);
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.filters button:hover{color:var(--ink); border-color:var(--line-2)}
.filters button.is-active{color:#fff; background:var(--ink); border-color:var(--ink)}
.shot.is-hidden{display:none}

/* Lightbox */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(18,18,16,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,64px);
  opacity:0; visibility:hidden;
  transition:opacity .55s var(--ease), visibility .55s;
}
.lb.is-open{opacity:1; visibility:visible}
.lb__img{
  max-width:100%; max-height:82vh; object-fit:contain;
  opacity:0; transform:scale(.985);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.lb.is-ready .lb__img{opacity:1; transform:none}
.lb__bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px clamp(20px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  color:rgba(255,255,255,.7);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.lb__nav{display:flex; gap:14px}
.lb__nav button,.lb__close{
  color:rgba(255,255,255,.7); font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  transition:color .35s var(--ease);
}
.lb__nav button:hover,.lb__close:hover{color:#fff}
.lb__close{position:absolute; top:20px; right:clamp(20px,5vw,64px)}

/* --- 13. Bloques de contenido -------------------------------------------- */
.split{
  display:grid; gap:clamp(24px,4vw,64px);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:940px){ .split{grid-template-columns:1fr 1fr} }
.split--wide-r{grid-template-columns:1fr}
.split--doc{grid-template-columns:1fr}
@media (min-width:860px){ .split--doc{grid-template-columns:minmax(230px,320px) 1fr} }

/* Columna de la tarjeta: certificado y, debajo, su descarga */
.doc-col{
  display:flex; flex-direction:column; align-items:center;
  max-width:340px; width:100%;
  gap:clamp(16px,2vw,22px);
}

/* Columna junto a la tarjeta: cita arriba y, a continuación, texto y acciones.
   El contenido se apoya arriba para no dejar un hueco en el medio. */
.doc-side{
  display:flex; flex-direction:column;
  gap:clamp(26px,3.4vw,40px);
}
.doc-side__foot{
  padding-top:clamp(24px,3vw,36px);
  border-top:var(--hair) solid var(--line);
}
@media (min-width:940px){ .split--wide-r{grid-template-columns:5fr 7fr} }

.media{position:relative; overflow:hidden}
.media img{width:100%; height:100%; object-fit:cover}
.media--tall{aspect-ratio:3/4}
.media--wide{aspect-ratio:16/10}
.media--square{aspect-ratio:1/1}

/* Especificaciones en formato tabla-línea */
.specs{border-top:var(--hair) solid var(--line)}
.specs li{
  border-bottom:var(--hair) solid var(--line);
  display:grid; grid-template-columns:1fr; gap:4px;
  padding-block:15px;
}
@media (min-width:640px){
  .specs li{grid-template-columns:minmax(160px,1fr) 2fr; gap:24px; align-items:baseline}
}
.specs dt,.specs .k{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.specs dd,.specs .v{font-size:15px; color:var(--ink-80); line-height:1.5}

/* Lista con viñeta lineal */
.ticks li{
  position:relative; padding-left:26px; padding-block:9px;
  border-bottom:var(--hair) solid var(--line);
  font-size:15px; line-height:1.55; color:var(--ink-80);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:12px; height:var(--hair); background:var(--accent);
}
.ticks li:first-child{border-top:var(--hair) solid var(--line)}

/* Columnas de clientes */
.clients{
  columns:1; column-gap:clamp(24px,4vw,56px);
  border-top:var(--hair) solid var(--line); padding-top:22px;
}
@media (min-width:640px){ .clients{columns:2} }
@media (min-width:1000px){ .clients{columns:3} }
@media (min-width:1400px){ .clients{columns:4} }
.clients li{
  break-inside:avoid; padding-block:7px;
  font-size:14.5px; color:var(--ink-64);
  transition:color .35s var(--ease);
}
.clients li:hover{color:var(--ink)}

/* Cita */
.quote{
  font-size:clamp(1.2rem,2.3vw,1.95rem);
  line-height:1.24; letter-spacing:-.025em; font-weight:500;
  text-wrap:balance;
}
.quote__by{margin-top:20px}
.doc-side blockquote .quote__by{text-align:right}

/* Acordeón */
.acc__item{border-bottom:var(--hair) solid var(--line)}
.acc__item:first-child{border-top:var(--hair) solid var(--line)}
.acc__head{
  width:100%; text-align:left; display:flex; align-items:center; gap:20px;
  padding-block:clamp(18px,2.2vw,26px);
  transition:color .4s var(--ease);
}
.acc__head:hover{color:var(--accent)}
.acc__head .n{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted); flex:none}
.acc__head .t{flex:1; font-size:clamp(1.05rem,1.7vw,1.45rem); font-weight:500; letter-spacing:-.025em}
.acc__head .x{position:relative; width:13px; height:13px; flex:none}
.acc__head .x::before,.acc__head .x::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:currentColor; transition:transform .6s var(--ease);
}
.acc__head .x::before{width:13px; height:var(--hair)}
.acc__head .x::after{width:var(--hair); height:13px}
.acc__item.is-open .acc__head .x::after{transform:rotate(90deg)}
.acc__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .7s var(--ease);
}
.acc__item.is-open .acc__body{grid-template-rows:1fr}
.acc__body > div{overflow:hidden}
.acc__body .inner{padding-bottom:clamp(20px,2.4vw,32px); max-width:78ch}

/* --- 13b. Tarjeta de documento -------------------------------------------
   Estructura de card (vista previa + datos + enlaces) resuelta con el
   lenguaje del sitio: hairlines, sin radios ni sombras difusas.
   ------------------------------------------------------------------------ */
.tilt{
  perspective:1100px;
  max-width:340px; width:100%;
}
.doccard{
  position:relative;
  display:flex; flex-direction:column;
  max-width:340px; width:100%;
  border:var(--hair) solid var(--line);
  background:var(--paper);
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .8s var(--ease), border-color .55s var(--ease),
             box-shadow .8s var(--ease);
}
.tilt:hover .doccard{
  border-color:var(--ink);
  box-shadow:0 26px 50px -28px rgba(18,18,16,.5);
}
/* Mientras el cursor está encima el seguimiento es inmediato; al salir, vuelve suave. */
.tilt.is-tracking .doccard{transition:transform .1s linear, border-color .55s var(--ease), box-shadow .8s var(--ease)}

/* Reflejo que sigue al cursor */
.doccard__glare{
  position:absolute; inset:0; z-index:5;
  pointer-events:none; opacity:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 32%, rgba(255,255,255,0) 62%);
  mix-blend-mode:overlay;
}
.tilt.is-tracking .doccard__glare{opacity:1}

/* Barrido de brillo: cruza la tarjeta al entrar el cursor */
.doccard__sheen{
  position:absolute; inset:-30% -60%; z-index:6;
  pointer-events:none; opacity:0;
  background:linear-gradient(105deg,
    rgba(255,255,255,0)   38%,
    rgba(255,255,255,.16) 46%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.16) 54%,
    rgba(255,255,255,0)   62%);
  transform:translateX(-85%);
}
.tilt:hover .doccard__sheen,
.tilt.is-sheen .doccard__sheen{
  animation:sheen 1.15s cubic-bezier(.3,0,.2,1) forwards;
}
@keyframes sheen{
  0%   {opacity:0;   transform:translateX(-85%)}
  12%  {opacity:1}
  88%  {opacity:1}
  100% {opacity:0;   transform:translateX(85%)}
}
.doccard__img{
  position:relative; overflow:hidden;
  aspect-ratio:5/7; background:#fff;
}
.doccard__img img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform 1.1s var(--ease);
}
.tilt:hover .doccard__img img{transform:scale(1.045)}
.doccard__badge{
  position:absolute; top:0; left:0; z-index:3;
  transform:translateZ(26px);
  padding:7px 12px;
  background:var(--ink); color:var(--bone);
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase;
}
.doccard__img{border-bottom:0}

/* --- 14. Contacto / formulario ------------------------------------------- */
.field{
  position:relative; border-bottom:var(--hair) solid var(--line);
  padding-top:22px;
}
.field label{
  position:absolute; top:22px; left:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  pointer-events:none;
  transition:transform .5s var(--ease), color .4s var(--ease), opacity .4s var(--ease);
}
.field input,.field textarea,.field select{
  width:100%; background:none; border:0; outline:0;
  padding:6px 0 14px; font-size:16px; letter-spacing:-.01em; color:var(--ink);
  font-family:inherit;
}
.field textarea{resize:vertical; min-height:96px}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-18px) scale(.92); color:var(--accent);
}
.field::after{
  content:""; position:absolute; left:0; bottom:-1px; height:var(--hair);
  width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .65s var(--ease);
}
.field:focus-within::after{transform:scaleX(1)}
.field select{padding-top:14px; cursor:pointer}
.field--select label{position:static; display:block; margin-bottom:-6px}

.form-grid{display:grid; gap:clamp(14px,2vw,26px); grid-template-columns:1fr}
@media (min-width:700px){ .form-grid--2{grid-template-columns:1fr 1fr} }
.form-note{font-size:12.5px; color:var(--muted); line-height:1.5}

/* Tarjeta de contacto */
.contact-list{border-top:var(--hair) solid var(--line)}
.contact-list li{border-bottom:var(--hair) solid var(--line); padding-block:18px}
.contact-list .k{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px;
}
.contact-list .v{font-size:clamp(1rem,1.4vw,1.2rem); letter-spacing:-.02em; font-weight:500}
.contact-list a.v:hover{color:var(--accent)}

.map{
  position:relative; overflow:hidden;
  aspect-ratio:16/9; border:var(--hair) solid var(--line); background:var(--paper);
}
.map iframe{width:100%; height:100%; border:0; filter:grayscale(1) contrast(1.05)}

/* --- 15. CTA final ------------------------------------------------------- */
.cta{
  background:var(--ink); color:var(--bone);
  position:relative; z-index:2; overflow:hidden;
}
.cta .eyebrow{color:rgba(246,246,244,.6)}
.cta .lead{color:rgba(246,246,244,.72)}
.cta .btn-ghost{border-color:rgba(246,246,244,.28); color:var(--bone)}
.cta .btn-ghost::before{background:var(--bone)}
.cta .btn-ghost:hover{color:var(--ink); border-color:var(--bone)}
.cta .wrap{padding-block:clamp(44px,6vh,84px)}
.cta__grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(28px,4vw,48px); align-items:center;
}
@media (min-width:940px){ .cta__grid{grid-template-columns:1fr minmax(0,42%)} }

/* El mapa se oscurece para no romper el bloque en tinta */
.map--oscuro{
  position:relative;
  border-color:rgba(246,246,244,.16);
  background:#0b0b0a;
  aspect-ratio:16/9;
}
.map--oscuro iframe{
  filter:grayscale(1) invert(.92) contrast(.86) brightness(1.05);
  /* sin arrastre: así el marcador propio no se desalinea del punto */
  pointer-events:none;
}

/* Marcador en el color de marca, centrado sobre el punto del mapa */
.map__pin{
  position:absolute; left:50%; top:50%; z-index:2;
  width:26px; height:35px;
  transform:translate(-50%,-100%);
  pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.map__pin svg{width:100%; height:100%; display:block; fill:var(--cyan)}
.map__pin svg circle{fill:#0b0b0a}

/* Con el mapa inerte, este enlace conserva el acceso a Maps */
.map__abrir{
  position:absolute; right:10px; bottom:10px; z-index:3;
  padding:7px 12px;
  background:rgba(11,11,10,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:var(--hair) solid rgba(246,246,244,.2);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(246,246,244,.8);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.foot .map__abrir:hover,.map__abrir:hover{color:#fff; border-color:rgba(246,246,244,.55)}
.cta .d2{margin-block:.12em .1em}

/* --- 16. Footer ---------------------------------------------------------- */
.foot{background:var(--ink); color:var(--bone); position:relative; z-index:2}
.foot a{color:rgba(246,246,244,.62); transition:color .4s var(--ease)}
.foot a:hover{color:var(--bone)}
/* Pie: una fila de dos celdas sobre otra de cuatro. Al ser 2 y 4 columnas
   iguales, la acción cae exactamente sobre Instagram + Facebook y la nota
   sobre el correo + LinkedIn. */
.foot__fila{
  display:grid; grid-template-columns:1fr;
  border-top:var(--hair) solid rgba(246,246,244,.14);
}
@media (min-width:760px){ .foot__fila{grid-template-columns:repeat(2,minmax(0,1fr))} }

.foot__nota{
  display:flex; align-items:center;
  min-height:clamp(76px,9vh,104px);
  padding:18px clamp(18px,2vw,26px);
  border-bottom:var(--hair) solid rgba(246,246,244,.14);
  font-family:var(--mono); font-size:10.5px; line-height:1.7;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(246,246,244,.45);
}
@media (min-width:760px){
  .foot__nota{border-bottom:0; border-right:var(--hair) solid rgba(246,246,244,.14)}
}

.foot__accion{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(76px,9vh,104px);
  padding:18px clamp(18px,2vw,26px);
  background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  transition:color .8s cubic-bezier(.16,1,.3,1);
}
.foot__accion::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.foot .foot__accion:hover{color:var(--ink)}
.foot__accion:hover::before{transform:scaleX(1)}

/* Fila de redes */
.enlaces{
  display:grid; grid-template-columns:1fr;
  border-top:var(--hair) solid rgba(246,246,244,.14);
  width:100%;
}
@media (min-width:560px){ .enlaces{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:760px){ .enlaces{grid-template-columns:repeat(4,minmax(0,1fr))} }

.enlaces li{border-bottom:var(--hair) solid rgba(246,246,244,.14)}
@media (min-width:760px){
  .enlaces li{border-bottom:0; border-right:var(--hair) solid rgba(246,246,244,.14)}
  .enlaces li:last-child{border-right:0}
}

.foot .enlaces__item{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:clamp(76px,9vh,104px);
  padding:18px clamp(18px,2vw,26px);
  color:rgba(246,246,244,.74);
  font-size:15px; letter-spacing:-.01em;
  transition:color .8s cubic-bezier(.16,1,.3,1);
}
.foot .enlaces__item::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bone);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.foot .enlaces__item:hover::before{transform:scaleX(1)}
/* .foot a:hover pinta en claro: hay que ganarle o el texto se pierde. */
.foot .enlaces__item:hover,
.foot .enlaces__item:hover .enlaces__flecha{color:var(--ink)}
.enlaces__flecha{
  width:14px; height:14px; flex:none; color:inherit;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.foot .enlaces__item:hover .enlaces__flecha{transform:translate(3px,-3px)}
@media (prefers-reduced-motion:reduce){
  .foot .enlaces__item::before,.enlaces__flecha,.foot__accion::before{transition:none}
}

/* --- 17. Encabezado de página interna ------------------------------------ */
.phead{
  padding-top:calc(var(--nav-h) + clamp(48px,7vw,104px));
  padding-bottom:clamp(32px,4.5vw,64px);
}
.phead__title{margin-top:clamp(14px,2vw,24px)}
.phead__lead{margin-top:clamp(18px,2.4vw,30px)}
.crumbs{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  display:flex; gap:.6em; flex-wrap:wrap;
}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--line-2)}

/* Navegación entre productos */
.pager{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block:clamp(24px,3vw,40px);
}
.pager a{display:grid; gap:6px}
.pager .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.pager .t{font-size:clamp(1.05rem,1.7vw,1.45rem); font-weight:500; letter-spacing:-.025em}
.pager a:hover .t{color:var(--accent)}
.pager .r{text-align:right}

/* --- 18. Animaciones de entrada ------------------------------------------ */
[data-rise]{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform 1.05s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-rise].is-in{opacity:1; transform:none}

[data-line]{
  display:block; overflow:hidden;
}
[data-line] > span{
  display:block; transform:translateY(105%);
  transition:transform 1.05s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-line].is-in > span{transform:none}

[data-wipe]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-wipe].is-in{clip-path:inset(0 0 0 0)}

[data-grow]{
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-grow].is-in{transform:scaleX(1)}

@media (hover:none){
  .tilt{perspective:none}
  .doccard{transform:none !important}
  .doccard__glare{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-rise],[data-wipe],[data-grow]{opacity:1; transform:none; clip-path:none}
  [data-line] > span{transform:none}
  .doccard__sheen{display:none}
  html.is-loading .loader,
  html.is-loading .loader svg{transition:opacity .3s linear}
  html.is-loading .loader.is-done{transform:none; opacity:0}
  html.is-loading .loader.is-done svg{transform:none}
}

/* --- 19. Indicador de progreso ------------------------------------------- */
.progress{
  position:fixed; top:0; left:0; z-index:110;
  height:2px; background:var(--accent);
  width:100%; transform:scaleX(0); transform-origin:left;
}

/* --- 19b. Loader de entrada (revelado del logo) --------------------------- */
:root{ --logo-reveal-bg:var(--accent); }   /* fondo del loader */

.loader{display:none}
html.is-loading, html.is-loading body{overflow:hidden}
html.is-loading .loader{
  display:block; position:fixed; inset:0; z-index:999;
  background:var(--logo-reveal-bg);
  will-change:transform;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1);
}
html.is-loading .loader svg{
  display:block; width:100%; height:100%;
  opacity:0; transition:opacity .25s ease;
}
html.is-loading .loader.is-ready svg{opacity:1}

/* Salida: la cortina sube y deja ver el hero. El logo sube más despacio,
   así el telón se despega del fondo en vez de moverse todo en bloque. */
html.is-loading .loader.is-done{transform:translateY(-100%); pointer-events:none}
html.is-loading .loader.is-done svg{
  opacity:0;
  transform:translateY(26%);
  transition:transform 1.05s cubic-bezier(.76,0,.24,1), opacity .55s ease .2s;
}

/* --- 20. Utilidades ------------------------------------------------------ */
.stack{display:grid}
.stack-8{gap:8px} .stack-12{gap:12px} .stack-16{gap:16px}
.stack-20{gap:20px} .stack-28{gap:28px} .stack-40{gap:clamp(24px,3vw,40px)}
.flex{display:flex} .wrapf{flex-wrap:wrap} .items-end{align-items:flex-end}
.center{justify-content:center} .right{justify-content:flex-end}
.items-center{align-items:center} .between{justify-content:space-between}
.gap-12{gap:12px} .gap-20{gap:20px} .gap-32{gap:clamp(16px,2.5vw,32px)}
.mt-20{margin-top:20px} .mt-32{margin-top:clamp(20px,3vw,32px)}
.mt-48{margin-top:clamp(28px,4vw,48px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}