/* ==========================================================================
   Monserrat Bungalows · pages.css — páginas internas (guías) y 404.
   Se carga después de styles.css y components.css; usa sus tokens.
   Bloques del cuerpo: ver _source/pages/FORMATO.md.
   ========================================================================== */

:root {
  /* columna de lectura: ~70 caracteres por renglón en Figtree (su "ch" es más ancho que la letra
     promedio: 68ch daban ~90 caracteres; 30em da ~68–72, medido) */
  --prose-w: 30em;
  --prose-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
}

/* ---------- banner: la misma idea que el de la home, más bajo ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  margin-top: calc(var(--header-h) * -1);
  min-height: max(440px, 62svh);
  background: #1a2a20; color: var(--paper);
}
@media (min-width: 768px) { .page-hero { min-height: clamp(480px, 62svh, 760px); } }
.page-hero__media { position: absolute; inset: 0; z-index: -2; background: #1a2a20; }
.page-hero__media picture, .page-hero__media img { width: 100%; height: 100%; }
.page-hero__media img { object-fit: cover; object-position: 50% 50%; }
/* sombra más alta que la de la home: el título de las guías ocupa hasta 4 renglones y el rótulo queda
   sobre la parte clara de la foto (reposeras, pasto al sol). Medido: rótulo p5 ≥ 4,5:1 en las 5 guías. */
.page-hero .hero-shade {
  background:
    linear-gradient(to bottom, rgb(12 20 15 / .55) 0, rgb(12 20 15 / 0) 160px),
    linear-gradient(to top, rgb(12 20 15 / .86) 0%, rgb(12 20 15 / .68) 38%, rgb(12 20 15 / .4) 64%, rgb(12 20 15 / 0) 90%);
}
@media (min-width: 768px) {
  .page-hero .hero-shade {
    background:
      linear-gradient(to bottom, rgb(12 20 15 / .55) 0, rgb(12 20 15 / 0) 160px),
      linear-gradient(to right, rgb(12 20 15 / .42) 0, rgb(12 20 15 / .2) 50%, rgb(12 20 15 / 0) 72%),
      linear-gradient(to top, rgb(12 20 15 / .86) 0%, rgb(12 20 15 / .62) 36%, rgb(12 20 15 / .3) 64%, rgb(12 20 15 / 0) 88%);
  }
}
.page-hero__text { position: relative; padding: calc(var(--header-h) + 3rem) 0 clamp(3.25rem, 2.5rem + 2.5vw, 4.5rem); }
.page-hero .eyebrow { margin-bottom: .9rem; color: #f3d9c6; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.page-title {
  color: #fffdf8; text-shadow: 0 2px 24px rgb(0 0 0 / .28);
  font-size: clamp(2.375rem, 1.3rem + 3.4vw, 4.5rem); line-height: 1.02;
  max-width: 14em; text-wrap: balance;
}
.page-title em { font-style: italic; }
.page-hero__credit {
  position: absolute; right: 0; bottom: .85rem;
  font-size: .75rem; letter-spacing: .02em; color: rgb(255 253 248 / .72);
  text-shadow: 0 1px 8px rgb(0 0 0 / .4);
}
.page-hero :focus-visible { outline-color: #fffdf8; }

/* ---------- migas ---------- */
.breadcrumbs { padding-top: 1rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; font-size: var(--step--1); color: var(--muted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--line); }
.breadcrumbs a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--pine); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--pine) 40%, transparent);
}
.breadcrumbs a:hover { text-decoration-color: var(--pine); }
.breadcrumbs [aria-current] { color: var(--body); }

/* ---------- columna de lectura ---------- */
.page-layout { padding-bottom: var(--section-y); }
.prose {
  margin-top: clamp(1.25rem, .75rem + 2vw, 2.75rem);
  font-size: var(--prose-size); line-height: 1.7; color: var(--body);
}
.prose > :first-child { margin-top: 0; }
.prose :where(p, ul, ol, h2, h3, .page-note, .faq-list) { max-width: var(--prose-w); }
.prose :where(p, ul, ol) { margin-top: 1.1em; }
.prose :where(p, li) { text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a:not(.btn) {
  color: var(--pine); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, var(--pine) 45%, transparent);
  transition: text-decoration-color .15s var(--ease);
}
.prose a:not(.btn):hover { text-decoration-color: var(--pine); text-decoration-thickness: 2px; }

.page-lead {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem); line-height: 1.38; letter-spacing: -.005em;
  color: var(--ink);
}
.prose .page-lead { max-width: 24em; }

.page-section { margin-top: clamp(3rem, 2.4rem + 2.4vw, 4.75rem); scroll-margin-top: calc(var(--header-h) + 1.25rem); }
.prose h2 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; color: var(--ink);
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em;
  max-width: 18em; text-wrap: balance;
}
.prose h2 em, .prose h3 em { font-style: italic; }
.prose h2 + * { margin-top: 1rem; }
.prose h3 {
  margin-top: 2.1em; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; color: var(--ink);
  font-size: clamp(1.25rem, 1.15rem + .45vw, 1.5rem); line-height: 1.25; letter-spacing: -.005em; text-wrap: balance;
}
.prose h3 + * { margin-top: .5em; }

/* listas: guion de color arcilla (como "En cada bungalow") y números en Newsreader */
.prose ul:not([class]) > li, .prose ol:not([class]) > li { position: relative; }
.prose ul:not([class]) > li { padding-left: 1.4em; }
.prose ul:not([class]) > li::before {
  content: ""; position: absolute; left: .15em; top: .85em; width: .65em; height: 1.5px; background: var(--clay);
}
.prose ol:not([class]) { counter-reset: paso; }
.prose ol:not([class]) > li { counter-increment: paso; padding-left: 2em; }
.prose ol:not([class]) > li::before {
  content: counter(paso); position: absolute; left: 0; top: -.05em;
  font-family: var(--font-display); font-size: 1.15em; color: var(--clay); font-variant-numeric: tabular-nums;
}
.prose li + li { margin-top: .55em; }
.prose li > :where(ul, ol) { margin-top: .55em; }

/* figuras: el ancho de la columna del artículo (más ancho que el texto); en el teléfono, a sangre */
.page-figure { margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.page-section > .page-figure { margin-top: 2.25rem; }
.page-figure picture { display: block; }
.page-figure img {
  width: 100%; height: auto; max-height: min(85svh, 760px); object-fit: cover;
  border-radius: var(--r-photo); background: var(--dune);
}
.page-figure figcaption { margin-top: .75rem; font-size: var(--step--1); color: var(--muted); line-height: 1.45; max-width: var(--prose-w); }
.page-figure + .page-section { margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
@media (max-width: 767px) {
  .page-figure { margin-inline: calc(var(--gutter) * -1); }
  .page-figure img { border-radius: 0; max-height: 90svh; }
  .page-figure figcaption { padding-inline: var(--gutter); }
}

/* dato práctico */
.page-note {
  margin-top: 1.75rem; padding: 1.1rem 1.35rem 1.2rem;
  background: var(--sand); border-left: 2px solid var(--clay); border-radius: 0 var(--r-card) var(--r-card) 0;
  color: var(--ink); font-size: .95em; line-height: 1.6;
}
.page-note :where(p, ul, ol):first-child { margin-top: 0; }
.page-note :where(p, ul, ol) { margin-top: .6em; }
.page-note + :where(p, ul, ol) { margin-top: 1.5rem; }

/* tablas (por si una guía las necesita): legibles y sin desbordar */
.prose table { width: 100%; max-width: var(--prose-w); margin-top: 1.5rem; border-collapse: collapse; font-size: .9em; line-height: 1.45; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .65rem .75rem .65rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.prose th { color: var(--ink); font-weight: 600; }
.prose thead th { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* preguntas frecuentes: mismos estilos que la home (.faq-list en styles.css) */
.page-faq .faq-list { margin-top: 1.5rem; }
.prose .faq-list summary { font-size: 1rem; }
.prose .faq-list details p { margin-top: 0; max-width: none; }
.prose .faq-list details p + p { margin-top: -.5rem; }

/* ---------- índice "En esta guía" ---------- */
.toc__label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .75rem;
}
.toc-list { counter-reset: none; }
.toc--inline { margin-top: 2rem; border-block: 1px solid var(--line); font-size: 1rem; }
.toc--inline summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 52px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink);
}
.toc--inline summary::-webkit-details-marker { display: none; }
.toc--inline .chevron { width: 20px; height: 20px; flex: none; color: var(--pine); transition: transform .25s var(--ease); }
.toc--inline[open] .chevron { transform: rotate(180deg); }
.toc--inline .toc-list { margin: 0 0 .75rem; }
.toc .toc-list a {
  display: flex; align-items: center; min-height: 44px; padding: .35rem 0;
  color: var(--body); text-decoration: none; line-height: 1.35; font-weight: 500;
}
.toc .toc-list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.toc--aside .toc-list { border-left: 1px solid var(--line); }
.toc--aside .toc-list a { min-height: 0; padding: .45rem 0 .45rem 1rem; margin-left: -1px; border-left: 1px solid transparent; font-size: .9375rem; }
.toc--aside .toc-list a:hover { border-left-color: var(--clay); text-decoration: none; }
.toc--aside .toc-list li + li { margin-top: 0; }
.toc--aside .toc-cta { margin-top: 1.75rem; }
@media (max-width: 1023px) { .toc--aside { display: none; } }
@media (min-width: 1024px) {
  .page-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .breadcrumbs { grid-column: 1 / -1; }
  .prose { grid-column: 1 / 8; grid-row: 2; }
  .toc--aside {
    grid-column: 10 / 13; grid-row: 2; position: sticky; top: calc(var(--header-h) + 2rem);
    margin-top: clamp(1.25rem, .75rem + 2vw, 2.75rem); padding-top: .4rem;
  }
  .toc--inline { display: none; }
}
@media (min-width: 1280px) { .prose { grid-column: 1 / 8; } }

/* ---------- bloque "Consultá disponibilidad" (_source/CTA.html) ---------- */
.page-cta {
  display: grid; margin-block: clamp(3rem, 2.4rem + 2.4vw, 4.75rem);
  background: var(--pine); color: rgb(255 253 248 / .86); border-radius: var(--r-card); overflow: hidden;
}
.page-cta__media { border-radius: 0; aspect-ratio: 16 / 10; background: #1a2a20; }
.page-cta__media img { filter: saturate(.94); }
.page-cta__body { padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); align-self: center; }
.page-cta .eyebrow { color: #f3d9c6; margin-bottom: .75rem; }
.page-cta__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; color: #fffdf8;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); line-height: 1.08; letter-spacing: -.015em;
}
.page-cta__title em { font-style: italic; }
.prose .page-cta__text { margin-top: .75rem; font-size: 1rem; line-height: 1.55; max-width: 26em; }
.page-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.page-cta .btn-primary { background: #fffdf8; color: var(--pine-deep); }
.page-cta .btn-primary:hover { background: var(--sand); }
.page-cta .btn-outline { color: #fffdf8; border-color: rgb(255 253 248 / .55); }
.page-cta .btn-outline:hover { background: #fffdf8; color: var(--pine-deep); border-color: #fffdf8; }
.page-cta :focus-visible { outline-color: #fffdf8; }
@media (max-width: 767px) { .page-cta { margin-inline: calc(var(--gutter) * -1); border-radius: 0; } }
@media (max-width: 359px) { .page-cta__actions .btn { flex: 1 1 100%; } }
@media (min-width: 600px) {
  .page-cta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .page-cta__media { aspect-ratio: auto; min-height: 100%; }
}

/* ---------- más guías ---------- */
.more-guides { background: var(--sand); padding-block: var(--section-y); }
.more-guides .h2-sm { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.guide-cards { display: grid; gap: 2.25rem var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guide-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.guide-card { display: flex; flex-direction: column; gap: .45rem; height: 100%; color: inherit; text-decoration: none; }
.guide-card__media { aspect-ratio: 3 / 2; margin-bottom: .55rem; }
.guide-card__credit {
  position: absolute; right: .5rem; bottom: .4rem; pointer-events: none;
  font-size: .6875rem; line-height: 1.2; letter-spacing: .02em; color: rgb(255 253 248 / .9);
  text-shadow: 0 1px 6px rgb(0 0 0 / .55);
}
.guide-card__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--step-1); line-height: 1.2; color: var(--ink);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color .15s var(--ease);
}
.guide-card:hover .guide-card__title { text-decoration-color: var(--ink); }
.guide-card__text {
  font-size: var(--step--1); line-height: 1.5; color: var(--body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

@media (max-width: 599px) {
  /* en el teléfono, tarjetas en fila: foto chica a la izquierda */
  .guide-cards { gap: 0; }
  .guide-cards li + li { border-top: 1px solid var(--line); }
  .guide-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: .3rem; padding-block: 1rem; }
  .guide-card__media { grid-row: 1 / span 2; aspect-ratio: 1; margin: 0; align-self: start; }
  .guide-card__credit { right: .3rem; bottom: .25rem; font-size: .625rem; letter-spacing: 0; }
  .guide-card__title { align-self: end; }
  /* align-self: start — si no, la fila del grid estira la caja y se ven los renglones de después del "…" */
  .guide-card__text { -webkit-line-clamp: 2; line-clamp: 2; align-self: start; }
}

/* ---------- 404 ---------- */
.page-404__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.prose .page-404__actions { margin-top: 0; }
@media (max-width: 419px) { .page-404__actions .btn { flex: 1 1 100%; } }