/* =====================================================================
   ESTILOS DE PRETTY NAILS LOUNGE
   Primero pensado para celular; las reglas @media agregan cambios
   para tablet (desde 720px) y computadora (desde 1024px).
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. TIPOGRAFÍAS (servidas desde la carpeta fuentes/, sin depender de Google)
   Oranienbaum, Cormorant Garamond y DM Sans tienen licencia libre (SIL Open Font License).
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fuentes/cormorant-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("fuentes/cormorant-garamond-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Oranienbaum";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fuentes/oranienbaum.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/dm-sans.woff2") format("woff2");
}


/* Letras de reemplazo ajustadas: mientras llegan las tipografías, el
   navegador usa Times New Roman / Arial con estas medidas, que ocupan
   exactamente el mismo espacio. Así, cuando cambia la letra, nada se mueve. */
@font-face {
  font-family: "Cormorant Respaldo";
  font-style: normal;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times");
  size-adjust: 96.28%;
  ascent-override: 95.97%;
  descent-override: 29.81%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Respaldo";
  font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Times Italic");
  size-adjust: 86.52%;
  ascent-override: 106.80%;
  descent-override: 33.17%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Sans Respaldo";
  font-style: normal;
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 103.36%;
  ascent-override: 95.98%;
  descent-override: 29.99%;
  line-gap-override: 0%;
}


/* ---------------------------------------------------------------------
   1. COLORES Y MEDIDAS (cámbialos aquí y se actualiza toda la web)
   --------------------------------------------------------------------- */
:root {
  /* Colores de siempre: rosa, fucsia, crema y chocolate */
  --acento-claro: #E8A5B5;    /* rosa empolvado: líneas y detalles */
  --acento-suave: #F6E1E6;    /* el mismo rosa, más claro */
  --acento: #B83265;          /* fucsia: botones y acentos */
  --acento-oscuro: #9A2753;   /* fucsia al pasar el mouse */
  --crema: #FBF6F2;           /* fondo de las secciones claras */
  --blanco: #FFFFFF;
  --chocolate: #3B2A2A;       /* texto (nunca negro puro) */
  --chocolate-suave: #6E5A57; /* texto secundario */
  --linea: #EADDD6;           /* bordes finos sobre crema */
  --oscuro: #3B2A2A;          /* fondo de las secciones oscuras (chocolate) */
  --oscuro-suave: #4A3735;
  --claro: #FBF6F2;           /* texto sobre chocolate */
  --claro-suave: #E9DCD6;     /* texto secundario sobre chocolate */
  --linea-oscura: rgba(232, 165, 181, .3); /* bordes finos sobre chocolate */

  --fuente-titulos: "Oranienbaum", "Bodoni 72", Didot, Georgia, serif;
  --fuente-texto: "DM Sans", "DM Sans Respaldo", system-ui, -apple-system, sans-serif;

  --radio-grande: 0;
  --radio: 0;
  --radio-pildora: 0;
  /* forma de espejo de tocador: arco arriba, esquinas suaves abajo */
  --radio-espejo: 0;

  --altura-barra: 68px;
  --espacio-seccion: clamp(4.5rem, 10vw, 7.5rem);
}


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--altura-barra);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--chocolate);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 6px;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  background: var(--chocolate);
  color: var(--crema);
  padding: .75rem 1rem;
  border-radius: 10px;
  z-index: 100;
}
.saltar:focus { top: 1rem; }

.contenedor {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}
.contenedor--angosto { max-width: 860px; }

@media (min-width: 720px) {
  .contenedor { padding: 0 32px; }
}

.icono {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------------------------------------------------------------------
   3. TÍTULOS Y TEXTOS
   --------------------------------------------------------------------- */
.titulo {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.titulo em,
.portada__titulo em {
  font-style: italic;
  color: var(--acento);
}
.titulo--claro { color: var(--crema); }
.titulo--claro em { color: var(--acento-claro); }

.seccion { padding: var(--espacio-seccion) 0; }
.seccion--crema { background: var(--crema); }

.seccion__cabecera {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.seccion__bajada {
  margin-top: .85rem;
  color: var(--chocolate-suave);
  font-size: 1.05rem;
}

.enlace {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  color: var(--acento);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--acento-claro);
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
.enlace:hover { text-decoration-color: var(--acento); }


/* ---------------------------------------------------------------------
   4. BOTONES
   --------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border-radius: var(--radio-pildora);
  border: 1.5px solid transparent;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.boton--principal {
  background: var(--acento);
  color: var(--blanco);
}
.boton--principal:hover { background: var(--acento-oscuro); }

.boton--secundario {
  background: transparent;
  color: var(--chocolate);
  border-color: var(--chocolate);
}
.boton--secundario:hover {
  background: var(--chocolate);
  color: var(--crema);
}


/* ---------------------------------------------------------------------
   5. BARRA SUPERIOR Y MENÚ
   --------------------------------------------------------------------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--crema);
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.barra.con-sombra { border-bottom-color: var(--linea); }

.barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--altura-barra);
}

.logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.logo { gap: .6rem; }
.logo__img { height: 48px; width: 48px; border-radius: 50%; }
.logo__texto {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--chocolate);
}

/* Botón hamburguesa (solo en celular) */
.hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 12px;
  background: none;
  border: 0;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  height: 1.5px;
  background: var(--chocolate);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Menú en celular: panel que baja desde la barra */
.menu {
  position: absolute;
  top: var(--altura-barra);
  left: 0;
  right: 0;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  padding: .5rem 16px 1.5rem;
  display: none;
}
.menu.abierto { display: block; }

.menu__lista a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
.menu__reservar { width: 100%; margin-top: 1.25rem; }

/* Menú en computadora: en línea */
@media (min-width: 900px) {
  .hamburguesa { display: none; }
  .menu {
    position: static;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    border: 0;
  }
  .menu__lista { display: flex; gap: 1.75rem; }
  .menu__lista a {
    min-height: 44px;
    font-family: var(--fuente-texto);
    font-size: .95rem;
    border: 0;
  }
  .menu__lista a:hover { color: var(--acento); }
  .menu__reservar { width: auto; margin: 0; min-height: 44px; padding: .55rem 1.35rem; }
}


/* ---------------------------------------------------------------------
   6. PORTADA
   --------------------------------------------------------------------- */
.portada {
  background: var(--crema);
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 6.5rem);
  overflow: hidden;
}
.portada__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-areas: "texto" "mosaico" "datos";
}
.portada__texto { grid-area: texto; }
.mosaico { grid-area: mosaico; }
.portada__datos { grid-area: datos; }

.etiqueta {
  color: var(--chocolate-suave);
  font-size: .95rem;
  letter-spacing: .02em;
}

.portada__titulo {
  margin-top: 1rem;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: clamp(3.1rem, 11vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.02em;
  max-width: 14ch;
}
.portada__titulo em { font-weight: 500; }

.portada__intro {
  margin-top: 1.5rem;
  max-width: 30rem;
  font-size: 1.1rem;
  color: var(--chocolate-suave);
}

.portada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.portada__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
  font-size: .95rem;
  color: var(--chocolate-suave);
}
.portada__datos li { max-width: 12rem; line-height: 1.4; }
.portada__datos strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--chocolate);
}

/* Mosaico: tres "espejos" de tocador.
   En celular: una foto grande arriba y dos chicas debajo. */
.mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mosaico .foto:nth-child(1) {
  grid-column: 1 / -1;
  border-radius: 50% 50% 24px 24px / 36% 36% 24px 24px;
  aspect-ratio: 4 / 5;
}
.mosaico .foto:nth-child(2) {
  border-radius: var(--radio-pildora);
  aspect-ratio: 1 / 1;
}
.mosaico .foto:nth-child(3) {
  border-radius: var(--radio-grande);
  aspect-ratio: 1 / 1;
}

@media (min-width: 720px) {
  .mosaico { grid-template-columns: 1.25fr 1fr; }
  .mosaico .foto:nth-child(1) {
    grid-column: auto;
    grid-row: span 2;
    /* foto más alta: el arco se ajusta para seguir siendo redondo */
    border-radius: 50% 50% 24px 24px / 33% 33% 24px 24px;
    aspect-ratio: 3 / 4.6;
  }
  .mosaico .foto:nth-child(3) { aspect-ratio: 1 / 1.15; }
}

@media (min-width: 1024px) {
  .portada__grid {
    grid-template-columns: 1.05fr 1fr;
    grid-template-areas: "texto mosaico" "datos mosaico";
    grid-template-rows: auto 1fr;
    column-gap: 4rem;
    row-gap: 2.5rem;
    align-items: start;
  }
  .portada__texto { align-self: end; }
  .mosaico { gap: 16px; align-self: center; }
}


/* ---------------------------------------------------------------------
   7. FOTOS Y RECUADROS DE RESPALDO
   --------------------------------------------------------------------- */
.foto {
  position: relative;
  overflow: hidden;
  background: var(--acento-suave);
  border-radius: var(--radio);
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Recuadro que aparece cuando no hay ninguna foto */
.foto--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: var(--acento-oscuro);
  font-size: .9rem;
  line-height: 1.35;
  min-height: 140px;
}


/* ---------------------------------------------------------------------
   8. PROMOS
   --------------------------------------------------------------------- */
.promos {
  display: grid;
  gap: 16px;
}
.promo {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  padding: 1.75rem 1.5rem 1.5rem;
}
.promo__oferta {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--acento);
}
.promo__titulo {
  margin-top: 1.1rem;
  font-family: var(--fuente-texto);
  font-size: 1.15rem;
  font-weight: 600;
}
.promo__incluye {
  margin-top: .4rem;
  color: var(--chocolate-suave);
  flex-grow: 1;
}
.promo .boton {
  margin-top: 1.5rem;
  align-self: flex-start;
}

@media (min-width: 720px) {
  .promos { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .promos { grid-template-columns: repeat(3, 1fr); }
}


/* Carrusel de promos ------------------------------------------------ */
.carrusel { position: relative; }

.carrusel__pista {
  position: relative;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  margin: 0 -16px;
  padding: 4px 16px 8px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
/* mientras gira solo, se apaga el "encaje" para que el movimiento sea continuo */
.carrusel__pista.girando { scroll-snap-type: none; scroll-behavior: auto; }

.promo-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  overflow: hidden;
}
/* el flyer manda: mismo alto para todos, el ancho sale de la imagen */
.promo-slide__imagen {
  height: var(--alto-flyer);
  background: var(--acento-suave);
}
.promo-slide__imagen img {
  height: 100%;
  width: auto;
  max-width: none;
}
/* Promo sin flyer: tarjeta de texto con el estilo de los flyers */
.promo-slide__solo-texto {
  height: 100%;
  width: calc(var(--alto-flyer) * .5625);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--chocolate);
  color: var(--crema);
}
/* más específico que ".promo-slide__imagen img" (que es para los flyers) */
.promo-slide__imagen .promo-slide__logo { width: 72px; height: 72px; max-width: 72px; border-radius: 50%; margin-bottom: 1.5rem; }
.promo-slide__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.05;
}
.promo-slide__grande {
  margin-top: .6rem;
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3rem, 9vh, 4.2rem);
  line-height: 1;
  color: var(--acento-claro);
}
.promo-slide__incluye {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201, 162, 126, .45);
  display: grid;
  gap: .45rem;
  font-size: .95rem;
  color: var(--claro-suave);
}

.promo-slide__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem .9rem 1.2rem;
  width: 0;          /* el pie no ensancha la tarjeta: toma el ancho del flyer */
  min-width: 100%;
}
.promo-slide__titulo {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}
.promo-slide__oferta {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--acento);
}
.promo-slide__boton {
  flex-shrink: 0;
  min-height: 44px;
  padding: .55rem 1.1rem;
  font-size: .95rem;
}

.carrusel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.carrusel__flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--chocolate);
  background: transparent;
  color: var(--chocolate);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.carrusel__flecha:hover { background: var(--chocolate); color: var(--crema); }

.carrusel__puntos { display: flex; gap: 2px; }
.carrusel__punto {
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.carrusel__punto::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--acento-claro);
  transform: translate(-50%, -50%);
  transition: width .25s, background-color .25s;
}
.carrusel__punto[aria-current="true"]::after { width: 22px; background: var(--acento); }

:root { --alto-flyer: min(68vh, 520px); }
@media (min-width: 720px) {
  :root { --alto-flyer: 540px; }
  .carrusel__pista { margin: 0; padding: 4px 0 8px; scroll-padding-inline: 0; gap: 20px; }
}
@media (min-width: 1024px) {
  :root { --alto-flyer: 580px; }
}


/* Tarjetas de video (Pretty Educa, 15 años, galería) ---------------- */
.video-tarjeta { margin: 0; }
.video-tarjeta__marco {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: var(--chocolate);
}
.video-tarjeta__marco video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-tarjeta__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  background: var(--acento);
  color: var(--blanco);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(59, 42, 42, .3);
  transition: background-color .2s;
}
.video-tarjeta__play:hover { background: var(--acento-oscuro); }
.video-tarjeta__play[hidden] { display: none; }
.video-tarjeta__play svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.video-tarjeta__titulo {
  margin-top: .85rem;
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Pretty Educa: en fila deslizable en celular, 3 columnas en pantalla grande */
.videos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 0 16px 6px;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.videos::-webkit-scrollbar { display: none; }
.videos .video-tarjeta { scroll-snap-align: start; }
@media (min-width: 720px) {
  .videos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; margin: 0; padding: 0; overflow: visible; gap: 24px; }
}
@media (min-width: 1024px) {
  .videos { max-width: 980px; }
}

/* En la galería, el video ocupa la misma caja que las fotos */
.galeria .video-tarjeta.foto { aspect-ratio: 4 / 5; }
.galeria .video-tarjeta.foto .video-tarjeta__marco { aspect-ratio: auto; height: 100%; border-radius: 0; }


/* ---------------------------------------------------------------------
   8B. PRODUCTO DESTACADO CON VIDEO
   --------------------------------------------------------------------- */
.destacado { background: var(--acento-suave); }

.destacado__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.destacado__etiqueta {
  display: inline-block;
  padding: .3rem .9rem;
  border: 1px solid var(--acento);
  border-radius: var(--radio-pildora);
  color: var(--acento);
  font-size: .9rem;
  font-weight: 500;
}

.destacado__titulo {
  margin-top: 1.1rem;
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: .95;
}
.destacado__titulo em { display: block; }

.destacado__descripcion {
  margin-top: 1.4rem;
  max-width: 32rem;
  font-size: 1.1rem;
}

.destacado__puntos {
  margin-top: 1.75rem;
  display: grid;
  gap: .7rem;
}
.destacado__puntos li {
  position: relative;
  padding-left: 1.9rem;
}
/* pequeño check de línea antes de cada beneficio */
.destacado__puntos li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .4em;
  width: .85rem;
  height: .45rem;
  border-left: 1.6px solid var(--acento);
  border-bottom: 1.6px solid var(--acento);
  transform: rotate(-45deg);
}

.destacado__ideal {
  margin-top: 1.5rem;
  color: var(--chocolate-suave);
  font-style: italic;
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  line-height: 1.3;
}

.destacado__botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 2rem;
}

/* El video va en el mismo marco de espejo que las fotos */
.destacado__video {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 50% 50% 28px 28px / 28% 28% 28px 28px;
  overflow: hidden;
  background: var(--chocolate);
  box-shadow: 0 0 0 10px var(--blanco);
}
.destacado__video video,
.destacado__vacio {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.destacado__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 0;
  background: var(--acento);
  color: var(--blanco);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(59, 42, 42, .3);
  transition: background-color .2s, transform .2s;
}
.destacado__play:hover { background: var(--acento-oscuro); transform: translate(-50%, -50%) scale(1.05); }
.destacado__play[hidden] { display: none; }
.destacado__play svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }

@media (min-width: 900px) {
  .destacado__grid {
    grid-template-columns: 1.1fr .9fr;
    gap: 5rem;
  }
  .destacado__video { max-width: 380px; margin-right: 0; }
}


/* ---------------------------------------------------------------------
   9. SERVICIOS: PESTAÑAS Y CARTA DE PRECIOS
   --------------------------------------------------------------------- */
.pestanas {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  margin: 0 -16px 2rem;
  padding: 2px 16px 6px;
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }

.pestana {
  flex-shrink: 0;
  min-height: 44px;
  padding: .55rem 1.15rem;
  border-radius: var(--radio-pildora);
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--chocolate);
  font-family: var(--fuente-texto);
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.pestana:hover { border-color: var(--acento-claro); }
.pestana[aria-selected="true"] {
  background: var(--chocolate);
  border-color: var(--chocolate);
  color: var(--crema);
}

@media (min-width: 720px) {
  .pestanas { flex-wrap: wrap; margin: 0 0 2.5rem; padding: 2px; overflow: visible; }
}

/* La carta: como el menú impreso de un salón.
   Cada servicio: a la izquierda el nombre (con precio si lo tiene) y la
   nota; a la derecha, un solo botón, siempre en la misma columna. */
.carta__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linea);
}
.carta__item:first-child { border-top: 1px solid var(--linea); }

.carta__info { min-width: 0; }
.carta__linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .6rem;
}
.carta__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.15;
}
/* Puntitos entre el nombre y el precio (solo en pantallas grandes) */
.carta__puntos {
  display: none;
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1.5px dotted var(--acento-claro);
  transform: translateY(-.3rem);
}
.carta__precio {
  white-space: nowrap;
  font-size: .95rem;
  color: var(--chocolate-suave);
}
.carta__precio strong {
  color: var(--acento);
  font-weight: 600;
  font-size: 1.05rem;
}
.carta__nota {
  margin-top: .3rem;
  font-size: .93rem;
  color: var(--chocolate-suave);
}

/* El botón (Consultar precio o Reservar) */
.carta__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0 .95rem;
  border: 1px solid var(--acento-claro);
  border-radius: var(--radio-pildora);
  color: var(--acento);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.carta__boton .icono { width: 16px; height: 16px; }
.carta__boton:hover { background: var(--acento-suave); }
/* "Reservar" (cuando hay precio) va relleno */
.carta__item--precio .carta__boton { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
.carta__item--precio .carta__boton:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }

@media (min-width: 720px) {
  .carta__item { gap: 1.5rem; }
  .carta__linea { flex-wrap: nowrap; }
  .carta__nombre { font-size: 1.45rem; }
  .carta__puntos { display: block; }
  .carta__boton { padding: 0 1.15rem; font-size: .9rem; min-width: 9.5rem; }
}

.carta__item.entrando { animation: aparecer .35s ease both; }


/* ---------------------------------------------------------------------
   10. GALERÍA
   --------------------------------------------------------------------- */
.filtros {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  margin: 0 -16px 1.75rem;
  padding: 2px 16px 6px;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex-shrink: 0;
  min-height: 44px;
  padding: .5rem 1.1rem;
  border-radius: var(--radio-pildora);
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--chocolate);
  font-family: var(--fuente-texto);
  font-size: .95rem;
  cursor: pointer;
}
.filtro.activo {
  background: var(--acento-suave);
  border-color: var(--acento-claro);
  color: var(--acento-oscuro);
  font-weight: 500;
}
@media (min-width: 720px) {
  .filtros { flex-wrap: wrap; margin: 0 0 2rem; padding: 2px; overflow: visible; }
}

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.galeria .foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--radio);
}
/* Un toque de ritmo: algunas fotos con forma de espejo */
.galeria .foto:nth-child(4n + 1) { border-radius: var(--radio-espejo); }
.galeria .foto[hidden] { display: none; }

@media (min-width: 720px) {
  .galeria { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

.galeria__mas { margin-top: 1.75rem; }


/* ---------------------------------------------------------------------
   11. NOVIAS (bloque chocolate)
   --------------------------------------------------------------------- */
.novias {
  display: grid;
  gap: 2.5rem;
  background: var(--chocolate);
  color: var(--crema);
  border-radius: var(--radio-grande);
  padding: 2.5rem 1.5rem;
}
.novias__texto p {
  margin-top: 1.1rem;
  color: var(--claro-suave);
  max-width: 34rem;
}
.novias__lista {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}
.novias__lista li {
  padding: .4rem 1rem;
  border: 1px solid rgba(201, 162, 126, .55);
  border-radius: var(--radio-pildora);
  font-size: .93rem;
  color: var(--crema);
}
.novias .boton { margin-top: 2rem; }

.novias__foto .foto {
  border-radius: var(--radio-espejo);
  aspect-ratio: 4 / 5;
  max-width: 420px;
  margin: 0 auto;
}
.novias__foto .foto--vacia { background: rgba(201, 162, 126, .18); color: var(--acento-claro); }

.novias__videos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -1.5rem;
  padding: 0 1.5rem 6px;
  scroll-padding-inline: 1.5rem;
  scrollbar-width: none;
}
.novias__videos::-webkit-scrollbar { display: none; }
.novias__videos .video-tarjeta { scroll-snap-align: start; }
.novias__videos .video-tarjeta__marco { border-radius: var(--radio); }
.novias__videos .video-tarjeta__titulo { color: var(--claro-suave); font-size: 1.1rem; }

@media (min-width: 900px) {
  .novias__videos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; margin: 0; padding: 0; overflow: visible; }
  .novias {
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 4rem;
    padding: 4rem;
  }
}


/* Sin videos (falta el permiso de los padres): bloque de una columna, centrado */
.novias--solo-texto { text-align: center; }
.novias--solo-texto .novias__texto { max-width: 40rem; margin: 0 auto; }
.novias--solo-texto .novias__texto p { margin-left: auto; margin-right: auto; }
.novias--solo-texto .novias__lista { justify-content: center; }
@media (min-width: 900px) {
  .novias.novias--solo-texto { grid-template-columns: 1fr; padding: 4.5rem 3rem; }
}


/* ---------------------------------------------------------------------
   12. POR QUÉ PRETTY
   --------------------------------------------------------------------- */
/* Franja de dos fotos sobre las razones */
.porque-fotos {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.porque-fotos .foto { height: 260px; }
.porque-fotos .foto:first-child { border-radius: var(--radio-grande); }
.porque-fotos .foto:last-child { border-radius: var(--radio-espejo); }

/* Video "¿Qué nos hace diferentes?": en celular va primero y a lo ancho */
.porque-fotos__video { grid-column: 1 / -1; order: -1; }
.porque-fotos__video .video-tarjeta__marco { aspect-ratio: 4 / 5; }

@media (min-width: 720px) {
  .porque-fotos { gap: 20px; grid-template-columns: 1.2fr 236px 1fr; }
  .porque-fotos .foto { height: 420px; }
  /* en pantallas grandes, en medio de las dos fotos y del mismo alto */
  .porque-fotos__video { grid-column: auto; order: 0; }
  .porque-fotos__video .video-tarjeta__marco { aspect-ratio: auto; height: 420px; }
}
@media (min-width: 1024px) {
  .porque-fotos { grid-template-columns: 1.4fr 270px 1fr; }
  .porque-fotos .foto { height: 480px; }
  .porque-fotos__video .video-tarjeta__marco { height: 480px; }
}

/* Sin las 2 fotos reales: video a la izquierda, razones a la derecha.
   En celular: video arriba (centrado) y razones abajo. */
.porque--lado .porque-fotos { grid-template-columns: 1fr; justify-items: center; }
.porque--lado .porque-fotos__video { width: 100%; max-width: 320px; }
.porque--lado .porque-fotos__video .video-tarjeta__marco { aspect-ratio: 9 / 16; height: auto; }

@media (min-width: 720px) {
  .porque--lado {
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    grid-template-areas: "cabecera cabecera" "video razones";
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }
  .porque--lado .seccion__cabecera { grid-area: cabecera; }
  .porque--lado .porque-fotos { grid-area: video; grid-template-columns: 1fr; margin-bottom: 0; }
  .porque--lado .porque-fotos__video { max-width: none; }
  .porque--lado .razones,
  .porque--lado .razones.razones--3,
  .porque--lado .razones.razones--4 { grid-area: razones; grid-template-columns: 1fr; gap: 1.75rem; }
  .porque--lado .razon {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: start;
  }
  .porque--lado .razon__icono { grid-row: span 2; margin-top: .3rem; }
  .porque--lado .razon h3 { margin-top: 0; }
}

.razones {
  display: grid;
  gap: 2.25rem 2rem;
}
.razon {
  padding-top: 1.5rem;
  border-top: 1px solid var(--acento-claro);
}
.razon__icono {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.razon h3 {
  margin-top: 1rem;
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
}
.razon p {
  margin-top: .5rem;
  color: var(--chocolate-suave);
}
@media (min-width: 720px) { .razones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .razones { grid-template-columns: repeat(4, 1fr); } }
/* Si la Tarjeta VIP está oculta, las 3 que quedan ocupan el ancho completo */
@media (min-width: 720px) { .razones.razones--3 { grid-template-columns: repeat(3, 1fr); } }


/* ---------------------------------------------------------------------
   13. TESTIMONIOS
   --------------------------------------------------------------------- */
.testimonios {
  display: grid;
  gap: 16px;
}
.testimonio {
  background: var(--crema);
  border-radius: var(--radio-grande);
  padding: 2rem 1.75rem;
}
.testimonio__comillas {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 4rem;
  line-height: .6;
  color: var(--acento-claro);
  height: 1.6rem;
}
.testimonio blockquote {
  margin: 1rem 0 0;
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  line-height: 1.35;
}
.testimonio figcaption {
  margin-top: 1.25rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--chocolate-suave);
}
@media (min-width: 900px) { .testimonios { grid-template-columns: repeat(3, 1fr); gap: 20px; } }


/* ---------------------------------------------------------------------
   14. UBICACIÓN
   --------------------------------------------------------------------- */
.ubicacion {
  display: grid;
  gap: 2.5rem;
}
.datos { margin: 2rem 0; }
.dato {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linea);
}
.dato:first-child { border-top: 1px solid var(--linea); }
.dato dt {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--chocolate-suave);
}
.dato dt .icono { color: var(--acento); width: 18px; height: 18px; }
.dato dd {
  margin: .35rem 0 0;
  font-size: 1.05rem;
}
.horario__fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 22rem;
}

.mapa {
  border-radius: var(--radio-grande);
  overflow: hidden;
  min-height: 320px;
  background: var(--acento-suave);
}
.mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

@media (min-width: 900px) {
  .ubicacion { grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: stretch; }
  .mapa, .mapa iframe { min-height: 460px; }
}


/* ---------------------------------------------------------------------
   15. PIE DE PÁGINA
   --------------------------------------------------------------------- */
.pie {
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  padding: 2.5rem 0 6.5rem; /* espacio abajo para el botón flotante */
}
.pie__fila {
  display: grid;
  gap: 1rem;
}
.pie__nombre {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
}
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}
.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .95rem;
  text-decoration: none;
}
.pie__enlaces a:hover { color: var(--acento); }
.pie__enlaces a.pendiente { color: var(--chocolate-suave); }
.pie__copy { font-size: .9rem; color: var(--chocolate-suave); }

@media (min-width: 900px) {
  .pie { padding-bottom: 2.5rem; }
  .pie__fila { grid-template-columns: auto 1fr auto; align-items: center; gap: 2.5rem; }
  .pie__enlaces { justify-content: center; }
}


/* ---------------------------------------------------------------------
   16. BOTÓN FLOTANTE DE WHATSAPP
   --------------------------------------------------------------------- */
.flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--blanco);
  box-shadow: 0 6px 20px rgba(184, 50, 101, .35);
  transition: background-color .2s, transform .2s;
}
.flotante:hover { background: var(--acento-oscuro); transform: translateY(-2px); }
.flotante svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 720px) {
  .flotante { right: 24px; bottom: 24px; }
}


/* ---------------------------------------------------------------------
   16B. VENTANA DE AVISO (pop-up)
   --------------------------------------------------------------------- */
.aviso {
  width: min(420px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 2.75rem 1.75rem 2rem;
  border: 0;
  border-radius: var(--radio-grande);
  background: var(--crema);
  color: var(--chocolate);
  text-align: center;
  box-shadow: 0 24px 60px rgba(59, 42, 42, .28);
}
.aviso::backdrop { background: rgba(59, 42, 42, .55); }
.aviso[open] { animation: avisoEntra .35s ease both; }
@keyframes avisoEntra {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.aviso__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--chocolate);
  cursor: pointer;
}
.aviso__cerrar:hover { background: var(--acento-suave); }
.aviso__cerrar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.aviso__titulo {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: clamp(2.2rem, 8vw, 2.7rem);
  line-height: 1.02;
}
.aviso__titulo em {
  display: block;
  font-style: italic;
  color: var(--acento);
}
/* La promo, en grande */
.aviso__detalle {
  margin: 1.25rem auto 0;
  max-width: 22ch;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.6rem, 6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--chocolate);
}
.aviso__vigencia {
  margin-top: .9rem;
  color: var(--chocolate-suave);
  font-size: .95rem;
}
.aviso__boton { margin-top: 1.75rem; width: 100%; }


/* ---------------------------------------------------------------------
   17. ANIMACIONES (sutiles, y se apagan si la persona pide
       "reducir movimiento" en su celular o computadora)
   --------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.revelar.visible {
  opacity: 1;
  transform: none;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .revelar { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------
   18. ESTILO EDITORIAL
   Secciones que alternan chocolate y crema, títulos en mayúsculas con una
   serifa alta y angosta, botones rectangulares con flecha y detalles
   en rosa y fucsia. Va al final para pesar sobre las reglas de arriba.
   --------------------------------------------------------------------- */

/* Títulos: mayúsculas, sin cursiva, con una raya rosa debajo */
.titulo {
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.titulo em { font-style: normal; color: inherit; }
.titulo::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 1.5rem;
  background: var(--acento-claro);
}
.sobretitulo {
  margin-bottom: 1rem;
  color: var(--acento);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.seccion__bajada { max-width: 34rem; font-size: .98rem; }

/* Secciones: crema o chocolate */
.seccion--clara { background: var(--crema); }
.seccion--oscura { background: var(--oscuro); color: var(--claro); }
.seccion--oscura .seccion__bajada { color: var(--claro-suave); }
.seccion--oscura .sobretitulo { color: var(--acento-claro); }
.seccion--oscura .enlace { color: var(--acento-claro); text-decoration-color: var(--linea-oscura); }
.seccion--oscura .enlace:hover { text-decoration-color: var(--acento-claro); }

/* Botones rectangulares, en mayúsculas y con flecha */
.boton {
  gap: .6rem;
  padding: .95rem 1.7rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.boton .flecha {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boton--principal,
.boton--oscuro { background: var(--oscuro); color: var(--claro); }
.boton--principal:hover,
.boton--oscuro:hover { background: #2C1F1F; }
.boton--destacado,
.seccion--oscura .boton--principal,
.aviso .boton--principal { background: var(--acento); color: var(--blanco); }
.boton--destacado:hover,
.seccion--oscura .boton--principal:hover,
.aviso .boton--principal:hover { background: var(--acento-oscuro); }
.boton--borde,
.boton--secundario { background: transparent; color: inherit; border: 1px solid currentColor; }
.boton--borde:hover,
.boton--secundario:hover { background: var(--acento); border-color: var(--acento); color: var(--blanco); }

/* Barra superior chocolate */
.barra { background: var(--oscuro); color: var(--claro); }
.barra.con-sombra { border-bottom-color: var(--linea-oscura); }
.logo__img { width: 40px; height: 40px; }
.logo__texto {
  font-style: normal;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--claro);
}
.hamburguesa span { background: var(--claro); }
.menu { background: var(--oscuro); border-bottom-color: var(--linea-oscura); }
.menu__lista a { text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--linea-oscura); }
@media (min-width: 900px) {
  .menu { background: none; }
  .menu__lista { gap: 2rem; }
  .menu__lista a { font-size: .74rem; letter-spacing: .16em; color: var(--claro); }
  .menu__lista a:hover { color: var(--acento-claro); }
  .menu__reservar { padding: .7rem 1.5rem; }
}

/* ===== Portada chocolate, foto a la derecha y sello rosa ===== */
.portada {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--oscuro);
  color: var(--claro);
}
.portada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 30%;
  opacity: .5;
}
/* Degradado que funde la foto con el chocolate */
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(59, 42, 42, .35) 0%, rgba(59, 42, 42, .75) 55%, var(--oscuro) 100%);
}
.portada__contenido { position: relative; z-index: 2; }
.portada .etiqueta {
  color: var(--acento-claro);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.portada__titulo {
  max-width: none;
  margin-top: 1.4rem;
  font-weight: 400;
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--claro);
}
.portada__titulo span { display: block; }
.portada__grande { font-size: clamp(3.2rem, 12vw, 6.8rem); }
.portada__chica { font-size: clamp(2.1rem, 7.6vw, 4.3rem); line-height: 1.05; }
.portada__titulo::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 1.8rem;
  background: var(--acento-claro);
}
.portada__intro { margin-top: 1.4rem; max-width: 24rem; color: rgba(251, 246, 242, .88); font-size: 1rem; }
.portada__botones { margin-top: 2.2rem; }
.portada__datos {
  margin-top: 2.6rem;
  padding-top: 0;
  border-top: 0;
  color: var(--claro-suave);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portada__datos strong {
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0;
  color: var(--claro);
}

/* Sello circular rosa: el texto gira despacio alrededor de la "P" */
.sello {
  display: none;
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 9%;
  width: 150px;
  height: 150px;
}
.sello circle { fill: none; stroke: var(--linea-oscura); }
.sello text {
  fill: var(--acento-claro);
  font-family: var(--fuente-texto);
  font-size: 11.5px;
  letter-spacing: 3.2px;
}
.sello text:first-of-type {
  transform-box: view-box;
  transform-origin: 100px 100px;
  animation: girar 40s linear infinite;
}
.sello .sello__letra { font-family: var(--fuente-titulos); font-size: 72px; letter-spacing: 0; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (min-width: 720px) { .sello { display: block; } }
@media (min-width: 900px) {
  .portada { min-height: 640px; display: flex; align-items: center; }
  .portada__foto { left: auto; width: 58%; opacity: 1; }
  .portada::after {
    background: linear-gradient(90deg, var(--oscuro) 42%, rgba(59, 42, 42, .55) 62%, rgba(59, 42, 42, .1) 85%),
                linear-gradient(0deg, rgba(59, 42, 42, .6), transparent 30%);
  }
}

/* ===== "Es una experiencia": texto a la izquierda, 3 tarjetas con foto ===== */
.experiencia__grid { display: grid; gap: 2.5rem; }
.experiencia__texto .boton { margin-top: 2rem; }
.experiencia .mosaico {
  grid-area: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  grid-template-columns: none;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 0 16px 6px;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.experiencia .mosaico::-webkit-scrollbar { display: none; }
.experiencia .mosaico .foto:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  overflow: visible;
  scroll-snap-align: start;
  animation: none;
}
.experiencia .mosaico .foto img { aspect-ratio: 3 / 4; height: auto; background: var(--acento-suave); }
.mosaico__pie {
  display: grid;
  gap: .3rem;
  margin-top: 0;
  padding: 1.1rem 1.2rem .4rem;
  border-left: 1px solid var(--linea);
}
.mosaico__titulo { font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; color: var(--chocolate); }
.mosaico__bajada { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chocolate-suave); }
@media (min-width: 720px) {
  .experiencia .mosaico {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}
@media (min-width: 1024px) {
  .experiencia__grid { grid-template-columns: 330px 1fr; gap: 3.5rem; align-items: center; }
  .experiencia .titulo { font-size: 3.6rem; }
}

/* ===== Promos (chocolate) ===== */
.promo-slide { background: var(--oscuro-suave); border-color: var(--linea-oscura); }
.promo-slide__imagen { background: var(--oscuro-suave); }
.promo-slide__titulo { color: var(--claro); }
.promo-slide__oferta { font-style: normal; font-weight: 400; color: var(--acento-claro); }
.promo-slide__solo-texto { background: var(--oscuro-suave); }
.promo-slide__nombre { font-weight: 400; text-transform: uppercase; }
.promo-slide__grande { font-style: normal; font-weight: 400; color: var(--acento-claro); }
.carrusel__flecha { border-color: var(--linea-oscura); color: var(--claro); }
.carrusel__flecha:hover { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
.carrusel__punto::after { background: rgba(251, 246, 242, .25); }
.carrusel__punto[aria-current="true"]::after { background: var(--acento-claro); }

/* ===== Servicios (crema) ===== */
.pestana {
  background: transparent;
  border-color: var(--linea);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pestana:hover { border-color: var(--chocolate); }
.pestana[aria-selected="true"] { background: var(--oscuro); border-color: var(--oscuro); color: var(--claro); }
.carta__item, .carta__item:first-child { border-color: var(--linea); }
.carta__nombre { font-weight: 400; font-size: 1.55rem; }
.carta__puntos { border-bottom-color: var(--linea); }
.carta__precio strong { color: var(--acento); }
.carta__boton {
  border-color: var(--chocolate);
  color: var(--chocolate);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.carta__boton:hover { background: var(--oscuro); color: var(--claro); }
.carta__item--precio .carta__boton { background: var(--oscuro); border-color: var(--oscuro); color: var(--claro); }
.carta__item--precio .carta__boton:hover { background: #2C1F1F; border-color: #2C1F1F; }

/* ===== Producto destacado (chocolate) ===== */
.destacado { background: var(--oscuro); }
.destacado__etiqueta {
  border-color: var(--acento-claro);
  color: var(--acento-claro);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.destacado__titulo { color: var(--claro); }
.destacado__titulo em { display: block; color: var(--acento-claro); }
.destacado__descripcion { color: var(--claro-suave); }
.destacado__puntos li { color: var(--claro); }
.destacado__puntos li::before { border-color: var(--acento-claro); }
.destacado__ideal { font-style: normal; color: var(--claro-suave); }
.destacado__video {
  border-radius: 0;
  box-shadow: none;
  outline: 1px solid var(--acento-claro);
  outline-offset: 14px;
}
.video-tarjeta__play,
.destacado__play { background: var(--acento); color: var(--blanco); }
.video-tarjeta__play:hover,
.destacado__play:hover { background: var(--acento-oscuro); }

/* ===== Videos y galería ===== */
.video-tarjeta__titulo { font-weight: 400; font-size: 1.35rem; }
.seccion--oscura .video-tarjeta__titulo { color: var(--claro); }
.filtro {
  background: transparent;
  border-color: var(--linea-oscura);
  color: var(--claro);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.filtro.activo { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
.galeria .foto { background: var(--oscuro-suave); }

/* ===== Novias (crema, sin tarjeta) ===== */
.novias { background: none; color: var(--chocolate); padding: 0; border-radius: 0; }
#novias .titulo { font-size: clamp(2.4rem, 5.4vw, 3.6rem); }
.novias__texto p { color: var(--chocolate-suave); }
.novias__lista li {
  border-color: var(--linea);
  color: var(--chocolate);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.novias__videos { margin: 0 -16px; padding: 0 16px 6px; scroll-padding-inline: 16px; }
.novias__videos .video-tarjeta__titulo { color: var(--chocolate); }
@media (min-width: 900px) {
  .novias { padding: 0; }
  .novias__videos { margin: 0; padding: 0; }
}

/* ===== Por qué Pretty (chocolate): texto, botón e íconos a la izquierda;
   el video del salón a la derecha, como "Book your moment" ===== */
.reserva__grid,
.reserva__grid.porque--lado { display: grid; gap: 3rem; grid-template-areas: none; }
.reserva .seccion__cabecera { margin-bottom: 2rem; }
.reserva__texto { align-self: center; }
.reserva .porque-fotos,
.porque--lado.reserva__grid .porque-fotos { display: block; margin: 0; grid-area: auto; }
.reserva .porque-fotos__video,
.porque--lado .reserva .porque-fotos__video { max-width: none; width: 100%; }
.reserva .porque-fotos .video-tarjeta__marco,
.porque--lado.reserva__grid .porque-fotos__video .video-tarjeta__marco {
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: 0;
}
.reserva .razones,
.reserva .razones.razones--3,
.porque--lado.reserva__grid .razones.razones--3 {
  grid-area: auto;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
.reserva .razon,
.porque--lado.reserva__grid .razon {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.1rem;
  align-items: start;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea-oscura);
}
.reserva .razon__icono { grid-row: span 2; margin-top: .1rem; stroke: var(--acento-claro); width: 28px; height: 28px; }
.reserva .razon h3,
.porque--lado.reserva__grid .razon h3 {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--claro);
}
.reserva .razon p { margin-top: .4rem; font-size: .9rem; color: var(--claro-suave); }
@media (min-width: 900px) {
  .reserva__grid,
  .reserva__grid.porque--lado { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: stretch; }
  .reserva .porque-fotos .video-tarjeta,
  .reserva .porque-fotos .video-tarjeta__marco { height: 100%; }
  .porque--lado.reserva__grid .porque-fotos__video .video-tarjeta__marco { aspect-ratio: auto; min-height: 560px; }
}
@media (min-width: 1200px) {
  .reserva .razones.razones--3,
  .porque--lado.reserva__grid .razones.razones--3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .reserva .razon,
  .porque--lado.reserva__grid .razon { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .reserva .razon__icono { grid-row: auto; margin: 0 0 .8rem; }
}

/* ===== Testimonios y ubicación (crema) ===== */
.testimonio { background: var(--blanco); }
.testimonio__comillas { color: var(--acento-claro); }
.dato, .dato:first-child { border-color: var(--linea); }
.dato dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.dato dt .icono { color: var(--acento); }
.mapa { background: var(--acento-suave); }

/* ===== Pie chocolate ===== */
.pie { background: var(--oscuro); border-top-color: var(--linea-oscura); color: var(--claro); }
.pie__nombre { font-style: normal; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.pie__enlaces a { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.pie__enlaces a:hover { color: var(--acento-claro); }
.pie__copy { color: var(--claro-suave); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

/* ===== Botón flotante y aviso ===== */
.flotante { background: var(--acento); color: var(--blanco); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.flotante:hover { background: var(--acento-oscuro); }
.aviso { background: var(--oscuro); color: var(--claro); border: 1px solid var(--linea-oscura); }
.aviso::backdrop { background: rgba(59, 42, 42, .7); }
.aviso__cerrar { color: var(--claro); }
.aviso__cerrar:hover { background: var(--oscuro-suave); }
.aviso__titulo { font-weight: 400; text-transform: uppercase; }
.aviso__titulo em { font-style: normal; color: var(--acento-claro); }
.aviso__detalle { font-weight: 400; color: var(--claro); }
.aviso__vigencia { color: var(--claro-suave); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }