/* ============================================================
   SISTEMA V3 "PÓSTER TÉCNICO" — Milimétrica
   Compartido por las páginas propuesta-*-v3.html
   (el Home V3 mantiene su copia inline aprobada)
   ============================================================ */

:root{
  --crema:    #F5E4D7;
  --mostaza:  #E9C531;
  --mostaza-suave: #EFD873;
  --grad-navy: linear-gradient(165deg, #062E4B 0%, #1F4E79 82%, #004D81 100%);
}

[x-cloak]{display:none!important;}

/* ---------- Tipografía display ---------- */
.display-xl{
  font-family:var(--font-marca);
  font-weight:700; text-transform:uppercase;
  line-height:0.92; letter-spacing:0.005em;
  color:var(--color-noche);
}
.display-outline{
  color:transparent;
  -webkit-text-stroke:2px var(--color-coral);
}

/* ---------- Grilla milimetrada ---------- */
.mm-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(31,78,121,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,78,121,0.10) 1px, transparent 1px),
    linear-gradient(rgba(31,78,121,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,78,121,0.05) 1px, transparent 1px);
  background-size: 90px 90px, 90px 90px, 18px 18px, 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 30% 15%, black 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 85% at 30% 15%, black 25%, transparent 75%);
}
.mm-grid--dark{
  background-image:
    linear-gradient(rgba(140,204,206,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,204,206,0.08) 1px, transparent 1px);
  background-size: 90px 90px, 90px 90px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 85% 10%, black 20%, transparent 70%);
          mask-image: radial-gradient(ellipse 80% 90% at 85% 10%, black 20%, transparent 70%);
}

/* ---------- Textura de puntos (papel de moldería) ---------- */
.mm-dots{
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(31,78,121,0.14) 1px, transparent 1.4px);
  background-size: 16px 16px;
}

/* ---------- Divisor regla ---------- */
.regla{
  height:14px; width:180px;
  background-image:
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 10px),
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 40px);
  background-size:100% 7px, 100% 14px;
  background-position:bottom left, bottom left;
  background-repeat:no-repeat;
  color:var(--color-coral);
}
.regla--navy{color:var(--color-navy);}
.regla--teal{color:var(--color-teal);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--easing), transform .7s var(--easing);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.1s;}
.reveal[data-d="2"]{transition-delay:.22s;}
.reveal[data-d="3"]{transition-delay:.34s;}

/* ---------- Etiqueta de sección (label sólido con sombra dura) ---------- */
.label-tag{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--color-noche); color:var(--crema);
  font-family:var(--font-marca); font-weight:600; font-size:13px;
  letter-spacing:0.22em; text-transform:uppercase;
  padding:8px 18px; border-radius:2px;
  box-shadow:3px 3px 0 var(--color-coral);
}

/* ---------- Chips (anclas / servicios) ---------- */
.hero-chip-v3{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1.5px solid var(--color-noche);
  border-radius:3px; padding:8px 15px;
  font-family:var(--font-titulo); font-weight:600; font-size:13.5px;
  color:var(--color-noche); text-decoration:none;
  box-shadow:3px 3px 0 rgba(6,46,75,0.16);
  transition:transform .25s var(--easing), box-shadow .25s var(--easing);
}
.hero-chip-v3 .dotc{width:9px; height:9px; border-radius:2px; flex:none;}
.hero-chip-v3:hover{transform:translate(-1px,-2px); box-shadow:4px 5px 0 var(--color-coral);}
.hero-chip-v3:focus-visible{outline:2px solid var(--color-coral); outline-offset:3px;}

/* ---------- Marcos de plano técnico ---------- */
.marco-tec{position:relative;}
.marco-tec::after{
  content:''; position:absolute; inset:5px; pointer-events:none; opacity:.75;
  background:
    linear-gradient(var(--color-teal),var(--color-teal)) left top/13px 2px,
    linear-gradient(var(--color-teal),var(--color-teal)) left top/2px 13px,
    linear-gradient(var(--color-teal),var(--color-teal)) right top/13px 2px,
    linear-gradient(var(--color-teal),var(--color-teal)) right top/2px 13px,
    linear-gradient(var(--color-teal),var(--color-teal)) left bottom/13px 2px,
    linear-gradient(var(--color-teal),var(--color-teal)) left bottom/2px 13px,
    linear-gradient(var(--color-teal),var(--color-teal)) right bottom/13px 2px,
    linear-gradient(var(--color-teal),var(--color-teal)) right bottom/2px 13px;
  background-repeat:no-repeat;
}
.etag{
  position:absolute; top:8px; right:12px;
  font-family:'Consolas',ui-monospace,monospace; font-size:9.5px;
  letter-spacing:0.12em; color:var(--color-acento); opacity:.8;
}

/* ---------- Page header V3 ---------- */
.page-header-v3{
  background:var(--color-lino); position:relative; overflow:hidden;
  padding:56px 0 60px;
}
.page-header-v3 h1{
  font-family:var(--font-marca); font-weight:700; text-transform:uppercase;
  font-size:clamp(38px,5.2vw,72px); line-height:0.94; letter-spacing:0.005em;
  color:var(--color-noche); margin:18px 0 14px;
}
.page-header-v3 h1 em{font-style:normal; color:var(--color-coral);}
.page-header-v3 .sub-italic{font-size:17px; color:#52606b; font-style:italic; margin:0 0 14px;}
.page-header-v3 .lead-v3p{font-size:16px; color:#3a4a5c; line-height:1.7; max-width:680px; margin:0;}

/* ---------- Bloques de servicio (página Servicios) ---------- */
.spanel{
  border-radius:8px; position:relative; overflow:hidden;
  min-height:340px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(6,46,75,0.10);
}
.spanel img.asset{max-width:72%; max-height:78%; position:relative; z-index:1;
  filter:drop-shadow(8px 10px 0 rgba(6,46,75,0.18));}
.spanel--navy{background:var(--color-navy);}
.spanel--crema{background:var(--crema);}
.spanel--teal{background:var(--color-teal);}
.spanel .spanel-tag{
  position:absolute; top:14px; left:16px; z-index:2;
  font-family:'Consolas',ui-monospace,monospace; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase;
  background:rgba(255,255,255,0.9); color:var(--color-noche);
  padding:5px 10px; border-radius:2px;
}
.foto-marco{
  border:3px solid #fff; border-radius:6px; overflow:hidden;
  box-shadow:6px 8px 0 rgba(6,46,75,0.18);
  transform:rotate(-1.2deg); margin-top:22px;
}
.foto-marco img{display:block; width:100%; height:auto;}

.sv-h2{
  font-family:var(--font-marca); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,3.6vw,48px); line-height:0.95; color:var(--color-noche);
  margin:14px 0 16px;
}
.sv-lead{font-size:16px; line-height:1.75; color:#3a4a5c; margin:0 0 26px; max-width:60ch;}

.check-box{
  background:#fff; border:1px solid rgba(6,46,75,0.09); border-radius:8px;
  padding:26px 26px 22px;
}
.check-box .cb-title{
  font-family:var(--font-marca); font-weight:700; font-size:17px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--color-coral);
  margin-bottom:16px;
}
.check-box ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
.check-box li{display:flex; gap:11px; font-size:14.5px; line-height:1.6; color:#3a4a5c;}
.check-box li svg{flex:none; width:17px; height:17px; color:var(--color-teal); margin-top:3px;}
.check-box .fmt{
  font-family:'Consolas',ui-monospace,monospace; font-size:12.5px;
  background:var(--color-celeste); color:var(--color-navy);
  padding:1px 6px; border-radius:3px;
}
.check-box p{font-size:14.5px; line-height:1.7; color:#3a4a5c; margin:0;}

.nota-tec{
  background:var(--crema); border-radius:6px; padding:20px 24px;
  font-size:14px; line-height:1.7; color:#3a4a5c;
  box-shadow:4px 4px 0 rgba(224,120,86,0.55);
}

/* ---------- Escalado (banda crema) ---------- */
.escalado-v3{
  display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;
  background:var(--crema); border:0.5px solid rgba(6,46,75,0.1);
  border-left:4px solid var(--color-coral);
  border-radius:8px; padding:30px 34px;
  box-shadow:var(--shadow-navy);
}
.escalado-v3 .molde-mini{height:150px; width:auto;}
@media (max-width:768px){
  .escalado-v3{grid-template-columns:1fr; gap:16px;}
}

/* ---------- CTA final navy gigante ---------- */
.cta-v3{background:var(--color-noche); position:relative; overflow:hidden;}
.cta-v3 .glow{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 120%, rgba(224,120,86,0.22), transparent 55%),
    radial-gradient(circle at 12% -20%, rgba(140,204,206,0.12), transparent 50%);}
.cta-v3 h2{
  font-family:var(--font-marca); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,4.8vw,68px); line-height:0.94; color:#fff; margin:0 0 22px;
}
.cta-v3 h2 em{
  font-style:normal; color:transparent;
  -webkit-text-stroke:2px var(--color-coral);
}

/* ---------- File tags ---------- */
.file-tag{
  font-family:'Consolas',ui-monospace,monospace; font-size:12px;
  background:var(--crema); color:var(--color-noche);
  border-radius:2px; padding:7px 12px; position:relative;
  box-shadow:2px 3px 0 rgba(224,120,86,0.9);
  transition:transform .25s var(--easing), box-shadow .25s var(--easing);
  cursor:default;
}
.file-tag:hover{transform:translateY(-3px) rotate(-1.5deg); box-shadow:3px 5px 0 var(--color-coral);}

/* ---------- Banner de propuesta ---------- */
.banner-v3{
  background:var(--color-noche); color:var(--crema); text-align:center;
  font-family:var(--font-marca); font-size:12px; letter-spacing:0.2em;
  text-transform:uppercase; padding:7px 12px;
}
.banner-v3 a{color:var(--color-teal);}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}