/* =========================================================
   Uchiha Barber — Propuesta de rediseño
   Barbería moderna en Torrejón de Ardoz (negocio nuevo, oct. 2025).
   Estética urbana premium, no infantil, con un guiño en el nombre
   ("Uchiha") sin reproducir ningún símbolo con derechos de terceros:
   solo tipografía con carácter, iconografía de línea propia
   (tijeras, máquina, navaja, peine) y un motivo de "degradado/fade"
   como acento decorativo — coherente con el oficio real.
   Sin fotografía: Instagram (@uchiha.barber) está bloqueado por muro
   de login y el negocio no tiene web propia ni otra fuente de fotos
   accesible (ver nota en valor.html y GUION-LLAMADA.md).
   Paleta deliberadamente distinta de demos/propuesta-barberia-guerrero
   (que es clara/papel envejecido, burdeos+dorado, Oswald+Barlow):
   aquí va todo en dark mode real, escarlata + gris acero, Archivo
   Black + Manrope.
   ========================================================= */

:root {
  /* Marca */
  --black: #0a0a0c;
  --charcoal: #17171b;
  --charcoal-soft: #1e1e24;
  --charcoal-line: #2a2a31;

  --red: #e0213a;
  --red-dark: #a8172c;
  --red-light: #ff5068;
  --red-050: rgba(224, 33, 58, .14);

  --steel: #9296a1;
  --steel-light: #c2c5cc;
  --steel-050: rgba(146, 150, 161, .12);

  /* Neutros — dark mode real, no "papel" */
  --ink: #f3f3f5;
  --ink-soft: #a5a8b1;
  --line: var(--charcoal-line);
  --bg: var(--black);
  --bg-soft: #131316;
  --white: #ffffff;

  --radius: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, .35);
  --shadow: 0 18px 42px rgba(0, 0, 0, .5);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, .6);

  --maxw: 1160px;
  --ease: cubic-bezier(.19, .77, .28, 1);

  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--white);
  text-transform: uppercase;
}

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-light);
}
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--red); flex-shrink: 0; }
.section-head.center .eyebrow { justify-content: center; }

.section { padding: clamp(60px, 8vw, 112px) 0; }
.section-head { max-width: 640px; margin-bottom: 50px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin: 16px 0 14px; }
.section-head h2 em { font-style: normal; color: var(--red); }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  padding: 15px 27px; border-radius: var(--radius);
  cursor: pointer; border: 1.5px solid transparent;
  transition: transform .3s var(--ease), background .25s var(--ease), color .25s, border-color .25s, box-shadow .25s;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .03em;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 10px 26px rgba(224, 33, 58, .35); }
.btn-primary:hover { background: var(--red-dark); box-shadow: 0 16px 32px rgba(224, 33, 58, .45); }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--steel); background: rgba(255,255,255,.07); }
.btn svg { width: 18px; height: 18px; }
.btn-ig { background: var(--charcoal-soft); color: #fff; border-color: var(--line); }
.btn-ig:hover { border-color: var(--red); color: var(--red-light); }

/* ---------- Header ---------- */
/* Todo el sitio es oscuro (sin foto de hero), así que la cabecera no
   necesita una variante "transparente sobre foto clara": siempre va en
   tono oscuro con texto claro, evitando el problema de contraste del
   logo entre el estado inicial y "scrolled" (gotcha conocido en otras
   propuestas: aquí no aplica porque nunca cambia de claro a oscuro). */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 18px 0; background: rgba(10, 10, 12, 0);
  transition: padding .35s var(--ease), background .35s, box-shadow .35s, backdrop-filter .35s;
}
.header.scrolled {
  background: rgba(10, 10, 12, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0,0,0,.4); padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: 1.02rem; color: var(--white); letter-spacing: .02em; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(155deg, var(--charcoal-soft), var(--black));
  border: 1.5px solid var(--red); display: grid; place-items: center;
  font-family: var(--font-display); color: var(--red-light); font-size: 1.05rem;
}
.brand span b { color: var(--red); font-weight: 400; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-weight: 600; font-size: .88rem; color: var(--ink-soft); position: relative; text-transform: uppercase; letter-spacing: .05em; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--red); border-radius: 2px; transition: width .3s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.burger { display: none; position: relative; background: none; border: 0; width: 26px; height: 26px; cursor: pointer; color: var(--ink); }
.burger svg { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; transition: opacity .2s; }
.burger .icon-close { opacity: 0; }
.header.menu-open .burger .icon-menu { opacity: 0; }
.header.menu-open .burger .icon-close { opacity: 1; }

/* Menú móvil: el panel exterior anima max-height y NO lleva padding
   propio (si lo llevara, el padding no se comprimiría por debajo de
   max-height y dejaría una barra visible tapando la cabecera incluso
   "cerrado" — gotcha conocido). El padding real vive en
   .mobile-menu-inner. z-index de .nav por encima del panel para que
   la marca y la hamburguesa (que también cierra el menú) queden
   siempre visibles y pulsables. */
.header .nav { position: relative; z-index: 5; }
.mobile-menu {
  display: none;
  position: fixed; left: 0; right: 0; top: 0; z-index: 2;
  background: var(--black); box-shadow: var(--shadow-lg);
  max-height: 0; overflow: hidden; border-bottom: 1px solid var(--line);
  transition: max-height .4s var(--ease);
}
.mobile-menu.open { max-height: 100vh; overflow-y: auto; }
.mobile-menu-inner { display: flex; flex-direction: column; gap: 2px; padding: 90px 24px 26px; }
.mm-link { padding: 14px 6px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; }
.mm-cta { justify-content: center; margin-top: 16px; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost, .nav-cta .btn-ig { display: none; }
  .burger { display: block; }
  .mobile-menu { display: flex; }
}

/* ---------- Hero (sin foto: tipografía + degradado "fade" + badge) ---------- */
.hero {
  position: relative; padding: clamp(150px, 20vw, 190px) 0 clamp(70px, 9vw, 100px);
  background:
    radial-gradient(ellipse 55% 50% at 88% 0%, var(--red-050) 0%, transparent 60%),
    var(--black);
  overflow: hidden;
}
.hero::before {
  /* Motivo decorativo "fade": franjas verticales que se desvanecen,
     evocan la técnica de degradado del corte sin usar ninguna foto. */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}
.hero-inner { position: relative; z-index: 1; max-width: 700px; }
.hero .eyebrow { margin-bottom: 8px; }
.hero h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); margin: 16px 0 20px; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 54ch; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.hero-trust {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  font-size: .88rem; color: var(--ink-soft); padding-top: 22px; border-top: 1px solid var(--line);
}
.hero-trust-item { display: inline-flex; align-items: center; gap: 9px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }
.hero-trust b { color: var(--white); font-weight: 700; }

/* Franja "fade" decorativa: barra de degradado horizontal, sustituye
   a una foto que no tenemos evocando el oficio (corte degradado). */
.fade-bar { height: 5px; width: 100%; background: linear-gradient(90deg, var(--black) 0%, var(--red-dark) 45%, var(--red) 70%, var(--red-light) 100%); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Ticker (franja de servicios en movimiento) ---------- */
.strip { background: var(--charcoal); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; overflow: hidden; }
.marquee { display: flex; gap: 40px; width: max-content; animation: slide 30s linear infinite; }
.marquee span {
  font-family: var(--font-display); font-weight: 400; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 14px;
  color: var(--steel-light);
}
.marquee span::before { content: '—'; color: var(--red); }
@media (min-width: 981px) {
  .marquee { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; row-gap: 8px; }
  .marquee span:nth-child(n+9) { display: none; }
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Sobre el barbero (texto + rasgos numerados) ---------- */
.zones { background: var(--bg-soft); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.about-text > p { color: var(--ink-soft); margin-bottom: 10px; font-size: 1.03rem; }
.trait-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.trait { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.trait .num { font-family: var(--font-display); font-size: 1.05rem; color: var(--red); flex-shrink: 0; width: 34px; }
.trait h4 { font-size: 1rem; margin-bottom: 4px; font-family: var(--font-body); font-weight: 700; text-transform: none; color: var(--white); }
.trait p { color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Premios (credibilidad) ---------- */
.awards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.award-card {
  position: relative; background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; overflow: hidden; transition: transform .4s var(--ease), border-color .4s;
}
.award-card:hover { transform: translateY(-6px); border-color: var(--red); }
.award-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--red), transparent); }
.award-card .ico { width: 54px; height: 54px; border-radius: 14px; background: var(--red-050); color: var(--red-light); display: grid; place-items: center; margin-bottom: 18px; }
.award-card .ico svg { width: 26px; height: 26px; }
.award-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.award-card p { color: var(--ink-soft); font-size: .92rem; }
.award-card .yr { display: inline-block; margin-top: 12px; font-family: var(--font-display); font-size: .74rem; letter-spacing: .08em; color: var(--red-light); background: var(--red-050); padding: 5px 12px; border-radius: var(--radius-pill); }

/* ---------- Servicios ---------- */
.serv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.serv {
  position: relative; background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 24px; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.serv:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--charcoal-line); }
.serv .ico { width: 50px; height: 50px; border-radius: 14px; background: var(--steel-050); color: var(--steel-light); display: grid; place-items: center; margin-bottom: 16px; }
.serv .ico svg { width: 24px; height: 24px; }
.serv.featured .ico { background: var(--red-050); color: var(--red-light); }
.serv h3 { font-size: 1.05rem; margin-bottom: 8px; text-transform: none; color: var(--white); font-family: var(--font-body); font-weight: 700; }
.serv p { color: var(--ink-soft); font-size: .9rem; }
.serv .tag {
  display: inline-block; margin-top: 12px; font-family: var(--font-body); font-weight: 700; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--steel-light); background: var(--steel-050);
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.serv .tag.soon { color: var(--red-light); background: var(--red-050); }

/* ---------- Cómo reservar ---------- */
.process-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px; }
.process-item { position: relative; padding: 26px 22px 22px; background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius); }
.process-item .step { font-family: var(--font-display); font-size: 1.5rem; color: transparent; -webkit-text-stroke: 1.5px var(--red); display: block; margin-bottom: 10px; }
.process-item h4 { font-size: .95rem; margin-bottom: 6px; text-transform: none; color: var(--white); font-family: var(--font-body); font-weight: 700; }
.process-item p { color: var(--ink-soft); font-size: .87rem; }
.process-note { text-align: center; margin-top: 28px; color: var(--ink-soft); font-size: .9rem; background: var(--charcoal); border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px 22px; }

/* ---------- Horario ---------- */
.hours-table { display: grid; gap: 2px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.hours-row { display: flex; justify-content: space-between; gap: 10px; background: var(--charcoal); padding: 14px 20px; font-size: .95rem; }
.hours-row.closed { color: var(--ink-soft); }
.hours-row b { color: var(--white); font-weight: 700; }
.hours-row span:last-child { font-family: var(--font-body); font-weight: 600; color: var(--steel-light); }
.hours-row.closed span:last-child { color: var(--ink-soft); }

/* ---------- Stats ---------- */
.stats { background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 54px) clamp(24px, 4vw, 40px); position: relative; overflow: hidden; }
.stats::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--red), transparent); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat { border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .num { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--red-light); line-height: 1; }
.stat .lbl { color: var(--ink-soft); font-size: .86rem; margin-top: 10px; line-height: 1.35; }
@media (max-width: 780px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 22px; } .stat:nth-child(2) { border-right: 0; } .stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-bottom: 18px; } .stat:nth-child(3), .stat:nth-child(4) { border-bottom: 0; padding-bottom: 0; } }

/* ---------- Contacto ---------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: stretch; }
.contact-card { background: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-sm); }
.contact-card h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 8px; }
.contact-card > p { color: var(--ink-soft); margin-bottom: 26px; }
.contact-line { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.contact-line:first-of-type { border-top: 0; }
.contact-line .ico { width: 44px; height: 44px; border-radius: 13px; background: var(--red-050); color: var(--red-light); display: grid; place-items: center; flex: 0 0 auto; }
.contact-line .ico svg { width: 20px; height: 20px; }
.contact-line small { display: block; color: var(--ink-soft); font-size: .8rem; }
.contact-line b { font-size: 1rem; font-weight: 700; color: var(--white); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contact-note { margin-top: 20px; font-size: .82rem; color: var(--ink-soft); background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 16px; }
.map-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 380px; border: 1px solid var(--line); filter: grayscale(.3) invert(.92) contrast(.92); }
.map-card iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-box {
  background: linear-gradient(135deg, var(--red-dark), var(--black) 75%);
  color: #fff; border-radius: var(--radius-lg); padding: clamp(44px, 7vw, 76px) 24px; position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
.cta-box::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px); }
.cta-box > * { position: relative; z-index: 1; }
.cta-box .eyebrow { color: rgba(255,255,255,.85); justify-content: center; }
.cta-box .eyebrow::before { background: #fff; }
.cta-box h2 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin: 12px 0 14px; }
.cta-box p { font-size: 1.06rem; opacity: .92; max-width: 46ch; margin: 0 auto 28px; }
.cta-box .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.cta-box .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.2); }

/* ---------- Footer ---------- */
.footer { background: var(--black); color: rgba(255,255,255,.7); padding: 56px 0 28px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer p { font-size: .92rem; opacity: .72; max-width: 34ch; }
.footer h5 { color: #fff; font-family: var(--font-display); font-size: .92rem; margin-bottom: 14px; letter-spacing: .04em; }
.footer ul { list-style: none; display: grid; gap: 9px; }
.footer ul a { font-size: .92rem; opacity: .8; transition: opacity .2s, color .2s; }
.footer ul a:hover { opacity: 1; color: var(--red-light); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .84rem; opacity: .65; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Botón flotante ---------- */
/* Instagram, no WhatsApp ni llamada: es el único canal público y
   verificado que tiene el negocio hoy (ver nota en config.js y
   valor.html — no se ha encontrado teléfono publicado en ningún
   directorio, red social ni la propia nota de prensa municipal). */
.ig-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #8b3aa8 60%, #3a5fcd);
  display: grid; place-items: center; box-shadow: 0 12px 30px rgba(224,33,58,.4);
  transition: transform .3s var(--ease);
  border: 2px solid var(--black);
}
.ig-float:hover { transform: scale(1.08); }
.ig-float svg { width: 27px; height: 27px; fill: #fff; }

/* ---------- Página secundaria (valor.html) ---------- */
.page-hero { padding: 140px 0 50px; text-align: center; }
.page-hero .eyebrow { margin-bottom: 16px; justify-content: center; }

@media (max-width: 720px) {
  .hero { padding-top: 128px; }
}