/* Antonio del Río · Peluquería de Caballeros · Collado Villalba
 *
 * REGISTRO: el de su fachada. Piedra clara, un rótulo curvo de ACERO cepillado
 * y, dentro, luz cálida de ámbar. Nada de barbería de moda con ladrillo visto,
 * poste de rayas y letras de neón: su local no es eso. Es una peluquería de
 * caballeros seria, y el registro tiene que serlo también.
 *
 * Va CLARA, y en gris acero, que es el color de su propio rótulo. Después de
 * una sala de baile a negro absoluto, es lo más lejos que se puede ir.
 *
 * Tipografía: Marcellus, romana de contraste moderado y aire clásico, para los
 * títulos; Familjen Grotesk para leer. La firma del rótulo no es una tipografía:
 * está dibujada trazo a trazo en SVG (ver motor.js).
 */

@font-face { font-family:'Marcellus'; src:url(fonts/marcellus.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Petit'; src:url(fonts/petit.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Familjen'; src:url(fonts/familjen.woff2) format('woff2'); font-weight:400 700; font-display:swap; }

:root {
  --piedra:   #f2f0ec;   /* la fachada */
  --piedra-2: #e2ded6;
  --blanco:   #fbfaf8;
  --acero:    #4a5058;   /* el rótulo */
  --acero-2:  #2c3138;
  --acero-cl: #8f979f;
  --ambar:    #c98a2e;   /* la luz de dentro */
  --ambar-cl: #e2ab55;
  --tinta:    #21252a;
  --tinta-ap: #666e77;
  --rotulo: 'Marcellus', Georgia, serif;
  --texto: 'Familjen', ui-sans-serif, system-ui, sans-serif;
  --ancho: 1140px;
}

*, *::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(--piedra); 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(--acero-2); color:#fff; padding:.8rem 1.2rem; font-weight:700; text-decoration:none; }
.saltar:focus { left:0; }
:focus-visible { outline:3px solid var(--ambar); outline-offset:3px; }

/* ── Cabecera ─────────────────────────────────────────────────────── */
.cab { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1.3rem; padding:.85rem clamp(1rem,4vw,2.2rem); background:#fbfaf8f2; backdrop-filter:blur(12px); border-bottom:1px solid var(--piedra-2); transition:box-shadow .25s; }
.cab--pegada { box-shadow:0 8px 24px -18px #21252a55; }
.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-size:1.06rem; line-height:1.1; display:flex; flex-direction:column; gap:.2rem; }
.cab__nom span { font-family:var(--texto); font-size:.6rem; font-weight:700; letter-spacing:.22em; color:var(--tinta-ap); text-transform:uppercase; white-space:nowrap; }
.nav { display:flex; gap:1.5rem; margin-left:auto; }
.nav a { text-decoration:none; font-size:.87rem; 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(--ambar); }
.cab__wa { display:inline-flex; align-items:center; gap:.5rem; background:var(--acero-2); color:#fff; text-decoration:none; padding:.62rem 1.15rem; font-weight:600; font-size:.87rem; border-radius:2px; transition:background .18s, transform .18s; }
.cab__wa svg { width:17px; height:17px; flex:none; }
.cab__wa:hover { background:var(--ambar); transform:translateY(-1px); }
@media (max-width:920px) { .nav { display:none; } .cab__wa { margin-left:auto; } }

/* ── Portada ──────────────────────────────────────────────────────── */
.portada { background:var(--blanco); }
.portada__caja { max-width:var(--ancho); margin:0 auto; padding:clamp(2.6rem,6vw,4.6rem) clamp(1rem,4vw,2.2rem); display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; }
@media (max-width:940px) { .portada__caja { grid-template-columns:1fr; } }
.rotulo { margin:0 0 1.1rem; font-size:.71rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ambar); display:flex; align-items:center; gap:.7rem; }
.rotulo::before { content:''; width:26px; height:1.5px; background:var(--ambar); flex:none; }

/* La firma, trazada a mano */
.firma { display:block; width:min(500px,100%); height:auto; margin:0 0 1.5rem; overflow:visible; }
.firma__texto { fill:var(--acero-2); font-family:'Petit', cursive; font-size:88px; }
.firma__sub { opacity:0; transition:opacity .6s ease .15s; fill:var(--tinta-ap); font-family:var(--texto); font-size:15px; font-weight:700; letter-spacing:.28em; }
.firma--hecha .firma__sub { opacity:1; }
.firma__linea { stroke:var(--piedra-2); stroke-width:1.4; }

.portada h1 { font-family:var(--rotulo); font-weight:400; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.14; margin:0 0 1rem; max-width:18ch; text-wrap:balance; }
.portada__bajo { margin:0 0 1.8rem; max-width:33rem; font-size:clamp(1rem,1.5vw,1.1rem); color:var(--tinta-ap); }
.portada__acc { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.9rem; }
.bot { display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.5rem; text-decoration:none; font-weight:600; font-size:.94rem; min-height:44px; border-radius:2px; transition:transform .18s, background .18s, border-color .18s, color .18s; }
.bot svg { width:18px; height:18px; flex:none; }
.bot--fuerte { background:var(--acero-2); color:#fff; }
.bot--fuerte:hover { background:var(--ambar); transform:translateY(-2px); }
.bot--linea { border:1.5px solid var(--acero-cl); color:var(--acero-2); }
.bot--linea:hover { border-color:var(--ambar); color:var(--ambar); transform:translateY(-2px); }
.portada__pie { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; padding-top:1.3rem; border-top:1px solid var(--piedra-2); font-size:.83rem; color:var(--tinta-ap); }
.portada__pie b { display:block; font-family:var(--texto); font-weight:700; font-size:1.7rem; line-height:1.15; color:var(--acero-2); letter-spacing:-0.01em; }
@media (max-width:560px) { .portada__pie { gap:.7rem; font-size:.75rem; } .portada__pie b { font-size:1.4rem; } }
.portada__foto img { border-radius:3px; box-shadow:0 26px 54px -30px #21252a70; }
.portada__foto figcaption { margin-top:.75rem; font-size:.79rem; letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-ap); }

/* ── Secciones ────────────────────────────────────────────────────── */
.sec { padding:clamp(3.2rem,7vw,5.6rem) clamp(1rem,4vw,2.2rem); }
.sec__caja { max-width:var(--ancho); margin:0 auto; }
.sec--acero { background:var(--acero-2); color:var(--piedra); }
.sec--acero .rotulo { color:var(--ambar-cl); }
.sec--piedra { background:var(--piedra); }
h2 { font-family:var(--rotulo); font-weight:400; font-size:clamp(1.7rem,3.8vw,2.6rem); line-height:1.15; 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); }
.sec--acero .entradilla { color:#f2f0eca8; }
.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; } }

/* ── Sus resenas, copiadas de Google ───────────────────────────
   Seis, en dos filas de tres: la rejilla queda llena, sin renglon a medias.  */
.dichos { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; list-style:none; margin:0 0 1.4rem; padding:0; }
@media (max-width:980px) { .dichos { grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px) { .dichos { grid-template-columns:1fr; } }
.dichos li { background:var(--blanco); border:1px solid var(--piedra-2); border-radius:4px;
  padding:1.5rem 1.35rem 1.25rem; display:flex; flex-direction:column; gap:.9rem; min-width:0; }
.dichos blockquote { margin:0; font-family:var(--rotulo); font-weight:400; font-size:1.1rem;
  line-height:1.45; color:var(--tinta); flex:1; }
.dichos blockquote::before { content:'“'; color:var(--ambar); font-size:2rem; line-height:0;
  vertical-align:-.35rem; margin-right:.12rem; }
.dichos figcaption { display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.dichos figcaption b { font-size:.92rem; font-weight:600; color:var(--tinta); }
.dichos figcaption span { font-size:.82rem; color:var(--tinta-ap); }
.dichos__pie { margin:0; font-size:.92rem; }
.dichos__pie a { color:var(--acero); }

/* ── 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.2rem; align-content:center; }
.ficha__fila { display:flex; gap:.9rem; align-items:flex-start; }
.ficha__fila svg { width:21px; height:21px; color:var(--ambar); flex:none; margin-top:.2rem; }
.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.02rem; }
.donde__foto img { border-radius:3px; }
.donde__foto figcaption { margin-top:.7rem; font-size:.82rem; color:var(--tinta-ap); }

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie { background:var(--acero-2); color:#f2f0eca0; padding:clamp(2.4rem,5vw,3.4rem) clamp(1rem,4vw,2.2rem) 1.9rem; font-size:.88rem; }
.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:400; color:var(--piedra); font-size:1.06rem; margin:0 0 .7rem; }
.pie a { color:#f2f0ecc0; text-decoration:none; }
.pie a:hover { color:var(--ambar-cl); 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 #ffffff1c; display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; font-size:.8rem; }

/* ── 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:400; font-size:clamp(1.8rem,4.6vw,2.5rem); line-height:1.15; margin:0 0 1.5rem; }
.legal h2 { font-size:1.18rem; margin:2.1rem 0 .6rem; max-width:none; }
.legal a { color:#a06a12; }
.legal .volver { display:inline-block; margin-bottom:1.5rem; font-weight:700; text-decoration:none; color:var(--acero-2); }
.legal .volver:hover { text-decoration:underline; }

/* MEDIDO en un móvil de 390 px: el subtítulo de la marca lleva "nowrap" y, al no
   poder encoger, empujaba el botón de WhatsApp fuera de la pantalla — la página
   se movía de lado. En móvil el subtítulo sobra: el nombre ya está ahí. */
@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 banda de cerrar: pedir cita ──────────────────────────
   Va centrada porque es una sola llamada y no tiene nada al lado: alineada
   a la izquierda dejaba media pantalla vacia.                              */
.sec--cierre .sec__caja { text-align:center; max-width:52rem; }
.sec--cierre .rotulo { justify-content:center; }
.sec--cierre .entradilla { margin-left:auto; margin-right:auto; }
.sec--cierre .portada__acc { justify-content:center; }

/* Los botones estan pensados para el fondo claro: sobre la banda de acero,
   el negro sobre negro los hacia desaparecer y el de linea se quedaba en un
   rectangulo vacio. Aqui se invierten.                                      */
.sec--acero .bot--fuerte { background:var(--ambar); color:var(--tinta); border-color:var(--ambar); }
.sec--acero .bot--fuerte:hover { background:var(--ambar-cl); border-color:var(--ambar-cl); }
.sec--acero .bot--linea { color:var(--piedra); border-color:#f2f0ec59; }
.sec--acero .bot--linea:hover { border-color:var(--piedra); background:#f2f0ec12; }

/* ── El local por dentro ────────────────────────────────
   Seis fotos en dos filas de tres: la rejilla queda llena. En movil van de
   dos en dos, que tambien da tres filas justas.                             */
.local { display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; list-style:none; margin:0; padding:0; }
@media (max-width:900px) { .local { grid-template-columns:repeat(2,1fr); } }
.local li { margin:0; border-radius:4px; overflow:hidden; background:#ffffff0d; min-width:0; }
.local img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.local li:hover img { transform:scale(1.035); }

/* ── Antes y despues ──────────────────────────────────
   Cada imagen ya trae las dos mitades pegadas; la raya del medio la marca
   un pseudoelemento, para que se lea que son dos momentos y no una foto.   */
.antes { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; list-style:none; margin:0; padding:0; }
@media (max-width:820px) { .antes { grid-template-columns:1fr; max-width:26rem; } }
.antes li { margin:0; position:relative; border:1px solid var(--piedra-2); border-radius:4px;
  overflow:hidden; background:var(--blanco); min-width:0; }
.antes li::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:#ffffff9c; pointer-events:none; }
.antes img { width:100%; height:auto; display:block; }