/* Acosta Nails · Centro de estética · Collado Villalba
 *
 * REGISTRO: BLANCO. La primera versión iba en grafito, con el argumento de que
 * sobre oscuro un esmalte canta más. Rober la vio y pidió blanco, y tiene razón
 * para este negocio: un centro de estética es un sitio luminoso, y la mano del
 * probador se lee mejor sobre blanco que sobre negro.
 *
 * El color de acento sigue sin estar fijado: lo pone quien mira la página al
 * elegir esmalte (--esmalte). En un centro de estética el color es el producto.
 *
 * TIPOGRAFÍA — y esto es lo importante de esta versión:
 * Urbanist, elegida comparando cuatro renderizadas (Urbanist, DM Sans, Albert
 * Sans, Rethink Sans) con el titular de verdad. Antes había Syne, que Rober YA
 * había rechazado por «aplastada» el día anterior, y encima con tracking -0.032.
 *
 * LA REGLA, que aquí se cumple sin excepción:
 *   - interlineado de titular NUNCA por debajo de 1.08
 *   - letter-spacing negativo NUNCA más allá de -0.01em
 * Urbanist tiene proporción vertical normal y no necesita que la aprieten.
 */

@font-face { font-family:'Urbanist'; src:url(fonts/urbanist.woff2) format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Epilogue'; src:url(fonts/epilogue.woff2) format('woff2'); font-weight:400 700; font-display:swap; }

:root {
  --blanco:    #ffffff;
  --nube:      #f7f5f8;   /* el fondo, blanco con un punto de lila */
  --nube-2:    #ece8ee;
  --tinta:     #241f28;
  --tinta-ap:  #6f6775;
  --piel:      #e8c4a8;
  /* El esmalte por defecto es el azul de la foto de su propia ficha. */
  --esmalte:    #2f7fd4;
  --esmalte-cl: #1c62ad;   /* la variante oscura, para texto sobre blanco */
  --rotulo: 'Urbanist', ui-sans-serif, system-ui, sans-serif;
  --texto: 'Epilogue', ui-sans-serif, system-ui, sans-serif;
  --ancho: 1160px;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--nube); color:var(--tinta); font-family:var(--texto); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, picture, canvas, svg { max-width:100%; }
img { height:auto; display:block; }
a { color:inherit; }
.saltar { position:absolute; left:-9999px; top:0; z-index:99; background:var(--tinta); color:#fff; padding:.8rem 1.2rem; font-weight:700; text-decoration:none; }
.saltar:focus { left:0; }
:focus-visible { outline:3px solid var(--esmalte); outline-offset:3px; }

/* ── Cabecera ─────────────────────────────────────────────────────── */
.cab { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1.3rem; padding:.8rem clamp(1rem,4vw,2.2rem); background:#ffffffee; backdrop-filter:blur(14px); border-bottom:1px solid var(--nube-2); transition:box-shadow .25s; }
.cab--pegada { box-shadow:0 8px 26px -20px #241f2855; }
.cab__marca { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.cab__marca svg { width:36px; height:36px; flex:none; }
.cab__nom { font-family:var(--rotulo); font-weight:700; font-size:1.06rem; line-height:1.15; letter-spacing:0; display:flex; flex-direction:column; gap:.22rem; }
.cab__nom span { font-family:var(--texto); font-size:.59rem; font-weight:600; letter-spacing:.2em; color:var(--tinta-ap); text-transform:uppercase; white-space:nowrap; }
.nav { display:flex; gap:1.4rem; margin-left:auto; }
.nav a { text-decoration:none; font-size:.86rem; font-weight:500; color:var(--tinta-ap); padding:.3rem 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s; }
.nav a:hover { color:var(--tinta); border-color:var(--esmalte); }
.cab__wa { display:inline-flex; align-items:center; gap:.5rem; background:var(--esmalte); color:#fff; text-decoration:none; padding:.62rem 1.15rem; border-radius:999px; font-weight:700; font-size:.87rem; transition:filter .18s, transform .18s, background .3s; }
.cab__wa svg { width:17px; height:17px; flex:none; }
.cab__wa:hover { filter:brightness(1.1); transform:translateY(-1px); }
@media (max-width:960px) { .nav { display:none; } .cab__wa { margin-left:auto; } }

/* ── Portada ──────────────────────────────────────────────────────── */
.portada { position:relative; overflow:hidden; background:var(--blanco); }
.portada__caja { max-width:var(--ancho); margin:0 auto; padding:clamp(2.4rem,6vw,4.4rem) clamp(1rem,4vw,2.2rem); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:center; }
@media (max-width:940px) { .portada__caja { grid-template-columns:1fr; } }
.rotulo { margin:0 0 1rem; font-size:.71rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--esmalte-cl); display:flex; align-items:center; gap:.7rem; transition:color .3s; }
.rotulo::before { content:''; width:26px; height:2px; background:var(--esmalte); flex:none; transition:background .3s; }
/* Interlineado 1,1 y tracking 0: con aire. */
.portada h1 { font-family:var(--rotulo); font-weight:700; font-size:clamp(2.1rem,5.2vw,3.6rem); line-height:1.1; letter-spacing:0; margin:0 0 1.1rem; max-width:16ch; text-wrap:balance; }
.portada h1 em { font-style:normal; color:var(--esmalte); transition:color .3s; }
.portada__bajo { margin:0 0 1.7rem; max-width:33rem; font-size:clamp(1rem,1.5vw,1.12rem); color:var(--tinta-ap); }
.portada__acc { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.8rem; align-items:center; }
.bot { display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.5rem; text-decoration:none; font-weight:700; font-size:.94rem; min-height:44px; border-radius:999px; transition:transform .18s, filter .18s, border-color .18s, color .18s, background .3s; }
.bot svg { width:18px; height:18px; flex:none; }
.bot--fuerte { background:var(--esmalte); color:#fff; }
.bot--fuerte:hover { filter:brightness(1.1); transform:translateY(-2px); }
.bot--linea { border:1.5px solid var(--nube-2); color:var(--tinta); }
.bot--linea:hover { border-color:var(--esmalte); color:var(--esmalte-cl); transform:translateY(-2px); }
.estado { display:inline-flex; align-items:baseline; gap:.5rem; padding:.55rem .95rem; border-radius:999px; font-size:.86rem; border:1px solid var(--nube-2); background:var(--nube); }
.estado b { font-weight:700; }
.estado--si b { color:#2b7a3f; }
.estado--no b { color:#b23b2a; }
.estado span { color:var(--tinta-ap); }
.portada__pie { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-top:1.2rem; border-top:1px solid var(--nube-2); font-size:.82rem; color:var(--tinta-ap); }
.portada__pie b { display:block; font-family:var(--rotulo); font-weight:700; font-size:1.65rem; line-height:1.2; color:var(--tinta); letter-spacing:0; }
@media (max-width:560px) { .portada__pie { gap:.65rem; font-size:.74rem; } .portada__pie b { font-size:1.32rem; } }
.portada__foto img { border-radius:14px; box-shadow:0 26px 54px -30px #241f2866; }
.portada__foto figcaption { margin-top:.7rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-ap); text-align:center; }

/* ── Secciones ────────────────────────────────────────────────────── */
.sec { padding:clamp(3.2rem,7vw,5.6rem) clamp(1rem,4vw,2.2rem); }
.sec__caja { max-width:var(--ancho); margin:0 auto; }
.sec--humo { background:var(--nube); }
h2 { font-family:var(--rotulo); font-weight:700; font-size:clamp(1.7rem,3.8vw,2.5rem); line-height:1.15; letter-spacing:0; margin:0 0 1rem; max-width:22ch; text-wrap:balance; }
.entradilla { margin:0 0 2.2rem; max-width:58ch; font-size:1.04rem; color:var(--tinta-ap); }
.sube { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.sube.dentro { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .sube { opacity:1; transform:none; } }

/* ── Servicios ────────────────────────────────────────────────────── */
.serv { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; list-style:none; margin:0; padding:0; }
@media (max-width:820px) { .serv { grid-template-columns:1fr; } }
.serv li { background:var(--blanco); border:1px solid var(--nube-2); border-radius:14px; padding:1.5rem 1.35rem; display:flex; flex-direction:column; gap:.5rem; transition:border-color .2s, box-shadow .2s; }
.serv li:hover { border-color:var(--esmalte); box-shadow:0 14px 30px -22px #241f2855; }
.serv svg { width:30px; height:30px; color:var(--esmalte); transition:color .3s; }
.serv h3 { margin:0; font-family:var(--rotulo); font-weight:700; font-size:1.08rem; letter-spacing:0; }
.serv p { margin:0; font-size:.93rem; color:var(--tinta-ap); }

/* ── Los tres centros ─────────────────────────────────────────────── */
.centros { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; list-style:none; margin:0; padding:0; }
@media (max-width:820px) { .centros { grid-template-columns:1fr; } }
.centros li { background:var(--blanco); border:1px solid var(--nube-2); border-radius:14px; padding:1.4rem 1.3rem; }
.centros li.centros--aqui { border-color:var(--esmalte); box-shadow:0 14px 30px -24px #241f2855; }
.centros h3 { margin:0 0 .3rem; font-family:var(--rotulo); font-weight:700; font-size:1.08rem; letter-spacing:0; }
.centros .aqui { display:inline-block; margin-bottom:.5rem; font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--esmalte-cl); }
.centros p { margin:0 0 .5rem; font-size:.92rem; color:var(--tinta-ap); }
.centros a { color:var(--tinta); font-weight:600; text-decoration:none; border-bottom:1px solid var(--nube-2); }
.centros a:hover { border-color:var(--esmalte); color:var(--esmalte-cl); }

/* ── Horario y dónde ──────────────────────────────────────────────── */
.donde { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:stretch; }
@media (max-width:860px) { .donde { grid-template-columns:1fr; } }
.ficha { display:grid; gap:1.15rem; align-content:center; }
.ficha__fila { display:flex; gap:.9rem; align-items:flex-start; }
.ficha__fila svg { width:21px; height:21px; color:var(--esmalte); flex:none; margin-top:.2rem; transition:color .3s; }
.ficha__fila b { display:block; font-size:.7rem; letter-spacing:.19em; text-transform:uppercase; color:var(--tinta-ap); font-weight:700; margin-bottom:.18rem; }
.ficha__fila > div { font-size:1.01rem; }
.horario { background:var(--blanco); border:1px solid var(--nube-2); border-radius:14px; padding:1.5rem 1.4rem; align-content:center; display:grid; }
.horario table { width:100%; border-collapse:collapse; font-size:.97rem; }
.horario td { padding:.42rem 0; border-bottom:1px solid var(--nube-2); }
.horario tr:last-child td { border-bottom:0; }
.horario td:last-child { text-align:right; font-weight:600; }
.horario .cerrado { color:#b23b2a; }
.horario .hoy td { color:var(--esmalte-cl); font-weight:700; }

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie { background:var(--tinta); color:#ffffff9c; padding:clamp(2.4rem,5vw,3.4rem) clamp(1rem,4vw,2.2rem) 1.9rem; font-size:.87rem; }
.pie__caja { max-width:var(--ancho); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; }
@media (max-width:780px) { .pie__caja { grid-template-columns:1fr; } }
.pie h3 { font-family:var(--rotulo); font-weight:700; color:#fff; font-size:1.02rem; margin:0 0 .7rem; letter-spacing:0; }
.pie a { color:#ffffffbb; text-decoration:none; }
.pie a:hover { color:#fff; text-decoration:underline; }
.pie ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.pie__legal { max-width:var(--ancho); margin:2rem auto 0; padding-top:1.3rem; border-top:1px solid #ffffff26; display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; font-size:.79rem; }

/* ── Legales ──────────────────────────────────────────────────────── */
.legal { max-width:46rem; margin:0 auto; padding:clamp(2.4rem,6vw,4.2rem) clamp(1rem,4vw,2.2rem); }
.legal h1 { font-family:var(--rotulo); font-weight:700; font-size:clamp(1.7rem,4.4vw,2.4rem); line-height:1.15; margin:0 0 1.5rem; letter-spacing:0; }
.legal h2 { font-size:1.14rem; margin:2.1rem 0 .6rem; max-width:none; }
.legal p, .legal li { color:#40384a; }
.legal a { color:var(--esmalte-cl); }
.legal .volver { display:inline-block; margin-bottom:1.5rem; font-weight:700; text-decoration:none; color:var(--esmalte-cl); }
.legal .volver:hover { text-decoration:underline; }

/* ── Móvil: el subtítulo de la marca empujaba el botón fuera ──────── */
@media (max-width: 560px) {
  .cab__nom span { display: none; }
  .cab__marca { min-width: 0; }
  .cab__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ── La galería ───────────────────────────────────────────────────── *
 * Columnas CALCULADAS sobre una rejilla de seis: 4+2 arriba y 2+2+2 abajo.
 * Con auto-fit quedaría un renglón a medias, y eso se lee como un fallo
 * aunque el contenido esté bien.                                       */
.galeria { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
.galeria figure { margin:0; position:relative; overflow:hidden; border-radius:14px; background:var(--nube-2); aspect-ratio:1; min-width:0; }
.galeria img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.galeria figure:hover img { transform:scale(1.04); }
.galeria figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:1.7rem .9rem .75rem;
  color:#fff; font-size:.84rem; font-weight:700;
  background:linear-gradient(transparent, #241f28cc);
}
/* La primera ocupa 2x2: cuatro celdas de las doce. Las otras ocho, una cada una. */
.g--grande { grid-column:span 2; grid-row:span 2; }
.g--una { grid-column:span 1; }
@media (max-width:700px) {
  .galeria { grid-template-columns:repeat(2,1fr); }
  /* En dos columnas la grande ocupa la fila entera: 1 + 4 filas de dos, llenas. */
  .g--grande { grid-column:span 2; grid-row:span 1; }
}
}