/* ============================================================
   VITA · fixes.css — correcciones segunda entrega (v0.4.0)
   Cargado el último: legibilidad contacto, manifiesto centrado,
   acordeón de normas, mapa real y revisión móvil completa.
   ============================================================ */

/* ------------------------------------------------------------
   CONTACTO · legibilidad sobre fondo claro
   (.ct2-h y .ct2-card-head h3 venían en blanco del diseño oscuro)
   ------------------------------------------------------------ */
.ct2-h { color: var(--concrete); }
.ct2-card-head h3 { color: var(--green); }
.ct2-seg button:hover { color: var(--green); }

/* CONTACTO · mapa real (Google Maps embebido por estudio) */
.ct2-map { background: var(--lavender); }
.ct2-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------
   HOME · manifiesto (01–05) centrado, en desktop y móvil
   ------------------------------------------------------------ */
.v6mani2-grid { justify-items: center; }
.v6mani2-cell { text-align: center; width: 100%; }

/* ------------------------------------------------------------
   PRECIOS · «Todo lo que debes saber» (acordeón)
   ------------------------------------------------------------ */
.rules { padding-bottom: clamp(50px, 7vw, 90px); }
.rules .fnd-head { margin-bottom: 0; }
.rules-lead { margin: 14px auto 0; color: var(--w-75); font-size: 15.5px; line-height: 1.6; max-width: 52ch; }
.rules-acc { max-width: 880px; margin: 36px auto 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--bg-2); }
.rules-item + .rules-item { border-top: 1px solid var(--line); }
.rules-item summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px clamp(18px, 3vw, 28px); cursor: pointer; list-style: none; text-align: left; }
.rules-item summary::-webkit-details-marker { display: none; }
.rules-num { color: var(--green-mid); font-size: 1.05rem; }
.rules-title { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--concrete); transition: color .25s; }
.rules-item summary:hover .rules-title { color: var(--green); }
.rules-chev { color: var(--green-mid); display: grid; place-items: center; transition: transform .35s var(--eo); }
.rules-item[open] .rules-chev { transform: rotate(45deg); }
.rules-text { margin: 0; padding: 0 clamp(18px, 3vw, 28px) 20px 0; padding-left: calc(clamp(18px, 3vw, 28px) + 34px); color: var(--w-75); font-size: 14.5px; line-height: 1.65; }

/* ============================================================
   MÓVIL · revisión completa (el 80% del tráfico)
   ============================================================ */

/* ---- Header: sin solapes. El subtítulo del logo y el selector
   de idioma del top bar se ocultan en pantallas pequeñas (el
   idioma sigue disponible dentro del menú desplegable). ---- */
@media (max-width: 860px) {
  .nav-right .lang { display: none; }
  .sheet .lang { display: inline-flex; }
}
/* Header móvil: LOGO PROTAGONISTA centrado, con el burger a la izquierda y
   RESERVAR a la derecha — el header se llena y el logo manda. */
@media (max-width: 700px) {
  .nav-in { position: relative; min-height: 52px; padding-block: 15px; gap: 0; }
  /* logo grande y centrado; subtítulo en una línea bajo la marca */
  .nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    flex-direction: column; gap: 5px; align-items: center; text-align: center; }
  .nav-logo img { height: 42px; }
  .nav-logo .nl-sub { display: block; border-left: none; padding-left: 0;
    font-size: 7.5px; letter-spacing: .18em; line-height: 1; color: var(--w-60); }
  .nav-logo .nl-sub br { display: none; }
  /* burger anclado a la izquierda (sale del flujo de .nav-right) */
  .nav-burger { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; margin: 0; }
  /* RESERVAR a la derecha, más rotundo */
  .nav-right { margin-left: auto; gap: 0; }
  .nav-right .btn { padding: 12px 18px !important; font-size: 11.5px; letter-spacing: .14em; }
}
/* Pantallas muy estrechas (iPhone SE y similares): que nada se solape */
@media (max-width: 380px) {
  .nav-logo img { height: 36px; }
  .nav-logo .nl-sub { font-size: 7.5px; letter-spacing: .22em; }
  .nav-right .btn { padding: 10px 15px !important; font-size: 11px; letter-spacing: .12em; }
}

/* Menú desplegable (sheet) — dos arreglos:
   1. plegado no debe ocupar alto: su padding vertical inflaba el header
      (+39px). Se anula cuando NO está abierto.
   2. pie: idiomas más grandes y CTA «Reservar» a ancho completo, para que
      no se corte ni se pegue al borde. */
.sheet:not(.open) { padding-top: 0; padding-bottom: 0; }
.sheet-foot { flex-direction: column; align-items: stretch; gap: 16px; }
.sheet-foot .lang { justify-content: center; gap: 6px; }
.sheet .lang button { font-size: 15px; padding: 8px 14px; letter-spacing: .1em; }
.sheet-foot .btn { display: flex; align-items: center; justify-content: center; width: 100%; }

/* ---- Home · hero más contenido en móvil ---- */
@media (max-width: 700px) {
  .home-hero { height: 88svh; min-height: 540px; }
  .v6hero-title,
  .home-hero.v6hero .home-hero-title { font-size: clamp(2rem, 9vw, 2.9rem); max-width: 100%; }
  .v6hero-in { gap: 16px; }
}

/* ---- Home · manifiesto compacto (2 columnas, sin lista eterna) ---- */
@media (max-width: 860px) {
  .v6mani2 { padding-block: clamp(54px, 9vw, 80px); }
  .v6mani2-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .v6mani2-grid { grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 30px 0 6px; }
  .v6mani2-cell { padding-top: 14px; }
  .v6mani2-n { font-size: 1.35rem; margin-bottom: 5px; }
  .v6mani2-cell h4 { font-size: .98rem; }
}

/* ---- Home · grid Instagram: 6 fotos y filas más bajas ---- */
@media (max-width: 800px) {
  .v6ig-masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 34vw; }
  .v6ig-item:nth-child(n + 7) { display: none; }
}

/* ---- Footer compacto: estudios a dos columnas, marca de agua
   y legales reducidos ---- */
@media (max-width: 600px) {
  .ft-top { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding-block: 42px 8px; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-logo { height: 24px; margin-bottom: 14px; }
  .ft-statement { font-size: clamp(23px, 6.8vw, 30px); }
  .ft-social { margin-top: 16px; }
  .ft-col h4 { margin-bottom: 10px; }
  .ft-col p { font-size: 13px; line-height: 1.6; }
  .ft-col .ft-cta { margin-top: 10px; }
  .ft-watermark { padding-bottom: 12px; }
  .ft-watermark-text { font-size: clamp(15px, 8vw, 40px); }
  .ft-legal { padding-block: 14px; font-size: 10px; gap: 8px; }
  .ft-legal-links { gap: 14px; }
}

/* ---- Clases: imagen de la modalidad a media altura, no gigante ---- */
@media (max-width: 860px) {
  .clases6-img { aspect-ratio: 16 / 10; }
  .clases6-bignum { font-size: 2.6rem; bottom: 8px; right: 14px; }
  .clases6-badge { top: 12px; left: 12px; }
  .clases6-info { padding-top: 18px; }
  .clases6-title { font-size: clamp(1.9rem, 6.5vw, 2.6rem); margin-top: 10px; }
}

/* ---- Precios: pills con scroll cómodo y panel más compacto ---- */
@media (max-width: 640px) {
  .fnd-pills { scroll-padding-inline: 16px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  .fnd-feature { padding: 30px 22px 34px; }
  .fnd-feat-name { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .fnd-price-orb { padding: 16px 30px; }
  .fnd-orb-num { font-size: 2.3rem; }
  .fnd-feature.v-vita-ilimitada .fnd-price-orb { width: 132px; }
  .fnd-fine { font-size: 13px; padding-inline: 8px; }
}

/* ---- Cine-hero interior algo más bajo en móvil ---- */
@media (max-width: 700px) {
  .chero { min-height: 72svh; }
  .chero-in { padding-bottom: 44px; }
}

/* ============================================================
   BANNER de preventa / nueva apertura (contenido, no full-width)
   ============================================================ */
.promo { padding-block: clamp(14px, 3vw, 44px); }
.promo-card {
  position: relative; overflow: hidden;
  background: var(--green-deep); color: var(--beige);
  border-radius: clamp(28px, 4vw, 46px);
  padding: clamp(32px, 5vw, 58px) clamp(30px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(26px, 5vw, 64px); flex-wrap: wrap;
}
.promo-wm {
  position: absolute; right: 1%; bottom: -8%; z-index: 0;
  font-family: var(--serif); font-style: italic; font-size: clamp(6rem, 14vw, 12rem);
  line-height: 1; color: rgba(229,183,137,.07); pointer-events: none; user-select: none;
}
.promo-main { position: relative; z-index: 1; }
.promo-eyebrow { color: var(--gold); }
.promo-eyebrow::before { background: color-mix(in srgb, var(--gold) 60%, transparent); }
.promo-title { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; color: #fff; margin: 16px 0 14px; max-width: 20ch; }
.promo-text { color: rgba(249,248,249,.78); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; max-width: 50ch; }
.promo-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; flex-shrink: 0; }
.promo-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 99px; padding: 8px 16px; }
.promo-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.promo-btn.btn { background: var(--gold); color: var(--green-deep); border-color: var(--gold); white-space: nowrap; }
.promo-btn.btn:hover { background: var(--gold-2); }
@media (max-width: 760px) {
  .promo-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .promo-side { align-items: stretch; width: 100%; }
  .promo-btn.btn { width: 100%; justify-content: center; }
  .promo-badge { align-self: flex-start; }
}

/* Estudios · el panel de datos se estiraba a la altura de la galería y dejaba
   un hueco blanco enorme entre los datos y los botones. Ahora toma su altura
   natural (arriba) y acompaña el scroll de la galería (sticky). Solo escritorio. */
@media (min-width: 861px) {
  .est6-detail { align-items: start; }
  .est6-side { position: sticky; top: 96px; }
  /* galería compacta y equilibrada: rejilla uniforme (2 cols) en vez de la
     imagen destacada que estiraba la columna a 3 filas. Funciona igual con
     2 o con 4 fotos, sin huecos. */
  .est6-gallery { grid-template-rows: none; grid-auto-rows: 1fr; align-content: start; }
  .est6-gitem { aspect-ratio: 3 / 2; }
  .est6-gitem.g0 { grid-row: auto; }
}

/* Equipo · en móvil el encuadre del hero se desplaza a la izquierda para
   sacar del cuadre a la persona de la derecha (foto panorámica). */
@media (max-width: 860px) {
  body.vita-page-equipo .chero-img { object-position: 18% center; }
  /* Home · primera foto del carrusel: desplazada a la derecha para que la
     persona del centro-izquierda quede fuera del cuadre (solo móvil). */
  .home-hero-img:first-of-type { object-position: 85% center; }
}

/* ============================================================
   TERCERA TANDA · ajustes móvil (jun 2026)
   ============================================================ */

/* (2) Footer · centrado en móvil para que respire y se lea bien */
@media (max-width: 600px) {
  .ft-top { text-align: center; }
  .ft-brand { display: flex; flex-direction: column; align-items: center; }
  .ft-social { justify-content: center; }
  .ft-col { display: flex; flex-direction: column; align-items: center; }
  .ft-col .ft-cta { display: flex; justify-content: center; width: 100%; }
  .ft-legal { justify-content: center; text-align: center; }
  .ft-legal-links { justify-content: center; width: 100%; }
}

/* (3) Clases · arreglo del descuadre: las imágenes forzaban un ancho
   mínimo de ~615px que desbordaba el móvil. minmax(0,1fr) + min-width:0
   permiten que la columna se encoja al viewport. */
@media (max-width: 860px) {
  .clases6 { grid-template-columns: minmax(0, 1fr); }
  .clases6-index, .clases6-preview, .clases6-row { min-width: 0; }
  .clases6-desc, .clases6-fmt { min-width: 0; overflow-wrap: anywhere; }
  /* índice: apilar nombre y formato (el formato es largo y robaba el ancho,
     partiendo el nombre); el num ocupa las dos filas a la izquierda */
  .clases6-row { grid-template-columns: auto 1fr; align-items: start; row-gap: 2px; column-gap: 14px; }
  .clases6-num { grid-row: 1 / span 2; }
  .clases6-name { grid-column: 2; }
  .clases6-fmt { grid-column: 2; font-size: 10px; justify-self: start; text-align: left; white-space: normal; line-height: 1.5; }
  .clases6-arrow { display: none; }
}

/* (4)+(5) Precios · pills de planes EN MÓVIL:
   nada de scroll lateral (poco intuitivo): se envuelven en varias filas y
   se ven TODAS de un vistazo. row-gap holgado para que el badge «Popular»
   no choque con la fila de arriba ni lo recorte nada. */
@media (max-width: 640px) {
  .fnd-pills {
    flex-wrap: wrap;
    overflow: visible;
    justify-content: center;
    gap: 18px 10px;
    padding: 16px 0 0;
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .fnd-pill { flex: 0 1 auto; padding: 12px 20px; font-size: 12.5px; }
  /* la pill activa, más rotunda, para que se entienda que es selección */
  .fnd-pill.on { box-shadow: 0 8px 22px -10px rgba(18,55,42,.45); }
}