/* Aute Culture — el mundo del estudio: el cojín acolchado rosa donde se apoya la mano,
   el muestrario de tips numerados y el ajolote del logo. Ver DECISIONES.md. */
:root {
  --fresa:     #fceef3;   /* fondo rosa leche */
  --fresa-2:   #f8e1ea;   /* costuras del cojín */
  --ajolote:   #f29bb9;   /* rosa del logo: sobre ciruela y decorativo */
  --frambuesa: #a3245a;   /* acento con contraste AA sobre fresa y blanco */
  --lila:      #b9a4e8;   /* cat eye lila: solo decorativo */
  --cromo:     #efe9f7;   /* banda lila muy pálida */
  --ciruela:   #34142b;   /* texto y bloques oscuros */
  --ciruela-2: #4a2140;
  --noche:     #240d1e;   /* pie */
  --gris:      #6b4a60;
  --claro:     #fceef3;
  --claro-2:   #e2c9d7;   /* texto secundario sobre ciruela */
  --blanco:    #fffafc;
  --wa:        #0f7a6e;   /* verde oscuro de WhatsApp (el claro no pasa contraste) */
  --wa-h:      #0b6359;
  --display:   'Unbounded', 'Arial Black', system-ui, sans-serif;
  --cuerpo:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --firma:     'Sacramento', 'Brush Script MT', cursive;
  --una:       50% 50% 16% 16% / 36% 36% 9% 9%;   /* silueta de uña almendra */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--ciruela); font-family: var(--cuerpo); font-size: 1.0625rem; line-height: 1.6; }
img, video { max-width: 100%; display: block; }
a { color: var(--frambuesa); }
a:focus-visible, label:focus-visible, button:focus-visible, video:focus-visible { outline: 3px solid var(--frambuesa); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; color: var(--ciruela); letter-spacing: -.01em; }
h2 { font-size: clamp(1.75rem, 5.6vw, 2.6rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.envoltura { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.enlace { font-weight: 700; text-decoration: none; }
.enlace:hover { text-decoration: underline; }
.nw { white-space: nowrap; }

/* ── 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(255, 250, 252, .97); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(163, 36, 90, .15); }
.nav-check { position: absolute; opacity: 0; pointer-events: none; }
.barra { display: flex; align-items: center; gap: .75rem; max-width: 1120px; margin: 0 auto; padding: .45rem 1.25rem; }
.marca { display: flex; align-items: center; gap: .15rem; text-decoration: none; color: var(--ciruela); margin-right: auto; min-width: 0; }
.marca img { width: 42px; height: 42px; border-radius: 50%; flex: none; margin-right: .45rem; box-shadow: 0 0 0 2px var(--ajolote); }
.marca-a { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; }
.marca-b { font-family: var(--firma); font-size: 1.9rem; line-height: 1; color: var(--frambuesa); margin-left: .2rem; transform: translateY(2px); }
.nav-escritorio { display: none; }
.barra-cta { background: var(--ciruela); color: var(--claro); text-decoration: none; font-weight: 700; font-size: .95rem; padding: .5rem 1.05rem; border-radius: 999px; flex: none; }
.barra-cta:hover { background: var(--ciruela-2); }
.nav-boton { display: grid; gap: 5px; padding: .6rem .35rem; cursor: pointer; flex: none; }
.nav-boton span { display: block; width: 24px; height: 2px; background: var(--ciruela); 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(--ciruela); text-decoration: none; border-top: 1px solid rgba(163, 36, 90, .15); }
.nav-check:checked ~ .nav-movil { display: flex; }
.nav-check:checked ~ .barra .nav-boton span:nth-child(1) { transform: translateY(7px) 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(-7px) rotate(-45deg); }
.nav-check:focus-visible ~ .barra .nav-boton { outline: 3px solid var(--frambuesa); border-radius: 4px; }
@media (min-width: 960px) {
  .nav-escritorio { display: flex; gap: 1.3rem; }
  .nav-escritorio a { color: var(--ciruela); text-decoration: none; font-weight: 600; font-size: .95rem; }
  .nav-escritorio a:hover { color: var(--frambuesa); }
  .nav-check, .nav-boton, .nav-movil, .nav-check:checked ~ .nav-movil { display: none; }
}

/* ── Botones ──────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; font-size: 1.02rem; line-height: 1.25; padding: .9rem 1.4rem; border-radius: 999px; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-h); }
.btn-borde { border: 2px solid var(--ciruela); color: var(--ciruela); padding: .75rem 1.3rem; }
.btn-borde:hover { background: var(--ciruela); color: var(--claro); }

/* ── Portada: panel rosa con el acolchado del cojín + muestrario de uñas ── */
.portada {
  background-color: var(--fresa);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(163, 36, 90, .10) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, transparent 0 43px, var(--fresa-2) 43px 45px),
    repeating-linear-gradient(-45deg, transparent 0 43px, var(--fresa-2) 43px 45px);
  background-size: 63.6px 63.6px, auto, auto;
  display: grid; gap: 2rem; padding: 2.2rem 1.25rem 2.6rem; overflow: hidden;
}
.portada-texto { max-width: 36rem; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--frambuesa); margin-bottom: .8rem; }
.portada h1 { font-size: clamp(2rem, 8.2vw, 3.6rem); font-weight: 800; line-height: 1.04; margin-bottom: .5em; }
.bajada { color: var(--gris); font-size: 1.1rem; max-width: 33rem; }
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin-top: 1.4rem; }
.portada-tel { color: var(--ciruela); text-decoration: none; }
.portada-tel strong { color: var(--frambuesa); white-space: nowrap; }
.portada-tel:hover strong { text-decoration: underline; }
.portada-horario { list-style: none; margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px dashed rgba(163, 36, 90, .35); font-size: .92rem; color: var(--gris); display: flex; flex-wrap: wrap; gap: .15rem 1.4rem; }

/* Muestrario: 5 tips de uña en abanico, numerados como en el muestrario del estudio. */
.muestrario { margin: 0; justify-self: center; width: 100%; max-width: 30rem; }
.muestrario-titulo { font-family: var(--firma); font-size: 2rem; line-height: 1; color: var(--frambuesa); text-align: center; margin-bottom: .6rem; }
.tips { list-style: none; margin: 0; padding: 0 0 .5rem; display: flex; justify-content: center; align-items: flex-end; gap: clamp(.35rem, 2vw, .9rem); }
.tip { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: clamp(54px, 16.5vw, 104px); }
.tip-una { display: block; width: 100%; aspect-ratio: 5 / 8; border-radius: var(--una); overflow: hidden; background: var(--fresa-2); box-shadow: 0 0 0 3px #fff, 0 10px 22px rgba(52, 20, 43, .22); transform: rotate(var(--giro, 0deg)) translateY(var(--alto, 0)); transform-origin: 50% 100%; }
.tip-una img { width: 100%; height: 100%; object-fit: cover; }
.tip:nth-child(1) { --giro: -9deg; --alto: 10px; }
.tip:nth-child(2) { --giro: -4deg; --alto: -2px; }
.tip:nth-child(3) { --giro: 0deg;  --alto: -10px; }
.tip:nth-child(4) { --giro: 4deg;  --alto: -2px; }
.tip:nth-child(5) { --giro: 9deg;  --alto: 10px; }
.tip-num { font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .08em; color: var(--ciruela); background: #fff; border-radius: 999px; padding: .1rem .45rem; margin-top: .35rem; }
.tip-nombre { display: none; }

@media (min-width: 880px) {
  .portada { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; padding: 3.4rem max(1.25rem, calc((100vw - 1120px) / 2 + 1.25rem)) 3.6rem; }
  .muestrario { max-width: 36rem; }
  .portada h1 { font-size: clamp(2.4rem, 4.4vw, 3.3rem); }
  .tips { gap: 2.5%; }
  .tip { width: 18%; }
  .tip-nombre { display: block; font-size: .74rem; line-height: 1.25; text-align: center; color: var(--gris); min-height: 2.5em; }
  .muestrario-titulo { font-size: 2.4rem; }
}

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

.nosotros-grid { display: grid; gap: 2rem; align-items: center; }
.nosotros-foto { margin: 0; max-width: 26rem; }
.nosotros-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 48% 48% 18px 18px / 30% 30% 18px 18px; box-shadow: 14px 14px 0 var(--cromo); }
@media (min-width: 820px) { .nosotros-grid { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }

.galeria { background: var(--fresa); }
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem .8rem; }
.rejilla figure { margin: 0; }
.rejilla img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 40% 40% 12px 12px / 24% 24% 12px 12px; background: var(--fresa-2); }
.rejilla figcaption { font-size: .85rem; line-height: 1.3; color: var(--gris); margin-top: .45rem; }
.rejilla-video video { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 40% 40% 12px 12px / 24% 24% 12px 12px; background: var(--ciruela); }
.rejilla-pie { font-size: .85rem; line-height: 1.3; color: var(--gris); margin: .45rem 0 0; }
@media (min-width: 820px) {
  .rejilla { grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1rem; }
}
@media (max-width: 819px) {
  /* Si la cuenta de fotos deja una sola al final, se centra en vez de quedar colgada. */
  .rejilla > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }
}
.galeria-mas { margin: 1.6rem 0 0; }

/* Servicios como la carta de un salón: nombre, puntos y precio si lo hay. */
.carta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 3rem; }
.carta li { padding: 1.2rem 0; border-bottom: 1px dashed rgba(163, 36, 90, .35); }
.carta-linea { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .3rem; }
.carta-nombre { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.carta-puntos { flex: 1; border-bottom: 2px dotted rgba(52, 20, 43, .35); transform: translateY(-4px); }
.carta-precio { font-weight: 700; color: var(--frambuesa); white-space: nowrap; }
.carta-desc { margin: 0; color: var(--gris); }
@media (min-width: 760px) { .carta { grid-template-columns: 1fr 1fr; } }
.nota-precios { margin-top: 1.6rem; color: var(--gris); max-width: 44rem; }

/* Antes de tu cita: bloque ciruela con la garantía en grande. */
.citas { background: var(--ciruela); color: var(--claro); }
.citas h2 { color: var(--claro); }
.citas-cabeza p { color: var(--claro-2); }
.citas-grid { display: grid; gap: 2.2rem; }
.garantia { display: flex; flex-direction: column; margin-top: 1.4rem; }
.garantia-num { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 12vw, 4.6rem); line-height: 1; color: var(--ajolote); }
.garantia-txt { color: var(--claro); font-weight: 600; max-width: 16rem; margin-top: .3rem; }
.reglas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem 2rem; }
.reglas li { position: relative; padding-left: 1.6rem; }
.reglas li::before { content: ""; position: absolute; left: 0; top: .15rem; width: .8rem; height: 1.25rem; border-radius: var(--una); background: var(--ajolote); }
.reglas h3 { color: var(--claro); margin: 0 0 .25rem; }
.reglas p { margin: 0; color: var(--claro-2); }
@media (min-width: 820px) {
  .citas-grid { grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }
  .reglas { display: block; columns: 2; column-gap: 2rem; }
  .reglas li { break-inside: avoid; margin-bottom: 1.2rem; }
}

.cosmeticos { background: var(--cromo); }
.cosmeticos-grid { display: grid; gap: 2rem; align-items: center; }
.cosmeticos-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.2rem; }
.cosmeticos-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.cosmeticos-fotos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid #fff; }
.cosmeticos-fotos .foto-baja { transform: translateY(1.4rem); }
@media (min-width: 820px) { .cosmeticos-grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }

.resenas { background: var(--fresa); }
.resenas-grid { display: grid; gap: 1.1rem; }
.calificacion { display: flex; align-items: center; gap: .9rem; margin: .4rem 0 1rem; }
.calif-num { font-family: var(--display); font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--ciruela); }
.calif-det { color: var(--gris); font-size: .95rem; }
.estrellas { color: var(--frambuesa); letter-spacing: .12em; display: block; }
.resena { margin: 0; background: #fff; border-radius: 22px 22px 22px 6px; padding: 1.3rem 1.4rem 1.2rem; }
.resena p { margin: .5rem 0 0; font-size: 1.04rem; }
@media (min-width: 860px) { .resenas-grid { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; } .resenas-cabeza { grid-row: span 2; } }

.contacto { background: var(--ciruela); color: var(--claro); }
.contacto h2 { color: var(--claro); }
.contacto-intro { color: var(--claro-2); max-width: 30rem; }
.contacto-grid { display: grid; gap: 2.4rem; }
.contacto a { color: var(--ajolote); }
.contacto .btn-wa { color: #fff; margin-top: .4rem; }
.ficha { margin: 0; display: grid; gap: 1.3rem; }
.ficha dt { font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ajolote); margin-bottom: .25rem; }
.ficha dd { margin: 0; }
.ficha .ref { color: var(--claro-2); }
.horario { list-style: none; margin: 0; padding: 0; }
.horario li { display: flex; justify-content: space-between; gap: 1rem; max-width: 22rem; padding: .15rem 0; }
@media (min-width: 820px) { .contacto-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ── Redes ────────────────────────────────────────────────── */
.redes-fila { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; gap: .7rem; flex-wrap: wrap; }
.redes-fila a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ajolote); color: var(--ajolote); background: transparent; }
.redes-fila a:hover { background: var(--ajolote); color: var(--ciruela); }
.redes-fila svg { width: 20px; height: 20px; }

/* ── Pie ──────────────────────────────────────────────────── */
.pie { background: var(--noche); color: var(--claro-2); padding: 2.6rem 0 5.5rem; font-size: .95rem; }
.pie a { color: var(--ajolote); }
.pie-grid { display: grid; gap: 1rem; }
.pie-nombre { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--claro); margin-bottom: .4rem; }
.pie p { margin: 0 0 .35rem; }
.pie .credito { max-width: 1120px; margin: 1.8rem auto 0; padding: 1rem 1.25rem 0; border-top: 1px solid rgba(242, 155, 185, .25); font-size: .85rem; color: var(--claro-2); }
@media (min-width: 820px) { .pie-grid { grid-template-columns: 1fr auto; align-items: end; } }

/* ── WhatsApp flotante (aparece tras el primer scroll para no tapar la portada) ── */
.wa-flotante { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
.wa-flotante:hover { background: var(--wa-h); }
.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; } }
}

/* En celular el horario ya está en Contacto y en el pie: la portada deja ver el muestrario. */
@media (max-width: 879px) { .portada-horario { display: none; } }

section[id] { scroll-margin-top: 8.5rem; }
@media (min-width: 960px) { section[id] { scroll-margin-top: 5.5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }