/* 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: 'Asap Sharp', sans-serif !important;
  font-size: 30px !important; font-weight: 600 !important;
  letter-spacing: -0.5px; line-height: 1.15;
  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: 'Asap Sharp', sans-serif !important;
  font-size: 18px !important; font-weight: 600 !important;
  letter-spacing: -0.3px; line-height: 1.25;
  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: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--flf-borde);
}
body :is(.flf-faq-item, .faq-item):last-child { 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;
  letter-spacing: -0.2px; color: var(--flf-text); margin: 0 0 5px;
}
/* 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);
}

/* 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. */
  body .flf-wrap { max-width: 640px !important; }
  .contenido .bloc { padding: 28px; margin: 6px -28px; }
  .contenido h1:not(.flf-hero-texto) { font-size: 34px; }
  .contenido h2 { font-size: 24px; }
  /* 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. */
body .flf-pie {
  margin: 40px 20px 0;
  padding: 18px 0 4px;
  border-top: 1px solid var(--flf-borde);
  font-family: 'Asap Sharp', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.1px;
  color: var(--flf-gris);
  text-align: center;
}

@media (min-width: 900px) {
  body .flf-pie { max-width: 640px; margin-inline: auto; }
}