/* Barbería Brillantina · Concepto WEBO · retro años 70
   Paleta: mostaza, chocolate, nata, naranja tostado y oliva.
   Tipografía: Caprasimo (rótulo gordo) + Chivo 400 y 600.
   Forma: todo redondeado. Superficies 32 a 48px, huecos de foto muy redondeados (nunca arcos), pulsables en píldora.
   Movimiento (8/10, groove setentero, sin destellos ni brillos): el sol de rayos arranca rápido y se queda girando lento
   (se acelera un poco con el scroll, como un disco) y el cartel de «Horario» se mece colgado de su clavo. Alrededor:
   el rótulo entra letra a letra, las franjas se despliegan, la pizarra se escribe fila a fila y la tapa de la lata gira. */

@font-face { font-family: "Caprasimo"; src: url("/assets/fonts/conceptos/caprasimo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo"; src: url("/assets/fonts/conceptos/chivo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo"; src: url("/assets/fonts/conceptos/chivo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --mostaza: #E3A82B;
  --chocolate: #3A2216;
  --nata: #F7E9CF;
  --naranja: #D2642A;
  --oliva: #7C7A2F;
  --cacao: #644E3F;            /* texto secundario sobre nata (6,5:1) */
  --nata-suave: rgb(247 233 207 / .78);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ancho: 1328px;
  --margen: clamp(16px, 3.9vw, 56px);
  --hueco: clamp(14px, 1.7vw, 24px);
  --display: "Caprasimo", "Cooper Black", Georgia, serif;
}

html { scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--nata);
  color: var(--chocolate);
  font: 400 1.0625rem/1.6 "Chivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

::selection { background: var(--mostaza); color: var(--chocolate); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 12px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }

.saltar {
  position: absolute; left: 16px; top: -64px; z-index: 10;
  padding: 10px 18px; border-radius: 999px;
  background: var(--chocolate); color: var(--nata); text-decoration: none; font-weight: 600;
}
.saltar:focus-visible { top: 12px; }

.cabecera__in, .portada, .servicios, .casa__in, .puerta, .pie__in {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 30px; border-radius: 999px;
  background: var(--chocolate); color: var(--nata);
  font-weight: 600; font-size: 1.0625rem; line-height: 1; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color 220ms ease, color 220ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--cabecera { min-height: 44px; padding: 0 22px; font-size: .9688rem; }
.enlace {
  font-weight: 600; color: var(--chocolate);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em;
  text-decoration-color: var(--naranja);
  transition: text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--mostaza); color: var(--chocolate); }
  .enlace:hover { text-decoration-color: var(--chocolate); }
  .cabecera__nav a:hover { text-decoration-color: var(--naranja); }
  .pie a:hover { color: var(--mostaza); }
  .marca:hover .marca__sol g { transform: rotate(45deg); }
}

/* Cabecera */
.cabecera__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 76px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; }
.marca__sol { width: 30px; height: 30px; flex: none; }
.marca__sol g { transform-origin: 16px 16px; transform-box: view-box; transition: transform 700ms var(--ease); }
.marca__nombre { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.cabecera__nav ul { display: flex; gap: clamp(20px, 2.8vw, 40px); }
.cabecera__nav a {
  font-weight: 600; font-size: .9688rem; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .4em; text-decoration-color: transparent; transition: text-decoration-color 200ms ease;
}
.boton--cabecera { justify-self: end; }

/* Portada: un sol de rayos detrás de la foto, horizonte de tres franjas y el rótulo a todo lo ancho */
.portada {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  padding-top: clamp(8px, 1.6vh, 16px); padding-bottom: clamp(28px, 4.5vh, 48px);
}
.portada__texto { grid-column: 1 / 6; grid-row: 1; align-self: center; padding-bottom: clamp(48px, 8vh, 80px); }
.portada__lugar { font-weight: 600; font-size: .9688rem; color: var(--cacao); }
.portada__frase {
  margin-top: 14px; font-family: var(--display); font-size: clamp(1.75rem, 2.75vw, 2.5rem); line-height: 1.12;
  max-width: 16ch;
}
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(24px, 4vh, 36px); }

.sol {
  grid-column: 6 / 13; grid-row: 1;
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(340px, 65svh, 640px);
  border-radius: 44px;
  background: var(--mostaza);
}
.sol__rayos {
  position: absolute; left: 50%; top: 44%; z-index: -2;
  /* Lo justo para cubrir las esquinas al girar (desde el 44 % de alto): capa más pequeña, más ligera en móvil */
  width: 165%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%;
  background: repeating-conic-gradient(from -4deg,
    var(--mostaza) .15deg 7.85deg,
    var(--naranja) 8.15deg 15.85deg,
    var(--chocolate) 16.15deg 19.85deg,
    var(--mostaza) 20.15deg);
}
.sol__horizonte {
  position: absolute; inset: auto 0 0 0; z-index: -1; height: 16%;
  display: grid; grid-template-rows: 5px 1fr 1fr 1.2fr;
}
.sol__horizonte span:nth-child(1) { background: var(--nata); }
.sol__horizonte span:nth-child(2) { background: var(--naranja); transform-origin: 0 50%; }
.sol__horizonte span:nth-child(3) { background: var(--mostaza); transform-origin: 100% 50%; }
.sol__horizonte span:nth-child(4) { background: var(--oliva); transform-origin: 0 50%; }
.slot { position: relative; overflow: hidden; }
.slot--sillon {
  position: absolute; left: 50%; top: 44%;
  height: 72%; aspect-ratio: 4 / 5;
  translate: -50% -50%;
  border-radius: 56px;
  border: 10px solid var(--nata);
  box-shadow: 0 0 0 3px var(--chocolate), 0 28px 48px -24px rgb(58 34 22 / .65);
  background:
    radial-gradient(circle at 76% 20%, rgb(247 233 207 / .55) 0 5%, rgb(247 233 207 / 0) 9%),
    radial-gradient(circle at 18% 34%, rgb(227 168 43 / .55) 0 7%, rgb(227 168 43 / 0) 12%),
    radial-gradient(circle at 86% 62%, rgb(210 100 42 / .6) 0 6%, rgb(210 100 42 / 0) 10%),
    radial-gradient(circle at 30% 12%, rgb(247 233 207 / .35) 0 3%, rgb(247 233 207 / 0) 6%),
    linear-gradient(118deg, rgb(247 233 207 / 0) 38%, rgb(247 233 207 / .14) 46%, rgb(247 233 207 / 0) 54%),
    radial-gradient(130% 95% at 32% 12%, #F2B85A 0%, #D2642A 40%, #7A3A1C 74%, #3A2216 100%);
}
.slot--sillon::after, .slot--local::after, .slot--lata::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .35; mix-blend-mode: multiply;
}

.portada__marca {
  grid-column: 1 / 13; grid-row: 2;
  font-size: min(16.6vw, 15rem); line-height: .78; letter-spacing: -.022em;
  margin-top: -.3em; margin-left: -.04em;
  position: relative; z-index: 1;
  white-space: nowrap;
}
.portada__letras { display: inline-block; }
.portada__letras > span { display: inline-block; transform-origin: 50% 100%; }

/* La pizarra */
.servicios {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: center;
  padding-top: clamp(80px, 10vw, 152px); padding-bottom: clamp(88px, 11vw, 160px);
}
.servicios__intro { grid-column: 1 / 5; }
.servicios h2, .casa h2, .reservar h2 { font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.01em; }
.servicios__intro p { margin-top: 20px; color: var(--cacao); max-width: 30ch; }
.servicios__intro p + p { margin-top: 12px; }

.pizarra {
  grid-column: 6 / 13;
  margin: 13px;
  padding: clamp(32px, 4.6vw, 64px) clamp(24px, 4.6vw, 64px) clamp(28px, 4vw, 56px);
  border-radius: 36px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgb(247 233 207 / .06), rgb(247 233 207 / 0) 60%),
    var(--chocolate);
  color: var(--nata);
  box-shadow: 0 0 0 10px var(--mostaza), 0 0 0 13px var(--chocolate), 0 36px 60px -36px rgb(58 34 22 / .7);
}
.pizarra__titulo {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--display); font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1; color: var(--mostaza);
}
.pizarra__titulo::before, .pizarra__titulo::after { content: ""; width: 44px; height: 3px; border-radius: 3px; background: var(--naranja); }
.pizarra__lista { margin-top: clamp(24px, 3.4vw, 40px); display: grid; gap: 22px; }
.pizarra__lista li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 12px; }
.pizarra__nombre { font-weight: 600; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); }
.pizarra__puntos { border-bottom: 3px dotted rgb(247 233 207 / .32); transform: translateY(-5px); min-width: 24px; }
.pizarra__precio { font-family: var(--display); font-size: clamp(1.375rem, 2vw, 1.75rem); color: var(--mostaza); font-variant-numeric: tabular-nums; }
.pizarra__nota { grid-column: 1 / -1; margin-top: 2px; color: var(--nata-suave); font-size: .9688rem; }

/* La casa */
.casa { padding-bottom: clamp(88px, 11vw, 160px); }
.banda { display: grid; }
.banda span { height: clamp(10px, 1.2vw, 16px); }
.banda span:nth-child(1) { background: var(--mostaza); }
.banda span:nth-child(2) { background: var(--naranja); }
.banda span:nth-child(3) { background: var(--oliva); }
.casa__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  grid-template-rows: auto 1fr;
  padding-top: clamp(72px, 9vw, 136px);
}
.slot--local {
  grid-column: 1 / 8; grid-row: 1 / 3;
  aspect-ratio: 4 / 3.4; border-radius: 48px;
  background:
    radial-gradient(70% 55% at 50% 0%, rgb(242 184 90 / .6), rgb(242 184 90 / 0) 70%),
    linear-gradient(180deg, rgb(58 34 22 / 0) 62%, rgb(58 34 22 / .55) 62.4%, rgb(58 34 22 / .75) 100%),
    repeating-linear-gradient(90deg, #8A4A24 0 34px, #7A4020 34px 36px, #93522A 36px 70px, #6E3A1C 70px 72px),
    #7A4020;
}
.slot--local::before {
  content: ""; position: absolute; left: 50%; top: 18%; width: 44%; height: 38%;
  translate: -50% 0; border-radius: 28px;
  background: linear-gradient(160deg, rgb(247 233 207 / .55), rgb(247 233 207 / .12) 55%, rgb(247 233 207 / .3));
  box-shadow: 0 0 0 8px #5A3019, 0 18px 30px -12px rgb(58 34 22 / .6);
}
.casa__texto { grid-column: 9 / 13; grid-row: 1; padding-top: 8px; }
.casa__texto p { margin-top: 18px; color: var(--cacao); max-width: 34ch; }
.casa__texto p + p { margin-top: 12px; }
.slot--lata {
  grid-column: 9 / 12; grid-row: 2; align-self: end;
  aspect-ratio: 1; border-radius: 40px; margin-top: 40px;
  background:
    radial-gradient(circle at 50% 50%,
      var(--chocolate) 0 9%, var(--mostaza) 9.5% 26%, var(--chocolate) 26.5% 27.5%, var(--mostaza) 28% 30%,
      var(--oliva) 30.5% 40%, #E9D6AE 40.5% 42%, rgb(58 34 22 / .45) 43%, rgb(58 34 22 / 0) 50%),
    radial-gradient(120% 120% at 20% 10%, #E07A3F 0%, var(--naranja) 45%, #A84C1E 100%);
}
/* El rótulo circular de la tapa va sobre el aro oliva; gira con el scroll (brillantina.js) */
.lata__tapa { position: absolute; inset: 0; width: 100%; height: 100%; }
.lata__tapa text { fill: var(--nata); font: 600 10px/1 "Chivo", ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; }
.slot:has(> img) > .lata__tapa { display: none; }

/* Horario como cartel de puerta y reserva */
.puerta {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: center;
  padding-bottom: clamp(96px, 12vw, 176px);
}
.cartel { grid-column: 2 / 7; display: grid; justify-items: center; }
.cartel__cordel { width: min(62%, 240px); height: auto; margin-bottom: -2px; }
.cartel__placa {
  width: 100%; max-width: 440px;
  padding: 40px clamp(28px, 3.4vw, 48px) 44px;
  border-radius: 36px;
  background: var(--mostaza);
  outline: 2px solid var(--chocolate); outline-offset: -14px;
  box-shadow: 0 30px 50px -30px rgb(58 34 22 / .7);
  transform: rotate(-2deg);
}
.cartel__titulo { text-align: center; font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1; }
.cartel__horas { margin-top: 26px; display: grid; gap: 14px; }
.cartel__horas div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 2px solid rgb(58 34 22 / .22); padding-top: 12px; }
.cartel__horas dt { font-weight: 600; }
.cartel__horas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.reservar { grid-column: 8 / 13; }
.reservar p { margin-top: 20px; color: var(--cacao); max-width: 34ch; font-size: 1.125rem; }
.reservar .boton { margin-top: 32px; }

/* Pie */
.pie { background: var(--chocolate); color: var(--nata); }
.pie__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; padding-top: 44px; padding-bottom: 96px; }
.pie__marca { font-family: var(--display); font-size: 2.25rem; line-height: 1; color: var(--mostaza); }
.pie__lugar { color: var(--nata-suave); }
.pie nav { margin-left: auto; }
.pie ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pie a { color: var(--nata); text-decoration: none; font-weight: 600; transition: color 200ms ease; }
.pie :focus-visible { outline-color: var(--mostaza); }

/* Entrada de la portada (solo con html.mov; sin JS o con movimiento reducido, todo quieto y en su sitio).
   La caja del sol se asienta, las franjas del horizonte se despliegan de lado a lado, el marco de la foto llega con
   un pequeño giro y el rótulo entra letra a letra como en un cartel de los setenta. El giro del sol lo pone el JS. */
html.mov .sol { animation: brill-caja 800ms var(--ease) both; }
html.mov .sol__horizonte span:nth-child(n+2) { animation: brill-franja 1000ms var(--ease) both; }
html.mov .sol__horizonte span:nth-child(2) { animation-delay: 220ms; }
html.mov .sol__horizonte span:nth-child(3) { animation-delay: 320ms; }
html.mov .sol__horizonte span:nth-child(4) { animation-delay: 420ms; }
html.mov .slot--sillon { animation: brill-foto 900ms cubic-bezier(.3, 1.22, .5, 1) 260ms both; }
html.mov .portada__letras > span { animation: brill-letra 760ms cubic-bezier(.3, 1.22, .5, 1) calc(380ms + var(--i) * 42ms) both; }
html.mov .portada__texto { animation: brill-subir 800ms var(--ease) 560ms both; }
@keyframes brill-caja { from { opacity: 0; transform: scale(.95); } }
@keyframes brill-franja { from { transform: scaleX(0); } }
@keyframes brill-foto { from { opacity: 0; transform: scale(.84) rotate(-7deg); } }
@keyframes brill-letra { from { opacity: 0; transform: translateY(.32em) rotate(10deg); } }
@keyframes brill-subir { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) { .marca__sol g { transition: none; } }

/* Tableta */
@media (max-width: 960px) {
  .cabecera__nav { display: none; }
  .cabecera__in { grid-template-columns: 1fr auto; }
  .sol { grid-column: 1 / 13; grid-row: 1; height: clamp(320px, 44svh, 480px); }
  .portada__marca { grid-row: 2; font-size: 16.2vw; margin-top: -.26em; }
  .portada__texto { grid-column: 1 / 13; grid-row: 3; padding-bottom: 0; margin-top: 22px; }
  .portada__frase { max-width: 22ch; }
  .servicios__intro { grid-column: 1 / 13; margin-bottom: 48px; }
  .pizarra { grid-column: 1 / 13; }
  .slot--local { grid-column: 1 / 13; grid-row: 1; }
  .casa__texto { grid-column: 1 / 9; grid-row: 2; padding-top: 48px; }
  .slot--lata { grid-column: 9 / 13; grid-row: 2; align-self: start; margin-top: 56px; }
  .cartel { grid-column: 1 / 13; }
  .reservar { grid-column: 1 / 13; margin-top: 72px; text-align: center; justify-items: center; display: grid; }
}

/* Móvil */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .cabecera__in { min-height: 64px; gap: 12px; }
  .marca__nombre { font-size: 1.3125rem; }
  .marca__sol { width: 26px; height: 26px; }
  .boton--cabecera { min-height: 40px; padding: 0 18px; font-size: .9063rem; }
  .sol { height: clamp(290px, 42svh, 380px); border-radius: 32px; }
  .slot--sillon { border-radius: 40px; border-width: 8px; height: 74%; }
  .portada__marca { font-size: 16.4vw; margin-top: -.24em; }
  .portada__texto { margin-top: 18px; }
  .portada__lugar { font-size: .875rem; }
  .portada__frase { font-size: 1.625rem; margin-top: 8px; }
  .portada__acciones { margin-top: 22px; gap: 12px 22px; }
  .pizarra { margin: 11px; border-radius: 28px; box-shadow: 0 0 0 8px var(--mostaza), 0 0 0 11px var(--chocolate), 0 30px 50px -30px rgb(58 34 22 / .7); }
  .pizarra__lista li { column-gap: 8px; }
  .pizarra__titulo::before, .pizarra__titulo::after { width: 24px; }
  .slot--local { border-radius: 36px; }
  .casa__texto { grid-column: 1 / 13; }
  .slot--lata { grid-column: 3 / 11; grid-row: 3; margin-top: 40px; border-radius: 32px; }
  .cartel__placa { padding: 34px 26px 36px; border-radius: 28px; }
  .pie nav { margin-left: 0; width: 100%; }
}

.cartel__pie { margin-top: 22px; text-align: center; font-family: var(--display); font-size: 1.25rem; line-height: 1.2; }