/* site.css — n'utilise QUE des var(--...) définis dans tokens.css.
   Aucune valeur en dur. Composants de base seulement : la mise en page
   propre à chaque page (grille "tres puertas", cartes d'activités de
   La Casa, etc.) reste à écrire avec le contenu. */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-plain-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
}

/* Respiration entre le filet de l'en-tête et le début du contenu — sans
   ça le sur-titre/H1 de chaque page venait toucher le filet (signalé par
   capture d'écran réelle le 27/09). Un seul endroit, sur <main> dans
   base.html : jamais réglé page par page, le rythme reste identique sur
   les huit gabarits. */
main {
  padding-top: var(--presente-space-10);
}

/* Poids/police par rôle, selon le tableau typographique du design system
   (Presente Design System.pdf, §04) : display/headline = serif 400 (sauf
   headline-small = 500, pas utilisé par un h1-h4 ici) ; title = SANS-
   SERIF 600, pas serif — h4 (title-large) a sa propre règle plus bas. */
h1, h2, h3 {
  font-family: var(--md-sys-typescale-brand-font);
  font-weight: var(--md-sys-typescale-weight-regular);
  margin: 0 0 var(--presente-space-4) 0;
}

h4 {
  font-family: var(--md-sys-typescale-plain-font);
  font-weight: var(--md-sys-typescale-weight-bold);
  margin: 0 0 var(--presente-space-4) 0;
}

/* ─── Sur-titre — repère court au-dessus du H1 (ex. "PRIMERA FORMA · A
   DOMICILIO" / "SEGUNDA FORMA · VIDA COMPARTIDA" sur en-casa/la-casa),
   pour distinguer les deux formes du service avant même le titre. */
.surtitulo {
  margin: 0 0 var(--presente-space-2) 0;
  font-family: var(--md-sys-typescale-plain-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-weight-medium);
  letter-spacing: 0.08em;
  color: var(--md-sys-color-secondary);
}

/* ─── Sur-titre long — variante ajoutée le 27/09 : une phrase entière
   (ex. "Una cuidadora en la casa de su mamá." avant le H1 de l'accueil),
   pas trois mots en capitales. Ni capitales, ni interlettrage — les deux
   ne tiennent que sur un repère court, ils rendraient une phrase entière
   illisible. Même élément <p> que .surtitulo (jamais un <h2> : un titre
   avant le H1 casse la hiérarchie pour le SEO et les lecteurs d'écran),
   taille intermédiaire entre le corps de texte et le H1 pour qu'elle se
   lise comme une amorce, pas comme une légende. */
.surtitulo-larga {
  margin: 0 0 var(--presente-space-3) 0;
  font-family: var(--md-sys-typescale-plain-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-weight-medium);
  color: var(--md-sys-color-secondary);
}

h1 { font-size: var(--md-sys-typescale-display-medium-size); line-height: var(--md-sys-typescale-display-medium-line); }
h2 { font-size: var(--md-sys-typescale-headline-large-size); line-height: var(--md-sys-typescale-headline-large-line); }
h3 { font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line); }
h4 { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line); }

p {
  max-width: var(--presente-measure);
  font-size: var(--md-sys-typescale-body-large-size); /* jamais sous 18px — règle 6 */
  line-height: var(--md-sys-typescale-body-large-line);
  margin: 0 0 var(--presente-space-4) 0;
}

a {
  color: var(--md-sys-color-secondary);
  text-underline-offset: 0.15em;
}

/* Survol par défaut de tout lien de prose (contenu, pied de page, bande
   de langue...) qui n'a pas déjà son propre traitement — .boton et
   .boton-texto gèrent le leur. Couche d'état Material (8 % d'encre)
   appliquée à la couleur du texte plutôt qu'à un fond : un lien en
   ligne dans un paragraphe n'a pas de boîte à peindre. Les liens de nav
   de l'en-tête (plus bas) reçoivent CE MÊME survol, en plus de leur
   fond — pas d'exclusion nécessaire, les deux se cumulent sans se
   contredire. Ajouté le 27/09 — c'était le seul type de lien du site
   sans aucun retour au survol. */
a:hover:not(.boton):not(.boton-texto) {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-opacity) * 100%), currentColor);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: var(--presente-focus-ring);
  outline-offset: var(--presente-focus-ring-offset);
}

/* ─── Mise en page ──────────────────────────────────────────── */

.contenedor {
  max-width: var(--presente-content-max);
  margin-inline: auto;
  padding-inline: var(--presente-gutter-mobile);
}

@media (min-width: 1024px) {
  .contenedor { padding-inline: var(--presente-gutter-desktop); }
}

/* ─── Élévation (teinte + contour, jamais d'ombre — règle 1) ─ */

.elev-0 { background: var(--presente-elev-0-bg); border: var(--presente-elev-0-border); }
.elev-1 { background: var(--presente-elev-1-bg); border: var(--presente-elev-1-border); }
.elev-2 { background: var(--presente-elev-2-bg); border: var(--presente-elev-2-border); }
.elev-3 { background: var(--presente-elev-3-bg); border: var(--presente-elev-3-border); }
.elev-4 { background: var(--presente-elev-4-bg); border: var(--presente-elev-4-border); }

/* ─── Boutons — cibles ≥ 48px, jamais d'ombre ────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--presente-target-min);
  /* label-medium (16px) depuis le 27/09 — était label-large (18px) ;
     rembourrage resserré d'autant (space-6 → space-5) pour que le
     bouton ne se retrouve pas avec un vide disproportionné autour d'un
     texte plus petit, la cible tactile (48px de haut, min-height
     ci-dessus) restant inchangée. */
  padding-inline: var(--presente-space-5);
  /* shape-md (12px), PAS shape-full — shape-full est réservé aux puces
     (filtres/chips), jamais aux boutons. Voir Presente Design System.pdf
     §05 : "shape-md · boutons, champs, alertes" / "shape-full · puces
     uniquement". */
  border-radius: var(--md-sys-shape-corner-md);
  font-family: var(--md-sys-typescale-plain-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-weight-medium);
  letter-spacing: var(--md-sys-typescale-label-tracking);
  /* Un <a class="boton"> reste un lien : sans ça il garde le soulignement
     par défaut du navigateur. Le design system (§06) ne souligne ni le
     bouton rempli ni le contour, dans aucun état — seul .boton-texto
     l'est, et seulement au survol/focus (règle ajoutée le 21/09, signalée
     par capture d'écran réelle : tous les <a class="boton"> du site
     étaient soulignés). */
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.boton-primario {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.boton-primario:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-primary) calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-primary));
}

.boton-primario:active {
  background: color-mix(in srgb, var(--md-sys-color-on-primary) calc(var(--md-sys-state-pressed-opacity) * 100%), var(--md-sys-color-primary));
}

.boton-primario:disabled {
  background: var(--presente-disabled-container);
  color: var(--presente-disabled-content);
  cursor: not-allowed;
}

/* Contour — action secondaire. Un groupe de boutons ne porte qu'une seule
   action primaire (voir .cta-doble plus bas) ; tout le reste — y compris
   les liens WhatsApp, qui avaient leur propre .boton-whatsapp en
   remplissage tertiary-container (ocre) jusqu'au 21/09 — passe par ce
   composant : plus un seul bouton orange sur le site, un seul vocabulaire
   visuel (rempli/contour/texte). Bordure en outline, JAMAIS primary : même
   convention que .campo (règle 3 des tokens — outline-variant ne borde
   jamais un interactif, outline est le seul contour qui en a le droit) ;
   la couleur de marque reste portée par le texte, pas par le trait. */
.boton-contorno {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

.boton-contorno:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}

.boton-contorno:active {
  background: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}

.boton-contorno:disabled {
  color: var(--presente-disabled-content);
  border-color: var(--presente-disabled-outline);
  cursor: not-allowed;
}

/* ─── Bouton texte — action tertiaire (ex. "Volver", "Conocer La Casa"
   en fin de section). Sans lui, ces liens de navigation interne étaient
   un <a> nu, sans retour visuel au survol/appui — écart relevé le 17/09
   contre Presente Design System.pdf §06 ("Bouton texte · action
   tertiaire"). shape-sm (8px), pas shape-md : plus petit qu'un bouton
   plein/contour, réservé aux liens courts en ligne. Couleur héritée de
   la règle `a` globale (secondary) — ce composant ajoute seulement le
   fond interactif, pas un changement de teinte. */

.boton-texto {
  display: inline-flex;
  align-items: center;
  min-height: var(--presente-target-min);
  padding-inline: var(--presente-space-3);
  margin-inline-start: calc(var(--presente-space-3) * -1);
  border-radius: var(--md-sys-shape-corner-sm);
  font-weight: var(--md-sys-typescale-weight-medium);
  /* Souligné seulement au survol/focus (design system §06, grille d'états
     du "bouton texte") — jamais au repos, au clic ou désactivé. Sans ce
     reset, l'héritage du soulignement par défaut de `a` le rendait
     souligné en permanence. */
  text-decoration: none;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.boton-texto:hover,
.boton-texto:focus-visible {
  text-decoration: underline;
}

.boton-texto:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-surface));
}

.boton-texto:active {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-pressed-opacity) * 100%), var(--md-sys-color-surface));
}

/* ─── Champs de formulaire — fonctionnent sans JS, cibles ≥ 56px ─ */

/* Rythme vertical entre les blocs de premier niveau du formulaire
   (étiquette+champ, fieldset, bloc de consentement, bouton) — sans ça
   tout s'empile au ras les uns des autres (margin-bottom de .campo
   n'est que l'écart minimal entre cibles tactiles, pas un espacement
   de lecture). Signalé par une capture d'écran réelle le 17/09. */
.formulario-interes > * + * {
  margin-top: var(--presente-space-6);
}

/* Même rythme, mais ENTRE les blocs de fin d'écran 2 (deux formulaires +
   lien WhatsApp + sa note) : .formulario-interes ci-dessus ne gère que
   l'intérieur de CHAQUE formulaire, pas l'espace entre eux — ils restaient
   quasi au contact les uns des autres. Signalé par une capture d'écran
   réelle le 17/09. */
.paso2-final > * + * {
  margin-top: var(--presente-space-6);
}

.campo {
  display: block;
  width: 100%;
  min-height: var(--presente-target-field);
  margin-bottom: var(--presente-target-gap);
  padding: var(--presente-space-3) var(--presente-space-4);
  font-size: var(--md-sys-typescale-body-large-size);
  font-family: var(--md-sys-typescale-plain-font);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline); /* jamais outline-variant sur un interactif — règle 3 */
  /* shape-md (12px) — le design system range "boutons, champs, alertes"
     ensemble sous shape-md, pas shape-sm (réservé aux petits éléments :
     bouton texte, petite case). */
  border-radius: var(--md-sys-shape-corner-md);
}

.etiqueta-campo {
  display: block;
  font-size: var(--md-sys-typescale-label-large-size);
  margin-bottom: var(--presente-space-3);
}

/* Champ en erreur — validation SERVEUR (voir php/lib/validacion.php) : la
   bordure passe sur --md-sys-color-error, jamais outline-variant (règle 3
   des tokens, de toute façon un champ en erreur reste un interactif). Fond
   error-container en plus de la bordure — pas la couleur seule pour porter
   le sens (voir Presente Design System.pdf §03 : "error-container —
   message d'erreur... et jamais la couleur seule pour porter le sens"). */
.campo-error {
  border-color: var(--md-sys-color-error);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.mensaje-error {
  color: var(--md-sys-color-error);
  font-size: var(--md-sys-typescale-label-large-size);
  margin: var(--presente-space-1) 0 var(--presente-space-3) 0;
}

/* Case de consentement habeas data — un composant dessiné, pas une ligne
   grise. Empilé en colonne (titre, case+texte, liste, lien) — c'était par
   erreur display:flex SANS flex-direction:column, donc les quatre enfants
   directs (p, label, ul, a) se posaient côte à côte en quatre colonnes
   étroites au lieu de s'empiler. Signalé par une capture d'écran réelle
   le 17/09. */
.consentimiento {
  display: flex;
  flex-direction: column;
  gap: var(--presente-space-3);
  padding: var(--presente-space-4);
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-md);
  margin-block: var(--presente-space-5);
}

/* La case + son texte, eux, restent bien une ligne (icône à gauche,
   texte à droite) — c'est au niveau du <label> que ce sens-là est voulu,
   pas au niveau du bloc entier. */
.consentimiento label {
  display: flex;
  align-items: flex-start;
  gap: var(--presente-space-3);
  min-height: var(--presente-target-min);
}

/* target-min (48px) est la cible TACTILE minimale, pas la taille visuelle
   de la case : gonfler la case elle-même à 48px la rendait absurdement
   grande (signalé par une capture d'écran réelle). La case reste à une
   taille de case à cocher normale ; les 48px de cible tactile viennent du
   <label> ci-dessus (min-height), qui reste cliquable sur toute sa
   hauteur grâce à l'association native <label><input>…</label>. */
.consentimiento input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--md-sys-color-primary);
}

/* ─── Honeypot — invisible visuellement, jamais display:none ── */

.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Bandeau anti-arnaque — terracotta pleine, règle 2c :
   uniquement un intitulé court ≥ 24px, jamais du texte de paragraphe. */

.bandeau-anti-estafa {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  padding: var(--presente-space-5) var(--presente-gutter-mobile);
  border-radius: var(--md-sys-shape-corner-md);
  margin-block: var(--presente-space-5);
}

.bandeau-anti-estafa-titulo {
  margin: 0;
  font-family: var(--md-sys-typescale-brand-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  font-weight: var(--md-sys-typescale-weight-medium);
}

/* ─── Bandeau de page — pleine largeur, en tête de CHAQUE page depuis le
   07/10 (étendu depuis le héros de l'accueil du 01/10). Le fond va d'un
   bord à l'autre de l'écran ; le contenu reste calé sur .contenedor,
   la même colonne que le reste de la page.

   Une couleur par univers (--presente-univers-*, tokens.css), toutes
   prises dans la palette — le texte du bandeau, sur-titre et notes
   compris, prend la couleur de texte de l'univers (paire vérifiée ≥ 7:1),
   jamais le terracotta ou le gris de la page : sur les fonds sombres
   (nuestra manera, trabajo) ils seraient illisibles.

   Le bandeau compte comme UNE des deux surfaces teintées autorisées par
   vue (règle 2b) : rien de teinté ne se pose dedans — d'où l'ouverture
   2027 de l'accueil en simple ligne, et la confirmation de
   /interes/gracias/ posée directement sur le bandeau (plus de
   .bloque-final). */

/* Le bandeau touche l'en-tête : il remplace la respiration de <main>
   (voir plus haut) sur toute page qui commence par un bandeau. */
main:has(> .banda:first-child) {
  padding-top: 0;
}

.banda {
  background: var(--banda-fondo);
  color: var(--banda-texto);
}

.banda--inicio         { --banda-fondo: var(--presente-univers-inicio-bg);         --banda-texto: var(--presente-univers-inicio-fg); }
.banda--en-casa        { --banda-fondo: var(--presente-univers-en-casa-bg);        --banda-texto: var(--presente-univers-en-casa-fg); }
.banda--la-casa        { --banda-fondo: var(--presente-univers-la-casa-bg);        --banda-texto: var(--presente-univers-la-casa-fg); }
.banda--nuestra-manera { --banda-fondo: var(--presente-univers-nuestra-manera-bg); --banda-texto: var(--presente-univers-nuestra-manera-fg); }
.banda--quienes-somos  { --banda-fondo: var(--presente-univers-quienes-somos-bg);  --banda-texto: var(--presente-univers-quienes-somos-fg); }
.banda--trabajo        { --banda-fondo: var(--presente-univers-trabajo-bg);        --banda-texto: var(--presente-univers-trabajo-fg); }
.banda--tramite        { --banda-fondo: var(--presente-univers-tramite-bg);        --banda-texto: var(--presente-univers-tramite-fg); }

.banda-interior {
  display: grid;
  gap: var(--presente-space-8);
  padding-block: var(--presente-space-10) var(--presente-space-12);
}

.banda .surtitulo,
.banda .nota {
  color: inherit;
}

.banda .nota {
  margin-bottom: var(--presente-space-3);
}

.banda h1 {
  margin: 0;
}

.banda-titulos > :last-child,
.banda-texto > :last-child {
  margin-bottom: 0;
}

/* Sans illustration (formulaire, remerciement, page légale) : une seule
   colonne de lecture. */
.banda-texto {
  max-width: var(--presente-measure);
}

.banda-texto h2 {
  margin-bottom: var(--presente-space-3);
}

/* Illustration des pages intérieures : carré à coins arrondis, comme
   partout ailleurs (.ilustracion) — l'arc reste propre à l'accueil. */
.banda-imagen {
  max-width: 440px;
}

/* Desktop : titre et texte à gauche, illustration à droite sur toute la
   hauteur du bandeau. */
@media (min-width: 900px) {
  .banda-interior--con-imagen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    grid-template-areas:
      "titulos imagen"
      "texto   imagen";
    grid-template-rows: auto 1fr;
    column-gap: var(--presente-space-16);
    row-gap: var(--presente-space-8);
    padding-block: var(--presente-space-16);
  }

  .banda-interior--con-imagen .banda-titulos { grid-area: titulos; }
  .banda-interior--con-imagen .banda-texto   { grid-area: texto; }

  .banda-interior--con-imagen .banda-imagen {
    grid-area: imagen;
    align-self: center;
  }
}

/* ─── Accueil seulement — ce qui distingue son bandeau des autres :
   titre en deux phrases plus grand, et la porte. L'illustration y est
   découpée en arc plein cintre et posée sur le bas du bandeau comme une
   porte de maison de barrio sur son seuil (desktop). */

/* Les deux phrases du titre, même famille serif : l'amorce (un <p>,
   jamais un <h2> avant le H1) plus petite, le H1 en display-large. Même
   encre — la hiérarchie vient de la taille seule. */
.banda-amorce {
  margin: 0 0 var(--presente-space-3) 0;
  font-family: var(--md-sys-typescale-brand-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line);
}

.banda--inicio h1 {
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line);
}

/* Arc plein cintre : un rayon démesuré (999px) est ramené par le
   navigateur à la moitié de la largeur, quel que soit le format du
   cadre — demi-cercle exact en haut, angles droits en bas. Format 4:5,
   recadrage de l'illustration carrée par object-position (règle du
   design system : centré à 42 %, le visage et les mains restent
   visibles). */
/* L'arc découpe le CADRE de l'image (.ilustracion-marco), pas le bloc
   entier : le bouton pause d'une illustration animée vit à côté du
   cadre, il ne doit être ni rogné ni posé sur l'image (règle 4). Sans
   vidéo, l'image n'a pas de cadre : c'est alors le bloc qui découpe. */
.banda-imagen--arco {
  max-width: none;
}

.banda-imagen--arco > .ilustracion,
.banda-imagen--arco .ilustracion-marco {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
}

.banda-imagen--arco .ilustracion,
.banda-imagen--arco .ilustracion-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0;
}


.banda-apertura {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  font-weight: var(--md-sys-typescale-weight-medium);
}

@media (min-width: 900px) {
  .banda--inicio .banda-interior {
    padding-bottom: 0;
  }

  .banda--inicio .banda-imagen--arco {
    align-self: end;
  }

  .banda--inicio .banda-texto {
    padding-bottom: var(--presente-space-16);
  }
}


/* ─── Illustrations — jamais de marge, contour ou carte autour ; un
   rayon depuis le 27/09 (--presente-illustration-radius, shape-lg —
   cohérent avec .puerta/.tarjeta, qui utilisent la même échelle). */

.ilustracion {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--presente-illustration-radius);
}

/* ─── Illustrations animées (16/10) — voir templates/partials/imagen.html
   et assets/js/ilustracion-animada.js. La vidéo est posée exactement sur
   l'illustration fixe : même place, même ratio, même rayon. Elle reste
   invisible jusqu'à sa première image lue (.is-animada), puis apparaît en
   fondu. Aucun voile, contour ni bouton sur l'image (règle 4). */
.ilustracion-marco {
  position: relative;
}

.ilustracion-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--presente-illustration-radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

.ilustracion-animada.is-animada .ilustracion-video {
  opacity: 1;
}

/* Bouton pause/lecture SOUS l'image : un bouton texte (action
   tertiaire, design system §06), discret et aligné à gauche comme tous
   les groupes de boutons du site. Il garde la cible de 48 px (règle 5).
   Les styles de .boton-texto visent un <a> : on remet ici à zéro ce
   qu'un <button> apporte en plus (fond, bordure, police). */
.ilustracion-pausa {
  gap: var(--presente-space-2);
  margin-top: var(--presente-space-2);
  background: transparent;
  border: 0;
  color: var(--md-sys-color-secondary);
  font-family: var(--md-sys-typescale-plain-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  letter-spacing: var(--md-sys-typescale-label-tracking);
  cursor: pointer;
}

/* Survol et appui calculés sur la couleur du bouton lui-même (et pas
   sur on-surface/surface comme .boton-texto) : le même voile reste
   lisible sur la surface crème comme sur un bandeau foncé. */
.ilustracion-pausa:hover {
  background: color-mix(in srgb, currentColor calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}

.ilustracion-pausa:active {
  background: color-mix(in srgb, currentColor calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}

/* Dans un bandeau d'en-tête, le bouton prend la couleur du texte du
   bandeau : secondary disparaissait sur le terracotta de « Trabajar con
   nosotros », qui a exactement cette teinte (constaté le 16/10). L'anneau
   de focus suit la même couleur, car l'anneau sombre par défaut est
   illisible sur ce fond. */
.banda .ilustracion-pausa {
  color: inherit;
}

.banda .ilustracion-pausa:focus-visible {
  outline-color: currentColor;
}

/* .boton-texto impose display:inline-flex, qui l'emporterait sur
   l'attribut hidden : le bouton doit rester caché tant que le script n'a
   pas pris la main (sans JS, il ne servirait à rien). */
.ilustracion-pausa[hidden] {
  display: none;
}

.ilustracion-pausa-icono {
  flex: none;
  fill: currentColor;
}

.ilustracion-pausa .icono-lectura,
.ilustracion-pausa.is-pausada .icono-pausa {
  display: none;
}

.ilustracion-pausa.is-pausada .icono-lectura {
  display: inline;
}

/* Accueil, desktop : l'arc est posé sur le bas du bandeau comme une porte
   sur son seuil. Le bouton passe donc AU-DESSUS de l'arc, pour ne pas le
   décoller du seuil. */
@media (min-width: 900px) {
  .banda--inicio .ilustracion-animada {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .banda--inicio .ilustracion-animada .ilustracion-marco {
    width: 100%;
  }

  .banda--inicio .ilustracion-pausa {
    order: -1;
    margin-top: 0;
    margin-bottom: var(--presente-space-2);
  }
}

/* Mouvement réduit : pas de vidéo du tout, l'illustration fixe seule.
   display:none empêche aussi tout chargement (preload="none", et le
   script ne lance rien dans ce cas). */
@media (prefers-reduced-motion: reduce) {
  .ilustracion-video,
  .ilustracion-pausa {
    display: none !important;
  }
}

/* Image à côté de son texte (règle changée le 16/09 — plus de fond
   perdu : ce traitement masquait un écart de teinte entre le crème des
   illustrations et la surface, disparu depuis le passage de --md-sys-
   color-surface à #FFFBF6). Mobile : une colonne, l'image carrée pleine
   largeur au-dessus du texte. Desktop, même seuil que .columnas-dos : deux
   colonnes, image plafonnée à 480px de côté pour ne jamais dominer le
   texte. Les illustrations du site sont natives 1:1, donc aucun
   object-fit/aspect-ratio forcé ici — la largeur suffit à donner un carré,
   sans jamais recadrer une composition. */
.columnas-imagen {
  display: grid;
  gap: var(--presente-space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .columnas-imagen {
    grid-template-columns: minmax(0, 480px) 1fr;
  }
}

.columna-imagen {
  max-width: 480px;
}

/* ─── En-tête et pied de page ─────────────────────────────────
   Fond blanc (surface-container-lowest) pleine largeur + un seul filet
   de séparation en bas, comme le pied de page — auparavant transparent
   (donc confondu avec le fond crème de <body>). Ce n'est PAS une teinte
   au sens de la règle 2b (surface-container-lowest reste un ton de
   SURFACE neutre, pas un conteneur de sens comme primary-container/
   tertiary-container) : ça ne consomme aucune des deux teintes
   autorisées par page.

   Revu le 27/09 (deux) sur signalement direct : le CONTENU allait
   auparavant jusqu'à .contenedor (1120px centré) — .encabezado-interior
   n'a plus cette classe, voir plus bas : il prend toute la largeur de
   l'écran, avec sa propre marge latérale fixe (les mêmes tokens de
   gouttière que .contenedor, --presente-gutter-*, mais sans le
   max-width qui centrait le corps de page). */
.encabezado {
  background: var(--md-sys-color-surface-container-lowest);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* Sélecteur de langue — groupe de DROITE sur la ligne desktop, avec les
   boutons ; copié tel quel (même classe) en première position du tiroir
   mobile, voir .menu-movil-panel plus bas. Discrète : texte label-small,
   pas de fond ni de bordure propre. */
.barra-idiomas {
  display: flex;
  align-items: center;
  gap: var(--presente-space-2);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
}

/* La marge automatique ne vaut QUE pour l'exemplaire de la ligne desktop
   (enfant direct de .encabezado-interior) : elle pousse ce groupe (lui +
   les boutons qui le suivent dans le flux) tout à droite de la ligne,
   pendant que logo + nav restent groupés à gauche par le gap normal. Sur
   la copie du tiroir mobile — un DESCENDANT, pas un enfant direct — elle
   ne s'applique pas : signalé le 28/09, elle calait sinon le sélecteur à
   droite du panneau alors que liens et boutons restent à gauche. */
.encabezado-interior > .barra-idiomas {
  margin-inline-start: auto;
}

.barra-idiomas a {
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  letter-spacing: var(--md-sys-typescale-label-tracking);
}

.barra-idiomas a.activo {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.barra-idiomas-separador {
  color: var(--md-sys-color-on-surface-variant);
}

.encabezado-interior {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--presente-space-4);
  padding-block: var(--presente-space-4);
  /* Pleine largeur (voir le commentaire de .encabezado ci-dessus) : les
     mêmes valeurs de gouttière que .contenedor, mais sans son max-width. */
  padding-inline: var(--presente-gutter-mobile);
  /* Ancre pour .menu-movil-panel (position: absolute) — voir plus bas :
     le panneau ouvert doit se poser SOUS toute la ligne du header sans
     déplacer le bouton ☰ lui-même. */
  position: relative;
}

@media (min-width: 1024px) {
  .encabezado-interior {
    padding-inline: var(--presente-gutter-desktop);
  }
}

.encabezado-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--presente-space-2);
  font-family: var(--md-sys-typescale-brand-font);
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: var(--md-sys-typescale-weight-medium);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
}

/* Pictogramme du logotype — currentColor hérite le on-surface posé
   ci-dessus (le vert de l'en-tête reste réservé au bouton d'action, pas
   au logotype). Calé le 17/09 sur target-min (48px), la hauteur des
   boutons du header ("Dejar mi interés" etc.) : la première version,
   alignée sur la seule capitale du mot (~16px), paraissait trop petite
   une fois vue en vrai dans le navigateur — signalé par une capture
   d'écran réelle. */
.encabezado-pictograma {
  display: inline-flex;
  align-items: center;
}

.encabezado-pictograma svg {
  display: block;
  height: var(--presente-target-min);
  width: auto;
}

/* Nav (4 liens), sélecteur de langue ET LES DEUX BOUTONS : cachés sous
   1300px, remplacés par le tiroir .menu-movil (revu le 28/09 sur
   signalement direct — avant cette date, sélecteur et bouton principal
   restaient visibles même repliés ; ce n'est plus le cas). Repliée, la
   ligne ne montre plus QUE logo + ☰. Seuil mesuré le 27/09 avec le
   français (le plus long : "Notre façon de faire", "Parlez-nous de
   vous", "Travailler avec nous") — la ligne unique desktop casse encore
   à 1275px et tient à 1280px : 1300px est ce seuil réel + une marge de
   sécurité contre les variations de rendu de police d'un système à
   l'autre. En dessous de 1024px déjà, inutile de retester : l'anglais et
   l'espagnol, plus courts, cassent forcément avant le français, jamais
   après.

   .barra-idiomas et .boton-primario sont des classes génériques,
   réutilisées ailleurs sur le site (dont une SECONDE fois dans ce
   fichier même, la copie du tiroir plus bas) — le sélecteur "enfant
   direct" (>) cible uniquement l'exemplaire de la ligne desktop, jamais
   la copie imbriquée dans .menu-movil-panel ni un .boton-primario d'une
   autre page. */
.encabezado-nav,
.encabezado-interior > .barra-idiomas,
.encabezado-interior > .boton-primario,
.encabezado-secundario {
  display: none;
}

/* Repliée, la ligne ne montre plus que logo + ☰ (voir plus haut) : sans
   sélecteur de langue pour porter la marge automatique qui pousse le
   groupe de droite, ☰ restait collé au logotype — signalé le 28/09. Un
   deuxième point d'ancrage, sans effet à ≥1300px puisque .menu-movil y
   est display:none de toute façon. */
.menu-movil {
  margin-inline-start: auto;
}

@media (min-width: 1300px) {
  .encabezado-nav {
    display: flex;
    align-items: center;
    gap: var(--presente-space-4);
  }
  .encabezado-interior > .barra-idiomas {
    display: flex;
  }
  .encabezado-interior > .boton-primario,
  .encabezado-secundario {
    display: inline-flex;
  }
  .menu-movil {
    display: none;
  }
}

/* Plus de soulignement par défaut (hérité de la règle `a` globale
   jusqu'au 27/09, signalé par capture d'écran réelle — TOUS les liens de
   nav restaient soulignés en permanence) : remplacé par un fond au
   survol, même couche d'état que .boton-texto. Marge négative pour que
   le fond déborde légèrement le texte sans pousser les liens voisins
   (même technique que .boton-texto). */
.encabezado-nav a:not(.boton) {
  display: inline-flex;
  align-items: center;
  padding: var(--presente-space-2) var(--presente-space-3);
  margin-inline: calc(var(--presente-space-3) * -1);
  border-radius: var(--md-sys-shape-corner-sm);
  text-decoration: none;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.encabezado-nav a:not(.boton):hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-surface-container-lowest));
}

/* Page courante : distinct du survol, jamais remplacé par lui — un
   marqueur permanent, pas un état passager. Garde son propre
   soulignement, volontairement. */
.encabezado-nav a:not(.boton).activo {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ─── Menu mobile — <details>/<summary>, sans JS (sauf Échap, voir le
   <script> de templates/partials/header.html). Sous 1300px seulement
   (voir .encabezado-nav ci-dessus). */

/* Ouvert, l'élément prend toute la largeur de la ligne suivante (le
   conteneur du header est déjà flex-wrap) : le panneau s'étend sur
   toute la largeur sans position:fixed ni hauteur de header codée en dur. */
.menu-movil summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--presente-target-min);
  height: var(--presente-target-min);
  border-radius: var(--md-sys-shape-corner-sm);
  cursor: pointer;
  list-style: none;
  font-size: var(--md-sys-typescale-title-large-size);
}

.menu-movil summary::-webkit-details-marker {
  display: none;
}

/* ☰ → ✕ en CSS pur, piloté par l'attribut [open] du <details> parent —
   aucun JS. Contenu généré (::before), pas un nœud de texte : le nom
   accessible du bouton vient de aria-label (voir header.html), le
   glyphe visible ne doit pas se lire une seconde fois par-dessus. */
.menu-movil summary::before {
  content: "☰";
}

.menu-movil[open] summary::before {
  content: "✕";
}

.menu-movil summary:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-surface-container-lowest));
}

/* Pas de fond dédié à l'état ouvert (retiré le 28/09, signalé comme lu
   "gris" même dérivé des tokens à 10% d'encre — l'icône ☰ → ✕ suffit à
   marquer l'état, comme au repos : jamais de fond hors survol/appui). */

/* position: absolute (pas flex-basis: 100% comme dans un premier temps) :
   le bouton ☰ restait sur la ligne du header une fois le panneau ouvert
   AVANT ce correctif, mais "flex-basis: 100%" faisait passer .menu-movil
   ENTIER (résumé compris) à la ligne suivante — le bouton lui-même
   sautait de place à l'ouverture. Signalé par une capture d'écran réelle
   le 17/09. En absolute, le panneau sort du flux : le bouton ne bouge
   plus, le panneau se pose sous toute la largeur du header
   (.encabezado-interior est son ancre position:relative, voir plus haut). */
.menu-movil-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--presente-space-3);
  padding: var(--presente-space-4) var(--presente-gutter-mobile) var(--presente-space-5);
  background: var(--md-sys-color-surface-container-lowest);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.menu-movil-panel a:not(.boton) {
  padding: var(--presente-space-2) var(--presente-space-3);
  margin-inline: calc(var(--presente-space-3) * -1);
  border-radius: var(--md-sys-shape-corner-sm);
  text-decoration: none;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.menu-movil-panel a:not(.boton):hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-surface-container-lowest));
}

.menu-movil-panel a:not(.boton).activo {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.menu-movil-panel .boton {
  width: 100%;
  margin-top: var(--presente-space-2);
}

.pie {
  background: var(--md-sys-color-surface-container-lowest);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin-top: var(--presente-space-16);
}

.pie-interior {
  display: flex;
  flex-direction: column;
  gap: var(--presente-space-5);
  padding-block: var(--presente-space-8);
}

/* Plan du site complet — ajouté le 17/09, le pied de page ne liait avant
   que la page légale (voir aussi header.html : même écart côté nav). */
.pie-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--presente-space-2) var(--presente-space-6);
}

.pie-copyright {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
}

/* ─── Rythme vertical commun entre sections de page ──────────── */

.seccion {
  padding-block: var(--presente-space-12);
}

/* ─── Carte (élévation, jamais d'ombre) — réservée aux blocs qui
   doivent vraiment se détacher. Deux teintes maximum par page (règle
   2b) : ne pas en mettre partout, c'est ce qui rendait une page
   précédente étouffante malgré la règle. */

.tarjeta {
  padding: var(--presente-space-6);
  border-radius: var(--md-sys-shape-corner-lg);
}

/* ─── Porte cliquable — carte bordée, JAMAIS de remplissage permanent
   (le survol prend un léger container-low, un retour visuel temporaire,
   pas un fond qui reste). Ne consomme donc pas le budget de deux
   surfaces teintées de la règle 2b : une bordure n'est pas un fond.
   Composant général (voir templates/partials/puerta.html) — pas limité
   aux "tres puertas" de l'accueil, réutilisable partout où plusieurs
   blocs cliquables doivent rester au même niveau visuel.

   Bordure outline (PAS outline-variant) même au repos : règle non
   négociable du fichier de tokens (#3, "outline-variant ne borde jamais
   un élément interactif") — cette carte est un lien, donc interactive.
   Le PDF du design system montre pourtant cette même carte avec
   outline-variant au repos (contradiction interne au document, signalée
   le 17/09) ; ici la règle écrite l'emporte sur l'exemple visuel.

   Trois états : repos (bordure outline), survol (fond container-low,
   même bordure), actif — :active, l'instant de l'appui, pas
   :focus-visible qui reste géré par la règle globale plus bas — (bordure
   primary 2px, toujours sans remplissage). */

.puerta {
  display: block;
  padding: var(--presente-space-6);
  border-radius: var(--md-sys-shape-corner-lg);
  border: 1px solid var(--md-sys-color-outline);
  /* surface-container-lowest (blanc) depuis le 27/09 — était surface
     (crème) : "l'état par défaut des cartes" passe sur le même blanc que
     l'en-tête et le pied de page. */
  background: var(--md-sys-color-surface-container-lowest);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.puerta:hover {
  background: var(--md-sys-color-surface-container-low);
}

.puerta:active {
  border: 2px solid var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container-lowest);
}

.puerta-enlace {
  display: block;
  margin-top: var(--presente-space-3);
  color: var(--md-sys-color-secondary);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-weight-medium);
}

/* ─── Liste numérotée — badge rond + contenu, pour les suites d'étapes
   ou de règles (ex. "Cómo empieza" en-casa, "Nuestra manera"). Remplace
   le texte en ligne "1. Titre — texte" : écart relevé le 17/09 contre le
   wireframe, qui montre systématiquement ce motif à deux colonnes.
   Le badge est un remplissage primary-container, mais ne compte pas
   dans le budget de deux surfaces teintées (règle 2b : les "états
   sélectionnés (puce...)" en sont exclus — un badge numéroté est le
   même genre d'élément qu'une puce). */

.pasos {
  display: flex;
  flex-direction: column;
  gap: var(--presente-space-6);
}

.paso {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--presente-space-4);
  align-items: start;
}

.paso-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-family: var(--md-sys-typescale-plain-font);
  font-weight: var(--md-sys-typescale-weight-bold);
  flex-shrink: 0;
}

.paso p:last-child {
  margin-bottom: 0;
}

/* ─── Colonne de lecture — mesure de texte plafonnée pour la
   lisibilité (jamais une ligne interminable), ALIGNÉE À GAUCHE dans son
   conteneur — un centrage (margin-inline:auto) donnait un bloc de texte
   flottant avec un vide symétrique des deux côtés, qui rendait mal en
   desktop dans une carte large. Aligné à gauche, le texte démarre au
   même bord que les titres et le reste de la page. */

.columna-lectura {
  max-width: var(--presente-measure);
}

/* ─── Deux colonnes de texte libre, SANS carte — séparées par un filet
   vertical à partir de 768px (outline-variant : un séparateur, pas un
   élément interactif — règle 3). */

.columnas-dos {
  display: grid;
  gap: var(--presente-space-8);
}

@media (min-width: 768px) {
  .columnas-dos {
    grid-template-columns: 1fr 1fr;
  }
  .columnas-dos > * + * {
    border-inline-start: 1px solid var(--md-sys-color-outline-variant);
    padding-inline-start: var(--presente-space-8);
  }
}

/* ─── Trois colonnes de texte libre, SANS carte — même principe que
   .columnas-dos, pour du contenu à trois éléments de même poids (ex. les
   "tres puertas" de l'accueil : aucune des trois ne doit dominer). */

.columnas-tres {
  display: grid;
  gap: var(--presente-space-8);
}

@media (min-width: 768px) {
  .columnas-tres {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Filet vertical réservé au texte libre sans bordure propre — inutile
     (et redondant) entre des cartes .puerta, qui ont déjà leur bordure. */
  .columnas-tres > :not(.puerta) + :not(.puerta) {
    border-inline-start: 1px solid var(--md-sys-color-outline-variant);
    padding-inline-start: var(--presente-space-8);
  }
}

/* ─── Chiffre mis en avant — un ratio qui porte l'information plutôt
   qu'un décor (ex. 1 acompañante pour 4 residentes contre 1 pour 15-20 en
   institution) : posé côte à côte dans .columnas-dos, pas dans une carte,
   la couleur de texte suffit à le faire ressortir. Pas de couleur ici :
   quand un ratio oppose un côté souhaitable à un côté qu'on ne veut pas
   (comme ce cas), .cifra se combine avec .comparacion-titulo--positivo/
   --negativo (partials/comparacion.html) pour la même palette vert/
   terracotta que "Qué pedimos"/"Qué no pedimos" — un ratio neutre (sans
   opposition positif/négatif) garderait .cifra seule, sur on-surface. */

.cifra {
  margin: 0 0 var(--presente-space-1) 0;
  font-family: var(--md-sys-typescale-brand-font);
  font-size: var(--md-sys-typescale-display-medium-size);
  line-height: var(--md-sys-typescale-display-medium-line);
  font-weight: var(--md-sys-typescale-weight-medium);
}

/* ─── Légende courte, réutilisable hors du contexte d'un CTA
   (.cta-opcion-nota reste dédiée aux boutons pour ne pas changer son
   comportement sur une page déjà approuvée). ─────────────────── */

.nota {
  margin: 0;
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* ─── Listes simples (qué pedimos / no pedimos, etc.) ────────── */

.lista-simple {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--presente-space-4) 0;
}

.lista-simple li {
  padding-block: var(--presente-space-2);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-body-large-size);
}

.lista-simple li:last-child {
  border-bottom: none;
}

/* ─── Comparaison positif/négatif (partials/comparacion.html) — la
   distinction se porte par la COULEUR du titre et des filets, JAMAIS par
   un fond teinté (aucune des deux colonnes n'est une "carte") et jamais
   par --md-sys-color-error, réservé à la validation de formulaire : la
   colonne de droite est un refus assumé, pas une erreur. En mobile, où
   les colonnes s'empilent et où la position gauche/droite disparaît, le
   titre coloré est le SEUL porteur de la distinction — d'où la règle de
   ne jamais recolorer le texte des items (resté on-surface, hérité de
   .lista-simple). */

.comparacion-titulo--positivo {
  color: var(--md-sys-color-primary);
}

.comparacion-titulo--negativo {
  color: var(--md-sys-color-secondary);
}

.comparacion-lista--positivo li {
  border-bottom-color: var(--md-sys-color-primary-container);
}

.comparacion-lista--negativo li {
  border-bottom-color: var(--presente-secondary-tint);
}

/* ─── Tableau comparatif ("la cuenta, sin adornos") ──────────── */

.tabla-comparacion {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--presente-space-6);
}

.tabla-comparacion-envoltorio {
  overflow-x: auto;
}

.tabla-comparacion th,
.tabla-comparacion td {
  padding: var(--presente-space-3) var(--presente-space-4);
  text-align: left;
  border: 1px solid var(--md-sys-color-outline);
  font-size: var(--md-sys-typescale-body-medium-size);
  vertical-align: top;
}

.tabla-comparacion thead th {
  font-family: var(--md-sys-typescale-brand-font);
  font-weight: var(--md-sys-typescale-weight-medium);
  background: var(--md-sys-color-surface-container);
}

.tabla-comparacion tbody th {
  font-weight: var(--md-sys-typescale-weight-medium);
  white-space: nowrap;
}

/* ─── Double CTA — vrais composants bouton (.boton), même taille,
   même hiérarchie : rempli pour l'action principale, contour pour
   l'autre. La hiérarchie vient du remplissage vs. contour, pas d'une
   carte ni d'une couleur de fond — ni l'une ni l'autre teinte. */

/* Flex, pas grid 1fr 1fr : une grille à deux colonnes égales étirait
   chaque option sur la moitié du conteneur, donc écartait les deux
   boutons fit-content d'autant de vide entre eux — signalé par capture
   d'écran réelle le 21/09 ("les espaces entre les boutons d'un même
   groupe ne sont pas acceptables"). En flex, les deux options restent
   groupées côte à côte à leur taille propre, alignées à gauche, et
   passent à la ligne d'elles-mêmes si elles ne tiennent pas côte à côte
   (mobile étroit). */
.cta-doble {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--presente-space-5);
}

.cta-opcion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--presente-space-2);
}

/* Fit to content, jamais fill container (design system §06 et mockup
   "Deux écrans à 390 px" : .boton garde sa taille de contenu même seul
   dans une colonne mobile pleine largeur). Un width:100% ici forçait
   chaque bouton à occuper toute sa cellule de grille — retiré le 21/09,
   signalé par capture d'écran réelle. */

.cta-opcion-nota {
  margin: 0;
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* ─── Accès clavier uniquement ────────────────────────────────── */

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