/* =========================================================================
   REDFUNE · styles.css — «Papel y grabado»: fibra, tinta y acentos de color.
   Jerarquía con tipografía y filetes, no con cajas. Una sola superficie de papel;
   hojas blancas solo donde la persona actúa. Especificación: DISENO.md (§2, §4).

   Créditos
   - Tipografías autoalojadas (assets/fonts/), SIL Open Font License 1.1:
       Newsreader · Production Type · https://github.com/productiontype/Newsreader
       Public Sans · USWDS / GSA · https://github.com/uswds/public-sans
   - Iconos: Solar Icon Set · 480 Design · CC BY 4.0
       https://www.figma.com/community/file/1166831539721848736
       (sprite en línea: assets/js/sprite.js · licencia: assets/icons/LICENSE-solar.txt)
   - Grabados botánicos (assets/img/grabados/): dominio público, Wikimedia Commons;
       obra, autor y enlace de cada lámina en README.md

   Propiedad: este archivo lo escribe solo la fundación (F). Lo específico de una
   página va en assets/css/pages/<página>.css con su prefijo (hm-, dc-, vf-, ss-…).
   ========================================================================= */

/* ---------- 0. Tipografías ---------- */
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-wght.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-italic-400.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- 1. Tokens ---------- */
:root{
  /* Superficies */
  --paper:#FAFAF7;      /* papel de dibujo claro, sin tono de pergamino */
  --paper-2:#EFEEE8;    /* bandas de papel ligeramente más densas */
  --sheet:#FFFFFF;      /* hojas de herramienta, campos, modal */
  --paper-grain:url("../img/papel-dibujo.webp");
  --paper-grain-size:560px 560px;
  --paper-wash:rgba(250,250,247,.58);
  /* Tinta */
  --ink:#252525;        /* texto principal y filetes */
  --ink-2:#505050;      /* texto secundario, antetítulos */
  --ink-3:#656565;      /* metadatos, placeholder, rayado de referencia */
  /* Filetes */
  --rule:#D2D1C9;       /* filetes decorativos */
  --rule-ui:#858585;    /* controles: contraste mínimo 3:1 sobre blanco y gris */
  /* Acentos de marca: el dibujo no obliga a eliminar el color de la interfaz. */
  --cipres:#24493A;
  --cipres-700:#193629;
  --cipres-edge:#0F2219;
  --cipres-50:#E4ECE6;
  --cipres-l:#2F6B4F;
  --almagre:#505050;    /* numerales y pequeños acentos editoriales */
  --almagre-50:#F0F0EE;
  --ocre:#E2B04A;       /* acción de llamada */
  --ocre-700:#D19E35;
  --ocre-edge:#8A6418;
  /* Avisos y errores siempre acompañados de texto e icono. */
  --danger:#963C35;
  --danger-50:#FBF0EE;
  --ambar:#805A24;
  --ambar-50:#FAF6ED;
  --justo-50:#E4EEE7;
  --track:#E7E7E4;
  --focus:#DEDEDA;      /* foco claro con contorno de tinta */

  /* Alias heredados: por si queda algún var(--sage-…) en plantillas, adopta la paleta nueva */
  --crema:var(--paper); --surface:var(--sheet); --ink-soft:var(--ink-2);
  --sage-50:var(--cipres-50); --sage-500:var(--cipres-l); --sage-700:var(--cipres);
  --peach-400:var(--ocre); --clay-500:var(--almagre); --amber:var(--ambar); --line:var(--rule);

  /* Tipografía */
  --f-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Espacio (escala de 4/8) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Medidas */
  --wrap:70rem;         /* 1120 px de contenido */
  --doc:46rem;          /* documentos y legales */
  --measure:38rem;      /* medida de lectura */
  --gutter:16px;
  --header-h:64px;

  /* Formas y profundidad */
  --radius:2px;         /* bordes discretos como una lámina impresa */
  --radius-sm:2px;      /* campos, badges, chips */
  --shadow:none;
  --shadow-modal:0 24px 64px rgba(0,0,0,.20);
  --btn-edge-w:0px;

  /* Desplazamiento de lo que se fija bajo la cabecera (notas al margen, thead): 0 mientras la
     cabecera no es fija; var(--header-h) cuando lo es (ver §4.19) */
  --sticky-top:0px;
}
@media (min-width:768px){ :root{ --gutter:32px; --header-h:104px; } }

/* Máscaras de icono para pseudo-elementos (Solar · 480 Design · CC BY 4.0). Generado por build_icons.py */
:root{
  --ic-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M20 7L4 7'/%3E%3Cpath d='M20 12L4 12'/%3E%3Cpath d='M20 17L4 17'/%3E%3C/g%3E%3C/svg%3E");
  --ic-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M19.0068 5L5.00684 19'/%3E%3Cpath d='M19 19L5 5'/%3E%3C/g%3E%3C/svg%3E");
  --ic-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 5L15 12L9 19'/%3E%3C/svg%3E");
  --ic-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9L12 15L5 9'/%3E%3C/svg%3E");
  --ic-warning:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M5.31171 10.7615C8.23007 5.58716 9.68925 3 12 3C14.3107 3 15.7699 5.58716 18.6883 10.7615L19.0519 11.4063C21.4771 15.7061 22.6897 17.856 21.5937 19.428C20.4978 21 17.7864 21 12.3637 21H11.6363C6.21356 21 3.50217 21 2.40626 19.428C1.31034 17.856 2.52291 15.7061 4.94805 11.4063L5.31171 10.7615Z'/%3E%3Cpath d='M12 8V13'/%3E%3Cpath stroke-linejoin='round' d='M12 16H12.0001'/%3E%3C/g%3E%3C/svg%3E");
  --ic-error:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7V13'/%3E%3Cpath stroke-linejoin='round' d='M12 16H12.0001'/%3E%3C/g%3E%3C/svg%3E");
  --ic-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 18L18 6M18 15V6H9'/%3E%3C/svg%3E");
  --ic-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ic-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231C211E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9L12 15L5 9'/%3E%3C/svg%3E");
}

/* ---------- 4.1 Base, accesibilidad y utilidades ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Reserva espacio para el acceso flotante y el elemento enfocado. */
html{scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))}
body{margin:0;font-family:var(--f-sans);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--paper);
  background-image:linear-gradient(var(--paper-wash),var(--paper-wash)),var(--paper-grain);
  background-size:var(--paper-grain-size);background-blend-mode:normal,multiply;
  font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:1024px){body{font-size:1.125rem}}
main{display:block}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-serif);font-weight:600;line-height:1.2;color:var(--ink)}
p{margin:0 0 var(--s-4);text-wrap:pretty}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
a{color:var(--cipres);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink);text-decoration-thickness:2px}
a[href^="tel:"]{white-space:nowrap}
img{max-width:100%;display:block}
hr{height:0;margin:var(--s-5) 0;border:0;border-top:1px solid var(--rule)}

/* Foco: tinta por defecto; GOV.UK en enlaces y botones */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
a:focus-visible{outline:3px solid transparent;color:var(--ink);background:var(--focus);
  box-shadow:0 -2px var(--focus),0 4px var(--ink);text-decoration:none}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:.7rem 1rem;background:var(--focus);color:var(--ink);font-weight:600}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden{display:none !important}
/* §8.3: ▲ ▼ ⓘ siguen en el DOM y en el texto renderizado (innerText), pero no se ven: al lado se pinta
   el SVG. Recorte en lugar de display:none (que los sacaría de innerText) y sin position:absolute
   (dentro de .table-wrap provocaría scroll horizontal de la página en móvil). order:1 deja el SVG
   primero cuando el glifo va en un contenedor flex (.cem-note). */
.glyph{display:inline-block;width:1px;height:1px;margin:0 -1px 0 0;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;vertical-align:baseline;order:1}
.list-clean{list-style:none;padding:0;margin:0}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.text-center{text-align:center}    /* legado: no usar en marcado nuevo */
.stack>*{margin-top:0;margin-bottom:0}
.stack>*+*{margin-top:var(--stack-gap,var(--s-3))}
/* Titulares que el JS enfoca (tabindex=-1: paso del decisor, veredicto, resultado del cuestionario,
   escenario del SOS): no son controles; mismo gesto GOV.UK que los enlaces en vez de una caja */
h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible{outline:3px solid transparent;outline-offset:0;
  color:var(--ink);background:var(--focus);box-shadow:0 4px var(--ink)}

/* ---------- 4.2 Tipografía y antetítulo ---------- */
.t-display{font-family:var(--f-serif);font-weight:400;font-size:2.25rem;line-height:1.08;letter-spacing:0;color:var(--ink);text-wrap:balance}
.t-h1{font-family:var(--f-serif);font-weight:450;font-size:1.875rem;line-height:1.15;letter-spacing:0;color:var(--ink);text-wrap:balance}
.t-h2{font-family:var(--f-serif);font-weight:450;font-size:1.5rem;line-height:1.2;letter-spacing:0;color:var(--ink);text-wrap:balance}
.t-h3{font-family:var(--f-serif);font-weight:550;font-size:1.3125rem;line-height:1.25;letter-spacing:0;color:var(--ink)}
.t-lead{font-family:var(--f-serif);font-weight:400;font-size:1.1875rem;line-height:1.5;color:var(--ink-2)}
@media (min-width:768px){
  .t-display{font-size:3.5rem}.t-h1{font-size:2.5rem}.t-h2{font-size:2rem}.t-lead{font-size:1.375rem}
}
.t-lead strong{color:var(--ink);font-weight:600}
.t-muted{color:var(--ink-2)}
.t-small{font-size:1rem;line-height:1.55}
.t-xs{font-size:.9375rem;line-height:1.5}
/* Antetítulo: sustituye a todas las «píldoras» .chip de cabecera */
.kicker{display:flex;align-items:center;gap:.65rem;margin:0 0 var(--s-4);font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--ink-2)}
.kicker::before{content:"";flex:none;width:28px;height:3px;background:var(--almagre) var(--paper-grain) center/160px 160px;
  background-blend-mode:multiply;border-radius:55% 35% 60% 30%;transform:rotate(-1.5deg)}
/* Titular con icono delante (bloques del decisor, «Documentos» del SOS) */
.h-icon{display:flex;align-items:center;gap:.5rem;font-family:var(--f-serif);font-weight:600;font-size:1.3125rem;line-height:1.25;color:var(--ink)}
.h-icon .icon{width:24px;height:24px;color:var(--cipres)}
.h-icon--warn .icon{color:var(--ambar)}

/* ---------- 4.3 Layout ---------- */
.container{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.container-narrow{max-width:calc(var(--doc) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--s-7) 0}
@media (min-width:1024px){.section{padding:var(--s-8) 0}}
.band{border-top:1px solid var(--rule)}
.rule-top{border-top:1px solid var(--ink);padding-top:var(--s-4)}
.measure{max-width:var(--measure)}
.sec{display:grid;gap:var(--s-5)}
@media (min-width:900px){.sec{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-8)}}
.sec>*{min-width:0}
.sec-head>p{margin-top:var(--s-3);color:var(--ink-2)}
.sec-head>.kicker{margin-top:0}
.page-head{margin-bottom:var(--s-6)}
.page-head .t-display{font-size:2.125rem;line-height:1.12;letter-spacing:0;max-width:20ch}
@media (min-width:768px){.page-head .t-display{font-size:3rem}}
.page-head .t-lead{max-width:36rem;margin:var(--s-4) 0 0}
.tool-page{padding-top:var(--s-6)}
.page-grid{display:grid;gap:var(--s-6)}
@media (min-width:1024px){.page-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-8);align-items:start}}
.page-grid>*{min-width:0}
.margin-notes{display:grid;gap:var(--s-6);align-content:start}
@media (min-width:1024px){.margin-notes{position:sticky;top:calc(var(--sticky-top) + 24px)}}
/* Por debajo de 1024 las notas bajan a ancho completo: medida de lectura */
@media (max-width:1023px){.margin-notes{max-width:var(--measure)}}
.margin-notes>.trust-panel{font-size:1rem}
.note{border-top:1px solid var(--ink);padding-top:var(--s-4)}
.note>.t-h3{font-size:1.1875rem;margin-bottom:var(--s-2)}
.note p,.note li{font-size:1rem}
/* Documento (metodología, editorial, FAQ, contacto, legales) */
.doc{max-width:var(--doc)}
.doc-sec{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--rule)}
.doc-sec>.t-h2{margin-bottom:var(--s-3)}
.doc-note{margin-top:var(--s-7);padding:var(--s-5);background:var(--paper-2);border-top:1px solid var(--ink)}
.doc-note>.t-h3{margin-bottom:var(--s-2)}
.doc>.trust-panel,.doc>.legal-alert,.doc>.aviso,.doc>.fact-grid,.doc>.accordion{margin-top:var(--s-6)}

/* ---------- 4.4 Botones, botón-icono y enlaces ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.7rem 1.25rem;
  border:1px solid transparent;border-radius:var(--radius);font:500 1.0625rem/1.25 var(--f-sans);text-align:center;
  text-decoration:none;text-wrap:balance;cursor:pointer;box-shadow:0 var(--btn-edge-w) 0 var(--btn-edge,transparent);
  transition:background-color .12s ease,color .12s ease,border-color .12s ease}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(var(--btn-edge-w));box-shadow:none}
.btn .icon{width:1.3em;height:1.3em}
.btn-primary{--btn-edge:var(--cipres-edge);background:var(--cipres);border-color:var(--cipres-edge);color:#fff}
.btn-primary:hover{background-color:var(--cipres-700);color:#fff}
.btn-cta{--btn-edge:var(--ocre-edge);background:var(--ocre);border-color:var(--ocre-edge);color:var(--ink)}
.btn-cta:hover{background-color:var(--ocre-700);color:var(--ink)}
.btn-secondary{--btn-edge:var(--cipres);background:var(--sheet);color:var(--cipres);border-color:var(--cipres)}
.btn-secondary:hover{background-color:var(--cipres-50);color:var(--cipres-700)}
/* El grano afecta al fondo de tinta, nunca a las letras ni al área pulsable. */
.btn-primary,.btn-cta,.btn-secondary{
  background-image:var(--paper-grain);background-size:280px 280px;background-blend-mode:multiply;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.btn-ghost{background:transparent;border:0;box-shadow:none;padding:0;color:var(--cipres);font:inherit;font-weight:600;
  text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.btn.btn-ghost{min-height:48px;padding:.5rem .25rem}
.btn-ghost:hover{color:var(--ink);text-decoration-thickness:2px}
.btn-lg{min-height:58px;font-size:1.125rem}
/* En línea (como el original): dos .btn-block seguidos conservan el mismo texto renderizado */
.btn-block{display:inline-flex;width:100%;vertical-align:top}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[disabled]:active{transform:none;box-shadow:0 var(--btn-edge-w) 0 var(--btn-edge,transparent)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;background:var(--focus);color:var(--ink);border-color:var(--ink);box-shadow:none}

/* Botón solo icono (volver, cerrar modal): 44×44 */
.icon-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--ink);
  border-radius:var(--radius);background:transparent;color:var(--ink);cursor:pointer}
.icon-btn:hover{background:var(--paper-2)}
.icon-btn .icon{width:24px;height:24px}
.icon-btn:focus-visible{outline:3px solid var(--ink);outline-offset:0;background:var(--focus);color:var(--ink)}

/* Enlace con flecha (sustituye a «Texto →») */
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}
.link-arrow .icon{width:1.15em;height:1.15em;transition:transform .15s ease}
.link-arrow:hover .icon{transform:translateX(3px)}

/* Enlaces que abren pestaña nueva: marca ↗ (sin texto nuevo) */
a[target="_blank"]:not(.btn)::after{content:"";display:inline-block;width:.85em;height:.85em;margin-left:.2em;vertical-align:-.05em;
  background:currentColor;-webkit-mask:var(--ic-external) center/contain no-repeat;mask:var(--ic-external) center/contain no-repeat}

/* ---------- 4.5 Iconos (sprite en línea: assets/js/sprite.js) ---------- */
.icon{display:inline-block;flex:none;width:1.25em;height:1.25em;vertical-align:-.25em;overflow:visible}
.icon-20{width:20px;height:20px}.icon-24{width:24px;height:24px}.icon-28{width:28px;height:28px}
.icon-32{width:32px;height:32px}.icon-36{width:36px;height:36px}.icon-40{width:40px;height:40px}

/* ---------- 4.6 Superficies ---------- */
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s-5)}  /* legado, uso mínimo */
.card-soft{background:var(--paper-2);padding:var(--s-5)}
/* Hoja de herramienta (decisor, verificador, cuestionario) */
.tool-sheet{background:var(--sheet);border:1px solid var(--rule);border-top:1px solid var(--cipres);border-radius:0;padding:var(--s-5)}
@media (min-width:768px){.tool-sheet{padding:var(--s-6) var(--s-7) var(--s-7)}}
@media (max-width:639px){.tool-sheet{margin-inline:calc(-1*var(--gutter));border-left:0;border-right:0;border-radius:0;padding:20px var(--gutter)}}
/* Nota de confianza = «inset text» GOV.UK. .nota es el alias para mensajes secundarios generados por JS */
.trust-panel,.nota{margin:0;padding:.15rem 0 .15rem var(--s-4);border-left:2px solid var(--cipres);background:transparent;color:var(--ink)}
.trust-panel>.t-h3,.nota>.t-h3{font-size:1.1875rem;margin-bottom:var(--s-2)}
/* Aviso (GOV.UK warning). .legal-alert es alias */
.aviso,.legal-alert{position:relative;margin:0;padding:var(--s-4) var(--s-4) var(--s-4) 3.25rem;background:var(--ambar-50);border-left:2px solid var(--ambar);color:var(--ink)}
.aviso::before,.legal-alert::before{content:"";position:absolute;left:var(--s-4);top:calc(var(--s-4) + .15rem);width:24px;height:24px;
  background:var(--ambar);-webkit-mask:var(--ic-warning) center/contain no-repeat;mask:var(--ic-warning) center/contain no-repeat}
/* Recuadro de llamada (home y SOS) */
.call-box{padding:var(--s-5);background:var(--cipres);color:#E6E6E6;border-radius:var(--radius)}
.call-box .t-h2,.call-box .t-h3{color:#fff;margin-bottom:var(--s-2)}
.call-box p{color:#E6E6E6;margin-bottom:var(--s-5)}
.call-box .btn-cta{background-color:var(--ocre);color:var(--ink);border-color:var(--ocre)}
.call-box .btn-cta:hover{background-color:var(--ocre-700);border-color:var(--ocre-700)}
/* Anillo claro separado para mantener visible el foco sobre grafito. */
.call-box .btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Tarjeta de cierre con lomo (plan RedFune, CTA del verificador, CTA del observatorio) */
.cta-card{padding:var(--s-5) 0;background:transparent;border:0;border-top:1px solid var(--cipres)}
.cta-card>.badge{margin-bottom:var(--s-2)}
.cta-card>.t-h2,.cta-card>.t-h3{margin-bottom:var(--s-2)}
.cta-card .btn{margin-top:var(--s-4)}
/* Datos en ficha (sin cajas) */
.fact-grid{display:grid;gap:0 var(--s-6);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fact-box{padding:var(--s-4) 0;border-top:1px solid var(--rule)}
.fact-box>strong:first-child{display:block;margin-bottom:.25rem;font-family:var(--f-serif);font-size:1.1875rem;font-weight:600}
.fact-box>strong:first-child+br{display:none}   /* SOLO junto a la regla anterior (display:block): ver veto de contacto */
.fact-box .t-muted{display:block}
/* Datos identificativos de la empresa (aviso legal, privacidad, contacto, quiénes somos) */
.company-data{margin:var(--s-4) 0 0;border-top:1px solid var(--rule)}
.company-data>div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:var(--s-4);padding:.75rem 0;border-bottom:1px solid var(--rule)}
.company-data dt{font-weight:600}
.company-data dd{margin:0;color:var(--ink-2)}
@media (max-width:479px){.company-data>div{grid-template-columns:1fr;gap:.15rem}}

/* Legado compartido (clases que las páginas ya usan y §4 no redefine) */
.policy-list{margin:var(--s-2) 0 var(--s-4);padding-left:1.25rem}
.policy-list:last-child{margin-bottom:0}
.policy-list li{margin:var(--s-2) 0;padding-left:var(--s-1)}
.policy-list li::marker{color:var(--almagre)}
.inline-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.inline-links a{font-weight:600}
.ext-links{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-2)}
.ext-links a{font-weight:600}

/* ---------- 4.7 Etiquetas: badges, chips, línea de metadatos, nota de cementerio ---------- */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .45rem;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:700;
  line-height:1.3;text-transform:uppercase;letter-spacing:0}
.badge .icon{width:1.1em;height:1.1em;vertical-align:-.2em}
.badge-oblig{background:var(--cipres-50);color:var(--cipres)}
.badge-opc{background:var(--paper-2);color:var(--ink-2)}
.badge-inflado{background:var(--danger-50);color:var(--danger)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border:1px solid var(--rule);border-radius:var(--radius-sm);font-size:.9375rem;font-weight:500;color:var(--ink-2)}  /* legado */
/* Selecciones del decisor: línea de metadatos, sin pastillas */
/* El punto separador nunca empieza una línea: cada elemento lleva su punto delante y un margen
   negativo igual a su ancho; el del primero de cada línea queda fuera de la caja y se recorta. */
.meta-line{--dot:calc(4px + 1.2rem);display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--dot);overflow:hidden;
  margin:var(--s-3) 0 0;font-size:1rem;color:var(--ink-2)}
.meta-line>span{margin-left:calc(-1*var(--dot))}
.meta-line>span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 .6rem;border-radius:50%;background:var(--rule-ui);vertical-align:middle}
/* Icono «no incluye cementerio» en celdas, barras y badge */
.cem-note{display:inline-flex;vertical-align:-.15em;color:var(--ink-3);cursor:help}
.cem-note .icon{width:1em;height:1em}

/* ---------- 4.8 Formularios ---------- */
.lbl{display:block;margin-bottom:.35rem;font-size:1rem;font-weight:600;color:var(--ink)}
.lbl .t-muted{font-weight:400}
.field{display:block;width:100%;min-height:52px;padding:.6rem .8rem;border:1px solid var(--rule-ui);border-radius:var(--radius-sm);
  background:var(--sheet);color:var(--ink);font:400 1.0625rem/1.4 var(--f-sans)}
select.field{-webkit-appearance:none;appearance:none;padding-right:2.5rem;text-overflow:ellipsis;
  background:var(--sheet) var(--ic-select) no-repeat right .75rem center/22px}
textarea.field{min-height:8rem;resize:vertical}
.field::placeholder{color:var(--ink-3);opacity:1}
.field:focus{outline:3px solid var(--focus);outline-offset:0;box-shadow:inset 0 0 0 2px var(--ink)}
.help{margin:.35rem 0 0;font-size:.9375rem;color:var(--ink-2)}
/* Mensajes de error (#vError, #quizErr, #callError): sin color en línea */
.form-error{margin:0;font-size:.9375rem;font-weight:600;color:var(--danger)}
.form-error:not(:empty){display:flex;align-items:flex-start;gap:.5rem}
.form-error:not(:empty)::before{content:"";flex:none;width:1.25em;height:1.25em;background:currentColor;
  -webkit-mask:var(--ic-error) center/contain no-repeat;mask:var(--ic-error) center/contain no-repeat}
input[type="checkbox"],input[type="radio"]{flex:none;width:22px;height:22px;margin:0;accent-color:var(--cipres)}
/* Casilla con texto (privacidad del modal) */
.check-row{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.65rem;align-items:start;font-size:1rem;color:var(--ink-2)}
.check-row input{margin-top:.15rem}
/* El texto va en un contenedor flex (como el original): el enlace es un elemento de bloque y el texto
   leído (innerText) conserva la misma separación «privacidad .» que la versión original. */
.check-row>span{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.28em}
.check-row>span>a{margin-right:-.28em}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}   /* honeypot del modal */

/* ---------- 4.9 Opciones (.opt) — decisor y cuestionario ---------- */
.opt-list{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
.opt{display:flex;align-items:center;gap:1rem;width:100%;min-height:64px;padding:.95rem 1rem;text-align:left;
  background:var(--sheet);border:1px solid var(--rule-ui);border-radius:var(--radius);color:var(--ink);
  font:600 1.0625rem/1.35 var(--f-sans);cursor:pointer;transition:border-color .12s ease,background-color .12s ease}
.opt-icon{width:28px;height:28px;color:var(--cipres)}
button.opt::after{content:"";flex:none;margin-left:auto;width:22px;height:22px;background:var(--ink-3);
  -webkit-mask:var(--ic-chevron-right) center/contain no-repeat;mask:var(--ic-chevron-right) center/contain no-repeat;transition:transform .15s ease}
.opt:hover{border-color:var(--cipres);background:var(--cipres-50)}
button.opt:hover::after{background:var(--cipres);transform:translateX(2px)}
.opt.selected,.opt[aria-pressed="true"]{border-color:var(--cipres);background:var(--cipres-50);box-shadow:inset 4px 0 0 var(--cipres)}
.opt .opt-sub{display:block;margin-top:.1rem;font-weight:400;font-size:.9375rem;color:var(--ink-2)}
.opt:focus-visible{outline:3px solid var(--focus);outline-offset:0;border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
/* Variante radio (label.opt del cuestionario de entierro) */
label.opt{min-height:56px;padding:.75rem 1rem;gap:.85rem;font-weight:500}
label.opt:has(input:checked){border-color:var(--cipres);background:var(--cipres-50);box-shadow:inset 4px 0 0 var(--cipres)}
label.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:0;border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
label.opt input:focus-visible{outline:none}

/* ---------- 4.10 Progreso del decisor ---------- */
.step-head{display:flex;align-items:center;gap:.75rem;margin-bottom:var(--s-5)}
.progress-wrap{flex:1;min-width:0}
/* Hueco de 4 px repartido (2 px a cada lado de cada segmento): absorbe el redondeo del ancho que pone
   el JS (2/7 = 28,57 % se pinta como 29 %) sin que el relleno asome en el segmento siguiente */
.progress{--seg:calc(100% / var(--steps,7));height:6px;background:var(--track);overflow:hidden;
  -webkit-mask:repeating-linear-gradient(90deg,transparent 0 2px,#000 2px calc(var(--seg) - 2px),transparent calc(var(--seg) - 2px) var(--seg));
  mask:repeating-linear-gradient(90deg,transparent 0 2px,#000 2px calc(var(--seg) - 2px),transparent calc(var(--seg) - 2px) var(--seg))}
.progress>i{display:block;height:100%;width:0;background:var(--cipres);transition:width .25s ease}
.progress-label{font-size:.9375rem;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}

/* ---------- 4.11 Barras (verificador y observatorio) ---------- */
.bars{display:grid;gap:var(--s-4);margin-top:var(--s-5);font-variant-numeric:tabular-nums lining-nums}
.bar-label{display:flex;align-items:last baseline;gap:.5rem;margin-bottom:.35rem;font-size:1rem}
.bar-label>:first-child{min-width:0}
.bar-label::after{content:"";order:1;flex:1 1 1rem;min-width:1rem;border-bottom:1px dotted var(--rule-ui);transform:translateY(-.3em)}  /* puntos conductores */
.bar-label>strong{order:2;white-space:nowrap;font-weight:600}
.bar-track{height:12px;background:var(--track);overflow:hidden}                  /* extremos rectos */
.bar-fill{height:100%;width:0;background:var(--cipres-l);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.bar-fill.is-amber{background:var(--ambar)}
.bar-fill.is-clay{background:var(--danger)}
.bar-fill.is-soft{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,transparent 1.5px 5px);box-shadow:inset 0 0 0 1px var(--ink-3)}

/* ---------- 4.12 Veredictos y mensajes secundarios ---------- */
.verdict{padding:var(--s-5);background:var(--paper-2);border-left:2px solid var(--ink-3)}
.verdict-justo{--state:var(--cipres-l);background:var(--justo-50);border-left-color:var(--cipres-l)}
.verdict-caro{--state:var(--ambar);background:var(--ambar-50);border-left-color:var(--ambar)}
.verdict-muy-caro{--state:var(--danger);background:var(--danger-50);border-left-color:var(--danger)}
.verdict-info{--state:var(--ink-2);background:var(--paper-2);border-left-color:var(--ink-3)}
.verdict-head{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:var(--s-3)}
.verdict-icon{width:36px;height:36px;margin-top:.1rem;color:var(--state,var(--ink-2))}
.verdict-head .t-h1{font-size:1.75rem}
@media (min-width:768px){.verdict-head .t-h1{font-size:2.25rem}}

/* ---------- 4.13 Ficha de presupuesto .quote (motivo firma) y línea de tarifa .ledger ---------- */
.quote{container-type:inline-size;margin-top:var(--s-5);background:var(--sheet);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.quote-main{padding:var(--s-4) 0}
.quote-service{margin:0;font-weight:600;color:var(--ink-2)}
.quote-price{margin:.15rem 0 .3rem;font-family:var(--f-serif);font-weight:500;line-height:1;letter-spacing:0;color:var(--cipres);white-space:nowrap;
  font-size:2.25rem;font-size:min(3.5rem,13cqi)}
.quote-note{margin:0;font-size:.9375rem;color:var(--ink-2)}
.quote-tags{margin:.6rem 0 0}
.quote-row,.quote>.aviso{margin:0;padding:.85rem 0;border-top:1px dashed var(--rule-ui)}
.quote>.aviso{background:transparent;border-left:0;padding-left:2.25rem}
.quote>.aviso::before{left:0;top:1rem}
.quote-saving strong{color:var(--cipres)}
.quote-foot{margin:0;padding:.85rem var(--s-4);background:var(--paper-2);border-top:1px dashed var(--rule-ui);font-size:1rem}

.ledger{list-style:none;margin:var(--s-3) 0 0;padding:0;font-variant-numeric:tabular-nums lining-nums}
.ledger>li{display:flex;flex-wrap:wrap;align-items:last baseline;column-gap:.5rem;padding:.65rem 0;border-bottom:1px solid var(--rule)}
.ledger>li>:first-child{flex:0 1 auto;min-width:0}
/* La cifra lleva delante sus puntos conductores: concepto, puntos y cifra en una línea si caben; si no,
   puntos y cifra bajan juntos a la línea siguiente, con la cifra a la derecha (nunca quedan los puntos
   colgados ni la cifra huérfana, y las filas cortas siguen ocupando una sola línea) */
.ledger>li>:nth-child(2){display:flex;flex:1 0 auto;align-items:last baseline;column-gap:.5rem;white-space:nowrap;font-weight:600}
.ledger>li>:nth-child(2)::before{content:"";flex:1 1 1.5rem;min-width:1.5rem;border-bottom:1px dotted var(--rule-ui);transform:translateY(-.3em)}
.ledger-note{order:3;flex-basis:100%;font-size:.9375rem;color:var(--ink-2)}
/* Lista de conceptos (qué incluye / aparte / dónde infla) */
.concept-list{list-style:none;margin:var(--s-3) 0 0;padding:0}
.concept-list>li{padding:.75rem 0;border-bottom:1px solid var(--rule)}
.concept-name{margin:0;font-weight:600}
.concept-name .badge{margin-left:.4rem;vertical-align:.1em}
.concept-note{margin:.2rem 0 0;font-size:.9375rem;color:var(--ink-2)}

/* ---------- 4.14 Índice de herramientas .tool-list («tool cards» sin caja) ---------- */
.tool-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.tool-list>li{border-bottom:1px solid var(--rule)}
.tool{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s-1) var(--s-4);padding:var(--s-5) 0;color:inherit;text-decoration:none}
.tool:hover{color:inherit}
.tool-icon{grid-row:span 2;width:32px;height:32px;margin-top:2px;color:var(--cipres)}
.tool-body h3{font-size:1.375rem}
.tool-body p{margin:var(--s-1) 0 0;color:var(--ink-2)}
.tool .go{grid-column:2;display:inline-flex;align-items:center;gap:.45rem;margin-top:var(--s-2);font-weight:600;color:var(--cipres);white-space:nowrap}
.tool .go .icon{transition:transform .15s ease}
.tool:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.tool:hover .go .icon{transform:translateX(3px)}
.tool:focus-visible .tool-body p,.tool:focus-visible .go{color:var(--ink)}
@media (min-width:768px){
  .tool{grid-template-columns:40px minmax(0,1fr) auto;column-gap:var(--s-6);align-items:start}
  .tool-icon{grid-row:auto}
  .tool .go{grid-column:3;grid-row:1;justify-self:end;margin-top:.25rem}
}

/* ---------- 4.15 Listas de pasos ---------- */
/* Home (operativa): 2×2 con numeral en cursiva almagre */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0 var(--s-6)}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.steps>li{padding:var(--s-4) 0 var(--s-5);border-top:1px solid var(--rule)}
.steps>li>strong{display:block;margin-bottom:var(--s-2);font-family:var(--f-serif);font-weight:600;font-size:1.25rem;line-height:1.25}
.steps>li>span{display:block;color:var(--ink-2)}
.step-n{display:block;margin-bottom:var(--s-2);font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:2.25rem;line-height:1;color:var(--almagre)}
@media (max-width:639px){.step-n{display:inline;margin:0 .3rem 0 0;font-size:1.625rem;vertical-align:-.08em}}

/* SOS: paso a paso GOV.UK (la clase .sos-step la usa el JS: obligatoria) */
.sos-steps{list-style:none;margin:var(--s-5) 0 0;padding:0}
.sos-step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s-4);padding:0 0 var(--s-5);transition:opacity .2s}
.sos-step::before{content:"";position:absolute;left:21px;top:46px;bottom:6px;width:2px;background:var(--rule)}
.sos-step:last-child::before{display:none}
.sos-check{display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
.sos-check input{-webkit-appearance:none;appearance:none;position:relative;width:36px;height:36px;margin:0;border:2px solid var(--ink);border-radius:50%;background:var(--sheet);cursor:pointer}
.sos-check input:checked{background:var(--cipres);border-color:var(--cipres)}
.sos-check input:checked::after{content:"";position:absolute;inset:6px;background:#fff;-webkit-mask:var(--ic-tick) center/contain no-repeat;mask:var(--ic-tick) center/contain no-repeat}
.sos-check input:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--focus)}
.sos-step-body{padding-top:.5rem}
.paso-num{margin-right:.15rem;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.25rem;color:var(--almagre)}
.sos-call{display:flex;width:max-content;max-width:100%;margin-top:var(--s-3)}

/* ---------- 4.16 Pestañas (SOS) ---------- */
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:var(--s-5);border-bottom:1px solid var(--rule-ui)}
.tab{min-height:56px;margin-bottom:-1px;padding:.5rem;border:0;border-bottom:3px solid transparent;background:transparent;
  color:var(--ink-2);font:600 1rem/1.25 var(--f-sans);text-align:center;text-wrap:balance;cursor:pointer}
.tab:hover{color:var(--ink);background:var(--paper-2)}
.tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--cipres)}
.tab:focus-visible{outline-offset:-3px;background:var(--focus);color:var(--ink)}

/* ---------- 4.17 Desplegables: .disclosure (decisor) y .accordion (FAQ) ---------- */
.disclosure{margin-top:var(--s-5)}
.disclosure>summary{display:flex;align-items:center;gap:.5rem;min-height:48px;padding:.75rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  list-style:none;cursor:pointer;font-weight:600;color:var(--cipres)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary::after{content:"";flex:none;margin-left:auto;width:22px;height:22px;background:currentColor;transition:transform .18s ease;
  -webkit-mask:var(--ic-chevron-down) center/contain no-repeat;mask:var(--ic-chevron-down) center/contain no-repeat}
.disclosure[open]>summary::after{transform:rotate(180deg)}
.disclosure>summary:hover{color:var(--ink)}

.accordion{border-top:1px solid var(--ink)}
.accordion-item{border-bottom:1px solid var(--rule)}
.accordion-item>summary{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);min-height:56px;padding:var(--s-4) 0;
  list-style:none;cursor:pointer;font-family:var(--f-serif);font-weight:600;font-size:1.3125rem;line-height:1.3;color:var(--ink)}
.accordion-item>summary::-webkit-details-marker{display:none}
.accordion-item>summary::after{content:"";flex:none;width:24px;height:24px;margin-top:.15rem;background:var(--cipres);transition:transform .18s ease;
  -webkit-mask:var(--ic-chevron-down) center/contain no-repeat;mask:var(--ic-chevron-down) center/contain no-repeat}
.accordion-item[open]>summary::after{transform:rotate(180deg)}
.accordion-item>summary:hover{color:var(--cipres)}
.accordion-item>:not(summary){max-width:var(--measure);margin:0 0 var(--s-5);color:var(--ink-2)}
/* Foco de los desplegables: patrón GOV.UK «details» (el mismo gesto que enlaces y botones) */
.disclosure>summary:focus-visible,.accordion-item>summary:focus-visible{outline:3px solid transparent;color:var(--ink);background:var(--focus);
  box-shadow:0 -2px var(--focus),0 4px var(--ink)}
.disclosure>summary:focus-visible::after,.accordion-item>summary:focus-visible::after{background:var(--ink)}

/* ---------- 4.18 Tablas ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(to left,var(--paper) 30%,rgba(255,255,255,0)) right/32px 100% no-repeat local,
             radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.12),transparent) right/10px 100% no-repeat scroll}
/* Bordes separados (sin huecos; mismo aspecto, porque solo hay border-bottom): cada celda pinta su
   filete, así el de tinta del thead fijo viaja con él y la columna fija de móvil controla sus líneas */
.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9375rem;font-variant-numeric:tabular-nums lining-nums}
.data-table th,.data-table td{padding:.65rem .6rem;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--rule)}
.data-table th:first-child,.data-table td:first-child{padding-left:0}
.data-table thead th{vertical-align:bottom;white-space:nowrap;font-size:.9375rem;font-weight:600;color:var(--ink);border-bottom:2px solid var(--ink)}
.data-table th[data-sort]{cursor:pointer;user-select:none}
.data-table th[aria-sort]{color:var(--cipres)}
.data-table .num{text-align:right;white-space:nowrap}
.data-table tbody tr:hover,.data-table tbody tr:hover td:first-child{background:var(--paper-2)}
.sort-icon{width:1em;height:1em;margin-left:.2rem;vertical-align:-.15em;color:var(--ink-3)}
.data-table th[aria-sort] .sort-icon{color:var(--cipres)}
@media (max-width:899px){
  .data-table th:first-child,.data-table td:first-child{position:sticky;left:0;z-index:1;padding-right:.75rem;background:var(--paper);box-shadow:1px 0 0 var(--rule)}
  /* Columna fija: cada celda es una capa y, con alturas fraccionarias, la de la fila siguiente tapaba al
     redondear el filete de la anterior. Cada celda fija pinta el filete de la fila anterior 1 px por
     encima, en su propia capa; la primera fila no (ahí va el filete de tinta del thead). */
  .data-table tbody td:first-child{box-shadow:1px 0 0 var(--rule),0 -1px 0 var(--rule)}
  .data-table tbody tr:first-child td:first-child{box-shadow:1px 0 0 var(--rule)}
  .data-table tbody tr:not(:last-child) td:first-child{border-bottom-color:transparent}
}
/* -1px: el thead queda 1 px bajo la cabecera fija (que mide 103-105 px) y nunca asoman filas por encima */
@media (min-width:900px){.table-wrap{overflow:visible;background:none}.data-table thead th{position:sticky;top:max(0px,calc(var(--sticky-top) - 1px));z-index:2;background:var(--paper)}}
/* Foco de las cabeceras ordenables (role=button): patrón GOV.UK, como los botones. Va después de la columna
   fija para no perder el amarillo en móvil; sin contorno, que tapaba la primera letra de la primera columna */
.data-table th[role="button"]:focus-visible{outline:3px solid transparent;outline-offset:0;background:var(--focus);color:var(--ink);
  box-shadow:inset 0 -4px 0 var(--ink)}
.data-table th[role="button"]:focus-visible .sort-icon{color:var(--ink)}

/* ---------- 4.19 Cabecera, navegación móvil y acceso SOS (components.js) ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
/* Cabecera fija de verdad: components.js la pinta dentro de <div data-component="header">, que mide lo
   mismo que ella y anulaba position:sticky. Sin caja propia, la cabecera queda fija respecto a la página.
   Solo desde 640 px (debajo, el acceso SOS ya deja la llamada a mano) y con ≥600 px de alto (en un
   móvil apaisado ocuparía un cuarto de la pantalla). --sticky-top coloca notas al margen y thead debajo. */
@media (min-width:640px) and (min-height:600px){
  :root{--sticky-top:var(--header-h)}
  [data-component="header"]{display:contents}
}
.phonebar-top{display:none;background:var(--paper-2);color:var(--ink-2);border-bottom:1px solid var(--rule);font-size:.9375rem}
.phonebar-top-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.4rem;padding-bottom:.4rem}
.phonebar-top a{color:var(--ink);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums lining-nums}
.phonebar-top a:hover{color:var(--ink);text-decoration:underline}
.phonebar-top a:focus-visible{color:var(--ink);background:var(--focus);box-shadow:0 -2px var(--focus),0 4px var(--focus)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.6rem;padding-bottom:.6rem}
.brand{display:inline-flex;align-items:center;flex:none;width:176px;max-width:100%;min-height:48px;line-height:1;text-decoration:none}
.brand-logo{display:block;width:100%;height:auto;aspect-ratio:1158/290}
.brand:focus-visible{outline:3px solid var(--ink);outline-offset:4px;background:var(--focus);box-shadow:none}
@media (max-width:479px){.brand{width:160px}}
.nav-desktop{display:none}
.nav-link{padding:.55rem 0 .45rem;border-bottom:1px solid transparent;color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap}
.nav-link:hover{color:var(--ink);border-bottom-color:var(--rule)}
.nav-link[aria-current="page"]{color:var(--cipres);font-weight:600;border-bottom-color:var(--cipres)}
.nav-services{position:relative}
.nav-services-trigger{display:flex;align-items:center;gap:.5rem;list-style:none;cursor:pointer;color:var(--ink);font-weight:500}
.nav-services-trigger::-webkit-details-marker{display:none}
.nav-services-trigger>.icon{flex:none;width:18px;height:18px;transition:transform .15s ease}
.nav-services[open]>.nav-services-trigger>.icon{transform:rotate(180deg)}
.nav-services-trigger.is-current,.nav-services[open]>.nav-services-trigger{color:var(--cipres);border-bottom-color:var(--cipres)}
.nav-services-trigger:focus-visible{outline:3px solid var(--ink);outline-offset:3px;background:var(--focus)}
.nav-services-panel{background:var(--paper);background-image:linear-gradient(var(--paper-wash),var(--paper-wash)),var(--paper-grain);
  background-size:var(--paper-grain-size);background-blend-mode:normal,multiply}
.nav-services-panel a{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.75rem 1rem;color:var(--ink);font-size:1rem;font-weight:500;text-decoration:none;line-height:1.4}
.nav-services-panel a:hover,.nav-services-panel a[aria-current="page"]{background:var(--cipres-50);color:var(--cipres)}
.nav-services-panel a[aria-current="page"]{box-shadow:inset 3px 0 var(--cipres)}
.nav-services-panel a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;background:var(--focus);color:var(--ink)}
.nav-services-list>li:nth-child(3){border-top:1px solid var(--rule);margin-top:.25rem;padding-top:.25rem}
.nav-services-panel .nav-services-prices{border-top:1px solid var(--rule);margin-top:.5rem;color:var(--cipres)}
.nav-services-prices>.icon{width:20px;height:20px;flex:none}
.nav-services-prices>.icon:last-child{margin-left:auto}
.nav-desktop .nav-services-panel{position:absolute;top:calc(100% + 12px);left:0;z-index:1;width:316px;
  padding:.5rem;border:1px solid var(--rule-ui);border-radius:4px;box-shadow:0 10px 24px rgba(24,53,40,.12);
  max-height:calc(100dvh - var(--header-h) - 112px);overflow-y:auto;overscroll-behavior:contain}
.btn-header{min-height:46px;padding:.45rem 1rem;font-size:1rem}
/* Hamburguesa: components.js escribe ☰/✕ con textContent → se oculta el glifo y se pinta el icono por CSS */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;border:1px solid var(--ink);border-radius:var(--radius);
  background:transparent;color:var(--ink);font-size:0;line-height:0;cursor:pointer}
.nav-toggle::before{content:"";flex:none;width:24px;height:24px;background:currentColor;-webkit-mask:var(--ic-menu) center/contain no-repeat;mask:var(--ic-menu) center/contain no-repeat}
.nav-toggle[aria-expanded="true"]::before{-webkit-mask-image:var(--ic-close);mask-image:var(--ic-close)}
.nav-toggle:hover{background:var(--paper-2)}
.nav-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:0;background:var(--focus);color:var(--ink)}
.mobile-menu{border-top:1px solid var(--rule);background:var(--paper);max-height:calc(100dvh - var(--header-h) - 112px);overflow-y:auto;overscroll-behavior:contain}
.mobile-menu a{display:flex;align-items:center;gap:.6rem;min-height:52px;padding:.85rem var(--gutter);border-bottom:1px solid var(--rule);color:var(--ink);font-weight:500;text-decoration:none}
.mobile-menu a:hover{background:var(--paper-2);color:var(--ink)}
.mobile-menu a[aria-current="page"]{color:var(--cipres);font-weight:600;box-shadow:inset 4px 0 0 var(--cipres)}
.mobile-menu .mobile-menu-call{color:var(--cipres);font-variant-numeric:tabular-nums lining-nums}
.mobile-menu a:focus-visible{color:var(--ink);background:var(--focus);box-shadow:inset 0 -4px 0 var(--ink)}
.mobile-menu .nav-services-trigger{justify-content:space-between;min-height:52px;padding:.85rem var(--gutter);border-bottom:1px solid var(--rule)}
.mobile-menu .nav-services-trigger.is-current{box-shadow:inset 4px 0 var(--cipres)}
.mobile-menu .nav-services-trigger:focus-visible{outline-offset:-3px}
.mobile-menu .nav-services-panel{padding:.25rem var(--gutter) .5rem;background-color:var(--paper-2)}
.mobile-menu .nav-services-panel a{padding:.75rem 1rem;min-height:48px;border:0;white-space:normal}
.mobile-menu .nav-services-prices{border-top:1px solid var(--rule)}
@media (min-width:1024px){
  .nav-desktop{display:flex;align-items:center;gap:1.75rem}
  .nav-toggle{display:none}
  .mobile-menu{display:none !important}
}
@media (min-width:1024px) and (max-width:1199px){
  .nav-desktop{gap:1rem;font-size:1rem}
  .nav-desktop .btn-header{white-space:nowrap}
}
@media (min-width:768px){.phonebar-top{display:block}}
.phonebar-bottom{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;
  display:flex;justify-content:flex-end;max-width:calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));pointer-events:none}
.sos-float{--sos-red:#C53F4F;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  max-width:100%;min-height:64px;padding:11px 16px 11px 12px;border:1px solid var(--cipres-700);border-radius:999px;
  background:var(--cipres) var(--paper-grain) center/280px 280px;background-blend-mode:multiply;
  box-shadow:0 6px 22px rgba(24,53,40,.25);color:#fff;font-size:1rem;font-weight:600;
  line-height:1.3;text-decoration:none;pointer-events:auto}
.sos-float-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#FAF3F2;color:var(--sos-red)}
.sos-float-icon>.icon{width:23px;height:23px;margin:0}
.sos-float-copy{display:grid;gap:3px;min-width:0}
.sos-float-title strong{color:#FF6868;font-size:1.1875rem;font-weight:800;white-space:nowrap}
.sos-float-note{color:#E6EEE9;font-size:.8125rem;font-weight:400}
.sos-float::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.sos-float:hover{background-color:var(--cipres-700);color:#fff}
.sos-float:focus-visible{outline:3px solid var(--ink);outline-offset:5px;background-color:var(--cipres);color:#fff;
  box-shadow:0 0 0 3px var(--paper),0 6px 22px rgba(24,53,40,.25)}
@media (min-width:768px){.phonebar-bottom{right:max(24px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:no-preference){.sos-float::before{animation:sos-heartbeat 2.7s ease-out infinite}}
@keyframes sos-heartbeat{
  0%,45%,100%{box-shadow:0 0 0 0 rgba(197,63,79,0)}
  8%{box-shadow:0 0 0 6px rgba(197,63,79,.24)}
  16%{box-shadow:0 0 0 3px rgba(197,63,79,.12)}
  26%{box-shadow:0 0 0 13px rgba(197,63,79,.22)}
  42%{box-shadow:0 0 0 20px rgba(197,63,79,0)}
}

/* ---------- 4.20 Modal «Te llamamos» ---------- */
dialog.modal{width:calc(100% - 2*var(--gutter));max-width:30rem;padding:0;border:1px solid var(--rule-ui);border-radius:var(--radius);
  background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-modal)}
dialog.modal::backdrop{background:rgba(0,0,0,.45)}
.modal-body{padding:var(--s-5)}
.modal-body .stack{--stack-gap:var(--s-4)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.modal-close{border-color:transparent;margin:-.5rem -.5rem 0 0}
.modal-close:hover{border-color:var(--rule)}
.modal-intro{margin:.4rem 0 var(--s-4);font-size:1rem;color:var(--ink-2)}
.modal-foot{margin:0;font-size:.9375rem;color:var(--ink-2)}
/* .form-error y .modal-foot anulan su margen: dentro del formulario recuperan aire bajo el botón */
.modal-body .stack>.form-error,.modal-body .stack>.modal-foot{margin-top:var(--s-3)}
.modal-done-icon{display:block;width:40px;height:40px;margin-bottom:var(--s-3);color:var(--cipres)}
.modal-done-title{margin:0 0 var(--s-2)}
#callDone>.btn{margin-top:var(--s-5)}

/* ---------- 4.21 Pie ---------- */
.site-footer{margin-top:0;background:var(--paper-2);color:var(--ink);border-top:1px solid var(--cipres)}
.ft-inner{padding-top:var(--s-7);padding-bottom:var(--s-6)}
/* El SOS comparte el final del footer, sin crear una franja fuera de el. */
.has-phonebar .ft-inner{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media (min-width:1024px){
  .has-phonebar .ft-inner{padding-bottom:calc(var(--s-6) + env(safe-area-inset-bottom))}
  .has-phonebar .ft-bottom{min-height:72px;padding-right:304px}
}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover{color:var(--cipres);text-decoration:underline}
.site-footer a:focus-visible{color:var(--ink)}
.ft-assurance{background-color:var(--cipres);background-image:var(--paper-grain);background-size:var(--paper-grain-size);background-blend-mode:multiply;color:#fff}
.ft-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4) var(--s-6);padding-block:var(--s-6)}
.ft-badge{display:flex;align-items:center;justify-content:center;max-width:100%;gap:.65rem;font-size:1rem;font-weight:500;color:#fff;text-align:center}
.ft-badge .icon{width:26px;height:26px;flex:none;color:#E2B04A}
@media (max-width:860px){.ft-badges{flex-direction:column;align-items:center}}
.ft-grid{display:grid;gap:var(--s-6);grid-template-columns:1.6fr 1fr 1fr 1fr}
@media (max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ft-grid{grid-template-columns:1fr}}
.ft-grid>*{min-width:0}
.ft-brand{width:208px}
.ft-intro{max-width:34ch;margin:.6rem 0 1.1rem;color:var(--ink-2)}
.site-footer .ft-phone{display:inline-block;font-family:var(--f-serif);font-weight:500;font-size:2rem;line-height:1.1;letter-spacing:0;color:var(--ink)}
.site-footer .ft-phone:hover{color:var(--cipres)}
.ft-phone-note{margin:.15rem 0 1rem;font-size:.9375rem;color:var(--ink-2)}
.ft-title{margin:0 0 var(--s-3);padding-bottom:var(--s-2);border-bottom:1px solid var(--rule);font-family:var(--f-serif);font-weight:600;font-size:1.125rem;color:var(--ink)}
.ft-title--spaced{margin-top:var(--s-5)}
.ft-list{display:flex;flex-direction:column;gap:.15rem;font-size:.9375rem}
.ft-list a{display:inline-block;padding:.3rem 0}                       /* objetivo ≥ 24 px */
.ft-mail{display:inline-block;padding:.3rem 0;font-size:.9375rem}
.ft-muted{color:var(--ink-2)}
.ft-divider{border:0;border-top:1px solid var(--rule);margin:var(--s-6) 0 var(--s-4)}
.ft-bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;align-items:center;justify-content:space-between}
.ft-bottom p{margin:0}
.ft-company{margin:var(--s-3) 0 0}
.ft-legal{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.ft-legal a{display:inline-block;padding:.3rem 0;text-decoration:underline;text-underline-offset:.18em}

/* ---------- 4.22 Movimiento, forced-colors ---------- */
/* La capa uniforme suaviza la fibra sin poner filtros sobre texto o imágenes. */
.site-header,.phonebar-top,.mobile-menu,.site-footer,
.hm-antes,.about-band,.card-soft,.doc-note,.ss-docs,.quote-foot,
.tool-sheet,.quote,dialog.modal{
  background-image:linear-gradient(var(--paper-wash),var(--paper-wash)),var(--paper-grain);
  background-size:var(--paper-grain-size);background-blend-mode:normal,multiply}
.phonebar-top,.site-footer,.hm-antes,.about-band,.card-soft,.doc-note,.ss-docs,.quote-foot{--paper-wash:rgba(239,238,232,.58)}
.call-box{background-image:var(--paper-grain);background-size:var(--paper-grain-size);background-blend-mode:multiply}
/* La trama de las reglas recuerda al sombreado del grabado sin invadir el texto. */
.hm-principles,.tool-list,.ob-h,.about-company{
  border-top:0;
  background-image:repeating-linear-gradient(115deg,var(--ink-3) 0 1px,transparent 1px 3px);
  background-position:left top;background-size:100% 3px;background-repeat:no-repeat}
@media (prefers-contrast:more),(forced-colors:active){
  body,.site-header,.phonebar-top,.sos-float,.mobile-menu,.site-footer,
  .hm-antes,.about-band,.card-soft,.doc-note,.ss-docs,.quote-foot,.tool-sheet,
  .quote,dialog.modal,.call-box,.btn-primary,.btn-cta,.btn-secondary,.kicker::before{background-image:none}
  body .hm-principles,body .tool-list,body .ob-h,body .about-company{background-image:none;border-top:1px solid currentColor}
}
@media print{
  .ft-assurance{background:none}
  .ft-badge,.ft-badge .icon{color:#000}
  .phonebar-bottom{display:none}
  .has-phonebar .ft-inner{padding-bottom:var(--s-6)}
  .has-phonebar .ft-bottom{min-height:0;padding-right:0}
  body,.site-footer,.hm-antes,.about-band,.doc-note,.tool-sheet,.quote,.call-box{background-image:none}
}
.fade-in{animation:fade .2s ease-out both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}
@media (forced-colors:active){
  .ft-assurance{background:Canvas;color:CanvasText}
  .ft-badge,.ft-badge .icon{color:CanvasText}
  .sos-float{border-color:ButtonText;background:ButtonFace;color:ButtonText}
  .sos-float-icon{background:ButtonFace;color:ButtonText}
  .sos-float-title strong,.sos-float-note{color:ButtonText}
  .sos-float::before{display:none}
  .nav-toggle::before,button.opt::after,.disclosure>summary::after,.accordion-item>summary::after,.aviso::before,.legal-alert::before,
  .form-error:not(:empty)::before,a[target="_blank"]:not(.btn)::after,.bar-fill,.progress>i,.meta-line>span::before{forced-color-adjust:none;background:CanvasText}
  .bar-fill.is-soft{background:repeating-linear-gradient(135deg,CanvasText 0 1.5px,transparent 1.5px 5px)}
  .sos-check input{-webkit-appearance:auto;appearance:auto}
  .btn{border-color:ButtonText}
}

/* ---------- Grabados (láminas botánicas de dominio público) ----------
   assets/img/grabados/: olivo (Engler & Prantl, ~1895), laurel (S. Paulli, 1648),
   ciprés (B. Besler, 1640). Créditos y enlaces en README.md.
   Son tinta sobre blanco opaco: multiply hace desaparecer el blanco sobre
   --paper y --paper-2. Siempre decorativos (alt=""), sin texto, sin sombras,
   radios ni degradados; acompañan, no protagonizan. Cada página los coloca
   en su CSS propio (about-grabado, en-grabado); el del pie, aquí. */
.grabado{display:block;height:auto;mix-blend-mode:multiply;pointer-events:none;-webkit-user-select:none;user-select:none}
/* Alto contraste: el blanco opaco no se mezcla con el lienzo del sistema. */
@media (forced-colors:active){.grabado{display:none}}

/* Pie: rama de olivo en una quinta columna estrecha (solo desde 1200 px, donde
   las cuatro columnas de texto siguen sin partir sus enlaces). Desborda hacia el
   margen derecho y su tallo apoya en el filete inferior (.ft-divider). */
.ft-grabado{display:none}
@media (min-width:1200px){
  .site-footer{overflow-x:clip}
  .ft-grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) 7.5rem}
  .ft-grabado{display:block;align-self:end;justify-self:start;max-width:none;
    width:min(220px,calc(7.5rem + (100vw - var(--wrap)) / 2 - 24px));
    margin-bottom:calc(-1*var(--s-6));
    clip-path:inset(0 2.4% 0 0)}   /* oculta restos de la lámina vecina en el borde derecho */
}