/* ============================================================
   Bodyland · Estilo alegre (octubre 2026)
   Cada bloque depende de una clase en <html> (index.php y
   aviso-de-privacidad.php). Para quitar una idea, borra su clase;
   para volver al diseño anterior, borra todas:
   p-letras, p-rosa, a-aparicion, a-zoom, a-sello, a-anillo,
   a-parallax, a-estrellas, a-sombra
   ============================================================ */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 1000; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Satisfy";
  src: url("../fonts/satisfy-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --rosa: #F2B5BE;
  --rosa-vivo: #E596A3;
  --rosa-suave: #FBE6E9;
  --vino: #4A1720;
  --manuscrita: "Satisfy", "Segoe Script", cursive;
}

/* Marco para que las fotos con forma de arco puedan acercarse sin salirse */
.arco__marco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px 999px 14px 14px;
}
.arco__marco img { display: block; }

/* ------------------------------------------------------------
   1. Letras: Fredoka en títulos, Nunito en textos, Satisfy en acentos
   ------------------------------------------------------------ */

html.p-letras {
  --serif: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --sans: "Nunito", "Segoe UI", system-ui, sans-serif;
}
html.p-letras body { font-size: 1.04rem; }

html.p-letras .titulo-seccion,
html.p-letras .formulario__titulo {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.12;
}
html.p-letras .titulo-seccion { font-size: clamp(2rem, 3.6vw, 2.9rem); }

html.p-letras .portada__titulo {
  font-weight: 600;
  font-size: clamp(2.7rem, 5.6vw, 4.7rem);
  letter-spacing: -0.01em;
  line-height: 1.04;
}
html.p-letras .portada__titulo span:nth-child(3) {
  font-family: var(--manuscrita);
  font-weight: 400;
  font-size: 1.22em;
  line-height: 1.1;
  color: var(--salvia-profunda);
  letter-spacing: 0;
}
html.p-letras .portada__pregunta {
  font-family: var(--manuscrita);
  font-style: normal;
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
}

html.p-letras .nosotros__cita p {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.12rem, 1.6vw, 1.3rem);
  line-height: 1.55;
}

html.p-letras .area__intro {
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1.55;
}

html.p-letras .servicio__nombre {
  font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
}

html.p-letras .frase__cita {
  font-family: var(--manuscrita);
  font-style: normal;
  font-size: clamp(2.8rem, 6.4vw, 5rem);
  line-height: 1.15;
}

html.p-letras .boton,
html.p-letras .pestana { font-weight: 700; }
html.p-letras .pestana[aria-selected="true"] { font-weight: 800; }

html.p-letras .cinta__item {
  font-family: "Fredoka", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
}

/* ------------------------------------------------------------
   2. Rosa empolvado
   ------------------------------------------------------------ */

html.p-rosa { --rubor: var(--rosa); }

html.p-rosa .cinta {
  background: var(--rosa);
  border-top: 1.5px solid var(--vino);
  border-bottom: 1.5px solid var(--vino);
}
html.p-rosa .cinta::before { background: linear-gradient(90deg, var(--rosa), transparent); }
html.p-rosa .cinta::after { background: linear-gradient(-90deg, var(--rosa), transparent); }
html.p-rosa .cinta__item,
html.p-rosa .cinta__item .icono { color: var(--vino); }
html.p-rosa .cinta__item:hover,
html.p-rosa .cinta__item:focus-visible { color: #000; }

html.p-rosa .frase__cita,
html.p-rosa .frase__texto { color: var(--vino); }

/* ------------------------------------------------------------
   3. Aparición al bajar
   ------------------------------------------------------------ */

html.a-aparicion main { overflow-x: clip; }
html.a-aparicion .rev {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
html.a-aparicion .rev.izq { transform: translateX(-40px); }
html.a-aparicion .rev.der { transform: translateX(40px); }
html.a-aparicion .rev.visto { opacity: 1; transform: none; }
html.a-aparicion .rev.d1 { transition-delay: .12s; }
html.a-aparicion .rev.d2 { transition-delay: .24s; }
html.a-aparicion .rev.d3 { transition-delay: .36s; }
html.a-aparicion .rev.d4 { transition-delay: .48s; }

/* ------------------------------------------------------------
   4. Zoom lento en la foto principal y al pasar el cursor
   ------------------------------------------------------------ */

html.a-zoom .portada__foto img { animation: zoom-lento 7s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes zoom-lento { from { transform: scale(1.12); } to { transform: scale(1); } }

html.a-zoom .arco__marco img,
html.a-zoom .espacios__amplia img { transition: transform 1.2s ease; }
html.a-zoom .arco:hover .arco__marco img,
html.a-zoom .galeria__item:hover .arco__marco img { transform: scale(1.06); }
html.a-zoom .espacios__amplia { overflow: hidden; border-radius: 18px; }
html.a-zoom .espacios__amplia:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------
   5. Sello giratorio junto a la foto principal
   ------------------------------------------------------------ */

.sello { display: none; }
html.a-sello .sello {
  position: absolute;
  z-index: 3;
  left: -54px;
  bottom: 130px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--blanco);
  display: grid;
  place-items: center;
  color: var(--oro);
  box-shadow: 0 12px 30px rgba(52, 48, 44, .14);
  text-decoration: none;
}
.sello__giro {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  animation: girar 18s linear infinite;
}
.sello__giro text {
  font: 700 9.2px var(--sans);
  letter-spacing: 0;
  text-transform: uppercase;
  fill: var(--salvia-profunda);
}
.sello__centro {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--oro-claro);
  display: grid;
  place-items: center;
  transition: background-color .3s ease, color .3s ease;
}
.sello__centro svg { width: 38px; height: auto; }
html.a-sello .sello:hover .sello__centro { background: var(--salvia-profunda); color: var(--blanco); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   6. Íconos de servicios con anillo punteado
   ------------------------------------------------------------ */

.pestana__anillo { display: contents; }
html.a-anillo .pestana__anillo {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: background-color .3s ease;
}
html.a-anillo .pestana__anillo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed var(--oro-claro);
  transition: transform 1s ease, border-color .3s ease;
}
html.a-anillo .pestana:hover .pestana__anillo::before { transform: rotate(180deg); border-color: var(--oro); }
html.a-anillo .pestana[aria-selected="true"] .pestana__anillo { background: var(--rosa-suave); }
html.a-anillo .pestana[aria-selected="true"] .pestana__anillo::before { border-color: var(--rosa-vivo); }

/* ------------------------------------------------------------
   7. Fondo con profundidad en la frase
   ------------------------------------------------------------ */

.frase__fondo { display: none; }
html.a-parallax .frase { position: relative; overflow: hidden; isolation: isolate; }
html.a-parallax .frase__fondo {
  display: block;
  position: absolute;
  inset: -90px 0;
  z-index: -2;
  background: url("../img/cabina-principal.webp") center / cover no-repeat;
  will-change: transform;
}
html.a-parallax .frase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rubor);
  opacity: .86;
}

/* ------------------------------------------------------------
   8. Estrellitas que destellan
   ------------------------------------------------------------ */

.estrella { display: none; }
html.a-estrellas .estrella {
  display: block;
  position: absolute;
  z-index: 1;
  width: var(--t, 22px);
  height: var(--t, 22px);
  color: var(--rosa-vivo);
  pointer-events: none;
  animation: destello 3.4s ease-in-out infinite;
  animation-delay: var(--r, 0s);
}
html.a-estrellas .frase .estrella { color: var(--blanco); }
.estrella svg { width: 100%; height: 100%; display: block; fill: currentColor; }
@keyframes destello {
  0%, 100% { opacity: .35; transform: scale(.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(20deg); }
}
html.a-estrellas .frase { position: relative; }

/* ------------------------------------------------------------
   9. Sombra desplazada en títulos, como en las promociones
   ------------------------------------------------------------ */

html.a-sombra .portada__titulo span:not(:nth-child(3)),
html.a-sombra .titulo-seccion {
  text-shadow: 3px 3px 0 var(--rosa);
}
html.a-sombra .frase__cita { text-shadow: 3px 3px 0 rgba(255, 255, 255, .55); }

/* ------------------------------------------------------------
   Ajustes para celular
   ------------------------------------------------------------ */

@media (max-width: 960px) {
  html.a-sello .sello { width: 104px; height: 104px; left: -10px; bottom: 30px; }
  .sello__centro { width: 46px; height: 46px; }
  .sello__centro svg { width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html.a-aparicion .rev { opacity: 1; transform: none; }
}