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

:root{
  --bg:#F5F0E6;
  --surface:#FFFFFF;
  --texto:#161209;
  --texto-suave:#5C5340;
  --acento:#7A4A1E;
  --acento-2:#161209;
  --borde:#E4DACA;

  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --space-1:8px;
  --space-2:16px;
  --space-3:32px;
  --space-4:48px;
  --space-5:72px;
  --space-6:104px;
}

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

body{
  background:var(--bg);
  color:var(--texto);
  font-family:var(--serif);
  font-size:clamp(1rem,0.3vw + 0.95rem,1.125rem);
  line-height:1.7;
  padding-bottom:64px; /* espacio para la barra fija en móvil */
}

img{display:none}

a{color:var(--acento)}
a:hover{color:var(--texto)}

:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--texto);
}

h1{font-size:clamp(2.2rem,6vw + 1rem,4rem);line-height:1.05}
h2{font-size:clamp(1.6rem,2.8vw + 0.8rem,2.4rem);line-height:1.15;margin-bottom:var(--space-3)}
h3{font-size:clamp(1.15rem,1vw + 0.95rem,1.35rem);line-height:1.3;margin-bottom:var(--space-1)}

.placa{
  font-family:var(--sans);
  font-weight:600;
  font-size:0.75rem;
  line-height:1.4;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--texto-suave);
}

/* ── El marco: dispositivo visual firma ─────────────────────────────── */
.marco{
  background:var(--surface);
  border:2px solid var(--texto);
  outline:1px solid var(--acento);
  outline-offset:-5px;
  padding:clamp(16px,3vw,28px);
  box-shadow:0 2px 0 rgba(22,18,9,0.18);
}

@media (hover:hover){
  .marco{transition:transform 150ms}
  .marco:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .marco{transition:none}
  .marco:hover{transform:none}
}

/* ── Botones ─────────────────────────────────────────────────────────── */
.boton{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 24px;
  border:2px solid var(--texto);
  min-height:44px;
  line-height:1.2;
}
.boton--principal{background:var(--acento);border-color:var(--acento);color:#FFFFFF}
.boton--principal:hover{background:var(--texto);border-color:var(--texto);color:var(--bg)}
.boton--secundario{background:transparent;color:var(--texto)}
.boton--secundario:hover{background:var(--texto);color:var(--bg)}
.boton--sobre-oscuro{color:var(--bg);border-color:var(--bg)}
.boton--sobre-oscuro:hover{background:var(--bg);color:var(--acento-2)}

/* ── Barra fija de contacto ──────────────────────────────────────────── */
.barra-fija{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:20;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:2px solid var(--texto);
}
.barra-fija__btn{
  display:flex;align-items:center;justify-content:center;
  min-height:56px;
  font-family:var(--sans);
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
}
.barra-fija__btn--principal{background:var(--acento);color:#FFFFFF}
.barra-fija__btn--secundario{background:var(--texto);color:var(--bg)}

main{max-width:980px;margin:0 auto;padding:var(--space-4) var(--space-2)}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{padding-top:var(--space-4)}
.marco--hero{max-width:640px;margin:0 auto;text-align:left}
.hero h1{margin:var(--space-2) 0}
.hero h1 em{font-style:italic}
.hero__subtitulo{color:var(--texto-suave);margin-bottom:var(--space-3);max-width:52ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ── Franja de confianza ─────────────────────────────────────────────── */
.franja{
  max-width:980px;margin:var(--space-3) auto 0;padding:0 var(--space-2);
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
  align-items:center;
}
.franja__item{font-family:var(--sans);font-size:0.9rem}
.estado{font-weight:700;letter-spacing:0.03em}
.estado--abierto{color:#3B5A2E}
.estado--cerrado{color:var(--acento)}

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion{padding:var(--space-5) 0}
.seccion--surface{background:var(--surface);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.seccion__intro{color:var(--texto-suave);max-width:640px;margin-bottom:var(--space-3)}

/* ── Galería de marcos reservados ────────────────────────────────────── */
.galeria{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px,4vw,36px);
}
.galeria__celda{padding:0;overflow:hidden}
.galeria__interior{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  height:100%;
  padding:clamp(16px,3vw,28px);
  text-align:center;
  background-image:
    repeating-linear-gradient(45deg,var(--borde) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,var(--borde) 0 1px,transparent 1px 6px);
  background-color:var(--bg);
}
.galeria__celda svg{flex-shrink:0}
.placa--interior{background:var(--surface);border:1px solid var(--borde);padding:10px 14px}
.placa--interior span{display:block;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--texto-suave);margin-top:4px}

.galeria__celda--diploma,.galeria__celda--retrato{aspect-ratio:3/4}
.galeria__celda--caballete,.galeria__celda--paisaje{aspect-ratio:4/3}
.galeria__celda--espejo{aspect-ratio:1/1}
.galeria__celda--taller{aspect-ratio:2/3}

/* ── Servicios ───────────────────────────────────────────────────────── */
.servicios{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
.servicio p{color:var(--texto-suave)}

/* ── Por qué elegirnos ───────────────────────────────────────────────── */
.porque{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
.porque__item .placa{margin-bottom:var(--space-1)}
.porque__item p:last-child{color:var(--texto-suave)}

/* ── Reseñas ─────────────────────────────────────────────────────────── */
.resenas{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
.resena blockquote{margin:0 0 var(--space-2)}
.resena figcaption{margin-top:var(--space-1)}

/* ── Ubicación y horario ─────────────────────────────────────────────── */
.ubicacion{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
.ubicacion__datos p:not(.placa){margin:var(--space-1) 0 var(--space-2)}
.ubicacion__horario summary{
  font-family:var(--sans);font-weight:600;font-size:0.9rem;cursor:pointer;
  margin:var(--space-1) 0 var(--space-2);color:var(--acento);
}
.tabla-horario{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:0.9rem}
.tabla-horario th,.tabla-horario td{
  text-align:left;padding:var(--space-1) 0;border-bottom:1px solid var(--borde);font-weight:400;
}
.tabla-horario th{color:var(--texto-suave);font-weight:600}

/* ── CTA final ───────────────────────────────────────────────────────── */
.cta-final{
  background:var(--acento-2);
  color:var(--bg);
  text-align:center;
  padding:var(--space-6) var(--space-2);
}
.cta-final h2{color:var(--bg);max-width:640px;margin:0 auto var(--space-2)}
.cta-final p{color:var(--bg);max-width:52ch;margin:0 auto var(--space-3)}
.cta-final__botones{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer{
  font-family:var(--sans);
  font-size:0.8rem;
  color:var(--texto-suave);
  text-align:center;
  padding:var(--space-3) var(--space-2) calc(var(--space-3) + 64px);
}
.footer p{margin-bottom:var(--space-1)}
.footer a{color:var(--texto-suave);text-decoration:underline}

/* ── Escalado por ancho ──────────────────────────────────────────────── */
@media (min-width:600px){
  .galeria{grid-template-columns:repeat(2,1fr)}
  .servicios{grid-template-columns:repeat(2,1fr)}
  .porque{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:760px){
  .barra-fija{display:none}
  body{padding-bottom:0}
  .footer{padding-bottom:var(--space-3)}
}

@media (min-width:900px){
  .galeria{grid-template-columns:repeat(3,1fr)}
  .resenas{grid-template-columns:repeat(3,1fr)}
  .ubicacion{grid-template-columns:1fr 1fr}
}