/* Nails Estudio Yaz — "el libro abierto": su feed fotografía las uñas sobre páginas de novela.
   Paleta: rosa del logo YN, vino y dorado de sus diseños, papel rosado de página. */
:root {
  --rosa:   #f5bdbc;   /* rosa palo del logo YN */
  --vino:   #5b1726;   /* vino de sus diseños: títulos, barra */
  --papel:  #fbf1ee;   /* página rosada: fondo */
  --hoja:   #fffaf8;   /* página clara del libro */
  --tinta:  #2a1a1d;   /* texto */
  --gris:   #6a5558;   /* texto secundario */
  --oro:    #8a6526;   /* dorado de sus detalles (texto/filetes) */
  --wa:     #0f7a6e;   /* verde oscuro de WhatsApp (el claro no pasa contraste) */
  --linea:  rgba(91, 23, 38, .14);
  --display: 'Gloock', 'Bodoni 72', Didot, Georgia, serif;
  --cuerpo: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--cuerpo); font-size: 1.0625rem; line-height: 1.6;
}
img, video { max-width: 100%; display: block; }
a { color: var(--vino); }
a:focus-visible, label:focus-visible, button:focus-visible, video:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0 0 .5em; color: var(--vino); }
h2 { font-size: clamp(2.1rem, 6.5vw, 3.2rem); letter-spacing: -.01em; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
.envoltura { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.enlace { font-weight: 600; text-decoration: none; color: var(--vino); border-bottom: 1px solid var(--rosa); }
.enlace:hover { border-bottom-color: var(--vino); }
section[id] { scroll-margin-top: 8.5rem; }
@media (min-width: 900px) { section[id] { scroll-margin-top: 5.5rem; } }

/* ── Aviso de demo (plataforma, no marca) ─────────────────── */
.demo-banner { background: #2b2620; color: #f2ece1; text-align: center; font-size: .85rem; line-height: 1.4; padding: .4rem .9rem; letter-spacing: .01em; }
@media (min-width: 640px) { .demo-banner { font-size: .92rem; } }

/* ── Cabecera ─────────────────────────────────────────────── */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(251, 241, 238, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.nav-check { position: absolute; opacity: 0; pointer-events: none; }
.barra { display: flex; align-items: center; gap: .75rem; max-width: 1120px; margin: 0 auto; padding: .5rem 1.25rem; }
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--vino); margin-right: auto; }
.marca img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--linea); }
.marca span { font-family: var(--display); font-size: 1.2rem; white-space: nowrap; }
@media (min-width: 420px) { .marca span { font-size: 1.35rem; } }
.nav-escritorio { display: none; }
.barra-cta { background: var(--vino); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; padding: .5rem 1rem; border-radius: 999px; }
.barra-cta:hover { background: #45101c; }
.nav-boton { display: grid; gap: 5px; padding: .6rem .35rem; cursor: pointer; }
.nav-boton span { display: block; width: 24px; height: 2.5px; background: var(--vino); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-movil { display: none; flex-direction: column; padding: .25rem 1.25rem 1rem; }
.nav-movil a { padding: .7rem 0; font-weight: 600; font-size: 1.1rem; color: var(--vino); text-decoration: none; border-top: 1px solid var(--linea); }
.nav-check:checked ~ .nav-movil { display: flex; }
.nav-check:checked ~ .barra .nav-boton span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-check:checked ~ .barra .nav-boton span:nth-child(2) { opacity: 0; }
.nav-check:checked ~ .barra .nav-boton span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav-check:focus-visible ~ .barra .nav-boton { outline: 3px solid var(--oro); border-radius: 6px; }
@media (min-width: 900px) {
  .nav-escritorio { display: flex; gap: 1.3rem; }
  .nav-escritorio a { color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .98rem; }
  .nav-escritorio a:hover { color: var(--vino); text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 5px; }
  .nav-check, .nav-boton, .nav-movil, .nav-check:checked ~ .nav-movil { display: none; }
}

/* ── Botones ──────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; text-decoration: none; padding: .9rem 1.4rem; border-radius: 999px; line-height: 1.2; }
.btn svg { width: 1.4em; height: 1.4em; flex: none; }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 8px 20px -10px rgba(15, 122, 110, .9); }
.btn-wa:hover { background: #0b6359; }

/* ── Portada: el libro abierto (elemento firma) ─────────────
   Móvil: una sola página (texto, luego la lámina). Escritorio: pliego de dos páginas
   con el lomo sombreado al centro. */
.portada { padding: 1.4rem 1rem 2.6rem; }
.libro { max-width: 1120px; margin: 0 auto; background: var(--hoja); border-radius: 6px;
  box-shadow: 0 1px 0 #e9d9d5, 0 3px 0 #f3e6e2, 0 5px 0 #e9d9d5, 0 22px 40px -24px rgba(91, 23, 38, .45); }
.pagina-izq { padding: 1.8rem 1.4rem 1.6rem; }
.eyebrow { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--oro); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .6rem; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45; max-width: 5rem; }
.portada h1 { font-size: clamp(2.3rem, 9.4vw, 3.7rem); max-width: 15ch; margin-bottom: .45em; letter-spacing: -.015em; }
.bajada { font-size: 1.1rem; color: var(--gris); max-width: 34rem; }
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin-top: 1.4rem; }
.portada-tel { color: var(--gris); text-decoration: none; }
.portada-tel strong { color: var(--vino); text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 4px; }
.pagina-der { margin: 0; padding: 0 1rem 1.2rem; }
.pagina-der img { width: 100%; height: auto; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 3px; }
.pagina-der figcaption { font-family: var(--display); font-size: .98rem; color: var(--gris); margin-top: .6rem; text-align: center; }
.pagina-der figcaption::before { content: "Lámina · "; color: var(--oro); }

@media (min-width: 900px) {
  .portada { padding: 2.6rem 1.25rem 3.6rem; }
  .libro { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
  .libro::after { /* el lomo */
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 38px); width: 76px; pointer-events: none;
    background: linear-gradient(90deg, rgba(91, 23, 38, 0) 0%, rgba(91, 23, 38, .07) 40%, rgba(91, 23, 38, .16) 50%, rgba(91, 23, 38, .07) 60%, rgba(91, 23, 38, 0) 100%); }
  .pagina-izq { padding: 3.2rem 4rem 3.2rem 3.4rem; align-self: center; }
  .pagina-der { padding: 2.2rem 2.2rem 1.6rem 3.4rem; }
  .pagina-der img { aspect-ratio: auto; height: min(62vh, 560px); }
}

/* ── Secciones ───────────────────────────────────────────── */
.seccion { padding: 3.6rem 0; }
.encabezado { max-width: 40rem; margin-bottom: 1.8rem; }
.encabezado p { color: var(--gris); }
.prosa p { max-width: 36rem; }

.sobre-grid { display: grid; gap: 2rem; }
.detalle { border-top: 1px solid var(--oro); border-bottom: 1px solid var(--oro); padding: 1.1rem 0 .4rem; margin-top: 1.6rem; max-width: 34rem; }
.detalle h3 { color: var(--oro); font-size: 1.3rem; margin-bottom: .35em; }
.sobre-foto { margin: 0; }
.sobre-foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; max-height: 560px; }
@media (min-width: 860px) {
  .sobre-grid { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 4rem; }
}

.galeria { background: var(--hoja); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.rejilla li { margin: 0; }
.rejilla img, .rejilla video { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; background: #efe1dd; }
.rejilla-video { grid-row: span 2; }
.rejilla-video video { aspect-ratio: auto; height: 100%; }
@media (min-width: 700px) { .rejilla { grid-template-columns: repeat(3, 1fr); gap: .8rem; } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }
.galeria-mas { margin: 1.6rem 0 0; }

/* Servicios como índice de libro */
.indice { max-width: 820px; }
.lista-indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lista-indice li { padding: 1rem 0 .7rem; border-bottom: 1px solid var(--linea); }
.indice-linea { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .25rem; }
.indice-nombre { font-family: var(--display); font-size: 1.45rem; color: var(--vino); line-height: 1.2; }
.indice-puntos { flex: 1; border-bottom: 2px dotted var(--oro); opacity: .6; transform: translateY(-.3em); min-width: 1.5rem; }
.indice-precio { font-weight: 700; color: var(--oro); white-space: nowrap; }
.indice-desc { color: var(--gris); margin: 0; max-width: 40rem; }
.nota-precios { margin: 1.4rem 0 0; font-size: .98rem; color: var(--gris); max-width: 40rem; }

.pestanas { background: var(--vino); color: #f7e6e4; }
.pestanas h2 { color: #fff; }
.pestanas .enlace { color: #fff; border-bottom-color: var(--rosa); }
.pestanas-intro { max-width: 32rem; }
.pestanas-grid { display: grid; gap: 2.2rem; }
.efectos { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.efectos li { font-family: var(--display); font-size: 1.25rem; color: #fff; border: 1px solid rgba(245, 189, 188, .55); border-radius: 999px; padding: .35rem 1rem; }
.efectos small { font-family: var(--cuerpo); font-size: .85rem; color: var(--rosa); }
.pestanas-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pestanas-fotos img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; }
@media (min-width: 860px) { .pestanas-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; } }

.resenas-cabeza { margin-bottom: 1.8rem; }
.calificacion { display: flex; align-items: center; gap: .9rem; margin: 0 0 .6rem; }
.calif-num { font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--vino); }
.calif-det { color: var(--gris); }
.estrellas { color: var(--oro); letter-spacing: .12em; }
.calif-det .estrellas { display: block; font-size: 1.15rem; }
.resenas-lista { display: grid; gap: 1rem; }
.resena { margin: 0; background: var(--hoja); border: 1px solid var(--linea); border-radius: 4px; padding: 1.2rem 1.3rem .4rem; }
.resena p { font-family: var(--display); font-size: 1.28rem; line-height: 1.3; color: var(--tinta); margin-top: .4rem; }
@media (min-width: 760px) { .resenas-lista { grid-template-columns: 1fr 1fr; } }

.contacto { border-top: 1px solid var(--linea); }
.contacto-grid { display: grid; gap: 2.2rem; }
.contacto-intro { max-width: 32rem; color: var(--gris); }
.ficha { margin: 0; background: var(--hoja); border: 1px solid var(--linea); border-radius: 4px; padding: .4rem 1.3rem; }
.ficha > div { padding: .9rem 0; border-bottom: 1px solid var(--linea); }
.ficha > div:last-child { border-bottom: 0; }
.ficha dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--oro); margin-bottom: .25rem; }
.ficha dd { margin: 0; }
.ficha dd > a { font-size: 1.25rem; font-weight: 700; }
.horario { list-style: none; margin: 0; padding: 0; }
.horario li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (min-width: 860px) { .contacto-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 4rem; } }

/* ── Redes ───────────────────────────────────────────────── */
.redes-fila { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; gap: .6rem; }
.redes-fila a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vino); color: #fff; }
.redes-fila a:hover { background: #45101c; }
.redes-fila svg { width: 22px; height: 22px; }
.pie .redes-fila { margin: 0; }
.pie .redes-fila a { background: var(--rosa); color: var(--vino); }
.pie .redes-fila a:hover { background: #fff; }

/* ── Pie ─────────────────────────────────────────────────── */
.pie { background: var(--tinta); color: #eadcd9; padding: 2.6rem 0 1.4rem; font-size: .95rem; }
.pie a { color: #fff; }
.pie-grid { display: grid; gap: 1.4rem; }
.pie-nombre { font-family: var(--display); font-size: 1.6rem; color: var(--rosa); margin-bottom: .4rem; }
.pie p { margin: 0 0 .35rem; }
.credito { text-align: center; font-size: .85rem; color: #cdbab6; margin: 2rem 1.25rem 0; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.credito a { color: #fff; }
@media (min-width: 760px) { .pie-grid { grid-template-columns: 1fr auto; align-items: end; } }

/* ── WhatsApp flotante ───────────────────────────────────── */
.wa-flotante { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wa); color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); }
.wa-flotante svg { width: 30px; height: 30px; }
@supports (animation-timeline: scroll()) {
  .wa-flotante { animation: waIn linear both; animation-timeline: scroll(); animation-range: 0 350px; }
  @keyframes waIn { from { opacity: 0; transform: scale(.6); pointer-events: none; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Ajustes de la crítica de Fase 2 ─────────────────────── */
@media (max-width: 759px) { .pie { padding-bottom: 5.5rem; } } /* el botón flotante no tapa el crédito */
.rejilla-video { grid-row: auto; }
.rejilla-video video { aspect-ratio: 3 / 4; height: auto; } /* cover recorta las franjas negras del reel */
@media (max-width: 359px) {
  .barra-cta { padding: .45rem .75rem; font-size: .85rem; }
  .marca span { font-size: 1.05rem; }
  .barra { gap: .5rem; padding-inline: 1rem; }
}