/* style.css */
/* ==============================
   FiniquitoCalculadora.es (Premium UI)
   v52
================================== */

:root{
  --bg:#ffffff;
  --bg2:#f5f5f7;
  --surface:#ffffff;
  --surface2:#f5f5f7;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --muted2:#86868b;

  --line:#d2d2d7;
  --line2:#e5e5ea;

  --brand:#16a34a;
  --brand2:#12803a;
  --brandDark:#0f6a30;

  --shadow: 0 18px 60px rgba(0,0,0,.08);
  --shadow2: 0 10px 28px rgba(0,0,0,.08);
  --shadow3: 0 4px 18px rgba(0,0,0,.06);

  --radius: 20px;
  --radius2: 24px;

  --container: 1120px;
}


[hidden]{display:none !important;}
body.menu-open{overflow:hidden;}
/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg2);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  position: relative;
  min-height: 100%;
}

/* ==============================
   Ambient animated background (subtle, premium)
   - No dependencies
   - Respects prefers-reduced-motion
================================== */
body::before{
  content:"";
  position:fixed;
  inset:-22%;
  background:
    radial-gradient(40% 35% at 18% 22%, rgba(22,163,74,.18), transparent 60%),
    radial-gradient(34% 32% at 82% 26%, rgba(88,86,214,.14), transparent 60%),
    radial-gradient(40% 36% at 55% 86%, rgba(52,199,89,.10), transparent 62%),
    linear-gradient(120deg, #ffffff 0%, #f5f5f7 45%, #ffffff 100%);
  filter: blur(30px) saturate(1.12);
  transform: translate3d(0,0,0);
  animation: bgFloat 18s ease-in-out infinite alternate;
  z-index:-2;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(245,245,247,.55);
  z-index:-1;
  pointer-events:none;
}

@keyframes bgFloat{
  0%   { transform: translate(-2%, -1%) scale(1.00); }
  50%  { transform: translate( 2%,  1%) scale(1.03); }
  100% { transform: translate(-1%,  2%) scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}



/* Fallback for older browsers */
@supports not (overflow: clip){
  html, body{ overflow-x:hidden; }
}


a{color:inherit}
a:hover{opacity:.92}
img{max-width:100%;height:auto}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
  /* iOS safe-area support (keeps content away from notches) */
  padding-left:18px;
  padding-right:18px;
  padding-left:max(18px, env(safe-area-inset-left));
  padding-right:max(18px, env(safe-area-inset-right));
}

/* Accessibility */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:#fff;
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:10px;
  z-index:1000;
}
.skip-link:focus{left:12px}

:focus-visible{
  outline:3px solid rgba(22,163,74,.35);
  outline-offset:2px;
  border-radius:12px;
}


/* Header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(229,231,235,.9);
}

/* Anchor offset for sticky header */
:target{ scroll-margin-top: 90px; }
[id]{ scroll-margin-top: 90px; }

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:-.02em;
}
.brand-badge{
  width:34px;
  height:34px;
  border-radius:12px;
  background:
    radial-gradient(10px 10px at 30% 30%, rgba(255,255,255,.9), transparent 50%),
    linear-gradient(135deg, var(--brand), var(--brand2) 55%, #16a34a 120%);
  box-shadow: 0 10px 24px rgba(22,163,74,.25);
}

.brand-logo{
  width:34px;
  height:34px;
  display:block;
}

.menu{
  display:flex;
  align-items:center;
  gap:18px;
}
.menu a{
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  font-size:14px;
  opacity:.86;
}
.menu a:hover{opacity:1}
.menu .cta{
  padding:10px 14px;
  border-radius:999px;
  background: var(--brand);
  color:#fff;
  font-weight:600;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  opacity:1;
}
.menu .cta:hover{background: var(--brand2);}

/* Mobile menu button */
.menu-btn{
  display:none;
  height:40px;
  padding:0 12px;
  border:1px solid rgba(229,231,235,.9);
  background:#fff;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow: var(--shadow3);
}
.menu-btn:focus-visible{outline:3px solid rgba(22,163,74,.35); outline-offset:3px}
.menu-btn__label{
  font-weight:650;
  font-size:14px;
  letter-spacing:.2px;
  color:var(--text);
}
.menu-btn__icon{
  width:18px;
  height:18px;
  opacity:.85;
  color:var(--text);
}
.menu-btn__icon path{fill:currentColor}
.menu-btn__icon--close path{fill:none; stroke:currentColor}
.menu-btn__icon--close{display:none}
.menu-btn[aria-expanded="true"]{
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.25);
}
.menu-btn[aria-expanded="true"] .menu-btn__icon--open{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__icon--close{display:inline-block}
.menu-mobile{
  display:none;
  margin-top:12px;
  padding:10px 14px;
  border:1px solid rgba(229,231,235,.9);
  background:#fff;
  border-radius:16px;
  box-shadow: var(--shadow3);
}
.menu-mobile a{
  display:block;
  padding:12px 0;
  text-decoration:none;
  font-weight:700;
  color:var(--text);
  opacity:.92;
}
.menu-mobile a:hover{opacity:1}
.menu-mobile a + a{
  border-top:1px solid rgba(229,231,235,.8);
}
.menu-mobile a.cta{
  margin-top:0;
  border-top:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  background: var(--brand);
  font-weight:600;
  color:#fff;
}

/* Sections */
.section{padding:44px 0}
.section.slim{padding:12px 0}


.hero{
  padding:56px 0 28px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:start;
  max-width: 980px;
  margin: 0 auto;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: var(--bg2);
  border:1px solid rgba(229,231,235,.9);
  color:var(--text);
  font-weight:700;
  font-size:13px;
}
.k-dot{
  width:10px;height:10px;border-radius:99px;
  background: var(--brand);
  box-shadow:none;
}
.hero h1{
  margin:12px 0 10px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.04em;
}
.lead{
  margin:0;
  color:#1f2937;
  font-size:16.5px;
  line-height:1.75;
  max-width:64ch;
}
.hero-ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.micro-note{
  margin-top:16px;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(22,163,74,.08);
  border:1px solid rgba(22,163,74,.18);
  color:#0b2a4a;
}

.trust-row{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.trust{
  display:flex;
  gap:10px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
  min-width: 220px;
  flex: 1 1 240px;
}
.trust-ico{
  width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background: var(--bg2);
  border:1px solid rgba(229,231,235,.9);
  font-size:14px;
  color: var(--text);
  flex:0 0 28px;
}
.trust-title{font-weight:650; letter-spacing:-.02em}
.trust-text{color:var(--muted); font-size:13.5px; margin-top:2px}

.hero-panel .panel-card{
  height:100%;
  border-radius: var(--radius2);
  background: #fff;
  border:1px solid var(--line);
  box-shadow: var(--shadow3);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.panel-title{font-weight:700; letter-spacing:-.03em; font-size:18px}
.panel-sub{color:var(--muted); margin-top:4px; font-size:13.5px}
\.panel-actions\{
  display:flex;
  flex-direction:column;
  gap:10px;
\}
.panel-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  font-weight:650;
  font-size:13px;
  background: var(--bg2);
  border:1px solid rgba(229,231,235,.9);
  color:var(--text);
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.panel-link:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  border-color: rgba(22,163,74,.25);
  color: var(--brandDark);
}
.panel-link:focus-visible{outline:3px solid rgba(22,163,74,.45); outline-offset:3px}

.panel-hint{
  margin-top:auto;
  padding:12px 12px;
  border-radius:14px;
  background: var(--bg2);
  border:1px solid rgba(229,231,235,.9);
}
.panel-hint-title{font-weight:650; font-size:13px}
.panel-hint-text{color:var(--muted); font-size:13.5px; margin-top:4px}

/* Quick nav */
.quicknav{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:12px;
}
.quicknav-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:12px;
}
.quicknav-cta .pill{margin:0;}
.quick{
  text-decoration:none;
  padding:14px 14px;
  border-radius:16px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border:1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow3);
  transition: transform .10s ease, box-shadow .14s ease, border-color .14s ease;
}
.quick:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: rgba(22,163,74,.22);
}
.quick-title{font-weight:700; letter-spacing:-.02em; display:block; text-decoration:none}
.quick-desc{color:var(--muted); font-size:13px; margin-top:2px; display:block}

/* Cards / boxes */
.card{
  background: rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow3);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card.elevate{box-shadow: var(--shadow)}
.card-pad{padding:18px}
.box{
  padding:16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border:1px solid var(--line);
  box-shadow: none;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.text{color:var(--muted); line-height:1.75; margin-top:8px}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.section-head h2{margin:0}
.sub{
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.7;
}
.section-head-side{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.chip{
  font-size:12px;
  font-weight:700;
  padding:7px 10px;
  border-radius:999px;
  background: var(--bg2);
  border:1px solid rgba(229,231,235,.9);
  color:var(--text);
}

/* Buttons */
.btn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:none;
  transition: transform .08s ease, background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow3)}
.btn:active{transform: translateY(0)}
.btn.primary{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}
.btn.primary:hover{background: var(--brand2); border-color: var(--brand2)}
.btn.ghost{
  background: rgba(0,0,0,.04);
  border-color: transparent;
}
.btn.ghost:hover{background: rgba(0,0,0,.06)}
.btn.full{width:100%}
.btn.sm,.btn.small{padding:10px 14px; font-size:13px; border-radius:999px; font-weight:600}


/* Calculator layout */
.calc-layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  margin-top:14px;
}
.calc-form{
  border-radius: var(--radius2);
  background:#fff;
  border:1px solid var(--line);
  padding:16px;
}
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field{display:flex; flex-direction:column; gap:8px}
.field-wide{grid-column: 1 / -1}
.label{font-weight:650; font-size:13.5px; letter-spacing:-.01em}
.help{color:var(--muted2); font-size:12.5px; line-height:1.55}

input, select{
  display:block;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font:inherit;
  box-shadow:none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(22,163,74,.85);
  box-shadow: 0 0 0 4px rgba(22,163,74,.15);
  outline:none;
}


textarea{
  display:block;
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(229,231,235,.9);
  background:#fff;
  color:inherit;
  font:inherit;
  box-shadow: inset 0 1px 0 rgba(2,6,23,.04);
}

input:focus, select:focus{
  outline:none;
  border-color: rgba(22,163,74,.55);
  box-shadow:
    0 0 0 4px rgba(22,163,74,.15),
    inset 0 1px 0 rgba(2,6,23,.04);
}
select:disabled{opacity:.55; cursor:not-allowed}

.actions{margin-top:12px; display:grid; gap:10px}
.legal-mini{color:var(--muted2); font-size:12.5px; line-height:1.55}

/* Result side */
.calc-result{display:grid; gap:12px}
.result-card{
  border-radius: var(--radius2);
  background:
    radial-gradient(900px 450px at 20% 10%, rgba(22,163,74,.16), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfefc);
  border:1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow3);
  padding:14px;
  position:sticky;
  top:86px;
}
.result-head{margin-bottom:10px}
.result-title{margin:0; font-size:16px; letter-spacing:-.02em}
.result-sub{margin:6px 0 0; color:var(--muted); font-size:13px}

.result .rows{display:grid; gap:10px}
.row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 10px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(229,231,235,.9);
}
.row span{color:var(--muted)}
.row strong{white-space:nowrap}
.total-row{
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.18);
}
.total{font-size:18px}

.note{
  margin-top:12px;
  color:var(--muted2);
  font-size:12.5px;
  line-height:1.55;
}

.result-empty{
  padding:12px 10px 4px;
}
.empty-ico{
  width:44px;height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background: rgba(22,163,74,.10);
  border:1px solid rgba(22,163,74,.18);
  margin-bottom:10px;
}
.empty-title{font-weight:700; letter-spacing:-.02em}
.empty-text{color:var(--muted); font-size:13.5px; margin-top:4px; line-height:1.7}
.empty-links{margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.empty-links a{color:var(--text); opacity:.9}
.empty-links a:hover{opacity:1}

.help-card{
  padding:14px;
  border-radius: var(--radius2);
  background: rgba(15,23,42,.03);
  border:1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow3);
}
.help-card h4{margin:0 0 10px; letter-spacing:-.02em}
.ul{margin:0; padding-left:18px}
.ul li{margin:6px 0; color:#334155; line-height:1.65}

/* Misc */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:650;
  padding:6px 10px;
  border-radius:999px;
  background: var(--bg2);
  border:1px solid rgba(229,231,235,.9);
  color:var(--text);
}
.muted{color:var(--muted2)}

.divider{
  height:1px;
  background: rgba(229,231,235,.9);
  margin:16px 0;
}
.links-strip, .faq-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.links-strip a, .faq-links a{
  text-decoration:none;
  font-weight:700;
  color:var(--text);
  opacity:.9;
}
.links-strip a:hover, .faq-links a:hover{opacity:1}

.cols2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
}

.cols2--aside{
  grid-template-columns: 1.25fr .75fr;
}

/* Balanced 3-column grid used on desktop for the guide/resources area */
.cols3{
  display: grid;
  gap: 14px;
  align-items: start;
}
.cols3--guide{
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas:
    "main official"
    "new official";
  align-items: stretch;
}
.cols3--guide .box{height:100%;}
.cols3--guide .guide-main{grid-area: main;}
.cols3--guide .guide-new{grid-area: new;}
.cols3--guide .guide-official{grid-area: official;}

.divider{
  height: 1px;
  background: rgba(20,23,30,.10);
  margin: 14px 0;
}

.official-links a{word-break: break-word;}

.subbox{
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid var(--line2);
  border-radius: 14px;
  background: rgba(22,163,74,.06);
  box-shadow: none;
}
.subbox-title{
  font-weight: 800;
  margin: 0 0 8px;
}
.subbox .ul{
  margin: 0;
}

.quick.quick-cta{
  border-color: rgba(22,163,74,.28);
  background: linear-gradient(180deg, rgba(22,163,74,.12), rgba(22,163,74,.06));
}
.quick.quick-cta .quick-title{
  color: var(--ink);
}
.info-callout{
  margin-top:14px;
  display:flex;
    align-items:center;
  flex-wrap:wrap;
gap:12px;
  padding:14px;
  border-radius: var(--radius2);
  background: rgba(22,163,74,.10);
  border:1px solid rgba(22,163,74,.18);
}
.info-text{color:#0f2a3a; line-height:1.7}
.info-ico{
  width:38px;height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(22,163,74,.14);
  border:1px solid rgba(22,163,74,.22);
}

/* FAQ */
.faq details{
  border:1px solid rgba(229,231,235,.9);
  border-radius:16px;
  background:#fff;
  padding:12px 14px;
  margin-top:0;
  box-shadow: var(--shadow3);
}
.faq summary{
  cursor:pointer;
  font-weight:700;
  letter-spacing:-.02em;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::marker{content:""; }
.faq details p{
  margin:10px 0 0;
  color:#334155;
  line-height:1.75;
}

/* Site meta */
.site-meta{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.site-meta-item{
  padding:12px 12px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow3);
}
.site-meta-k{font-size:12px; font-weight:700; color:var(--muted2)}
.site-meta-v{margin-top:4px; font-weight:700; letter-spacing:-.01em; color:#0f172a}

/* Footer */
.footer{
  margin-top:22px;
  padding:24px 0 28px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding:18px 0 14px;
  border-top:1px solid rgba(229,231,235,.9);
}
.brandline{
  display:flex;
  gap:10px;
  align-items:center;
}
.footer-title{font-weight:700; letter-spacing:-.03em}
.footer-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.footer-links a{
  text-decoration:none;
  font-weight:700;
  color:var(--text);
  opacity:.9;
}
.footer-links a:hover{opacity:1}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding-top:10px;
}
.backtop{
  text-decoration:none;
  font-weight:700;
  opacity:.85;
}
.backtop:hover{opacity:1}

/* Noscript */
.noscript{
  position:fixed;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:200;
  background:#fff;
  border:1px solid rgba(229,231,235,.9);
  padding:12px 14px;
  border-radius:16px;
  box-shadow: var(--shadow);
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; }
  .result-card{position:relative; top:auto}
  .calc-layout{grid-template-columns:1fr}
  .quicknav{grid-template-columns: repeat(2, 1fr)}
  .site-meta{grid-template-columns: 1fr}
  .cols3--guide{
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "new"
      "official";
  }
}
@media (max-width: 760px){
  .menu{display:none}
  .menu-btn{display:flex}
  .menu-mobile{display:block}

  .hero h1{font-size:34px}
  .cols2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .field-wide{grid-column:auto}
  .footer-top{flex-direction:column; align-items:flex-start}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}

@media (max-width: 520px){
  .quicknav{grid-template-columns: 1fr;}
}


/* ==============================
   v36 additions: UX + SEO + Mobile
   ============================== */

/* Better prose defaults for long content */
.prose{color:var(--text); overflow-wrap:anywhere; word-break:break-word; hyphens:auto}
.prose p{color:#334155; line-height:1.8; margin:.6rem 0}
/* Only underline inline links (paragraphs + list items). Avoid underlining card CTAs/tiles. */
.prose a{color: var(--brandDark); text-decoration:none}
.prose p a, .prose li a{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(22,163,74,.35);
}
.prose p a:hover, .prose li a:hover{color:var(--brand); text-decoration-color: rgba(22,163,74,.65)}

/* Prose headings + lists (normalize plain <ul>/<ol> used across guides) */
.prose h2{margin:1.2rem 0 .6rem; font-size:1.35rem; letter-spacing:-.01em}
.prose h3{margin:1rem 0 .45rem; font-size:1.12rem}
.prose h4{margin:.9rem 0 .35rem; font-size:1.02rem}
.prose ul, .prose ol{margin:.7rem 0; padding-left:1.15rem; color:#334155}
.prose li{margin:.35rem 0}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose blockquote{margin:1rem 0; padding:12px 14px; border-left:3px solid rgba(22,163,74,.45); background:#f8fafc; border-radius:12px}
.prose code{background:#f1f5f9; padding:2px 6px; border-radius:8px; font-size:.95em}


/* Breadcrumbs */
.breadcrumbs{
  display:flex; flex-wrap:wrap; gap:8px;
  align-items:center;
  font-size:13px;
  color:var(--muted2);
  margin:10px 0 0;
}
.breadcrumbs a{color:inherit; text-decoration:none; font-weight:700}
.breadcrumbs a:hover{color:var(--brand); text-decoration:underline}
.breadcrumbs .sep{opacity:.65}

/* Table of contents */
.toc{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 24px rgba(2,6,23,.06);
  padding:14px 14px 10px;
}
.toc .toc-title{display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:14px}
.toc .toc-title .dot{
  width:10px;height:10px;border-radius:99px;
  background: linear-gradient(135deg, var(--brand), var(--brand2) 55%, #16a34a 120%);
  box-shadow: 0 10px 18px rgba(22,163,74,.20);
}
.toc ul{margin:0; padding-left:18px}
.toc li{margin:8px 0; color:var(--muted)}
.toc a{color:inherit; text-decoration:none; font-weight:700}
.toc a:hover{color:var(--brand); text-decoration:underline}

/* TOC pills (cuando el índice usa enlaces directos en línea) */
.toc > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background: #fff;
  margin:0 8px 8px 0;
  font-size:14px;
  line-height:1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.toc > a:hover{
  text-decoration:none;
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.35);
  color: var(--brand);
}
.toc > a:focus-visible{
  outline: 3px solid rgba(22,163,74,.25);
  outline-offset: 2px;
}
/* Si el TOC es lo primero dentro de una card, no necesita margen superior */
.card-pad > .toc:first-child{ margin-top:0; }

@media (max-width: 640px){
  .toc > a{
    padding:8px 10px;
    font-size:13px;
    margin-right:6px;
  }
}


/* Calculator split layout */
/* Calculator layout refinements */
.calc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.calc-head-left h2{margin:0}
.calc-head-left .sub{margin:8px 0 0}
.calc-pills{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:650;
  background: rgba(2,6,23,.04);
  border:1px solid rgba(148,163,184,.35);
  color:#0b1220;
}
.mini-note{color:var(--muted2); font-size:12.5px}

.calc-left{display:grid; gap:16px}
.calc-formbox{padding:18px}
.calc-form .help{margin-top:-2px}

/* Inline calculator messages (moved from JS for cleaner code) */
.calc-msg{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(229,231,235,.9);
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  font-weight:700;
  font-size:13px;
  line-height:1.6;
  background:#fff;
  color:var(--text);
}
.calc-msg[data-type="error"]{
  border-color: rgba(244,63,94,.28);
  background: rgba(244,63,94,.06);
  color:#7f1d1d;
}
.calc-msg[data-type="info"]{
  border-color: rgba(22,163,74,.25);
  background: rgba(22,163,74,.06);
  color:#064e3b;
}


@media (max-width: 700px){
  .calc-head{flex-wrap:wrap}
  .calc-pills{width:100%; justify-content:flex-start}
  .form-grid{grid-template-columns: 1fr}
}
@media (min-width: 1000px){
  .card-pad{padding:24px}
}

.calc-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:start;
}
.calc-aside{
  position:sticky;
  top:88px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.result-empty{
  border:1px solid rgba(229,231,235,.9);
  border-radius:18px;
  padding:14px;
  background: linear-gradient(180deg, rgba(248,251,255,.9), rgba(255,255,255,.92));
}
.result-empty h3{margin:0 0 6px; font-size:15px}
.result-empty p{margin:0; color:var(--muted); line-height:1.7}
.result{margin-top:0}

/* Example buttons */
.ex-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.ex-row .btn{padding:10px 12px}

/* Make the header feel more “app-like” */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229,231,235,.8);
}
@supports not ((backdrop-filter: blur(1px))){
  .header{background:#ffffff}
}


/* Floating CTA on mobile */
.floating-cta{
  position:fixed;
  left:14px; right:14px; bottom:14px;
  display:none;
  text-decoration:none;
  padding:14px 16px;
  border-radius:16px;
  font-weight:650;
  text-align:center;
  background: linear-gradient(135deg, var(--brand), var(--brand2) 55%, #16a34a 120%);
  border:1px solid rgba(22,163,74,.35);
  color:#052014;
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
}
.floating-cta:focus-visible{outline:3px solid rgba(22,163,74,.45); outline-offset:3px}
.floating-cta[data-show="true"]{display:block}
@media (min-width: 761px){
  .floating-cta{display:none !important}
}

/* Mobile adjustments for calc grid */
@media (max-width: 980px){
  .calc-grid{grid-template-columns: 1fr}
  .calc-aside{position:relative; top:auto}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

.h3-compact{margin:0 0 8px}


/* Tags (small pills) */
.tag{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background: var(--bg2);
  border:1px solid rgba(229,231,235,.9);
  color:var(--text);
  font-weight:700;
  font-size:12px;
}

@media (max-width: 900px){
  .trust-row{grid-template-columns:1fr;}
}


/* Premium: chips + FAQ layout */
.center{display:flex; justify-content:center;}
.btn.small{padding:9px 12px; font-size:12.5px; border-radius:999px}

.result-box{padding:16px}
.result-title{margin:0 0 10px; letter-spacing:-.02em}
.mini-links{display:flex; flex-wrap:wrap; gap:10px}
.mini-links a{color:var(--text); opacity:.9; text-decoration:underline}

.related{margin-top:12px}
.related-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}
.related-title{font-weight:650; letter-spacing:-.02em}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{display:inline-flex; align-items:center; padding:8px 10px; border-radius:999px; background: var(--bg2); border:1px solid rgba(229,231,235,.9); text-decoration:none; font-weight:700; font-size:12.5px; color:#0f172a}
.chip{transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.chip:hover{opacity:1; transform: translateY(-1px); border-color: rgba(22,163,74,.22); box-shadow: var(--shadow3)}
.chip.is-hidden{display:none}


.faq-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:10px;
}
@media (max-width: 900px){
  .faq-grid{grid-template-columns:1fr;}
}
.faq-grid details{
  border:1px solid rgba(229,231,235,.9);
  border-radius:16px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  padding:12px 14px;
  box-shadow: var(--shadow3);
  transition: transform .10s ease, box-shadow .14s ease, border-color .14s ease;
}
.faq-grid details:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  border-color: rgba(22,163,74,.20);
}

.faq-grid summary{
  cursor:pointer;
  font-weight:700;
  letter-spacing:-.02em;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary::marker{content:""; display:none}
.faq-grid summary:before{
  content:"›";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:10px;
  background: rgba(22,163,74,.12);
  color: var(--brandDark);
  font-weight:700;
  transition: transform .15s ease;
  flex:0 0 22px;
}
.faq-grid details[open] summary:before{transform: rotate(90deg);}
.faq-grid details p{margin:10px 0 0; color:#334155; line-height:1.75;}



/* Result box alignment */
.box.result-box{background: linear-gradient(180deg, #ffffff, #f7fbff);}
.official-links a{font-weight:700}

.btn.small:hover{transform: translateY(-1px);}


/* Anti-copy helpers (reduces simple copy/paste; not a full anti-scrape solution) */
.no-select{
  -webkit-user-select:none;
  user-select:none;
}
.legal-data-img{
  max-width:100%;
  height:auto;
  display:block;
}
.inline-email{
  display:inline-block;
  vertical-align:baseline;
}
.inline-email-img{
  height:1.05em;
  width:auto;
  vertical-align:-0.12em;
}

/* Two-column link lists (desktop) */
.linklist.columns2{columns:2;column-gap:20px;}
.linklist.columns2 li{break-inside:avoid;}
@media (max-width: 900px){.linklist.columns2{columns:1;}}


/* Sources */
.sources{margin-top:20px}
.sources .ul{margin-top:10px}


@media (max-width: 420px){
  .hero h1{font-size:30px}
  .brand span{
    max-width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
  }
  .menu-btn__label{display:none}
  .btn{padding:10px 12px}
  .section{padding:22px 0}
  /* calc rows stacking (avoid overflow on very small screens) */
  .row{flex-direction:column; align-items:flex-start}
  .row strong{white-space:normal}

}


/* Code / templates box (for copy-paste blocks) */
.codebox{
  width:100%;
  min-height:360px;
  padding:12px;
  border:1px solid rgba(229,231,235,.9);
  border-radius:16px;
  background:#fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:14px;
  line-height:1.6;
  resize:vertical;
}
@media (max-width: 760px){
  .codebox{min-height:260px}
}



/* v5 additions: salary type + copy/print actions */
.monthly-only.is-hidden{ display:none !important; }

.result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.copy-msg{
  margin-top:8px;
  font-size:12.5px;
  color:var(--muted2);
}

/* Print: keep it clean */
@media print{
  header, nav, .topbar, footer, .help-card, .cta, .ads, script, .nav, .hero .badges { display:none !important; }
  .calc-aside{ position:static !important; }
  .container{ max-width: 900px !important; }
  .box{ box-shadow:none !important; }
  a:after{ content:""; }
}


.info-callout .btn{margin-left:auto}
@media (max-width:560px){
  .info-callout .btn{width:100%; margin-left:0}
}

.ol{margin:0; padding-left:18px}


/* Ensure component links are not underlined in rich text */
.prose a.quick, .prose a.btn, .prose a.chip, .prose a.tag{ text-decoration:none !important; color: inherit; }

@media (min-width: 900px){
  .card-pad{padding:22px}
}

/* ==============================
   PHASE 2 (v46) — Premium UI system
   - Unifica tipografia, espaiat, botons/inputs, cards i estats
   - Responsive: 320 / 375 / 768 / 1024 / 1440
================================= */

:root{
  --bg:#ffffff;
  --bg2:#f5f5f7;
  --surface:#ffffff;
  --surface2:#f5f5f7;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --muted2:#86868b;

  --line:#d2d2d7;
  --line2:#e5e5ea;

  --brand:#16a34a;
  --brand2:#12803a;
  --brandDark:#0f6a30;

  --shadow: 0 18px 60px rgba(0,0,0,.08);
  --shadow2: 0 10px 28px rgba(0,0,0,.08);
  --shadow3: 0 4px 18px rgba(0,0,0,.06);

  --radius: 20px;
  --radius2: 24px;

  --container: 1120px;
}

html, body{
  overflow-x: clip;
}

.container{
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-inline: 18px;
}

.section{
  padding-block: var(--space-7);
}
.section--tight{
  padding-block: var(--space-6);
}
.section-head{
  margin-bottom: var(--space-5);
}
.section-head h2{
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
}
.section-head p{
  margin: 0;
  color: var(--muted);
}

.card, .box{
  border-radius: var(--radius2);
}
.card-pad{
  padding: clamp(18px, 3vw, 28px);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  min-height: 44px;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn.primary{
  background: linear-gradient(180deg, rgba(22,163,74,.18), rgba(22,163,74,.10));
  border-color: rgba(22,163,74,.35);
}
.btn.ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.btn:hover{
  transform: translateY(-1px);
}
.btn:active{
  transform: translateY(0);
}
.btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Inputs */
.field label{
  font-weight: 700;
}
input, select, textarea{
  min-height: 44px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: rgba(22,163,74,.55);
}
.help{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.is-invalid{
  border-color: rgba(239,68,68,.65) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important;
}
.field.is-invalid label{
  color: rgba(239,68,68,.95);
}

/* Calculator layout */
.calc-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 1024px){
  .calc-grid{
    grid-template-columns: 1.15fr .85fr;
    align-items:start;
  }
}

.calc-side{
  padding: 18px;
}
.calc-side h3{
  margin-top: 0;
  margin-bottom: 10px;
}
.calc-side ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.calc-side li{ margin: 8px 0; }

/* Inline message (validation) */
.calc-msg{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.25);
  background: var(--danger-bg);
  color: rgba(255,255,255,.92);
}
.calc-msg[data-type="info"]{
  border-color: rgba(22,163,74,.20);
  background: rgba(22,163,74,.10);
}

/* Results */
.results-section .result-box{
  padding: 0;
}
.result{
  padding: 18px;
}
.result .rows{
  display:grid;
  gap: 10px;
  margin-top: 14px;
}
.result .row{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}
.result .row strong{
  font-variant-numeric: tabular-nums;
}
.result .row:last-child{
  border-color: rgba(22,163,74,.28);
  background: rgba(22,163,74,.08);
}
.result-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}
.copy-msg{
  margin-top: 10px;
}

/* CTA final */
.cta-final .cta-card{
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow2);
}
.cta-final h2{
  margin: 0 0 10px;
}
.cta-final p{
  margin: 0 0 14px;
  color: var(--muted);
}
.cta-final .note{
  margin-top: 12px;
  color: rgba(255,255,255,.70);
}

/* Long content readability (guide pages) */
.card .card-pad h2, .card .card-pad h3{
  scroll-margin-top: 92px;
}
.card .card-pad p, .card .card-pad li{
  line-height: 1.65;
}
.card .card-pad ul, .card .card-pad ol{
  padding-left: 18px;
}
.card .card-pad table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 14px;
}
.card .card-pad th, .card .card-pad td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.card .card-pad th{
  text-align:left;
  color: rgba(255,255,255,.92);
}

/* Mobile tightening */
@media (max-width: 375px){
  .btn{
    width:100%;
  }
  .hero-panel{
    padding: 16px;
  }
}


/* ===== PHASE 3 SEO/IA/Interlinking ===== */
.breadcrumbs-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin:0;
}
.breadcrumbs-item{
  display:flex;
  align-items:center;
  gap:8px;
}
.breadcrumbs-item + .breadcrumbs-item:before{
  content:"/";
  opacity:.6;
}
.key-points{
  margin: 10px 0 0;
  padding-left: 18px;
}
.key-points li{
  margin: 6px 0;
}
.related-links{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.related-links a{
  display:block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration:none;
}
.related-links a:hover{
  border-color: rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.related-links a:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
@media(min-width:768px){
  .related-links{ grid-template-columns: 1fr 1fr; }
}


/* v51 — Hero simplification (Apple-like) */
.hero-note{
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  background: var(--bg2);
  border:1px solid rgba(229,231,235,.9);
  max-width: 760px;
}
.hero-note-title{
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:6px;
  font-size:14px;
  color: var(--text);
}
.hero-note-text{
  font-size:14px;
  color: var(--muted);
  line-height:1.45;
}
.hero-note-text b{color:var(--text)}
.hero-note-link{
  margin-left:10px;
  color: var(--brand);
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
.hero-note-link:hover{text-decoration:underline}
.hero-ctas{margin-top:18px}
.hero-ctas .btn.primary{
  box-shadow: var(--shadow3);
}
@media (min-width: 900px){
  .hero{padding:64px 0 32px}
}

/* === Ambient background (GREEN, dynamic on scroll) === */
:root{
  --p1x: 18%;
  --p1y: 18%;
  --p2x: 78%;
  --p2y: 14%;
  --p3x: 72%;
  --p3y: 82%;
  --p4x: 22%;
  --p4y: 86%;
}

html, body{
  background: linear-gradient(180deg, #f2fff6 0%, #ffffff 55%, #f6fffb 100%);
}

body::before{
  content:"";
  position: fixed;
  inset: -22vmax;
  z-index: -2;
  pointer-events:none;
  background:
    radial-gradient(46vmax 36vmax at var(--p1x) var(--p1y), rgba(22, 163, 74, .22) 0%, rgba(22, 163, 74, 0) 62%),
    radial-gradient(42vmax 34vmax at var(--p2x) var(--p2y), rgba(16, 185, 129, .18) 0%, rgba(16, 185, 129, 0) 62%),
    radial-gradient(54vmax 44vmax at var(--p3x) var(--p3y), rgba(34, 197, 94, .16) 0%, rgba(34, 197, 94, 0) 62%),
    radial-gradient(48vmax 38vmax at var(--p4x) var(--p4y), rgba(132, 204, 22, .12) 0%, rgba(132, 204, 22, 0) 60%);
  filter: blur(38px) saturate(135%);
  transform: translate3d(0,0,0);
  opacity: .95;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 55% 6%, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.45) 40%, rgba(255,255,255,.78) 100%);
  opacity: .96;
}

/* glass surfaces */
.card, .box, .panel, .container-card{
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 14px 34px rgba(2, 6, 23, .06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* links + focus in green */
a{ color: var(--brand2); }
a:hover{ color: var(--brandDark); }
:focus-visible{
  outline: 3px solid rgba(22,163,74,.35);
  outline-offset: 2px;
  border-radius: 12px;
}

/* === Scrollbar (match site style) === */
/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, .28) rgba(15, 23, 42, .06);
}
/* Chromium / Safari */
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track{
  background: rgba(15, 23, 42, .06);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, .22);
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, .06);
}
::-webkit-scrollbar-thumb:hover{
  background: rgba(15, 23, 42, .32);
}

/* === Header refinements (centered + readable) === */
.nav{ gap:18px; }
.menu{ flex:1; justify-content:center; }
.menu .cta{
  margin-left:auto;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand2) 100%);
  box-shadow: 0 10px 22px rgba(22,163,74,.28);
}
.menu .cta:hover{ filter: brightness(0.98); }

.header{
  background: rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* === v8 Modern UI polish (green-only, no pale-blue buttons) === */
:root{
  --accent: #16a34a;
  --accent-2: #12803a;
  --accent-ink: #0f6a30;
  --accent-soft: rgba(22,163,74,.10);
  --accent-soft-2: rgba(22,163,74,.14);
  --stroke: rgba(15,23,42,.10);
  --stroke-2: rgba(15,23,42,.08);
  --glass: rgba(255,255,255,.62);
  --glass-2: rgba(255,255,255,.72);
}

/* Buttons: unify + remove any “disabled pale blue” look */
.btn, button.btn, a.btn,
button, input[type="submit"], .cta, .button, .btn-primary{
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
}

.btn-primary, .cta, a.cta, button.cta{
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 30px rgba(22,163,74,.26) !important;
}
.btn-primary:hover, .cta:hover, a.cta:hover, button.cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(22,163,74,.30) !important;
  filter: saturate(105%);
}

/* Secondary / light buttons */
.btn-secondary, .btn-outline, a.btn-secondary{
  background: rgba(255,255,255,.55) !important;
  color: var(--accent-ink) !important;
  border: 1px solid rgba(22,163,74,.28) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
}
.btn-secondary:hover, .btn-outline:hover, a.btn-secondary:hover{
  background: rgba(22,163,74,.10) !important;
  border-color: rgba(22,163,74,.42) !important;
}

/* Any old “soft primary” class becomes green-soft (kills blue) */
.btn-soft, .btn-light, .btn-ghost, .soft-btn, .pill-btn{
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border: 1px solid rgba(22,163,74,.20) !important;
}

/* Links */
a{ color: var(--accent-2); text-decoration: none; }
a:hover{ color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Cards / boxes: more modern glass, less “old border” */
.card, .box, .panel, .container-card, .section, .block{
  background: linear-gradient(180deg, var(--glass-2) 0%, var(--glass) 100%) !important;
  border: 1px solid var(--stroke-2) !important;
  box-shadow: 0 18px 46px rgba(2,6,23,.06) !important;
}
.card:hover, .box:hover, .panel:hover{
  border-color: var(--stroke) !important;
}

/* Chips / tags */
.badge, .chip, .tag, .pill{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(2,6,23,.80) !important;
}
.badge--accent, .chip--accent, .tag--accent{
  background: rgba(22,163,74,.12) !important;
  border-color: rgba(22,163,74,.22) !important;
  color: var(--accent-ink) !important;
}

/* FAQ blocks: modern list look, less “old cards” */
.faq, .faq-grid{ gap: 14px !important; }
.faq-item, .faq-card, .faq-q, .faq-question{
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 36px rgba(2,6,23,.05) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.faq-item:hover, .faq-card:hover, .faq-q:hover, .faq-question:hover{
  transform: translateY(-1px);
  border-color: rgba(22,163,74,.24) !important;
  box-shadow: 0 18px 44px rgba(2,6,23,.06) !important;
}
.faq-item .icon, .faq-item .faq-icon, .faq-question .icon, .faq-card .icon{
  background: rgba(22,163,74,.14) !important;
  color: var(--accent-ink) !important;
  border: 1px solid rgba(22,163,74,.18) !important;
}

/* Inputs: crisp + green focus */
input, select, textarea{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(22,163,74,.38);
  box-shadow: 0 0 0 6px rgba(22,163,74,.14);
  outline: none;
}

/* Footer: more premium */
footer a{
  text-decoration: none !important;
  opacity: .92;
}
footer a:hover{ text-decoration: underline !important; }

/* === v9 Fix remaining non-green buttons + redesign Related Articles === */

/* Buttons using class="btn primary" (site uses this pattern) */
.btn.primary, a.btn.primary, button.btn.primary{
  background: linear-gradient(180deg, var(--accent, #16a34a) 0%, var(--accent-2, #12803a) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 30px rgba(22,163,74,.26) !important;
}
.btn.primary:hover, a.btn.primary:hover, button.btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(22,163,74,.30) !important;
  filter: saturate(105%);
}

/* Disabled / inactive states (keep green, but clearly inactive) */
.btn.primary:disabled, button.btn.primary:disabled,
.btn.primary[aria-disabled="true"], a.btn.primary[aria-disabled="true"]{
  opacity: .55;
  filter: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* Make secondary button ("Guía paso a paso") look premium, not like a link */
a.btn.secondary, .btn.secondary, button.btn.secondary{
  background: rgba(255,255,255,.55) !important;
  color: var(--accent-ink, #0f6a30) !important;
  border: 1px solid rgba(22,163,74,.28) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
}
a.btn.secondary:hover, .btn.secondary:hover, button.btn.secondary:hover{
  background: rgba(22,163,74,.10) !important;
  border-color: rgba(22,163,74,.42) !important;
}

/* Related Articles: turn list into modern cards */
#relacionados ul.ul{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  #relacionados ul.ul{ grid-template-columns: 1fr; }
}

#relacionados ul.ul li{
  margin: 0;
}

#relacionados ul.ul a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(2,6,23,.05);
  text-decoration: none !important;
  color: rgba(2,6,23,.86);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* little green bullet icon */
#relacionados ul.ul a::before{
  content: "↗";
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(22,163,74,.14);
  border: 1px solid rgba(22,163,74,.18);
  color: var(--accent-ink, #0f6a30);
  flex: 0 0 26px;
  font-size: 14px;
  line-height: 1;
}

#relacionados ul.ul a:hover{
  transform: translateY(-1px);
  border-color: rgba(22,163,74,.24);
  box-shadow: 0 18px 44px rgba(2,6,23,.06);
  color: rgba(2,6,23,.92);
}

#relacionados h2{
  display:flex;
  align-items:center;
  gap:10px;
}
#relacionados h2::after{
  content:"";
  flex:1;
  height:1px;
  background: rgba(15,23,42,.08);
}

/* === v10 Related section: robust styling + nicer cards === */
.related, #relacionados{ margin-top: 10px; }
#relacionados ul.ul, .related ul.ul, ul.ul.related-list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  #relacionados ul.ul, .related ul.ul, ul.ul.related-list{ grid-template-columns: 1fr; }
}

#relacionados ul.ul li, .related ul.ul li, ul.ul.related-list li{ margin: 0; }

#relacionados ul.ul a, .related ul.ul a, ul.ul.related-list a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(2,6,23,.05);
  text-decoration: none !important;
  color: rgba(2,6,23,.86) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  min-height: 54px;
}

#relacionados ul.ul a::before, .related ul.ul a::before, ul.ul.related-list a::before{
  content: "↗";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(22,163,74,.14);
  border: 1px solid rgba(22,163,74,.18);
  color: rgba(15,106,48,.95);
  flex: 0 0 28px;
  font-size: 14px;
  line-height: 1;
}

#relacionados ul.ul a:hover, .related ul.ul a:hover, ul.ul.related-list a:hover{
  transform: translateY(-1px);
  border-color: rgba(22,163,74,.24);
  box-shadow: 0 18px 44px rgba(2,6,23,.06);
}

#relacionados h2, .related h2{
  display:flex;
  align-items:center;
  gap:10px;
}
#relacionados h2::after, .related h2::after{
  content:"";
  flex:1;
  height:1px;
  background: rgba(15,23,42,.08);
}

/* ============================================================
   v11 DESIGN SYSTEM (unify look across entire site)
   - One card / one button / one pill / one list style
   - Green-only accents
   ============================================================ */

:root{
  --ds-radius: 18px;
  --ds-radius-sm: 14px;
  --ds-radius-pill: 999px;

  --ds-ink: rgba(2,6,23,.92);
  --ds-muted: rgba(2,6,23,.65);

  --ds-stroke: rgba(15,23,42,.10);
  --ds-stroke-2: rgba(15,23,42,.08);

  --ds-glass: rgba(255,255,255,.62);
  --ds-glass-2: rgba(255,255,255,.74);

  --ds-shadow: 0 18px 46px rgba(2,6,23,.06);
  --ds-shadow-hover: 0 24px 60px rgba(2,6,23,.08);

  --ds-accent: #16a34a;
  --ds-accent-2: #12803a;
  --ds-accent-ink: #0f6a30;

  --ds-accent-soft: rgba(22,163,74,.10);
  --ds-accent-soft-2: rgba(22,163,74,.14);
  --ds-accent-stroke: rgba(22,163,74,.22);
}

/* Type rhythm */
body{ color: var(--ds-ink); }
p, li{ color: var(--ds-muted); line-height: 1.6; }
h1, h2, h3{ letter-spacing: -.015em; }
h2{ font-size: clamp(22px, 2.2vw, 28px); }

/* Layout: reduce "floating narrow column" feeling */
.container, .wrap, .page, main, .main{
  max-width: 1100px;
}

/* Header: consistent blur + subtle border + centered nav */
.header, header{
  background: rgba(255,255,255,.64) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ds-stroke-2) !important;
}
.nav .menu, .menu{
  justify-content: center;
}
.nav .menu a, .menu a{
  color: rgba(2,6,23,.78);
}
.nav .menu a:hover, .menu a:hover{
  color: rgba(2,6,23,.92);
}

/* Universal CARD */
.ds-card,
.card, .box, .panel, .container-card, .section, .block,
.guide-card, .tile, .tile-card, .quick-card,
.faq-item, .faq-card, .faq-q, .faq-question{
  background: linear-gradient(180deg, var(--ds-glass-2) 0%, var(--ds-glass) 100%) !important;
  border: 1px solid var(--ds-stroke-2) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ds-card:hover,
.card:hover, .box:hover, .panel:hover,
.guide-card:hover, .tile:hover, .tile-card:hover, .quick-card:hover,
.faq-item:hover, .faq-card:hover, .faq-q:hover, .faq-question:hover{
  border-color: var(--ds-stroke) !important;
  box-shadow: var(--ds-shadow-hover) !important;
  transform: translateY(-1px);
}

/* Remove “old” heavy inner borders if present */
.card *{ border-color: rgba(15,23,42,.10); }

/* Pills / badges unified */
.badge, .chip, .tag, .pill, .pill-btn, .btn-soft, .btn-light, .btn-ghost{
  border-radius: var(--ds-radius-pill) !important;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid var(--ds-stroke) !important;
  color: rgba(2,6,23,.78) !important;
}

/* Links */
a{ color: var(--ds-accent-2); }
a:hover{ color: var(--ds-accent-ink); }

/* Buttons unified (covers many class patterns) */
.btn, button.btn, a.btn, button, input[type="submit"], .cta, .button,
.btn-primary, .btn.primary, a.btn.primary, button.btn.primary{
  border-radius: var(--ds-radius-pill) !important;
  font-weight: 650;
  letter-spacing: .01em;
}

/* Primary */
.btn-primary, .cta, a.cta, button.cta,
.btn.primary, a.btn.primary, button.btn.primary{
  background: linear-gradient(180deg, var(--ds-accent) 0%, var(--ds-accent-2) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 30px rgba(22,163,74,.26) !important;
}
.btn-primary:hover, .cta:hover, a.cta:hover, button.cta:hover,
.btn.primary:hover, a.btn.primary:hover, button.btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(22,163,74,.30) !important;
  filter: saturate(105%);
}

/* Secondary */
.btn-secondary, .btn.secondary, a.btn.secondary, button.btn.secondary,
.btn-outline, a.btn-outline{
  background: rgba(255,255,255,.58) !important;
  color: var(--ds-accent-ink) !important;
  border: 1px solid var(--ds-accent-stroke) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
}
.btn-secondary:hover, .btn.secondary:hover, a.btn.secondary:hover, button.btn.secondary:hover{
  background: var(--ds-accent-soft) !important;
  border-color: rgba(22,163,74,.42) !important;
}

/* Disabled */
button:disabled, .btn:disabled, .btn.primary:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}

/* Inputs unified */
input, select, textarea{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: var(--ds-radius-sm) !important;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(22,163,74,.38) !important;
  box-shadow: 0 0 0 6px rgba(22,163,74,.14) !important;
  outline: none !important;
}

/* Section headers: add divider line for consistency */
h2{
  display:flex;
  align-items:center;
  gap:10px;
}
h2::after{
  content:"";
  flex:1;
  height:1px;
  background: var(--ds-stroke-2);
}

/* ====== QUICK GUIDES + RELATED ARTICLES: same component language ====== */

/* Quick guides grid (if present) */
#quick-guides, .quick-guides, .quick-guides-grid{
  margin-top: 6px;
}
.quick-guides .grid, .quick-guides-grid, #quick-guides .grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1024px){
  .quick-guides .grid, .quick-guides-grid, #quick-guides .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .quick-guides .grid, .quick-guides-grid, #quick-guides .grid{ grid-template-columns: 1fr; }
}

/* Make guide tiles look like our related cards */
.quick-guides a, .quick-guides-grid a, #quick-guides a{
  display:flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px;
  border-radius: var(--ds-radius);
  background: linear-gradient(180deg, var(--ds-glass-2) 0%, var(--ds-glass) 100%);
  border: 1px solid var(--ds-stroke-2);
  box-shadow: var(--ds-shadow);
  text-decoration: none !important;
  color: rgba(2,6,23,.86) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.quick-guides a:hover, .quick-guides-grid a:hover, #quick-guides a:hover{
  transform: translateY(-1px);
  border-color: rgba(22,163,74,.24);
  box-shadow: var(--ds-shadow-hover);
}

/* Related section (keep v10 robust selectors, but ensure visual matches DS) */
.related ul.ul a, #relacionados ul.ul a, ul.ul.related-list a{
  background: linear-gradient(180deg, var(--ds-glass-2) 0%, var(--ds-glass) 100%) !important;
  border-radius: var(--ds-radius) !important;
}

/* Footer: premium + aligned */
footer{
  border-top: 1px solid var(--ds-stroke-2);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
footer a{ opacity: .92; }
footer a:hover{ opacity: 1; }

/* Reduce “too much empty white” */
section, .section{ padding-top: clamp(18px, 3vw, 34px); padding-bottom: clamp(18px, 3vw, 34px); }


/* === v11 subtle grain (premium, reduces banding) === */
body::after{
  /* keep existing overlay; add a tiny grain via multiple gradients (CSS-only) */
  background:
    radial-gradient(1200px 700px at 55% 6%, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.44) 40%, rgba(255,255,255,.78) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.010) 0 1px, rgba(0,0,0,0) 1px 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.010) 0 1px, rgba(0,0,0,0) 1px 3px);
}
@media (prefers-reduced-motion: reduce){
  body::after{
    background:
      radial-gradient(1200px 700px at 55% 6%, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 70%),
      linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.44) 40%, rgba(255,255,255,.78) 100%);
  }
}

/* ============================================================
   v12 AUDIT FIXES (catch remaining "old" sections/components)
   - Unify tables, callouts, accordions/details, legacy lists
   - Force green-only accents defensively
   ============================================================ */

:root{
  --accent: var(--ds-accent, #16a34a);
  --accent-2: var(--ds-accent-2, #12803a);
  --accent-ink: var(--ds-accent-ink, #0f6a30);
  --accent-soft: var(--ds-accent-soft, rgba(22,163,74,.10));
  --accent-soft-2: var(--ds-accent-soft-2, rgba(22,163,74,.14));
}

/* Defensive: if any component uses "primary" color vars, keep it green */
*[style*="#16a34a"], *[style*="#16a34a"], *[style*="#16a34a"]{ filter: hue-rotate(85deg) saturate(1.3); }

/* TABLES: make results + any tables look premium and consistent */
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--ds-radius);
  background: linear-gradient(180deg, var(--ds-glass-2) 0%, var(--ds-glass) 100%);
  border: 1px solid var(--ds-stroke-2);
  box-shadow: var(--ds-shadow);
}
th, td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  color: rgba(2,6,23,.82);
}
th{
  font-weight: 700;
  color: rgba(2,6,23,.90);
  background: rgba(255,255,255,.50);
}
tr:last-child td{ border-bottom: 0; }

/* CALLOUTS / NOTES / ALERTS */
.note, .callout, .alert, .warning, .info, .tip,
.box-note, .box-info, .box-warning{
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(22,163,74,.22) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.05) !important;
}
.note::before, .callout::before, .info::before, .tip::before{
  content: "";
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(22,163,74,.10), rgba(22,163,74,.55), rgba(22,163,74,.10));
  margin-bottom: 10px;
}

/* DETAILS / ACCORDION (e.g., Transparencia) */
details{
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--ds-radius);
  box-shadow: 0 14px 34px rgba(2,6,23,.05);
  padding: 10px 14px;
}
details > summary{
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  color: rgba(2,6,23,.86);
}
details > summary::-webkit-details-marker{ display:none; }
details > summary::after{
  content: "▾";
  float: right;
  color: rgba(15,106,48,.90);
}
details[open] > summary::after{ content: "▴"; }
details p, details li{ color: rgba(2,6,23,.70); }

/* Legacy UL list pills: if a list uses .ul but isn't within #relacionados, keep it clean */
ul.ul{
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  gap: 10px;
}
ul.ul > li{ margin: 0; }
ul.ul > li > a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--ds-radius);
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(2,6,23,.05);
  text-decoration: none !important;
  color: rgba(2,6,23,.86) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
ul.ul > li > a:hover{
  transform: translateY(-1px);
  border-color: rgba(22,163,74,.24);
  box-shadow: var(--ds-shadow-hover);
}
ul.ul > li > a::before{
  content: "↗";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(22,163,74,.14);
  border: 1px solid rgba(22,163,74,.18);
  color: rgba(15,106,48,.95);
  flex: 0 0 28px;
  font-size: 14px;
  line-height: 1;
}

/* Respect related section special layout (keep v10/v11 grid) */
#relacionados ul.ul, .related ul.ul, ul.ul.related-list{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px){
  #relacionados ul.ul, .related ul.ul, ul.ul.related-list{ grid-template-columns: 1fr; }
}

/* ===========================
   PATCH v13 — Coherència final
   (UI/UX + coherència marca)
   =========================== */

/* Footer legal links (class="links" exists in HTML) */
footer .links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin: 10px 0 0;
}
footer .links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow3);
}
footer .links a:hover{
  background: rgba(255,255,255,.9);
  border-color: rgba(22,163,74,.30);
  transform: translateY(-1px);
}

/* Callout title (was unstyled) */
.callout-title{
  font-weight:800;
  font-size:13px;
  letter-spacing:-.01em;
  margin:0 0 8px;
  color: var(--text);
}

/* Inline CTA (used in 3 pages) — unify to same brand look */
.cta-inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  margin-top:14px;
  border-radius: var(--ds-radius);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(22,163,74,.22);
  box-shadow: var(--ds-shadow);
}
.cta-inline p{ margin:0; }
.cta-inline .btn{ flex:0 0 auto; }

/* Disclosure blocks inside CTA cards (class="details" + details-body exist in HTML) */
details.details{ margin-top:12px; }
.details-body{ padding-top:10px; }
details.details .details-body .card-pad{
  padding:0;
  background: transparent;
  border:0;
  box-shadow:none;
}

/* 3-column summary grid (firmar-no-conforme.html) */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}
@media (max-width: 900px){
  .grid3{ grid-template-columns:1fr; }
}
.grid3 .box h3{ margin:0 0 6px; font-size:15px; }
.grid3 .box p{ margin:0; color: var(--muted); line-height:1.6; }

/* Tables: wrap for mobile overflow */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 560px){
  .table-wrap table{ min-width: 640px; }
}

/* Kill bluish tints (no blue/cyan accents) */
.box.result-box{ background: linear-gradient(180deg, #ffffff, var(--bg2)); }
.toc{ background: linear-gradient(180deg, #ffffff 0%, var(--bg2) 100%); }
.micro-note, .info-text{ color: var(--text); }
.tag{ color: var(--text); }

/* ==============================
   PATCH FASE 2 — UNIFICACIO VISUAL
   Objectiu: coherencia total de marca
   (sense frameworks, sense tocar logica calculadora)
================================== */

:root{
  /* Focus/outline tokens (missing in v52) */
  --ring: rgba(22,163,74,.45);
  --focus-ring: 0 0 0 4px rgba(22,163,74,.24);
}


/* 1) Botons: unificar "primary" amb el look de CTA (gradient verd existent) */
.btn.primary,
a.btn.primary,
button.btn.primary{
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 30px rgba(22,163,74,.26);
}
.btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(22,163,74,.30);
  filter: saturate(105%);
}
.btn.primary:active{ transform: translateY(0); }

.btn.primary:focus-visible,
.btn-primary:focus-visible,
a.cta:focus-visible,
button.cta:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}


/* 2) Eliminar variants legacy (mantingudes com a alias per coherencia visual) */
.btn-primary{
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  color:#fff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 30px rgba(22,163,74,.26) !important;
}
.btn-secondary,
.btn-outline,
.btn-ghost{
  background: rgba(0,0,0,.04) !important;
  border-color: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover{ background: rgba(0,0,0,.06) !important; }

/* 3) Accions dins caixes: si el primer bloc es "result-actions", sense marge superior */
.box > .result-actions:first-child{ margin-top: 0; }

/* 4) Related: garantir que el grid s'aplica fins i tot si el markup ve d'una card */
#relacionados ul.ul.related-list,
#relacionados ul.ul.related-list li{ margin: 0; }

/* ==============================
   PATCH FASE 3 — ACCESSIBILITAT + UX
   - Missatges de validació suaus (sense alerts)
   - Feedback visual coherent amb tokens existents
================================== */

.calc-msg{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line2);
  border-radius: calc(var(--radius) - 6px);
  background: rgba(255,255,255,.65);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.calc-msg[data-type="error"]{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
}

.calc-msg[data-type="info"]{
  border-color: rgba(22,163,74,.30);
  background: rgba(22,163,74,.08);
}

/* ==============================
   PATCH FASE 4 — RESPONSIVE (320 / 375 / 768 / 1024 / 1440)
   Objectiu:
   - Zero scroll horitzontal (sense retalls)
   - Grids que col·lapsin bé
   - Media (img/video/iframe) sempre responsive
   - Padding consistent en mobile/tablet
================================== */

/* Safety: prevent accidental overflow from long strings/media */
html, body{ max-width:100%; }
main, header, footer, section, .container{ max-width:100%; }

/* Media elements */
img, video, iframe{
  max-width:100%;
  height:auto;
}

/* Forms: allow shrinking inside grids/flex */
input, select, textarea{
  max-width:100%;
  min-width:0;
}

/* Long words/URLs: break gracefully inside content areas */
.prose, .text, .help, .legal-mini, .breadcrumbs,
.prose a, .text a, footer .links a, .links-strip a, .faq-links a,
.toc a, .related a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Grid/flex children: avoid overflow due to intrinsic min-width */
.nav > *,
.footer-top > *,
.cols2 > *,
.calc-grid > *,
.calc-layout > *,
.site-meta > *,
.quicknav > *,
.row > *{
  min-width:0;
}

/* Ensure lists inside cards do not push width */
.ul, .ol, .toc ul{ max-width:100%; }

/* TOC nested levels: keep indentation within container */
.toc ul ul{
  padding-left:18px;
  margin-top:6px;
}

/* Tablet: switch to mobile nav earlier to avoid cramped header at 768 */
@media (max-width: 980px){
  .menu{ display:none !important; }
  .menu-btn{ display:flex !important; }
  .menu-mobile{ display:block !important; }

  /* Common 2-col layouts become single column on tablets */
  .cols2{ grid-template-columns: 1fr; }

  /* Footer top: stack to avoid tight wraps */
  .footer-top{ flex-direction:column; align-items:flex-start; }
}

/* Very small screens: keep paddings consistent and avoid tiny two-column UI */
@media (max-width: 520px){
  .cols2{ gap:12px; }
}

/* ==============================
   PATCH 2026-02-11 — A11y + Performance
   - Fix Lighthouse contrast issue on hero note link
   - Reduce GPU-heavy effects on mobile to improve LCP
================================== */
.hero-note-link{ color: var(--brandDark); }
.hero-note-link:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 10px;
}

@media (max-width: 768px){
  /* Background blur is expensive on mobile GPUs */
  body::before{ filter: blur(26px) saturate(125%); }

  /* Backdrop blur can hurt performance; keep the look with a slightly more opaque surface */
  .card, .box, .panel, .container-card{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,.78);
  }
}



/* ==============================
PATCH A11Y UX
- Field-level error text for aria-describedby
- Preserve existing design tokens/colors
================================ */
.help[data-error="true"]{
  color: rgba(239,68,68,.95);
}

/* ==============================
PATCH RESPONSIVE FINAL
Objectiu:
- 0 scroll horitzontal (320/375/768/1024/1440)
- Taules sense trencar layout (scroll dins el component)
- Media responsive
- Grids col·lapsen bé
- Padding coherent en pantalles petites
================================ */

/* 1) Extra safety: prevent accidental overflow from shadows/transforms */
html{ overflow-x:hidden; overflow-x:clip; }
body{ overflow-x:hidden; overflow-x:clip; }

/* Long strings/URLs: avoid layout overflow */
.prose,
.text{ overflow-wrap:anywhere; word-break:break-word; }
.prose a,
.text a{ overflow-wrap:anywhere; }

/* 2) Tables: if a table is not wrapped, keep it readable on mobile */
@media (max-width: 720px){
  .prose table,
  .text table,
  table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* 3) Media: prevent any embedded media from overflowing containers */
.prose img,
.prose video,
.prose iframe,
.text img,
.text video,
.text iframe{
  max-width:100%;
}
iframe{ display:block; }

/* 4) Grids: collapse any remaining multi-column content safely */
@media (max-width: 980px){
  .cols3,
  .cols3--guide{
    grid-template-columns: 1fr;
  }
}

/* 5) Lists with one-line descriptions: stack to avoid side-by-side overflow */
ul.ul > li{
  display:flex;
  flex-direction:column;
}
ul.ul > li > a{
  width:100%;
  flex-wrap:wrap;
  white-space:normal;
  min-width:0;
}
ul.ul > li > span.small{
  display:block;
  margin-top:8px;
  padding-left:42px;
}

/* 6) Buttons/links: allow wrapping on very small screens */
@media (max-width: 420px){
  .btn,
  a.btn,
  button.btn{
    white-space:normal;
    max-width:100%;
  }
}

/* 7) Padding: keep consistent rhythm on the smallest screens */
@media (max-width: 375px){
  .container{ padding-left:16px; padding-right:16px; }
  .card-pad{ padding:16px; }
  .box{ padding:14px; }
}


/* PATCH LEAD WIDGET */
#leadWidget{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  width: 360px;
  max-width: calc(100vw - 28px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
#leadWidget[data-show="true"]{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Keep it above the mobile floating CTA */
@media (max-width: 760px){
  #leadWidget{ left: 14px; right: 14px; width: auto; bottom: 86px; }
}

#leadWidget .links-strip{
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

#leadWidget .ex-row{ margin-top: 10px; }

#leadWidget [data-lead-close]{
  padding: 8px 10px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce){
  #leadWidget{ transition: none; transform: none; }
}