/* ==========================================================================
   josebeltran.lat — Guía informativa de propiedad horizontal
   Hoja de estilos única. Sin dependencias externas ni fuentes remotas.
   ========================================================================== */

/* ---------- 1. Tokens de diseño ---------- */
:root{
  --navy-900:#071b26;
  --navy-800:#0b3a4f;
  --navy-700:#12556f;
  --teal-500:#18bea8;
  --teal-300:#7ae3d6;
  --ink:#0e1a24;
  --body:#2c3d4a;
  --muted:#5b6b79;
  --line:#dbe4ea;
  --soft:#f3f7f9;
  --white:#ffffff;
  --amber:#f0a92b;
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(14,26,36,.06), 0 6px 18px -8px rgba(14,26,36,.16);
  --shadow:0 2px 4px rgba(14,26,36,.06), 0 18px 40px -18px rgba(14,26,36,.28);
  --wrap:1180px;
  --wrap-narrow:760px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; font-family:var(--font); font-size:1.0625rem; line-height:1.65;
  color:var(--body); background:var(--white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{max-width:100%}
img{height:auto; display:block}
h1,h2,h3{color:var(--ink); line-height:1.15; margin:0 0 .6em; letter-spacing:-.015em; font-weight:800}
h1{font-size:clamp(2.05rem, 1.35rem + 2.7vw, 3.55rem)}
h2{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem)}
h3{font-size:clamp(1.12rem, 1rem + .5vw, 1.32rem); font-weight:700}
p{margin:0 0 1.05em}
a{color:var(--navy-700); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--navy-800)}
strong{color:var(--ink)}
ul,ol{margin:0 0 1.05em; padding-left:1.15em}
li{margin-bottom:.45em}
:focus-visible{outline:3px solid var(--teal-500); outline-offset:3px; border-radius:4px}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--navy-800); color:#fff; padding:12px 18px; z-index:100; border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0; color:#fff}

/* ---------- 3. Barra de transparencia ---------- */
.notice-bar{
  background:linear-gradient(90deg,var(--navy-900),var(--navy-800) 55%,var(--navy-700));
  color:#e7f2f6; font-size:.9rem; position:relative; z-index:60;
}
.notice-bar__inner{padding-block:10px}
.notice-bar p{margin:0; max-width:105ch}
.notice-bar strong{color:#fff}
.notice-bar a{color:var(--teal-300); font-weight:600; white-space:nowrap}

/* ---------- 4. Encabezado ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.site-header.is-scrolled{box-shadow:0 8px 26px -18px rgba(14,26,36,.55)}
.site-header__inner{display:flex; align-items:center; gap:18px; min-height:70px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy-800); margin-right:auto}
.brand__mark{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(140deg,var(--navy-800),var(--navy-700)); color:#cfeff0}
.brand__text{display:flex; flex-direction:column; line-height:1.2}
.brand__text strong{font-size:1rem; letter-spacing:-.01em}
.brand__text small{color:var(--muted); font-size:.76rem}
.site-nav ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.site-nav li{margin:0}
.site-nav a{
  display:inline-block; padding:10px 13px; border-radius:999px; text-decoration:none;
  color:var(--body); font-size:.94rem; font-weight:600; transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.site-nav a:hover{background:var(--soft); color:var(--navy-800); transform:translateY(-1px)}
.site-nav a.is-active{background:var(--navy-800); color:#fff}
.nav-toggle{
  display:none; align-items:center; gap:9px; font:inherit; font-size:.92rem; font-weight:700;
  color:var(--navy-800); background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 15px; cursor:pointer;
}
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{
  display:block; width:16px; height:2px; background:currentColor; border-radius:2px; content:""; position:relative;
}
.nav-toggle__bars::before{position:absolute; top:-5px}
.nav-toggle__bars::after{position:absolute; top:5px}

/* Navegación estática de las páginas internas (sin botón de menú) */
.site-nav--static{display:block; position:static; background:none; border:0; box-shadow:none; padding:0}
@media (max-width:860px){
  .site-nav--static{display:block}
  .site-nav--static ul{flex-direction:row; flex-wrap:wrap; gap:2px}
  .site-nav--static a{font-size:.85rem; padding:8px 10px; background:var(--soft)}
  .site-header__inner{flex-wrap:wrap; padding-block:10px}
  .brand__text small{display:block}
}

/* ---------- 5. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:999px; font-weight:700; font-size:1rem; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn--primary{background:linear-gradient(120deg,var(--teal-500),#12a4b8); color:#052b33; box-shadow:0 14px 30px -14px rgba(24,190,168,.85)}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 20px 38px -16px rgba(24,190,168,.9); color:#052b33}
.btn--ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.22); color:#fff; transform:translateY(-2px)}
.btn--outline{border-color:var(--navy-800); color:var(--navy-800); background:#fff}
.btn--outline:hover{background:var(--navy-800); color:#fff}

/* ---------- 6. Héroe ---------- */
.hero{position:relative; color:#fff; isolation:isolate; padding-bottom:clamp(30px,5vw,54px)}
.hero__media{position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--navy-900)}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 60%; animation:kenburns 28s var(--ease) infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)} to{transform:scale(1.12)}}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,27,38,.72) 0%, rgba(7,27,38,.62) 42%, rgba(7,27,38,.86) 100%),
    linear-gradient(100deg, rgba(7,27,38,.9) 0%, rgba(7,27,38,.45) 55%, rgba(7,27,38,.25) 100%);
}
.hero__content{padding-block:clamp(54px,8vw,104px) 26px; max-width:74ch}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 18px;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--teal-300);
}
.eyebrow--dark{color:var(--navy-700)}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(122,227,214,.25)}
.hero h1{color:#fff; text-wrap:balance; max-width:22ch}
.hero__lead{font-size:clamp(1.03rem,1rem+.35vw,1.2rem); color:#e8f1f6; max-width:64ch}
.hero__lead strong{color:#fff}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 22px}
.hero__badges{display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0 0 8px}
.hero__badges li{
  font-size:.82rem; font-weight:600; color:#dcf1f4; padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); margin:0;
}
.hero .credit{color:#a9c2d1}
.hero .credit a{color:var(--teal-300)}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; list-style:none; padding:0; margin:6px 0 22px;
}
.stat{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius);
  padding:18px 18px 16px; margin:0; backdrop-filter:blur(6px);
}
.stat__value{display:block; font-size:clamp(1.6rem,1.3rem+1vw,2.15rem); font-weight:800; color:#fff; letter-spacing:-.02em}
.stat__label{display:block; font-size:.82rem; color:#c6dbe5; line-height:1.45; margin-top:6px}
.credit{font-size:.78rem; color:var(--muted); margin:0}
.credit--light{color:#c3d5e0}

/* ---------- 7. Secciones ---------- */
.section{padding-block:clamp(56px,8vw,104px)}
.section--soft{background:var(--soft)}
.section__head{max-width:70ch; margin-bottom:clamp(28px,4vw,46px)}
.section__lead{font-size:1.06rem; color:var(--muted); margin:0}
.grid{display:grid; gap:clamp(26px,4vw,52px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center}
.grid--gap-lg{gap:clamp(30px,4vw,48px); align-items:start}
.prose{max-width:64ch}
.prose h2{margin-bottom:.5em}

/* listas con tilde */
.check-list{list-style:none; padding:0; margin:0}
.check-list li{position:relative; padding-left:32px; margin-bottom:.7em}
.check-list li::before{
  content:""; position:absolute; left:0; top:.42em; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(140deg,var(--teal-500),#12a4b8);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 17.2l-4.3-4.3 1.5-1.5 2.8 2.8 7-7 1.5 1.5z'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 17.2l-4.3-4.3 1.5-1.5 2.8 2.8 7-7 1.5 1.5z'/%3E%3C/svg%3E") center/16px no-repeat;
}
.ref{color:var(--muted); font-size:.9em}
.inline-src{font-size:.9em; font-weight:600; white-space:nowrap}

.figure{margin:0}
.figure img{border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.figure figcaption{font-size:.8rem; color:var(--muted); margin-top:12px}

.law-quote{
  margin:clamp(34px,5vw,56px) 0 0; padding:26px 30px; border-radius:var(--radius);
  background:#fff; border-left:5px solid var(--teal-500); box-shadow:var(--shadow-sm);
}
.law-quote p{font-size:1.05rem; font-style:italic; color:var(--ink); margin-bottom:.6em}
.law-quote footer{font-size:.85rem; color:var(--muted)}

/* ---------- 8. Tarjetas (razones) ---------- */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,30px); list-style:none; padding:0; margin:0}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin:0;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:#c7d8e0}
.card__media{display:block; margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--soft)}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:24px 24px 26px; position:relative; flex:1}
.card__num{
  display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.12em; color:var(--teal-500);
  background:rgba(24,190,168,.1); border-radius:999px; padding:3px 11px; margin-bottom:12px;
}
.card__badge{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px; margin-bottom:14px;
  background:linear-gradient(140deg,rgba(24,190,168,.16),rgba(18,164,184,.1)); color:var(--navy-700);
}
.card h3{margin-bottom:.45em}
.card p{font-size:.97rem; margin-bottom:.7em}
.card__meta{font-size:.8rem; color:var(--muted); margin:0}
.card--icon{background:linear-gradient(180deg,#fff, #f8fbfc)}

/* ---------- 9. Pasos ---------- */
.steps{list-style:none; padding:0; margin:0 0 clamp(34px,5vw,54px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); counter-reset:none}
.steps li{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm)}
.steps h3{font-size:1.02rem; margin-bottom:.4em}
.steps p{font-size:.94rem; margin:0; color:var(--body)}

/* ---------- 10. Gráfico ---------- */
.chart-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm)}
.chart-card h3{margin-bottom:.35em}
.chart-card__hint{font-size:.88rem; color:var(--muted)}
.chart{position:relative; padding-bottom:1.9rem; margin:26px 0 6px}
.chart__grid{position:absolute; inset:0 0 1.9rem 0; pointer-events:none; font-size:.7rem; color:var(--muted)}
.chart__grid span{position:absolute; right:0; background:#fff; padding-left:6px; transform:translateY(-50%)}
.chart__grid span:nth-child(1){top:0}
.chart__grid span:nth-child(2){top:33.333%}
.chart__grid span:nth-child(3){top:66.667%}
.chart__grid span:nth-child(4){top:100%}
.chart__bars{
  display:flex; align-items:flex-end; gap:clamp(6px,2.4vw,26px); list-style:none;
  padding:0 46px 0 0; margin:0;
  height:250px;
  background-image:repeating-linear-gradient(to top, transparent 0 calc(33.333% - 1px), #e6eef2 calc(33.333% - 1px) 33.333%);
  border-bottom:1px solid var(--line);
}
.bar{
  position:relative; flex:1 1 0; min-width:0; height:calc(var(--h) * 1%);
  display:flex; flex-direction:column-reverse; margin:0;
  transition:height 1s var(--ease);
}
.bar__ibc,.bar__extra{display:block; width:100%; border-radius:8px 8px 0 0}
.bar__ibc{height:66.667%; background:linear-gradient(180deg,var(--navy-700),var(--navy-800))}
.bar__extra{height:33.333%; background:linear-gradient(180deg,var(--teal-300),var(--teal-500)); border-radius:8px 8px 0 0; margin-bottom:-1px}
.bar__top{
  position:absolute; top:-1.5rem; left:50%; transform:translateX(-50%);
  font-size:.72rem; font-weight:800; color:var(--navy-800); white-space:nowrap;
}
.bar__x{
  position:absolute; bottom:-1.7rem; left:50%; transform:translateX(-50%);
  font-size:.72rem; color:var(--muted); white-space:nowrap; font-weight:600;
}
.chart-table{margin-top:30px; font-size:.88rem; overflow-x:auto; -webkit-overflow-scrolling:touch}
.chart-table table{min-width:520px}
.chart-table summary{cursor:pointer; font-weight:700; color:var(--navy-700); padding:8px 0}
.chart-table table{width:100%; border-collapse:collapse; margin-top:8px}
.chart-table caption{text-align:left; font-size:.78rem; color:var(--muted); margin-bottom:10px}
.chart-table th,.chart-table td{border-bottom:1px solid var(--line); padding:9px 8px; text-align:left}
.chart-table thead th{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}

/* ---------- 11. Calculadora ---------- */
.calc{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm)}
.calc__hint{font-size:.88rem; color:var(--muted)}
.calc__fields{display:grid; gap:14px; margin:20px 0 22px}
.calc__fields label{display:block; font-size:.86rem; font-weight:700; color:var(--ink)}
.calc__fields input{
  display:block; width:100%; margin-top:7px; padding:13px 15px; font:inherit; font-size:1rem;
  color:var(--ink); background:var(--soft); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.calc__fields input:focus{border-color:var(--teal-500); background:#fff; box-shadow:0 0 0 4px rgba(24,190,168,.14); outline:none}
.calc__out{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px}
.calc__kpi{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px}
.calc__kpi--total{grid-column:1/-1; background:linear-gradient(120deg,rgba(24,190,168,.12),rgba(18,164,184,.07)); border-color:rgba(24,190,168,.4)}
.calc__kpi-value{display:block; font-size:1.5rem; font-weight:800; color:var(--navy-800); letter-spacing:-.02em}
.calc__kpi-label{display:block; font-size:.78rem; color:var(--muted); margin-top:3px}
.calc__table{width:100%; border-collapse:collapse; font-size:.86rem}
.calc__table caption{text-align:left; font-size:.78rem; color:var(--muted); margin-bottom:10px}
.calc__table th,.calc__table td{border-bottom:1px solid var(--line); padding:8px 6px; text-align:right}
.calc__table th:first-child,.calc__table td:first-child{text-align:left}
.calc__table thead th{font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.calc__table tbody tr:last-child td{font-weight:800; color:var(--navy-800)}

/* ---------- 12. Banda de impacto ---------- */
.band{position:relative; color:#fff; isolation:isolate}
.band__media{position:absolute; inset:0; z-index:-1}
.band__media img{width:100%; height:100%; object-fit:cover}
.band__scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,27,38,.92), rgba(7,27,38,.82))}
.band__content{position:relative; padding-block:clamp(48px,7vw,86px)}
.band h2{color:#fff; max-width:34ch}
.band h3{color:var(--teal-300); font-size:1.05rem}
.band__cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,44px); margin-top:26px}
.plain-list{list-style:none; padding:0; margin:0}
.plain-list li{position:relative; padding-left:22px; color:#dbe9f0; font-size:.96rem}
.plain-list li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:#f0a92b}
.plain-list--good li::before{background:var(--teal-500)}
.band .credit{margin-top:26px}

/* ---------- 13. Acordeón ---------- */
.accordion{border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line); padding:6px 0}
.acc summary{
  cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:14px;
  padding:18px 4px; font-weight:700; color:var(--ink);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary h3{display:inline; font-size:1.06rem; margin:0}
.acc summary::after{
  content:"+"; margin-left:auto; font-size:1.5rem; line-height:1; color:var(--teal-500); font-weight:400;
  transition:transform .3s var(--ease);
}
.acc[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{color:var(--navy-800)}
.acc summary:focus-visible{outline-offset:2px}
.acc__body{padding:0 4px 20px; animation:fadeSlide .35s var(--ease)}
.acc__body p{margin-bottom:.7em}
@keyframes fadeSlide{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.tag{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:5px; margin-right:7px; vertical-align:1px;
}
.tag--false{background:#fdecec; color:#a12525}
.tag--partial{background:#fff6e2; color:#8a5a00}

/* ---------- 14. Fuentes ---------- */
.sources{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,26px)}
.source{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin:0; box-shadow:var(--shadow-sm)}
.source h3{font-size:1.05rem}
.source p{font-size:.94rem}
.source__links{display:flex; flex-direction:column; gap:4px; margin:0; font-size:.88rem; font-weight:600}
.cta-line{margin:34px 0 0}

/* ---------- 15. Contacto ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:38px}
.contact-card{
  display:flex; flex-direction:column; gap:6px; padding:26px 24px; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.contact-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--teal-500)}
.contact-card__ico{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:linear-gradient(140deg,var(--navy-800),var(--navy-700)); color:#cfeff0; margin-bottom:8px}
.contact-card__label{font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700}
.contact-card__value{font-size:1.02rem; color:var(--navy-800); word-break:break-word}
.contact-card__hint{font-size:.82rem; color:var(--muted)}

.disclaimer{
  background:#fff8ec; border:1px solid #f4dcad; border-left:5px solid var(--amber);
  border-radius:var(--radius); padding:26px 28px;
}
.disclaimer h3{font-size:1.12rem; margin-bottom:.6em}
.disclaimer ul{list-style:none; padding:0; margin:0 0 .8em}
.disclaimer li{position:relative; padding-left:20px; font-size:.94rem; margin-bottom:.6em}
.disclaimer li::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:2px; background:var(--amber)}
.disclaimer p:last-child{margin-bottom:0}
.disclaimer--inline{background:var(--soft); border-color:var(--line); border-left-color:var(--navy-700); font-size:.86rem; padding:16px 18px; margin-top:20px; color:var(--muted)}
.disclaimer--inline strong{color:var(--navy-800)}
.updated{font-size:.85rem; color:var(--muted)}

/* ---------- 16. Pie ---------- */
.site-footer{background:var(--navy-900); color:#c9dae3; padding-block:clamp(44px,6vw,72px) 28px; font-size:.92rem}
.site-footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(22px,3vw,38px)}
.site-footer__title{color:#fff; font-size:1.1rem; margin-bottom:.5em}
.site-footer__sub{color:#fff; font-size:.86rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.9em}
.site-footer__text{color:#a8bec9; font-size:.9rem}
.site-footer nav ul,.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:.5em}
.site-footer a{color:var(--teal-300); text-decoration:none; border-bottom:1px solid transparent}
.site-footer a:hover{color:#fff; border-color:currentColor}
.site-footer__legal{margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:.82rem; color:#9db4c0}
.site-footer__legal a{color:var(--teal-300)}
.site-footer__meta{margin-top:14px; color:#87a0ad}

/* ---------- 17. Botón volver arriba ---------- */
.to-top{
  position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:40;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy-800);
  font-size:1.2rem; cursor:pointer; box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.to-top.is-visible{opacity:1; pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}

/* ---------- 18. Animaciones de aparición ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.is-visible{opacity:1; transform:none}
.js .cards .reveal:nth-child(3n+2){transition-delay:.09s}
.js .cards .reveal:nth-child(3n){transition-delay:.18s}
.js .steps .reveal:nth-child(3n+2){transition-delay:.09s}
.js .steps .reveal:nth-child(3n){transition-delay:.18s}
.js .chart .bar{height:0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js .reveal{opacity:1; transform:none}
  .js .chart .bar{height:calc(var(--h) * 1%)}
}

/* ---------- 19. Responsive ---------- */
@media (max-width:1040px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .grid--2,.band__cols,.sources,.contact-grid{grid-template-columns:1fr}
  .calc__out{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .site-nav:not(.site-nav--static){
    position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); display:none; padding:10px clamp(18px,4vw,32px) 20px;
  }
  .site-nav.is-open{display:block; animation:fadeSlide .28s var(--ease)}
  .site-nav ul{flex-direction:column; align-items:stretch; gap:2px}
  .site-nav a{padding:13px 12px; border-radius:var(--radius-sm)}
  .brand__text small{display:none}
}
@media (max-width:620px){
  body{font-size:1rem}
  .cards,.steps,.stats{grid-template-columns:1fr}
  .hero__content{padding-block:44px 18px}
  .hero__actions .btn{width:100%}
  .site-footer__grid{grid-template-columns:1fr}
  .calc__table{display:block; overflow-x:auto; font-size:.78rem; white-space:nowrap}
  .chart__bars{height:200px}
  .bar__top{font-size:.64rem}
}

/* ---------- 20. Impresión ---------- */
@media print{
  .notice-bar,.site-header,.to-top,.band__media,.hero__media,.contact-grid,.nav-toggle{display:none}
  body{color:#000; font-size:11pt}
  .hero{color:#000}
  .hero h1,.band h2{color:#000}
  a::after{content:" (" attr(href) ")"; font-size:9pt}
}