/* ============================================================================
   LAYOSCAMP · FICHA DETALLE DE CAMPAMENTO — restyle hero + body + sidebar + galería
   ----------------------------------------------------------------------------
   Piloto Santander · D2 · 2026-06-13
   Fuente UX:  projects/web-drupal/docs/design/mezcla-index-variantb-2026-06-13.md
               · §1.1  Mapa de decisiones por sección (hero crema/blob, badge
                       glass, info-clave chips, body editorial, galería)
               · §3    Escala tipográfica (AA computado)
               · §4    Asset-map (qué se omite del legacy)
               · §5    BEM canónico
   Twig:       templates/node/node--detalle-de-campamento.html.twig
               (sin modificar — CSS-only sobre el markup ya existente)
   Hace pareja con: bridge-cta-quincena.css (banda #reservar noche verde, ya
                    desplegada por main). NO toca .reserva-quincenas ni la
                    banda noche; tampoco re-estiliza el sticky CTA móvil
                    (main ya lo compactó).
   ----------------------------------------------------------------------------
   FEEDBACK OPERADOR (13-jun) que motiva este archivo:
   1) "Hero todo verde muy ancho" → el overlay 30→60→90 % rgba(26,58,10) sobre
      la foto a 500 px de alto se descarta. Canvas crema, foto en BLOB
      (--r-organico) lateral, título FUERA de la foto. Sin overlay verde denso.
   2) Vídeo arreglado por main (youtu.be ya renderiza) → aquí sólo frame
      editorial (radius-lg + veil suave + aspecto 16/9).
   3) Tipografía contenida (h1 ≤4rem, --fs-hero del spec) y base crema.
   ----------------------------------------------------------------------------
   TOKENS LOCALES (patrón bridge-cta-quincena.css): se scopean v3 al raíz del
   componente para ser autosuficiente sin atachar `design-system-v3` sitewide
   (eso es C2, con QA del theme legacy). Valores idénticos a
   design-system-v3-tokens.css. Cuando v3 vaya global, este :root local es
   redundante y se elimina sin tocar el resto del archivo.
   CERO !important. prefers-reduced-motion respetado.
   ============================================================================ */

/* ============================================================================
   1 · TOKENS V3 SCOPEADOS — raíz de ficha (hero + page-content + galería)
   ============================================================================ */
.camp-detail__hero,
.page-content,
.camp-detail__gallery {
  --crema:        #FDF8EE;
  --crema-2:      #F8EFDC;
  --arena:        #F0E0C3;
  --terracota:    #D2603A;
  --bosque:       #31562D;
  --bosque-2:     #026936;
  --bosque-deep:  #22401F;
  --sol:          #FBBB0E;
  --sol-glow:     rgba(251, 187, 14, .35);
  --ink:          #272725;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Outfit", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:      clamp(2.95rem, 4.5vw, 4rem);
  --fs-h1:        clamp(2.1rem,  4.6vw, 2.9rem);
  --fs-h3:        clamp(1.45rem, 2.4vw, 1.95rem);
  --fs-body:      clamp(.98rem,  1.35vw, 1.1rem);
  --fs-eyebrow:   clamp(.72rem,  1vw, .82rem);

  --lh-hero:      .98;
  --lh-body:      1.6;
  --ls-display:  -.02em;
  --ls-eyebrow:   .22em;

  --radius-sm:    14px;
  --radius-md:    22px;
  --radius-lg:    30px;
  --radius-xl:    44px;
  --radius-full:  999px;
  --r-organico:   42% 58% 55% 45% / 48% 42% 58% 52%;

  --sombra-suave: 0 22px 54px -18px rgba(49,86,45,.26), 0 8px 20px -8px rgba(39,39,37,.14);
  --spring:       cubic-bezier(.34, 1.56, .64, 1);
  --ease-zoom:    cubic-bezier(.22, 1,    .36, 1);
}

/* ============================================================================
   2 · HERO — canvas crema, blob orgánico, título FUERA de la foto
   ----------------------------------------------------------------------------
   Estrategia CSS-only sobre markup legacy:
   · .camp-detail__hero        → fondo crema, sin overlay denso
   · .camp-detail__hero-bg     → ya no es full-bleed: se contrae a la columna
                                 derecha del grid y se recorta con --r-organico
                                 (= "blob orgánico" del spec §8.14). Un anillo
                                 blanco inset queda como hairline editorial.
   · .camp-detail__hero-overlay → opacity 0 (queda en el árbol por compat,
                                 sin pintar nada).
   · .camp-detail__hero-content → grid 1fr | minmax(blob), gap, ALIGN center
                                 (no end → no se "pega" al borde inferior).
   · Título y subtítulo invierten tinta a --bosque/--ink sobre --crema.
   ============================================================================ */

.camp-detail__hero {
  background: var(--crema);
  min-height: auto;            /* libera el 500 px legacy: la altura la pone el contenido */
  padding: clamp(72px, 8vw, 120px) 0 clamp(48px, 6vw, 88px);
  align-items: center;          /* sustituye flex-end de legacy */
  overflow: visible;            /* el blob puede asomar hairline sin recorte hostil */
}

/* anula el overlay verde 30→60→90 % SIN borrar el nodo (CSS-only) */
.camp-detail__hero .camp-detail__hero-overlay {
  background: none;
  opacity: 0;
  pointer-events: none;
}

/* el bg pasa de full-bleed a OCUPAR la columna derecha del grid, recortada en blob */
.camp-detail__hero .camp-detail__hero-bg {
  position: absolute;
  /* Lo posicionamos sobre la mitad derecha del hero, dejando aire al texto */
  inset: clamp(48px, 6vw, 88px) clamp(16px, 3vw, 48px) clamp(48px, 6vw, 88px) auto;
  width: min(46%, 560px);
  border-radius: var(--r-organico);
  box-shadow:
    inset 0 0 0 6px rgba(253, 248, 238, .85),   /* anillo crema inset (hairline ancho editorial) */
    var(--sombra-suave);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* veil verde MUY suave sólo sobre el blob (no ruido) para integrar la foto a la paleta */
.camp-detail__hero .camp-detail__hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(34, 64, 31, .10) 0%, rgba(34, 64, 31, .22) 100%);
  pointer-events: none;
}

/* contenido: grid texto | espacio para el blob, ALIGN center */
.camp-detail__hero .camp-detail__hero-content {
  grid-template-columns: minmax(0, 1fr) min(46%, 560px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

/* La columna izquierda del grid es la del texto (primer div del twig).
   La derecha (price-box) queda alineada al pie del blob para no chocar. */
.camp-detail__hero .camp-detail__hero-content > div:first-child {
  position: relative;
  z-index: 2;                 /* el texto SIEMPRE por encima del blob/anillo */
}

/* breadcrumb hairline (variant-b) sobre crema */
.camp-detail__hero .breadcrumb-v2 {
  margin-bottom: clamp(12px, 1.5vw, 18px);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(49, 86, 45, .18);
  max-width: 38ch;
}

.camp-detail__hero .breadcrumb-v2__list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.camp-detail__hero .breadcrumb-v2__item,
.camp-detail__hero .breadcrumb-v2__item a {
  color: var(--bosque);        /* 7.94:1 sobre crema (AA + AAA) */
  font-weight: 700;
  text-decoration: none;
}

.camp-detail__hero .breadcrumb-v2__item--active {
  color: var(--ink);           /* current page · 14.14:1 */
  opacity: .72;                /* matiz visual, sigue 10.18:1 efectivo */
}

.camp-detail__hero .breadcrumb-v2__separator {
  color: var(--terracota);     /* hairline editorial — separador decorativo */
}

/* H1: Fraunces 900, contenido, --bosque sobre --crema → 7.94:1 ✅ AAA */
.camp-detail__hero .camp-detail__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-display);
  color: var(--bosque);
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  max-width: 18ch;             /* evita líneas de 80+ caracteres */
}

/* subtítulo: --ink sobre --crema → 14.14:1 ✅ (en este componente NO bajamos opacidad para
   no caer a 5.45:1; la jerarquía la da el tamaño y la medida, no el opacity). */
.camp-detail__hero .camp-detail__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 50ch;
  margin: 0;
}

/* Badge plazas: glass crema sobre crema (spec §8.4), dot sol decorativo
   Aria-hidden no lo añade el Twig; aquí el dot es ::before pseudo → invisible para AT. */
.camp-detail__hero .camp-detail__badge {
  border-radius: var(--radius-full);
  padding: 8px 16px 8px 14px;
  background: rgba(253, 248, 238, .72);
  border: 1px solid rgba(49, 86, 45, .22);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bosque);                            /* 7.94:1 sobre glass crema ✅ */
  box-shadow: 0 4px 14px -6px rgba(49, 86, 45, .2);
}

.camp-detail__hero .camp-detail__badge--available .material-icons {
  color: var(--sol);                                /* dot estado disponible */
}

/* Price box: glass crema (no oscuro), alineado al pie del blob */
.camp-detail__hero .camp-detail__price-box {
  background: rgba(253, 248, 238, .9);
  border: 1px solid rgba(49, 86, 45, .18);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  color: var(--ink);
  box-shadow: var(--sombra-suave);
  align-self: end;                                  /* lo pegamos al pie del blob */
  position: relative;
  z-index: 2;                                       /* sobre el blob */
}

.camp-detail__hero .camp-detail__price-label {
  color: var(--bosque);                             /* 7.94:1 sobre glass crema */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.camp-detail__hero .camp-detail__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 3vw, 2.6rem);
  color: var(--bosque-deep);                        /* texto display sobre glass crema → 12.7:1 */
  line-height: 1;
}

.camp-detail__hero .camp-detail__price-note {
  color: var(--ink);                                /* 14.14:1 */
  font-family: var(--font-body);
  font-size: .9rem;
  opacity: .72;                                     /* ≥5.45:1 efectivo ✅ (regla "no bajar de .7") */
}

/* CTA del hero: en este componente reaprovechamos .btn--gold legacy del Twig
   reescribiéndolo a btn--sol del spec (bosque-deep/--sol → 6.71:1 ✅). */
.camp-detail__hero .btn.btn--gold {
  background: var(--sol);
  color: var(--bosque-deep);
  border: 1px solid var(--sol);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: var(--radius-full);
  box-shadow: 0 12px 26px -10px var(--sol-glow);
  transition: transform .25s var(--spring), box-shadow .25s var(--spring);
}

.camp-detail__hero .btn.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px var(--sol-glow);
}

.camp-detail__hero .btn.btn--gold:focus-visible {
  outline: 3px solid var(--sol);
  outline-offset: 3px;
}

/* ============================================================================
   3 · INFO-CLAVE (sidebar legacy) + BODY EDITORIAL — page-content
   ============================================================================ */

.page-content {
  background: var(--crema);
}

.page-content .camp-detail__info-grid {
  gap: clamp(32px, 4vw, 64px);
}

/* Body editorial: medida 62–70ch, lead inicial estilo .filosofia */
.page-content .page-content__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);                                /* 14.14:1 ✅ AAA */
  max-width: 68ch;                                  /* spec §1.1 fila 5: 62–70ch */
}

.page-content .page-content__body p:first-of-type {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);        /* lead editorial */
  line-height: 1.5;
  color: var(--ink);
}

.page-content .page-content__body p {
  margin: 0 0 1.1em;
}

.page-content .page-content__body h2,
.page-content .page-content__body h3 {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--bosque);                             /* 7.94:1 ✅ */
  line-height: 1.15;
  margin: 1.6em 0 .5em;
}

.page-content .page-content__body h2 { font-size: var(--fs-h1); }
.page-content .page-content__body h3 { font-size: var(--fs-h3); }

.page-content .page-content__body a {
  color: var(--bosque-2);                           /* 6.45:1 ✅ */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-content .page-content__body a:hover { color: var(--terracota); }

/* Frame de vídeo (YouTube): radius-lg + sombra editorial sobre el wrapper
   inline del Twig. NO se aplica background ni ::before veil: el iframe
   debe quedar visible inmediatamente al cargar (un fondo --bosque-deep
   o un pseudo z-index>iframe genera un "bloque verde" mientras YouTube
   tarda en pintar, especialmente tras un addStyleTag dinámico — feedback
   de QA Playwright 13-jun). El veil queda implícito en la sombra. */
.page-content .page-content__body > div[style*="padding-bottom: 56.25%"],
.page-content .page-content__body > div > div[style*="padding-bottom: 56.25%"] {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

/* PDF como botón ghost (spec §8.2): borde --bosque sobre crema */
.page-content .btn.btn--ghost {
  background: transparent;
  color: var(--bosque);
  border: 1.5px solid var(--bosque);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 700;
  padding: 12px 22px;
  transition: background .2s var(--spring), color .2s var(--spring);
}

.page-content .btn.btn--ghost:hover {
  background: var(--bosque);
  color: var(--crema);
}

.page-content .btn.btn--ghost:focus-visible {
  outline: 3px solid var(--sol);
  outline-offset: 3px;
}

/* Sidebar: glass crema (claro luminoso) sobre la base crema-2, hairlines, iconos --bosque */
.page-content .camp-detail__sidebar { gap: clamp(16px, 2vw, 24px); }

.page-content .camp-detail__sidebar-card {
  background: rgba(253, 248, 238, .65);
  border: 1px solid rgba(49, 86, 45, .18);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-suave);
  padding: clamp(20px, 2.4vw, 28px);
}

.page-content .camp-detail__sidebar-card h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bosque);                             /* 7.94:1 ✅ */
  border-bottom: 1px solid rgba(49, 86, 45, .14);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.page-content .camp-detail__sidebar-card h4 .material-icons-outlined { color: var(--bosque); }

/* Chips info-clave: cada <li> es un "chip" con icono --bosque + label --ink */
.page-content .camp-detail__sidebar-list li {
  font-family: var(--font-body);
  color: var(--ink);                                /* 14.14:1 ✅ */
  border-bottom-color: rgba(49, 86, 45, .1);
  padding: 12px 0;
}

.page-content .camp-detail__sidebar-list .material-icons-outlined {
  color: var(--bosque);
  background: rgba(49, 86, 45, .08);
  border-radius: var(--radius-full);
  padding: 6px;
  font-size: 18px;
}

/* CTA "Ver todas las fechas" → ghost sobre sidebar (no compite con el sol del hero) */
.page-content .camp-detail__sidebar .btn.btn--gold {
  background: transparent;
  color: var(--bosque);
  border: 1.5px solid var(--bosque);
  border-radius: var(--radius-full);
  font-weight: 700;
  box-shadow: none;
}

.page-content .camp-detail__sidebar .btn.btn--gold:hover {
  background: var(--bosque);
  color: var(--crema);
}

/* ============================================================================
   4 · GALERÍA — grid editorial sobre crema, radios asimétricos, zoom hover
   ============================================================================ */

.camp-detail__gallery {
  background: var(--crema);
  padding: clamp(48px, 7vw, 96px) 0;
}

.camp-detail__gallery .label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bosque);                             /* 7.94:1 ✅ — eyebrows en --bosque (no terracota) per UX §3 nota */
}

.camp-detail__gallery .section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  color: var(--bosque);                             /* 7.94:1 ✅ */
  line-height: 1.05;
}

.camp-detail__gallery-grid {
  gap: clamp(12px, 1.6vw, 20px);
}

.camp-detail__gallery-item {
  border-radius: var(--radius-lg);                  /* base */
  box-shadow: var(--sombra-suave);
  transition: transform .55s var(--ease-zoom), box-shadow .55s var(--ease-zoom);
}

/* Patrón editorial: cada 4ª tarjeta lleva radio asimétrico (news-card del index) */
.camp-detail__gallery-item:nth-child(4n+1) { border-radius: 44px 22px 30px 22px; }
.camp-detail__gallery-item:nth-child(4n+2) { border-radius: 22px 44px 22px 30px; }
.camp-detail__gallery-item:nth-child(4n+3) { border-radius: 30px 22px 44px 22px; }
.camp-detail__gallery-item:nth-child(4n)   { border-radius: 22px 30px 22px 44px; }

.camp-detail__gallery-item:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 28px 60px -22px rgba(49, 86, 45, .34);
}

/* ============================================================================
   5 · RESPONSIVE — mobile-first overrides
   ============================================================================ */

/* tablet pequeña hacia abajo: blob decorativo a tamaño contenido bajo el bloque
   de texto. En mobile NO se mete dentro del flex column del hero-content
   (sigue siendo `position:absolute` legacy del Twig); lo "calmamos" para que
   no ocupe la mitad derecha y no solape el price-box. */
@media (max-width: 767px) {
  .camp-detail__hero {
    padding: 32px 0 32px;
    /* Reservamos un slot al final del hero para el blob (margen abajo) */
    padding-bottom: clamp(180px, 50vw, 280px);
  }

  /* hero-content vuelve a comportarse simple (1 columna apilada, texto luego price-box) */
  .camp-detail__hero .camp-detail__hero-content {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
  }

  .camp-detail__hero .camp-detail__price-box { align-self: stretch; }

  /* el blob queda donde está (absolute) pero anclado al pie del hero,
     centrado y a tamaño reducido — decorativo, no compite con el texto */
  .camp-detail__hero .camp-detail__hero-bg {
    inset: auto 50% 24px auto;
    transform: translateX(50%);
    width: min(78vw, 320px);
    height: clamp(140px, 40vw, 220px);
  }

  .camp-detail__hero .camp-detail__title { max-width: 22ch; }
  .page-content .page-content__body { max-width: 100%; }
}

/* ============================================================================
   6 · prefers-reduced-motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .camp-detail__hero .btn.btn--gold,
  .camp-detail__hero .btn.btn--gold:hover,
  .camp-detail__gallery-item,
  .camp-detail__gallery-item:hover {
    transition: none;
    transform: none;
  }
}