/* ==========================================================================
   Subvenciones CAE · Identidad corporativa — subvencionescae.com
   Paleta y tokens centralizados. Cualquier cambio de color se hace AQUÍ.
   ========================================================================== */

:root {
  /* --- Colores de marca (fuente única de verdad) --- */
  --marca-azul:         #102D4F;  /* Azul corporativo: logo, titulares, menú */
  --marca-verde:        #087F70;  /* Verde petróleo: identidad, iconos, texto verde */
  --marca-verde-oscuro: #07705F;  /* Verde petróleo oscuro: texto verde sobre fondo verde claro (AA) */
  --marca-ahorro:       #20B486;  /* Verde ahorro: botones principales, indicadores */
  --marca-ahorro-claro: #2BC894;  /* Verde ahorro claro: acentos sobre azul marino */
  --marca-verde-claro:  #EAF4F2;  /* Verde claro: fondos de tarjetas destacadas */
  --marca-verde-borde:  #C9E3DC;  /* Borde verde claro: contornos de bloques verdes */
  --marca-blanco-frio:  #F6F8FA;  /* Blanco frío: fondo general */
  --marca-blanco:       #FFFFFF;  /* Blanco: tarjetas y superficies */

  /* --- Escala azul, derivada del azul corporativo --- */
  --azul-950: #102D4F;
  --azul-900: #16395F;
  --azul-800: #1D4771;
  --azul-700: #255A8C;
  --azul-600: #2E6EA8;
  --azul-100: #DCE7F2;
  --azul-50:  #EFF5FA;

  /* --- Neutros --- */
  --gris-900: #14202E;
  --gris-700: #47566B;
  --gris-500: #5C6B7E;  /* Oscurecido para cumplir AA en textos pequeños (4.85:1 sobre verde claro) */
  --gris-300: #D5DCE4;
  --gris-200: #E7EBF0;
  --gris-100: #F6F8FA;
  --blanco:   #FFFFFF;
  --borde-control: #7E8C9C;  /* Borde de campos de formulario: 3:1 sobre blanco y verde claro (AA 1.4.11) */

  /* --- Semánticos --- */
  --acento: var(--marca-ahorro);  /* acentos sobre fondo azul marino */
  --ok:     #087F70;
  --no:     #A32B2B;

  --radio:    4px;
  --sombra-sm: 0 1px 2px rgba(16, 45, 79, .06);
  --sombra:    0 2px 4px rgba(16, 45, 79, .06), 0 10px 24px -12px rgba(16, 45, 79, .18);
  --max:      1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px; line-height: 1.65;
  color: var(--gris-900); background: var(--marca-blanco-frio);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-600); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--azul-900); }
em { font-style: normal; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.22; color: var(--azul-950); font-weight: 700; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -.022em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); letter-spacing: -.015em; }
h3 { font-size: 1.15rem; }
h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-500); }
p  { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }

.section { padding: 78px 0; }
.bg-light { background: var(--marca-blanco); border-top: 1px solid var(--gris-200); border-bottom: 1px solid var(--gris-200); }
.section-head { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.section-intro { color: var(--gris-700); margin: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--azul-950); color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- topbar */
.topbar { background: var(--azul-950); color: #c3d2e4; font-size: .8rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; flex-wrap: wrap; }
.topbar-brand { font-weight: 600; letter-spacing: .02em; color: #eaf0f7; }
.topbar-brand em { color: var(--marca-ahorro-claro); padding: 0 4px; }
.topbar-meta { color: #93a9c2; }

/* ------------------------------------------------------------- header */
.site-header { background: var(--marca-blanco); border-bottom: 1px solid var(--gris-300); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 78px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { width: 44px; height: 44px; flex: 0 0 auto; display: block; }
.brand-text { display: flex; flex-direction: column; font-size: 1.3rem; font-weight: 800; color: var(--marca-azul); letter-spacing: -.02em; line-height: 1.1; }
.brand-word { display: block; white-space: nowrap; }
.brand-text b { color: var(--marca-verde); font-weight: 800; }
.brand-text small { font-size: .68rem; font-weight: 500; letter-spacing: .04em; color: var(--gris-500); text-transform: uppercase; }
.main-nav { display: flex; gap: 26px; flex-wrap: wrap; }
.main-nav a { color: var(--gris-700); font-size: .95rem; font-weight: 500; padding: 8px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: var(--azul-800); border-bottom-color: var(--marca-verde); text-decoration: none; }
.nav-cta { white-space: nowrap; }
.lbl-short { display: none; }

/* ---------------------------------------------------------- breadcrumb */
.breadcrumb { background: var(--marca-blanco); border-bottom: 1px solid var(--gris-200); font-size: .82rem; color: var(--gris-500); }
.breadcrumb ol { list-style: none; margin: 0; padding: 10px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--gris-300); }
.breadcrumb a { color: var(--gris-700); }

/* -------------------------------------------------------------- botones */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: var(--radio);
  font-weight: 600; font-size: .95rem; text-align: center; border: 1px solid transparent;
  cursor: pointer; transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.btn-primary { background: var(--marca-ahorro); color: var(--marca-azul); font-weight: 700; box-shadow: var(--sombra-sm); }
.btn-primary:hover { background: var(--marca-ahorro-claro); color: var(--marca-azul); text-decoration: none; transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 3px solid var(--marca-verde); outline-offset: 2px; }
.btn-ghost { background: var(--marca-blanco); color: var(--azul-800); border-color: var(--gris-300); }
.btn-ghost:hover { border-color: var(--marca-verde); color: var(--marca-verde); text-decoration: none; }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-block { display: block; width: 100%; }

/* ---------------------------------------------------------------- hero */
.hero { background: linear-gradient(180deg, var(--azul-50) 0%, var(--marca-blanco-frio) 70%); border-bottom: 1px solid var(--gris-200); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 56px; }
.eyebrow {
  display: inline-block; margin: 0 0 18px; padding: 6px 13px;
  background: var(--marca-blanco); border: 1px solid var(--gris-300); border-left: 3px solid var(--marca-verde);
  color: var(--marca-verde); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.hero-lead { font-size: 1.13rem; color: var(--gris-700); max-width: 56ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.hero-trust { list-style: none; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid var(--gris-300); display: grid; gap: 10px; }
.hero-trust li { position: relative; padding-left: 28px; font-size: .93rem; color: var(--gris-700); }
.hero-trust li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; }
.hero-media { position: relative; }
.hero-media img { width: 100%; border-radius: var(--radio); border: 1px solid var(--gris-300); box-shadow: var(--sombra); }
.hero-badge {
  position: absolute; left: -14px; bottom: 24px;
  background: var(--azul-900); color: #fff; padding: 14px 20px; border-radius: var(--radio);
  box-shadow: var(--sombra); border-left: 3px solid var(--marca-ahorro); display: flex; flex-direction: column;
}
.hero-badge-value { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.hero-badge-label { font-size: .78rem; color: #b9c8da; }

/* --------------------------------------------------------------- stats */
.stats {
  list-style: none; margin: 0 0 56px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--marca-blanco); border: 1px solid var(--gris-300); border-radius: var(--radio); box-shadow: var(--sombra);
}
.stats li { padding: 24px 26px; border-right: 1px solid var(--gris-200); }
.stats li:last-child { border-right: 0; }
.stat-value { display: block; font-size: 1.85rem; font-weight: 800; color: var(--marca-verde); letter-spacing: -.02em; line-height: 1.1; }
.stat-label { display: block; font-size: .84rem; color: var(--gris-500); margin-top: 4px; }

/* ------------------------------------------------------------ audiencias */
.audiences { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.audience-card {
  background: var(--marca-blanco); border: 1px solid var(--gris-300); border-radius: var(--radio);
  padding: 34px 34px 30px; box-shadow: var(--sombra-sm); display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.audience-card:hover { box-shadow: var(--sombra); transform: translateY(-3px); border-color: var(--marca-ahorro); }
.audience-icon {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--marca-verde-claro); color: var(--marca-verde); border: 1px solid var(--marca-verde-borde); border-radius: 3px;
}
.audience-card h3 { font-size: 1.25rem; }
.audience-card > p { color: var(--gris-700); font-size: .96rem; }
.audience-list { list-style: none; margin: 6px 0 22px; padding: 0; }
.audience-list li { position: relative; padding: 7px 0 7px 26px; font-size: .93rem; color: var(--gris-700); border-bottom: 1px solid var(--gris-200); }
.audience-list li:last-child { border-bottom: 0; }
.audience-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--marca-verde); }
.link-arrow { margin-top: auto; font-weight: 600; font-size: .93rem; color: var(--marca-verde); }
.link-arrow::after { content: " \2192"; }

/* ------------------------------------------------------------- facturas */
.bill-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.bill-copy h2 { margin-top: 0; }
.bill-copy .check-list { margin: 22px 0 28px; }
.bill-panel { background: var(--azul-950); color: #d7e2f0; border-radius: var(--radio); padding: 32px 34px; box-shadow: var(--sombra); }
.bill-panel h3 { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .16); padding-bottom: 14px; }
.bill-list { list-style: none; margin: 0; padding: 0; }
.bill-list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .95rem; }
.bill-list li:last-child { border-bottom: 0; }
.bill-list span { font-size: .8rem; font-weight: 700; color: var(--marca-ahorro-claro); letter-spacing: .04em; }
.bill-note { margin: 20px 0 0; font-size: .82rem; color: #9fb3ca; }

/* --------------------------------------------------------------- bloques */
.aeo-block { background: var(--marca-blanco); border: 1px solid var(--gris-300); border-left: 4px solid var(--marca-verde); border-radius: var(--radio); padding: 30px 34px; margin-bottom: 44px; box-shadow: var(--sombra-sm); }
.aeo-block h2 { margin-top: 0; }
.aeo-block p:last-child { margin-bottom: 0; }
.text-content { max-width: 78ch; }
.text-content h2 { margin-top: 8px; }

/* --------------------------------------------------------------- proceso */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: paso; }
.step { position: relative; background: var(--marca-blanco); border: 1px solid var(--gris-300); border-top: 3px solid var(--marca-verde); border-radius: var(--radio); padding: 26px 24px; box-shadow: var(--sombra-sm); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 14px; background: var(--marca-verde); color: #fff; border-radius: 50%; font-weight: 700; font-size: .9rem; }
.step h3 { margin-bottom: .35em; font-size: 1.06rem; }
.step p { margin: 0; font-size: .93rem; color: var(--gris-700); }

/* ------------------------------------------------------------ actuaciones */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.card { background: var(--marca-blanco); border: 1px solid var(--gris-300); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-sm); display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s; }
.card:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--gris-200); }
.card-content { padding: 24px 26px; }
.card-content h3 { margin-bottom: .3em; }
.card-plain { border-top: 3px solid var(--marca-verde); }
.card-plain .card-content { padding-top: 28px; }
.card-tag { display: inline-block; margin: 0 0 12px; padding: 3px 10px; background: var(--marca-verde-claro); border: 1px solid var(--marca-verde-borde); border-radius: 999px; color: var(--marca-verde-oscuro); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.card-content p:last-child { margin-bottom: 0; color: var(--gris-700); font-size: .94rem; }

/* ------------------------------------------------------------- requisitos */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.panel { background: var(--marca-blanco); border: 1px solid var(--gris-300); border-radius: var(--radio); padding: 28px 30px; box-shadow: var(--sombra-sm); }
.panel h3 { padding-bottom: 12px; border-bottom: 1px solid var(--gris-200); }
.check-list, .cross-list { list-style: none; margin: 0; padding: 0; }
.check-list li, .cross-list li { position: relative; padding: 11px 0 11px 30px; font-size: .94rem; border-bottom: 1px solid var(--gris-200); color: var(--gris-700); }
.check-list li:last-child, .cross-list li:last-child { border-bottom: 0; }
.check-list li::before { content: "\2713"; position: absolute; left: 0; top: 11px; color: var(--ok); font-weight: 700; }
.cross-list li::before { content: "\2715"; position: absolute; left: 0; top: 11px; color: var(--no); font-weight: 700; }

/* ------------------------------------------------------------ calculadora */
.calculator-box { background: var(--marca-verde-claro); border: 1px solid var(--marca-verde-borde); border-top: 4px solid var(--marca-ahorro); border-radius: var(--radio); padding: 40px 44px; max-width: 880px; margin: 0 auto; box-shadow: var(--sombra); }
.calculator-box > p { color: var(--gris-700); max-width: 70ch; }
.form { margin-top: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-group { margin-bottom: 22px; border: 0; padding: 0; }
.form-group label, .form-group legend { display: block; margin-bottom: 7px; font-size: .88rem; font-weight: 600; color: var(--azul-900); }
.form-group input[type="text"], .form-group select { width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit; color: var(--gris-900); background: var(--marca-blanco); border: 1px solid var(--borde-control); border-radius: var(--radio); transition: border-color .15s, box-shadow .15s; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--marca-verde); box-shadow: 0 0 0 3px rgba(8, 127, 112, .18); }
.radio-group { display: flex; gap: 26px; flex-wrap: wrap; padding-top: 4px; }
.radio-group label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--gris-700); margin: 0; }
.form-note { margin: 14px 0 0; font-size: .82rem; color: var(--gris-500); text-align: center; }

/* ------------------------------------------------------------------- faq */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { background: var(--marca-blanco); border: 1px solid var(--gris-300); border-radius: var(--radio); margin-bottom: 12px; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 20px 24px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: 0 0 auto; font-size: 1.5rem; font-weight: 400; color: var(--marca-verde); line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary h3 { margin: 0; font-size: 1.02rem; }
.faq-item p { margin: 0; padding: 0 24px 22px; color: var(--gris-700); font-size: .94rem; }

/* -------------------------------------------------------------- cta final */
.cta-final { background: var(--azul-950); color: #fff; }
.cta-final h2 { color: #fff; }
.cta-final .section-intro { color: #b7c8dd; margin-bottom: 28px; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--azul-950); color: #b7c8dd; padding: 60px 0 0; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.footer-brand img { width: 34px; height: 34px; flex: 0 0 auto; }
.footer-logo { font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.02em; }
.footer-logo span { color: var(--marca-ahorro-claro); padding-left: 4px; }
.footer-note { margin: 0 0 14px; max-width: 44ch; color: #93a9c2; }
.footer-group { margin: 0; font-size: .88rem; color: #93a9c2; }
.footer-group a { color: #eaf0f7; text-decoration: underline; text-underline-offset: 2px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { margin: 0 0 4px; color: #8fa6bf; }
.footer-col a { color: #c9d6e6; }
.footer-bottom { padding: 22px 24px 30px; }
.footer-bottom p { margin: 0; font-size: .82rem; color: #7f95ae; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li:nth-child(2) { border-right: 0; }
  .stats li:nth-child(1), .stats li:nth-child(2) { border-bottom: 1px solid var(--gris-200); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .bill-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 52px 0; }
  .header-inner { min-height: 60px; padding-top: 9px; padding-bottom: 9px; gap: 12px; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .brand-logo { width: 38px; height: 38px; }
  .brand-text { font-size: 1.06rem; }
  .brand-text small { display: none; }
  .main-nav { order: 3; width: 100%; gap: 14px; font-size: .86rem; padding-top: 6px; border-top: 1px solid var(--gris-200); }
  .nav-cta { order: 2; margin-left: auto; padding: 9px 14px; font-size: .82rem; }
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
  .hero-grid { padding-top: 44px; padding-bottom: 40px; }
  .hero-badge { left: 12px; bottom: 12px; padding: 11px 15px; }
  .stats { grid-template-columns: 1fr; margin-bottom: 40px; }
  .stats li { border-right: 0; border-bottom: 1px solid var(--gris-200); }
  .stats li:last-child { border-bottom: 0; }
  .audiences { grid-template-columns: 1fr; }
  .audience-card { padding: 28px 24px 26px; }
  .steps { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .calculator-box { padding: 28px 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   Páginas interiores: cabecera compacta, legales y fichas de datos
   ========================================================================== */

.page-hero { background: var(--azul-50); border-bottom: 1px solid var(--gris-200); padding: 54px 0 46px; }
.page-hero h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: .35em; }
.page-hero p { max-width: 72ch; color: var(--gris-700); margin: 0; }
.page-hero .eyebrow { margin-bottom: 14px; }

.legal-layout { display: grid; grid-template-columns: 258px 1fr; gap: 52px; align-items: start; padding: 56px 24px 84px; }

.legal-toc { position: sticky; top: 100px; background: var(--marca-blanco); border: 1px solid var(--gris-300); border-radius: var(--radio); padding: 22px 24px; box-shadow: var(--sombra-sm); }
.legal-toc h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--gris-500); margin: 0 0 14px; font-weight: 700; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { font-size: .87rem; color: var(--gris-700); line-height: 1.4; display: block; }
.legal-toc a::before { content: counter(toc) ". "; color: var(--marca-verde); font-weight: 600; }
.legal-toc a:hover { color: var(--azul-800); }

.prose { max-width: 78ch; }
.prose h2 { font-size: 1.3rem; margin: 46px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--gris-200); scroll-margin-top: 100px; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { font-size: 1.02rem; margin: 28px 0 8px; color: var(--azul-900); }
.prose p, .prose li { color: var(--gris-700); }
.prose ul, .prose ol { margin: 12px 0; padding-left: 22px; }
.prose li { margin: 7px 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: 10px 13px; border: 1px solid var(--gris-300); vertical-align: top; }
.prose th { background: var(--marca-blanco-frio); color: var(--azul-900); font-size: .79rem; text-transform: uppercase; letter-spacing: .05em; }
.prose code { background: var(--marca-blanco-frio); padding: 1px 6px; border-radius: 3px; font-size: .88em; color: var(--azul-800); }

.legal-meta { background: var(--marca-blanco); border: 1px solid var(--gris-300); border-left: 4px solid var(--marca-verde); border-radius: var(--radio); padding: 24px 28px; margin: 0 0 38px; box-shadow: var(--sombra-sm); }
.legal-meta dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; gap: 10px 20px; font-size: .94rem; }
.legal-meta dt { color: var(--gris-500); font-weight: 600; }
.legal-meta dd { margin: 0; color: var(--gris-900); }
.legal-meta dd a { color: var(--azul-600); }

.updated { display: inline-block; font-size: .8rem; color: var(--gris-500); letter-spacing: .02em; }

.callout { background: var(--marca-verde-claro); border: 1px solid var(--marca-verde-borde); border-left: 4px solid var(--marca-verde); border-radius: var(--radio); padding: 20px 24px; margin: 24px 0; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--azul-900); }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.info-card { background: var(--marca-blanco); border: 1px solid var(--gris-300); border-top: 3px solid var(--marca-verde); border-radius: var(--radio); padding: 26px 28px; box-shadow: var(--sombra-sm); }
.info-card h3 { font-size: 1.02rem; margin-bottom: .4em; }
.info-card p { margin: 0; font-size: .93rem; color: var(--gris-700); }
.info-card p + p { margin-top: 10px; }

.form-status { display: none; margin: 18px 0 0; padding: 13px 17px; border-radius: var(--radio); font-size: .92rem; }
.form-status.ok { display: block; background: #e8f4ec; border: 1px solid #b7ddc6; color: var(--marca-verde-oscuro); }
.form-status.error { display: block; background: #fbeaea; border: 1px solid #e8c4c4; color: var(--no); }

.consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 22px; }
.consent input[type="checkbox"] { margin-top: 4px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--marca-verde); }
.consent label { font-size: .86rem; font-weight: 500; color: var(--gris-700); line-height: 1.5; margin: 0; }
.consent a { text-decoration: underline; text-underline-offset: 2px; }

.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; padding: 18px 24px 0; }
.footer-legal a { color: #c9d6e6; font-size: .85rem; }

@media (max-width: 1024px) {
  .legal-layout { grid-template-columns: 1fr; gap: 30px; padding: 40px 24px 64px; }
  .legal-toc { position: static; }
  .legal-toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
  .info-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .page-hero { padding: 36px 0 32px; }
  .info-grid { grid-template-columns: 1fr; }
  .legal-meta { padding: 20px 22px; }
  .legal-meta dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-meta dt { margin-top: 10px; }
  .footer-legal { padding: 16px 24px 0; gap: 14px; }
}