/* ═══════════════════════════════════════════════════════
   Ensō Universe · style.css · Mobile-first
   Breakpoints: 480px · 768px · 900px · 1100px
═══════════════════════════════════════════════════════ */

:root {
  --sand:     #f5f0e8;
  --linen:    #ede7d9;
  --terra:    #8b6b4a;
  --sage:     #7a8c7e;
  --charcoal: #2c2925;
  --mist:     #ddd6c8;
  --white:    #fdfaf5;
  --accent:   #a0764e;
  --eg:       #4a6b58;
  --eg-mid:   #6b8c78;
  --eg-pale:  #e8f0eb;
  --eg-dark:  #2a3d31;
  --eg-deep:  #1c2a22;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:'Jost', sans-serif;
  background:var(--sand);
  color:var(--charcoal);
  font-weight:300;
  overflow-x:hidden;
  font-size:16px;
  line-height:1.6;
}

body::after {
  content:''; position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9999; opacity:0.4;
}

img { max-width:100%; height:auto; display:block; }
a { color:inherit; }

/* ─── HEADER ─── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
  background:rgba(245,240,232,0.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
  transition:padding .4s, border-color .4s;
}
.site-header.scrolled { border-color:var(--mist); }

.logo-link { display:inline-flex; align-items:center; text-decoration:none; }
.logo-img { height:30px; width:auto; }

.header-cta {
  font-family:'Jost', sans-serif;
  font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--eg); border:1.5px solid var(--eg);
  padding:9px 18px; text-decoration:none;
  transition:background .25s, color .25s;
  white-space:nowrap;
}
.header-cta:hover,
.header-cta:focus { background:var(--eg); color:var(--white); outline:none; }

/* ─── HERO ─── */
.hero {
  min-height:100svh;
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  background:var(--eg-deep);
  padding-top:70px; /* header height */
}

.hero-img {
  position:absolute; inset:0;
  background-image: url('img/Enso-universe-retiros-hero.jpg');
  background-size:cover; background-position:center 35%;
  opacity:.55; filter:saturate(.85) brightness(.9);
}

.hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to top,  rgba(26,42,33,.96) 0%, rgba(26,42,33,.3) 55%, transparent 100%),
    linear-gradient(to right, rgba(26,42,33,.8) 0%, transparent 70%);
}

.hero-o {
  display:none; /* oculto en móvil */
}

.hero-body {
  position:relative; z-index:2;
  padding:40px 20px 64px;
  width:100%;
}

.hero-eyebrow {
  font-size:10px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--eg-mid); margin-bottom:18px;
  display:flex; align-items:center; gap:12px;
  opacity:0; animation:fadeUp .8s .2s ease forwards;
}
.hero-eyebrow::before {
  content:''; width:24px; height:1px;
  background:var(--eg-mid); flex-shrink:0;
}

.hero-h1 {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(44px,12vw,100px);
  font-weight:300; line-height:1.05;
  color:var(--white); margin-bottom:0;
  opacity:0; animation:fadeUp .9s .35s ease forwards;
}
.hero-h1 em { font-style:italic; color:rgba(107,140,120,.9); }

.hero-rule {
  width:40px; height:1px; background:var(--eg-mid);
  margin:24px 0; display:block;
  opacity:0; animation:fadeIn .8s .7s ease forwards;
}

.hero-lead {
  font-size:clamp(14px,3.5vw,17px); line-height:1.85;
  color:rgba(253,250,245,.7); max-width:540px;
  margin-bottom:36px;
  opacity:0; animation:fadeUp .8s .85s ease forwards;
}
.hero-lead strong { color:rgba(253,250,245,.9); font-weight:400; }

.hero-btns {
  display:flex; flex-direction:column; gap:14px;
  opacity:0; animation:fadeUp .8s 1.05s ease forwards;
}

.btn-enso {
  font-family:'Jost', sans-serif;
  font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--eg-deep); background:var(--eg-mid);
  padding:16px 36px; text-decoration:none;
  display:inline-block; text-align:center;
  transition:background .25s, transform .2s;
}
.btn-enso:hover { background:rgba(107,140,120,1); transform:translateY(-1px); }

.btn-ghost-enso {
  font-family:'Jost', sans-serif;
  font-size:11px; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(253,250,245,.65); text-decoration:none;
  border-bottom:1px solid rgba(107,140,120,.4);
  padding-bottom:2px; display:inline-block;
  transition:color .25s, border-color .25s;
}
.btn-ghost-enso:hover { color:var(--eg-mid); border-color:var(--eg-mid); }

/* ─── SECCIONES BASE ─── */
.section { padding:72px 20px; }
.section-linen { background:var(--linen); }
.section-dark { background:var(--eg-deep); }
.section-inner { max-width:1200px; margin:0 auto; }

.section-tag {
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--eg); margin-bottom:18px; display:block;
}
.section-tag--light { color:var(--eg-mid); }

.section-h2 {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(32px,8vw,56px);
  font-weight:300; line-height:1.2;
  color:var(--charcoal); margin-bottom:24px;
}
.section-h2--light { color:var(--white); }
.section-h2 em { font-style:italic; color:var(--eg); }
.section-h2--light em { color:var(--eg-mid); }

.section-p {
  font-size:clamp(14px,3.5vw,16px); line-height:1.9;
  color:rgba(44,41,37,.72); margin-bottom:18px;
}
.section-p--light { color:rgba(253,250,245,.65); }

/* ─── INTRO ─── */
.intro-grid {
  display:grid; gap:40px;
}
.intro-visual {
  display:flex; justify-content:center; align-items:center;
}
.intro-img-wrap {
  width:100%; overflow:hidden; border-radius:2px;
  aspect-ratio:4/3;
}
.intro-img {
  width:100%; height:100%; object-fit:cover;
  display:block;
}

/* ─── PILARES ─── */
.pilares-grid {
  display:grid; gap:36px;
  margin-top:48px;
}
.pilar {
  border-top:1px solid rgba(107,140,120,.25);
  padding-top:28px;
}
.pilar-num {
  font-family:'Cormorant Garamond', serif;
  font-size:36px; font-weight:300; font-style:italic;
  color:rgba(107,140,120,.35); line-height:1; margin-bottom:12px;
}
.pilar-title {
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--eg-mid); margin-bottom:12px;
}
.pilar-text {
  font-size:14.5px; line-height:1.8;
  color:rgba(253,250,245,.62);
}

/* ─── EXPERIENCIA ─── */
.experiencia-grid {
  display:grid; gap:48px;
}
.experiencia-img-wrap {
  overflow:hidden; border-radius:2px;
  aspect-ratio:3/4;
}
.experiencia-img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block;
}
.exp-cards {
  display:grid; gap:2px; margin-top:40px;
}
.exp-card {
  background:var(--eg-deep); padding:36px 28px;
  position:relative; overflow:hidden;
}
.exp-card:nth-child(even) { background:var(--eg-dark); }
.exp-card-num {
  font-family:'Cormorant Garamond', serif;
  font-size:60px; font-weight:300; font-style:italic;
  color:rgba(107,140,120,.1); line-height:1;
  position:absolute; top:16px; right:16px;
}
.exp-card-icon { font-size:22px; margin-bottom:18px; }
.exp-card-title {
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--eg-mid); margin-bottom:12px;
}
.exp-card-text {
  font-size:14px; line-height:1.75;
  color:rgba(253,250,245,.58);
}

/* ─── DESTINO ─── */
.destino-grid { display:grid; gap:40px; }
.destino-img-wrap {
  position:relative; aspect-ratio:4/3; overflow:hidden;
}
.destino-img-real {
  width:100%; height:100%; object-fit:cover; display:block;
}
.destino-img-tag {
  position:absolute; bottom:20px; left:20px;
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--white); background:rgba(26,42,33,.85);
  padding:8px 14px;
}

/* ─── LISTA DE ESPERA ─── */
.espera {
  background:var(--eg-deep);
  padding:80px 20px;
  text-align:center;
  position:relative; overflow:hidden;
}
.espera-bg-o {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(320px,80vw);
  filter:invert(1) brightness(1) opacity(.04);
  pointer-events:none;
}
.espera-inner { position:relative; z-index:2; max-width:560px; margin:0 auto; }

.espera-h2 {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(36px,10vw,72px);
  font-weight:300; line-height:1.1;
  color:var(--white); margin-bottom:20px;
}
.espera-h2 em { font-style:italic; color:var(--eg-mid); }

.espera-p {
  font-size:clamp(14px,3.5vw,16px); line-height:1.85;
  color:rgba(253,250,245,.62); margin-bottom:40px;
}

.form-espera {
  display:flex; flex-direction:column; gap:0;
  max-width:440px; margin:0 auto;
}
.form-espera input {
  width:100%;
  background:rgba(253,250,245,.08);
  border:1px solid rgba(107,140,120,.3);
  border-bottom:none;
  padding:15px 18px;
  font-family:'Jost', sans-serif;
  font-size:14px; font-weight:300;
  color:var(--white); outline:none;
  transition:border-color .25s;
  -webkit-appearance:none;
}
.form-espera input::placeholder { color:rgba(253,250,245,.35); }
.form-espera input:focus { border-color:var(--eg-mid); }
.form-espera button {
  background:var(--eg-mid);
  border:none; padding:15px 28px;
  font-family:'Jost', sans-serif;
  font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--eg-deep); cursor:pointer;
  transition:background .25s;
  width:100%;
}
.form-espera button:hover { background:rgba(107,140,120,1); }

.espera-nota {
  font-size:11px; letter-spacing:.03em;
  color:rgba(107,140,120,.5); margin-top:18px;
}

/* ─── JAVIER ─── */
.javier-grid { display:grid; gap:40px; }
.javier-img-wrap {
  aspect-ratio:4/3; overflow:hidden;
}
.javier-img-real {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block;
}
.javier-firma {
  font-family:'Cormorant Garamond', serif;
  font-size:26px; font-weight:300; font-style:italic;
  color:var(--eg); margin-top:28px;
}

/* ─── FOOTER ─── */
.site-footer {
  background:var(--charcoal);
  padding:48px 20px 36px;
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  display:grid; gap:36px;
}
.footer-logo-img {
  height:26px; width:auto;
  filter:invert(1) brightness(1.8);
  opacity:.75;
}
.footer-tagline {
  font-size:11px; font-weight:300; letter-spacing:.05em;
  color:rgba(253,250,245,.38); margin-top:10px;
}
.footer-nav {
  display:flex; flex-wrap:wrap; gap:10px 24px;
}
.footer-nav a {
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(253,250,245,.42); text-decoration:none;
  transition:color .25s;
}
.footer-nav a:hover { color:var(--eg-mid); }
.footer-jbt {
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(253,250,245,.32); text-decoration:none;
  transition:color .25s;
}
.footer-jbt:hover { color:var(--eg-mid); }
.footer-copy {
  font-size:10px; color:rgba(253,250,245,.22);
  letter-spacing:.03em;
  border-top:1px solid rgba(253,250,245,.06);
  padding-top:28px; margin-top:8px;
}

/* ─── ANIMACIONES ─── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ══════════════════════════════════════════════════════
   BREAKPOINT 480px — Móviles medianos
══════════════════════════════════════════════════════ */
@media (min-width:480px) {
  .site-header { padding:20px 28px; }
  .logo-img { height:32px; }
  .hero-body { padding:40px 28px 72px; }
  .hero-btns { flex-direction:row; align-items:center; }
  .btn-enso { text-align:left; }
  .section { padding:80px 28px; }
  .espera { padding:88px 28px; }
  .form-espera { flex-direction:row; }
  .form-espera input { border-bottom:1px solid rgba(107,140,120,.3); border-right:none; }
  .form-espera button { width:auto; }
  .site-footer { padding:56px 28px 40px; }
}

/* ══════════════════════════════════════════════════════
   BREAKPOINT 768px — Tablets y móviles grandes
══════════════════════════════════════════════════════ */
@media (min-width:768px) {
  .site-header { padding:22px 44px; }
  .logo-img { height:34px; }
  .header-cta { font-size:10.5px; padding:10px 22px; }

  .hero-body { padding:48px 44px 80px; max-width:700px; }
  .hero-o {
    display:block;
    position:absolute; right:5%; top:50%; transform:translateY(-50%);
    width:min(280px,30vw); aspect-ratio:400/513;
    opacity:0; animation:fadeIn 2s .6s ease forwards;
    pointer-events:none;
  }
  .hero-o img {
    width:100%; height:100%; object-fit:contain;
    filter:invert(1) brightness(1.8) opacity(.14);
  }

  .section { padding:100px 44px; }
  .intro-grid { grid-template-columns:1fr 1fr; align-items:center; gap:56px; }
  .intro-visual { order:unset; }

  .pilares-grid { grid-template-columns:1fr 1fr; gap:40px; }
  .proceso-grid { grid-template-columns:1fr 1fr 1fr; }

  .exp-cards { grid-template-columns:1fr 1fr 1fr; }
  .exp-card { padding:40px 32px; }

  .destino-grid { grid-template-columns:1fr 1fr; align-items:center; gap:56px; }
  .destino-img-wrap { aspect-ratio:4/5; }

  .experiencia-grid { grid-template-columns:1fr 1fr; align-items:center; gap:56px; }
  .experiencia-img-wrap { aspect-ratio:4/3; }

  .javier-grid { grid-template-columns:1fr 2fr; align-items:center; gap:56px; }
  .javier-img-wrap { aspect-ratio:3/4; }

  .espera { padding:112px 44px; }
  .espera-bg-o { width:min(440px,60vw); }

  .footer-inner { grid-template-columns:1fr 1fr 1fr; align-items:start; }
  .footer-nav { flex-direction:column; gap:10px; }
  .site-footer { padding:64px 44px 48px; }
}

/* ══════════════════════════════════════════════════════
   BREAKPOINT 900px — Tablets landscape / desktop pequeño
══════════════════════════════════════════════════════ */
@media (min-width:900px) {
  .site-header { padding:24px 60px; }
  .logo-img { height:36px; }
  .header-cta { font-size:10.5px; padding:10px 26px; }

  .hero-body { max-width:800px; padding:0 60px 88px; }
  .hero-o { width:min(360px,36vw); }

  .section { padding:120px 60px; }
  .espera { padding:128px 60px; }
  .site-footer { padding:72px 60px 52px; }
}

/* ══════════════════════════════════════════════════════
   BREAKPOINT 1100px — Desktop
══════════════════════════════════════════════════════ */
@media (min-width:1100px) {
  .hero-o { width:min(440px,40vw); }
  .hero-o img { filter:invert(1) brightness(1.8) opacity(.17); }
  .pilares-grid { grid-template-columns:repeat(4,1fr); }
  .proceso-grid { grid-template-columns:repeat(4,1fr); }
  .espera-bg-o { width:min(560px,50vw); }
}

/* ══════════════════════════════════════════════════════
   CHECKBOX PRIVACIDAD — formulario lista de espera
══════════════════════════════════════════════════════ */
.espera-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px auto 0;
  max-width: 460px;
  cursor: pointer;
}
.espera-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--eg);
  cursor: pointer;
}
.espera-consent span {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(253,250,245,.5);
  text-align: left;
}
.espera-consent a {
  color: var(--eg-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════════════════
   BANNER DE COOKIES
══════════════════════════════════════════════════════ */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a2820;
  border-top: 1px solid rgba(107,140,114,.25);
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: slideUp .35s ease;
}
#cookie-banner[hidden] { display: none; }
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.cookie-banner__text {
  font-size: 13px;
  color: rgba(253,250,245,.65);
  line-height: 1.65;
  margin: 0;
}
.cookie-banner__text a {
  color: var(--eg-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-btn {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
  border: none;
}
.cookie-btn--primary {
  background: var(--eg);
  color: #fdfaf5;
}
.cookie-btn--primary:hover { background: #5a7860; }
.cookie-btn--secondary {
  background: transparent;
  color: rgba(253,250,245,.55);
  border: 1px solid rgba(107,140,114,.3);
}
.cookie-btn--secondary:hover {
  border-color: var(--eg-light);
  color: var(--eg-light);
}

@media (min-width: 640px) {
  #cookie-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
  }
  .cookie-banner__text { max-width: 600px; }
}
@media (min-width: 900px) {
  #cookie-banner { padding: 18px 60px; }
}