/* Gráfica Montecristo MP, C.A. · landing v3.1 (2-nov-2026: azul de marca en botones, menú, Nosotros, microinteracciones)
   1) página  2) logo que se imprime (logo-construccion)  3) escenas (historia del taller y micro-escenas) */

/* ===================================================================== 1. Página */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:400 800; font-stretch:100% 125%; font-style:normal; font-display:swap;
}
/* Respaldo medido contra Archivo (ancho del texto y alto de línea): el cambio de fuente no mueve nada */
@font-face{
  font-family:"Archivo Respaldo";
  src:local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust:99.2%; ascent-override:88.7%; descent-override:21.2%; line-gap-override:0%;
}
@font-face{
  font-family:"Archivo Respaldo Ancha";
  src:local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold");
  font-weight:600 800;
  size-adjust:115.8%; ascent-override:76%; descent-override:18.1%; line-gap-override:0%;
}
@font-face{
  font-family:"Archivo Respaldo Boton";
  src:local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold");
  font-weight:500 700;
  size-adjust:102.8%; ascent-override:85.6%; descent-override:20.4%; line-gap-override:0%;
}

:root{
  --ink:#373435;
  --muted:#5f5b5c;
  --paper:#ffffff;
  --paper-2:#f6f5f1;
  --line:#e3e0d9;
  --line-strong:#cdc9c1;
  --cyan:#00afef;
  --cyan-ink:#0070ac;       /* enlaces: el mismo azul de los botones (5,4:1 sobre blanco) */
  --azul:#0070ac;           /* azul de marca profundo, derivado del cian del logo: texto blanco a 5,4:1 */
  --azul-hover:#005d90;     /* 7,1:1 */
  --azul-press:#004f7b;
  --cyan-tint:#e8f7fd;
  --cyan-line:#c6e9f8;
  --magenta:#ec268f;
  --yellow:#fff212;

  --font:"Archivo","Archivo Respaldo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Archivo","Archivo Respaldo Ancha",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-ui:"Archivo","Archivo Respaldo Boton",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:76rem;
  --gutter:clamp(1rem, 4vw, 2.5rem);
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;
  --section:clamp(3.5rem, 8vw, 7rem);
  --radius:16px;
  --radius-lg:24px;
  --header-h:3.5rem;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-suave:cubic-bezier(.22,1,.36,1);
}
@media (min-width:48em){ :root{--header-h:4.5rem} }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:1.0625rem; line-height:1.6; font-weight:420; font-stretch:100%;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:var(--cyan-ink); text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a,button,summary{touch-action:manipulation; -webkit-tap-highlight-color:rgba(0,175,239,.16)}
h1,h2,h3{margin:0; font-family:var(--font-display); line-height:1.08; font-weight:720; font-stretch:110%; letter-spacing:-.015em; text-wrap:balance}
p,dd,li{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}
dl,dd{margin:0}
address{font-style:normal}
::selection{background:var(--yellow); color:var(--ink)}
:focus-visible{outline:3px solid var(--cyan-ink); outline-offset:3px; border-radius:6px}
.nowrap{white-space:nowrap}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:1rem; top:-4rem; z-index:100; background:var(--ink); color:#fff; padding:var(--s3) var(--s4); border-radius:10px; text-decoration:none; font-weight:600}
.skip:focus{top:.5rem}
.icon{width:1.5rem; height:1.5rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Botones ---------- */
/* Botón lleno: azul de marca con texto blanco. Al pasar el puntero, una "pasada de tinta" más oscura barre el botón de
   izquierda a derecha y se retira por la derecha (el ::before); al presionar, escala 0,96. */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:3rem; padding:.75em 1.4em; border-radius:999px; border:1.5px solid transparent;
  font:inherit; font-family:var(--font-ui); font-weight:640; font-stretch:106%; line-height:1.25; letter-spacing:.005em;
  text-decoration:none; text-align:center; cursor:pointer;
  transition:color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .16s var(--ease-out);
}
.btn::before{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:inherit;
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .42s var(--ease-suave);
}
.btn .icon{width:1.2rem; height:1.2rem; stroke-width:2; transition:transform .3s var(--ease-suave)}
.btn-primary{background:var(--azul); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px -12px rgba(0,79,123,.75)}
.btn-primary::before{background:var(--azul-hover)}
.btn-outline{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-outline::before{background-color:transparent; transition:transform .42s var(--ease-suave), background-color 0s linear .42s}
@media (hover:hover){
  .btn:hover::before{transform:scaleX(1); transform-origin:0 50%}
  .btn-outline:hover{color:#fff}
  .btn-outline:hover::before{background-color:var(--ink); transition:transform .42s var(--ease-suave), background-color 0s}
  .btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 22px -12px rgba(0,79,123,.85)}
  .btn:hover .icon{transform:translateY(-1px) rotate(-8deg)}
}
.btn-primary:active,.btn-primary:active::before{background:var(--azul-press)}
.btn-sm{min-height:2.75rem; padding:.5em 1.1em; font-size:.95rem}
.btn-lg{min-height:3.5rem; padding:.85em 1.6em; font-size:1.05rem}
.btn:active{transform:scale(.96)}
.actions{display:flex; flex-wrap:wrap; gap:var(--s3)}
.link-cta{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:2.75rem;
  font-family:var(--font-ui); font-weight:640; font-stretch:106%; color:var(--cyan-ink);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em;
}
.link-cta .icon{width:1.2rem; height:1.2rem; stroke-width:2; transition:transform .3s var(--ease-suave)}
.link-cta:hover{text-decoration-thickness:2px}
/* con el texto en su span: línea fina siempre y, al pasar el puntero, una línea cian que se "imprime" desde la izquierda */
.link-cta:has(.cta-txt){text-decoration:none}
.cta-txt{position:relative; padding-bottom:.16em; border-bottom:1px solid currentColor}
.cta-txt::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--cyan); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease-suave)}
@media (hover:hover){
  .link-cta:hover .cta-txt::after,.mv-toggle:hover .cta-txt::after{transform:scaleX(1)}
  .link-cta:hover .icon{transform:translateY(-1px) rotate(-8deg)}
}
.link-cta:focus-visible .cta-txt::after,.mv-toggle:focus-visible .cta-txt::after{transform:scaleX(1)}

/* ---------- Cabecera: marca a la izquierda, "Ingresar" siempre arriba a la derecha ----------
   Al bajar se vuelve translúcida con una línea fina (clase .is-scrolled, desde sitio.js). Escritorio (60em): navegación
   completa con un indicador que se desliza a la sección visible. Teléfono y tableta: botón de menú que despliega un panel
   bajo la cabecera (no es una ventana: empuja la vista con un velo, se cierra con Esc, tocando fuera o al elegir). */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h); background:#fff; border-bottom:1px solid var(--line);
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.js .site-header{border-bottom-color:transparent}
.js .site-header.is-scrolled{border-bottom-color:var(--line); box-shadow:0 12px 28px -24px rgba(55,52,53,.55)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .js .site-header.is-scrolled{background:rgba(255,255,255,.84); -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px)}
}
html.menu-abierto .site-header{background:#fff; border-bottom-color:var(--line); box-shadow:none}
.header-bar{display:flex; align-items:center; gap:var(--s3); height:100%}
.brand{display:flex; align-items:center; min-height:2.75rem; margin-right:auto; border-radius:6px}
.brand img{width:auto; height:2.125rem}
.nav,.header-cotizar,.menu-btn{display:none}
/* anchos fijos: el cambio de la fuente de respaldo a Archivo no mueve la cabecera */
.header-ingresar{flex:none; width:6.75rem; padding-inline:.5rem}
.nav-links a{position:relative; display:flex; align-items:center; text-decoration:none; color:var(--ink); font-family:var(--font-ui)}
.nav-panel-acciones .btn{width:100%}

/* botón de menú: dos líneas que se cruzan en una X */
.js .menu-btn{
  display:inline-grid; place-items:center; flex:none; width:2.75rem; height:2.75rem; margin-right:-.5rem; padding:0;
  border:0; border-radius:12px; background:transparent; color:var(--ink); cursor:pointer;
}
.menu-ico{position:relative; display:block; width:22px; height:14px}
.menu-ico i{position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .32s var(--ease-suave)}
.menu-ico i:first-child{top:2px}
.menu-ico i:last-child{bottom:2px; left:6px}
.menu-btn[aria-expanded="true"] .menu-ico i:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-ico i:last-child{transform:translate(-3px,-4px) rotate(-45deg); left:0}
.menu-btn:active{transform:scale(.96)}

/* panel del menú (teléfono y tableta, con JS) */
@media (max-width:59.99em){
  .js .nav{
    display:block; position:absolute; left:0; right:0; top:100%; z-index:2;
    max-height:calc(100svh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain;
    padding:var(--s2) var(--gutter) max(var(--s5), env(safe-area-inset-bottom));
    background:#fff; border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0); visibility:hidden;
    transition:clip-path .2s var(--ease-suave), visibility 0s linear .2s;
  }
  .js .nav.is-open{clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .38s var(--ease-suave), visibility 0s}
  .nav-links{display:grid}
  .nav-links li{border-bottom:1px solid var(--line)}
  .nav-links a{
    justify-content:space-between; min-height:3.5rem; font-family:var(--font-display); font-size:1.35rem; font-weight:680; font-stretch:110%; letter-spacing:-.01em;
    opacity:0; transform:translateY(-8px); transition:opacity .2s ease, transform .2s var(--ease-suave), color .2s ease;
  }
  .nav-links a::after{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--line-strong); transition:background-color .2s ease, transform .3s var(--ease-suave)}
  .nav-links a[aria-current="true"]::after{background:var(--cyan); transform:scale(1.4)}
  .nav.is-open .nav-links a{opacity:1; transform:none; transition:opacity .34s ease, transform .4s var(--ease-suave), color .2s ease}
  .nav.is-open li:nth-child(2) a{transition-delay:35ms}
  .nav.is-open li:nth-child(3) a{transition-delay:70ms}
  .nav.is-open li:nth-child(4) a{transition-delay:105ms}
  .nav-panel-acciones{display:grid; gap:var(--s3); margin-top:var(--s5)}
  .nav-indicador{display:none}
  .menu-velo{position:fixed; inset:var(--header-h) 0 0; z-index:45; background:rgba(55,52,53,.34); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s}
  .menu-velo.is-open{opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s}
  html.menu-abierto{overflow:hidden}
}
@media (min-width:30em) and (max-width:59.99em){ .nav-panel-acciones{grid-template-columns:1fr 1fr} }
@media (min-width:48em){
  .header-bar{gap:var(--s5)}
  .brand img{height:2.75rem}
  .header-actions{display:flex; align-items:center; gap:var(--s3)}
  .header-cotizar{display:inline-flex; width:8rem; padding-inline:.5rem}
}
@media (min-width:60em){
  .nav{display:block; position:relative}
  .js .menu-btn,.nav-panel-acciones,.menu-velo{display:none}
  .nav-links{display:flex; gap:var(--s4)}
  .nav-links a{min-height:2.75rem; padding-inline:.2rem; color:var(--muted); font-weight:560; font-stretch:105%; font-size:.98rem; white-space:nowrap; transition:color .2s ease}
  .nav-links a::after{content:""; position:absolute; left:.2rem; right:.2rem; bottom:.45rem; height:2px; background:var(--line-strong); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-suave)}
  .nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--ink)}
  .nav-links a:hover::after{transform:scaleX(1)}
  /* el indicador de la sección visible: una barra cian que se desliza entre los enlaces (sitio.js la ubica) */
  .nav-indicador{position:absolute; left:0; bottom:.45rem; width:1px; height:2px; background:var(--cyan); transform-origin:0 50%; opacity:0; pointer-events:none;
    transition:transform .45s var(--ease-suave), opacity .25s ease}
  .nav-indicador.on{opacity:1}
  .nav-indicador.sin-trans{transition:none}
  html:not(.js) .nav-links a[aria-current="true"]::after{transform:scaleX(1)}
  .header-actions{padding-left:var(--s5); border-left:1px solid var(--line)}
}

/* ---------- Inicio ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden; padding:clamp(1.25rem, 4vw, 3.5rem) 0 clamp(2.5rem, 6vw, 5rem)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(55,52,53,.14) 1px, transparent 1.4px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 78% 40%, #000 10%, transparent 70%);
          mask-image:radial-gradient(ellipse 60% 70% at 78% 40%, #000 10%, transparent 70%);
}
.hero-grid{display:grid; gap:clamp(1rem, 3vw, 2.5rem); align-items:center}
.hero-logo{order:-1; width:min(100%, 26rem); margin-inline:auto; padding:6% 7%}
.hero-logo .ml-logo{aspect-ratio:2868/1633}
.hero h1{
  font-size:clamp(2.35rem, 1.45rem + 3.9vw, 4.6rem); line-height:1; font-weight:780; font-stretch:116%; letter-spacing:-.022em;
  margin-bottom:var(--s4);
}
.lead{max-width:32rem; font-size:clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height:1.55; color:var(--muted); margin-bottom:var(--s6)}
.hero-ver{align-self:center}
@media (max-width:29.99em){ .hero .actions .btn{flex:1 1 100%} }
@media (min-width:60em){
  .hero{padding-block:clamp(3rem, 6vw, 5.5rem)}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); column-gap:clamp(2rem, 5vw, 5rem); min-height:min(38rem, calc(100svh - var(--header-h) - 8rem))}
  .hero-logo{order:0; width:100%; max-width:38rem; padding:5% 6%}
}

/* ---------- Secciones ---------- */
.section{padding-block:var(--section)}
.h2{font-size:clamp(1.95rem, 1.3rem + 2.3vw, 3.1rem); font-stretch:114%; font-weight:760}

/* Servicios: encabezado, historia del taller y tarjetas */
.servicios{background:var(--paper-2)}
.servicios-head{padding-top:var(--section); padding-bottom:clamp(1rem, 3vw, 2rem)}
.servicios .esc-historia{--esc-top:var(--header-h); --esc-wrap:var(--wrap); --esc-gutter:var(--gutter); --mc-plate:#fff; background:var(--paper-2)}
.esc-paso{margin:0; font-family:var(--font-display); font-size:clamp(1.4rem, 1rem + 1.3vw, 2.2rem); line-height:1.08; font-weight:720; font-stretch:110%; letter-spacing:-.015em; text-wrap:balance}
/* sin JS la historia es figura + lista: se alinea con el contenedor de la página */
html:not(.js) .servicios .esc-historia__escena{max-width:var(--wrap); margin-inline:auto; padding-top:0}
/* el riel de avance se agrupa 3 + 1 + 1: los pasos 1 a 3 son la litografía */
.servicios .esc-historia__riel > i:nth-child(4),.servicios .esc-historia__riel > i:nth-child(5){margin-left:10px}
/* el botón flotante del teléfono no tapa el texto de la historia */
@media (max-width:47.99em){ .js .servicios .esc-historia__texto{padding-right:4.5rem} }

.cards{display:grid; gap:var(--s4); padding-block:clamp(2rem, 5vw, 3.5rem) var(--section)}
.card{display:grid; align-content:start; gap:var(--s2); height:100%; padding:var(--s4) var(--s4) var(--s3); background:#fff; border:1px solid var(--line); border-radius:20px; --mc-plate:#fff;
  transition:transform .4s var(--ease-suave), box-shadow .4s var(--ease-suave), border-color .3s ease}
@media (hover:hover){
  .card:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 1px 2px rgba(55,52,53,.06), 0 22px 40px -26px rgba(55,52,53,.42)}
}
.card .esc-micro{--esc-ar:3/2; margin-bottom:var(--s2)}
.card h3{font-size:clamp(1.25rem, 1.15rem + .4vw, 1.5rem)}
.card p{color:var(--muted); line-height:1.5}
.card .link-cta{justify-self:start; margin-top:auto}
@media (min-width:36em) and (max-width:59.99em){
  .card{grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:var(--s5); align-items:center; padding:var(--s4) var(--s5)}
  .card .esc-micro{grid-row:1 / span 3; margin:0}
}
@media (min-width:60em){
  .cards{grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s5)}
  .card{grid-template-rows:auto auto 1fr auto; padding:var(--s5) var(--s5) var(--s4)}
  .card .esc-micro{--esc-ar:4/3}
}

/* Documentos fiscales (sección aparte) */
.fiscal{border-top:1px solid var(--line)}
.fiscal-grid{display:grid; gap:clamp(1.5rem, 4vw, 3rem); align-items:center}
.fiscal h2{max-width:24ch; margin-bottom:var(--s4); font-size:clamp(1.75rem, 1.25rem + 1.8vw, 2.6rem)}
.fiscal-lead{max-width:36rem; font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height:1.55; margin-bottom:var(--s5)}
.docs{display:grid; gap:var(--s2) var(--s5); margin-bottom:var(--s6)}
.docs li{position:relative; padding-left:1.15rem; line-height:1.45}
.docs li::before{content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; background:var(--cyan)}
.fiscal-fig{width:min(100%, 24rem); margin-inline:auto; --mc-plate:#fff}
.portal{grid-column:1 / -1; display:grid; gap:var(--s4); padding:clamp(var(--s5), 4vw, var(--s6)); background:var(--cyan-tint); border:1px solid var(--cyan-line); border-radius:var(--radius-lg)}
.portal h3{font-size:clamp(1.35rem, 1.2rem + .6vw, 1.75rem); margin-bottom:var(--s2)}
.portal p{color:var(--muted); max-width:34rem}
@media (min-width:30em){ .docs{grid-template-columns:repeat(2, minmax(0,1fr))} .docs li:last-child{grid-column:1 / -1} }
@media (max-width:29.99em){ .portal .actions .btn,.fiscal-grid > div > .btn{flex:1 1 100%; width:100%} }
.portal .actions{align-items:center; column-gap:var(--s5)}
@media (min-width:60em){
  .fiscal-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .fiscal-fig{width:100%; max-width:29rem}
  .portal{grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:var(--s7)}
}

/* Quiénes somos: una sola sección. Declaración grande con subrayados CMYK, Misión y Visión en dos tarjetas con su marca
   de registro, los cinco valores en una grilla con marcas de imprenta en línea fina, y los objetivos en secuencia. */
.nosotros{background:var(--paper-2)}
.nos-intro{display:grid; gap:var(--s4); margin-bottom:clamp(2.5rem, 6vw, 4.5rem)}
.nos-intro .h2{margin-bottom:var(--s2)}
.statement{font-family:var(--font-display); font-size:clamp(1.6rem, 1.15rem + 2vw, 2.85rem); line-height:1.16; font-weight:640; font-stretch:110%; letter-spacing:-.018em; max-width:22ch; text-wrap:balance}
.hl{background-repeat:no-repeat; background-position:0 92%; background-size:100% .16em; padding-bottom:.02em; transition:background-size .9s var(--ease-suave)}
.hl-c{background-image:linear-gradient(var(--cyan),var(--cyan))}
.hl-m{background-image:linear-gradient(var(--magenta),var(--magenta)); transition-delay:.14s}
.hl-y{background-image:linear-gradient(var(--yellow),var(--yellow)); background-size:100% .26em; transition-delay:.28s}
.statement.rv-espera .hl{background-size:0% .16em}
.statement.rv-espera .hl-y{background-size:0% .26em}
.nos-texto{max-width:34rem; color:var(--muted); font-size:clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height:1.55}
@media (min-width:60em){
  .nos-intro{grid-template-columns:minmax(0,7fr) minmax(0,4fr); column-gap:var(--s8); align-items:end}
  .nos-intro .h2{grid-column:1 / -1}
  .nos-texto{padding-bottom:.5rem}
}

/* Misión y visión */
.mv{display:grid; gap:var(--s4)}
.mv-card{position:relative; display:grid; align-content:start; gap:var(--s3); padding:clamp(1.5rem, 4vw, 2.5rem); background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.mv-card h3{font-size:clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); font-weight:760; font-stretch:116%; letter-spacing:-.025em; margin-bottom:var(--s1)}
.mv-registro{position:absolute; top:clamp(1.25rem, 3.5vw, 2rem); right:clamp(1.25rem, 3.5vw, 2rem); width:2.5rem; height:2.5rem; fill:none; stroke:var(--cyan); stroke-width:1.4}
.mv-m .mv-registro{stroke:var(--magenta)}
.mv-texto{color:var(--muted); font-size:1.02rem; line-height:1.6; max-width:38rem}
.mv-lead{display:block; margin-bottom:.35rem; color:var(--ink); font-family:var(--font-display); font-size:clamp(1.18rem, 1.05rem + .5vw, 1.4rem); line-height:1.32; font-weight:600; font-stretch:106%; letter-spacing:-.008em; text-wrap:balance}
.mv-toggle{display:none}
/* con JS, la segunda oración de la misión queda plegada dentro de su tarjeta (grilla 0fr → 1fr) */
.js .mv-mas{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease-suave)}
.js .mv-mas-in{min-height:0; overflow:hidden; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .32s}
.js .mv-mas.is-open{grid-template-rows:1fr; transition-duration:.42s}
.js .mv-mas.is-open .mv-mas-in{opacity:1; visibility:visible; transition:opacity .4s ease .06s, visibility 0s}
.js .mv-toggle{
  display:inline-flex; align-items:center; gap:.4rem; justify-self:start; min-height:2.75rem; margin-top:-.25rem; padding:0; border:0; background:none; cursor:pointer;
  color:var(--cyan-ink); font:inherit; font-family:var(--font-ui); font-weight:640; font-stretch:106%;
}
.mv-chevron{width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .32s var(--ease-suave)}
.mv-toggle[aria-expanded="true"] .mv-chevron{transform:scaleY(-1)}
@media (min-width:48em){ .mv{grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s5)} }

/* Valores y objetivos */
.nos-bloque{margin-top:clamp(3rem, 7vw, 5.5rem)}
.nos-h3{font-size:clamp(1.5rem, 1.25rem + 1vw, 2.1rem); font-weight:740; font-stretch:112%; letter-spacing:-.02em; margin-bottom:var(--s5)}
.valores{display:grid; border-top:2px solid var(--ink)}
.valor{position:relative; padding:var(--s5) 0 var(--s5) 4rem; border-bottom:1px solid var(--line-strong)}
.valor dt{font-family:var(--font-display); font-size:1.12rem; line-height:1.3; font-weight:680; font-stretch:106%}
.valor dt > svg{position:absolute; left:0; top:var(--s5)}
.valor dd{margin-top:.3rem; color:var(--muted); font-size:.98rem; line-height:1.5}
.marca{width:2.75rem; height:2.75rem; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.marca .m-c{stroke:var(--cyan); stroke-width:1.8}
.marca .m-m{stroke:var(--magenta); stroke-width:1.8}
.marca .m-y{fill:var(--yellow); stroke:var(--ink); stroke-width:1.2}
.marca .m-yl{stroke:#e2c900; stroke-width:1.8}
.marca .m-k{fill:var(--ink); stroke:none}
@media (min-width:36em) and (max-width:63.99em){
  .valores{grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--s6)}
  .valor:last-child{grid-column:1 / -1}
}
@media (min-width:64em){
  .valores{grid-template-columns:repeat(5, minmax(0,1fr)); border-bottom:1px solid var(--line-strong)}
  .valor{padding:var(--s5) var(--s5) var(--s6); border-bottom:0; border-left:1px solid var(--line-strong)}
  .valor:first-child{border-left:0; padding-left:0}
  .valor:last-child{padding-right:0}
  .valor dt > svg{position:static; display:block; margin-bottom:var(--s4)}
  .valor dd{margin-top:var(--s2)}
}

.obj{display:grid; column-gap:var(--s8)}
.obj-k{font-family:var(--font-ui); font-size:.8rem; font-weight:640; font-stretch:106%; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s3)}
.obj-general{padding-bottom:var(--s6)}
.obj-general p{font-size:clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height:1.55; max-width:36rem}
.objetivos{counter-reset:obj; border-top:2px solid var(--ink)}
.objetivos li{counter-increment:obj; display:grid; grid-template-columns:2.5rem minmax(0,1fr); column-gap:var(--s3); padding:var(--s4) 0; border-bottom:1px solid var(--line-strong)}
.objetivos li::before{
  content:counter(obj); grid-row:1 / span 2; font-family:var(--font-display); font-size:1.9rem; line-height:1; font-weight:760; font-stretch:116%;
  font-variant-numeric:tabular-nums; color:var(--ink);
  background:linear-gradient(var(--cyan),var(--cyan)) 0 100% / 1.1rem 3px no-repeat; padding-bottom:.45rem; align-self:start;
}
.objetivos li:nth-child(2)::before{background-image:linear-gradient(var(--magenta),var(--magenta))}
.objetivos li:nth-child(3)::before{background-image:linear-gradient(#e2c900,#e2c900)}
.objetivos li:nth-child(4)::before{background-image:linear-gradient(var(--ink),var(--ink))}
.objetivos strong{font-family:var(--font-display); font-size:1.12rem; line-height:1.3; font-weight:680; font-stretch:106%}
.objetivos li > span{margin-top:.25rem; color:var(--muted); font-size:.98rem; line-height:1.5; max-width:44rem}
@media (min-width:64em){
  .obj{grid-template-columns:minmax(0,4fr) minmax(0,7fr); grid-template-rows:auto 1fr}
  .obj .nos-h3{grid-column:1 / -1}
  .obj-general{padding-bottom:0}
  .objetivos li{grid-template-columns:3.25rem minmax(0,15rem) minmax(0,1fr); column-gap:var(--s5); align-items:baseline}
  .objetivos li::before{grid-row:auto}
  .objetivos li > span{margin-top:0}
}

/* Apariciones (solo con JS y sin movimiento reducido; sin JS todo está visible desde el inicio).
   Títulos de sección: las palabras suben y las tres tintas, desfasadas, entran en registro (como las planchas del paso 2).
   Listas: sus elementos entran escalonados, una sola vez. */
.rv-palabra{display:inline-block}
.registro{animation:registro 1.5s cubic-bezier(.45,0,.2,1) both}
@keyframes registro{
  0%{text-shadow:-.09em .04em 0 rgba(0,175,239,.9), .08em -.035em 0 rgba(236,38,143,.85), .035em .09em 0 rgba(242,220,0,1)}
  40%{text-shadow:-.04em .018em 0 rgba(0,175,239,.8), .035em -.015em 0 rgba(236,38,143,.75), .015em .04em 0 rgba(242,220,0,.9)}
  100%{text-shadow:0 0 0 rgba(0,175,239,0), 0 0 0 rgba(236,38,143,0), 0 0 0 rgba(242,220,0,0)}
}
[data-rv-lista].rv-espera > *{opacity:0; transform:translateY(14px)}
[data-rv-lista] > *{transition:opacity .6s ease, transform .7s var(--ease-suave)}
[data-rv-lista] > :nth-child(2){transition-delay:70ms}
[data-rv-lista] > :nth-child(3){transition-delay:140ms}
[data-rv-lista] > :nth-child(4){transition-delay:210ms}
[data-rv-lista] > :nth-child(5){transition-delay:280ms}

/* Contacto (cierre) */
.contact{position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:#fff}
.contact::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 55% 70% at 0% 100%, #000 10%, transparent 70%);
          mask-image:radial-gradient(ellipse 55% 70% at 0% 100%, #000 10%, transparent 70%);
}
.contact ::selection{background:var(--yellow); color:var(--ink)}
.contact :focus-visible{outline-color:var(--cyan)}
.contact .btn-primary{box-shadow:0 0 0 1px rgba(255,255,255,.3), 0 14px 28px -16px rgba(0,0,0,.6)}
.contact-grid{display:grid; gap:var(--s7)}
.contact h2{font-size:clamp(1.85rem, 1.2rem + 2.3vw, 2.9rem); font-stretch:112%; font-weight:760; margin-bottom:var(--s6); max-width:24ch}
.contact-item{position:relative; display:flex; gap:var(--s4); align-items:flex-start; padding:var(--s4) 0; border-bottom:1px solid rgba(255,255,255,.14)}
.contact-item:first-child{border-top:1px solid rgba(255,255,255,.14)}
.contact-item > div{min-width:0}
.contact-item .icon{width:2.6rem; height:2.6rem; padding:.6rem; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:var(--cyan); stroke-width:1.6}
.contact-k{display:block; font-size:.78rem; font-weight:620; letter-spacing:.08em; text-transform:uppercase; color:#c9c5c3; margin-bottom:.15rem}
.contact-v{display:block; font-size:1.06rem; line-height:1.45; overflow-wrap:anywhere}
.contact-item a{color:#fff; text-decoration-color:var(--cyan); text-decoration-thickness:2px; text-underline-offset:.25em}
.contact-item a:hover{color:var(--cyan)}
.contact-item .contact-v:is(a)::after{content:""; position:absolute; inset:0}
.contact-item .maps{position:relative; z-index:1; display:inline-flex; align-items:center; min-height:2.75rem; font-size:.95rem; font-weight:600}
@media (max-width:29.99em){ .contact .btn-lg{width:100%} }
@media (min-width:60em){ .contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--s8); align-items:start} }

/* Pie */
.site-footer{padding-top:clamp(2.5rem, 5vw, 3.5rem); background:#fff}
.footer-grid{display:grid; gap:var(--s5); padding-bottom:var(--s6)}
.footer-logo{width:11rem}
.footer-legal{display:grid; gap:.25rem; font-size:.95rem; color:var(--muted); max-width:34rem}
.footer-legal strong{color:var(--ink); font-weight:640}
.footer-nav{display:flex; flex-wrap:wrap; gap:0 var(--s5); font-size:.95rem; align-content:start}
.footer-nav a{
  display:inline-flex; align-items:center; min-height:2.75rem; color:var(--ink); text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 calc(50% + .8em) / 0 1px no-repeat;
  transition:background-size .4s var(--ease-suave), color .2s ease;
}
.footer-nav a:hover,.footer-nav a:focus-visible{color:var(--cyan-ink); background-size:100% 1px}
.cmyk-bar{display:flex; height:5px}
.cmyk-bar i{flex:1; background:var(--cyan)}
.cmyk-bar i:nth-child(2){background:var(--magenta)}
.cmyk-bar i:nth-child(3){background:var(--yellow)}
.cmyk-bar i:nth-child(4){background:var(--ink)}
@media (min-width:48em){
  .footer-grid{grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s7); align-items:start}
  .footer-nav{flex-direction:column}
}

/* WhatsApp flotante: solo teléfono; se oculta en el inicio, el contacto y el pie */
.wa-fab{
  position:fixed; z-index:40; right:max(1rem, env(safe-area-inset-right)); bottom:max(1rem, env(safe-area-inset-bottom));
  display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:50%;
  background:var(--azul); color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 10px 24px -8px rgba(0,58,92,.55);
  transition:opacity .2s ease, transform .25s var(--ease-out), visibility 0s linear 0s;
}
.wa-fab .icon{width:1.75rem; height:1.75rem; stroke-width:1.8}
.wa-fab:hover{background:var(--azul-hover)}
.wa-fab:active{transform:scale(.94)}
.wa-fab:focus-visible{outline-color:var(--ink)}
.js .wa-fab.is-hidden{opacity:0; transform:translateY(.75rem); visibility:hidden; transition:opacity .2s ease, transform .25s var(--ease-out), visibility 0s linear .25s}
html.menu-abierto .wa-fab{opacity:0; visibility:hidden}
html:not(.js) .site-footer{padding-bottom:5rem}
@media (min-width:48em){
  .wa-fab{display:none}
  html:not(.js) .site-footer{padding-bottom:0}
}

@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
/* movimiento reducido: sin barridos, desplazamientos ni apariciones; el color y el estado cambian igual (al instante) */
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn .icon,.wa-fab,.card,.cta-txt::after,.link-cta .icon,.footer-nav a,.hl,.site-header,
  .nav-links a,.nav-links a::after,.nav-indicador,.menu-ico i,.js .nav,.menu-velo,.mv-chevron,.js .mv-mas,.js .mv-mas-in,[data-rv-lista] > *{transition:none!important}
  .card:hover{transform:none}
  .btn:active,.menu-btn:active{transform:none}
  .registro{animation:none}
}
@media (forced-colors:active){
  .btn,.wa-fab{border:1px solid ButtonText}
  .btn::before{display:none}
}

/* ===================================================================== 2. Logo que se imprime
   (de logo/logo-construccion.css; sin JS el SVG se ve completo y quieto) */
.ml-logo{display:block; width:100%; height:auto}
html.ml-js [data-ml-construir]:not(.ml-iniciado){opacity:0; animation:ml-red-seguridad 0s linear 2.5s forwards}
@keyframes ml-red-seguridad{to{opacity:1}}
.ml-anim{overflow:visible}
.ml-marcas{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  html.ml-js [data-ml-construir]:not(.ml-iniciado){opacity:1; animation:none}
}

/* ===================================================================== 3. Escenas (de escenas/escenas.css, sin cambios)
   Sin JS (sin la clase .js en <html>): la historia es una figura estática con sus pasos en lista.
   Con JS: sección alta con escena fija y un paso a la vez. */
.esc-historia{position:relative; --esc-top:0px}
.esc-historia__escena{display:grid; gap:1.5rem; padding:clamp(2.5rem, 7vw, 4.5rem) var(--esc-gutter, clamp(1rem, 4vw, 2.5rem))}
.esc-historia__fig > img,.esc-historia__fig > svg{display:block; width:100%; height:auto}
.esc-historia__pasos{margin:0; padding:0; list-style:none; display:grid; gap:1rem}
.esc-historia__pasos h3{margin:0; font-size:clamp(1.4rem, 1rem + 1.3vw, 2.2rem); line-height:1.08; font-weight:720; font-stretch:110%; letter-spacing:-.015em; text-wrap:balance}
.esc-acciones{display:flex; flex-wrap:wrap; gap:.75rem; margin:1.25rem 0 0}
.esc-historia__riel,.esc-historia__marcas{display:none}

.js .esc-historia{height:calc(5 * 90svh + 10svh)}
.js .esc-historia__escena{
  position:sticky; top:var(--esc-top); height:calc(100svh - var(--esc-top));
  grid-template-rows:minmax(0, 1fr) auto; gap:0; align-content:stretch; overflow:hidden;
  padding-block:0;
}
.js .esc-historia__fig{position:relative; min-height:0; grid-row:1;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent)}
.js .esc-historia__fig > img,.js .esc-historia__fig > svg{position:absolute; inset:0; height:100%; object-fit:contain}
.js .esc-historia__texto{grid-row:2; padding:.75rem 0 max(1.25rem, env(safe-area-inset-bottom))}
.js .esc-historia__pasos{display:grid}
.js .esc-historia__pasos > li{grid-area:1 / 1; opacity:0; pointer-events:none; transition:opacity .35s ease}
.js .esc-historia__pasos > li.on{opacity:1; pointer-events:auto}
.js .esc-historia__riel{display:flex; gap:6px; margin-bottom:1rem}
.esc-historia__riel > i{width:22px; height:3px; border-radius:2px; background:var(--mc-lo, #d3cfc8); transition:background-color .3s ease}
.esc-historia__riel > i.on{background:var(--mc-ink, #373435)}
.esc-historia__riel > i.on:not(:has(~ i.on)){background:var(--mc-c, #00afef)}
.js .esc-historia__marcas{display:block; position:absolute; inset:0; pointer-events:none}
.esc-historia__marcas > span{position:absolute; left:0; width:1px; height:20%}
.esc-historia__marcas > span:nth-child(1){top:0}
.esc-historia__marcas > span:nth-child(2){top:20%}
.esc-historia__marcas > span:nth-child(3){top:40%}
.esc-historia__marcas > span:nth-child(4){top:60%}
.esc-historia__marcas > span:nth-child(5){top:80%}

@media (min-width:60em){
  .js .esc-historia{height:500svh}
  .js .esc-historia__escena{grid-template-columns:minmax(0, 1fr) minmax(0, 2.15fr); grid-template-rows:minmax(0, 1fr); gap:clamp(1.5rem, 3vw, 3rem); align-items:center;
    padding-left:max(var(--esc-gutter, 2.5rem), calc((100% - var(--esc-wrap, 76rem)) / 2 + var(--esc-gutter, 2.5rem))); padding-right:0}
  .js .esc-historia__fig{grid-column:2; grid-row:1; height:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, #000 12%), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-composite:intersect}
  .js .esc-historia__texto{grid-column:1; grid-row:1; padding:0}
}

.esc-micro{display:block}
.esc-micro > img,.esc-micro > svg{display:block; width:100%; height:auto}
.esc-micro--caja{aspect-ratio:var(--esc-ar, 4 / 3)}
.esc-micro--caja > img,.esc-micro--caja > svg{height:100%; object-fit:contain}

.mc [data-a="rot"].on > path:first-child{stroke-width:2.8}
.mc .off .zh{stroke:var(--mc-mid, #9c9794); stroke-width:.9}
@media (prefers-reduced-motion:reduce){
  .js .esc-historia__pasos > li,.esc-historia__riel > i{transition:none}
}