/* Estilos de la plantilla de talleres (Landea).
   Mundo visual: placas esmaltadas de taller sobre la fachada de dos tonos
   (banda blanca con el rótulo arriba, zócalo verde abajo). El verde marca
   solo las acciones. Los colores del taller se cambian en datos.json. */

@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fuentes/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('fuentes/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fuentes/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600 700; font-display: swap; src: url('fuentes/barlow-latin-600-normal.woff2') format('woff2'); }

:root {
  --verde: #2F9E44;
  --verde-osc: #237A34;
  --fachada: #38B04A;
  --grafito: #1E2226;
  --grafito-2: #2B3035;
  --grafito-linea: #3A4047;
  --fondo: #F3F2EE;
  --papel: #FFFFFF;
  --texto: var(--grafito);
  --texto-2: #4A5056;
  --texto-claro: #BCC3C9;
  --linea: #D8D6CF;
  --oro: #F2B01E;
  --error: #B42318;
  --m: 8px;
  --radio: 10px;
  --rotulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --cuerpo: 'Barlow', system-ui, sans-serif;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sombra: 0 10px 24px -12px rgb(14 18 22 / .45);
  --salida: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1.125rem/1.5 var(--cuerpo);
  caret-color: var(--verde-osc);
  scrollbar-color: var(--grafito-2) var(--fondo);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 2px; }
::selection { background: var(--verde); color: #fff; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; }
.ico { width: 1.5em; height: 1.5em; flex: none; }
.ico--s { width: 1em; height: 1em; vertical-align: -.12em; }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--grafito); color: #fff; padding: 10px 14px; border-radius: 6px; }
.saltar:focus { top: 12px; }

/* ---------- Franja de la propuesta ---------- */
.franja {
  background: var(--grafito); color: var(--texto-claro);
  font: 700 .8125rem/1.3 var(--cuerpo); letter-spacing: .02em;
  text-align: center; padding: 8px 16px;
}

/* ---------- Portada: rótulo, placas, persiana, zócalo ---------- */
/* Franja verde inferior, como la banda del rótulo de la fachada */
.rotulo { background: linear-gradient(to top, var(--verde) 0 6px, var(--papel) 6px); padding-bottom: 6px; }
.rotulo__in { max-width: 1120px; margin: 0 auto; padding: 14px 20px 10px; }
.rotulo__logo { width: min(52%, 300px); }
.rotulo__nombre { font: 800 2.6rem/1 var(--rotulo); text-transform: uppercase; }
.rotulo__eslogan {
  margin-top: 4px; color: var(--texto-2);
  font: 700 .9375rem/1.2 var(--rotulo); text-transform: uppercase; letter-spacing: .06em;
}

.portada__texto { max-width: 1120px; margin: 0 auto; padding: 18px 20px 14px; }
h1 {
  font: 800 clamp(2.4rem, 11.2vw, 5.6rem)/.92 var(--rotulo);
  text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance;
}
.h1__tipo { display: block; }
.portada__sub { margin-top: 6px; font-weight: 700; color: var(--texto-2); }

.placas { display: grid; gap: 6px; margin-top: 12px; }
.placa {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--grafito); color: #fff; border-radius: var(--radio);
  padding: 9px 14px; text-decoration: none; min-height: 56px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), inset 0 0 0 4px var(--grafito), inset 0 0 0 5px rgb(255 255 255 / .06);
}
/* Remaches de la placa */
.placa::before, .placa::after {
  content: ''; position: absolute; top: 7px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8A939B, #4B535A);
}
.placa::before { left: 7px; }
.placa::after { right: 7px; }
.placa__nota { font: 800 2.3rem/1 var(--rotulo); }
.placa__det { display: grid; gap: 2px; font-size: .8125rem; line-height: 1.2; color: var(--texto-claro); }
.placa--nota:hover .placa__det span { color: #fff; text-decoration: underline; }
.placa--estado { min-height: 44px; padding-block: 8px; font-size: .9375rem; line-height: 1.25; color: var(--texto-claro); }
.placa--estado b { color: #fff; font-weight: 700; }
.estrellas { display: inline-flex; gap: 1px; color: var(--oro); }
.estrellas svg { width: 15px; height: 15px; }

[data-estado] .ico { color: var(--texto-claro); }
[data-estado][data-abierto='si'] .ico { color: #5BD072; }
[data-estado][data-abierto='no'] .ico { color: #E9A23B; }

/* La foto de la fachada se abre como una persiana al cargar */
.persiana { position: relative; overflow: hidden; height: clamp(100px, 15vh, 220px); height: clamp(100px, calc(100svh - 560px), 220px); background: var(--grafito-2); }
.persiana img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.persiana::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, #15181B 0 10px, transparent 10px),
    repeating-linear-gradient(to bottom, #3A4047 0 11px, #2A2F34 11px 14px);
  animation: persiana 1.25s var(--salida) .35s both;
}
.persiana.espera::after { animation-play-state: paused; }
@keyframes persiana { from { transform: translateY(0); } to { transform: translateY(-101%); } }

.zocalo { background: var(--fachada) var(--grano); }
.zocalo__in {
  max-width: 1120px; margin: 0 auto; padding: 12px 16px 14px;
  display: grid; gap: 8px;
}

/* ---------- Botones-placa ---------- */
.boton {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 10px 16px; border-radius: var(--radio); border: 0;
  font: 800 1.15rem/1.05 var(--rotulo); text-transform: uppercase; letter-spacing: .02em;
  text-decoration: none; cursor: pointer; box-shadow: var(--sombra);
  transition: transform .2s var(--salida), box-shadow .2s var(--salida), background-color .2s;
}
.boton small { display: none; margin-top: 3px; font: 400 .8125rem/1.25 var(--cuerpo); text-transform: none; letter-spacing: 0; opacity: .85; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgb(14 18 22 / .55); }
.boton:active { transform: translateY(1px); box-shadow: 0 4px 10px -6px rgb(14 18 22 / .5); }
.boton--grafito { background: var(--grafito); color: #fff; }
.boton--blanco { background: var(--papel); color: var(--grafito); }
.boton--verde { background: var(--verde-osc); color: #fff; }
.boton--verde:hover { background: color-mix(in srgb, var(--verde-osc) 85%, black); }
.boton--linea { background: transparent; color: var(--grafito); box-shadow: inset 0 0 0 2px var(--grafito); }
.ico--wa { color: #1FA855; }
.zocalo .boton:focus-visible { outline-color: #fff; }

/* ---------- Secciones ---------- */
.seccion { padding: 64px 0; }
.caja { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
h2 {
  font: 800 clamp(2.1rem, 8.5vw, 3.6rem)/.95 var(--rotulo);
  text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance;
}
h3 { font: 700 1.5rem/1.05 var(--rotulo); text-transform: uppercase; letter-spacing: .01em; }
.intro { margin-top: 10px; color: var(--texto-2); max-width: 60ch; }

/* Por qué */
.porque__lista { margin-top: 28px; display: grid; }
.porque__lista li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--linea);
}
.porque__ico { width: 34px; height: 34px; padding: 7px; border-radius: 8px; background: var(--grafito); color: #fff; }
.porque__lista p { margin-top: 6px; color: var(--texto-2); max-width: 46ch; }

/* Servicios: como el cartel de la fachada */
.servicios { background: var(--grafito); color: #fff; }
.servicios__lista { margin-top: 28px; display: grid; }
.servicios__lista li { padding: 16px 0 16px 26px; border-top: 1px solid var(--grafito-linea); position: relative; }
.servicios__lista li::before {
  content: ''; position: absolute; left: 0; top: 21px; width: 10px; height: 14px;
  background: var(--texto-claro); clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.servicios__lista p { margin-top: 4px; color: var(--texto-claro); }
.servicios__lista h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.por-confirmar {
  font: 400 .75rem/1 var(--cuerpo); text-transform: none; letter-spacing: 0; color: var(--texto-claro);
  border: 1px solid var(--grafito-linea); border-radius: 999px; padding: 4px 8px;
}
.servicios__nota { margin-top: 12px; font-size: .875rem; color: var(--texto-claro); }
.servicios__cta { margin-top: 28px; color: var(--texto-claro); }
.servicios__cta a { color: #fff; font-weight: 700; }

/* Reseñas */
.resenas__cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.resenas__nota {
  display: inline-grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center;
  background: var(--grafito); color: #fff; border-radius: var(--radio); padding: 10px 16px; text-decoration: none;
}
.resenas__nota b { grid-row: span 2; font: 800 2.6rem/1 var(--rotulo); }
.resenas__nota span:last-child { font-size: .8125rem; color: var(--texto-claro); }
.resenas__nota:hover span:last-child { color: #fff; text-decoration: underline; }
.resenas__lista { margin-top: 28px; display: grid; gap: 14px; }
.resena { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; display: grid; gap: 16px; align-content: space-between; }
.resena blockquote p { font-size: 1.125rem; }
.resena--grande blockquote p { font: 700 clamp(1.6rem, 6.4vw, 2.3rem)/1.12 var(--rotulo); }
.resena--grande blockquote p::before { content: '«'; }
.resena--grande blockquote p::after { content: '»'; }
.resena figcaption { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--texto-2); }
.resena--hueco { background: transparent; border: 2px dashed #B3AFA5; }
.resena--hueco blockquote p { font: 700 1.4rem/1.1 var(--rotulo); color: var(--texto-2); }

/* Hueco para una foto que aún no está */
.hueco-foto {
  display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px; aspect-ratio: 3 / 2;
  background: #DCDAD3; color: #5E646A; border-radius: var(--radio);
  font: 700 1.1rem/1 var(--rotulo); text-transform: uppercase; letter-spacing: .06em;
}
.persiana .hueco-foto { aspect-ratio: auto; border-radius: 0; }

/* Fotos */
.fotos { padding-bottom: 72px; }
.fotos__tira {
  margin-top: 24px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 20px 14px; scroll-padding-inline: 20px; scrollbar-width: thin;
}
.fotos__tira li { flex: 0 0 85%; scroll-snap-align: start; }
.tel { white-space: nowrap; }
.fotos__tira img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio); background: var(--linea); }
/* Carteles y fotos que no se pueden recortar: se ven enteras */
.fotos__tira img.entera { object-fit: contain; background: var(--papel); }

/* Formulario: la orden de cita */
.cita { background: var(--fachada) var(--grano); }
.orden {
  max-width: 640px; margin: 0 auto; background: var(--papel); border-radius: 14px;
  padding: 26px 20px 22px; box-shadow: 0 24px 48px -24px rgb(14 18 22 / .55);
  display: grid; gap: 18px;
}
.orden__cab { padding-bottom: 16px; border-bottom: 3px solid var(--grafito); }
.orden__ficha {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: -26px -20px 4px; padding: 10px 20px;
  background: var(--grafito); color: var(--texto-claro); border-radius: 14px 14px 0 0;
  font: 700 .875rem/1.2 var(--rotulo); text-transform: uppercase; letter-spacing: .08em;
}
.orden__cab p { margin-top: 10px; color: var(--texto-2); }
.campo { display: grid; gap: 6px; }
.campo label { font: 700 1.0625rem/1 var(--rotulo); text-transform: uppercase; letter-spacing: .05em; }
.campo label span { font: 400 .875rem var(--cuerpo); text-transform: none; letter-spacing: 0; color: var(--texto-2); }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1.0625rem/1.4 var(--cuerpo); color: var(--texto);
  background: #F6F5F1; border: 0; border-bottom: 2px solid #A9A59B; border-radius: 6px 6px 0 0;
  transition: border-color .2s, background-color .2s;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input::placeholder, .campo textarea::placeholder { color: #6B7177; }
.campo input:focus, .campo textarea:focus { outline: none; background: #fff; border-bottom-color: var(--verde-osc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 28%, transparent); }
.campo [aria-invalid='true'] { border-bottom-color: var(--error); background: #FDF3F2; }
.campo__error { color: var(--error); font-size: .9375rem; font-weight: 700; }
.orden .boton { justify-content: center; width: 100%; margin-top: 4px; }
.orden__nota { text-align: center; color: var(--texto-2); font-size: .9375rem; }
.orden__nota a { color: var(--texto); font-weight: 700; }

/* Horario y mapa */
.donde__grid { display: grid; gap: 28px; }
.horario {
  position: relative; margin-top: 24px; background: var(--grafito); color: #fff; border-radius: var(--radio); padding: 18px 18px 8px;
}
.horario::before, .horario::after {
  content: ''; position: absolute; top: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8A939B, #4B535A);
}
.horario::before { left: 8px; }
.horario::after { right: 8px; }
.horario__estado { display: flex; align-items: center; gap: 10px; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--grafito-linea); }
.horario dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--grafito-linea); }
.horario dl div:last-child { border-bottom: 0; }
.horario dt { font: 700 1.2rem/1.1 var(--rotulo); text-transform: uppercase; letter-spacing: .03em; }
.horario dd { color: var(--texto-claro); font-variant-numeric: tabular-nums; }
.donde__dir { display: flex; gap: 10px; margin-top: 22px; font-weight: 700; }
.donde__dir .ico { color: var(--texto-2); }
.donde__botones { display: grid; gap: 10px; margin-top: 20px; }
.mapa iframe { display: block; width: 100%; height: 340px; border: 0; border-radius: var(--radio); background: var(--linea); }

/* Pie */
.pie { background: var(--grafito); color: var(--texto-claro); padding: 44px 0 104px; font-size: .9375rem; }
.pie__in { display: grid; gap: 6px; }
.pie__nombre { font: 800 2.2rem/1 var(--rotulo); color: #fff; text-transform: uppercase; margin-bottom: 6px; }
.pie a { color: #fff; }
.pie__reg { margin-top: 8px; }
.pie__landea { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--grafito-linea); font-size: .8125rem; }

/* Botón flotante de WhatsApp (móvil) */
.flotante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: #1FA855; color: #fff; box-shadow: 0 12px 24px -8px rgb(14 18 22 / .55);
  transition: transform .2s var(--salida);
}
.flotante .ico { width: 32px; height: 32px; }
.flotante:hover { transform: scale(1.06); }
.flotante[data-oculto] { transform: scale(0); pointer-events: none; }

/* ---------- Pantallas grandes ---------- */
@media (min-width: 560px) {
  .boton small { display: block; }
  .fotos__tira li { flex-basis: 60%; }
}
@media (min-width: 900px) {
  .seccion { padding: 96px 0; }
  .rotulo__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 18px; }
  .rotulo__logo { width: 280px; }
  .rotulo__in { padding-block: 18px; }
  .rotulo__eslogan { margin: 0; font-size: 1.35rem; }
  .portada__texto { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; padding-block: 32px 28px; }
  .portada__texto h1 { font-size: clamp(3.6rem, 6.4vw, 6rem); }
  .placas { grid-template-columns: auto; margin: 0; min-width: 300px; }
  .persiana { height: clamp(260px, 36vh, 440px); }
  .zocalo__in { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: start; padding: 22px 20px; gap: 14px; }
  .boton { min-height: 72px; font-size: 1.45rem; }
  .placa--estado { min-height: 64px; }
  .porque__lista { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .servicios__lista { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .resenas__lista { grid-template-columns: 1.5fr 1fr; }
  .resena--grande { grid-row: span 2; padding: 36px; }
  .fotos__tira { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
  .orden { padding: 40px; }
  .orden__ficha { margin: -40px -40px 4px; padding-inline: 40px; }
  .donde__grid { grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
  .donde__botones { grid-template-columns: auto auto; justify-content: start; }
  .mapa iframe { height: 100%; min-height: 460px; }
  .flotante { display: none; }
  .pie { padding-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .persiana::after { display: none; }
  .boton, .flotante { transition: none; }
}