/* ==========================================================================
   Veridia · hoja de estilos única
   Paleta de marca: Ink Blue #16233A · Sage Green #9DB3A2 · Bone #F4F1EA
                    Graphite #3A3F47
   Contrastes verificados sobre Bone: ink 14,2:1 · graphite 9,3:1
                                      sage-deep 6,4:1 · sage 2,0:1 (NO texto)
   ========================================================================== */

:root{
  /* ---- marca ---- */
  --ink:#16233A;
  --ink-hover:#0D1626;
  --graphite:#3A3F47;
  --bone:#F4F1EA;
  --sage:#9DB3A2;
  --sage-deep:#3F5E4C;
  --sage-tint:#E7EEE9;
  --surface:#FFFFFF;
  --surface-sunk:#EFEBE2;
  --line:#DDD6C9;
  --line-strong:#C3B9A6;
  --muted:#5E6570;

  /* ---- semánticos ---- */
  --ok:#1F6F43;
  --warn:#8A5A00;
  --risk:#96261F;
  --risk-tint:#FBEDEB;

  /* ---- escala de espaciado (base 4) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* ---- medida y radios ---- */
  --measure:66ch;
  --rail:1px;
  --r-btn:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* ---------- tipografía ---------- */
h1,h2,h3,h4,.wordmark,.stat{
  font-family:Outfit,"IBM Plex Sans",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-0.015em;
}
h1{font-size:clamp(30px,4.6vw,46px); line-height:1.1; margin:0 0 var(--s5)}
h2{font-size:clamp(23px,3vw,31px); line-height:1.18; margin:var(--s8) 0 var(--s4)}
h3{font-size:19px; line-height:1.3; margin:var(--s6) 0 var(--s3)}
h4{font-size:17px; line-height:1.35; margin:var(--s5) 0 var(--s2)}
p,li,dd,dt,td,th{max-width:var(--measure)}
p{margin:0 0 var(--s4)}
strong{font-weight:600}
small{font-size:14px; color:var(--graphite)}
.lede{font-size:20px; line-height:1.55; color:var(--graphite); max-width:60ch}
.note{font-size:15px; color:var(--graphite)}

a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--sage-deep)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

hr{border:0; border-top:1px solid var(--line); margin:var(--s7) 0}

/* ---------- estructura ---------- */
.skip{position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:#fff; padding:var(--s3) var(--s4); text-decoration:none}
.skip:focus{left:var(--s4); top:var(--s4)}

.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 var(--s5)}
.col{max-width:820px}

/* ---------- cabecera ---------- */
.head{background:var(--surface); border-bottom:1px solid var(--line)}
.head .wrap{display:flex; align-items:center; gap:var(--s5); min-height:70px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  flex:0 0 auto; min-height:44px}
.logo svg{width:26px; height:26px; display:block}
.wordmark{font-size:23px; line-height:1; letter-spacing:-0.02em}
.logo:hover{color:var(--ink)}

.nav{margin-left:auto; display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap}
.nav a{font-size:15.5px; text-decoration:none; color:var(--graphite);
  display:inline-flex; align-items:center; min-height:44px; padding:0 2px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.lang{display:flex; gap:var(--s2); align-items:center; padding-left:var(--s4); border-left:1px solid var(--line)}
.lang a{font-size:14px; min-width:44px; min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; border:1px solid var(--line);
  border-radius:var(--r-btn); color:var(--graphite)}
.lang a[aria-current="true"]{background:var(--ink); border-color:var(--ink); color:#fff; text-decoration:none}

@media (max-width:860px){
  .head .wrap{min-height:auto; padding-top:var(--s3); padding-bottom:var(--s3)}
  .nav{margin-left:0; width:100%; gap:var(--s2) var(--s4); font-size:15px; flex-wrap:wrap}
  .lang{margin-left:auto; padding-left:0; border-left:0}
}

/* ---------- portada ---------- */
.hero{padding:var(--s8) 0 var(--s7); border-bottom:1px solid var(--line)}
.hero .kicker{font-size:15px; color:var(--sage-deep); margin:0 0 var(--s3); font-weight:600}

/* registro de pruebas: el elemento con más peso visual del sitio */
.ledger{border:1px solid var(--ink); background:var(--surface); margin:var(--s6) 0}
.ledger-head{
  background:var(--ink); color:#fff; padding:var(--s3) var(--s4);
  font-family:Outfit,sans-serif; font-weight:600; font-size:16px;
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap
}
.ledger-head span{color:var(--sage); font-weight:400; font-size:14px; font-family:"IBM Plex Sans",sans-serif}
.ledger ol{list-style:none; counter-reset:led; margin:0; padding:0}
.ledger li{
  counter-increment:led; display:grid;
  grid-template-columns:34px minmax(0,1fr) minmax(0,150px);
  gap:var(--s4); padding:var(--s4);
  border-top:1px solid var(--line); align-items:baseline
}
.ledger li:first-child{border-top:0}
.ledger li::before{
  content:counter(led,decimal-leading-zero);
  font-family:Outfit,sans-serif; font-weight:600; color:var(--sage-deep); font-size:15px
}
.ledger li p{margin:0; max-width:none}
.ledger li .when{font-size:14.5px; color:var(--graphite); max-width:none}
@media (max-width:700px){
  .ledger li{grid-template-columns:30px minmax(0,1fr); gap:var(--s3)}
  .ledger li .when{grid-column:2; color:var(--sage-deep)}
}

/* ---------- secciones ---------- */
section{padding:var(--s7) 0}
section + section{border-top:1px solid var(--line)}
section > .wrap > :first-child{margin-top:0}
section.sunk{background:var(--surface-sunk)}
section.dark{background:var(--ink); color:var(--bone)}
section.dark h2,section.dark h3{color:#fff}
section.dark a{color:var(--sage)}
section.dark .lede,section.dark .note{color:#C9D2D9}

/* ---------- listas ---------- */
.plain{list-style:none; padding:0; margin:0 0 var(--s4)}
.plain > li{position:relative; padding-left:var(--s5); margin-bottom:var(--s3)}
.plain > li::before{content:""; position:absolute; left:0; top:12px; width:9px; height:1px; background:var(--line-strong)}
section.dark .plain > li::before{background:var(--sage)}

.checks{list-style:none; padding:0; margin:0 0 var(--s4)}
.checks > li{position:relative; padding-left:28px; margin-bottom:var(--s3)}
.checks > li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:8px;
  border-left:2px solid var(--sage-deep); border-bottom:2px solid var(--sage-deep);
  transform:rotate(-45deg)
}

/* ---------- bloques ---------- */
.frame{background:var(--sage-tint); border-left:3px solid var(--sage-deep); padding:var(--s5); margin:var(--s5) 0}
.frame > :last-child{margin-bottom:0}

.limits{background:var(--surface); border:1px solid var(--line-strong); padding:var(--s5); margin:var(--s5) 0}
.limits > :first-child{margin-top:0}
.limits > :last-child{margin-bottom:0}

.legal{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--s4) 0; margin:var(--s5) 0}
.legal cite{display:block; font-style:normal; font-weight:600; font-size:15px; color:var(--sage-deep); margin-bottom:var(--s2)}
.legal p{margin:0; font-size:16px}

.grid{display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr)); margin:var(--s5) 0}
.grid > * > :first-child{margin-top:0}
.cell{border-top:2px solid var(--ink); padding-top:var(--s4)}
.cell h3{margin-top:0}
.cell p:last-child{margin-bottom:0}
.cell p,.cell li{max-width:none}

/* ---------- tablas ---------- */
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--s5) 0}
table{border-collapse:collapse; width:100%; font-size:16px; background:var(--surface)}
caption{text-align:left; font-size:14.5px; color:var(--graphite); padding:0 0 var(--s2)}
th,td{text-align:left; padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); vertical-align:top; max-width:none}
thead th{font-family:Outfit,sans-serif; font-size:15px; font-weight:600; border-bottom:1px solid var(--ink)}
tbody tr:last-child td{border-bottom:0}
td.yes{color:var(--ok); font-weight:600; white-space:nowrap}
td.no{color:var(--risk); font-weight:600; white-space:nowrap}
td.num{white-space:nowrap}

/* ---------- pasos ---------- */
.steps{list-style:none; counter-reset:st; padding:0; margin:var(--s5) 0 0}
.steps > li{counter-increment:st; position:relative; padding:0 0 var(--s6) 54px; max-width:var(--measure)}
.steps > li::before{
  content:counter(st); position:absolute; left:0; top:-2px;
  width:34px; height:34px; border:1px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:Outfit,sans-serif; font-weight:600; font-size:15px; background:var(--surface)
}
.steps h3{margin:0 0 var(--s2)}
.steps p:last-child{margin-bottom:0}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:var(--s3) var(--s6);
  background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:var(--r-btn);
  font-family:Outfit,sans-serif; font-weight:600; font-size:16.5px;
  text-decoration:none; cursor:pointer;
  transition:background 170ms ease-out
}
.btn:hover{background:var(--ink-hover); color:#fff}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--sage-tint); color:var(--ink)}
section.dark .btn{background:var(--bone); color:var(--ink); border-color:var(--bone)}
section.dark .btn:hover{background:#fff}
.btn-row{display:flex; gap:var(--s3); flex-wrap:wrap; margin:var(--s5) 0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line); margin:var(--s5) 0 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:var(--s4) 40px var(--s4) 0; position:relative;
  font-family:Outfit,sans-serif; font-weight:600; font-size:17.5px; list-style:none
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:22px; font-weight:400; color:var(--sage-deep); transition:transform 170ms ease-out
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--sage-deep)}
.faq .a{padding:0 0 var(--s4)}
.faq .a p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- formulario ---------- */
form{max-width:640px; margin:var(--s5) 0}
.field{margin-bottom:var(--s5)}
label{display:block; font-weight:600; font-size:16px; margin-bottom:var(--s2)}
.hint{display:block; font-weight:400; font-size:14.5px; color:var(--graphite); margin-bottom:var(--s2)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; min-height:48px; padding:var(--s3) var(--s4);
  font-family:inherit; font-size:16.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-btn)
}
textarea{min-height:150px; resize:vertical; line-height:1.55}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--ink)}
.consent{display:flex; gap:var(--s3); align-items:flex-start}
.consent input{width:22px; height:22px; min-height:22px; margin-top:3px; flex:0 0 auto; accent-color:var(--ink)}
.consent label{font-weight:400; font-size:15.5px; margin:0}
.hp{position:absolute; left:-9999px}
.formmsg{padding:var(--s4); border:1px solid var(--line-strong); background:var(--surface); margin-bottom:var(--s5)}
.formmsg.err{border-color:var(--risk); background:var(--risk-tint)}
.err-field{color:var(--risk); font-size:15px; font-weight:600; margin-top:var(--s2)}

/* ---------- herramientas ---------- */
.tool{background:var(--surface); border:1px solid var(--ink); padding:var(--s5); margin:var(--s5) 0}
.tool > :first-child{margin-top:0}
.tool fieldset{border:0; padding:0; margin:0 0 var(--s5)}
.tool legend{font-family:Outfit,sans-serif; font-weight:600; font-size:17.5px; padding:0; margin-bottom:var(--s3)}
.opts{display:flex; flex-direction:column; gap:var(--s2)}
.opt{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3);
  border:1px solid var(--line); border-radius:var(--r-btn); cursor:pointer; min-height:48px}
.opt:hover{background:var(--sage-tint)}
.opt input{width:22px; height:22px; margin-top:2px; flex:0 0 auto; accent-color:var(--ink)}
.opt span{font-size:16.5px}
.result{border:1px solid var(--line-strong); background:var(--surface-sunk); padding:var(--s5); margin-top:var(--s5)}
.result > :first-child{margin-top:0}
.result[hidden]{display:none}
.band{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3) var(--s4);
  padding:var(--s3) 0; border-bottom:1px solid var(--line); align-items:baseline}
.band:last-of-type{border-bottom:0}
.band .yr{font-family:Outfit,sans-serif; font-weight:600}
.state{font-size:15px; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.state::before{content:""; width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:currentColor}
.state.s-ok{color:var(--ok)}
.state.s-warn{color:var(--warn)}
.state.s-risk{color:var(--risk)}
.stat{font-size:30px; line-height:1.1; display:block}

/* ---------- pie ---------- */
.foot{background:var(--surface); border-top:1px solid var(--line); padding:var(--s7) 0 var(--s6); font-size:15.5px}
.foot h2{font-family:Outfit,sans-serif; font-size:15px; margin:0 0 var(--s3); color:var(--graphite); font-weight:600}
.foot-grid{display:grid; gap:var(--s6); grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin-bottom:0; max-width:none}
.foot a{color:var(--graphite); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; padding:2px 0}
.foot a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.foot p{max-width:none; font-size:15px; color:var(--graphite)}
.foot-base{border-top:1px solid var(--line); margin-top:var(--s6); padding-top:var(--s4);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; color:var(--muted); font-size:14px}

/* ---------- migas ---------- */
.crumbs{font-size:14.5px; color:var(--graphite); padding-top:var(--s3)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2); padding:0; margin:0}
.crumbs li{max-width:none; display:flex; align-items:center}
.crumbs a{display:inline-flex; align-items:center; min-height:44px}
.crumbs li + li::before{content:"/"; margin-right:var(--s2); color:var(--line-strong)}
.crumbs a{color:var(--graphite)}

/* ---------- utilidades ---------- */
.mt0{margin-top:0}
.center-narrow{max-width:520px}
[hidden]{display:none !important}
@media print{
  .head,.foot,.btn-row,.crumbs{display:none}
  body{background:#fff; font-size:12pt}
}

/* ---------- botón flotante de WhatsApp ---------- */
.wa{
  position:fixed; right:16px; bottom:16px; z-index:50;
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 20px 0 16px;
  background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:26px;
  font-family:Outfit,sans-serif; font-weight:600; font-size:16px;
  text-decoration:none; box-shadow:0 2px 10px rgba(22,35,58,.22)
}
.wa:hover{background:var(--ink-hover); color:#fff}
.wa svg{width:22px; height:22px; flex:0 0 auto}
@media (max-width:520px){.wa{padding:0 18px; right:12px; bottom:12px}}
@media print{.wa{display:none}}

/* ---------- listas de definición (fichas de datos) ---------- */
.limits dl{display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:var(--s2) var(--s4); margin:0; align-items:baseline}
.limits dt{font-size:15px; color:var(--graphite); font-weight:500; max-width:none}
.limits dd{margin:0; font-weight:600; max-width:none; overflow-wrap:anywhere}
@media (max-width:600px){
  .limits dl{grid-template-columns:minmax(0,1fr); gap:0}
  .limits dt{margin-top:var(--s3)}
  .limits dt:first-child{margin-top:0}
}
.ledger li p,.ledger li .when{overflow-wrap:anywhere}

/* objetivos tactiles: enlaces sueltos de navegacion a 44px, los de prosa exentos (WCAG 2.5.8) */
main p a,main li a,main dd a,main td a{padding:2px 0}
@media (max-width:860px){
  .foot-grid{gap:var(--s5)}
  .foot h2{margin-bottom:var(--s1)}
}

/* el boton flotante no debe tapar el final del contenido */
body{padding-bottom:84px}
@media (min-width:861px){body{padding-bottom:0}}
.foot{padding-bottom:var(--s8)}

/* campo de fecha a ancho completo en movil */
input[type=date]{width:100%; max-width:280px}

/* las bandas de garantia se leen mejor apiladas en pantallas estrechas */
@media (max-width:430px){
  .band{grid-template-columns:minmax(0,1fr); gap:var(--s1)}
  .band .state{margin-top:var(--s1)}
}

/* ---------- los cinco paneles ---------- */
.panel{padding:var(--s7) 0; border-top:1px solid var(--line)}
.panel h2{margin-top:0; display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.panel h2::before{
  content:counter(panel,decimal-leading-zero); counter-increment:panel;
  font-size:15px; color:var(--sage-deep); font-weight:600; letter-spacing:.04em;
  font-family:"IBM Plex Sans",sans-serif
}
main{counter-reset:panel}
.panel .lede{font-size:19px; margin-bottom:var(--s5)}
.panel td.num{color:var(--graphite); font-size:15px; white-space:normal; min-width:130px}
.check{background:var(--sage-tint); border-left:3px solid var(--sage-deep);
  padding:var(--s4) var(--s5); margin:var(--s4) 0 0; max-width:none}
.check strong{color:var(--sage-deep)}

/* ciclo de vida de una incidencia */
.flow{list-style:none; counter-reset:fl; padding:0; margin:var(--s5) 0;
  display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.flow li{counter-increment:fl; border:1px solid var(--line); border-top:3px solid var(--sage-deep);
  background:var(--surface); padding:var(--s4); max-width:none}
.flow li strong{display:block; font-family:Outfit,sans-serif; font-size:16.5px; margin-bottom:var(--s1)}
.flow li span{font-size:14.5px; color:var(--graphite)}

/* ficha de obra */
.works{border:1px solid var(--ink); background:var(--surface); margin:var(--s5) 0}
.works-head{background:var(--ink); color:#fff; padding:var(--s4);
  font-family:Outfit,sans-serif; font-weight:600; font-size:17px}
.works dl{display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:0; margin:0; font-size:16px}
.works dt,.works dd{padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
  margin:0; max-width:none}
.works dt{color:var(--graphite); font-size:15px}
.works dd{font-weight:600}
@media (max-width:560px){
  .works dl{grid-template-columns:minmax(0,1fr)}
  .works dt{border-bottom:0; padding-bottom:0}
}