/* =====================================================================
   Taller Mecánico — tu zona
   styles.css (compartido por las seis páginas)

   Todo lo que se puede cambiar vive en :root. Fuera de :root no hay
   colores literales ni píxeles de espaciado sueltos.

   PALETA (de dónde salió cada color):
   --rojo      #E01919  rojo de "Sport" en el cartel (foto del frente)
   --ink       #162528  negro de las letras del cartel
   --slate     #586E7F  gris azulado de la pared de la fachada
   --concrete  #DCDED9  pared blanca del taller por dentro (foto interior)
   --paper     #F2F1EE  la misma pared, aclarada un punto hacia cálido
   --floor     #A19F97  piso de cemento del taller (sólo para líneas)
   ===================================================================== */

:root {
  /* ---- Color ---- */
  --ink: #162528;
  --ink-2: #1e3034;
  --slate: #586E7F;
  --concrete: #DCDED9;
  --paper: #F2F1EE;
  --floor: #A19F97;
  --blanco: #FFFFFF;

  --rojo: #E01919;
  --rojo-hover: #B31212;        /* rojo del cartel, oscurecido: hover y texto rojo sobre fondo claro */
  --rojo-texto: #B31212;
  --rojo-claro: #FF5A4F;        /* rojo del cartel, aclarado: texto rojo sobre fondo oscuro */

  --txt-oscuro: #162528;
  --txt-oscuro-suave: #4A5560;
  --txt-claro: #F2F1EE;
  --txt-claro-suave: #B4BDBF;

  --linea-clara: rgba(22, 37, 40, 0.2);
  --linea-oscura: rgba(242, 241, 238, 0.2);
  --velo-0: rgba(22, 37, 40, 0);
  --velo-40: rgba(22, 37, 40, 0.4);
  --velo-70: rgba(22, 37, 40, 0.7);
  --velo-92: rgba(22, 37, 40, 0.92);
  --header-bg: rgba(22, 37, 40, 0.8);
  --glow: rgba(224, 25, 25, 0.35);
  --sombra-base: rgba(22, 37, 40, 0.18);
  --sombra-fuerte: rgba(22, 37, 40, 0.32);

  /* ---- Tipografía ---- */
  --f-titulo: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-0: 0.8rem;
  --fs-1: 0.9rem;
  --fs-2: 1rem;
  --fs-3: 1.15rem;
  --fs-4: 1.4rem;
  --fs-5: 1.75rem;
  --fs-6: 2.25rem;
  --fs-7: 3rem;
  --fs-h1: clamp(var(--fs-5), calc(0.5rem + 7vw), var(--fs-7));
  --fs-h2: clamp(var(--fs-5), calc(var(--fs-4) + 2vw), var(--fs-6));
  --ancho-titulo: 112%;

  /* ---- Espaciado (una sola escala) ---- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-128: 128px;
  --gutter: 20px;
  --section-y: var(--sp-96);

  /* ---- Forma ---- */
  --container: 1180px;
  --r-card: 6px;
  --r-btn: 2px;
  --sombra-1: 0 4px 16px var(--sombra-base);
  --sombra-2: 0 12px 32px var(--sombra-fuerte), 0 0 24px var(--glow);
  --bw: 1px;
  --bw-2: 2px;
  --slant: -8deg;
  --lift: 4px;
  --rv-y: 40px;
  --tap: 48px;
  --bar-h: 3px;
  --wa-size: 56px;
  --card-w: min(84vw, 340px);
  --blur: 12px;

  /* ---- Alturas del header ---- */
  --header-h: 72px;
  --header-h-compact: 56px;

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-reveal: 700ms;
  --t-hover: 200ms;
}

@media (max-width: 767px) {
  :root {
    --section-y: var(--sp-64);
    --header-h: 64px;
  }
}

/* =====================================================================
   MOVIMIENTO REDUCIDO — DESACTIVADO A PROPÓSITO
   Las animaciones se ven siempre, aunque el sistema pida reducirlas.
   Para reactivar el respeto por "Reducir movimiento":
     1) en main.js poner  const FORZAR_ANIMACIONES = false;
     2) descomentar el bloque de abajo.

   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
   }
   ===================================================================== */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--sp-16)); }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--fs-2);
  line-height: 1.6;
  color: var(--txt-oscuro);
  background: var(--ink);
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-style: italic;
  font-stretch: var(--ancho-titulo);
  line-height: 1.05;
  margin: 0 0 var(--sp-16);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-h1); font-weight: 900; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; }
h3 { font-size: var(--fs-4); font-weight: 700; line-height: 1.15; }
h4 { font-size: var(--fs-3); font-weight: 700; }
p { margin: 0 0 var(--sp-16); max-width: 65ch; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
strong { font-weight: 600; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: var(--sp-8); left: var(--sp-8); z-index: 200;
  background: var(--paper); color: var(--ink); padding: var(--sp-12) var(--sp-16);
  font-weight: 600; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

:focus-visible { outline: var(--bw-2) solid var(--c-focus, var(--ink)); outline-offset: var(--sp-4); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Bandas (secciones) ---- */
.band {
  position: relative;
  padding-block: var(--section-y);
  overflow-x: clip;
  color: var(--c-txt);
  background: var(--c-bg);
}
.band--ink      { --c-bg: var(--ink);      --c-txt: var(--txt-claro);   --c-muted: var(--txt-claro-suave); --c-line: var(--linea-oscura); --c-link: var(--rojo-claro); --c-focus: var(--paper); --c-surface: var(--ink-2); }
.band--paper    { --c-bg: var(--paper);    --c-txt: var(--txt-oscuro);  --c-muted: var(--txt-oscuro-suave); --c-line: var(--linea-clara); --c-link: var(--rojo-texto); --c-focus: var(--ink); --c-surface: var(--blanco); }
.band--concrete { --c-bg: var(--concrete); --c-txt: var(--txt-oscuro);  --c-muted: var(--txt-oscuro-suave); --c-line: var(--linea-clara); --c-link: var(--rojo-texto); --c-focus: var(--ink); --c-surface: var(--paper); }
.band--slate    { --c-bg: var(--slate);    --c-txt: var(--txt-claro);   --c-muted: var(--txt-claro);        --c-line: var(--linea-oscura); --c-link: var(--txt-claro); --c-focus: var(--paper); --c-surface: var(--ink-2); }
.band :focus-visible { outline-color: var(--c-focus); }
.muted { color: var(--c-muted); }
.band a:not(.btn):not(.row):not(.brand):not(.tile) { color: var(--c-link); text-underline-offset: var(--sp-4); }
.eyebrow {
  font-family: var(--f-titulo); font-style: italic; font-weight: 700; font-stretch: var(--ancho-titulo);
  font-size: var(--fs-0); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-muted); margin: 0 0 var(--sp-16);
}
.lede { font-size: var(--fs-3); line-height: 1.55; }
.section-head { margin-bottom: var(--sp-48); max-width: 44rem; }
.section-head p:last-child { margin-bottom: 0; }

/* ---- Iconos ---- */
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--fill { fill: currentColor; stroke: none; }

/* ---- Botones (paralelogramo inclinado, como el cartel) ---- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-12);
  min-height: var(--tap); padding: var(--sp-12) var(--sp-32);
  font-family: var(--f-titulo); font-style: italic; font-stretch: var(--ancho-titulo);
  font-weight: 800; font-size: var(--fs-1); letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  border: 0; background: transparent; color: var(--blanco);
  transition: transform var(--t-hover) var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rojo); border-radius: var(--r-btn);
  transform: skewX(var(--slant));
  transition: background-color var(--t-hover) var(--ease);
}
.btn:hover::before { background: var(--rojo-hover); }
.btn:hover { transform: translateY(calc(var(--lift) * -0.5)); }
.btn--ghost { color: var(--c-txt); }
.btn--ghost::before { background: transparent; border: var(--bw-2) solid currentColor; }
.btn--ghost:hover::before { background: transparent; border-color: var(--c-link); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-16); }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }
.tel-pend { font-size: var(--fs-1); }

/* ---- Progreso de lectura ---- */
.progress { position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--rojo); transform-origin: left center; transform: scaleX(0); }

/* ---- Header ---- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  color: var(--txt-claro);
  transition: background-color var(--t-hover) var(--ease);
}
.site-header :focus-visible { outline-color: var(--paper); }
.header-inner {
  display: flex; align-items: center; gap: var(--sp-16);
  height: var(--header-h);
  transition: height 300ms var(--ease);
}
.is-scrolled .site-header { background: var(--header-bg); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.is-scrolled .header-inner { height: var(--header-h-compact); }
.menu-open .site-header { background: var(--ink); }

.brand {
  display: inline-flex; align-items: baseline; gap: var(--sp-8);
  text-decoration: none; margin-right: auto;
  font-family: var(--f-titulo); font-style: italic; font-stretch: 125%;
  transform-origin: left center; transition: transform 300ms var(--ease);
  min-height: var(--tap); align-items: center;
}
.brand b { font-weight: 900; font-size: var(--fs-4); letter-spacing: 0.02em; text-transform: uppercase; color: var(--txt-claro); }
.brand i { font-weight: 800; font-size: var(--fs-3); color: var(--rojo-claro); }
.is-scrolled .brand { transform: scale(0.9); }

.site-nav ul { list-style: none; display: flex; gap: var(--sp-8); align-items: center; }
.site-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap);
  padding-inline: var(--sp-12); text-decoration: none;
  font-family: var(--f-titulo); font-style: italic; font-stretch: var(--ancho-titulo);
  font-weight: 700; font-size: var(--fs-1); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--txt-claro);
}
.site-nav a::after {
  content: ""; position: absolute; left: var(--sp-12); right: var(--sp-12); bottom: var(--sp-8);
  height: var(--bw-2); background: var(--rojo); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-hover) var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--blanco); }

.header-wa { min-height: var(--tap); padding-inline: var(--sp-16); }
.header-wa .lbl { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); padding: 0; background: transparent; border: 0; color: var(--txt-claro); cursor: pointer;
}
.nav-toggle .ico { width: var(--sp-32); height: var(--sp-32); }
.nav-toggle .ico-close { display: none; }
.menu-open .nav-toggle .ico-open { display: none; }
.menu-open .nav-toggle .ico-close { display: block; }

@media (max-width: 1023px) {
  .site-nav {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--header-h) var(--gutter) var(--sp-32);
    background: var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(calc(var(--lift) * -2));
    transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s linear 300ms;
  }
  .menu-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .site-nav a { font-size: var(--fs-5); min-height: var(--sp-64); border-bottom: var(--bw) solid var(--linea-oscura); }
  .site-nav a::after { left: 0; right: auto; width: var(--sp-48); bottom: -1px; }
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .header-wa .lbl { display: inline; }
  .header-wa { padding-inline: var(--sp-24); }
  .brand { margin-right: var(--sp-16); }
  .site-nav { margin-right: auto; }
}
@media (min-width: 1024px) and (max-width: 1139px) {
  .site-nav a { padding-inline: var(--sp-8); letter-spacing: 0.03em; }
  .site-nav a::after { left: var(--sp-8); right: var(--sp-8); }
}

/* ---- Hero de la home (el golpe: el corte oblicuo) ---- */
.hero { min-height: 100svh; display: flex; align-items: flex-end; padding-top: calc(var(--header-h) + var(--sp-48)); padding-bottom: var(--sp-48); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.1);
  will-change: transform;
}
.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--velo-70) 0%, var(--velo-0) 22%, var(--velo-40) 38%, var(--velo-92) 62%, var(--ink) 100%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__copy { max-width: 34rem; }
.hero h1 { --base: 240ms; margin-bottom: var(--sp-24); }
.hero .lede { margin-bottom: var(--sp-24); }
.hero__meta { margin: var(--sp-24) 0 0; font-size: var(--fs-1); color: var(--c-muted); }
@media (max-width: 599px) { .hero .eyebrow { display: none; } }
@media (min-width: 900px) {
  .hero { align-items: center; padding-bottom: var(--sp-96); }
  .hero__media { left: auto; width: 58%; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
  .hero__media img { object-position: center 18%; }
  .hero__velo { background: linear-gradient(to right, var(--velo-92) 0%, var(--velo-0) 45%), linear-gradient(to bottom, var(--velo-40) 0%, var(--velo-0) 22%); }
}

/* ---- Hero de páginas interiores ---- */
.phero { padding-top: calc(var(--header-h) + var(--sp-64)); padding-bottom: var(--sp-64); }
.phero .container { display: grid; gap: var(--sp-48); align-items: end; }
.phero h1 { margin-bottom: var(--sp-24); }
.phero .lede { margin-bottom: var(--sp-24); }
@media (min-width: 900px) { .phero .container.has-media { grid-template-columns: 7fr 5fr; } }

/* ---- Marquee ---- */
.marquee { overflow: clip; padding-block: var(--sp-16); background: var(--slate); color: var(--txt-claro); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--sp-24); padding-right: var(--sp-24); white-space: nowrap;
  font-family: var(--f-titulo); font-style: italic; font-stretch: 125%; font-weight: 800;
  font-size: var(--fs-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.marquee__item .ico { width: var(--sp-12); height: var(--sp-12); }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---- Tira de confianza ---- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-32) var(--sp-24); margin: 0; padding: 0; list-style: none; }
.stat { border-top: var(--bw-2) solid var(--c-txt); padding-top: var(--sp-16); }
.stat__n { display: block; font-family: var(--f-titulo); font-style: italic; font-stretch: 125%; font-weight: 900; font-size: var(--fs-7); line-height: 1; }
.stat__l { display: block; margin-top: var(--sp-8); font-size: var(--fs-1); color: var(--c-muted); max-width: 18ch; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--sp-32); } }

/* ---- Filas de servicios (sin cajas) ---- */
.rows { list-style: none; border-top: var(--bw) solid var(--c-line); }
.row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-16) var(--sp-24); align-items: center;
  padding-block: var(--sp-32); border-bottom: var(--bw) solid var(--c-line);
  text-decoration: none; color: var(--c-txt);
}
.row__n { min-width: var(--sp-48); font-family: var(--f-titulo); font-style: italic; font-weight: 900; font-stretch: 125%; font-size: var(--fs-5); color: var(--c-muted); }
.row h3 { margin: 0 0 var(--sp-8); font-size: var(--fs-5); text-transform: uppercase; font-weight: 800; font-stretch: var(--ancho-titulo); }
.row p { margin: 0; color: var(--c-muted); }
.row .ico { width: var(--sp-32); height: var(--sp-32); transition: transform var(--t-hover) var(--ease); color: var(--c-link); }
.row:hover .ico { transform: translateX(var(--sp-8)); }
.row:hover h3 { text-decoration: underline; text-decoration-thickness: var(--bw-2); text-decoration-color: var(--rojo); text-underline-offset: var(--sp-8); }
@media (max-width: 599px) { .row { grid-template-columns: 1fr auto; } .row__n { grid-column: 1 / -1; } }

/* ---- Palabras / texto en columnas ---- */
.cols { display: grid; gap: var(--sp-32); }
.col { border-top: var(--bw-2) solid var(--c-txt); padding-top: var(--sp-16); }
.col h3 { font-size: var(--fs-5); text-transform: uppercase; font-weight: 900; margin-bottom: var(--sp-12); }
.col p { margin: 0; color: var(--c-muted); }
@media (min-width: 768px) { .cols--2 { grid-template-columns: 1fr 1fr; } .cols--3 { grid-template-columns: repeat(3, 1fr); } .cols--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px) { .cols--4 { grid-template-columns: 1fr 1fr; } }

.two { display: grid; gap: var(--sp-48); align-items: start; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; gap: var(--sp-64); } .two--wide-left { grid-template-columns: 7fr 5fr; } .two--wide-right { grid-template-columns: 5fr 7fr; } }
.check-list { list-style: none; display: grid; gap: var(--sp-12); margin: 0 0 var(--sp-24); }
.check-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-12); align-items: start; }
.check-list .ico { margin-top: var(--sp-4); color: var(--c-link); }

/* ---- Pasos ---- */
.steps { list-style: none; counter-reset: paso; display: grid; gap: var(--sp-32); }
.steps li { counter-increment: paso; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-24); align-items: start; border-top: var(--bw) solid var(--c-line); padding-top: var(--sp-24); }
.steps li::before { content: counter(paso, decimal-leading-zero); font-family: var(--f-titulo); font-style: italic; font-weight: 900; font-stretch: 125%; font-size: var(--fs-6); line-height: 1; }
.steps h3 { margin-bottom: var(--sp-8); text-transform: uppercase; font-weight: 800; }
.steps p { margin: 0; color: var(--c-muted); }
@media (min-width: 900px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } .steps--3 li { grid-template-columns: 1fr; } }

/* ---- Citas grandes ---- */
.quote { margin: 0; }
.quote p { font-family: var(--f-titulo); font-style: italic; font-weight: 700; font-stretch: var(--ancho-titulo); font-size: var(--fs-5); line-height: 1.2; max-width: 28ch; }
.quote cite { font-style: normal; font-size: var(--fs-1); color: var(--c-muted); }
.quotes { display: grid; gap: var(--sp-48); }
@media (min-width: 900px) { .quotes { grid-template-columns: 1fr 1fr; gap: var(--sp-64); } }

/* ---- Fotos y placeholders ---- */
.media { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--ink-2); aspect-ratio: var(--ar, 4 / 5); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--wide { --ar: 4 / 3; }
.media--land { --ar: 16 / 10; }
.caption { margin: var(--sp-12) 0 0; font-size: var(--fs-1); color: var(--c-muted); max-width: 52ch; }
.placeholder {
  display: grid; place-content: center; gap: var(--sp-8); text-align: center;
  aspect-ratio: var(--ar, 4 / 3); padding: var(--sp-24);
  border: var(--bw-2) dashed var(--c-muted); border-radius: var(--r-card);
  color: var(--c-muted); font-size: var(--fs-1);
}
.placeholder b { display: block; font-family: var(--f-titulo); font-style: italic; font-weight: 800; font-size: var(--fs-2); color: var(--c-txt); text-transform: uppercase; }
.pend {
  border: var(--bw-2) dashed var(--c-muted); border-radius: var(--r-card); padding: var(--sp-24);
  color: var(--c-txt); font-size: var(--fs-1);
}
.pend b { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-0); display: block; margin-bottom: var(--sp-4); color: var(--c-muted); }
.pend-grid { display: grid; gap: var(--sp-16); margin-top: var(--sp-32); }
@media (min-width: 768px) { .pend-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Galería de trabajos ---- */
.gallery { display: grid; gap: var(--sp-24); }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(12, 1fr); align-items: start; } .g-a { grid-column: 1 / span 5; } .g-b { grid-column: 6 / span 7; margin-top: var(--sp-64); } .g-c { grid-column: 1 / span 7; } .g-d { grid-column: 8 / span 5; margin-top: var(--sp-64); } }
.tile { display: block; text-decoration: none; transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), outline-color var(--t-hover); border-radius: var(--r-card); outline: var(--bw-2) solid transparent; box-shadow: var(--sombra-1); }
.tile:hover { transform: translateY(calc(var(--lift) * -1)); box-shadow: var(--sombra-2); outline-color: var(--rojo); }
.tile .media { border-radius: var(--r-card); }

/* ---- Reseñas ---- */
.rev-head { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-24) var(--sp-48); margin-bottom: var(--sp-48); }
.rev-score { display: flex; align-items: center; gap: var(--sp-16); }
.rev-score__n { font-family: var(--f-titulo); font-style: italic; font-stretch: 125%; font-weight: 900; font-size: var(--fs-7); line-height: 1; }
.rev-score__t { font-size: var(--fs-1); color: var(--c-muted); line-height: 1.4; }
.stars { display: inline-flex; gap: var(--sp-4); color: var(--txt-claro); }
.stars .ico { width: var(--sp-16); height: var(--sp-16); }
.band--paper .stars, .band--concrete .stars { color: var(--ink); }
.rev-ctrl { margin-left: auto; }
.rev-scroller {
  display: flex; gap: var(--sp-24); overflow-x: auto; overflow-y: hidden;
  padding: var(--sp-24) var(--gutter); margin-block: calc(var(--sp-24) * -1);
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
}
.rev-scroller::-webkit-scrollbar { display: none; }
.rev-scroller.is-drag { cursor: grabbing; user-select: none; }
.rev-list { display: contents; list-style: none; }
.rev-item { flex: none; width: var(--card-w); display: flex; }
.rcard {
  display: flex; flex-direction: column; gap: var(--sp-16); width: 100%;
  background: var(--c-surface); color: var(--c-txt);
  border: var(--bw) solid var(--c-line); border-radius: var(--r-card); padding: var(--sp-24);
  box-shadow: var(--sombra-1);
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), border-color var(--t-hover);
}
.rcard:hover { transform: translateY(calc(var(--lift) * -1)); border-color: var(--rojo); box-shadow: var(--sombra-2); }
.rcard blockquote { margin: 0; flex: 1; }
.rcard blockquote p { margin: 0 0 var(--sp-8); white-space: pre-line; max-width: none; }
.rcard.is-clamped blockquote p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rcard footer { display: flex; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; font-size: var(--fs-1); color: var(--c-muted); }
.rcard footer b { color: var(--c-txt); font-weight: 600; }
.more { background: none; border: 0; padding: var(--sp-8) 0; min-height: var(--tap); font: inherit; font-size: var(--fs-1); font-weight: 600; color: var(--txt-claro); text-decoration: underline; text-underline-offset: var(--sp-4); cursor: pointer; align-self: flex-start; }
.band--paper .more, .band--concrete .more { color: var(--rojo-texto); }
.owner-reply { margin-left: var(--sp-16); padding: var(--sp-12) var(--sp-16); background: var(--ink); color: var(--txt-claro); border-radius: var(--r-card); font-size: var(--fs-1); }
.band--ink .owner-reply { background: var(--slate); }
.owner-reply b { display: block; font-size: var(--fs-0); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.owner-reply p { margin: 0; }
.rcard--pend { border: var(--bw-2) dashed var(--c-muted); background: transparent; box-shadow: none; color: var(--c-muted); justify-content: center; }
.rcard--pend b { color: var(--c-txt); font-family: var(--f-titulo); font-style: italic; text-transform: uppercase; }
.rev-foot { margin-top: var(--sp-32); }
.pause-btn { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--tap); padding-inline: var(--sp-16); background: transparent; border: var(--bw) solid var(--c-line); border-radius: var(--r-btn); color: var(--c-txt); font: inherit; font-size: var(--fs-1); cursor: pointer; }

/* ---- Horarios ---- */
.hours { border-collapse: collapse; width: 100%; max-width: 26rem; }
.hours th, .hours td { text-align: left; padding: var(--sp-12) 0; border-bottom: var(--bw) solid var(--c-line); font-weight: 400; }
.hours th { font-weight: 600; }
.hours td { text-align: right; }
.data-list { list-style: none; display: grid; gap: var(--sp-16); margin: 0 0 var(--sp-24); }
.data-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-12); align-items: start; }
.data-list .ico { margin-top: var(--sp-4); color: var(--c-link); }
.data-list address { font-style: normal; }

/* ---- Formulario ---- */
.form { display: grid; gap: var(--sp-24); }
.form-row { display: grid; gap: var(--sp-24); }
@media (min-width: 600px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--sp-8); }
.field label { font-weight: 600; font-size: var(--fs-1); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: var(--sp-12) var(--sp-16);
  font: inherit; color: var(--txt-oscuro); background: var(--blanco);
  border: var(--bw-2) solid var(--floor); border-radius: var(--r-btn);
  transition: border-color var(--t-hover);
}
.field textarea { min-height: var(--sp-128); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--rojo-texto); }
.field .err { display: none; margin: 0; color: var(--rojo-texto); font-size: var(--fs-1); font-weight: 600; }
.field.has-error .err { display: block; }
.band--ink .field.has-error .err { color: var(--rojo-claro); }
.form-note { font-size: var(--fs-1); color: var(--c-muted); margin: 0; }
.form-box { background: var(--c-surface); padding: var(--sp-32); border-radius: var(--r-card); border: var(--bw) solid var(--c-line); }
.band--ink .form-box .field input, .band--ink .form-box .field select, .band--ink .form-box .field textarea { background: var(--paper); }
@media (max-width: 479px) { .form-box { padding: var(--sp-24) var(--sp-16); } }

/* ---- FAQ ---- */
.faq { border-top: var(--bw) solid var(--c-line); max-width: 52rem; }
.faq details { border-bottom: var(--bw) solid var(--c-line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16);
  min-height: var(--sp-64); padding-block: var(--sp-16);
  font-family: var(--f-titulo); font-style: italic; font-stretch: var(--ancho-titulo); font-weight: 700; font-size: var(--fs-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform var(--t-hover) var(--ease); color: var(--c-link); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq .ans { padding-bottom: var(--sp-24); color: var(--c-muted); }
.faq .ans p { margin: 0; }

/* ---- Mapa ---- */
.map { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--ink-2); border: var(--bw) solid var(--c-line); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) { .map { aspect-ratio: 1 / 1; } }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: var(--txt-claro); padding: var(--sp-96) 0 var(--sp-48); --c-focus: var(--paper); --c-muted: var(--txt-claro-suave); --c-line: var(--linea-oscura); --c-txt: var(--txt-claro); --c-link: var(--rojo-claro); }
.site-footer :focus-visible { outline-color: var(--paper); }
.footer-grid { display: grid; gap: var(--sp-48); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: var(--fs-0); letter-spacing: 0.14em; color: var(--txt-claro-suave); margin-bottom: var(--sp-16); font-weight: 700; }
.site-footer address { font-style: normal; }
.site-footer ul { list-style: none; display: grid; gap: var(--sp-4); }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; text-underline-offset: var(--sp-4); }
.site-footer .nap p { margin: 0 0 var(--sp-8); }
.site-footer .nap .name { font-family: var(--f-titulo); font-style: italic; font-weight: 800; font-size: var(--fs-3); text-transform: uppercase; font-stretch: var(--ancho-titulo); }
.site-footer .nap a { color: var(--rojo-claro); }
.footer-bottom { margin-top: var(--sp-64); padding-top: var(--sp-24); border-top: var(--bw) solid var(--linea-oscura); font-size: var(--fs-0); color: var(--txt-claro-suave); }
.footer-bottom p { margin: 0; max-width: none; }
@media (max-width: 1023px) { .site-footer { padding-bottom: calc(var(--wa-size) + var(--sp-96)); } }

/* ---- Botón flotante de WhatsApp (mobile) ---- */
.wa-float {
  position: fixed; right: var(--sp-16); bottom: calc(var(--sp-16) + env(safe-area-inset-bottom, 0px)); z-index: 110;
  width: var(--wa-size); height: var(--wa-size); display: grid; place-items: center;
  border-radius: 50%; background: var(--rojo); color: var(--blanco); box-shadow: var(--sombra-2);
  opacity: 0; transform: translateY(var(--sp-24)) scale(0.9); pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.wa-float .ico { width: var(--sp-32); height: var(--sp-32); }
.wa-float.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: var(--bw-2) solid var(--rojo); animation: pulso 2.4s var(--ease) infinite; pointer-events: none; }
@keyframes pulso { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
@media (min-width: 1024px) { .wa-float { display: none; } }

/* ---- Animaciones: sólo transform y opacity ---- */
/* Reveal on scroll. Sin JS (no existe la clase .js) todo se ve. */
.js .rv { opacity: 0; transform: translateY(var(--rv-y)); }
.js .rv.visible {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
/* Hero en secuencia */
.js .hs { opacity: 0; transform: translateY(var(--sp-24)); }
.js.is-ready .hs {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  transition-delay: var(--d, 0ms);
}
/* Títulos palabra por palabra */
.wi { display: inline-block; }
.js .split .wi { opacity: 0; transform: translateY(0.45em); }
.js .split.visible .wi {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  transition-delay: calc(var(--base, 0ms) + var(--wi, 0) * 60ms);
}
/* Red de seguridad (si main.js no carga) */
.js.safe .rv, .js.safe .hs, .js.safe .split .wi { opacity: 1; transform: none; }