/* =========================================================================
   Los Carujos — feuille de style unique.

   Le site est volontairement clair et chaud : la chaux, la terre, la roche.
   Pas de mode sombre — sur un site d'hébergement, la lumière fait partie de
   ce qu'on vend, et une version sombre trahirait la maison.
   ========================================================================= */

/* --- Polices auto-hébergées -----------------------------------------------
   Servies depuis assets/fonts/, jamais depuis le CDN de Google : celui-ci
   transmet l'adresse IP du visiteur, ce que plusieurs décisions de justice
   européennes ont jugé contraire au RGPD.

   Quatre paires sont déclarées, une seule est chargée — le navigateur ne va
   chercher que les fichiers réellement appelés par font-family. Le choix se
   fait dans Apparence → Personnaliser → Casa Cueva Los Carujos → Polices.

   Le découpage latin / latin-ext n'est pas décoratif : l'espagnol, le français,
   l'anglais et le néerlandais tiennent dans « latin ». La seconde tranche n'est
   téléchargée que si un caractère la réclame, ce qui n'arrivera presque jamais.
   ------------------------------------------------------------------------- */

/* Brygada 1918 — Revival d'un caractère polonais de 1918. Titres. */
@font-face {
	font-family: "Brygada 1918";
	src: url("../fonts/brygada-1918-400-700-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Brygada 1918";
	src: url("../fonts/brygada-1918-400-700-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Commissioner — Humanist calme et variable. Texte. */
@font-face {
	font-family: "Commissioner";
	src: url("../fonts/commissioner-300-700-latin.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Commissioner";
	src: url("../fonts/commissioner-300-700-latin-ext.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Eczar — Serif d'affiche à empattements évasés. Titres. */
@font-face {
	font-family: "Eczar";
	src: url("../fonts/eczar-400-800-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Eczar";
	src: url("../fonts/eczar-400-800-latin-ext.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk — Sans chaleureuse et variable. Texte. */
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-300-800-latin.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-300-800-latin-ext.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Petrona — Serif à faible contraste, très douce. Titres. */
@font-face {
	font-family: "Petrona";
	src: url("../fonts/petrona-400-700-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Petrona";
	src: url("../fonts/petrona-400-700-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Atkinson Hyperlegible — Dessinée par le Braille Institute pour les basses visions. Texte. */
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-400-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-700-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-700-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces — Serif chaleureuse d'après la photocomposition. Titres. */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-400-700-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-400-700-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Sans — Sans nette et sobre. Texte. */
@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-400-700-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-400-700-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Macondo — Dessinée à la main, un peu naïve. Signature. */
@font-face {
	font-family: "Macondo";
	src: url("../fonts/macondo-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sofia — Monoline chilienne, épaisseur constante. Signature. */
@font-face {
	font-family: "Sofia";
	src: url("../fonts/sofia-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Story Script — Marqueur moderne, épaisseur régulière. Signature. */
@font-face {
	font-family: "Story Script";
	src: url("../fonts/story-script-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Story Script";
	src: url("../fonts/story-script-400-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Style Script — Brosse d'enseigne peinte. Signature. */
@font-face {
	font-family: "Style Script";
	src: url("../fonts/style-script-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Style Script";
	src: url("../fonts/style-script-400-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Niconne — Script semi-formel, plus doux. Signature. */
@font-face {
	font-family: "Niconne";
	src: url("../fonts/niconne-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Niconne";
	src: url("../fonts/niconne-400-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Paprika — Display humaniste dessinée à la main, droite. Signature. */
@font-face {
	font-family: "Paprika";
	src: url("../fonts/paprika-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Paprika";
	src: url("../fonts/paprika-400-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Courgette — Manuscrite. Réservée à la signature. */
@font-face {
	font-family: "Courgette";
	src: url("../fonts/courgette-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Courgette";
	src: url("../fonts/courgette-400-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* --- Les couleurs de la maison ------------------------------------------
	   Relevées sur les photos de Los Carujos, pas choisies dans un nuancier :
	   la chaux des murs, le bleu des portes et des grilles, le travertin des
	   marches, la tuile du toit, l'eau de la piscine, la colline sèche.
	   ---------------------------------------------------------------------- */

	--cal: #fbf8f3;         /* la chaux des murs, à peine chaude */
	--cal-pura: #ffffff;
	--arena: #ece0cb;       /* le travertin clair du soubassement */
	--piedra: #c9b394;      /* le travertin des marches */
	--azul: #1b5fa8;        /* le bleu des portes, encadrements et grilles */
	--azul-hondo: #123f74;  /* le même bleu, à l'ombre */
	--azul-cielo: #8fc0e8;  /* le ciel au-dessus de la colline */
	--agua: #4aa8bd;        /* l'eau de la piscine */
	--teja: #a4472c;        /* la tuile du toit */
	--olivo: #7c8158;       /* la colline sèche, les oliviers, les amandiers */
	--sombra: #5c5349;      /* texte secondaire */
	--cueva: #211d19;       /* texte courant, la roche à l'intérieur */

	/* --- Rôles ---------------------------------------------------------------
	   Les gabarits n'appellent jamais une couleur, ils appellent un rôle.
	   Repeindre le site tient dans les deux lignes qui suivent.
	   ---------------------------------------------------------------------- */

	--acento: var(--azul);
	--acento-oscuro: var(--azul-hondo);

	/* Les titres et le nom de la maison prennent le bleu des embrasures plutôt
	   qu'un noir de texte. Le noir était la valeur par défaut d'un navigateur,
	   pas une décision : il laissait le nom à l'écart de sa propre famille de
	   couleurs, alors que le logo, la ligne de lieu, le linteau et le bouton
	   étaient déjà bleus. Contraste sur la chaux : 10:1. */
	--titulo-color: var(--azul-hondo);

	/* --- Polices --------------------------------------------------------------
	   Paire par défaut : Brygada 1918 pour les titres, Commissioner pour le
	   texte. Trois autres paires s'activent depuis l'Outil de personnalisation,
	   qui réécrit ces deux lignes et le facteur d'échelle.

	   Les replis système sont choisis pour leurs proportions voisines : si la
	   police met 200 ms à arriver, la page ne se réorganise pas sous les yeux
	   du visiteur.
	   ------------------------------------------------------------------------ */

	--fuente-titulo: "Brygada 1918", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--fuente-texto: "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* --- Échelle typographique ------------------------------------------------
	   Chaque taille est une interpolation continue entre le téléphone (390 px)
	   et le grand écran (1280 px) : il n'y a pas de palier, donc pas de tablette
	   à traiter à part — les tailles intermédiaires sortent toutes seules.

	   La part fixe est en rem, la part variable en vw. C'est ce qui permet au
	   site de continuer à grossir quand un visiteur augmente la taille du texte
	   de son navigateur, ce qu'une taille en vw pure casserait.

	   Le rapport entre deux niveaux s'ouvre avec l'écran : resserré sur mobile
	   (1,2) pour que la hiérarchie tienne dans la largeur, franc sur grand
	   écran (1,4) pour que l'ouverture ait de la présence.
	   ------------------------------------------------------------------------ */

	/* La signature : la police du nom de la maison, en haut et en pied, et là
	   seulement. Six autres sont disponibles dans l'Outil de personnalisation,
	   « Aucune » comprise, qui rend le nom à la police des titres.

	   --tamano-firma compense la hauteur d'œil : Niconne a un bas-de-casse
	   nettement plus petit que Brygada, et sans ce facteur le nom paraîtrait
	   avoir rétréci en changeant de police. */
	--fuente-firma: "Niconne", "Brush Script MT", cursive;
	--tamano-firma: 1.3;

	--escala-titulo: 1.03;   /* corrigé par paire : voir inc/apariencia.php */

	--t-h1: clamp(1.875rem, 1.053rem + 3.371vw, 3.75rem);      /* 30 → 60 px */
	--t-h2: clamp(1.5625rem, 1.097rem + 1.910vw, 2.625rem);    /* 25 → 42 px */
	--t-h3: clamp(1.3125rem, 1.066rem + 1.011vw, 1.875rem);    /* 21 → 30 px */
	--t-h4: clamp(1.125rem, 1.015rem + 0.449vw, 1.375rem);     /* 18 → 22 px */
	--t-h5: clamp(1rem, 0.945rem + 0.225vw, 1.125rem);         /* 16 → 18 px */
	--t-h6: clamp(0.8125rem, 0.785rem + 0.112vw, 0.875rem);    /* 13 → 14 px */

	--t-base: 1rem;         /* 16 px, partout, du téléphone au grand écran */
	--t-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem); /* 17 → 20 px — le chapô */
	--t-small: 0.875rem;    /* 14 px — légendes, méta, mentions */
	--t-ui: 0.9375rem;      /* 15 px — boutons, pied de page, notes */
	--t-micro: 0.75rem;     /* 12 px — surtitres en capitales espacées */

	--interligne-texto: 1.65;

	--ancho-texto: 44rem;
	--ancho-total: 74rem;
	--gutter: clamp(1.25rem, 5vw, 3rem);

	--ritmo: clamp(4rem, 9vw, 7.5rem);
	--radio: 2px;
	--transicion: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Réinitialisation mesurée -------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--cal);
	color: var(--cueva);
	font-family: var(--fuente-texto);
	font-size: var(--t-base);
	line-height: var(--interligne-texto);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* --- Hiérarchie des titres -----------------------------------------------
   Six niveaux réellement distincts. L'interligne se resserre à mesure que la
   taille monte : un titre de 60 px avec l'interligne d'un paragraphe ferait
   des trous entre ses lignes. Le crénage se resserre aussi, pour la même
   raison inverse — les grandes tailles paraissent trop aérées sans ça.

   h5 et h6 repassent à la police de texte : à 16 et 14 px, une serif de
   titrage devient décorative sans être plus lisible. */

h1, h2, h3, h4 {
	font-family: var(--fuente-titulo);
	font-weight: 500;
	text-wrap: balance;
	margin: 0 0 0.5em;
}

h5, h6 {
	font-family: var(--fuente-texto);
	text-wrap: balance;
	margin: 0 0 0.75em;
}

h1 {
	font-size: calc(var(--t-h1) * var(--escala-titulo));
	color: var(--titulo-color);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

h2 {
	font-size: calc(var(--t-h2) * var(--escala-titulo));
	color: var(--titulo-color);
	line-height: 1.15;
	letter-spacing: -0.015em;
}

h3 {
	font-size: calc(var(--t-h3) * var(--escala-titulo));
	color: var(--titulo-color);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h4 {
	font-size: calc(var(--t-h4) * var(--escala-titulo));
	color: var(--titulo-color);
	line-height: 1.35;
	letter-spacing: -0.005em;
}

h5 {
	font-size: var(--t-h5);
	font-weight: 600;
	line-height: 1.45;
}

/* Le dernier niveau ne joue plus sur la taille — il n'y a plus de place en
   dessous — mais sur la casse et l'espacement. */
h6 {
	font-size: var(--t-h6);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sombra);
}

p, ul, ol {
	margin: 0 0 1.25em;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--acento);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--transicion);
}

a:hover {
	color: var(--acento-oscuro);
}

:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
	border-radius: var(--radio);
}

blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--piedra);
	font-family: var(--fuente-titulo);
	font-size: calc(var(--t-h4) * var(--escala-titulo));
	line-height: 1.45;
	color: var(--sombra);
}

hr {
	height: 1px;
	margin: var(--ritmo) 0;
	border: 0;
	background: var(--piedra);
}

/* --- Utilitaires --------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--gutter);
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--cueva);
	color: var(--cal);
	text-decoration: none;
}

.skip-link:focus {
	top: 0.75rem;
}

.seccion__inner,
.cabecera__inner,
.pie__inner {
	width: min(100% - (var(--gutter) * 2), var(--ancho-total));
	margin-inline: auto;
}

/* --- Boutons ------------------------------------------------------------- */

.boton {
	display: inline-block;
	padding: 0.9rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--radio);
	font-size: var(--t-ui);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

.boton--principal {
	background: var(--acento);
	border-color: var(--acento);
	color: var(--cal);
}

.boton--principal:hover {
	background: var(--acento-oscuro);
	border-color: var(--acento-oscuro);
	color: var(--cal);
}

.boton--discreto {
	border-color: currentColor;
	color: inherit;
}

.boton--discreto:hover {
	background: var(--cueva);
	border-color: var(--cueva);
	color: var(--cal);
}

/* --- En-tête ------------------------------------------------------------- */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transicion);
	padding-top: env(safe-area-inset-top, 0px);
}

/* Le fond et le flou sont portés par un calque, pas par l'en-tête lui-même.

   Un backdrop-filter fait de l'élément qui le porte le bloc conteneur de ses
   descendants en position fixe. Le panneau du menu mobile, rangé hors écran
   par translateX(100%), cessait donc d'être fixé au navigateur pour être fixé
   à l'en-tête : il comptait dans la largeur du document, et la page se
   décalait de 133 px vers la droite sur téléphone. Un doigt qui glisse
   tombait sur du vide.

   Sur un pseudo-élément, le flou fait exactement le même effet et ne piège
   plus rien. */
.cabecera::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--cal) 92%, transparent);
	backdrop-filter: blur(10px);
}

.cabecera.esta-desplazada {
	border-bottom-color: var(--piedra);
}

.cabecera__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.5rem;
}

.marca {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--cueva);
	line-height: 1.2;
}

.marca__nombre {
	font-family: var(--fuente-firma);
	font-size: calc(var(--t-h4) * var(--tamano-firma));
	line-height: 1.2;
}

.marca__lugar {
	font-size: var(--t-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sombra);
}

.cabecera__panel {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.navegacion__lista {
	display: flex;
	gap: clamp(1rem, 2.2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.navegacion__lista a {
	color: var(--cueva);
	font-size: var(--t-ui);
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transicion);
}

.navegacion__lista a:hover {
	border-bottom-color: var(--acento);
}

/* Seule la page affichée est soulignée. WordPress marque « page courante »
   toute entrée dont l'adresse est celle de la page — donc, sur l'accueil,
   les quatre ancres à la fois : La casa, Dormitorios, Equipamiento et
   Reservar étaient soulignés ensemble. Les ancres désignent une section,
   pas une page : on les écarte, et il ne reste qu'un seul trait. */
.navegacion__lista .current-menu-item > a:not([href*="#"]) {
	border-bottom-color: var(--acento);
}

/* --- Les sous-menus -------------------------------------------------------
   Le menu ne tenait plus : quatre ancres de la page d'accueil l'occupaient
   entièrement, et les pages des environs n'avaient plus de place. On replie
   donc chaque famille sous son entrée.

   Le dépliant s'ouvre au survol et au clavier. Pas de JavaScript : :hover et
   :focus-within suffisent, et ce qui ne dépend pas d'un script continue de
   marcher quand le script casse. */
.navegacion__lista li {
	position: relative;
}

.navegacion__lista .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: max-content;
	margin: 0;
	padding: 0.75rem 1rem;
	list-style: none;
	display: grid;
	gap: 0.6rem;
	background: var(--cal);
	border: 1px solid var(--piedra);
	border-radius: var(--radio);
	box-shadow: 0 8px 24px rgb(33 29 25 / 12%);

	/* Masqué sans disparaître de l'arbre : un menu en display:none n'est pas
	   atteignable au clavier avant d'être affiché. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}

.navegacion__lista li:hover > .sub-menu,
.navegacion__lista li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Une entrée qui en cache d'autres le dit. */
.navegacion__lista .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.4em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.lang__list {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang__link {
	display: block;
	padding: 0.2rem 0.45rem;
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--sombra);
	text-decoration: none;
	border-radius: var(--radio);
}

.lang__link abbr {
	text-decoration: none;
	border: 0;
}

.lang__link:hover {
	color: var(--cueva);
	background: var(--arena);
}

.lang__link.is-current {
	color: var(--cal);
	background: var(--sombra);
}

.cabecera__toggle {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.cabecera__toggle-bars {
	display: block;
	position: relative;
	width: 1.375rem;
	height: 0.75rem;
	margin-inline: auto;
}

.cabecera__toggle-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--cueva);
	transition: transform var(--transicion), opacity var(--transicion);
}

.cabecera__toggle-bars span:nth-child(1) { top: 0; }
.cabecera__toggle-bars span:nth-child(2) { top: 50%; }
.cabecera__toggle-bars span:nth-child(3) { top: 100%; }

[aria-expanded="true"] .cabecera__toggle-bars span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
[aria-expanded="true"] .cabecera__toggle-bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .cabecera__toggle-bars span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }

@media (max-width: 54rem) {
	.cabecera__toggle {
		display: block;
	}

	.cabecera__panel {
		position: fixed;
		inset: auto 0 0 0;
		top: calc(4.5rem + env(safe-area-inset-top, 0px));
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
		padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
		background: var(--cal);
		border-top: 1px solid var(--piedra);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--transicion), visibility var(--transicion);
	}

	.cabecera__panel.esta-abierto {
		transform: translateX(0);
		visibility: visible;
	}

	.navegacion {
		width: 100%;
	}

	.navegacion__lista {
		flex-direction: column;
		gap: 1rem;
	}

	.navegacion__lista a {
		font-size: 1.25rem; /* 20 px : cible tactile du menu déroulé, hors échelle */
		font-family: var(--fuente-titulo);
	}

	/* Le panneau mobile est déjà une colonne : un dépliant flottant n'aurait
	   aucun sens, et le survol n'existe pas au doigt. Les sous-entrées sont
	   donc simplement en retrait, toujours visibles. */
	.navegacion__lista .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		margin: 0.75rem 0 0 1rem;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		gap: 0.75rem;
	}

	.navegacion__lista .sub-menu a {
		font-size: 1.05rem;
		font-family: var(--fuente-base, inherit);
	}

	.navegacion__lista .menu-item-has-children > a::after {
		display: none;
	}

	.cabecera__cta {
		width: 100%;
	}
}

/* --- Ouverture ----------------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	/* 72svh et non 86 : l'en-tête collant mange déjà une centaine de pixels,
	   et une ouverture qui remplit l'écran entier ne dit pas qu'il y a une
	   suite. Ce qui dépasse en bas est le seul signal que la page continue. */
	min-height: min(66svh, 34rem);
	isolation: isolate;
}

.hero__texto {
	grid-area: 1 / 1;
}

/* La photo est sortie du flux de la grille.
   Tant qu'elle y était, c'était elle qui donnait sa hauteur à la rangée :
   « height: 100% » ne contraint rien quand la rangée n'a pas de hauteur
   définie, si bien qu'un cliché de 1358×1159 étalé sur 1920 px faisait une
   ouverture de 1 639 px — deux écrans de haut. min-height n'y pouvait rien,
   c'est un minimum. Hors du flux, elle remplit ce que le texte et min-height
   décident, et object-fit se charge du cadrage. */
.hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(175deg, rgb(36 30 26 / 0.15) 0%, rgb(36 30 26 / 0.45) 55%, rgb(36 30 26 / 0.78) 100%);
}

.hero:not(.hero--sin-imagen) .hero__texto {
	/* Sur la photo, le titre garde sa couleur claire : on redéfinit le rôle
	   ici plutôt que de surcharger la règle du h1, qui casserait le jour où
	   la couleur des titres change. */
	--titulo-color: var(--cal);
}

.hero__texto {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: min(100% - (var(--gutter) * 2), var(--ancho-total));
	margin-inline: auto;
	padding-block: clamp(3rem, 8vw, 5rem);
	color: var(--cal);
}

.hero--sin-imagen {
	min-height: auto;
	background: var(--arena);
}

.hero--sin-imagen .hero__texto {
	color: var(--cueva);
	padding-block: var(--ritmo);
}

.hero__lugar {
	margin-bottom: 1rem;
	font-size: var(--t-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.85;
}

.hero__titulo {
	/* Le grand titre peut emprunter la signature. C'est le seul titre de ce
	   niveau sur la page : il n'a rien à distinguer de ses pairs, et à 60 px
	   une manuscrite ne pose aucun problème de lisibilité — c'est plus bas
	   qu'elle en pose. Les quatre variables tombent sur les valeurs de titre
	   ordinaires tant que le réglage n'est pas activé. */
	font-family: var(--titulo-hero-fuente, var(--fuente-titulo));
	font-weight: var(--titulo-hero-grosor, 500);
	font-size: calc(var(--t-h1) * var(--titulo-hero-escala, var(--escala-titulo)));
	letter-spacing: var(--titulo-hero-crenaje, -0.02em);
	/* Une manuscrite a des hampes et des jambages longs : au même interligne
	   qu'une serif, les lignes s'accrochent dès que le titre en fait trois,
	   ce qui arrive sur téléphone. */
	line-height: var(--titulo-hero-interlinea, 1.12);
	margin-bottom: 0.75rem;
}

.hero__bajada {
	max-width: 44ch;
	margin-bottom: 2rem;
	font-size: var(--t-lead);
	opacity: 0.92;
}

.hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* --- Chiffres clés ------------------------------------------------------- */

.ficha {
	background: var(--arena);
	border-block: 1px solid var(--piedra);
}

.ficha__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 1px;
	width: min(100% - (var(--gutter) * 2), var(--ancho-total));
	margin: 0 auto;
	padding: 0;

	/* Les filets entre cellules étaient dessinés par un fond de pierre que les
	   gouttières de 1 px laissaient voir. Élégant tant que la grille tombe
	   juste — mais dès qu'une rangée est incomplète (six chiffres sur cinq
	   colonnes, ce qui arrive en largeur de tablette), les cellules vides
	   affichaient un grand aplat de pierre. Chaque cellule porte donc son
	   propre filet, et les cellules vides ne dessinent plus rien. */
	background: var(--arena);
	overflow: hidden;
}

.ficha__dato {
	padding: 1.5rem 1rem;
	background: var(--arena);
	text-align: center;

	/* Les deux filets tombent dans les gouttières ; ceux du bord extérieur
	   sont rognés par l'overflow de la liste. */
	box-shadow: 1px 0 0 var(--piedra), 0 1px 0 var(--piedra);
}

.ficha__etiqueta {
	font-size: var(--t-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sombra);
}

.ficha__valor {
	margin: 0.35rem 0 0;
	font-family: var(--fuente-titulo);
	font-size: var(--t-h4);
	color: var(--cueva);
}

/* --- Sections ------------------------------------------------------------ */

.seccion {
	padding-block: var(--ritmo);
}

.seccion--equipamiento,
.seccion--reservar {
	background: var(--arena);
}

.seccion__titulo {
	max-width: 22ch;
	margin-bottom: 2rem;
}

.entrada__contenido {
	max-width: var(--ancho-texto);
}

.entrada__contenido > * {
	margin-inline: auto;
}

.entrada__contenido .alignwide,
.entrada__contenido .wp-block-gallery,
.entrada__contenido .wp-block-image.alignwide {
	width: min(100vw - (var(--gutter) * 2), var(--ancho-total));
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--gutter), var(--ancho-total) / 2));
}

.entrada__contenido .wp-block-gallery {
	gap: 0.75rem;
}

/* Toutes les vignettes au même format.

   Des clichés de rapports différents dans une même grille donnent des rangées
   qui boitent : à largeur égale, un 1,31 et un 1,17 n'ont pas la même hauteur,
   et un portrait 0,75 fait presque le double. Le recadrage au centre les
   aligne — c'est la seule façon de les rendre identiques sans déformer
   personne. Les grandes photos, elles, restent entières : c'est là qu'on
   regarde le détail. */
/* Une rangée incomplète se calait à gauche : deux photos dans une grille de
   trois laissaient 415 px de vide à droite, mesurés dans Chromium à 1280 px.
   Avec flex-grow: 0 juste en dessous, elles ne s'étirent pas — il restait à
   les centrer. Vaut pour toutes les galeries, y compris celles à venir. */
.entrada__contenido .wp-block-gallery.has-nested-images {
	justify-content: center;
}

.entrada__contenido .wp-block-gallery.has-nested-images figure.wp-block-image {
	/* Sans cela, la dernière vignette d'une rangée incomplète s'étire sur
	   toute la largeur : sept photos en trois colonnes, et la septième faisait
	   1 184 px quand ses voisines en faisaient 387. Le flex-grow de WordPress
	   est fait pour des galeries sans format imposé ; nous en imposons un. */
	flex-grow: 0;
}

.entrada__contenido .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.entrada__contenido figure img {
	border-radius: var(--radio);
}

/* Une photo pleine largeur bornée en largeur seulement devient très haute
   dès qu'elle est en portrait : à 74 rem de large, un cliché 1054×1492
   dépasse 1600 px de haut — deux écrans pour une seule image, qu'on ne
   regarde plus, qu'on traverse.

   On borne donc la hauteur et on laisse la largeur suivre. Rien n'est
   rogné : l'image entière reste visible, simplement à une taille qu'un
   écran peut contenir. Les vignettes de la galerie, elles, sont déjà
   petites et gardent leur grille. */
.entrada__contenido > .wp-block-image img {
	display: block;
	width: auto;
	/* Deux bornes, pas une. La hauteur seule donnait des largeurs très
	   inégales — à 448 px de haut, un panoramique 1,97 fait 883 px de large
	   quand un 1,33 en fait 596 : la piscine écrasait ses voisines. La
	   largeur les aligne, la hauteur rattrape les portraits, qui seuls
	   restent plus étroits — c'est leur format qui le veut. */
	max-width: min(100%, 40rem);
	max-height: min(60svh, 30rem);
	margin-inline: auto;
}

.entrada__contenido figcaption {
	margin-top: 0.6rem;
	font-size: var(--t-small);
	color: var(--sombra);
	text-align: center;
}

/* --- Équipements --------------------------------------------------------- */

.equipamiento__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.25rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.equipamiento__item {
	padding: 0.7rem 0 0.7rem 1.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--piedra) 60%, transparent);
	position: relative;
}

.equipamiento__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--olivo);
}

/* --- Listes d'articles --------------------------------------------------- */

.lista__cabecera {
	padding-block: var(--ritmo) 2rem;
}

.lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: var(--ritmo);
}

.tarjeta__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radio);
}

.tarjeta__titulo {
	margin: 1rem 0 0.35rem;
	font-size: var(--t-h4);
}

.tarjeta__titulo a {
	color: var(--cueva);
	text-decoration: none;
}

.tarjeta__titulo a:hover {
	color: var(--acento);
}

.tarjeta__fecha {
	display: block;
	margin-bottom: 0.6rem;
	font-size: var(--t-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sombra);
}

.tarjeta__extracto {
	color: var(--sombra);
	font-size: var(--t-ui);
}

/* --- Article ------------------------------------------------------------- */

.entrada__cabecera {
	padding-block: var(--ritmo) 2rem;
}

.entrada__titulo {
	max-width: 20ch;
}

.entrada__meta {
	font-size: var(--t-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sombra);
}

.entrada__imagen {
	margin: 0 0 3rem;
}

.entrada__imagen img {
	width: 100%;
	max-height: 70svh;
	object-fit: cover;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	font-size: var(--t-small);
	color: var(--sombra);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--piedra);
}

.entrada__vecinos {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	padding-block: 3rem var(--ritmo);
	border-top: 1px solid var(--piedra);
	font-size: var(--t-ui);
}

.entrada__vecino--siguiente {
	margin-left: auto;
	text-align: right;
}

.wp-block-post-title,
.pagination,
.nav-links {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	padding-bottom: var(--ritmo);
}

.nav-links .page-numbers {
	padding: 0.4rem 0.75rem;
	color: var(--sombra);
	text-decoration: none;
	border: 1px solid var(--piedra);
	border-radius: var(--radio);
}

.nav-links .page-numbers.current {
	background: var(--sombra);
	border-color: var(--sombra);
	color: var(--cal);
}

/* --- Erreur 404 ---------------------------------------------------------- */

.seccion--error {
	min-height: 50svh;
	display: grid;
	align-items: center;
}

.error__texto {
	max-width: 42ch;
	color: var(--sombra);
}

/* --- Pied de page -------------------------------------------------------- */

.pie {
	padding-block: var(--ritmo) 3rem;
	padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
	background: var(--cueva);
	color: var(--arena);
	font-size: var(--t-ui);
}

.pie a {
	color: var(--arena);
	text-decoration-color: color-mix(in srgb, var(--arena) 45%, transparent);
}

.pie a:hover {
	color: #fff;
}

.pie__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2.5rem;
}

/* Le logo du pied de page. Sa largeur vient du personnalisateur — voir
   « Taille du logo en bas de page » — et tombe sur 72 px si rien n'est réglé.
   Le pied est une zone calme : la marque y supporte d'être plus grande que
   dans le bandeau, où elle partage une barre étroite avec le menu. */
.pie__logo {
	display: block;
	width: var(--logo-pie-ancho, 4.5rem);
	margin-bottom: 0.75rem;
}

.pie__logo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radio);
}

.pie__nombre {
	margin-bottom: 0.5rem;
	font-family: var(--fuente-firma);
	font-size: calc(var(--t-h4) * var(--tamano-firma));
	line-height: 1.2;
	color: var(--cal);
}

.pie__direccion {
	font-style: normal;
	color: color-mix(in srgb, var(--arena) 78%, transparent);
}

.registro {
	margin-top: 1.25rem;
	font-size: var(--t-micro);
	line-height: 1.5;
}

.registro__label {
	display: block;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--arena) 55%, transparent);
}

.registro__value {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--cal);
}

.pie__contacto,
.pie__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pie__contacto li,
.pie__lista li {
	margin-bottom: 0.4rem;
}

.pie__copy {
	margin: 1.5rem 0 0;
	font-size: var(--t-micro);
	color: color-mix(in srgb, var(--arena) 55%, transparent);
}

/* --- Visionneuse d'images ------------------------------------------------ */

.visor {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: var(--gutter);
	background: rgb(36 30 26 / 0.95);
}

.visor[hidden] {
	display: none !important;
}

.visor__imagen {
	max-width: 100%;
	max-height: 82svh;
	object-fit: contain;
}

.visor__cerrar,
.visor__anterior,
.visor__siguiente {
	position: absolute;
	background: none;
	border: 1px solid color-mix(in srgb, var(--arena) 35%, transparent);
	border-radius: 50%;
	color: var(--cal);
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transicion);
}

.visor__cerrar:hover,
.visor__anterior:hover,
.visor__siguiente:hover {
	background: color-mix(in srgb, var(--arena) 18%, transparent);
}

.visor__cerrar { top: var(--gutter); right: var(--gutter); }
.visor__anterior { left: var(--gutter); }
.visor__siguiente { right: var(--gutter); }

.visor__contador {
	position: absolute;
	bottom: var(--gutter);
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--t-small);
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--arena) 75%, transparent);
}

body.visor-abierto {
	overflow: hidden;
}

/* =========================================================================
   Los Carujos — la maison sur l'écran.

   Ce qui précède pose la structure. Ce qui suit pose l'identité : la façade
   de Barinas transposée en page. Mur de chaux blanche, soubassement de
   travertin, linteau bleu au-dessus de la porte, tuile du toit en touches
   rares, et l'eau de la piscine pour une seule ligne.

   Tout passe par les jetons de :root. Si un jour vous repeignez les
   encadrements en vert, changez --azul et le site suit.
   ========================================================================= */

/* Le linteau bleu au-dessus de la porte d'entrée. */
.cabecera {
	border-top: 3px solid var(--azul);
}

.cabecera.esta-desplazada {
	border-bottom-color: color-mix(in srgb, var(--piedra) 70%, transparent);
	box-shadow: 0 1px 12px rgb(33 29 25 / 0.06);
}

.marca__nombre {
	color: var(--titulo-color);
}

.marca__lugar {
	color: var(--azul);
}

/* --- Ouverture sans photo ------------------------------------------------
   Tant que la photo d'ouverture n'est pas choisie, le bandeau imite la
   façade : le mur chaulé, puis la bande de travertin du soubassement.
   Ce n'est pas un pis-aller, c'est la maison en aplats. */

.hero--sin-imagen {
	background:
		linear-gradient(
			to bottom,
			var(--cal-pura) 0%,
			var(--cal-pura) calc(100% - 2.5rem),
			var(--arena) calc(100% - 2.5rem),
			var(--arena) 100%
		);
	border-bottom: 1px solid var(--piedra);
}

.hero--sin-imagen .hero__lugar {
	color: var(--azul);
	opacity: 1;
}

.hero--sin-imagen .hero__bajada {
	color: var(--sombra);
	opacity: 1;
}

.hero__titulo {
	/* 18ch hachait un titre porteur de mots-clés en cinq lignes. */
	max-width: 24ch;
	text-wrap: balance;
}

/* --- Titres de section ---------------------------------------------------
   Un trait bleu court sous chaque titre : le même geste que le cadre bleu
   autour d'une fenêtre blanche. */

.seccion__titulo::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 2px;
	margin-top: 1rem;
	background: var(--azul);
}

/* --- Équipements ---------------------------------------------------------
   Les pastilles reprennent la colline sèche. La piscine, elle, prend la
   couleur de l'eau : c'est l'argument de la maison, il mérite sa teinte.
   La classe est posée par le gabarit quand l'intitulé parle de piscine. */

.equipamiento__item--agua::before {
	background: var(--agua);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--agua) 22%, transparent);
}

.equipamiento__item--agua {
	font-weight: 500;
}

/* --- Pied de page --------------------------------------------------------
   Le bleu profond des embrasures, pas un gris neutre. */

.pie {
	background: var(--azul-hondo);
	color: color-mix(in srgb, var(--cal) 88%, transparent);
	border-top: 3px solid var(--azul);
}

.pie a {
	color: var(--cal);
	text-decoration-color: color-mix(in srgb, var(--cal) 45%, transparent);
}

.pie__nombre {
	color: var(--cal-pura);
}

/* Le numéro REAT doit rester lisible : c'est une mention obligatoire,
   pas une note de bas de page décorative. */
.registro__value {
	color: var(--cal-pura);
	letter-spacing: 0.06em;
}

/* --- Détails de tuile ----------------------------------------------------
   La terre cuite du toit, en touches rares : elle réchauffe sans concurrencer
   le bleu, qui reste la couleur de reconnaissance de la maison. */

.entrada__contenido blockquote {
	border-left-color: var(--teja);
	color: var(--cueva);
}

.tarjeta__fecha,
.entrada__meta {
	color: var(--sombra);
}

.boton--discreto:hover {
	background: var(--azul-hondo);
	border-color: var(--azul-hondo);
	color: var(--cal-pura);
}

/* Sur la bande de travertin, le bouton clair passerait inaperçu. */
.seccion--reservar .boton--discreto:hover,
.ficha .boton--discreto:hover {
	background: var(--cueva);
	border-color: var(--cueva);
}

/* --- Sélection et barre de défilement ------------------------------------ */

::selection {
	background: color-mix(in srgb, var(--azul) 18%, transparent);
	color: var(--cueva);
}

html {
	accent-color: var(--azul);
}

/* --- Les chambres --------------------------------------------------------
   Sur la façade, le numéro de la maison est peint en bleu au-dessus de la
   porte. Les chambres sont numérotées de la même main. */

.seccion--dormitorios {
	background: var(--cal-pura);
	border-block: 1px solid color-mix(in srgb, var(--piedra) 55%, transparent);
}

.dormitorios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.75rem 2rem;
	max-width: var(--ancho-total);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dormitorios__item {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding-top: 1.1rem;
	border-top: 2px solid var(--azul);
}

.dormitorios__numero {
	font-family: var(--fuente-titulo);
	font-size: calc(var(--t-h3) * var(--escala-titulo));
	line-height: 1;
	color: var(--azul);
}

.dormitorios__texto {
	font-size: var(--t-base);
	line-height: 1.5;
}

/* Une chambre avec sa photo : le numéro et la description gardent leur ligne,
   la photo passe dessous sur toute la largeur de la colonne. Elle était noyée
   dans la galerie, où rien ne disait laquelle avait quel lit. */
.dormitorios__item--con-foto {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	column-gap: 0.9rem;
	row-gap: 1.1rem;
}

.dormitorios__foto {
	grid-column: 1 / -1;
	margin: 0;
}

/* Le même recadrage que les vignettes de la galerie : sans proportion imposée,
   trois photos prises de travers donneraient trois colonnes inégales. */
.dormitorios__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radio);
}

.dormitorios__nota {
	max-width: 46ch;
	margin: 2.5rem 0 0;
	color: var(--sombra);
	font-size: var(--t-ui);
}

/* --- Retouches après relecture de l'aperçu -------------------------------- */

/* La langue active portait un brun neutre : c'est le bleu qui signale
   « vous êtes ici » partout ailleurs sur le site. */
.lang__link.is-current {
	background: var(--azul);
	color: var(--cal-pura);
}

.lang__link:hover {
	background: color-mix(in srgb, var(--azul) 12%, transparent);
	color: var(--azul-hondo);
}

/* 46ch sur un corps de 15px faisait une colonne de 320 px. */
.dormitorios__nota {
	max-width: 60ch;
}

/* Les titres saisis dans l'éditeur de blocs reçoivent le même trait bleu que
   ceux posés par le thème. Sans ça, la page a deux façons de faire un titre. */
.seccion--relato .entrada__contenido h2::after {
	content: "";
	display: block;
	width: 2rem;
	height: 2px;
	margin-top: 0.75rem;
	background: var(--azul);
}

.seccion--relato .entrada__contenido h2 {
	margin-top: 2.5em;
}

.seccion--relato .entrada__contenido > h2:first-child {
	margin-top: 0;
}

/* =========================================================================
   Ce que l'éditeur de blocs peut dessiner.

   Tout ce qui suit habille des blocs natifs de WordPress. Rien n'exige le
   thème : la propriétaire compose, le thème se contente d'accorder le rendu
   au reste du site.
   ========================================================================= */

/* --- Bloc « Détails » ----------------------------------------------------
   C'est lui qui porte les questions fréquentes depuis l'éditeur. Le thème lui
   donne l'allure de l'ancien accordéon, et inc/faq.php le relit pour produire
   le balisage FAQPage. Ajouter une question ne demande rien d'autre. */

.wp-block-details {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--piedra);
}

.wp-block-details:first-of-type {
	border-top: 1px solid var(--piedra);
}

.wp-block-details > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	font-family: var(--fuente-titulo);
	font-size: calc(var(--t-h4) * var(--escala-titulo));
	color: var(--titulo-color);
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "+";
	flex: none;
	color: var(--azul);
	font-family: var(--fuente-texto);
	font-size: 1.25rem;
	line-height: 1;
	transition: transform var(--transicion);
}

.wp-block-details[open] > summary::after {
	content: "−";
}

.wp-block-details > summary:hover {
	color: var(--azul);
}

.wp-block-details > *:not(summary) {
	margin-top: 1rem;
	color: var(--sombra);
}

.wp-block-details > *:last-child {
	margin-bottom: 0;
}

/* --- Styles de blocs ------------------------------------------------------
   Proposés dans l'éditeur sous « Styles », sur un bloc Groupe ou Séparateur. */

.wp-block-group.is-style-banda-travertino {
	padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
	background: var(--arena);
	border-block: 1px solid var(--piedra);
}

.wp-block-group.is-style-banda-azul {
	padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
	background: var(--azul-hondo);
	color: var(--cal);
}

.wp-block-group.is-style-banda-azul :is(h1, h2, h3, h4) {
	color: var(--cal-pura);
}

.wp-block-group.is-style-banda-azul a {
	color: var(--cal-pura);
}

.wp-block-separator.is-style-trazo-azul {
	width: 2.75rem;
	height: 2px;
	margin-inline: 0;
	background: var(--azul);
	border: 0;
	opacity: 1;
}

/* --- Gabarit « Page libre » ---------------------------------------------- */

.pagina--libre {
	padding-block: var(--ritmo);
}

.entrada__contenido--libre {
	width: min(100% - (var(--gutter) * 2), var(--ancho-texto));
	margin-inline: auto;
}

/* Une page libre doit pouvoir aller d'un bord à l'autre. */
.entrada__contenido--libre .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

/* --- Téléphone étroit ----------------------------------------------------
   Deux boutons de largeurs différentes empilés donnent un escalier. Sous
   30 rem, chacun prend toute la largeur : c'est aussi une meilleure cible
   pour le pouce. */

@media (max-width: 30rem) {
	.hero__acciones .boton,
	.reservar__repliegue .boton {
		flex: 1 1 100%;
		width: 100%;
	}

	.reservar__repliegue {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}
}

/* --- Le logo, à côté du nom -----------------------------------------------
   Un pictogramme seul oblige le visiteur à deviner chez qui il est ; le nom
   seul se prive d'un repère. Les deux tiennent dans la même largeur.
   Le sens de la boîte est réglé sur .marca plus haut. */

.marca__icono {
	flex: none;
	display: block;
	width: var(--logo-ancho, 3rem);
}

.marca__icono img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radio);
}

.marca__texto {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

/* Sur téléphone, le logo garde ses proportions mais cède un peu de place :
   le bandeau y est à l'étroit et le nom doit rester lisible. */
@media (max-width: 30rem) {
	.marca__icono {
		width: calc(var(--logo-ancho, 3rem) * 0.82);
	}
}

/* --- Le bandeau de consentement -------------------------------------------
   Posé en bas, sur toute la largeur, sans voile ni fond noir : la question
   est légitime mais elle n'est pas un événement, et bloquer la page pour la
   poser serait une manière de forcer la réponse.

   Les deux boutons ont la même taille et la même place. L'AEPD demande que
   refuser coûte un clic, comme accepter ; un « refuser » relégué en petit
   texte gris est précisément ce qu'elle sanctionne.

   L'attribut hidden suffit à le masquer : le script l'enlève quand personne
   n'a encore répondu. On déclare display quand même, parce qu'une règle
   d'auteur sur .cookies l'emporterait sinon sur hidden. */
.cookies[hidden] {
	display: none;
}

.cookies {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 60;
	padding: 1rem;
	background: var(--cal);
	border-top: 1px solid var(--piedra);
	box-shadow: 0 -6px 24px rgb(33 29 25 / 12%);
}

.cookies__caja {
	display: grid;
	gap: 0.5rem 2rem;
	align-items: center;
	max-width: 68rem;
	margin-inline: auto;
}

.cookies__titulo {
	margin: 0;
	font-weight: 600;
}

.cookies__texto {
	margin: 0;
	font-size: var(--t-ui);
	color: var(--sombra);
}

.cookies__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cookies__botones .boton {
	flex: 1 1 auto;
	padding-inline: 1.25rem;
}

/* À partir de la tablette, le texte et les boutons tiennent sur une ligne :
   le bandeau mange alors trois centimètres de page, pas dix. */
@media (min-width: 48rem) {
	.cookies__caja {
		grid-template-columns: 1fr auto;
	}

	.cookies__titulo,
	.cookies__texto {
		grid-column: 1;
	}

	.cookies__botones {
		grid-column: 2;
		grid-row: 1 / 3;
		flex-wrap: nowrap;
	}

	.cookies__botones .boton {
		flex: 0 0 auto;
	}
}