/* Salón de Belleza Valeria Silva
   Dirección: el interior de sus salones, en el negro y dorado de su marca.
   Espejo en arco con marco dorado (como los de sus locales) mostrando sus trabajos, muro de listones,
   hojas doradas y letra manuscrita de sus afiches; papel claro para leer precios. */
@font-face { font-family: "Gloock"; src: url("/fonts/display.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap }
@font-face { font-family: "Pinyon Script"; src: url("/fonts/script.woff2") format("woff2"); font-weight: 400; font-display: swap }

:root {
  --tinta: #11100e;
  --tinta-2: #1d1b18;
  --papel: #f3f0ea;
  --papel-2: #e8e3da;
  --rosa: #84652a;
  --rosa-claro: #dcbd7c;
  --miel: #c9a35b;
  --listones: repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 18px, rgba(0,0,0,.35) 18px 19px, transparent 19px 22px);
  --oro: linear-gradient(135deg, #ecd49a 0%, #c9a35b 45%, #9c7a38 100%);
  --texto: #15130f;
  --suave: #675f53;
  --suave-osc: #bdb3a4;
  --linea: #d8d0c2;
  --linea-osc: #3a342b;

  --display: "Gloock", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --mono: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--papel); color: var(--texto); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--tinta); z-index: 30 }
[hidden] { display: none !important }
img { max-width: 100%; height: auto; display: block }
a { color: inherit }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -.01em }
h1 em, h2 em { font-style: normal; color: var(--rosa) }
p { margin: 0 }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: 4px }

.skip { position: absolute; left: 8px; top: -60px; background: var(--miel); color: var(--tinta); padding: 8px 14px; border-radius: 6px; z-index: 50; text-decoration: none }
.skip:focus { top: calc(8px + env(safe-area-inset-top, 0px)) }

.eyebrow { font: 600 .75rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rosa) }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 .975rem/1 var(--sans); text-decoration: none; border: 1.5px solid transparent; transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out); -webkit-tap-highlight-color: transparent; text-align: center }
.btn:active { transform: scale(.97) }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .9rem }
.btn-rosa { background: var(--oro); color: #15130f }
.btn-linea { border-color: currentColor; color: inherit }
.btn-linea-osc { border-color: var(--linea-osc); color: var(--papel); background: var(--tinta-2) }
@media (hover: hover) and (pointer: fine) {
  .btn-rosa:hover { filter: brightness(1.08) }
  .btn-linea:hover { background: var(--texto); color: var(--papel); border-color: var(--texto) }
  .banda-osc .btn-linea:hover, .hero .btn-linea:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel) }
}

/* Encabezado */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(17,16,14,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--papel); border-bottom: 1px solid var(--linea-osc) }
.top-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding-block: 12px; padding-left: var(--gutter); padding-right: var(--gutter-r) }
.marca { font: 400 1.4rem/1 var(--display); text-decoration: none; display: flex; align-items: center; gap: 10px; white-space: nowrap }
.vs { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--oro); color: var(--tinta); font: 400 .95rem/1 var(--display); letter-spacing: -.06em; box-shadow: 0 0 0 1.5px var(--tinta), 0 0 0 2.5px var(--miel) }
.marca .marca-sub { font: 600 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--miel) }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: .95rem }
.nav a { text-decoration: none; color: var(--suave-osc); transition: color 160ms var(--ease-out) }
@media (hover: hover) { .nav a:hover { color: var(--papel) } }
@media (max-width: 860px) { .nav { display: none } .top .btn { margin-left: auto } .marca .marca-sub { display: none } }

/* Portada */
.hero { background: radial-gradient(60% 70% at 72% 38%, rgba(201,163,91,.13), transparent 70%), var(--listones), var(--tinta); color: var(--papel); overflow: hidden; position: relative; padding-bottom: 40px }
.hero-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 72px 64px; padding-left: var(--gutter); padding-right: var(--gutter-r) }
.hero-copy { display: grid; gap: 22px; min-width: 0 }
.hero h1 { font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: .96 }
.hero h1 em { display: block; background: linear-gradient(100deg, #9c7a38 0%, #d9b872 30%, #f6e4b0 48%, #d9b872 62%, #a8853f 100%); background-size: 260% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo 1800ms var(--ease-in-out) 500ms both }
@keyframes brillo { from { background-position: 100% 0 } }
.hero-copy { position: relative }
.firma { font: 400 clamp(2rem, 3.6vw, 3rem)/1 var(--script); color: var(--rosa-claro); transform: rotate(-6deg); margin: -14px 0 -6px clamp(120px, 22vw, 300px); text-shadow: 0 2px 18px rgba(0,0,0,.6); animation: firmar 900ms var(--ease-out) 900ms both }
@keyframes firmar { from { opacity: 0; clip-path: inset(0 100% 0 0) } to { opacity: 1; clip-path: inset(0 0 0 0) } }
.hojas { position: absolute; pointer-events: none; user-select: none; height: auto }
.hojas-hero { width: 280px; left: -120px; bottom: -10px; opacity: .28; transform: rotate(-12deg) }
.onda { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; display: block }
.onda-fondo { fill: var(--tinta) }
.onda-linea { fill: none; stroke: var(--miel); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .8 }
.hero .eyebrow { color: var(--miel) }
.lead { font-size: 1.15rem; color: var(--suave-osc); max-width: 34em }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px }
.hero-rating { font: 500 .9rem/1.5 var(--sans); color: var(--suave-osc); max-width: 40em }
.estrellas { color: var(--miel); letter-spacing: .1em; margin-right: 6px }

.espejo { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0 }
.espejo-marco { width: min(100%, 420px); padding: 9px; background: var(--tinta); border-radius: 50% 50% 18px 18px / 45.5% 45.5% 18px 18px; box-shadow: 0 0 0 1.5px var(--miel), 0 0 0 7px rgba(201,163,91,.10), 0 40px 90px -30px rgba(0,0,0,.85) }
.espejo-vidrio { position: relative; aspect-ratio: 900 / 989; max-width: 100%; border-radius: inherit; overflow: hidden; background: var(--tinta-2) }
.espejo-foto { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1100ms var(--ease-in-out) }
.espejo-foto.is-on { opacity: 1 }
.espejo-vidrio::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%); pointer-events: none }
.espejo-pie { font-size: .95rem; color: var(--papel); text-align: center; min-height: 1.5em }
.espejo-pie #esp-h { color: var(--suave-osc); margin-left: 6px }
.espejo-pie.is-swap { animation: entrar 420ms var(--ease-out) }
.espejo-puntos { display: flex; gap: 4px }
.punto { appearance: none; border: 0; background: none; width: 32px; height: 32px; padding: 0; cursor: pointer; display: grid; place-items: center }
.punto::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--linea-osc); transition: background-color 300ms var(--ease-out), width 300ms var(--ease-out) }
.punto[aria-pressed="true"]::before { background: var(--miel); width: 30px }
@media (max-width: 860px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 36px 40px; gap: 30px }
  .espejo { order: -1 }
  .espejo-marco { width: min(58vw, 250px) }
  .espejo-pie { font-size: .88rem }
  .hojas-hero { opacity: .16 }
  .hero-cta .btn { flex: 1 1 auto }
}

/* Bandas */
.banda { background: var(--papel) }
.banda-alt { background: var(--papel-2) }
.banda-osc { background: var(--listones), var(--tinta); color: var(--papel); position: relative }
.banda-in { max-width: 1180px; margin: 0 auto; padding-block: 88px; padding-left: var(--gutter); padding-right: var(--gutter-r); display: grid; gap: 32px }
@media (max-width: 860px) { .banda-in { padding-block: 60px } }
.sec-head { display: grid; gap: 14px; max-width: 46rem }
.sec-head h2 { font-size: clamp(2.3rem, 5vw, 3.8rem) }
.sec-lead { color: var(--suave); font-size: 1.08rem; max-width: 38em }
.banda-osc .sec-lead { color: var(--suave-osc) }
.banda-osc .eyebrow { color: var(--miel) }
.banda-osc h2 em, .banda-gift h2 em { color: var(--rosa-claro) }
.banda-osc h2 em { background: linear-gradient(100deg, #b8914a, #f0d99c 50%, #b8914a); -webkit-background-clip: text; background-clip: text; color: transparent }

/* Listas de precios */
.precios { list-style: none; margin: 0; padding: 0 }
.precios li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--linea) }
.precios .sv { flex: 1 1 auto; min-width: 0; text-wrap: pretty }
.precios .pr { flex: none; font: 600 .98rem/1.4 var(--sans); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; letter-spacing: .01em }

/* Cotizador por largo */
.largos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 760px }
.largo { appearance: none; border: 1.5px solid var(--linea); background: transparent; color: var(--texto); border-radius: 14px; min-height: 104px; padding: 14px 10px 12px; display: grid; justify-items: center; align-content: end; gap: 10px; font: 600 .95rem/1.2 var(--sans); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out); -webkit-tap-highlight-color: transparent }
.largo:active { transform: scale(.97) }
.largo-hebra { width: 10px; border-radius: 3px 3px 6px 6px; background: linear-gradient(180deg, #523424, #a67952 60%, #c49e70); transition: height 260ms var(--ease-out) }
.largo-c .largo-hebra { height: 14px } .largo-m .largo-hebra { height: 28px } .largo-l .largo-hebra { height: 44px } .largo-x .largo-hebra { height: 60px }
.largo[aria-selected="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta) }
@media (hover: hover) and (pointer: fine) { .largo[aria-selected="false"]:hover { border-color: var(--texto) } }

.cot-panel { display: grid; gap: 22px }
.cot-panel.is-entering { animation: entrar 260ms var(--ease-out) }
@keyframes entrar { from { opacity: 0; transform: translateY(6px) } }
.cot-resumen { font: 500 .95rem/1.5 var(--sans); color: var(--suave) }
.cot-resumen strong { color: var(--rosa); font-weight: 400 }
.cot-grid { columns: 2 340px; column-gap: 48px }
.cot-grupo { display: grid; gap: 6px; min-width: 0; break-inside: avoid; padding-bottom: 30px }
.cot-grupo h3 { font-size: 1.5rem; padding-bottom: 6px; border-bottom: 1.5px solid var(--texto) }
.fuente { font-size: .88rem; color: var(--suave) }

/* Carta completa */
.buscador { display: grid; gap: 8px; max-width: 520px }
.buscador-l { font: 600 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--suave) }
#q { font: 400 1.05rem/1 var(--sans); color: var(--texto); background: var(--papel); border: 1.5px solid var(--linea); border-radius: 12px; min-height: 52px; padding: 0 16px; width: 100%; transition: border-color 160ms var(--ease-out) }
#q:focus { outline: none; border-color: var(--rosa) }
#q::-webkit-search-cancel-button { filter: grayscale(1) brightness(.4) }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-top: -8px }
.chips::-webkit-scrollbar { display: none }
.chip { appearance: none; flex: none; border: 1.5px solid var(--linea); background: transparent; color: var(--texto); border-radius: 999px; min-height: 40px; padding: 0 14px; font: 500 .9rem/1 var(--sans); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out) }
.chip:active { transform: scale(.97) }
.chip-n { font: 600 .72rem/1 var(--mono); color: var(--suave); margin-left: 4px }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta) }
.chip[aria-pressed="true"] .chip-n { color: var(--miel) }
@media (hover: hover) and (pointer: fine) { .chip[aria-pressed="false"]:hover { border-color: var(--texto) } }

.carta-cat[open] .carta-vacio { color: var(--suave) }

/* Trabajos */
.fotos { columns: 3 260px; column-gap: 16px }
.foto { margin: 0 0 16px; break-inside: avoid; display: grid; gap: 8px }
.foto-btn { appearance: none; border: 0; padding: 0; margin: 0; background: none; display: block; width: 100%; cursor: zoom-in; border-radius: 10px; position: relative; transition: transform 240ms var(--ease-out) }
.foto-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(217,184,114,.0); transition: box-shadow 240ms var(--ease-out) }
.foto-btn:active { transform: scale(.98) }
@media (hover: hover) and (pointer: fine) { .foto-btn:hover { transform: translateY(-4px) } .foto-btn:hover::after { box-shadow: inset 0 0 0 1px rgba(217,184,114,.7) } }
.foto img { width: 100%; height: auto; border-radius: 10px; background: var(--tinta-2); display: block }
.foto figcaption { font-size: .88rem; color: var(--papel) }
.foto figcaption span { font: 600 .74rem/1.4 var(--mono); color: var(--suave-osc); margin-left: 4px }
.fotos-mas { margin-top: -8px }

/* Sucursales */
.sucursales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
@media (max-width: 860px) { .sucursales { grid-template-columns: minmax(0, 1fr) } }
.suc { border: 1px solid var(--linea-osc); border-radius: 18px; overflow: hidden; display: grid; align-content: start; background: var(--tinta-2) }
.suc-foto { width: 100%; height: auto; border-bottom: 1px solid var(--linea-osc) }
.suc-cuerpo { padding: 26px 28px 28px; display: grid; gap: 12px }
@media (max-width: 420px) { .suc-cuerpo { padding: 22px 18px } }
.suc-wa { font-size: .95rem; color: var(--suave-osc) }
.suc-wa span { font: 600 .7rem/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--papel); margin-right: 8px }
.suc-wa a { color: var(--papel); text-underline-offset: 3px; text-decoration-color: var(--linea-osc) }
.suc-tag { font: 600 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--miel) }
.suc h3 { font-size: clamp(1.7rem, 3vw, 2.2rem) }
.suc-dir { color: var(--suave-osc) }
.suc-meta { font: 500 .92rem/1.5 var(--sans); color: var(--rosa-claro) }
.suc-equipo { font-size: .95rem; color: var(--suave-osc) }
.suc-equipo span { display: block; font: 600 .7rem/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--papel) }
.horario { margin: 4px 0 0; display: grid; border-top: 1px solid var(--linea-osc) }
.horario div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea-osc) }
.horario dt { color: var(--suave-osc) }
.horario dd { margin: 0; font: 600 .92rem/1.5 var(--mono); font-variant-numeric: tabular-nums }
.suc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px }

/* Gift cards */
.banda-gift { position: relative; overflow: hidden }
.gifts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 900px }
@media (max-width: 700px) { .gifts { grid-template-columns: minmax(0, 1fr) } }
.gift { position: relative; display: grid; gap: 6px; align-content: end; aspect-ratio: 1.586; max-width: 100%; padding: 24px; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--papel); background: var(--tinta); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -18px rgba(17,16,14,.5); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out) }
.gift:active { transform: scale(.98) }
@media (hover: hover) and (pointer: fine) { .gift:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 26px 46px -18px rgba(17,16,14,.55) } }
.gift-color .gift::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(217,184,114,.35); border-radius: 10px; pointer-events: none }
.gift-hojas { position: absolute; width: 150px; right: -18px; top: -30px; opacity: .55; transform: rotate(18deg); pointer-events: none }
.gift-vs { position: absolute; top: 22px; left: 24px; width: 42px; height: 42px; font-size: 1.05rem }
.gift-marca { font: 600 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--miel); position: relative }
.gift-nombre { font: 400 clamp(1.4rem, 2.6vw, 1.9rem)/1.05 var(--display); position: relative; max-width: 14em }
.gift-precio { font: 500 1rem/1 var(--mono); position: relative }
.gift-cta { font-size: .88rem; color: var(--rosa-claro); position: relative; margin-top: 6px }

/* Pie */
.pie { background: var(--listones), var(--tinta); color: var(--papel); border-top: 1px solid var(--linea-osc); position: relative; overflow: hidden }
.hojas-pie { width: 260px; right: -40px; top: -30px; opacity: .25; transform: scaleX(-1) rotate(-8deg) }
.pie-in { position: relative }
.pie-col p + p { margin-top: 8px }
.pie-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 56px calc(56px + env(safe-area-inset-bottom, 0px)); padding-left: var(--gutter); padding-right: var(--gutter-r) }
.pie-marca { font: 400 1.8rem/1 var(--display) }
.pie-marca em { display: block; font: 400 1.7rem/1.2 var(--script); font-style: normal; color: var(--rosa-claro); color: var(--suave-osc); margin-top: 10px }
.pie-marca span { display: block; font: 600 .7rem/1.8 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--miel) }
.pie-l { font: 600 .7rem/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--suave-osc) }
.pie a { text-decoration-color: var(--linea-osc); text-underline-offset: 3px }
@media (max-width: 760px) { .pie-in { grid-template-columns: minmax(0, 1fr) 1fr; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) } .pie-marca { grid-column: 1 / -1 } }

/* Barra fija en celular */
.barra { display: none }
@media (max-width: 760px) {
  .barra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter); background: rgba(17, 16, 14, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linea-osc); transform: translateY(110%); transition: transform 280ms var(--ease-out) }
  .barra.is-visible { transform: none }
}

/* 404 */
.notfound { min-height: 100vh; display: grid; place-content: center; gap: 20px; text-align: center; background: var(--tinta); color: var(--papel); padding: 24px var(--gutter-r) 24px var(--gutter) }
.notfound h1 { font-size: clamp(2.4rem, 7vw, 4rem) }
.notfound h1 em { color: var(--rosa-claro); font-style: normal }
.notfound .eyebrow { color: var(--miel) }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important }
}

/* Entradas al hacer scroll (solo con JS; sin JS todo queda visible) */
.js [data-reveal] { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out) }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px) }

/* Filas del cotizador entrando en cascada */
.cot-panel.is-entering li { animation: fila 360ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 22ms) }
@keyframes fila { from { opacity: 0; transform: translateY(6px) } }
.largo[aria-selected="true"] .largo-hebra { box-shadow: 0 0 0 2px var(--tinta), 0 0 0 3px var(--miel) }

/* Hoja para elegir sucursal y visor de fotos */
dialog { border: 0; padding: 0; background: transparent; color: var(--papel); max-width: calc(100vw - 32px) }
dialog::backdrop { background: rgba(10,9,8,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
dialog[open] { animation: aparecer 260ms var(--ease-out) }
dialog[open]::backdrop { animation: velo 260ms var(--ease-out) }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px) scale(.97) } }
@keyframes velo { from { opacity: 0 } }
.hoja { width: 420px }
.hoja-in { background: var(--tinta-2); border: 1px solid var(--linea-osc); border-radius: 18px; padding: 26px; display: grid; gap: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5) }
.hoja .eyebrow { color: var(--miel) }
.hoja-t { font: 400 1.8rem/1.1 var(--display) }
.hoja-op { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--linea-osc); border-radius: 12px; text-decoration: none; transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), transform 160ms var(--ease-out) }
.hoja-op span { font-weight: 600 }
.hoja-op small { font: 500 .85rem/1 var(--mono); color: var(--rosa-claro) }
.hoja-op:active { transform: scale(.98) }
@media (hover: hover) and (pointer: fine) { .hoja-op:hover { border-color: var(--miel); background: rgba(201,163,91,.08) } }
.hoja-x { appearance: none; background: none; border: 0; color: var(--suave-osc); font: 500 .95rem/1 var(--sans); padding: 10px; cursor: pointer; justify-self: center }
.visor { width: min(720px, calc(100vw - 32px)) }
.visor-in { display: grid; gap: 10px; justify-items: center }
.visor-in img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6) }
.visor-in p { font-size: .92rem; color: var(--papel) }
@media (max-width: 860px) { .firma { margin-left: 120px } .hojas-hero { width: 200px; left: -60px; bottom: auto; top: 30px } }

/* Menú en celular */
.menu-btn { display: none; appearance: none; background: none; border: 1px solid var(--linea-osc); color: var(--papel); border-radius: 999px; min-height: 40px; padding: 0 14px; font: 600 .9rem/1 var(--sans); align-items: center; gap: 8px; cursor: pointer; transition: transform 160ms var(--ease-out) }
.menu-btn:active { transform: scale(.97) }
.menu-ico { width: 14px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor }
@media (max-width: 860px) { .menu-btn { display: inline-flex } .top .top-res { margin-left: auto } }
@media (max-width: 400px) { .top .top-res { display: none } .menu-btn { margin-left: auto } }
.menu { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; background: transparent }
.menu[open] { animation: bajar 300ms var(--ease-out) }
@keyframes bajar { from { opacity: 0; transform: translateY(-12px) } }
.menu-in { min-height: 100%; background: var(--listones), var(--tinta); display: grid; align-content: start; gap: 34px; padding: calc(28px + env(safe-area-inset-top, 0px)) var(--gutter-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gutter) }
.menu-nav { display: grid }
.menu-nav a { font: 400 2.1rem/1.15 var(--display); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--linea-osc) }
.menu[open] .menu-nav a { animation: entrar 420ms var(--ease-out) both }
.menu[open] .menu-nav a:nth-child(2) { animation-delay: 40ms } .menu[open] .menu-nav a:nth-child(3) { animation-delay: 80ms } .menu[open] .menu-nav a:nth-child(4) { animation-delay: 120ms } .menu[open] .menu-nav a:nth-child(5) { animation-delay: 160ms }
.menu-res { display: grid; gap: 10px }
.menu-res .eyebrow { color: var(--miel) }

/* Cotizador: los largos quedan a mano mientras bajas en el celular */
@media (max-width: 760px) {
  .largos { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--papel); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-block: 8px; margin-inline: -4px; padding-inline: 4px }
  .largo { min-height: 66px; padding: 8px 4px; gap: 6px; font-size: .82rem; border-radius: 10px }
  .largo-c .largo-hebra { height: 8px } .largo-m .largo-hebra { height: 14px } .largo-l .largo-hebra { height: 20px } .largo-x .largo-hebra { height: 26px }
      }

/* Carta de servicios: tarjetas por categoría, variantes por largo en una sola fila */
.carta { columns: 2 420px; column-gap: 20px }
.carta-cat { break-inside: avoid; margin: 0 0 20px; background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; transition: box-shadow 260ms var(--ease-out) }
.carta-cat[open] { box-shadow: 0 18px 40px -28px rgba(17,16,14,.35) }
.carta-cat summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 200ms var(--ease-out) }
.carta-cat summary::-webkit-details-marker { display: none }
@media (hover: hover) and (pointer: fine) { .carta-cat summary:hover { background: rgba(201,163,91,.07) } }
.carta-cat summary:active .cat-flecha { transform: scale(.92) }
.cat-tit { display: grid; gap: 4px; min-width: 0 }
.carta-cat h3 { font-size: 1.65rem }
.cat-rango { font: 500 .86rem/1.3 var(--sans); color: var(--suave); font-variant-numeric: tabular-nums }
.cat-flecha { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linea); display: grid; place-items: center; transition: transform 240ms var(--ease-out), background-color 240ms var(--ease-out), border-color 240ms var(--ease-out) }
.cat-flecha::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--texto); border-bottom: 1.5px solid var(--texto); transform: translateY(-2px) rotate(45deg); transition: transform 240ms var(--ease-out) }
.carta-cat[open] .cat-flecha { background: var(--tinta); border-color: var(--tinta) }
.carta-cat[open] .cat-flecha::before { border-color: var(--miel); transform: translateY(2px) rotate(-135deg) }
.carta-nota { margin: 0 22px 4px; padding: 10px 12px; border-radius: 10px; background: rgba(201,163,91,.12); font: 500 .86rem/1.4 var(--sans); color: var(--rosa) }
.carta-precios { padding: 4px 22px 14px; border-top: 1px solid var(--linea) }
.carta-cat[open] .carta-precios { animation: entrar 280ms var(--ease-out) }
.carta-precios .fila { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--linea) }
.carta-precios .fila:last-child { border-bottom: 0 }
.carta-precios .sv { font-weight: 500 }
.carta-precios .pr { font: 700 1.02rem/1.2 var(--sans); font-variant-numeric: tabular-nums lining-nums; color: var(--texto) }
.carta-precios .fila-var { display: grid; gap: 10px }
.lps { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px }
.lp { display: grid; gap: 4px; align-content: space-between; padding: 9px 11px; border-radius: 10px; background: var(--papel-2) }
.lp small { font: 600 .66rem/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--suave) }
.lp b { font: 700 1.02rem/1.1 var(--sans); font-variant-numeric: tabular-nums lining-nums }
@media (max-width: 760px) {
  .carta-cat { margin-bottom: 12px; border-radius: 14px }
  .carta-cat summary { padding: 16px 16px }
  .carta-cat h3 { font-size: 1.4rem }
  .carta-precios { padding: 2px 16px 10px }
  .carta-nota { margin: 0 16px 4px }
  .lps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* Reseñas en Google */
.res-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px }
@media (max-width: 600px) { .res-ops { grid-template-columns: minmax(0, 1fr) } }
.res-op { display: grid; gap: 6px; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--linea-osc); background: var(--tinta-2); text-decoration: none; transition: transform 160ms var(--ease-out), border-color 220ms var(--ease-out), background-color 220ms var(--ease-out) }
.res-op:active { transform: scale(.98) }
@media (hover: hover) and (pointer: fine) { .res-op:hover { border-color: var(--miel); background: #24211d } .res-op:hover .res-estrellas { letter-spacing: .22em } }
.res-estrellas { color: var(--miel); font-size: 1.1rem; letter-spacing: .14em; transition: letter-spacing 300ms var(--ease-out) }
.res-nom { font: 400 1.7rem/1.1 var(--display) }
.res-acc { font-weight: 600; color: var(--rosa-claro); display: inline-flex; align-items: center; gap: 8px }
.res-acc::after { content: "→"; transition: transform 200ms var(--ease-out) }
@media (hover: hover) and (pointer: fine) { .res-op:hover .res-acc::after { transform: translateX(4px) } }
.res-ayuda { color: var(--suave-osc); font-size: .95rem }
.res-ayuda strong { color: var(--papel); font-weight: 600 }
.menu[open] .menu-nav a:nth-child(6) { animation-delay: 200ms }

/* Celular: más fino y liviano */
.fotos-guia { display: none }
@media (max-width: 760px) {
  body { font-size: 1rem; line-height: 1.55 }
  .top-in { padding-block: 9px }
  .marca { font-size: 1.3rem }
  .menu-btn { min-height: 40px; border-color: rgba(201,163,91,.35) }
  .largos { top: calc(58px + env(safe-area-inset-top, 0px)) }
  html { scroll-padding-top: 64px }

  .banda-in { padding-block: 52px; gap: 26px }
  .sec-head { gap: 10px }
  .sec-head h2 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); line-height: 1.02 }
  .sec-lead { font-size: .98rem; line-height: 1.55 }
  .eyebrow { font-size: .7rem; letter-spacing: .16em }

  /* Portada: espejo protagonista, texto más compacto, botones lado a lado */
  .hero { padding-bottom: 54px }
  .hero-in { padding-block: 26px 20px; gap: 24px }
  .espejo { gap: 8px }
  .espejo-marco { width: min(64vw, 270px) }
  .espejo-puntos { margin-top: -4px }
  .hero-copy { gap: 16px }
  .hero h1 { font-size: clamp(2.7rem, 12.4vw, 3.3rem) }
  .firma { font-size: 2rem; margin: -10px 0 2px 34% }
  .lead { font-size: 1rem; line-height: 1.6 }
  .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
  .hero-cta .btn { min-height: 50px; padding: 0 12px; font-size: .92rem; line-height: 1.2 }
  .hero-rating { font-size: .82rem; padding-top: 14px; border-top: 1px solid var(--linea-osc) }

  /* Trabajos: carrusel que se desliza en vez de 7 fotos gigantes una tras otra */
  .fotos { columns: auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1); padding-inline: var(--gutter) var(--gutter-r); scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; align-items: start }
  .fotos::-webkit-scrollbar { display: none }
  .foto { flex: 0 0 74%; margin: 0; scroll-snap-align: start }
  .foto img { border-radius: 14px }
  .foto figcaption { font-size: .84rem; line-height: 1.35 }
  .foto figcaption span { display: block; margin: 2px 0 0 }
  .fotos-guia { display: flex; align-items: center; gap: 14px; margin-top: -12px }
  .fotos-barra { flex: 1; height: 2px; background: var(--linea-osc); border-radius: 2px; overflow: hidden }
  .fotos-barra i { display: block; height: 100%; width: 100%; background: var(--miel); transform-origin: left; transform: scaleX(var(--p, .143)); transition: transform 120ms linear }
  .fotos-n { font: 500 .78rem/1 var(--sans); color: var(--suave-osc); font-variant-numeric: tabular-nums; white-space: nowrap }
  .fotos-n b { color: var(--papel); font-weight: 600 }
  .fotos-mas { margin-top: -6px }
  .fotos-mas .btn { width: 100% }

  /* Cotizador y carta */
  .chips { margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1); padding-inline: var(--gutter) var(--gutter-r); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent) }
  .chip { flex: none }

  /* Sucursales */
  .suc { border-radius: 16px }
  .suc h3 { font-size: 1.75rem }
  .suc-cuerpo { gap: 10px }
  .suc-cta { display: grid; grid-template-columns: 1fr; gap: 8px }
  .suc-cta .btn { width: 100% }

  /* Reseñas: dos tarjetas compactas lado a lado */
  .res-ops { grid-template-columns: 1fr 1fr; gap: 10px }
  .res-op { padding: 16px 14px; gap: 4px; border-radius: 14px }
  .res-estrellas { font-size: .85rem; letter-spacing: .1em }
  .res-nom { font-size: 1.22rem; line-height: 1.1 }
  .res-acc { font-size: .84rem; gap: 6px; margin-top: 6px }
  .res-ayuda { font-size: .86rem }

  /* Gift cards: se deslizan, como tarjetas en la mano */
  .gifts { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1); padding: 4px var(--gutter-r) 24px var(--gutter); scroll-padding-inline: var(--gutter) }
  .gifts::-webkit-scrollbar { display: none }
  .gift { flex: 0 0 84%; scroll-snap-align: start; padding: 20px }
  .gift-nombre { font-size: 1.35rem }

  /* Pie en una columna ordenada */
  .pie-in { grid-template-columns: 1fr; gap: 22px; padding-top: 44px }
  .pie-col { padding-top: 18px; border-top: 1px solid var(--linea-osc) }
}
@media (max-width: 370px) {
  .hero-cta { grid-template-columns: 1fr }
  .res-ops { grid-template-columns: 1fr }
}
@media (max-width: 760px) {
  .solo-pc { display: none }
  .res-op { display: flex; flex-direction: column; align-items: flex-start }
  .res-nom { font-size: 1.15rem }
  .res-acc { margin-top: auto; padding-top: 8px }
}