/**
 * kaelon-warm.css — Nueva línea visual Kaelon aprobada (Final v2)
 * Implementada: 18 junio 2026
 *
 * ALCANCE: todas las páginas Kaelon (.fe-kaelon-branch / .javier-kaelon).
 * No afecta a ninguna otra página Kaelon.
 *
 * DEPENDENCIA: cargado después de kaelon-hub.css.
 * Sobreescribe por especificidad — kaelon-hub.css NO se modifica.
 *
 * REFERENCIA VISUAL: public/warm-preview.php → variante ✦ FINAL v2
 *
 * REGLAS DE MANTENIMIENTO:
 * - No oscurecer: el nivel de luminosidad actual es el mínimo aceptable.
 * - Verde reservado solo para acciones (WhatsApp, reservas, CTA principal).
 * - El fondo verde oscuro #091612 no debe recuperarse en la HOME.
 */


/* ══════════════════════════════════════════════════════════════════════
   0. PORTADA — object-position hero
   Aprobado: 19 junio 2026
   kaelon-hub.css tiene center 36% — modelo queda recortada (tercio inferior).
   Este override mueve el ancla a center 68% sin tocar imagen ni estructura.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-home--cinematic .kaelon-hero-poster-bg {
  object-position: center 68%;
}

/* Logo ligeramente más arriba (padding-top original: clamp(2.5rem, 6vw, 4.5rem)) */
.layout-fe .fe-kaelon-home--cinematic .kaelon-hero {
  padding-top: clamp(1rem, 3vw, 2rem);
}

/* Escritorio: logo más arriba y más grande */
@media (min-width: 768px) {
  .layout-fe .fe-kaelon-home--cinematic .kaelon-hero {
    padding-top: 0.5rem;
  }

  .layout-fe .fe-kaelon-home--cinematic .kaelon-logo {
    max-width: clamp(520px, 82vw, 1020px);
    max-height: min(50svh, 480px);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   1. FONDO GENERAL
   Reemplaza background-color:#091612 de .fe-kaelon-branch solo en HOME.
   Selector: ambas clases en el mismo elemento (el <article> de index.php).
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-home.fe-kaelon-branch {
  background:
    radial-gradient(ellipse 145% 68% at 10% -2%,  rgba(238, 206, 158, 0.32) 0%, transparent 70%),
    radial-gradient(ellipse 100% 55% at 90% 10%,  rgba(224, 186, 128, 0.24) 0%, transparent 68%),
    radial-gradient(ellipse  85% 42% at 46% 44%,  rgba(208, 168, 108, 0.18) 0%, transparent 66%),
    radial-gradient(ellipse  62% 34% at 24% 78%,  rgba(192, 152,  94, 0.13) 0%, transparent 64%),
    radial-gradient(ellipse  58% 28% at 78% 92%,  rgba(168, 128,  72, 0.09) 0%, transparent 62%),
    radial-gradient(ellipse 115% 85% at 50% 52%,  transparent 42%, rgba(32, 24, 16, 0.28) 100%),
    linear-gradient(166deg, #453628 0%, #3a2e20 32%, #403224 58%, #362a1c 100%);
}


/* ══════════════════════════════════════════════════════════════════════
   2. FOTOGRAFÍAS NARRATIVAS (5 bloques + vídeo bridge)
   Marco dorado cálido. Sin cambios en la imagen ni en su filtro.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-home .kaelon-story-block__media {
  border: 1px solid rgba(195, 155, 80, 0.50);
  background: rgba(52, 38, 22, 0.20);
  box-shadow:
    0 0 0 3px rgba(195, 155, 80, 0.08),
    0 6px 22px rgba(25, 16, 8, 0.18);
  border-radius: 2px;
}

.layout-fe .fe-kaelon-home .kaelon-story-block__veil {
  background: linear-gradient(to bottom,
    rgba(45, 30, 14, 0.04) 0%,
    rgba(40, 26, 12, 0.28) 100%
  );
}

.layout-fe .fe-kaelon-home #kaelon-video-hub .kaelon-story-block__veil {
  background: linear-gradient(to bottom,
    rgba(45, 30, 14, 0.18) 0%,
    rgba(40, 26, 12, 0.50) 100%
  );
}

/* Copy entre imágenes: crema cálido (text-shadow propio garantiza legibilidad) */
.layout-fe .fe-kaelon-home .kaelon-story-block__copy {
  color: rgba(224, 212, 192, 0.90);
}

/* Preguntas: blanco cálido (mismo tono que títulos) */
.layout-fe .fe-kaelon-home .kaelon-story-block__copy--question {
  color: #f0e8d8;
}


/* ══════════════════════════════════════════════════════════════════════
   3. TARJETAS "PRÓXIMAS EXPERIENCIAS"
   Contenedores translúcidos crema. Botones de acción: sin cambios.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-home .kaelon-home-upcoming__card {
  background: rgba(200, 165, 110, 0.07);
  border-color: rgba(160, 118, 62, 0.18);
}

.layout-fe .fe-kaelon-home .kaelon-home-upcoming__media {
  background: rgba(180, 145, 95, 0.08);
}

.layout-fe .fe-kaelon-home .kaelon-home-upcoming__veil {
  background: linear-gradient(to top,
    rgba(45, 30, 14, 0.12) 0%,
    rgba(45, 30, 14, 0.02) 62%
  );
}

.layout-fe .fe-kaelon-home .kaelon-home-upcoming__title { color: #f0e8d8; }
.layout-fe .fe-kaelon-home .kaelon-home-upcoming__lead  { color: #ccc0a8; }
.layout-fe .fe-kaelon-home .kaelon-home-upcoming__name  { color: #f0e8d8; }

.layout-fe .fe-kaelon-home .kaelon-home-upcoming__meta,
.layout-fe .fe-kaelon-home .kaelon-home-upcoming__schedule {
  color: #a89878;
}

.layout-fe .fe-kaelon-home .kaelon-home-upcoming__copy  { color: #ccc0a8; }


/* ══════════════════════════════════════════════════════════════════════
   4. BLOQUE DE RESEÑAS
   Banda y tarjetas translúcidas crema. Textos retintados cálido.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-home .kaelon-home-testimonials {
  background: rgba(200, 165, 110, 0.04);
  border-top-color:    rgba(155, 115, 62, 0.13);
  border-bottom-color: rgba(155, 115, 62, 0.13);
}

.layout-fe .fe-kaelon-home .kaelon-home-testimonials__card {
  background: rgba(200, 165, 110, 0.09);
  border-color: rgba(160, 118, 62, 0.20);
}

.layout-fe .fe-kaelon-home .kaelon-home-testimonials__title  { color: #f0e8d8; }
.layout-fe .fe-kaelon-home .kaelon-home-testimonials__quote p { color: #ddd0bc; }
.layout-fe .fe-kaelon-home .kaelon-home-testimonials__name   { color: #a89880; }


/* ══════════════════════════════════════════════════════════════════════
   5. ZONA DE CIERRE — nav explorar + textos + separador
   Contenedores y textos informativos sin verde estructural.
   Hover nav: acento verde conservado como señal de interacción.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-home .fe-kaelon-close {
  border-top-color: rgba(155, 115, 62, 0.14);
}

.layout-fe .fe-kaelon-home .fe-kaelon-close__nav-link {
  background: rgba(200, 162, 105, 0.06);
  border-color: rgba(155, 115, 62, 0.22);
}

.layout-fe .fe-kaelon-home .fe-kaelon-close__nav-link:hover {
  background: rgba(190, 152, 95, 0.12);
  border-color: rgba(64, 145, 108, 0.60);
}

.layout-fe .fe-kaelon-home .fe-kaelon-close__nav-title { color: #f0e8d8; }
.layout-fe .fe-kaelon-home .fe-kaelon-close__nav-label { color: #f0e8d8; }
.layout-fe .fe-kaelon-home .fe-kaelon-close__nav-micro { color: #a89878; }
.layout-fe .fe-kaelon-home .fe-kaelon-close__kicker    { color: #c8a870; }
.layout-fe .fe-kaelon-home .fe-kaelon-close__text      { color: #ccc0a8; }


/* ══════════════════════════════════════════════════════════════════════
   6. SECCIÓN CTA DE CIERRE
   Copy informativo retintado. Ghost button en dorado.
   Botón sólido de WhatsApp/CTA: sin cambios (acción principal verde).
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-home .kaelon-home-closing__copy { color: #ccc0a8; }

/* Ghost CTA "QUIERO VIVIR LA EXPERIENCIA KAELON" */
.layout-fe .fe-kaelon-home.fe-kaelon-que--frozen .kaelon-btn-elegant--ghost {
  border-color: rgba(195, 155, 80, 0.55);
  color: #e8d8b0;
}

.layout-fe .fe-kaelon-home.fe-kaelon-que--frozen .kaelon-btn-elegant--ghost:hover {
  background: rgba(180, 145, 80, 0.12);
  border-color: rgba(195, 155, 80, 0.85);
}


/* ╔══════════════════════════════════════════════════════════════════════
   EXTENSIÓN — RESTO DE PÁGINAS KAELON
   Aprobado: 18 junio 2026. Misma línea visual Final v2.
   kaelon-hub.css y kaelon-close.css NO se modifican.
   ══════════════════════════════════════════════════════════════════════╗ */


/* ══════════════════════════════════════════════════════════════════════
   A. FONDO GLOBAL — todas las páginas Kaelon
   Especificidad 0,2,0 < HOME 0,3,0 → HOME conserva su regla exacta.
   Todas las demás páginas reciben el fondo cálido automáticamente.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-branch {
  background:
    radial-gradient(ellipse 145% 68% at 10% -2%,  rgba(238, 206, 158, 0.32) 0%, transparent 70%),
    radial-gradient(ellipse 100% 55% at 90% 10%,  rgba(224, 186, 128, 0.24) 0%, transparent 68%),
    radial-gradient(ellipse  85% 42% at 46% 44%,  rgba(208, 168, 108, 0.18) 0%, transparent 66%),
    radial-gradient(ellipse  62% 34% at 24% 78%,  rgba(192, 152,  94, 0.13) 0%, transparent 64%),
    radial-gradient(ellipse  58% 28% at 78% 92%,  rgba(168, 128,  72, 0.09) 0%, transparent 62%),
    radial-gradient(ellipse 115% 85% at 50% 52%,  transparent 42%, rgba(32, 24, 16, 0.28) 100%),
    linear-gradient(166deg, #453628 0%, #3a2e20 32%, #403224 58%, #362a1c 100%);
}


/* ══════════════════════════════════════════════════════════════════════
   B. SECCIÓN CIERRE "EXPLORAR KAELON" — todas las páginas
   kaelon-close.css usa .layout-fe .fe-kaelon-close (0,2,0).
   Aquí .layout-fe .javier-kaelon .fe-kaelon-close* (0,3,0) → gana.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .javier-kaelon .fe-kaelon-close {
  border-top-color: rgba(155, 115, 62, 0.14);
}

.layout-fe .javier-kaelon .fe-kaelon-close__nav-link {
  background: rgba(200, 162, 105, 0.06);
  border-color: rgba(155, 115, 62, 0.22);
}

.layout-fe .javier-kaelon .fe-kaelon-close__nav-link:hover {
  background: rgba(190, 152, 95, 0.12);
  border-color: rgba(64, 145, 108, 0.60);
}

.layout-fe .javier-kaelon .fe-kaelon-close__nav-title { color: #f0e8d8; }
.layout-fe .javier-kaelon .fe-kaelon-close__nav-label { color: #f0e8d8; }
.layout-fe .javier-kaelon .fe-kaelon-close__nav-micro { color: #a89878; }
.layout-fe .javier-kaelon .fe-kaelon-close__kicker    { color: #c8a870; }
.layout-fe .javier-kaelon .fe-kaelon-close__text      { color: #ccc0a8; }


/* ══════════════════════════════════════════════════════════════════════
   C. FORMACIÓN + ENCUENTROS
   Cabecera intro + kicker convocatorias + tarjetas upcoming
   (fe_kaelon_cursos_shell.php reutiliza kaelon_home_upcoming.php)
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-formacion-page .kaelon-formacion-intro__lead,
.layout-fe .fe-kaelon-encuentros-page .kaelon-formacion-intro__lead {
  color: #ccc0a8;
}

/* Kicker "Convocatorias" / "Encuentros disponibles" */
.layout-fe .fe-kaelon-formacion-page .fe-kaelon-cursos-block__kicker,
.layout-fe .fe-kaelon-encuentros-page .fe-kaelon-cursos-block__kicker {
  color: #c8a870;
}

/* Tarjetas upcoming (mismos estilos que HOME) */
.layout-fe .fe-kaelon-formacion-page .kaelon-home-upcoming__card,
.layout-fe .fe-kaelon-encuentros-page .kaelon-home-upcoming__card {
  background: rgba(200, 165, 110, 0.07);
  border-color: rgba(160, 118, 62, 0.18);
}

.layout-fe .fe-kaelon-formacion-page .kaelon-home-upcoming__media,
.layout-fe .fe-kaelon-encuentros-page .kaelon-home-upcoming__media {
  background: rgba(180, 145, 95, 0.08);
}

.layout-fe .fe-kaelon-formacion-page .kaelon-home-upcoming__veil,
.layout-fe .fe-kaelon-encuentros-page .kaelon-home-upcoming__veil {
  background: linear-gradient(to top,
    rgba(45, 30, 14, 0.12) 0%,
    rgba(45, 30, 14, 0.02) 62%
  );
}

.layout-fe .fe-kaelon-formacion-page .kaelon-home-upcoming__title,
.layout-fe .fe-kaelon-encuentros-page .kaelon-home-upcoming__title { color: #f0e8d8; }

.layout-fe .fe-kaelon-formacion-page .kaelon-home-upcoming__lead,
.layout-fe .fe-kaelon-encuentros-page .kaelon-home-upcoming__lead  { color: #ccc0a8; }

.layout-fe .fe-kaelon-formacion-page .kaelon-home-upcoming__name,
.layout-fe .fe-kaelon-encuentros-page .kaelon-home-upcoming__name  { color: #f0e8d8; }

.layout-fe .fe-kaelon-formacion-page .kaelon-home-upcoming__meta,
.layout-fe .fe-kaelon-formacion-page .kaelon-home-upcoming__schedule,
.layout-fe .fe-kaelon-encuentros-page .kaelon-home-upcoming__meta,
.layout-fe .fe-kaelon-encuentros-page .kaelon-home-upcoming__schedule { color: #a89878; }

.layout-fe .fe-kaelon-formacion-page .kaelon-home-upcoming__copy,
.layout-fe .fe-kaelon-encuentros-page .kaelon-home-upcoming__copy   { color: #ccc0a8; }


/* ══════════════════════════════════════════════════════════════════════
   D. CONTACTO
   Lead y hint de texto; label kicker.
   Botón WA y botón email: sin cambios (acciones principales).
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-contact-page .kaelon-contact__lead  { color: #ccc0a8; }
.layout-fe .fe-kaelon-contact-page .kaelon-contact__hint  { color: #a89878; }
.layout-fe .fe-kaelon-contact-page .kaelon-contact__label { color: #c8a870; }


/* ══════════════════════════════════════════════════════════════════════
   E. CONOCE A JAVIER
   Texto cuerpo, pull quote, separadores de párrafo, media vacío,
   back link. El texto sobre foto heredado de hero: sin tocar.
══════════════════════════════════════════════════════════════════════ */

/* Cuerpo narrativo y texto intro del bloque que */
.layout-fe .fe-kaelon-conoce-page .kaelon-conoce__body p,
.layout-fe .fe-kaelon-conoce-page .kaelon-conoce__intro .kaelon-que-block__text p,
.layout-fe .fe-kaelon-conoce-page .kaelon-que-block__text p {
  color: rgba(212, 196, 172, 0.90);
}

/* Pull quote superior */
.layout-fe .fe-kaelon-conoce-page .kaelon-conoce__pull {
  border-top-color: rgba(155, 115, 62, 0.22);
  color: #f0e8d8;
}

/* Separadores de párrafos internos */
.layout-fe .fe-kaelon-conoce-page .kaelon-conoce__body p:nth-child(8),
.layout-fe .fe-kaelon-conoce-page .kaelon-conoce__body p:nth-child(12) {
  border-top-color: rgba(155, 115, 62, 0.14);
}

/* Contenedor vacío de foto (estado sin imagen cargada) */
.layout-fe .fe-kaelon-conoce-page .kaelon-conoce__media--empty {
  background: rgba(52, 38, 22, 0.20);
  border-color: rgba(195, 155, 80, 0.35);
}

/* Back link → dorado en lugar de verde menta */
.layout-fe .fe-kaelon-conoce-page .kaelon-back-link {
  color: #c8a870;
  border-bottom-color: rgba(155, 115, 62, 0.35);
}

.layout-fe .fe-kaelon-conoce-page .kaelon-back-link:hover {
  color: #f0e8d8;
  border-bottom-color: rgba(195, 155, 80, 0.70);
}

/* Marco dorado en la foto de Javier (kaelon-que-block__media) */
.layout-fe .fe-kaelon-conoce-page .kaelon-que-block__media {
  border: 1px solid rgba(195, 155, 80, 0.50);
  box-shadow:
    0 0 0 3px rgba(195, 155, 80, 0.08),
    0 6px 22px rgba(25, 16, 8, 0.18);
}


/* ══════════════════════════════════════════════════════════════════════
   F. QUÉ ES KAELON (manifiesto)
   Imágenes intercaladas: marco dorado en lugar de borde verde.
   Texto de la prosa: hereda #e2e8f0 de .fe-kaelon-branch (neutral, ok).
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-que-page .kaelon-que-es-figure__img {
  border-color: rgba(195, 155, 80, 0.28);
  box-shadow:
    0 0 0 3px rgba(195, 155, 80, 0.06),
    0 12px 28px rgba(25, 16, 8, 0.18);
}

/* Texto del manifiesto: crema cálido en lugar de blanco frío heredado */
.layout-fe .fe-kaelon-que-page .kaelon-que-es-prose__copy {
  color: rgba(224, 212, 192, 0.90);
}


/* ══════════════════════════════════════════════════════════════════════
   G. EXPERIENCIAS (archivo fotográfico)
   Separador superior, título, subtítulos y back link del listado.
   Botón "Ver más": verde de acción → sin cambios.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-exp.fe-exp--home,
.layout-fe .fe-kaelon-exp.fe-exp--pagina {
  border-top-color: rgba(155, 115, 62, 0.14);
}

.layout-fe .fe-kaelon-exp .fe-exp__titulo,
.layout-fe .fe-kaelon-exp .fe-exp__titulo--home,
.layout-fe .fe-kaelon-exp.fe-exp--pagina .fe-exp__titulo {
  color: #f0e8d8;
}

.layout-fe .fe-kaelon-exp .fe-exp__sub,
.layout-fe .fe-kaelon-exp .fe-exp__lead,
.layout-fe .fe-kaelon-exp .fe-exp__kicker {
  color: #a89878;
}

/* Back link en archivo de experiencias */
.layout-fe .fe-kaelon-exp .fe-exp__volver { color: #c8a870; }


/* ══════════════════════════════════════════════════════════════════════
   H. ACTIVADORES (red de activadores)
   Textos de tarjetas y párrafos de descripción.
   Teléfono: enlace cálido en lugar de verde menta.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .javier-kaelon .kaelon-network__p         { color: #ccc0a8; }
.layout-fe .javier-kaelon .kaelon-network-card__meta { color: #a89878; }
.layout-fe .javier-kaelon .kaelon-network-card__note { color: #a89878; }

.layout-fe .javier-kaelon .kaelon-network-card__tel a       { color: #c8a870; }
.layout-fe .javier-kaelon .kaelon-network-card__tel a:hover { color: #f0e8d8; }


/* ══════════════════════════════════════════════════════════════════════
   I. BLOQUES NARRATIVOS HOME — control de altura y object-position
   Aprobado: 19 junio 2026

   BUG CORREGIDO: kaelon-hub.css tiene object-position hardcodeado
   en "center 42%" e ignora --kaelon-story-object-position.
   Esta sección activa la variable para que img_position de index.php
   sea efectivo. Afecta solo a .fe-kaelon-home.
══════════════════════════════════════════════════════════════════════ */

/* Activar variable CSS (era ignorada en hub.css, objeto tenía center 42% fijo) */
.layout-fe .fe-kaelon-home .kaelon-story-block__img,
.layout-fe .fe-kaelon-home .kaelon-story-block__video {
  object-position: var(--kaelon-story-object-position, center 42%);
}

/*
 * Desktop: stretch libre.
 * La imagen rellena la altura real del bloque (determinada por el texto).
 * Sin max-height: la foto crece tanto como el texto permita.
 * Sobreescribe la regla align-self:start que kaelon-hub.css aplica a HOME.
 */
@media (min-width: 960px) {
  .layout-fe .fe-kaelon-home .kaelon-story-block__media {
    align-self: stretch;   /* rellena la columna completa */
    aspect-ratio: unset;   /* la altura la determina el texto del bloque */
    min-height: 18rem;     /* suelo: siempre visible aunque el texto sea corto */
  }
}

/* ══════════════════════════════════════════════════════════════════════
   J. BLOQUE SIN IMAGEN — ancho completo centrado
══════════════════════════════════════════════════════════════════════ */

.layout-fe .fe-kaelon-home .kaelon-story-block--text-only {
  grid-template-columns: 1fr;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 6vw, 5rem);
  margin-bottom: clamp(2.6rem, 6vw, 4.2rem);
}

.layout-fe .fe-kaelon-home .kaelon-story-block--text-only .kaelon-story-block__text {
  max-width: 62rem;
  margin: 0 auto;
  width: 100%;
}

.layout-fe .fe-kaelon-home .kaelon-story-block--text-only .kaelon-story-block__title {
  text-align: center;
  margin-bottom: 2rem;
}

.layout-fe .fe-kaelon-home .kaelon-story-block--text-only .kaelon-story-block__body {
  column-count: 1;
}

@media (min-width: 960px) {
  .layout-fe .fe-kaelon-home .kaelon-story-block--text-only .kaelon-story-block__body {
    column-count: 2;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   K. HEADER — ocultar segunda línea del brand en móvil
   "Recupera tu frecuencia vital" es demasiado largo en pantallas pequeñas.
══════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .layout-fe .javier-brand__line:nth-child(2) {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   K. BLOQUE JAVIER-MIN — altura mínima y texto adaptado
   Aprobado: 28 junio 2026
   "Creador de Frecuencia Vital." es más largo que el texto anterior.
   min-height 0 dejaba la foto como franja y el texto se salía.
══════════════════════════════════════════════════════════════════════ */

.layout-fe .kaelon-javier-min {
  min-height: 18rem;
}

.layout-fe .kaelon-javier-min__line {
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  letter-spacing: 0.08em;
  max-width: 90%;
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (min-width: 960px) {
  .layout-fe .kaelon-javier-min__media {
    max-width: 36rem;
    max-height: 18rem;
  }
}