/* Plantilla Sello Local: el rótulo pintado a mano del negocio, llevado al móvil.
   Tres soportes de la misma tradición: pared pintada (comida), vidrio con pan de oro (belleza),
   puerta de camioneta (oficios). Los colores del cliente llegan como variables en el HTML.
   Pautas: WCAG 2.2 AA (contraste, foco visible, placas de 48px o más, movimiento opcional). */

:root {
  --tinta: #151515;
  --blanco: #ffffff;
  --vidrio: #121212;
  --muro: #146b6b;
  --franja: #d7262e;
  --sombra-letra: #08302f;
  --letra: #ffffff;
  --placa: #d7262e;
  --placa-borde: #7e161b;
  --oro: #d8ae47;
  --oro-sombra: #5c4511;
  --f-letra: "Yellowtail", "Brush Script MT", cursive;
  --f-rotulo: "Rye", Georgia, serif;
  --f-texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1120px;
  color-scheme: light;
}

body[data-tema="belleza"] {
  --f-letra: "Yesteryear", "Brush Script MT", cursive;
  --f-rotulo: "Abril Fatface", Georgia, serif;
  --muro: #0f0f10;
  --letra: var(--oro);
  --sombra-letra: var(--oro-sombra);
  --placa: var(--oro);
  --placa-borde: #8a6a1d;
}
body[data-tema="oficios"] {
  --f-rotulo: "Bungee", sans-serif;
  --muro: #ffffff;
  --sombra-letra: #0b0b0b;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 80px; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 760px) { body { padding-bottom: 0; } }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2 { text-wrap: balance; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 2px; }
::selection { background: var(--franja); color: #fff; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.caja {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 60;
  background: var(--tinta); color: #fff; padding: 12px 16px; font-weight: 800;
}
.saltar:focus { top: 12px; }

.aviso-ejemplo {
  background: #ffd84d; color: var(--tinta);
  font-size: .875rem; font-weight: 600; line-height: 1.35; text-align: center;
  padding: 8px max(20px, env(safe-area-inset-right, 0px)) 8px max(20px, env(safe-area-inset-left, 0px));
}

/* ---------- tira superior ---------- */
.tira { background: var(--tinta); color: #fff; }
.tira-fila {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: .875rem; font-weight: 700;
}
.idioma { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- el rótulo ---------- */
.rotulo { background: var(--muro); color: var(--letra); }
.rotulo-rejilla { padding-left: 0; padding-right: 0; display: grid; }
.rotulo-letras {
  padding: 30px max(20px, env(safe-area-inset-right, 0px)) 26px max(20px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.rotulo-nombre { display: flex; flex-direction: column; font-weight: 400; line-height: 1; }
.rotulo-linea {
  font-family: var(--f-letra);
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  line-height: 1.05;
  text-shadow: 2px 2px 0 var(--sombra-letra); /* taste-skill-ignore: sombra pintada del rótulo */
}
.rotulo-principal {
  font-family: var(--f-rotulo);
  font-size: clamp(2.9rem, 13.5vw, 5.75rem);
  line-height: .98;
  letter-spacing: -.01em;
  text-shadow: 3px 3px 0 var(--sombra-letra); /* taste-skill-ignore: sombra pintada del rótulo */
  overflow-wrap: anywhere;
}
.rotulo-lema { font-weight: 800; font-size: 1.15rem; line-height: 1.3; max-width: 30ch; }

.franja { height: 12px; background: var(--franja); }
body[data-tema="belleza"] .franja {
  height: 14px;
  background: repeating-linear-gradient(-45deg, var(--franja) 0 12px, var(--blanco) 12px 24px, #1c3f94 24px 36px, var(--blanco) 36px 48px); /* taste-skill-ignore: franja del poste de barbero */
}
body[data-tema="oficios"] .franja {
  height: 16px;
  background: linear-gradient(var(--franja) 0 7px, transparent 7px 11px, var(--franja) 11px 16px); /* taste-skill-ignore: doble filete de la puerta de camioneta */
}

.rotulo-foto img, .rotulo-foto .foto-hueco { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Soportes */
body[data-tema="comida"] .rotulo { --letra: #ffffff; }
body[data-tema="belleza"] .rotulo-principal {
  -webkit-text-stroke: 1px #f6e3a1;
  text-shadow: 2px 2px 0 var(--oro-sombra), 4px 4px 0 var(--tinta); /* taste-skill-ignore: sombra del pan de oro */
}
body[data-tema="oficios"] .rotulo { color: var(--tinta); }
body[data-tema="oficios"] .rotulo-principal { color: var(--letra); text-transform: uppercase; }
body[data-tema="oficios"] .rotulo-linea { color: var(--tinta); font-size: clamp(1.7rem, 7vw, 2.4rem); text-shadow: none; /* taste-skill-ignore: sin sombra */ }

/* El nombre se pinta de una pasada al cargar */
@media (prefers-reduced-motion: no-preference) {
  .rotulo-principal { animation: pincelada 760ms cubic-bezier(.16, 1, .3, 1) 120ms both; }
  @keyframes pincelada {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 -10% -10% 0); }
  }
}

/* Aviso abierto / cerrado, rotulado en vinilo sobre el cristal (no es un botón) */
.estado-abierto { font-size: 1.125rem; font-weight: 800; color: var(--decal); }

/* ---------- placas (botones) ---------- */
.fila-placas { display: flex; flex-wrap: wrap; gap: 12px; }
.placa {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 10px 24px;
  background: var(--tinta); color: #fff;
  border-radius: 4px; border-bottom: 4px solid #000;
  font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: transform 90ms ease-out, border-bottom-width 90ms ease-out;
}
.placa-principal { background: var(--placa); border-bottom-color: var(--placa-borde); color: #fff; }
body[data-tema="belleza"] .placa-principal { color: var(--tinta); }
.placa:active { transform: translateY(2px); border-bottom-width: 2px; }
.placa:hover { filter: brightness(1.08); }
.placa-clara { background: var(--blanco); color: var(--tinta); border-bottom-color: #9c9c96; align-self: flex-start; }
.solo-ancho { display: none; }

.placas-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  background: #000;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.placas-movil .placa { border-radius: 0; min-height: 62px; padding-inline: 16px; font-size: 1.0625rem; text-transform: none; letter-spacing: .01em; text-align: center; }

/* ---------- bandas ---------- */
.banda { padding-block: 56px; }
.titulo-pintado {
  font-family: var(--f-rotulo); font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1;
  color: var(--muro);
}
body[data-tema="belleza"] .titulo-pintado { color: var(--tinta); }
body[data-tema="oficios"] .titulo-pintado { color: var(--letra); text-transform: uppercase; }

/* Menú pintado en la pared, con puntos hasta el precio */
.pizarra { padding-top: 28px; }
.pizarra-caja { display: grid; gap: 16px; }
.pizarra-cabeza { display: flex; flex-direction: column; gap: 10px; max-width: 46ch; }
.pizarra-intro { font-size: 1.0625rem; max-width: 52ch; display: flex; flex-direction: column; gap: 12px; }
.pizarra-nota { font-weight: 800; }
.platos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plato { padding: 14px 0; border-bottom: 2px solid var(--tinta); display: flex; flex-direction: column; gap: 4px; }
.plato:first-child { border-top: 2px solid var(--tinta); }
.plato-linea { display: flex; align-items: baseline; gap: 10px; }
.plato h3 { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.puntos { flex: 1; min-width: 24px; border-bottom: 3px dotted currentColor; transform: translateY(-5px); }
.precio { font-family: var(--f-rotulo); font-size: 1.45rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.plato p { color: #4a4a46; }
.platos.sin-precio { display: grid; gap: 0 32px; }
.platos.sin-precio h3 { text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 900px) {
  .pizarra-caja { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-rows: auto 1fr; gap: 20px 56px; align-items: start; }
  .pizarra-cabeza { grid-column: 1; grid-row: 1; }
  .pizarra-intro { grid-column: 1; grid-row: 2; }
  .platos { grid-column: 2; grid-row: 1 / span 2; }
  .platos.sin-precio { grid-template-columns: 1fr 1fr; }
  .platos.sin-precio .plato:nth-child(2) { border-top: 2px solid var(--tinta); }
}

/* Fotos */
.fotos .caja { display: flex; flex-direction: column; gap: 24px; }
.fotos { padding-top: 0; }
.galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.galeria li:first-child { grid-column: 1 / -1; }
.galeria img, .galeria .foto-hueco { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.galeria li:first-child img, .galeria li:first-child .foto-hueco { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  .galeria { grid-template-columns: 2fr 1fr 1fr; }
  .galeria li:first-child { grid-column: auto; }
  .galeria li:first-child img { aspect-ratio: 1; }
}
.foto-hueco {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
  background: #e7e7e2; color: #4a4a46; font-size: .875rem;
}

/* Reseñas (solo con datos reales) */
.resenas .caja { display: flex; flex-direction: column; gap: 18px; }
.valoracion { font-size: 1.125rem; }

/* Vitrina: horario y lugar rotulados en vinilo sobre cristal oscuro */
.vitrina { --decal: #fff; background: var(--vidrio); color: #fff; border-top: 10px solid var(--franja); }
body[data-tema="belleza"] .vitrina { --decal: var(--oro); border-top-color: var(--oro); }
.vitrina-caja { display: grid; gap: 72px; }
.vitrina-horas, .vitrina-lugar { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.titulo-vitrina { font-family: var(--f-letra); font-weight: 400; font-size: clamp(2.4rem, 9vw, 3.2rem); line-height: 1; color: var(--decal); }
.horario { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 1.0625rem; }
.horario th, .horario td { text-align: left; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); font-weight: 800; color: var(--decal); }
.horario td { text-align: right; }
.horario tr.cerrado th, .horario tr.cerrado td { color: rgba(255, 255, 255, .66); font-weight: 400; }
.horario tr.hoy th, .horario tr.hoy td { color: var(--decal); box-shadow: inset 0 -3px 0 var(--franja); /* taste-skill-ignore: subrayado de hoy */ }
body[data-tema="belleza"] .horario tr.hoy th, body[data-tema="belleza"] .horario tr.hoy td { box-shadow: inset 0 -3px 0 var(--oro); /* taste-skill-ignore: subrayado de hoy */ }
.direccion { font-size: 1.125rem; font-weight: 600; }
.zona { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 1.125rem; font-weight: 600; }
.zona span:not(:last-child)::after { content: "·"; padding: 0 10px; color: rgba(255, 255, 255, .6); }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 4px; background: #2a2a2a; }
@media (min-width: 900px) { .vitrina-caja { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* Contacto: el teléfono rotulado en grande, como en la pared o la puerta de la camioneta */
.contacto { background: var(--muro); color: var(--letra); }
body[data-tema="comida"] .contacto { --letra: #ffffff; }
body[data-tema="belleza"] .contacto { background: var(--franja); color: #fff; --sombra-letra: #4a0d11; }
body[data-tema="oficios"] .contacto { background: var(--letra); color: #fff; --sombra-letra: #0b0b0b; }
.contacto-caja { display: flex; flex-direction: column; gap: 28px; }
.telefono-grande { display: flex; flex-direction: column; line-height: 1; }
.telefono-llame { font-family: var(--f-letra); font-size: clamp(2.2rem, 9vw, 3.2rem); text-shadow: 2px 2px 0 var(--sombra-letra); /* taste-skill-ignore: sombra pintada */ }
.telefono-grande a {
  font-family: var(--f-rotulo); font-size: clamp(2.1rem, 10.5vw, 5rem); text-decoration: none;
  text-shadow: 3px 3px 0 var(--sombra-letra); /* taste-skill-ignore: sombra pintada */ font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.contacto-datos { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.contacto-datos dt { font-size: .875rem; font-weight: 700; }
.contacto-datos dd { font-size: 1.125rem; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- pie ---------- */
.pie { background: var(--vidrio); color: rgba(255, 255, 255, .78); padding-block: 22px; font-size: .875rem; }
.pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }

/* ---------- tableta y más: las placas van en el rótulo, sin barra fija ---------- */
@media (min-width: 760px) {
  .solo-ancho { display: flex; margin-top: 8px; }
  .placas-movil { display: none; }
}

/* ---------- movimiento: entrada de cada parte al llegar a su sección ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .entra { opacity: 0; transform: translateY(24px); }
  .js .entra.visto {
    opacity: 1; transform: none;
    transition: opacity 600ms cubic-bezier(.16, 1, .3, 1), transform 600ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--retraso, 0ms);
  }
  .rotulo-foto img { animation: acercar 1600ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes acercar { from { transform: scale(1.06); } to { transform: none; } }
  .rotulo-foto { overflow: hidden; }
  .galeria img { transition: transform 500ms cubic-bezier(.16, 1, .3, 1); }
  .galeria li:hover img { transform: scale(1.03); }
  .galeria li { overflow: hidden; }
}
a:not(.placa) { transition: text-decoration-thickness 120ms ease-out; }
a:not(.placa):hover { text-decoration-thickness: 4px; }

/* ---------- pantallas anchas ---------- */
@media (min-width: 900px) {
  .rotulo-rejilla {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "letras foto" "franja franja";
  }
  .rotulo-letras {
    grid-area: letras; justify-content: center; gap: 18px;
    padding: 64px 48px 64px max(48px, calc((100vw - var(--ancho)) / 2 + 20px));
  }
  .franja { grid-area: franja; }
  .rotulo-foto { grid-area: foto; }
  .rotulo-foto img { height: 100%; aspect-ratio: auto; min-height: 520px; }
  .banda { padding-block: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}