/* NailArts.cl · B · Kawaii pastel (propuesta para comparar)
   Tokens de disenos/B-kawaii-pastel.md. No escribir hex fuera de :root. */

:root {
  /* Color */
  --fondo: #FDE4EE;
  --blanco: #FFFFFF;
  --rosa-medio: #F7B9D6;
  --chicle: #D6337F;          /* relleno; texto blanco en negrita encima */
  --chicle-texto: #B8256B;    /* rosado como texto grande sobre blanco */
  --frambuesa: #7A2E52;
  --frambuesa-suave: #9C3D68;

  /* Tipografía */
  --f-display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-cuerpo: "Nunito", system-ui, sans-serif;
  --t-hero: clamp(2.5rem, 10vw, 5rem);
  --t-seccion: clamp(1.75rem, 5vw, 2.5rem);
  --t-sub: 1.375rem;
  --t-cuerpo: 1rem;
  --t-chico: 0.875rem;

  /* Espaciado */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 72px;
  --e-9: 112px;

  /* Forma */
  --r-tarjeta: 24px;
  --r-foto: 20px;
  --r-pastilla: 999px;
  --marco: 6px solid var(--blanco);
  --sombra-sticker: 0 6px 0 var(--rosa-medio);
  --margen: 16px;
  --ancho: 1100px;
  --alto-cabecera: 64px;

  /* Movimiento */
  --dur-rebote: 200ms;
  --dur-portada: 1100ms; /* crossfade de las fotos de portada */
  --curva-rebote: cubic-bezier(.34, 1.56, .64, 1);
}

@media (min-width: 768px) {
  :root { --margen: 32px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + var(--e-4));
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--frambuesa);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
}

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: var(--frambuesa); font-weight: 800; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--frambuesa);
  outline-offset: 3px;
}

.contenedor {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Saltar al contenido */
.saltar {
  position: absolute;
  left: var(--e-2);
  top: -100px;
  z-index: 20;
  padding: var(--e-2) var(--e-4);
  background: var(--blanco);
  border-radius: var(--r-pastilla);
}
.saltar:focus { top: var(--e-2); }

/* Marcador de dato pendiente */
.pendiente {
  background: var(--blanco);
  border: 2px dashed var(--frambuesa);
  border-radius: 12px;
  color: var(--frambuesa);
  font-size: var(--t-chico);
  font-weight: 800;
  padding: var(--e-2) var(--e-3);
}

/* Cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fondo);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--alto-cabecera);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.375rem;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--e-1);
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--e-3);
  text-decoration: none;
}
.nav a:hover { text-decoration: underline; }

.nav .nav__reserva {
  background: var(--blanco);
  border-radius: var(--r-pastilla);
  padding-inline: var(--e-4);
}
.nav .nav__reserva:hover { text-decoration: none; background: var(--rosa-medio); }

@media (max-width: 479px) {
  .nav__extra { display: none; }
}

.marca__logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blanco);
}

/* Botones */
.acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-4);
}

.boton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--e-3) var(--e-6);
  border-radius: var(--r-pastilla);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform var(--dur-rebote) var(--curva-rebote),
    box-shadow var(--dur-rebote) var(--curva-rebote);
}

.boton--principal {
  background: var(--chicle);
  color: var(--blanco);
  box-shadow: 0 5px 0 var(--frambuesa);
}
.boton--principal:hover,
.boton--principal:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--frambuesa);
}
.boton--principal:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--frambuesa);
}

.boton--secundario {
  background: var(--blanco);
  color: var(--frambuesa);
}
.boton--secundario:hover { background: var(--rosa-medio); }

/* Portada
   Móvil: franja de fotos arriba y la tarjeta montada encima.
   Escritorio: tarjeta a la izquierda; fotos a la derecha (~58%) fundidas
   hacia el rosado, para que la tarjeta no tape las uñas. */
.portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fondo);
  padding-bottom: var(--e-8);
  text-align: center;
}

/* Borde festoneado abajo: ondas del color de la página sobre la foto */
.portada::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  height: 24px;
  background: radial-gradient(circle at 12px 24px, var(--fondo) 12px, transparent 12.5px) 0 0 / 24px 24px repeat-x;
}

.portada__fondo {
  position: relative;
  height: 280px;
  background: var(--rosa-medio);
}

.portada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-portada) ease-in-out;
}
.portada__foto.is-activa { opacity: 1; }

.portada__centro {
  position: relative;
  display: grid;
  margin-top: calc(-1 * var(--e-7));
}

.portada__tarjeta {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  background: var(--blanco);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-sticker);
  padding: var(--e-8) var(--e-5) var(--e-6);
}

.logo-circulo {
  position: absolute;
  top: calc(-1 * var(--e-7));
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: auto; /* sin esto, el atributo height le gana al aspect-ratio */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 0 0 4px var(--blanco), 0 6px 0 4px var(--rosa-medio);
  object-fit: contain;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.2;
}

.portada__titulo {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 1;
}

.portada__bajada {
  color: var(--frambuesa-suave);
  font-size: 1.125rem;
  margin-bottom: var(--e-3);
  text-wrap: balance;
}

/* Controles de las fotos: pastilla blanca con puntos */
.portada__controles {
  position: absolute;
  top: var(--e-3);
  right: var(--margen);
  z-index: 2;
  display: flex;
  padding-inline: var(--e-1);
  background: var(--blanco);
  border-radius: var(--r-pastilla);
  box-shadow: 0 3px 0 var(--rosa-medio);
}
.portada__punto,
.portada__pausa {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--frambuesa);
  cursor: pointer;
}
.portada__punto::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--r-pastilla);
  border: 2px solid var(--frambuesa);
  transition: width var(--dur-rebote) var(--curva-rebote), background-color var(--dur-rebote) ease-out;
}
.portada__punto[aria-current="true"]::before {
  width: 24px;
  background: var(--chicle);
  border-color: var(--chicle);
}
.portada__pausa svg { fill: currentColor; }
.portada__pausa .icono-play,
.portada__pausa[aria-pressed="true"] .icono-pausa { display: none; }
.portada__pausa[aria-pressed="true"] .icono-play { display: block; }

@media (min-width: 768px) {
  .portada {
    min-height: 600px;
    display: grid;
    align-items: center;
    padding-block: var(--e-8);
  }
  .portada__fondo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    height: auto;
  }
  /* La foto se funde con el rosado por la izquierda */
  .portada__fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--fondo) 0%, color-mix(in srgb, var(--fondo) 0%, transparent) 30%);
  }
  .portada__centro {
    margin-top: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .portada__tarjeta {
    transform: rotate(-1.5deg);
    padding: var(--e-8) var(--e-6) var(--e-6);
  }
  .logo-circulo { width: 128px; top: calc(-1 * var(--e-8)); font-size: 0.8125rem; }
  .portada__controles {
    top: auto;
    bottom: var(--e-7);
  }
}

/* Secciones */
.seccion { padding-block: var(--e-8) 0; }
.seccion:last-of-type { padding-bottom: var(--e-8); }

.titulo-seccion {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-seccion);
  line-height: 1.1;
}

.bajada {
  margin-top: var(--e-2);
  color: var(--frambuesa-suave);
}

/* Galería: stickers */
.stickers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5) var(--e-4);
  margin-top: var(--e-6);
}

@media (min-width: 768px) {
  .stickers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-6);
  }
}

.sticker {
  position: relative;
  border: var(--marco);
  border-radius: var(--r-foto);
  background: var(--blanco);
  box-shadow: var(--sombra-sticker);
  transform: rotate(-2deg);
  transition: transform var(--dur-rebote) var(--curva-rebote);
}
.sticker:nth-child(3n + 2) { transform: rotate(1.5deg); }
.sticker:nth-child(3n) { transform: rotate(-1deg); }
.sticker:hover,
.sticker:focus-within { transform: translateY(-3px) rotate(0); }

.sticker__abrir {
  display: block;
  border-radius: calc(var(--r-foto) - 6px);
  cursor: zoom-in;
}

/* Cuántas piezas trae el trabajo (se ven en el visor) */
.sticker__cuenta {
  position: absolute;
  top: calc(-1 * var(--e-2));
  right: calc(-1 * var(--e-2));
  background: var(--chicle);
  color: var(--blanco);
  border-radius: var(--r-pastilla);
  box-shadow: 0 2px 0 var(--frambuesa);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  padding: 6px var(--e-2);
  pointer-events: none;
}

.sticker img {
  display: block;
  width: 100%;
  height: auto; /* sin esto, el atributo height le gana al aspect-ratio */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--r-foto) - 6px);
}
/* Sticker de texto que lleva a Instagram */
.sticker--enlace {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--e-1);
  aspect-ratio: 1;
  padding: var(--e-4);
  background: var(--chicle);
  color: var(--blanco);
  text-align: center;
  text-decoration: none;
}
.sticker--enlace__grande {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  line-height: 1.1;
}

.sticker figcaption {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--e-3));
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  text-align: center;
  line-height: 1.3;
  background: var(--blanco);
  border-radius: 16px;
  box-shadow: 0 2px 0 var(--rosa-medio);
  font-size: var(--t-chico);
  font-weight: 800;
  padding: var(--e-1) var(--e-3);
}


/* Galería recortada (js/galeria.js): los primeros trabajos + "Ver todos" */
.galeria--recortada .sticker--extra { display: none; }
.galeria__acciones {
  margin-top: var(--e-7);
  text-align: center;
}

/* Sobre mí: foto como sticker + texto */
.sobre {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}

.sobre__foto {
  justify-self: center;
  width: min(100%, 360px);
  border: var(--marco);
  border-radius: var(--r-foto);
  background: var(--blanco);
  box-shadow: var(--sombra-sticker);
  transform: rotate(2deg);
}

.sobre__foto img,
.sobre__marcador {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--r-foto) - 6px);
  text-align: center;
}
.sobre__marcador.pendiente { background: var(--rosa-medio); }

.sobre__texto {
  display: grid;
  gap: var(--e-4);
  justify-items: start;
}

.sobre__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.sobre__etiquetas li {
  background: var(--blanco);
  border-radius: var(--r-pastilla);
  box-shadow: 0 2px 0 var(--rosa-medio);
  font-size: var(--t-chico);
  font-weight: 800;
  padding: var(--e-1) var(--e-3);
}

.sobre__ig { color: var(--frambuesa-suave); }

@media (min-width: 768px) {
  .sobre { grid-template-columns: 5fr 7fr; gap: var(--e-8); }
}

/* Tarjetas */
.tarjeta {
  display: grid;
  gap: var(--e-3);
  align-content: start;
  background: var(--blanco);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-sticker);
  padding: var(--e-5);
}

.tarjeta h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-sub);
}

.servicios {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-6);
}

@media (min-width: 560px) {
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .servicios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tarjeta de servicio: el precio es el dato héroe; el nombre, secundario */
.servicio { align-content: start; }
.servicio__precio {
  order: -1;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--chicle-texto);
}
.servicio__desde {
  font-family: var(--f-cuerpo);
  font-size: var(--t-chico);
  font-weight: 800;
  color: var(--frambuesa-suave);
}
.servicio__nota {
  font-size: var(--t-chico);
  color: var(--frambuesa-suave);
}

/* Diseños y decoraciones: lista de precios por uña */
.decoraciones { margin-top: var(--e-5); }
.decoraciones__lista {
  display: grid;
  gap: var(--e-2);
}
.decoraciones__lista div {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
}
.decoraciones__lista dt { flex: none; }
/* Línea punteada entre el nombre y el precio */
.decoraciones__lista div::after {
  content: "";
  order: 1;
  flex: 1;
  border-bottom: 2px dotted var(--rosa-medio);
  translate: 0 -4px;
}
.decoraciones__lista dd {
  order: 2;
  flex: none;
  font-weight: 800;
}
.decoraciones__lista dd span {
  font-weight: 400;
  font-size: var(--t-chico);
  color: var(--frambuesa-suave);
}

.servicios__incluye {
  margin-top: var(--e-5);
  text-align: center;
  color: var(--frambuesa-suave);
  font-weight: 800;
  text-wrap: balance;
}

/* Códigos de descuento */
.codigos {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-6);
}
@media (min-width: 560px) {
  .codigos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.codigo__cupon {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-4);
  border: 2px dashed var(--chicle);
  border-radius: 14px;
  background: var(--fondo);
  text-align: center;
}
.codigo__cupon span { font-size: var(--t-chico); color: var(--frambuesa-suave); }
.codigo__cupon strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: .06em;
  user-select: all; /* un toque y queda seleccionado para copiar */
}

.reserva__wsp { color: var(--frambuesa-suave); }

/* Reserva */
.reserva {
  gap: var(--e-4);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 768px) {
  .reserva { padding: var(--e-7); }
}

.datos {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-3);
  text-align: left;
}

@media (min-width: 560px) {
  .datos { grid-template-columns: 1fr 1fr; }
}

.datos dt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: var(--e-1);
}

/* Pie */
.pie {
  background: var(--frambuesa);
  color: var(--fondo);
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-6);
}

.pie a {
  color: var(--rosa-medio);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Redes: ícono + nombre, en pastilla. Se suman más sin tocar el CSS. */
.redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.pie .redes__enlace {
  gap: var(--e-2);
  padding-inline: var(--e-4);
  border: 2px solid var(--rosa-medio);
  border-radius: var(--r-pastilla);
  font-weight: 800;
  text-decoration: none;
  transition: background-color var(--dur-rebote) ease-out, color var(--dur-rebote) ease-out;
}
.pie .redes__enlace:hover {
  background: var(--rosa-medio);
  color: var(--frambuesa);
}

/* Reserva flotante: solo en celular (js/reserva-flotante.js decide cuándo) */
.reserva-flotante { display: none; }

@media (max-width: 767px) {
  .reserva-flotante {
    position: fixed;
    right: var(--margen);
    bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
    z-index: 9;
    display: inline-flex;
    visibility: hidden;
    opacity: 0;
    translate: 0 16px;
    transition:
      opacity var(--dur-rebote) ease-in,
      translate var(--dur-rebote) ease-in,
      visibility 0s var(--dur-rebote);
  }
  .reserva-flotante.is-visible {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition:
      opacity var(--dur-rebote) ease-out,
      translate var(--dur-rebote) var(--curva-rebote),
      visibility 0s;
  }
}

/* Visor ampliado con carrusel */
.visor {
  width: min(92vw, 720px);
  max-height: 94dvh;
  padding: var(--e-4);
  border: 0;
  border-radius: var(--r-tarjeta);
  background: var(--blanco);
  color: var(--frambuesa);
  box-shadow: var(--sombra-sticker);
  overflow: hidden;
}
.visor::backdrop {
  background: color-mix(in srgb, var(--frambuesa) 70%, transparent);
}

/* Entrada sin View Transitions: aparece y crece un poco */
.visor[open] {
  opacity: 1;
  transform: none;
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}
@starting-style {
  .visor[open] { opacity: 0; transform: scale(.96); }
}

.visor__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.visor__titulo {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.2;
}

.visor__cuenta {
  color: var(--frambuesa-suave);
  font-weight: 800;
  font-size: var(--t-chico);
}

.visor__cerrar {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: var(--r-pastilla);
  background: var(--fondo);
  color: var(--frambuesa);
  cursor: pointer;
}
.visor__cerrar:hover { background: var(--rosa-medio); }

.visor__cuerpo { position: relative; }

.visor__pista {
  display: flex;
  width: 100%; /* sin esto, aspect-ratio + max-height achican el ancho */
  aspect-ratio: 1; /* galeria.js lo ajusta a la pieza más alta del trabajo */
  max-height: 72dvh;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-foto);
  background: var(--fondo);
}
.visor__pista::-webkit-scrollbar { display: none; }

.visor__diapo {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  min-width: 0;
}

.visor__diapo img,
.visor__diapo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.visor__flecha {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--r-pastilla);
  background: var(--blanco);
  color: var(--frambuesa);
  box-shadow: 0 4px 0 var(--rosa-medio);
  cursor: pointer;
  transition: transform var(--dur-rebote) var(--curva-rebote);
}
.visor__flecha:hover { transform: scale(1.08); }
.visor__flecha--ant { left: var(--e-2); }
.visor__flecha--sig { right: var(--e-2); }

.visor__puntos {
  display: flex;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.visor__puntos span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rosa-medio);
  transition: background-color var(--dur-rebote) ease-out;
}
.visor__puntos span.activo { background: var(--chicle); }

/* Un solo medio: sin flechas ni puntos */
.visor--uno .visor__flecha,
.visor--uno .visor__puntos { display: none; }

/* Shared Element: duraciones de DESIGN (entrada 250 ms) */
::view-transition-group(ampliada) {
  animation-duration: 250ms;
  animation-timing-function: ease-out;
}

/* Movimiento reducido: sin desplazamientos ni rotación al interactuar */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .sticker, .visor__flecha, .portada__foto, .portada__punto::before,
  .reserva-flotante, .reserva-flotante.is-visible { transition: none; }
  .visor[open] { transition: none; }
  .boton--principal:hover,
  .boton--principal:focus-visible,
  .boton--principal:active { transform: none; }
  .sticker:hover, .sticker:focus-within { transform: rotate(-2deg); }
  .sticker:nth-child(3n + 2):hover,
  .sticker:nth-child(3n + 2):focus-within { transform: rotate(1.5deg); }
  .sticker:nth-child(3n):hover,
  .sticker:nth-child(3n):focus-within { transform: rotate(-1deg); }
  .visor__flecha:hover { transform: none; }
}