@import url("fonts.css");
:root {
  /* primitivos */
  --navy-900: #0B2447;  --navy-700: #17396B;  --blue-500: #1E5AA8;  --blue-050: #F0F5FB;
  --green-700: #2F7323; --green-600: #3E8E2F; --green-500: #5EA83C; --green-100: #E6F3E1;
  --ink-900: #151A21;   --ink-600: #566270;
  --line-300: #D3D9E2;  --surface-100: #EEF2F6; --surface-50: #F8FAFC; --white: #FFFFFF;
  --amber-100: #FBF3DC; --amber-800: #6B4A00;
  --overlay-hero: rgb(255 255 255 / 0.08);        /* patrón geométrico del hero */
  --overlay-shape-green: rgb(94 168 60 / 0.18);   /* formas decorativas del hero */
  --overlay-shape-blue: rgb(255 255 255 / 0.07);
  --overlay-backdrop: rgb(11 36 71 / 0.6);        /* ::backdrop del dialog (navy al 60 %) */
  --shadow-soft: 0 10px 28px rgb(11 36 71 / 0.10);
  /* semánticos (los componentes usan solo estos) */
  --color-bg: var(--white);            --color-surface: var(--surface-50);  --color-surface-2: var(--surface-100);
  --color-surface-3: var(--blue-050);
  --color-text: var(--ink-900);        --color-text-muted: var(--ink-600);  --color-line: var(--line-300);
  --color-primary: var(--navy-900);    --color-primary-2: var(--navy-700);  --color-link: var(--blue-500);
  --color-accent: var(--green-600);    --color-accent-2: var(--green-500);
  --color-accent-dark: var(--green-700); --color-accent-soft: var(--green-100);
  --color-notice-bg: var(--amber-100); --color-notice-text: var(--amber-800);
  /* tipografía y espaciado */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius: 8px; --measure: 68ch; --container: 1140px;
}

/* ---------- reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); }
img { max-width: 100%; height: auto; }
a { color: var(--color-link); transition: color .15s, background-color .15s, border-color .15s; }
a:hover { color: var(--color-primary); }
p { max-width: var(--measure); }
ul, ol { padding-left: var(--space-6); }

/* ---------- escala tipográfica ---------- */
h1 { font-family: var(--font-serif); font-size: 2.25rem; line-height: 1.2; font-weight: 700; margin: 0 0 var(--space-4); }
h2 { font-family: var(--font-serif); font-size: 1.875rem; line-height: 1.3; font-weight: 600; margin: var(--space-8) 0 var(--space-4); }
h3 { font-family: var(--font-sans); font-size: 1.5rem; line-height: 1.4; font-weight: 600; margin: 0 0 var(--space-2); }
small, .small { font-size: 0.875rem; line-height: 1.5; }
.muted { color: var(--color-text-muted); }
.eyebrow { display: block; color: var(--color-accent-dark); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-2); }
.eyebrow + h2 { margin-top: 0; }

/* ---------- layout ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--space-12); }
.section--alt { background: var(--color-surface-3); }
.section__intro { margin-bottom: var(--space-8); }
.intro { padding-top: var(--space-8); }

:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }

.skip-link { position: absolute; left: -999px; top: var(--space-4); background: var(--color-primary); color: var(--color-bg); padding: var(--space-2) var(--space-4); border-radius: var(--radius); }
.skip-link:focus { left: var(--space-4); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header y navegación ---------- */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--color-bg); border-top: 4px solid var(--color-accent); border-bottom: 1px solid var(--color-line); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: var(--shadow-soft); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); }
.site-header__logo img { display: block; height: 56px; width: auto; }
.nav-toggle { display: grid; gap: 5px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 12px; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle__barra { display: block; width: 18px; height: 2px; background: var(--color-primary); border-radius: 1px; transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav { display: none; flex-basis: 100%; padding-block: var(--space-2) var(--space-4); }
.site-nav.is-open { display: block; }
.site-nav__list, .nav-sub__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.site-nav a:not(.btn) { color: var(--color-text); font-weight: 500; text-decoration: none; padding: var(--space-2) 0; display: inline-block; }
.site-nav a:not(.btn):hover, .site-nav a:not(.btn)[aria-current="page"] { color: var(--color-primary); }
.site-nav__cta { margin-top: var(--space-2); }
.btn--sm { padding: 8px 16px; font-size: 0.9375rem; }
.nav-sub summary { display: flex; align-items: center; gap: var(--space-1); cursor: pointer; font-weight: 500; padding-block: var(--space-2); list-style: none; color: var(--color-text); }
.nav-sub summary::-webkit-details-marker { display: none; }
.nav-sub summary:hover { color: var(--color-primary); }
.nav-sub__chevron { width: 16px; height: 16px; transition: transform .2s; }
.nav-sub[open] .nav-sub__chevron { transform: rotate(180deg); }
.nav-sub__list { padding-left: var(--space-4); }
.nav-sub__list a:not(.btn) { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2); border-radius: var(--radius); }
.nav-sub__list a:not(.btn):hover { background: var(--color-surface-3); }
.nav-sub__icono { width: 22px; height: 22px; color: var(--color-accent-dark); flex: none; }
.nav-sub__nombre { display: block; font-weight: 600; line-height: 1.3; }
.nav-sub__desc { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); line-height: 1.3; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--color-bg); padding-block: var(--space-16); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 70%, var(--color-link) 100%); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 520px; height: 520px; right: -140px; top: -220px; background: var(--overlay-shape-green); }
.hero::after { width: 360px; height: 360px; right: 180px; bottom: -240px; background: var(--overlay-shape-blue); }
.hero .container { position: relative; }
.hero .eyebrow { color: var(--color-accent-2); }
.hero h1 { font-size: 3rem; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--space-4); max-width: 18ch; }
.hero p { margin: 0 0 var(--space-6); font-size: 1.125rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero--interior { padding-block: var(--space-12); }
.hero--interior h1 { font-size: 2.25rem; line-height: 1.2; letter-spacing: 0; max-width: none; }

/* ---------- botones ---------- */
.btn { display: inline-block; background: var(--color-primary); color: var(--color-bg); border: 1px solid var(--color-primary); border-radius: var(--radius); padding: 12px 24px; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
.btn:hover { background: var(--color-primary-2); border-color: var(--color-primary-2); color: var(--color-bg); }
.btn--outline { background: transparent; color: var(--color-primary); }
.btn--outline:hover { background: var(--color-surface-2); color: var(--color-primary); }
.btn--acento { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-bg); }
.btn--acento:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn--fantasma { background: transparent; color: var(--color-bg); border-color: var(--color-bg); }
.btn--fantasma:hover { background: var(--color-bg); color: var(--color-primary); }

/* ---------- tarjetas ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.card { border: 1px solid var(--color-line); border-top: 4px solid var(--color-accent); background: var(--color-bg); border-radius: var(--radius); padding: var(--space-6); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-soft); }
.card__icon-wrap { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-dark); margin-bottom: var(--space-4); }
.card__icon { width: 28px; height: 28px; }
.card h3 { font-size: 1.25rem; }
.card p { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.card a:not(.btn) { font-weight: 600; color: var(--color-accent-dark); text-decoration: none; }
.card a:not(.btn):hover { color: var(--color-primary); text-decoration: underline; }

/* ---------- cifras ---------- */
.stats { background: var(--color-primary); color: var(--color-bg); padding-block: var(--space-12); }
.stats__list { display: grid; grid-template-columns: 1fr; gap: var(--space-6); list-style: none; margin: 0; padding: 0; text-align: center; }
.stats__cifra { margin: 0; max-width: none; font-family: var(--font-serif); font-size: 2.75rem; line-height: 1.1; font-weight: 700; color: var(--color-accent-2); }
.stats__etiqueta { margin: 0; max-width: none; font-size: 1rem; color: var(--color-bg); }
.stats__cta { text-align: center; margin: var(--space-8) auto 0; font-weight: 500; }
.stats__cta a { color: var(--color-bg); }
.stats__cta a:hover { color: var(--color-accent-2); }

/* ---------- ficha de producto ---------- */
.ficha { padding-block: var(--space-8); }
.ficha + .ficha { border-top: 1px solid var(--color-line); }
.ficha__datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-6); padding: var(--space-4); border: 1px solid var(--color-line); border-left: 4px solid var(--color-accent); border-radius: var(--radius); background: var(--color-surface-3); }
.ficha__datos dt { font-weight: 600; }
.ficha__datos dd { margin: 0; }
.lista { margin: 0 0 var(--space-6); padding-left: var(--space-6); }
.lista li { margin-bottom: var(--space-1); }
.aviso { background: var(--color-notice-bg); color: var(--color-notice-text); border-left: 4px solid var(--color-notice-text); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-4); margin: var(--space-6) 0; max-width: var(--measure); }
.aviso p { margin: 0; color: inherit; }
.cat { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.3; font-weight: 600; color: var(--color-text); margin: var(--space-6) 0; }
.cat small { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; display: block; margin-top: var(--space-2); }
.dependencias { margin: 0 0 var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); max-width: var(--measure); }
.dependencias summary { cursor: pointer; font-weight: 500; }
.dependencias .lista { margin: var(--space-3) 0 0; columns: 2; }

/* ---------- leyenda legal ---------- */
.notice-legal { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); font-size: 0.875rem; line-height: 1.5; color: var(--color-text); max-width: none; }
.notice-legal p { max-width: none; margin: 0; }
.notice-legal a { overflow-wrap: anywhere; }
.notice-legal { text-wrap: pretty; }

/* ---------- UNE, valores y sellos ---------- */
.une { display: grid; gap: var(--space-2); }
.une address { font-style: normal; }
.valores { margin: 0; max-width: var(--measure); }
.valores dt { font-weight: 600; margin-top: var(--space-4); }
.valores dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
.sellos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8); list-style: none; margin: 0; padding: var(--space-6) 0; }
.sellos img { max-height: 72px; width: auto; }

/* ---------- formulario ---------- */
.form { display: grid; gap: var(--space-4); max-width: 560px; }
.form__field { display: grid; gap: var(--space-1); }
.form label { font-weight: 500; }
.form input, .form select, .form textarea { font: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-3); height: 44px; width: 100%; }
.form textarea { height: auto; min-height: calc(6 * 1.6em + 2 * var(--space-3)); resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }
.form__error { font-size: 0.875rem; color: var(--color-notice-text); margin: 0; min-height: 1.5em; }
.form__status { margin: 0; font-weight: 500; }

/* ---------- dialog ---------- */
.dialog { width: min(92vw, 680px); max-height: 88vh; overflow: hidden; padding: 0; border: 0; border-radius: var(--radius); color: var(--color-text); background: var(--color-bg); box-shadow: var(--shadow-soft); display: none; flex-direction: column; }
.dialog[open] { display: flex; }
.dialog::backdrop { background: var(--overlay-backdrop); }
.dialog__cabecera { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-6); background: var(--color-primary); color: var(--color-bg); border-top: 6px solid var(--color-accent); }
.dialog__icono { width: 40px; height: 40px; color: var(--color-accent-2); }
.dialog__eyebrow { display: block; color: var(--color-accent-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.dialog__cabecera h2 { margin: 0; color: var(--color-bg); font-size: 1.5rem; }
.dialog__cerrar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-primary-2); background: transparent; color: var(--color-bg); cursor: pointer; transition: background-color .15s, border-color .15s; }
.dialog__cerrar:hover { background: var(--color-primary-2); }
.dialog__cerrar svg { width: 18px; height: 18px; }
.dialog__cuerpo { padding: var(--space-6); overflow: auto; }
.dialog__cuerpo p { max-width: none; margin: 0 0 var(--space-4); }
.dialog__cuerpo .aviso { margin: 0 0 var(--space-4); }
.dialog__lema { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 700; color: var(--color-primary); }
.dialog__reporte { background: var(--color-surface-3); border-radius: var(--radius); padding: var(--space-4); }
.dialog__reporte h3 { font-size: 1rem; margin: 0 0 var(--space-2); color: var(--color-primary); }
.dialog__reporte p { font-size: 0.9375rem; }
.dialog__reporte a { font-weight: 600; white-space: nowrap; }
.dialog__recuerda { margin-bottom: 0; }
.dialog__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-line); background: var(--color-surface); }
.dialog__pie a { font-weight: 500; }

/* ---------- mapa ---------- */
.mapa { width: 100%; height: 450px; border: 0; display: block; border-radius: var(--radius); }

/* ---------- footer ---------- */
.site-footer { background: var(--color-primary); color: var(--color-bg); padding-block: var(--space-12) var(--space-8); margin-top: var(--space-16); border-top: 4px solid var(--color-accent); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
.site-footer__brand { display: grid; gap: var(--space-4); align-content: start; }
.site-footer__logo { display: inline-block; background: var(--color-bg); border-radius: var(--radius); padding: var(--space-2) var(--space-3); width: max-content; }
.site-footer__logo img { display: block; height: 48px; width: auto; }
.site-footer__lema { margin: 0; color: var(--color-line); max-width: 36ch; }
.site-footer__title { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-2); margin: 0 0 var(--space-3); }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { padding-block: var(--space-1); }
.site-footer__list a, .site-footer__address a, .sellos a { display: inline-block; padding-block: var(--space-1); }
.site-footer__list a, .site-footer__address a { color: var(--color-bg); text-decoration: none; }
.site-footer__list a:hover, .site-footer__address a:hover { color: var(--color-accent-2); text-decoration: underline; }
.site-footer__address { font-style: normal; color: var(--color-line); }
.site-footer__address a { padding-block: 0; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-primary-2); }
.site-footer__copy { font-size: 0.875rem; color: var(--color-line); margin: 0; max-width: none; }
.site-footer__sello { min-height: 32px; }

/* ---------- hero con tarjeta de ejemplo ---------- */
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
.tarjeta-ejemplo { background: var(--color-bg); color: var(--color-text); border-radius: var(--radius); border: 1px solid var(--color-line); border-top: 6px solid var(--color-accent); padding: var(--space-6); box-shadow: var(--shadow-soft); max-width: 420px; }
.tarjeta-ejemplo__titulo { display: block; color: var(--color-accent-dark); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-3); }
.tarjeta-ejemplo dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); margin: 0; }
.tarjeta-ejemplo dt { color: var(--color-text-muted); }
.tarjeta-ejemplo dd { margin: 0; font-weight: 600; text-align: right; }
.tarjeta-ejemplo__cat { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line); font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--color-primary); max-width: none; }
.tarjeta-ejemplo__nota { margin: var(--space-2) 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--color-text-muted); max-width: none; }

/* ---------- franja regulatoria ---------- */
.franja-legal { background: var(--color-surface-2); border-bottom: 1px solid var(--color-line); padding-block: var(--space-4); }
.franja-legal .container { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.franja-legal__icono { width: 24px; height: 24px; color: var(--color-accent-dark); margin-top: 2px; }
.franja-legal p { margin: 0; max-width: none; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); }

/* ---------- por qué Tu Dinero ---------- */
.razones { display: grid; grid-template-columns: 1fr; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.razones li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.razones__icono { width: 24px; height: 24px; color: var(--color-accent-dark); margin-top: 2px; }
.razones h3 { font-size: 1.125rem; margin: 0 0 var(--space-1); }
.razones p { margin: 0; color: var(--color-text-muted); }

/* ---------- datos clave de la ficha ---------- */
.datos-clave { display: grid; grid-template-columns: 1fr; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.datos-clave li { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); }
.datos-clave__valor { display: block; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--color-primary); }
.datos-clave__etiqueta { display: block; font-size: 0.875rem; color: var(--color-text-muted); }

/* ---------- página Nosotros ---------- */
.destacado { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.45; color: var(--color-primary); border-left: 4px solid var(--color-accent); padding-left: var(--space-6); margin: var(--space-8) 0 0; max-width: 60ch; }
.bloques { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.bloques .card p { color: var(--color-text); }
.bloques .card p:last-child { margin-bottom: 0; }
.valores-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.valores-grid__icono { width: 28px; height: 28px; color: var(--color-accent-dark); margin-bottom: var(--space-3); }
.valores-grid .card h3 { font-size: 1.125rem; }
.valores-grid .card p { margin: 0; font-style: italic; }
.card--cta { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg); }
.card--cta h3 { color: var(--color-bg); }
.card--cta p { color: var(--color-line); font-style: normal; margin-bottom: var(--space-4); }
.card--cta .btn { background: var(--color-bg); color: var(--color-primary); border-color: var(--color-bg); }
.card--cta .btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); color: var(--color-primary); }

/* ---------- página Contacto ---------- */
.accesos { display: grid; grid-template-columns: 1fr; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.accesos .card h3 { font-size: 1.125rem; }
.accesos .card p { margin: 0; color: var(--color-text); font-weight: 500; }
.accesos .card a { font-weight: 500; }
.contacto-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.contacto-form { padding: var(--space-8); }
.contacto-form h2 { margin-top: 0; }
.contacto-form .form { max-width: none; margin-top: var(--space-6); }
.contacto-info { display: grid; gap: var(--space-4); }
.info-card h3 { font-size: 1.125rem; }
.info-card address { font-style: normal; color: var(--color-text); }
.info-card p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }

/* ---------- fichas de producto: rejilla y tarjetas ---------- */
.ficha__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.ficha__principal { display: grid; gap: var(--space-4); }
.ficha__seccion h2, .ficha__seccion h3 { margin-top: 0; }
.ficha__seccion h3 { font-family: var(--font-serif); font-size: 1.5rem; }
.ficha__seccion .lista { margin-bottom: 0; }
.ficha__seccion .aviso { margin-bottom: 0; }
.ficha__seccion > .nota-lista { color: var(--color-text-muted); font-size: 0.875rem; margin: 0 0 var(--space-2); }
.tarjeta-cat { border-top: 6px solid var(--color-accent); }
.tarjeta-cat .cat { margin: 0 0 var(--space-4); }
.tarjeta-cat .aviso { margin: 0 0 var(--space-4); }
.tarjeta-cat p:last-child { margin: 0; }
.tarjeta-cat .btn { width: 100%; text-align: center; }

/* ---------- páginas de organismos ---------- */
.organismo img { display: block; max-width: 220px; height: auto; margin-bottom: var(--space-4); }
.organismo address { font-style: normal; margin-bottom: var(--space-4); }
.organismo p:last-child { margin: 0; }
.organismo .btn { width: 100%; text-align: center; overflow-wrap: anywhere; }
.ficha__seccion p:last-child { margin-bottom: 0; }
.ficha__seccion > p.ficha__imagen { margin: 0 0 var(--space-4); }
.ficha__imagen img { display: block; border: 1px solid var(--color-line); border-radius: var(--radius); }

/* ---------- página 404 ---------- */
.error-404 { padding-block: var(--space-16); }
.error-404__cifra { font-family: var(--font-serif); font-size: 6rem; line-height: 1; font-weight: 700; color: var(--color-accent-2); margin: 0 0 var(--space-2); letter-spacing: -0.02em; }
.error-404 h1 { margin-top: 0; }

/* ---------- imagen ampliable (lupa) ---------- */
.zoom { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-bg); cursor: zoom-in; overflow: hidden; }
.zoom img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; }
.zoom__lupa { position: absolute; right: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius); background: var(--color-primary); color: var(--color-bg); font-size: 0.875rem; font-weight: 500; }
.zoom__lupa svg { width: 16px; height: 16px; }
.zoom:hover .zoom__lupa, .zoom:focus-visible .zoom__lupa { background: var(--color-accent-dark); }
.dialog--imagen { width: min(96vw, 1400px); max-height: 92vh; }
.dialog__cabecera--compacta { grid-template-columns: 1fr auto; padding: var(--space-3) var(--space-4); }
.dialog--imagen__ayuda { margin: 0; max-width: none; font-size: 0.875rem; color: var(--color-line); }
.dialog--imagen__lienzo { overflow: auto; background: var(--color-surface-2); padding: var(--space-4); }
.dialog--imagen__lienzo img { display: block; width: 100%; height: auto; margin: 0 auto; cursor: zoom-in; border: 1px solid var(--color-line); background: var(--color-bg); }
.dialog--imagen.is-zoomed .dialog--imagen__lienzo img { width: auto; max-width: none; cursor: zoom-out; }

/* ---------- breakpoints ---------- */
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .stats__list { grid-template-columns: repeat(3, 1fr); }
  .razones { grid-template-columns: repeat(2, 1fr); }
  .datos-clave { grid-template-columns: repeat(3, 1fr); }
  .datos-clave--4 { grid-template-columns: repeat(2, 1fr); }
  .bloques { grid-template-columns: repeat(2, 1fr); }
  .valores-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; flex-basis: auto; padding-block: 0; }
  .site-nav__list { flex-direction: row; align-items: center; gap: var(--space-6); }
  .site-nav__cta { margin-top: 0; margin-left: var(--space-2); }
  .nav-sub { position: relative; }
  .nav-sub__list { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + var(--space-2)); min-width: 320px; background: var(--color-bg); border: 1px solid var(--color-line); border-top: 4px solid var(--color-accent); border-radius: var(--radius); padding: var(--space-2); box-shadow: var(--shadow-soft); z-index: 20; }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .site-footer__brand { grid-column: auto; }
  .hero__grid { grid-template-columns: 3fr 2fr; }
  .tarjeta-ejemplo { margin-left: auto; }
  .razones { grid-template-columns: repeat(3, 1fr); }
  .datos-clave--4 { grid-template-columns: repeat(4, 1fr); }
  .valores-grid { grid-template-columns: repeat(3, 1fr); }
  .accesos { grid-template-columns: repeat(3, 1fr); }
  .contacto-grid { grid-template-columns: 3fr 2fr; }
  .ficha__grid { grid-template-columns: 2fr 1fr; }
  .ficha__lateral { position: sticky; top: var(--space-6); }
}
/* ---------- movimiento (solo si el sistema no pide reducirlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* entrada del hero al cargar */
  @keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero .eyebrow, .hero h1, .hero p, .hero__acciones, .tarjeta-ejemplo { animation: subir .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero h1 { animation-delay: .08s; }
  .hero p { animation-delay: .16s; }
  .hero__acciones { animation-delay: .24s; }
  .tarjeta-ejemplo { animation-delay: .32s; }

  /* formas del hero: deriva muy lenta */
  @keyframes derivar { from { transform: translate(0, 0); } to { transform: translate(-24px, 18px); } }
  .hero::before { animation: derivar 22s ease-in-out infinite alternate; }
  .hero::after { animation: derivar 28s ease-in-out infinite alternate-reverse; }

  /* aparición al hacer scroll (.reveal → .is-visible desde site.js) */
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0s); }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* tarjetas y botones: elevación ligera */
  .card { transition: border-color .2s, box-shadow .2s, transform .2s; }
  .card:hover { transform: translateY(-3px); }
  .card__icon-wrap { transition: background-color .2s, color .2s; }
  .card:hover .card__icon-wrap { background: var(--color-accent-dark); color: var(--color-bg); }
  .btn { transition: color .15s, background-color .15s, border-color .15s, transform .15s, box-shadow .15s; }
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
  .btn:active { transform: translateY(0); box-shadow: none; }

  /* subrayado del menú que se desliza */
  .site-nav__list > li > a:not(.btn) { position: relative; }
  .site-nav__list > li > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
  .site-nav__list > li > a:not(.btn):hover::after, .site-nav__list > li > a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
  @keyframes desplegar { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
  .nav-sub[open] .nav-sub__list { animation: desplegar .2s ease-out both; }
  .site-nav.is-open { animation: subir .3s ease-out both; }

  /* sellos: color al pasar el cursor */
  .sellos img { filter: grayscale(1) opacity(.75); transition: filter .3s; }
  .sellos a:hover img, .sellos a:focus-visible img { filter: none; }

  /* dialog: entrada suave */
  @keyframes aparecer { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  .dialog[open] { animation: aparecer .35s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes velo { from { opacity: 0; } to { opacity: 1; } }
  .dialog[open]::backdrop { animation: velo .35s ease-out both; }

  /* enlaces de tarjeta: flecha que avanza */
  .card a:not(.btn)::after { content: " →"; display: inline-block; transition: transform .2s; }
  .card a:not(.btn):hover::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }