:root{
  --fondo:oklch(0.975 0.012 85);
  --texto:#2b0001;
  --tarjeta:oklch(0.99 0.008 90);
  --primario:#3a1a0f;
  --primario-texto:oklch(0.97 0.012 85);
  --secundario:oklch(0.93 0.025 80);
  --tenue:oklch(0.5 0.04 60);
  --borde:oklch(0.88 0.025 75);
  --crema:oklch(0.96 0.02 85);
  --cafe:#2b0001;
  --dorado:#f5a130;
  --display:"Playfair Display",Georgia,serif;
  --sans:"Josefin Sans",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fondo);color:var(--texto);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15}
.contenedor{max-width:64rem;margin:0 auto;padding:0 24px}

/* Encabezado */
header{background:var(--crema);border-bottom:1px solid var(--borde)}
.barra{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;gap:16px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cafe)}
.marca img{height:40px;width:auto}
.marca span{display:flex;flex-direction:column;line-height:1}
.marca b{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:.2em}
.marca small{margin-top:4px;font-size:.65rem;font-weight:300;letter-spacing:.4em}
.barra nav{display:flex;align-items:center;gap:24px;font-size:.875rem}
.barra nav a{text-decoration:none}
.barra nav a:hover{color:var(--primario)}
.pastilla{display:inline-flex;align-items:center;border-radius:999px;background:var(--primario);color:var(--primario-texto)!important;text-decoration:none;font-weight:500;transition:background .2s}
.pastilla:hover{background:var(--cafe)}
.pastilla.chica{padding:8px 16px}
.pastilla.grande{padding:12px 24px;margin-top:32px;font-size:1rem}

/* Portada */
.portada{position:relative}
.portada img{width:100%;height:70vh;min-height:420px;object-fit:cover}
.portada .texto{color:var(--cafe);padding-top:48px}
.portada h1{font-size:clamp(2.6rem,7vw,4.5rem);text-transform:uppercase;letter-spacing:.025em}
.portada p{margin-top:16px;max-width:42rem;font-size:1.125rem;color:var(--primario)}

/* Secciones */
.seccion{padding-top:80px;padding-bottom:80px}
.seccion.sin-arriba{padding-top:0}
.titulo{margin-bottom:32px}
.titulo small{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--dorado)}
.titulo h2{margin-top:8px;font-size:clamp(1.9rem,4vw,2.25rem);color:var(--cafe)}

.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.galeria div{overflow:hidden;border-radius:14px;border:1px solid var(--borde);background:var(--tarjeta)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.galeria img:hover{transform:scale(1.03)}
.r32{aspect-ratio:3/2}.r34{aspect-ratio:3/4}

.caja{border-radius:18px;border:1px solid var(--borde);background:var(--secundario);padding:48px}
.caja p{max-width:42rem;font-size:1.125rem;color:var(--primario)}

.sucursales{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tarjeta{border-radius:18px;border:1px solid var(--borde);background:var(--tarjeta);padding:24px}
.tarjeta h3{font-size:1.5rem;color:var(--cafe)}
.tarjeta p{margin-top:8px;color:var(--tenue)}
.horario{margin-top:24px;border-radius:18px;border:1px solid rgb(245 161 48/.4);background:var(--crema);padding:24px}
.horario small{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--dorado)}
.horario p{margin-top:8px}

.contacto{border-top:1px solid var(--borde);background:var(--crema)}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.datos dt{font-size:.875rem;color:var(--tenue)}
.datos dd{margin-top:4px}
.datos a{font-size:1.125rem;font-weight:500;color:var(--cafe);text-decoration:none;text-underline-offset:4px}
.datos a:hover{color:var(--primario);text-decoration:underline}

/* Pie */
footer{background:var(--dorado);color:var(--cafe)}
.pie{padding-top:40px;padding-bottom:40px}
.pie-fila{display:flex;align-items:center;justify-content:space-between;gap:24px}
.pie-marca{display:flex;align-items:center;gap:20px}
.pie-logo{border-radius:10px;background:var(--crema);padding:12px;box-shadow:0 1px 2px rgb(0 0 0/.08)}
.pie-logo img{height:96px;width:auto}
.pie-marca b{font-family:var(--display);font-size:1.125rem;font-weight:600;letter-spacing:.025em}
.pie-marca p{margin-top:4px;font-size:.875rem;opacity:.8}
.pie nav{display:flex;gap:24px;font-size:.875rem}
.pie nav a{font-weight:500;opacity:.8;text-decoration:none}
.pie nav a:hover{opacity:1}
.derechos{margin-top:32px;border-top:1px solid rgb(43 0 1/.3);padding-top:16px;font-size:.75rem;opacity:.8}

/* Páginas legales */
.legal{max-width:48rem;margin:0 auto;padding:64px 24px}
.legal h1{font-size:clamp(2.2rem,5vw,3rem);color:var(--cafe)}
.legal .cuerpo{margin-top:40px;display:flex;flex-direction:column;gap:24px}
.legal h2{font-size:1.25rem;color:var(--cafe)}
.legal section p{margin-top:8px;color:var(--tenue)}
.legal a{color:var(--primario)}
.legal .fecha{margin-top:48px;border-top:1px solid var(--borde);padding-top:24px;font-size:.875rem;color:var(--tenue)}

@media (max-width:767px){
  .galeria{grid-template-columns:1fr 1fr}
  .sucursales,.datos{grid-template-columns:1fr}
  .caja{padding:32px}
  .pie-fila{flex-direction:column;align-items:flex-start}
  .pie nav{flex-direction:column;gap:8px}
}
@media (max-width:420px){
  .contenedor{padding-left:16px;padding-right:16px}
  .barra nav a:not(.pastilla){display:none}
  .pie-logo img{height:72px}
}