*{box-sizing:border-box;margin:0}

:root{
  --bg:#f3ecdc;
  --surface:#fdf9f0;
  --texto:#26241c;
  --texto-suave:#575343;
  --acento:#9e3116;
  --acento-2:#454e1c;
  --borde:#26241c;

  --font-letrero:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --font-sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--texto);
  font-family:var(--font-sans);
  font-size:clamp(1rem,0.95rem + 0.3vw,1.0625rem);
  line-height:1.65;
  padding-bottom:76px;
}

img{max-width:100%;display:block}

a{color:inherit}

h1,h2,h3{font-family:var(--font-letrero);line-height:1.05}

h1{
  font-size:clamp(2.1rem,7.5vw,3.75rem);
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

h2{
  font-family:var(--font-letrero);
  font-size:clamp(1.4rem,4vw,2.1rem);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.15;
  margin-bottom:24px;
}

h3{
  font-family:var(--font-sans);
  font-size:clamp(1.1rem,2.5vw,1.3rem);
  font-weight:800;
  line-height:1.25;
  margin-bottom:8px;
}

p{max-width:640px}

.chip,
.resena__estrellas{
  font-family:var(--font-letrero);
  font-size:0.8125rem;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

/* ── Layout general ─────────────────────────────────────────────── */

main,
.hero,
.franja__contenido,
.footer{
  max-width:880px;
  margin-inline:auto;
  padding-inline:16px;
}

.seccion{
  padding-block:48px;
}

@media (min-width:768px){
  .seccion{padding-block:72px}
}

.tarjetas{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.tarjeta{
  background:var(--surface);
  border:3px solid var(--borde);
  border-radius:12px;
  box-shadow:6px 6px 0 var(--borde);
  padding:24px;
}

/* ── Botones ─────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 24px;
  border:3px solid var(--borde);
  border-radius:12px;
  font-family:var(--font-sans);
  font-weight:800;
  font-size:1rem;
  text-decoration:none;
  box-shadow:4px 4px 0 var(--borde);
  transition:transform .05s linear;
}

.btn:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--borde);
}

.btn--primario{background:var(--acento);color:var(--surface)}
.btn--secundario{background:var(--acento-2);color:var(--surface)}

.btn:focus-visible,
a:focus-visible,
.cruce:focus-visible{
  outline:3px solid var(--acento);
  outline-offset:3px;
}

/* ── Barra fija inferior (móvil) ────────────────────────────────── */

.barra-fija{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:20;
  display:flex;
  border-top:3px solid var(--borde);
}

.barra-fija__btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:14px 8px;
  font-family:var(--font-sans);
  font-weight:800;
  text-decoration:none;
  font-size:0.95rem;
}

.barra-fija__btn--llamar{background:var(--acento);color:var(--surface)}
.barra-fija__btn--llegar{background:var(--acento-2);color:var(--surface)}

@media (min-width:768px){
  .barra-fija{display:none}
  body{padding-bottom:0}
}

/* ── Hero ────────────────────────────────────────────────────────── */

.hero{
  padding-top:24px;
  padding-bottom:64px;
}

@media (min-width:768px){
  .hero{padding-top:56px;padding-bottom:96px}
}

.hero__card{
  position:relative;
  background:var(--surface);
  border:3px solid var(--borde);
  border-radius:12px;
  box-shadow:6px 6px 0 var(--borde);
  padding:24px;
}

@media (min-width:768px){
  .hero__card{padding:48px}
}

.chip{
  display:inline-block;
  color:var(--texto-suave);
  margin-bottom:16px;
}

.hero h1{margin-bottom:16px}

.hero__sub{color:var(--texto-suave);margin-bottom:24px}

.hero__botones{
  display:flex;
  flex-direction:column;
  gap:16px;
}

@media (min-width:480px){
  .hero__botones{flex-direction:row}
}

/* ── Dispositivo firma: el cruce de la 13 con 67 ────────────────── */

.cruce{
  position:relative;
  display:block;
  width:170px;
  height:150px;
  text-decoration:none;
}

.cruce--hero{display:none}

@media (min-width:768px){
  .cruce--hero{
    display:block;
    position:absolute;
    bottom:-24px;
    right:24px;
  }
}

.cruce--esquina{
  margin:40px auto 32px;
}

@media (min-width:768px){
  .cruce--esquina{display:none}
}

.cruce__poste{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:6px;
  height:150px;
  background:var(--borde);
  border-radius:3px 3px 0 0;
}

.cruce__placa{
  position:absolute;
  top:14px;
  width:150px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--acento-2);
  color:var(--surface);
  font-family:var(--font-letrero);
  font-size:0.9rem;
  letter-spacing:0.1em;
  border:2px solid var(--surface);
  outline:2px solid var(--acento-2);
  box-shadow:4px 4px 0 var(--borde);
}

.cruce__placa--1{
  left:0;
  transform:rotate(-4deg);
}

.cruce__placa--2{
  left:28px;
  top:34px;
  transform:rotate(3deg);
}

@media (max-width:479px){
  .cruce{width:150px;height:130px}
  .cruce__placa{width:120px;height:38px;font-size:0.8rem}
  .cruce__placa--2{left:22px}
}

/* ── Franja de confianza ─────────────────────────────────────────── */

.franja{
  background:var(--texto);
  color:var(--surface);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  background-image:
    repeating-linear-gradient(45deg,var(--acento) 0 6px,var(--acento-2) 6px 12px),
    repeating-linear-gradient(45deg,var(--acento) 0 6px,var(--acento-2) 6px 12px),
    linear-gradient(var(--texto),var(--texto));
  background-size:100% 8px,100% 8px,100% 100%;
  background-position:top,bottom,center;
  background-repeat:no-repeat;
}

.franja__contenido{
  padding-block:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}

@media (min-width:600px){
  .franja__contenido{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

.franja__estado{
  font-family:var(--font-letrero);
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.franja__estado--abierto{color:#c7d98a}
.franja__estado--cerrado{color:#e3a08c}

.franja__resenas{
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:700;
}

/* ── Reseñas ─────────────────────────────────────────────────────── */

.tarjeta--resena footer{
  margin-top:12px;
  color:var(--texto-suave);
  font-weight:700;
}

.resena__estrellas{
  color:var(--acento);
  margin-bottom:8px;
}

/* ── La esquina ──────────────────────────────────────────────────── */

.esquina__direccion{
  color:var(--texto-suave);
  margin-bottom:24px;
}

.horario{
  background:var(--surface);
  border:3px solid var(--borde);
  border-radius:12px;
  box-shadow:6px 6px 0 var(--borde);
  padding:16px 24px;
  max-width:420px;
}

.horario summary{
  cursor:pointer;
  font-family:var(--font-sans);
  font-weight:800;
}

.horario table{
  width:100%;
  border-collapse:collapse;
  margin-top:16px;
}

.horario th,
.horario td{
  text-align:left;
  padding:8px 0;
  border-top:1px solid var(--texto-suave);
  font-weight:400;
}

.horario th{font-weight:700}

.esquina__btn{margin-top:32px}

/* ── CTA final ───────────────────────────────────────────────────── */

.cta-final{
  max-width:880px;
  margin-inline:auto;
  padding:48px 16px 72px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

@media (min-width:768px){
  .cta-final{padding-block:72px 96px}
}

.cta-final p{color:var(--texto-suave)}

/* ── Footer ──────────────────────────────────────────────────────── */

.footer{
  padding-block:32px 48px;
  color:var(--texto-suave);
  font-size:0.9rem;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer__credito a{
  font-weight:700;
  color:var(--texto);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ── Accesibilidad ───────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}