/* contenido.css — feuille unique des pages de contenu du site.
 *
 * finca-style.css porte l'identité : couleurs, polices, titres, version
 * ordinateur. Cette feuille-ci porte la mise en page des pages de texte,
 * celles sorties de WordPress. Une règle changée ici change les 55 pages.
 *
 * Tout est préfixé .contenido à dessein : nav.js réinjecte finca-style.css
 * APRÈS les styles de page, si bien qu'une règle sur `h2` seul se ferait
 * écraser. `.contenido h2` l'emporte par sa spécificité, quel que soit
 * l'ordre de chargement.
 */

body {
  max-width: var(--flf-columna, 430px);
  margin: 0 auto;
  padding-bottom: 60px;
  background: var(--flf-bg);        /* le crème de la page reservar estadía */
}

/* Rien ne se superpose au fond : le texte et les images y sont posés
   directement. Seuls les cadres voulus — turismo sostenible, sobre nosotros —
   portent le leur, déclaré plus bas. */
.contenido > *:not(.bloc):not(.lodge-carrusel) { background: transparent; }

.contenido {
  padding: 24px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Titres ────────────────────────────────────────────────────────────
   Le dessin de la page « Paquete cabalgata · 2 noches », qui fait référence :
   le titre y est un .titulo-paq, les intertitres des .sub-titulo. */
/* Le titre de premier niveau, partout. Les pages en bloc HTML font hériter
   leurs titres du corps de texte, en !important : sans la même arme, un h1
   promu depuis leur structure resterait à 14 px. */
/* Le titre posé sur l'image de tête garde l'habillage de sa page : c'est un
   texte blanc sur la photo, pas un titre de colonne. Il reste un h1 pour
   autant — la page d'accueil espagnole n'en avait aucun. */
body h1:not(.flf-hero-texto),
.contenido h1:not(.flf-hero-texto) {
  font-family: 'Lalezar', 'Asap Sharp', sans-serif !important;
  font-size: 38px !important; font-weight: 400 !important;
  letter-spacing: -0.5px; line-height: 0.9;
  color: var(--flf-text); margin: 0 0 4px;
}
/* Les intertitres. « body .flf-h2 » et non « body h2 » : les pages en bloc
   HTML posent .flf-h2 en !important, et à !important égal c'est la
   spécificité qui tranche — une classe l'emporte sur deux balises. */
body .flf-h2,
body :is(main, .flf-wrap) h2,
.contenido h2 {
  font-family: 'Lalezar', 'Asap Sharp', sans-serif !important;
  font-size: 28px !important; font-weight: 400 !important;
  letter-spacing: -0.3px; line-height: 1;
  color: var(--flf-text); margin: 30px 0 12px;
}
.contenido h3,
.contenido h4 {
  font-family: 'Asap Sharp', sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -0.2px;
  line-height: 1.3; color: var(--flf-text); margin: 10px 0 0;
}

/* ── Texte ──────────────────────────────────────────────────────────────── */
.contenido p,
.contenido li {
  font-size: 15px; font-weight: 400; line-height: 1.55;
  letter-spacing: normal; margin: 0;
}
.contenido ul,
.contenido ol {
  padding-left: 20px; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.contenido a {
  color: var(--flf-green);
  font-size: inherit; font-weight: inherit;
  border-bottom: 1px solid transparent;
}
.contenido a:hover { border-bottom-color: var(--flf-green); }
.contenido strong { font-weight: 700; }

/* ── Images isolées ─────────────────────────────────────────────────────── */
.contenido img {
  width: 100%; height: auto; display: block;
  border-radius: 2px;
}

/* ── Diaporamas ─────────────────────────────────────────────────────────
   Le carrousel des pages lodge : défilement horizontal, calage par photo.
   Les marges négatives le font déborder de la gouttière du texte, pour que
   les photos touchent les bords de la colonne. */
/* Les pages bâties en bloc HTML ont leur propre diaporama, .flf-com-diaporama :
   même mécanique, mais des photos en 4/5 et pas de pastilles. On l'aligne sur
   lodge-alcide, qui fait référence. La gouttière haute tombe à zéro : ce
   diaporama ouvre la page, il vient se poser sous la barre. */
body .flf-com-diaporama {
  padding: 0 20px 0 !important;
}
body .flf-com-diaporama img {
  width: 82vw; max-width: 360px; height: auto;
  aspect-ratio: 3 / 4 !important; object-fit: cover;
  border-radius: 2px !important; flex-shrink: 0; scroll-snap-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.contenido .lodge-carrusel {
  display: flex; overflow-x: auto; gap: 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -20px; padding: 16px 20px 0;      /* la gouttière de lodge-marcel */
}
.contenido .lodge-carrusel::-webkit-scrollbar { display: none; }
.contenido .lodge-carrusel img {
  width: 82vw; max-width: 360px; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 2px; flex-shrink: 0; scroll-snap-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.contenido .lodge-dots {
  display: flex; justify-content: center; gap: 5px; margin-top: 8px;
}
.contenido .lodge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--flf-borde);
}
.contenido .lodge-dot.activo { background: var(--flf-text); }

/* ── Questions fréquentes ───────────────────────────────────────────────
   Un seul dessin pour toutes les FAQ du site, celui de la page paquete :
   la question en demi-gras, la réponse dans la même taille mais en romain.

   Le corps s'ouvre sur deux lignes ; le reste vient au clic. La hauteur est
   donnée en em pour suivre l'interligne, et non en pixels qui décrocheraient
   au premier changement de taille.

   Ces règles-ci sont préfixées « body » et non « .contenido » : les pages
   bâties en bloc HTML n'ont pas de .contenido, et posent leur propre style
   après le lien vers cette feuille. */
/* Seul l'espacement vertical est imposé : la gouttière latérale reste celle
   de la page, sans quoi la FAQ se colle au bord quand le reste du texte est
   en retrait. */
body :is(.flf-faq-item, .faq-item) {
  padding-top: 8px; padding-bottom: 8px;
  border-bottom: 0;
}

/* Les pages en bloc HTML posent ces propriétés en !important pour hériter du
   corps de texte : il faut la même arme pour imposer le dessin commun. */
body :is(.flf-faq-pregunta, .faq-q) {
  font-family: 'Asap Sharp', sans-serif !important;
  font-size: 15px !important; font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.2px; color: var(--flf-text); margin: 0;
}
/* Le corps porte trois noms selon les pages : cuerpo, resp, texto. */
body :is(.flf-faq-cuerpo, .flf-faq-resp, .flf-faq-texto, .faq-a) {
  font-family: 'Asap Sharp', sans-serif !important;
  font-size: 15px !important; font-weight: 400 !important; letter-spacing: -0.2px;
  line-height: 1.55; color: var(--flf-text);
  /* Ces corps de réponse sont des <p> : sans cela, la marge par défaut du
     navigateur rouvre quinze pixels sous la question. */
  margin-top: 0;
}

/* La troncature ne vaut que là où un bouton permet de rouvrir. Deux pages
   déplient autrement — par une case à cocher — et une autre n'a pas de
   bouton du tout : les tronquer rendrait leur texte inatteignable. */
body .flf-faq-item:has(.flf-ver-mas) .flf-faq-cuerpo {
  overflow: hidden; max-height: 3.1em;            /* deux lignes */
  transition: max-height .35s ease;
}
body .flf-faq-item:has(.flf-ver-mas) .flf-faq-cuerpo.ouvert { max-height: 60em; }

/* Le bouton reprend le dessin de « ver más » de la section jour par jour,
   mais dans la couleur du texte plutôt qu'en vert. */
body :is(.flf-ver-mas, .faq-vermas) {
  background: none; border: 0; cursor: pointer;
  font-family: 'Asap Sharp', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--flf-text);
  padding: 6px 0 0;
}
body :is(.flf-ver-mas, .faq-vermas):hover { opacity: .7; }

/* ── Cadres ─────────────────────────────────────────────────────────────
   Certaines pages détachent une section sur un fond : un cadre blanc pour un
   thème, un encart vert pour une citation ou un manifeste. WordPress le
   faisait avec des colonnes Elementor ; l'import les retrouve dans la feuille
   de la page et les rend en <section class="bloc">.

   Le cadre porte la gouttière et l'espacement de ce qu'il contient : sans
   cela, chaque titre et chaque paragraphe gardait la sienne et le cadre
   s'ouvrait sur du vide — le défaut qu'on avait corrigé côté WordPress. */
.contenido .bloc {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: 2px;
  margin: 6px -20px;                 /* le cadre déborde jusqu'aux bords de la colonne */
}
.contenido .bloc > :first-child { margin-top: 0; }
.contenido .bloc-blanc { background: #FFFFFF; }
.contenido .bloc-verde { background: var(--flf-sauge, #C6D6A6); }

/* Sur le sauge, le texte prend l'encre du site : il était blanc sur le vert
   sapin d'origine, illisible une fois le fond éclairci. */
.contenido .bloc-verde :is(h1, h2, h3, h4, p, li, a) { color: var(--flf-text); }
.contenido .bloc-verde h4 {
  font-size: 22px; font-weight: 700; letter-spacing: -1px; line-height: 1.15;
}
.contenido .bloc-verde h4 + h4 {     /* la signature d'une citation */
  font-size: 14px; letter-spacing: normal;
}

/* ── Angles des images ──────────────────────────────────────────────────
   Deux pixels partout dans le contenu. Les pages bâties en bloc HTML fixent
   le leur — douze pixels — dans leur propre style : il faut la même arme.
   La règle ne descend pas dans l'en-tête ni le bouton WhatsApp, qui gardent
   leurs formes. */
body :is(.contenido, .flf-wrap, main) img { border-radius: 2px !important; }

/* ── Rien entre le contenu et le fond ───────────────────────────────────
   Les pages reprises telles quelles de WordPress se peignaient un panneau
   crème clair (#F7F5F2) et posaient une cale beige derrière chaque photo,
   le temps qu'elle charge. Deux nuances de plus que le fond de page : on les
   efface, le texte et les photos se posent à même le fond. */
body .flf-wrap { background: transparent !important; }
body :is(.contenido, .flf-wrap, main) img { background: transparent !important; }

/* ── Photos isolées : cadrage carré ─────────────────────────────────────
   Les photos hors diaporama arrivaient dans des proportions dictées par la
   colonne qui les portait. Le carré les aligne entre elles. */
.contenido > img,
.contenido .bloc + img,
.contenido img:not(.lodge-carrusel img) {
  aspect-ratio: 1 / 1; object-fit: cover;
}

/* ── Sous-titre de page ─────────────────────────────────────────────────
   « alma del lugar », « Nuestro compromiso » : une mention discrète posée
   juste sous le titre. Elle était centrée et détachée par un espaceur ;
   elle vient maintenant se caler à gauche, sur la verticale du titre. */
.contenido h2 + h3 {
  color: var(--flf-gris);
  font-size: 15px; font-weight: 600; letter-spacing: -0.2px;
  margin-top: -8px;
}

/* ── Boutons ────────────────────────────────────────────────────────────
   Le dessin de « consultar calendario », le bouton de la page reservar
   estadía : capitales légèrement espacées sur fond jaune, cerné de la couleur
   du texte, angles à 2 px, gouttière juste ajustée au mot. Il ne colle jamais
   au texte qui le précède.

   Les !important sont nécessaires : les pages bâties en bloc HTML déclarent
   leurs propres boutons de la même façon, après le lien vers cette feuille. */
body :is(.contenido .bouton, .flf-btn, .flf-btn-fijo-txt) {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; max-width: 100%;
  margin-top: 14px; padding: 6px 13px !important;
  background: #F6DE88 !important;
  color: var(--flf-text) !important;
  border: 1px solid var(--flf-text) !important; border-radius: 2px !important;
  font-family: 'Asap Sharp', sans-serif !important;
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.5px !important;
  line-height: 1.2; text-decoration: none; cursor: pointer;
}
/* La barre fixe garde son calage : sa gouttière vient du bandeau. */
body .flf-btn-fijo-txt { margin-top: 0; }
/* Le survol repeignait le libellé en vert sapin : il garde son encre. */
body :is(.contenido .bouton, .flf-btn, .flf-btn-fijo-txt):hover,
body :is(.contenido .bouton, .flf-btn, .flf-btn-fijo-txt):focus,
body :is(.contenido .bouton, .flf-btn, .flf-btn-fijo-txt):active {
  color: var(--flf-text) !important;
}
body :is(.contenido .bouton, .flf-btn):hover { opacity: .85; }

/* ── Version ordinateur ─────────────────────────────────────────────────
   La colonne est centrée et encadrée par finca-style.css ; ici on donne au
   texte un peu plus d'air, comme sur les pages du moteur. */
@media (min-width: 900px) {
  /* La feuille occupe les deux tiers de l'écran, centrée. Le plancher de
     430 px la garde lisible sur les petits écrans d'ordinateur.

     Ni filet ni ombre : le texte et les photos se posent directement sur le
     fond, d'une seule couleur d'un bord à l'autre. finca-style.css en dessine
     un pour le moteur de réservation ; on l'annule ici. */
  /* La largeur vient de --flf-columna, que finca-style.css élargit ici. */

  /* Dans cette feuille élargie, la ligne de texte reste lisible : au-delà
     d'environ soixante-dix signes, l'œil perd le début de la ligne suivante.
     Étalé sur les 900 px de la feuille, un paragraphe en comptait cent dix.
     La colonne de lecture est centrée ; les photos, elles, gardent la largeur
     de la feuille. */
  .contenido { padding: 32px 0 0; gap: 16px; }
  .contenido > :not(.lodge-carrusel):not(.lodge-dots):not(img) {
    max-width: 640px; margin-inline: auto; width: 100%;
  }
  .contenido > .bloc { max-width: 640px; margin-inline: auto; }
  .contenido > img { max-width: 640px; margin-inline: auto; }

  /* Les pages bâties en bloc HTML tiennent leur largeur de .flf-wrap :
     on l'aligne sur la même colonne de lecture. La page d'accueil espagnole
     ouvre un second bloc, .flf-wrap2, qui restait 60px plus large que le
     reste — assez pour que l'œil décroche d'une section à l'autre.

     Ces deux blocs se dessinaient aussi un filet vertical sur toute leur
     hauteur, de part et d'autre du texte. Il datait de l'époque où la colonne
     flottait sur un fond d'une autre couleur et devait s'en détacher ; sur le
     crème uni, ce n'est plus qu'un trait qui traverse la page. */
  body :is(.flf-wrap, .flf-wrap2) {
    max-width: 640px !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .contenido .bloc { padding: 28px; margin: 6px -28px; }
  .contenido h1:not(.flf-hero-texto) { font-size: 46px; }
  .contenido h2 { font-size: 32px; }
  /* Les pages bâties en bloc HTML ont leur propre diaporama, .flf-com-diaporama :
   même mécanique, mais des photos en 4/5 et pas de pastilles. On l'aligne sur
   lodge-alcide, qui fait référence. La gouttière haute tombe à zéro : ce
   diaporama ouvre la page, il vient se poser sous la barre. */
body .flf-com-diaporama {
  padding: 0 20px 0 !important;
}
body .flf-com-diaporama img {
  width: 82vw; max-width: 360px; height: auto;
  aspect-ratio: 3 / 4 !important; object-fit: cover;
  border-radius: 2px !important; flex-shrink: 0; scroll-snap-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* La gouttière latérale ayant disparu du conteneur en version ordinateur, la
     marge négative qui la compensait ferait déborder le diaporama hors de la
     feuille — 1014 px pour une feuille de 960. */
  .contenido .lodge-carrusel { margin: 0; padding: 16px 28px 0; }
  .contenido .lodge-carrusel img { width: 300px; }
}

/* ── Pied de page ───────────────────────────────────────────────────────
   Une seule ligne, comme sur WordPress. Le trait qui la sépare du contenu
   reprend celui des questions fréquentes, pour ne pas introduire une
   troisième nuance de gris. */
/* Le pied de page est posé et dessiné par nav.js, qui tourne sur toutes les
   pages du site et non sur les seules pages de contenu. */

/* ── Carte ──────────────────────────────────────────────────────────────
   Le widget Google Maps arrivait d'Elementor sans la moindre règle : le
   navigateur lui donnait sa taille par défaut, 304 sur 154 pixels, cernée
   d'une bordure grise en relief, posée de travers dans une colonne quatre
   fois plus large.

   Elle prend maintenant la colonne de lecture, avec la même gouttière que
   le texte pour que les bords s'alignent, et la hauteur d'une vraie carte :
   on doit y lire la route qui mène à la finca. */
body .elementor-custom-embed {
  max-width: var(--flf-lectura, 640px);
  margin: 0 auto;
  padding: 0 20px;
}
body .elementor-custom-embed iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 2px;
}

@media (min-width: 900px) {
  body .elementor-custom-embed iframe { height: 380px; }
}