/* Landing de XV años (/xv-anos).
   Se carga DESPUES de styles.css y reutiliza sus tokens, fuentes, botones, header
   sobre el hero (.nav--overlay), slides (.hslide), lightbox, footer y botón de
   WhatsApp. Aquí solo vive lo propio de esta página: todo con prefijo xv-.
   styles.css no se toca para esto (el CSS crítico del inicio se genera de él). */

.xv { --xv-sombra: 0 18px 40px rgba(26, 24, 20, .16); }

/* ---- Tipografía compartida ------------------------------------------------ */
.xv-sec { padding-block: clamp(4rem, 7vw, 6.2rem); }
.xv-centro { text-align: center; }
.xv-h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); color: var(--azul-tinta); margin-top: .7rem; }
.section--azul .xv-h2 { color: var(--crema); }
/* Acento sin itálica (en el diseño la itálica queda para "de regalo" y "volver a ver"). */
.xv-acento { color: var(--rojo-teja); font-weight: 600; }
.section--azul .xv-acento { color: var(--cobre); }
.xv-h2 em { font-style: italic; }
.xv-sub { margin-top: .9rem; font-size: 1rem; color: var(--azul-pizarra); }
.section--azul .xv-sub { color: rgba(239, 230, 213, .85); }
.xv-num { font-family: var(--font-sc); font-weight: 500; font-size: 1.35rem; line-height: 1; color: var(--cobre); }
.xv-subrayado { border-bottom-color: currentColor; }
.xv-subrayado:hover { border-bottom-color: transparent; }

/* Lista con palomita en círculo (paquetes e invitación) */
.xv-lista { list-style: none; padding: 0; display: grid; gap: .55rem; }
.xv-lista li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; font-weight: 500; line-height: 1.45; color: var(--azul-tinta); }
.xv-check { width: 16px; height: 16px; flex-shrink: 0; margin-top: .14em; color: var(--rojo-teja); }
.xv-lista--claro li { color: var(--crema); }

/* ---- Header: solo logo + "Cotizar" --------------------------------------- */
.xv .nav__inner { padding-block: 1rem; }
/* Sobre la foto el header va limpio, sin la línea inferior del inicio. */
.xv .nav--overlay:not(.is-solid) { border-bottom-color: transparent; }
.xv-cotizar { padding: .6rem 1.1rem; font-size: .68rem; }

/* ---- Hero ----------------------------------------------------------------- */
/* .hero, .hero__medios, .hslide y .hero__punto vienen de styles.css (mismo motor
   que el inicio). El texto aquí va alineado a la izquierda y es uno solo para las
   tres fotos: solo cambian las fotos. */
.xv-hero__velo {
  background:
    linear-gradient(180deg, rgba(20, 18, 15, .45) 0%, rgba(20, 18, 15, 0) 18%),
    linear-gradient(90deg, rgba(20, 18, 15, .7) 0%, rgba(20, 18, 15, .5) 38%, rgba(20, 18, 15, .12) 72%, rgba(20, 18, 15, .05) 100%);
}
.xv-hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  color: var(--crema);
  padding-block: 7rem 3.5rem;
}
.xv-hero__bloque { max-width: 36rem; margin-top: auto; margin-bottom: auto; }
.xv-hero__kicker, .xv-hero__titulo, .xv-hero__desc, .xv-hero__micro { text-shadow: 0 1px 16px rgba(20, 18, 15, .4); }
.xv-hero__kicker {
  font-size: clamp(.62rem, .9vw, .74rem); font-weight: 600; line-height: 1.6;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(239, 230, 213, .94);
}
.xv-hero__titulo {
  margin-top: 1.4rem;
  font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.12; color: var(--crema);
  max-width: 11.5em;
}
.xv-hero__titulo span { color: var(--cobre-claro); }
.xv-hero__desc { margin-top: 1.4rem; max-width: 22em; font-size: clamp(.95rem, 1.25vw, 1.12rem); line-height: 1.6; color: rgba(239, 230, 213, .94); }
.xv-hero__cta { margin-top: 2rem; padding: 1.1rem 2.4rem; }
.xv-hero__micro { margin-top: 1.2rem; font-size: .8rem; color: rgba(239, 230, 213, .86); }
.xv-hero__puntos { justify-content: flex-start; margin: 0; position: absolute; bottom: 2rem; }

/* ---- Qué incluye ---------------------------------------------------------- */
.xv-momentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 2.6rem; }
.xv-momento__foto { aspect-ratio: 367 / 440; overflow: hidden; box-shadow: var(--xv-sombra); margin-bottom: 1.6rem; }
.xv-momento__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.xv-momento__titulo { margin-top: .55rem; font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--azul-tinta); }
.xv-momento__texto { margin-top: .55rem; font-size: .95rem; line-height: 1.65; color: var(--azul-pizarra); }

/* ---- Portafolio ----------------------------------------------------------- */
/* 4 columnas en escritorio, 2 en celular. Cada foto declara su ancho con clases;
   el orden es el mismo del diseño en los dos tamaños, salvo la última foto, que
   cambia (muro en escritorio, vals en celular). */
.xv-galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 22.5vw, 320px); gap: 12px; margin-top: 2.6rem; }
.xv-g { border-radius: 2px; }
.xv-g img { object-position: var(--pos, center); }
.xv-g--ancha, .xv-g--ancha-esc { grid-column: span 2; }
.xv-g--solo-movil { display: none; }

/* ---- Paquetes ------------------------------------------------------------- */
.xv-planes { display: grid; grid-template-columns: repeat(2, minmax(0, 484px)); justify-content: center; align-items: start; gap: 2rem; margin-top: 2.8rem; }
.xv-plan { background: var(--crema-claro); box-shadow: var(--xv-sombra); }
.xv-plan--destacado { outline: 1.5px solid var(--rojo-teja); outline-offset: -1px; }
.xv-plan__foto { aspect-ratio: 484 / 300; overflow: hidden; }
.xv-plan__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.xv-plan__cuerpo { padding: 1.6rem 1.4rem 1.5rem; }
.xv-plan--destacado .xv-plan__cuerpo { padding-top: 1.2rem; }
.xv-plan__badge {
  display: inline-block; margin-bottom: .9rem; padding: .3rem .65rem;
  background: var(--rojo-teja); color: var(--crema);
  font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.xv-plan__nombre { font-family: var(--font-serif); font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--azul-tinta); }
.xv-plan__precio { margin-top: .3rem; font-family: var(--font-serif); font-weight: 700; font-size: 1.85rem; line-height: 1.1; color: var(--rojo-teja); }
.xv-plan__precio span { font-family: var(--font-sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; }
.xv-plan__desc { margin-top: .4rem; font-size: .88rem; color: var(--azul-pizarra); }
.xv-plan .xv-lista { margin-top: 1.2rem; }
.xv-plan__cta { margin-top: 1.6rem; justify-content: center; }
.xv-medida { margin-top: 2.6rem; }
/* En línea (no flex) para que, si se parte en dos renglones, el subrayado siga a
   cada renglón y la flecha quede pegada a la última palabra. */
.xv-medida .link-arrow { display: inline; line-height: 2; }
.xv-medida .link-arrow__icon { display: inline-block; vertical-align: -.3em; margin-left: .3em; }

/* ---- Invitación digital --------------------------------------------------- */
.xv-invitacion__inner { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 6vw, 5rem); }
/* Marco blanco tipo foto impresa. Las dos imágenes comparten la misma celda y se
   cruzan por opacidad (xv.js las alterna cada 5 s). */
.xv-marco { display: grid; background: #fff; padding: 12px; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); }
.xv-marco__slide { grid-area: 1 / 1; opacity: 0; transition: opacity 1s ease; }
.xv-marco__slide.is-active { opacity: 1; }
.xv-marco__slide img { width: 100%; height: auto; aspect-ratio: 520 / 608; object-fit: cover; object-position: 50% 45%; }
.xv-invitacion__p { margin-top: 1.4rem; font-size: 1.05rem; line-height: 1.7; color: rgba(239, 230, 213, .82); max-width: 34em; }
.xv-invitacion .xv-lista { margin-top: 1.6rem; gap: .85rem; }
@media (prefers-reduced-motion: reduce) { .xv-marco__slide { transition: none; } }

/* ---- Cómo trabajamos ------------------------------------------------------ */
.xv-pasos { list-style: none; padding: 0; margin: 2.6rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.xv-paso { border-top: 1px solid rgba(31, 58, 95, .2); padding-top: 1.6rem; }
.xv-paso__titulo { margin-top: .6rem; font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; color: var(--azul-tinta); }
.xv-paso__texto { margin-top: .5rem; font-size: .95rem; line-height: 1.65; color: var(--azul-pizarra); }

/* ---- Reseñas -------------------------------------------------------------- */
.xv-resenas__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 2.6rem; text-align: left; }
.xv-resena { background: var(--azul-acero); padding: 1.8rem 1.9rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.xv-resena__estrellas { color: var(--cobre); letter-spacing: .25em; font-size: 1rem; }
.xv-resena__texto { margin-top: 1rem; font-size: 1rem; line-height: 1.65; color: rgba(239, 230, 213, .9); }
.xv-resena__autor { margin-top: 1rem; font-family: var(--font-serif); font-weight: 700; font-size: .9rem; color: var(--crema); }
.xv-resenas__link { margin-top: 2.2rem; }

/* ---- Preguntas frecuentes -------------------------------------------------- */
.xv-faq__lista { max-width: 840px; margin: 2.6rem auto 0; border-bottom: 1px solid rgba(31, 58, 95, .15); }
.xv-faq__item { border-top: 1px solid rgba(31, 58, 95, .15); }
.xv-faq__pregunta {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--azul-tinta);
}
.xv-faq__pregunta::-webkit-details-marker { display: none; }
.xv-faq__pregunta:focus-visible { outline: 2px solid var(--rojo-teja); outline-offset: 4px; }
/* Ícono +/– dibujado con dos líneas: la vertical se esconde al abrir. */
.xv-faq__icono { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.xv-faq__icono::before, .xv-faq__icono::after { content: ""; position: absolute; background: var(--rojo-teja); transition: transform .25s ease, opacity .25s ease; }
.xv-faq__icono::before { left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; }
.xv-faq__icono::after { top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -.75px; }
.xv-faq__item[open] .xv-faq__icono::after { transform: scaleY(0); opacity: 0; }
.xv-faq__respuesta { padding: 0 2.5rem 1.3rem 0; font-size: .95rem; line-height: 1.65; color: var(--azul-pizarra); }

/* ---- Banner final --------------------------------------------------------- */
.xv-banner { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(460px, 42vw, 600px); background: var(--carbon); color: var(--crema); text-align: center; }
.xv-banner__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.xv-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 18, 15, .52); }
.xv-banner__contenido { padding-block: 4rem; }
.xv-banner__titulo { font-size: clamp(1.75rem, 3.6vw, 3rem); color: var(--crema); }
.xv-banner__titulo em { font-style: italic; font-weight: 600; color: var(--crema); }
.xv-banner__cta { margin-top: 2rem; padding: 1.1rem 2.2rem; }
.xv-banner__geo { margin-top: 1.6rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(239, 230, 213, .9); }

/* ---- Tablet --------------------------------------------------------------- */
@media (max-width: 900px) {
  .xv-momentos { gap: 1.6rem; }
  .xv-pasos { grid-template-columns: repeat(2, 1fr); }
  .xv-invitacion__inner { grid-template-columns: 1fr 1fr; }
}

/* ---- Celular -------------------------------------------------------------- */
@media (max-width: 720px) {
  .xv-sec { padding-block: 3.6rem; }
  .xv .container { width: auto; margin-inline: 16px; }

  /* Hero: texto centrado en la mitad de abajo y la foto (recorte vertical propio)
     arriba. El hueco de abajo lo pide el botón flotante de WhatsApp. */
  .xv-hero__velo {
    background: linear-gradient(180deg,
      rgba(20, 18, 15, .4) 0%, rgba(20, 18, 15, .05) 22%, rgba(20, 18, 15, .15) 45%,
      rgba(20, 18, 15, .62) 68%, rgba(20, 18, 15, .78) 100%);
  }
  .xv-hero__inner { justify-content: flex-end; text-align: center; padding-block: 5rem 5.2rem; }
  .xv-hero__bloque { margin: 0 auto; }
  .xv-hero__kicker { letter-spacing: .24em; max-width: 22em; margin-inline: auto; }
  .xv-hero__titulo { margin: .9rem auto 0; font-size: 2.05rem; max-width: 8.2em; }
  .xv-hero__desc { margin: .9rem auto 0; font-size: .92rem; }
  .xv-hero__cta { margin-top: 1.6rem; width: min(300px, 100%); justify-content: center; }
  .xv-hero__micro { margin-top: 1rem; }
  .xv-hero__puntos { left: 0; right: 0; bottom: 1.6rem; justify-content: center; }

  .xv-h2 { font-size: 1.65rem; }
  .xv-momentos { grid-template-columns: 1fr; gap: 2.2rem; margin-top: 2rem; }
  .xv-momento__foto { aspect-ratio: 358 / 300; margin-bottom: 1.2rem; }

  /* Celular: las anchas van a todo lo ancho y bajitas; el resto, de dos en dos.
     El alto sale de la proporción de cada foto (como en el diseño), no de la fila. */
  .xv-galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 8px; margin-top: 2rem; }
  .xv-g { aspect-ratio: 1 / 1; }
  .xv-g--ancha { grid-column: span 2; aspect-ratio: 1.9; }
  .xv-g--ancha-esc { grid-column: span 1; }
  .xv-g--alta-m { aspect-ratio: .74; }
  .xv-g--solo-esc { display: none; }
  .xv-g--solo-movil { display: block; }

  .xv-planes { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2rem; }

  .xv-invitacion__inner { grid-template-columns: 1fr; gap: 2rem; }
  .xv-marco { padding: 10px; }
  .xv-invitacion__p { font-size: .95rem; }

  .xv-pasos { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }

  .xv-resenas__grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  .xv-resena { padding: 1.4rem 1.2rem; }
  .xv-resena__texto { font-size: .9rem; }

  .xv-faq__lista { margin-top: 2rem; }
  .xv-faq__pregunta { font-size: 1rem; }
  .xv-faq__respuesta { padding-right: 0; }

  .xv-banner { min-height: 520px; }
  .xv-banner__titulo { max-width: 10em; margin-inline: auto; }
  .xv-banner__cta { width: 100%; justify-content: center; padding-inline: .8rem; font-size: .72rem; letter-spacing: .1em; }
  .xv-banner__geo { line-height: 1.7; letter-spacing: .12em; }
}