/* ==========================================================================
   WowCita · Portada pública (Módulo 14A)

   Misma paleta "Laca" que el resto de WowCita. Lo memorable de esta página es UNA cosa:
   la foto de la portada recortada con forma de uña (--forma-una), que se "pinta" de abajo hacia arriba
   al cargar, como una pincelada de esmalte. Todo lo demás se queda tranquilo: texto a la izquierda,
   pocas líneas, sin tarjetas iguales repetidas.
   ========================================================================== */

.portada {
  --ancho-portada: 1120px;
  --titulo-heroe: clamp(2.35rem, 1.4rem + 4.6vw, 4.4rem);
  --titulo-seccion: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  scroll-behavior: smooth;
}

/* Al tocar "Precios" en el menú, la sección no queda escondida debajo del encabezado fijo */
.portada section[id] { scroll-margin-top: 72px; }

.envoltura {
  width: 100%;
  max-width: var(--ancho-portada);
  margin: 0 auto;
  padding-inline: var(--espacio-4);
}

/* Enlace para quien navega con teclado: aparece solo al recibir el foco */
.saltar {
  position: absolute;
  left: var(--espacio-3);
  top: -100px;
  z-index: 30;
  padding: var(--espacio-2) var(--espacio-4);
  background: var(--ciruela);
  color: #fff;
  border-radius: var(--radio-control);
}
.saltar:focus { top: var(--espacio-3); color: #fff; }

/* ---------- Encabezado ---------- */
.sitio-encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--porcelana);
  border-bottom: 1px solid var(--borde);
}

.sitio-encabezado__interior {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "marca acciones" "menu menu";
  align-items: center;
  column-gap: var(--espacio-3);
  padding-block: var(--espacio-2) 0;
}

.sitio-encabezado .marca { grid-area: marca; }

.sitio-encabezado__acciones {
  grid-area: acciones;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--espacio-3);
}

.sitio-encabezado__acciones .boton { white-space: nowrap; padding-inline: var(--espacio-3); }

.sitio-entrar {
  font-size: var(--texto-s);
  font-weight: 600;
  color: var(--ciruela);
  text-decoration: none;
  white-space: nowrap;
}
.sitio-entrar:hover { color: var(--frambuesa); text-decoration: underline; }

/* En el celular, las 4 secciones van en una fila debajo del logo (cabe en 360 px sin deslizar) */
.sitio-menu { grid-area: menu; }
.sitio-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.sitio-menu a {
  display: block;
  padding: var(--espacio-2) var(--espacio-1) var(--espacio-3);
  font-size: var(--texto-s);
  font-weight: 600;
  color: var(--lila-humo);
  text-decoration: none;
}
.sitio-menu a:hover { color: var(--ciruela); }

/* ---------- Portada (héroe) ---------- */
.heroe { padding-block: var(--espacio-8) var(--espacio-10); }

.heroe__interior {
  display: grid;
  gap: var(--espacio-10);
}

.heroe h1 {
  font-size: var(--titulo-heroe);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 13ch;
  margin-bottom: var(--espacio-5);
}

.heroe__bajada {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--lila-humo);
  max-width: 46ch;
  margin-bottom: var(--espacio-6);
}

.heroe__botones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
.heroe__botones .boton { flex: 1 1 200px; }

.heroe__nota { margin: var(--espacio-4) 0 0; font-size: var(--texto-s); color: var(--lila-humo); }

.heroe__figura {
  position: relative;
  margin: 0 auto;
  width: min(100%, 360px);
  padding: 0 var(--espacio-4);
}

/* La uña: la foto recortada con la misma forma almendra de las muestras de esmalte */
.heroe__una {
  aspect-ratio: 4 / 5;
  border-radius: var(--forma-una);
  overflow: hidden;
  background: var(--rubor);
  box-shadow: inset 0 0 0 1px rgb(42 23 48 / 0.06);
  animation: pincelada 900ms var(--suave) 120ms both;
}
.heroe__una img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* La única animación de la página: la uña se "pinta" de abajo hacia arriba */
@keyframes pincelada {
  from { clip-path: inset(100% 0 0 0 round 40%); }
  to { clip-path: inset(0 0 0 0 round 0); }
}

/* Fichas que muestran lo que se ve dentro de WowCita */
.heroe__ficha {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--superficie);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-flotante);
  font-size: var(--texto-s);
  line-height: 1.3;
}
.heroe__ficha strong,
.heroe__ficha small { display: block; }
.heroe__ficha small { color: var(--lila-humo); font-size: var(--texto-xs); }

/* Las fichas no tapan la cara ni la mano con la fresa de la foto (Módulo 14C): la cita a la derecha, el abono abajo a la izquierda */
.heroe__ficha--cita { right: -4px; top: 60%; }
.heroe__ficha--cita .insignia { display: none; } /* en el celular no cabe: se muestra desde 720 px */
.heroe__ficha--pago { left: -4px; bottom: 6%; }

.heroe__hora {
  font-family: var(--letra-titulos);
  font-weight: 800;
  font-size: var(--texto-l);
  letter-spacing: -0.02em;
}

.heroe__punto {
  width: 14px;
  height: 18px;
  border-radius: var(--forma-una);
  background: var(--menta);
  flex: none;
}

/* ---------- Encabezado de cada sección ---------- */
.seccion-cabecera { max-width: 40rem; margin-bottom: var(--espacio-8); }
.seccion-cabecera h2 {
  font-size: var(--titulo-seccion);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: var(--espacio-3);
}
.seccion-cabecera p { font-size: var(--texto-l); color: var(--lila-humo); margin: 0; }

/* ---------- Funciones: antes, durante y después de la cita ---------- */
.funciones {
  padding-block: var(--espacio-10) calc(var(--espacio-10) * 1.5);
  background: var(--superficie);
  border-block: 1px solid var(--borde);
}

.momentos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-10);
}

.momento h3 {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  font-size: var(--texto-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--espacio-5);
}

/* Muestra de esmalte: un color por momento del día */
.muestra-una {
  width: 22px;
  height: 28px;
  flex: none;
  border-radius: var(--forma-una);
}
.momento--antes .muestra-una { background: var(--esmalte-3); }
.momento--durante .muestra-una { background: var(--esmalte-1); }
.momento--despues .muestra-una { background: var(--esmalte-4); }

.momento dl { margin: 0; }
.momento dt { font-weight: 700; }
.momento dd {
  margin: var(--espacio-1) 0 var(--espacio-5);
  color: var(--lila-humo);
  max-width: 44ch;
}
.momento dd:last-child { margin-bottom: 0; }

/* ---------- Planes y prueba gratis ---------- */
.planes { padding-block: calc(var(--espacio-10) * 1.5); }

.prueba {
  display: grid;
  gap: var(--espacio-2);
  justify-items: start;
  padding: var(--espacio-6);
  margin-bottom: var(--espacio-8);
  background: var(--rubor-claro);
  border-radius: var(--radio-ventana);
}
.prueba__titulo {
  margin: 0;
  font-family: var(--letra-titulos);
  font-size: var(--texto-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.prueba__texto { margin: 0 0 var(--espacio-3); color: var(--lila-humo); max-width: 52ch; }

.lista-planes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-4);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--espacio-6);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}

/* El plan recomendado se distingue por su borde, no por un tamaño distinto */
.plan--profesional { border: 2px solid var(--frambuesa); }

.plan__muestra {
  width: 28px;
  height: 36px;
  border-radius: var(--forma-una);
  margin-bottom: var(--espacio-4);
}
.plan--basico .plan__muestra { background: var(--esmalte-3); }
.plan--profesional .plan__muestra { background: var(--esmalte-1); }
.plan--salon .plan__muestra { background: var(--esmalte-2); }

.plan h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-xl);
  font-weight: 800;
  margin-bottom: var(--espacio-2);
}

.plan__recomendado {
  font-family: var(--letra-texto);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0;
  padding: 2px 10px;
  border-radius: var(--radio-pastilla);
  background: var(--rubor);
  color: var(--frambuesa-oscura);
}

.plan__para { color: var(--lila-humo); margin-bottom: var(--espacio-4); }

.plan__precio { margin-bottom: var(--espacio-5); color: var(--lila-humo); }
.plan__precio strong {
  font-family: var(--letra-titulos);
  font-size: var(--texto-xxl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ciruela);
  margin-right: var(--espacio-1);
}

.plan__incluye {
  list-style: none;
  margin: 0 0 var(--espacio-6);
  padding: 0;
  flex: 1;
}
.plan__incluye li {
  position: relative;
  padding-left: var(--espacio-6);
  margin-bottom: var(--espacio-2);
}
/* Chulito dibujado con bordes (sin imágenes ni íconos externos) */
.plan__incluye li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.35em;
  width: 6px;
  height: 11px;
  border: solid var(--menta);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.plan__incluye sup a { text-decoration: none; font-weight: 700; padding: 0 2px; }

.nota-planes {
  margin: var(--espacio-5) 0 0;
  font-size: var(--texto-s);
  color: var(--lila-humo);
  max-width: 70ch;
}

/* ---------- Preguntas frecuentes ---------- */
.preguntas {
  padding-block: var(--espacio-10) calc(var(--espacio-10) * 1.5);
  background: var(--superficie);
  border-top: 1px solid var(--borde);
}

.preguntas__lista { border-top: 1px solid var(--borde); }

.preguntas details { border-bottom: 1px solid var(--borde); }

.preguntas summary {
  position: relative;
  list-style: none; /* quita el triángulo del navegador: se dibuja un "+" propio */
  padding: var(--espacio-4) var(--espacio-8) var(--espacio-4) 0;
  font-weight: 700;
  font-size: var(--texto-l);
  line-height: 1.35;
  cursor: pointer;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+";
  position: absolute;
  right: var(--espacio-1);
  top: var(--espacio-4);
  font-family: var(--letra-titulos);
  font-size: var(--texto-xl);
  line-height: 1;
  color: var(--frambuesa);
  transition: transform var(--rapido) var(--suave);
}
.preguntas details[open] summary::after { transform: rotate(45deg); } /* el "+" se vuelve "×" al abrir */
.preguntas summary:hover { color: var(--frambuesa-oscura); }
.preguntas details p { margin: 0 0 var(--espacio-5); max-width: 62ch; color: var(--lila-humo); }

/* ---------- Cierre y contacto ---------- */
.cierre {
  padding-block: calc(var(--espacio-10) * 1.5);
  background: var(--ciruela);
  color: var(--porcelana);
}
.cierre h2 {
  font-size: var(--titulo-seccion);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin-bottom: var(--espacio-3);
}
.cierre p { max-width: 50ch; font-size: var(--texto-l); color: #e3d6e6; }
.cierre__botones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-top: var(--espacio-6); }
.cierre__botones .boton { flex: 1 1 200px; }
.cierre .cierre__entrar { background: transparent; color: var(--porcelana); border-color: rgb(251 249 250 / 0.4); }
.cierre .cierre__entrar:hover { background: rgb(251 249 250 / 0.1); color: #fff; }

.cierre__canales { margin-top: var(--espacio-8); padding-top: var(--espacio-6); border-top: 1px solid rgb(251 249 250 / 0.18); }
.cierre__canales p { font-size: var(--texto-m); margin-bottom: var(--espacio-3); }
.cierre__canales ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-5); }
.cierre__canales a { color: #fff; font-weight: 700; }
.cierre :focus-visible { outline-color: var(--rubor); }

/* ---------- Pie de página ---------- */
.sitio-pie { padding-block: var(--espacio-10) var(--espacio-6); }
.sitio-pie__interior { display: grid; gap: var(--espacio-8); }
.sitio-pie__marca p { margin: var(--espacio-2) 0 0; color: var(--lila-humo); max-width: 32ch; }

.sitio-pie__enlaces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-6) var(--espacio-4);
}
.sitio-pie__enlaces h2 {
  font-family: var(--letra-texto);
  font-size: var(--texto-s);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--lila-humo);
  margin-bottom: var(--espacio-2);
}
.sitio-pie__enlaces ul { list-style: none; margin: 0; padding: 0; }
.sitio-pie__enlaces li { margin-bottom: var(--espacio-1); }
.sitio-pie__enlaces a { display: inline-block; padding: 4px 0; color: var(--ciruela); text-decoration: none; }
.sitio-pie__enlaces a:hover { color: var(--frambuesa); text-decoration: underline; }

.sitio-pie__derechos {
  margin-top: var(--espacio-8);
  padding-top: var(--espacio-5);
  border-top: 1px solid var(--borde);
  font-size: var(--texto-s);
  color: var(--lila-humo);
}

/* ==========================================================================
   Pantallas medianas y grandes
   ========================================================================== */
@media (min-width: 720px) {
  .envoltura { padding-inline: var(--espacio-6); }
  .sitio-encabezado__acciones .boton { padding-inline: var(--espacio-4); }
  .sitio-entrar { font-size: var(--texto-m); }
  .heroe__bajada { font-size: var(--texto-l); }

  .heroe__botones .boton { flex: 0 0 auto; }
  .heroe__ficha--cita .insignia { display: inline-flex; }
  .heroe__figura { width: min(100%, 420px); }

  .momentos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-8); }
  /* Una línea fina separa los tres momentos, como las etapas de un mismo día */
  .momento + .momento { border-left: 1px solid var(--borde); padding-left: var(--espacio-8); }

  .prueba { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--espacio-8); padding: var(--espacio-8); }
  .prueba .boton { grid-column: 2; grid-row: 1 / span 2; }
  .prueba__texto { margin-bottom: 0; }

  .lista-planes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .cierre__botones .boton { flex: 0 0 auto; }

  .sitio-pie__enlaces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .portada section[id] { scroll-margin-top: 64px; }

  /* Todo en una sola fila: logo, menú al centro y botones a la derecha */
  .sitio-encabezado__interior {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marca menu acciones";
    padding-block: var(--espacio-3);
  }
  .sitio-menu ul { justify-content: center; gap: var(--espacio-2); }
  .sitio-menu a { padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radio-control); font-size: var(--texto-m); }
  .sitio-menu a:hover { background: var(--rubor-claro); }

  .heroe { padding-block: var(--espacio-10) calc(var(--espacio-10) * 2); }
  .heroe__interior { grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--espacio-10); }
  .heroe__figura { width: 100%; max-width: 440px; margin-right: 0; }
  .heroe__ficha--cita { right: -40px; }
  .heroe__ficha--pago { left: -40px; }

  .preguntas__interior { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--espacio-10); align-items: start; }
  .preguntas .seccion-cabecera { position: sticky; top: 96px; }

  .sitio-pie__interior { grid-template-columns: 1fr 2fr; }
}

/* ==========================================================================
   Módulo 15D · Transiciones de la portada
   1. Al ir a "Iniciar sesión" o "Probar gratis", el logo del encabezado vuela hasta la otra página.
   2. Desplazamiento suave entre secciones (Inicio, Funciones, Precios, Contacto).
   3. Entrada de la portada: el texto aparece en secuencia y después las fichas.
   4. Al bajar, cada bloque aparece suavemente una sola vez (portada.js le pone .revelado).
   5. El menú marca la sección en la que estás, y el encabezado toma sombra al bajar.
   Todo se apaga con "reducir movimiento".
   ========================================================================== */
@view-transition { navigation: auto; }
.sitio-encabezado .marca img { view-transition-name: logo-wowcita; }
::view-transition-group(logo-wowcita) { animation-duration: 560ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 280ms; }

/* El desplazamiento suave debe ir en <html> (es el que se desplaza), no en <body> */
html:has(body.portada) { scroll-behavior: smooth; }

.sitio-encabezado { transition: box-shadow 200ms var(--suave); }
.sitio-encabezado.con-sombra { box-shadow: 0 6px 24px rgb(42 23 48 / 0.08); }

/* Sección actual en el menú: una rayita frambuesa debajo */
.sitio-menu a { position: relative; transition: color var(--rapido); }
.sitio-menu a[aria-current="true"] { color: var(--ciruela); }
.sitio-menu a[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 3px;
  margin-left: -9px;
  border-radius: 2px;
  background: var(--frambuesa);
}

/* Entrada de la portada, en secuencia */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.heroe__texto > * { animation: aparecer 700ms var(--suave) both; }
.heroe__texto > :nth-child(2) { animation-delay: 90ms; }
.heroe__texto > :nth-child(3) { animation-delay: 180ms; }
.heroe__texto > :nth-child(4) { animation-delay: 260ms; }
.heroe__ficha { animation: aparecer 600ms var(--suave) 760ms both; }
.heroe__ficha--pago { animation-delay: 900ms; }

/* Aparecer al bajar: solo si portada.js lo activó (sin JavaScript, todo se ve normal) */
.js-revelar [data-revelar] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--suave), transform 700ms var(--suave);
  transition-delay: var(--retraso, 0ms);
}
.js-revelar [data-revelar].revelado { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html:has(body.portada) { scroll-behavior: auto; }
  .js-revelar [data-revelar] { opacity: 1; transform: none; }
}