/* ==========================================================================
   Pagina publica de MASC24h

   Trasladado de docs/maquetas/Home_MASC24h_v0_4.html sin retocar el diseno.
   Los dos unicos cambios estan en la plantilla, no aqui: desaparece el enlace
   «Acceder» del menu y «Crear cuenta» pasa a «Acceso usuarios», apuntando a la
   zona de clientes.
   ========================================================================== */

/* ==========================================================================
   MASC24h · home pública · maqueta v0.2 · con el logotipo real
   Paleta heredada de las maquetas del BackOffice y del asistente de pedido:
   los cuatro colores salen del logotipo: azul #012060, lavanda #D8D7E5,
   naranja del sobre #C06A31 y lacre #B01410. Reparto de significados:
     · azul     — estructura y acción
     · lavanda  — superficies y apoyo
     · naranja  — lo que va mal (la inadmisión). Es el filete del sobre.
     · lacre    — SOLO el sello. En esta casa el lacre significa «sellado»,
                  no «error»; por eso el aviso de inadmisión va en naranja.
   El único color ajeno al logotipo es el papel cálido del documento, que
   separa a propósito lo que es pantalla de lo que es prueba en papel.
   ========================================================================== */
:root{
  --navy:#012060; --navy-2:#3A4C7E; --navy-3:#0A2E78;
  --lav:#D8D7E5; --lacre:#B01410; --naranja:#C06A31;
  --canvas:#E9EAEE; --surface:#FFFFFF; --sunk:#F3F4F7;
  --papel:#FBF9F4; --papel-rule:#E2DDD0; --sepia:#6B6152;
  --ink:#1D2333; --muted:#6E7484; --faint:#9AA0AE;
  --rule:#D2D5DE; --rule-soft:#E4E6EC;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --pad:clamp(18px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}

/* ---------- tipografía base ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(34px,5.2vw,60px);line-height:1.08}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.14}
h3{font-size:19px;line-height:1.3}
p{margin:0}
.eyebrow{
  font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-2);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55}
.sec .eyebrow::before,.alerta .eyebrow::before{background:var(--naranja);opacity:1;height:2px}

/* ---------- cabecera ---------- */
header.top{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
header.top .wrap{display:flex;align-items:center;gap:26px;height:74px}
.logo{display:flex;align-items:center;gap:13px;text-decoration:none}
.logo .pal{height:24px;width:auto}
.logo .iso{height:52px;width:auto}
nav.main{margin-left:auto;display:flex;align-items:center;gap:26px}
nav.main a{
  color:var(--navy);text-decoration:none;font-size:14.5px;
  padding:6px 0;border-bottom:1px solid transparent;
}
nav.main a:hover{border-bottom-color:var(--naranja)}
nav.main a.acceso{color:var(--navy);font-weight:500}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:500 14.5px/1 var(--sans);text-decoration:none;cursor:pointer;
  padding:13px 20px;border-radius:3px;border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn.primary{background:#fff;color:var(--navy);border-color:#fff}
.btn.primary:hover{background:var(--lav);border-color:var(--lav)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(216,215,229,.45)}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn.solid{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.solid:hover{background:var(--navy-3)}
.btn.line{background:transparent;color:var(--navy);border-color:var(--rule)}
.btn.line:hover{border-color:var(--navy-2);background:var(--sunk)}
.btn.sm{padding:9px 15px;font-size:13.5px}
a:focus-visible,button:focus-visible{outline:2px solid var(--navy-2);outline-offset:2px}
.cierre a:focus-visible,.hero a:focus-visible{outline-color:var(--lav)}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(216,215,229,.18);
}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,5vw,66px);align-items:center;padding-top:clamp(46px,7vw,88px);padding-bottom:clamp(46px,7vw,88px);
}
.hero .eyebrow{color:var(--lav);opacity:.9}
.hero h1{margin:20px 0 0;color:#fff}
.hero h1 em{font-style:italic;color:var(--lav)}
.hero .lede{margin-top:20px;font-size:17.5px;line-height:1.62;color:var(--lav);max-width:48ch}
.hero .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .letra-chica{margin-top:16px;font-size:13.5px;color:rgba(216,215,229,.75)}

/* ---------- el documento (elemento firma) ----------
   Detrás del papel asoma la pila de hojas del logotipo: mismo filete, mismo
   escalonado. Es el único adorno de la página y viene de la propia marca. */
.doc-caja{position:relative}
.hoja{
  position:absolute;left:0;right:0;top:0;bottom:0;border-radius:2px;
  border:1px solid rgba(216,215,229,.5);pointer-events:none;
}
.hoja.h1{transform:translate(-15px,-13px)}
.hoja.h2{transform:translate(-30px,-26px);border-color:rgba(216,215,229,.3)}

.doc{
  background:var(--papel);color:var(--ink);border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 18px 44px -18px rgba(0,0,0,.55);
  padding:26px 28px 22px;position:relative;
}
.doc::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--navy);
}
.doc .cab{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:1px solid var(--papel-rule);padding-bottom:12px;
}
.doc .cab h3{font-size:15.5px;letter-spacing:0;line-height:1.25;max-width:22ch}
.doc .cab code{font:400 10.5px/1 var(--mono);color:var(--sepia);letter-spacing:.04em;white-space:nowrap}
.doc dl{display:grid;grid-template-columns:104px 1fr;gap:3px 14px;margin:14px 0 0;font-size:13px}
.doc dt{color:var(--sepia)}
.doc dd{margin:0;color:var(--ink)}
.doc .hitos{margin-top:18px;border-top:1px solid var(--papel-rule);padding-top:14px}
.doc .hitos p.et{font:500 10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--sepia);margin-bottom:11px}
.hito{display:grid;grid-template-columns:14px 112px 1fr;gap:11px;align-items:baseline;padding:5px 0;font-size:13px}
.hito time{font:400 11.5px/1.4 var(--mono);color:var(--sepia)}
.hito .punto{width:7px;height:7px;border-radius:50%;background:var(--navy);margin-top:5px}
.hito.pdte .punto{background:transparent;border:1px solid var(--faint)}
.hito.pdte span,.hito.pdte time{color:var(--faint)}
.doc .pie{
  margin-top:16px;border-top:1px solid var(--papel-rule);padding-top:13px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.doc .pie small{font-size:11.5px;color:var(--sepia);line-height:1.45;max-width:30ch}
.sello{width:74px;height:auto;flex:none;margin:-6px -4px -10px 0;
  filter:drop-shadow(0 2px 3px rgba(120,20,14,.28))}
/* animación de entrada */
.anim .hito,.anim .sello{opacity:0}
.anim.on .hito{animation:sube .5s ease forwards}
.anim.on .hito:nth-child(2){animation-delay:.15s}
.anim.on .hito:nth-child(3){animation-delay:.45s}
.anim.on .hito:nth-child(4){animation-delay:.75s}
.anim.on .hito:nth-child(5){animation-delay:1.05s}
.anim.on .sello{animation:sella .55s cubic-bezier(.2,.9,.3,1.2) 1.35s forwards}
@keyframes sube{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sella{from{opacity:0;transform:scale(1.5) rotate(-14deg)}to{opacity:1;transform:none}}

/* ---------- franja de la inadmisión (único uso del lacre) ---------- */
.alerta{background:var(--surface);border-bottom:1px solid var(--rule-soft)}
.alerta .wrap{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,34px);
  align-items:center;padding-top:34px;padding-bottom:34px;
}
.alerta{position:relative}
.alerta .marca{
  font-family:var(--serif);font-size:clamp(30px,4vw,46px);line-height:1;color:var(--naranja);
  border-left:3px solid var(--naranja);padding-left:16px;
}
.alerta p{font-size:16px;color:var(--muted);max-width:72ch}
.alerta p b{color:var(--ink);font-weight:600}
.alerta cite{display:block;margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--faint);font-style:normal}

/* ---------- secciones ---------- */
.sec{padding:clamp(56px,8vw,104px) 0;scroll-margin-top:80px}
.sec.gris{background:var(--canvas)}
.sec .intro{max-width:62ch}
.sec .intro h2{margin:16px 0 0}
.sec .intro p.txt{margin-top:16px;font-size:17px;color:var(--muted)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.vis{opacity:1;transform:none}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);margin-top:44px;border:1px solid var(--rule)}
.paso{background:var(--surface);padding:26px 22px 28px}
.sec.gris .paso{background:var(--surface)}
.paso .n{font:500 11.5px/1 var(--mono);letter-spacing:.1em;color:var(--navy-2)}
.paso h3{margin:14px 0 9px;font-size:18px}
.paso p{font-size:14.5px;color:var(--muted)}

/* entregables */
.entregas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:44px}
.entrega{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:24px 24px 26px;display:flex;gap:18px}
.entrega .ico{flex:none;width:34px;height:34px;color:var(--navy)}
.entrega h3{font-size:17px;margin-bottom:8px}
.entrega p{font-size:14.5px;color:var(--muted)}
.entrega p code{font:400 12.5px/1 var(--mono);color:var(--navy-2);background:var(--sunk);padding:2px 5px;border-radius:2px}

/* bloque a dos columnas */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:start}
.duo .aparte{
  border-left:2px solid var(--lav);padding-left:22px;font-family:var(--serif);
  font-size:20px;line-height:1.45;color:var(--navy);
}
.duo .aparte span{display:block;margin-top:12px;font:400 12.5px/1.5 var(--mono);color:var(--muted)}
.lista{margin:22px 0 0;padding:0;list-style:none}
.lista li{padding:13px 0;border-top:1px solid var(--rule);font-size:15.5px;color:var(--muted)}
.lista li:first-child{border-top:0;padding-top:0}
.lista li b{color:var(--ink);font-weight:600;display:block;font-size:16px;margin-bottom:3px}

/* límites */
.limites{background:var(--sunk);border:1px solid var(--rule);border-radius:3px;padding:clamp(24px,4vw,38px)}
.limites h3{font-size:20px}
.limites ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.limites li{display:grid;grid-template-columns:16px 1fr;gap:12px;font-size:15px;color:var(--muted)}
.limites li::before{content:"—";color:var(--faint);font-family:var(--mono);font-size:13px;line-height:1.6}

/* precio */
.precio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:center}
.tarifa{background:var(--surface);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.tarifa .fila{display:flex;justify-content:space-between;gap:16px;padding:15px 22px;border-top:1px solid var(--rule-soft);font-size:15px}
.tarifa .fila:first-child{border-top:0}
.tarifa .fila span{color:var(--muted)}
.tarifa .fila b{font-weight:500;font-family:var(--mono);font-size:14px}
.tarifa .fila.total{background:var(--navy);color:#fff}
.tarifa .fila.total span{color:var(--lav)}
.tarifa .fila.total b{color:#fff;font-size:15px}
.pdte{color:var(--faint);font-style:italic;font-family:var(--sans);font-size:13.5px}

/* faq */
.faq{margin-top:40px;border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule)}
details summary{
  cursor:pointer;list-style:none;padding:19px 0;display:flex;gap:16px;align-items:baseline;
  font-family:var(--serif);font-size:19px;color:var(--ink);
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";margin-left:auto;color:var(--navy-2);font-family:var(--mono);font-size:17px}
details[open] summary::after{content:"–"}
details p{padding:0 0 20px;max-width:76ch;color:var(--muted);font-size:15.5px}

/* cierre */
.cierre{background:var(--navy);color:#fff;text-align:center}
.cierre .wrap{padding-top:clamp(52px,7vw,92px);padding-bottom:clamp(52px,7vw,92px)}
.cierre h2{color:#fff;max-width:20ch;margin:18px auto 0}
.cierre p{color:var(--lav);margin:18px auto 0;max-width:56ch;font-size:16.5px}
.cierre .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cierre .eyebrow{color:var(--lav)}
.cierre .eyebrow::after{content:"";width:22px;height:1px;background:currentColor;opacity:.55}

/* pie */
footer.pie{background:var(--sunk);color:var(--muted);font-size:14px;border-top:1px solid var(--rule)}
footer.pie .wrap{padding-top:52px;padding-bottom:34px}
.pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
footer.pie h4{margin:0 0 14px;font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
footer.pie a{display:block;color:var(--navy);text-decoration:none;padding:5px 0}
footer.pie a:hover{text-decoration:underline;text-decoration-color:var(--naranja);text-underline-offset:3px}
footer.pie .nota{margin-top:18px;line-height:1.6;max-width:44ch;font-size:13.5px}
.pie-logo{display:block;width:max-content;margin-bottom:6px}
.pie-logo img{display:block}
.pie-logo .iso{height:62px;margin-left:-8px}
.pie-logo .pal{height:26px;margin-top:8px}
.pie-fin{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:12.5px;color:var(--faint);
}


/* ---------- la cadena · quién hace cada cosa ---------- */
.cadena{background:var(--sunk);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.cadena-flujo{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.cadena-flujo li{background:var(--surface);padding:25px 22px 27px;position:relative}
.cadena-flujo .rol{
  font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-2);margin:0;
}
.cadena-flujo h3{margin:13px 0 9px;font-size:19px}
.cadena-flujo .txt{font-size:14.5px;color:var(--muted);margin:0}
/* el eslabón que ejecuta y certifica se marca en papel: en esta casa el papel es la prueba */
.cadena-flujo li.destacado{background:var(--papel)}
.cadena-flujo li.destacado::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--navy)}
.cadena-flujo li.destacado .rol{color:var(--sepia)}
.cadena-flujo li.destacado .txt{color:var(--sepia)}

.apamara{
  margin-top:30px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);align-items:start;
  background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:clamp(24px,4vw,38px);
}
.apamara h3{font-size:21px}
.apamara p{color:var(--muted);font-size:15.5px;margin:15px 0 0}
.apamara p b{color:var(--ink);font-weight:600}
.apamara .ficha{background:var(--papel);border:1px solid var(--papel-rule);border-radius:3px;padding:20px 22px 22px}
.apamara .ficha h4{margin:0;font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--sepia)}
.apamara .ficha dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 16px;margin:14px 0 0;font-size:13.5px}
.apamara .ficha dt{font:400 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sepia);padding-top:2px}
.apamara .ficha dd{margin:0;color:var(--ink);line-height:1.5}


/* ---------- segmentos · para quién ---------- */
.segmentos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:44px;
}
.seg{
  background:var(--surface);padding:26px 24px 24px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:background .2s ease;
}
.seg:hover{background:var(--papel)}
.seg h3{font-size:19px;margin:0 0 9px}
.seg p{font-size:14.5px;color:var(--muted);margin:0 0 20px;flex:1}
.seg .ir{font:500 12.5px/1 var(--mono);letter-spacing:.05em;color:var(--navy-2);display:inline-flex;gap:8px;align-items:center}
.seg .ir::after{content:"\2192"}
.seg:hover .ir{color:var(--navy)}
.seg-nota{margin-top:22px;font:400 13px/1.6 var(--mono);color:var(--faint)}
.seg-nota b{color:var(--navy-2);font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .duo,.precio,.apamara{grid-template-columns:1fr}
  .cadena-flujo,.segmentos{grid-template-columns:repeat(2,1fr)}
  .pie-grid{grid-template-columns:1fr 1fr}
  nav.main a:not(.acceso):not(.btn){display:none}
}
@media (max-width:620px){
  .pasos,.entregas,.cadena-flujo,.segmentos{grid-template-columns:1fr}
  .alerta .wrap{grid-template-columns:1fr}
  header.top .wrap{height:64px;gap:14px}
  .logo .iso{height:42px}.logo .pal{height:20px}
  .doc dl{grid-template-columns:1fr;gap:0 0}
  .doc dt{margin-top:8px}
  .hito{grid-template-columns:14px 1fr;row-gap:2px}
  .hito time{grid-column:2}
  .pie-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .anim .hito,.anim .sello{opacity:1}
}