/* ===================================================================
   RETIRO RENACER — style.css
   Paleta y tipografías heredadas del sitio actual, para mantener la
   identidad de marca. Se va a ir extendiendo fase por fase.
   =================================================================== */

/* ---------------------------------------------------------------
   TOKENS — colores, tipografías, radios. Tocá esto y cambia todo el sitio.
   --------------------------------------------------------------- */
:root{
  --cream:       #EEECDF;
  --cream-2:     #E6E3D3;
  --paper:       #FBFAF5;
  --slate:       #67707F;
  --slate-2:     #5C6474;
  --slate-dark:  #555A6E;
  --slate-darker:#454A5A;
  --lime:        #E0FE9C;
  --lime-2:      #cdf07f;
  --magenta:     #EA28C6;
  --navy:        #4B5B75;
  --navy-2:      #3C4A61;
  --green-dark:  #1B5E4E;
  --olive:       #879621;
  --ink:         #2E3038;

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --sans:  'Poppins', 'Segoe UI', sans-serif;

  --container: 1180px;
}

/* ---------------------------------------------------------------
   RESET / BASE
   --------------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-weight:300;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; margin:0 0 .5em; color:var(--navy); }
p{ margin:0 0 1em; }
a{ color:inherit; }
ol,ul{ margin:0; padding:0; list-style:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* Foco visible para accesibilidad de teclado */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--magenta);
  outline-offset:3px;
}

.btn{
  display:inline-block;
  padding:1rem 2.1rem;
  border-radius:999px;
  font-family:var(--sans);
  font-weight:600;
  font-size:.98rem;
  text-decoration:none;
  border:2px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease;
  letter-spacing:.01em;
}
.btn:hover{ transform:translateY(-2px); }
.btn-lime{
  background:var(--lime);
  color:var(--green-dark);
  box-shadow:0 8px 22px rgba(60,74,97,.18);
}
/* CTA final ("Reservar mi lugar") — el más importante de la página,
   por eso es más grande que el resto y con un color que no se pisa
   con nada más de esta sección (magenta bien saturado, texto blanco). */
.btn-navy{
  background:var(--magenta);
  color:#fff;
  font-size:1.2rem;
  padding:1.3rem 2.8rem;
  box-shadow:0 10px 28px rgba(234,40,198,.4);
}
.btn-navy:hover{ background:#ff44da; }

/* ---------------------------------------------------------------
   PLACEHOLDERS DE IMAGEN (".ph")
   Reutilizable en todas las fases. Reserva el espacio con la
   proporción correcta (via --ar) y muestra el nombre de archivo
   sugerido + tamaño. Para reemplazar por la foto real, borrá el
   <div class="ph" ...> y poné un <img> con la misma clase que
   necesite el layout (o directamente sin clase, ocupando el 100%).
   --------------------------------------------------------------- */
.ph{
  --ar: 4/3;
  aspect-ratio: var(--ar);
  position:relative;
  width:100%;
  background:
    repeating-linear-gradient(135deg,
      rgba(75,91,117,.10) 0px, rgba(75,91,117,.10) 12px,
      rgba(75,91,117,0) 12px, rgba(75,91,117,0) 24px),
    var(--slate);
  overflow:hidden;
  border-radius:inherit;
}
.ph::after{
  content: attr(data-file) '  ·  ' attr(data-size);
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:88%;
  text-align:center;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:500;
  color:rgba(255,255,255,.85);
  background:rgba(46,48,56,.35);
  padding:.5rem .7rem;
  border-radius:8px;
  line-height:1.4;
}

/* ---------------------------------------------------------------
   BARRA DE PROGRESO
   --------------------------------------------------------------- */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--magenta); z-index:2000; transition:width .1s linear;
}

/* ---------------------------------------------------------------
   NAV
   --------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 2.4rem;
  background:rgba(46,48,56,.55);
  backdrop-filter:blur(6px);
  color:#fff;
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff; }
.brand-mark{ display:flex; color:#fff; }
.brand-text{ font-family:var(--serif); font-size:1.2rem; font-weight:600; }
.brand-text em{ font-style:italic; font-weight:500; display:block; line-height:1; margin-top:-2px; font-size:1.05rem; }
.nav-links{ display:flex; gap:1.8rem; }
.nav-links a{ text-decoration:none; color:#f1f0ea; font-size:.92rem; }
.nav-cta{
  background:var(--lime); color:var(--green-dark); padding:.6rem 1.3rem;
  border-radius:999px; text-decoration:none; font-size:.88rem; font-weight:600;
  white-space:nowrap;
}


/* ===================================================================
   FASE A — PORTADA / HERO
   =================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  margin-top:-73px;         /* compensa la altura del nav para que la imagen llegue arriba del todo */
  padding-top:73px;
  display:flex;
  flex-direction:column;    /* título y cinta apilados, no uno al lado del otro */
  justify-content:flex-end; /* empuja todo el contenido hacia abajo del hero */
  color:#fff;
  overflow:hidden;
}
.hero-ph{
  --ar: auto;
  position:absolute; inset:0;
  width:100%; height:100%;
  aspect-ratio:unset;
  border-radius:0;
}
.hero-bg{ /* clase a usar cuando reemplaces el placeholder por <img> */
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
  z-index:0;
}
.hero-veil{
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(69,74,90,.30) 0%, rgba(50,54,68,.20) 42%, rgba(30,33,44,.85) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  padding:0 2.4rem 6.5rem;
  max-width:820px;
}
.hero-eyebrow{
  font-size:1.1rem; font-weight:400; margin-bottom:.3rem; color:#f4f3ec;
  font-family:var(--serif); font-style:italic;
}
.hero h1{
  color:#fff; font-size:clamp(3.2rem,8vw,5.6rem); line-height:.95; margin-bottom:.4rem;
}
.hero h1 em{ font-style:italic; font-weight:500; }
.hero-subtitle{
  font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--lime);
  margin-bottom:.7rem;
}
.hero-dates{ font-size:1.02rem; margin-bottom:1.7rem; color:#f4f3ec; }

/* Cinta animada de palabras clave — se desliza sola, en loop, sin depender de scroll/hover */
.hero-marquee{
  position:relative;
  z-index:2;
  width:100%;
  border-top:1px solid rgba(255,255,255,.25);
  background:rgba(30,33,44,.35);
  overflow:hidden;
  padding:.75rem 0;
}
.hero-marquee-track{
  display:flex;
  gap:1.2rem;
  width:max-content;
  white-space:nowrap;
  animation: marquee 26s linear infinite;
}
.hero-marquee-track span{
  font-family:var(--serif); font-style:italic; font-size:1rem;
  color:rgba(255,255,255,.85);
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ===================================================================
   FASE A — SECCIÓN "NUESTRAS RELACIONES HOY..."
   =================================================================== */
.relaciones{
  position:relative;
  background:var(--paper);
  padding:6rem 2.4rem;
  overflow:hidden;
}

/* Palabras fantasma de fondo: son texto real (las "heridas" nombradas
   en el material), puestas grandes y traslúcidas como textura. */
.relaciones-ghost{
  position:absolute;
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  font-style:italic;
  color:var(--slate);
  opacity:.08;
  font-size:clamp(3.5rem, 11vw, 8.5rem);
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
}
.relaciones-ghost--1{ top:2%;  left:-2%; }
.relaciones-ghost--2{ top:38%; right:-4%; }
.relaciones-ghost--3{ bottom:2%; left:8%; }

.relaciones-grid{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:4rem;
  align-items:start;
}

.relaciones-intro h2{
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  line-height:1.18;
}
.relaciones-intro h2 em{
  font-style:italic; color:var(--magenta); font-weight:600;
}
.relaciones-intro p{
  color:var(--slate-darker);
  font-size:1.05rem;
  max-width:46ch;
}

.orden-card{
  background:var(--navy);
  border-radius:22px;
  padding:2.6rem 2.4rem;
  color:#fff;
}
.orden-card h3{
  color:var(--lime);
  font-size:1.4rem;
  margin-bottom:1.6rem;
}
.orden-list{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
.orden-list li{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  /* estado inicial para el reveal on-scroll (ver script.js) */
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.orden-list li.in-view{
  opacity:1;
  transform:translateY(0);
}
.orden-num{
  flex:none;
  width:2.1rem; height:2.1rem;
  border-radius:50%;
  background:var(--lime);
  color:var(--green-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:1rem;
}
.orden-list h4{
  color:#fff; font-size:1.05rem; margin-bottom:.15em;
}
.orden-list p{
  color:rgba(255,255,255,.75); font-size:.92rem; margin:0;
}


/* ===================================================================
   FASE B — SECCIÓN "QUÉ PASA CUANDO..."
   =================================================================== */
.pasa-cuando{
  position:relative;
  background:var(--ink);
  color:#fff;
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 2rem;
}
.pasa-eyebrow{
  font-family:var(--serif); font-style:italic; color:var(--lime);
  font-size:1.8rem; margin-bottom:1.6rem;
}
.pasa-list{
  position:relative;
  width:min(100%, 820px);
  display:grid;  /* todas las preguntas comparten la misma celda → la fila se ajusta sola a la más alta */
}
.pasa-item{
  grid-area: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.9rem, 5vw, 2.9rem);
  line-height:1.3;
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
}
.pasa-item.is-active{
  opacity:1;
  pointer-events:auto;
}
.pasa-dots{
  display:flex;
  gap:.55rem;
  margin-top:2.2rem;
}
.pasa-dots span{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.25);
  transition:background .3s ease;
}
.pasa-dots span.is-active{
  background:var(--lime);
}

/* ===================================================================
   FASE B — SECCIÓN "ES PARA VOS SI..."
   =================================================================== */
.para-vos{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* antes: .85fr 1.15fr */
}
.para-vos-media{ min-height:100%; }
.para-vos-img{
  width:100%; height:100%;
  object-fit:cover;
}
.para-vos-panel{
  background:var(--slate);
  color:#fff;
  padding:4rem 3.4rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.para-vos-panel h2{ color:#fff; font-size:2rem; margin-bottom:1.4rem; }
.para-vos-panel h3{ color:var(--lime); font-size:1.1rem; margin:1.8rem 0 1rem; font-style:italic; font-family:var(--serif); font-weight:500; }
.para-vos-col{ display:flex; flex-direction:column; gap:.85rem; }
.para-vos-col li{
  position:relative;
  padding-left:1.4rem;
  font-size:1rem;
  color:#f1f0ea;
}
.para-vos-col li::before{
  content:'';
  position:absolute; left:0; top:.6em;
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.5);
}
.para-vos-col--lime li::before{ background:var(--lime); }

@media (min-width: 901px){
  .para-vos-media{
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slate);
  }
  .para-vos-img{
    height: 520px;
    width: 480px;
    max-width: 100%;
  }

  .para-vos-panel:nth-child(1){
    grid-column: 2;
    grid-row: 1;
  }
  .para-vos-media:nth-child(2){
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-end;
  }
  .para-vos-media:nth-child(4){
    justify-content: flex-start;
  }

  .para-vos-panel:nth-child(3){
    align-items: flex-end;   /* el h2 y los bullets dejan de estirarse a todo el ancho, y se pegan al borde derecho */
    text-align: right;
    padding-left: 3.4rem;    /* volvemos al padding original de la base */
    padding-right: 4rem;     /* un respiro antes de la foto */
  }
  .para-vos-panel:nth-child(3) .para-vos-col{
    text-align: left;        /* pero los bullets, puertas adentro de su bloque, se leen mejor alineados a la izquierda */
  }
}

/* ===================================================================
   FASE C — CARRUSEL ("Qué vas a vivir?" x2, y se reutiliza en testimonios)
   =================================================================== */
.vivir{
  background:var(--cream);
  padding:5rem 0;
}
.vivir--dark{
  background:var(--slate-dark);
}
.vivir--dark .carousel-eyebrow{ color:var(--lime); }
.vivir--dark h2{ color:#fff; }

.carousel{
  max-width:var(--container);
  margin:0 auto;
  padding:0 2rem;
}
.carousel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:2rem;
}
.carousel-eyebrow{
  font-family:var(--serif); font-style:italic; color:var(--olive);
  font-size:1.5rem; margin-bottom:.3rem;
}
.carousel-head h2{ margin:0; font-size:2rem; }
.carousel-controls{ display:flex; gap:.6rem; flex:none; }
.carousel-btn{
  width:2.6rem; height:2.6rem;
  border-radius:50%;
  border:1.5px solid var(--slate);
  background:transparent;
  color:var(--navy);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.carousel-btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.carousel--dark .carousel-btn{ border-color:rgba(255,255,255,.4); color:#fff; }
.carousel--dark .carousel-btn:hover{ background:var(--lime); color:var(--green-dark); border-color:var(--lime); }

.carousel-track{
  display:flex;
  gap:1.3rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:.6rem;
  /* oculta la scrollbar fea, el snap + los botones ya alcanzan para navegar */
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }

.carousel-card{
  flex:0 0 auto;
  width:320px;
  scroll-snap-align:start;
}
.carousel-card .ph{ border-radius:16px; margin-bottom:.9rem; }
.carousel-img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:.9rem;
}
.carousel-card h3{
  font-family:var(--sans); font-weight:600; font-size:1rem;
  color:var(--navy); margin:0; line-height:1.35;
}
.carousel--dark .carousel-card h3{ color:var(--cream); }


/* ===================================================================
   FASE C — DEEP DIVE (Constelaciones / Yoga / Sanación)
   =================================================================== */
.deep{ background:var(--paper); padding:1rem 0; }
.deep-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  max-width:var(--container);
  margin:0 auto;
  /* estado inicial del reveal on-scroll */
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
.deep-item.in-view{ opacity:1; transform:translateY(0); }
.deep-item.reverse{ direction:rtl; }
.deep-item.reverse > *{ direction:ltr; }
.deep-media{ min-height:100%; }
.deep-media .ph{ height:100%; min-height:340px; }
.deep-img{
  display:block;
  width:100%; height:100%;
  min-height:340px;
  object-fit:cover;
}
.deep-copy{ padding:3.2rem 3.4rem; display:flex; flex-direction:column; justify-content:center; }
.deep-copy h2{ font-size:2rem; }
.deep-copy p{ color:var(--slate-darker); }
.deep-copy .btn{ align-self:flex-start; margin-top:.6rem; }


/* ===================================================================
   FASE G (adelantada) — PRECIO + FORMULARIO DE LEADS
   =================================================================== */
.pago{
  background:var(--slate-dark);
  padding:5.5rem 2rem;
  text-align:center;
}
.pago-head h2{ color:#fff; font-size:2.3rem; margin-bottom:.5rem; }
.pago-head p{ color:#e3e1d5; margin-bottom:2.6rem; }

/* ---- Form ---- */
.lead-gate{
  max-width:560px;
  margin:0 auto;
}
.lead-form{
  background:#fff;
  border-radius:22px;
  padding:2.2rem 2rem;
  text-align:left;
}
.lead-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1rem;
}
.lead-field label{
  display:block;
  font-size:.82rem;
  font-weight:500;
  color:var(--slate-2);
  margin-bottom:.35rem;
}
.lead-field input{
  width:100%;
  padding:.75rem .9rem;
  border-radius:10px;
  border:1.5px solid var(--cream-2);
  background:var(--paper);
  font-family:var(--sans);
  font-size:.98rem;
  color:var(--ink);
  transition:border-color .2s ease;
}
.lead-field input:focus{
  outline:none;
  border-color:var(--navy);
}
.lead-field input.invalid{
  border-color:var(--magenta);
}
/* honeypot: oculto para personas, sigue "visible" para los bots que ignoran CSS */
.lead-hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
.lead-error{
  color:var(--magenta);
  font-size:.88rem;
  font-weight:500;
  margin:0 0 1rem;
}
.lead-form .btn{
  width:100%;
  border:none;
  cursor:pointer;
  text-align:center;
  font-size:1rem;
}
.lead-form .btn:disabled{
  opacity:.7;
  cursor:default;
  transform:none;
}

/* ---- Precio (revelado) ---- */
.pago-reveal{
  animation: fadeIn .5s ease;
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.pago-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.8rem;
  max-width:900px;
  margin:0 auto 2.4rem;
}
.pago-card{
  background:var(--lime);
  border-radius:22px;
  padding:2.4rem 2rem;
  text-align:center;
}
.pago-badge{
  display:inline-block;
  background:var(--slate-darker);
  color:var(--lime);
  padding:.35rem .9rem;
  border-radius:999px;
  font-size:1.6rem;
  font-weight:600;
  margin-bottom:1.2rem;
}
.pago-card h3{
  color:var(--navy-2);
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:1.3rem;
}
.precio{
  font-family:var(--serif);
  font-size:2.4rem;
  font-weight:700;
  color:var(--magenta);
  margin-bottom:.2rem;
}
.precio span{
  font-size:1rem;
  font-weight:400;
  color:var(--slate-darker);
  font-family:var(--sans);
}
.precio-navy{ color:var(--navy-2); }
.pago-detail{ font-size:1.5rem; color:var(--slate-darker); font-weight:500; }
.pago-divider{ height:1px; background:rgba(59,62,45,.25); margin:1.4rem auto; width:70%; }
.pago-note{ font-size:1.5rem; color:var(--magenta); font-weight:500; margin-top:.8rem; }
.pago-footnote{ color:#d8d6c9; font-size:.82rem; margin-top:1.4rem; }


/* ===================================================================
   ENCABEZADOS DE SECCIÓN GENÉRICOS (reutilizable en Fase D en adelante)
   =================================================================== */
.section-head{
  text-align:center;
  max-width:620px;
  margin:0 auto 3rem;
  padding:0 1.5rem;
}
.section-head h2{ font-size:2.3rem; }
.section-head-italic{
  font-family:var(--serif); font-style:italic; color:var(--olive);
  font-size:1.5rem; margin-bottom:.8rem;
}
.section-head--light h2{ color:#fff; }
.section-head--light .section-head-italic{ color:var(--lime); }


/* ===================================================================
   FASE D — SECCIÓN "CASA ESPACIO BRANDSEN"
   =================================================================== */
.casa{
  background:var(--slate);
  padding:5.5rem 2rem;
}
.casa-lead{
  color:#f1f0ea;
  max-width:480px;
  margin:0 auto;
}
.casa-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:220px;
  gap:.6rem;
  max-width:var(--container);
  margin:0 auto;
}
.casa-photo{
  overflow:hidden;
  border-radius:10px;
}
.casa-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.casa-photo:hover .casa-img{ transform:scale(1.06); }


/* ===================================================================
   FASE D — SECCIÓN "EQUIPO"
   =================================================================== */
.equipo{
  padding:5.5rem 2rem;
  background:var(--cream);
}
.equipo-grid{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:2.4rem;
  max-width:1000px;
  margin:0 auto;
}
.persona{
  width:300px;         /* antes 260px — un poco más de ancho */
  text-align:center;
}
.persona-img{
  width:170px; height:210px; /* antes 170px */
  object-fit:cover;
  border-radius:50%;
  margin:0 auto 1.1rem;
  border:4px solid #fff;
  box-shadow:0 10px 24px rgba(85,90,110,.22);
  display:block;
}
.persona:nth-child(1) .persona-img{
  object-position: 50% 10%;
}
.persona:nth-child(2) .persona-img{
  object-position: 50% 10%;
}
/*
.persona:nth-child(3) .persona-img{
  object-fit: contain;
  background: var(--cream); /* rellena el espacio que quede vacío, si el recorte no es cuadrado /
}
*/
.persona h3{ font-size:1.4rem; margin-bottom:.4rem; } /* antes 1.2 */
.persona p{ font-size:1.02rem; color:var(--slate-2); margin:0 0 .6rem; } /* antes .92rem */
.persona-ig{
  font-size:.85rem;
  color:var(--magenta);
  text-decoration:none;
  border-bottom:1px solid var(--magenta);
  padding-bottom:1px;
}


/* ===================================================================
   FASE E — SECCIÓN "TESTIMONIOS"
   =================================================================== */
.testimonios{
  background:var(--slate-darker);
  padding:5.5rem 0;
}
.testi-card{
  width:340px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:1.8rem 1.6rem;
}
.testi-card blockquote{
  margin:0 0 1.1rem;
  color:#f2f1ec;
  font-size:.95rem;
  font-style:italic;
  line-height:1.55;
}
.testi-name{
  color:var(--lime);
  font-size:.85rem;
  font-weight:600;
  margin:0;
}
.testi-name span{
  color:rgba(255,255,255,.55);
  font-weight:400;
}
.testi-video-cta{
  text-align:center;
  margin-top:2.4rem;
}

/* ===================================================================
   FASE F — SECCIÓN "QUÉ INCLUYE EL VALOR DEL RETIRO?"
   =================================================================== */
.incluye{
  background:var(--paper);
  padding:5.5rem 2rem;
  text-align:center;
}
.incluye-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.6rem;
  max-width:var(--container);
  margin:0 auto 2.2rem;
}
/*
.incluye-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--lime);
  font-size:1.7rem;
  margin-bottom:1rem;
}
*/
.incluye-icon{
  display:inline-block;
  /*width:64px;*/
  height:128px;
  margin-bottom:1rem;
}
.incluye-item h3{ font-size:1.15rem; color:var(--olive); margin-bottom:.35em; }
.incluye-item p{ color:var(--slate-darker); font-size:.95rem; margin:0; }
.incluye-note{
  font-size:.9rem;
  color:var(--slate-2);
  font-style:italic;
  max-width:520px;
  margin:0 auto;
}


/* ===================================================================
   FASE H — SECCIÓN "ESTO NO TERMINA CON EL RETIRO..." (BONOS)
   =================================================================== */
.continua{
  background:var(--paper);
  padding:5.5rem 2rem;
}
.continua-copy{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.continua-lead{ font-weight:500; color:var(--navy); }
.continua-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin:0 0 2rem;
  text-align:left;
}
.continua-list li{ color:var(--slate-darker); font-size:.98rem; }
.continua-list strong{ color:var(--olive); }


/* ===================================================================
   FASE H — SECCIÓN "PREGUNTAS FRECUENTES"
   =================================================================== */
.faq{
  background:var(--cream);
  padding:5.5rem 2rem;
}
.faq-list{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.faq-list details{
  background:#fff;
  border-radius:14px;
  padding:1.1rem 1.5rem;
  box-shadow:0 6px 18px rgba(85,90,110,.08);
}
.faq-list summary{
  cursor:pointer;
  font-family:var(--serif);
  font-weight:600;
  color:var(--navy);
  font-size:1.05rem;
  list-style:none;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:'+'; float:right; color:var(--magenta); font-size:1.3rem; }
.faq-list details[open] summary::after{ content:'\2212'; }
.faq-list details p{ margin:.9rem 0 0; color:var(--slate-darker); }
.faq-list details a{ color:var(--magenta); font-weight:600; }


/* ===================================================================
   FASE H — CIERRE (foto grupal + CTA final)
   =================================================================== */
/*
.cierre{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
*/
.cierre{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.cierre-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.cierre-overlay{
  position:absolute; inset:0;
  z-index:1;
  background:rgba(40,44,40,.5);
}
.cierre-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:#fff;
  padding:2rem;
}
.cierre-eyebrow{ font-family:var(--serif); font-style:italic; font-size:1.8rem; margin-bottom:1.6rem; }
.cierre-content h2{ color:#fff; font-size:clamp(2rem,5vw,3rem); margin-top:1.8rem; }


/* ---------------------------------------------------------------
   FOOTER (provisorio — se va a enriquecer en fase H)
   --------------------------------------------------------------- */
.site-footer{
  background:var(--slate-darker); color:#cfcdc0; text-align:center;
  padding:2.2rem 1.5rem; font-size:.85rem;
}
.site-footer a{ color:var(--lime); text-decoration:none; }


/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 900px){
  .relaciones-grid{ grid-template-columns:1fr; gap:2.8rem; }
  .relaciones-ghost{ opacity:.06; }

  .nav-links{ display:none; }  /* con una sola sección más no vale la pena un menú hamburguesa todavía */

  .para-vos{ grid-template-columns:1fr; }
  .para-vos-media .ph{ --ar:16/9; }

  .deep-item, .deep-item.reverse{ grid-template-columns:1fr; direction:ltr; }
  .deep-media .ph{ min-height:260px; }

  .pago-grid{ grid-template-columns:1fr; }

  .casa-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }

  .incluye-grid{ grid-template-columns:1fr; gap:2rem; max-width:340px; }

  .continua{ padding:4rem 1.2rem; }
  .faq{ padding:4rem 1.2rem; }
  .faq-list summary{ font-size:1rem; }
  /*
  .cierre{
    align-items:flex-end;
  }
  .cierre-content{
    padding:2rem 2rem 2rem;
  }
  */
  .cierre{
    align-items:stretch;   /* deja que el contenido ocupe todo el alto de la sección */
  }
  .cierre-content{
    display:flex;
    flex-direction:column;
    justify-content:space-between;  /* empuja un bloque arriba y el otro abajo */
    align-items:center;
    padding:4rem 2rem 5rem;
  }
}

@media (max-width: 560px){
  .nav{ padding:.8rem 1.2rem; }
  .hero-content{ padding:0 1.4rem 3.4rem; }
  .relaciones{ padding:4.5rem 1.4rem; }
  .orden-card{ padding:2rem 1.6rem; }

  .pasa-cuando{ padding:4rem 1.4rem; }
  .para-vos-panel{ padding:2.6rem 1.6rem; }

  .carousel{ padding:0 1.4rem; }
  .carousel-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .carousel-card{ width:250px; }
  .testi-card{ width:260px; }
  .deep-copy{ padding:2.4rem 1.6rem; }

  .pago{ padding:4rem 1.2rem; }
  .lead-row{ grid-template-columns:1fr; }
  .lead-form{ padding:1.8rem 1.4rem; }

  .casa{ padding:4rem 1.2rem; }
  .casa-gallery{ grid-template-columns:1fr; }
}


/* Fin del stylesheet — todas las fases (A a H) están construidas. */