/* Bodega 1860 · web estática
   Layout: foto a sangre arriba, bloques alternos texto/foto, bandas oscuras para las cartas.
   Una sola apariencia (la de la marca), colores fijos a propósito. */
@import url("../fonts/fonts.css");
:root{
  --tinta:#0E1317;      /* casi negro de la marca */
  --carbon:#252525;     /* bandas oscuras */
  --cobre:#C19977;      /* botones y acentos */
  --cobre-osc:#9E7656;  /* hover y texto acento sobre blanco */
  --papel:#FFFFFF;
  --hueso:#F6F2EE;      /* fondos suaves */
  --texto:#313131;
  --gris:#6B635C;
  --f-titulo:"Gilda Display", Georgia, "Times New Roman", serif;
  --f-boton:"Oswald", "Arial Narrow", Arial, sans-serif;
  --f-texto:"Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho:1180px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--texto);font:300 17px/1.75 var(--f-texto)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cobre-osc)}
a:focus-visible,button:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}
h1,h2,h3{font-family:var(--f-titulo);font-weight:400;line-height:1.1;color:var(--tinta);text-wrap:balance;margin:0}
p{margin:0}
.envoltura{max-width:var(--ancho);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* Cabecera */
.cabecera{position:absolute;inset:0 0 auto;z-index:20;padding-top:env(safe-area-inset-top,0px)}
.cabecera.solida{position:sticky;top:0;background:var(--tinta)}
.cabecera .envoltura{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:400 15px/1 var(--f-boton);letter-spacing:.28em;text-transform:uppercase}
.marca img{width:26px}
.menu{display:flex;flex-wrap:wrap;gap:4px 22px;list-style:none;margin:0;padding:0;align-items:center}
.menu a{color:#fff;text-decoration:none;font:400 13.5px/1 var(--f-boton);letter-spacing:.12em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid transparent;opacity:.92}
.menu a:hover,.menu a[aria-current]{opacity:1;border-bottom-color:var(--cobre)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--cobre);color:#fff;text-decoration:none;font:400 14px/1 var(--f-boton);letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;border-radius:3px;border:1px solid var(--cobre);transition:background .2s,border-color .2s}
.btn:hover{background:var(--cobre-osc);border-color:var(--cobre-osc)}
.btn.oscuro{background:var(--carbon);border-color:var(--carbon)}
.btn.oscuro:hover{background:#000}
.btn.linea{background:transparent;color:var(--tinta);border-color:var(--cobre)}
.btn.linea:hover{background:var(--cobre);color:#fff}
.btn.claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.claro:hover{background:#fff;color:var(--tinta)}
.menu .btn{padding:11px 18px;opacity:1;border-bottom:1px solid var(--cobre)}
.abrir-menu{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:3px;font:400 13px/1 var(--f-boton);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
@media (max-width:980px){
  .abrir-menu{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--tinta);padding:8px max(20px,env(safe-area-inset-right,0px)) 20px max(20px,env(safe-area-inset-left,0px))}
  .menu.abierto{display:flex}
  .menu a{display:block;padding:14px 0;font-size:15px;border-bottom:1px solid rgba(255,255,255,.1)}
  .menu .btn{margin-top:14px;display:flex}
}

/* Portada */
.portada{position:relative;min-height:min(92vh,820px);display:grid;place-items:center;color:#fff;overflow:hidden;background:var(--tinta)}
.portada>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,19,23,.55) 0%,rgba(14,19,23,.05) 35%,rgba(14,19,23,.25) 75%,rgba(14,19,23,.6) 100%)}
.portada .centro{position:relative;z-index:2;display:grid;justify-items:center;gap:26px;text-align:center;padding:120px 20px 90px}
.portada .logo{width:clamp(96px,14vw,150px)}
.portada .lema{font:400 13px/1.4 var(--f-boton);letter-spacing:.32em;text-transform:uppercase}
.portada .acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.corte{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}

.cabeza-pagina{position:relative;background:var(--tinta);color:#fff;overflow:hidden}
.cabeza-pagina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.cabeza-pagina .envoltura{position:relative;padding-block:150px 70px}
.cabeza-pagina h1{color:#fff;font-size:clamp(40px,6vw,68px)}
.cabeza-pagina p{margin-top:12px;max-width:52ch;font-size:18px;opacity:.9}

/* Bloques */
.bloque{padding-block:clamp(64px,9vw,120px)}
.bloque.hueso{background:var(--hueso)}
.bloque.oscuro{background:var(--carbon);color:#e9e4df}
.bloque.oscuro h2,.bloque.oscuro h3{color:#fff}
.antetitulo{font:400 13px/1.3 var(--f-boton);letter-spacing:.28em;text-transform:uppercase;color:var(--cobre-osc);display:flex;align-items:center;gap:14px}
.oscuro .antetitulo{color:var(--cobre)}
.antetitulo::before{content:"";width:34px;height:1px;background:currentColor}
.titulo{font-size:clamp(38px,5.4vw,64px);margin-top:14px}
.parrafo{margin-top:22px;max-width:60ch}
.parrafo+.parrafo{margin-top:14px}
.parrafo b,.parrafo strong{font-weight:600;color:var(--tinta)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.dos>*{min-width:0}
.dos .acciones{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:820px){.dos{grid-template-columns:1fr}.dos.foto-primero>.foto{order:-1}}
.foto-arco{border-radius:999px 999px 6px 6px;overflow:hidden;aspect-ratio:4/5;max-width:520px;width:100%;justify-self:center}
.foto-arco img{width:100%;height:100%;object-fit:cover}
.foto-recta{border-radius:4px;overflow:hidden}
.rayas{background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(193,153,119,.55) 9px 10.5px)}

.lonja{text-align:center;display:grid;justify-items:center;gap:16px}
.lonja .pez{width:68px}
.lonja .parrafo{margin-inline:auto}

/* Cartas */
.cartas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:40px}
.carta{background:var(--papel);border:1px solid #E7DED6;border-radius:4px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.oscuro .carta{background:#2E2E2E;border-color:#3b3b3b;color:#ddd5ce}
.carta h3{font-size:28px}
.carta p{font-size:15.5px;line-height:1.6;color:var(--gris)}
.oscuro .carta p{color:#bdb3aa}
.carta .enlaces{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.carta .enlaces .btn{padding:11px 14px;font-size:13px}
.etiqueta{font:400 12px/1 var(--f-boton);letter-spacing:.2em;text-transform:uppercase;color:var(--cobre-osc)}
.oscuro .etiqueta{color:var(--cobre)}

/* Galería */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.galeria img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px}
@media (max-width:820px){.galeria{grid-template-columns:repeat(2,1fr)}}

/* Historia */
.linea-tiempo{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;list-style:none;padding:0}
.linea-tiempo li{border-top:1px solid var(--cobre);padding-top:20px;min-width:0}
.linea-tiempo .anio{font:400 46px/1 var(--f-titulo);color:var(--cobre-osc);font-variant-numeric:lining-nums}
.linea-tiempo p{margin-top:12px;font-size:16px}
@media (max-width:720px){.linea-tiempo{grid-template-columns:1fr}}

/* Opinión */
.opinion{max-width:760px;margin:0 auto;text-align:center;display:grid;gap:18px;justify-items:center}
.opinion blockquote{margin:0;font:400 clamp(22px,2.6vw,28px)/1.45 var(--f-titulo);color:var(--tinta)}
.estrellas{color:var(--cobre);letter-spacing:.3em;font-size:18px}
.opinion cite{font:400 14px/1 var(--f-boton);letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--gris)}

/* Datos (horario, dirección) */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:36px}
.dato h3{font:400 13px/1.3 var(--f-boton);letter-spacing:.22em;text-transform:uppercase;color:var(--cobre-osc)}
.oscuro .dato h3{color:var(--cobre)}
.dato p{margin-top:8px;font-size:18px;line-height:1.55}
.dato .grande{font:400 30px/1.2 var(--f-titulo);color:var(--tinta);text-decoration:none}
.oscuro .dato .grande{color:#fff}
.aviso{margin-top:28px;padding:18px 20px;border-left:3px solid var(--cobre);background:var(--hueso);font-size:15.5px;max-width:70ch}

.reserva{margin-top:36px;background:var(--papel);border:1px solid #E7DED6;border-radius:4px;overflow:hidden}
.reserva iframe{display:block;width:100%;height:760px;border:0}

/* Legal */
.legal{max-width:78ch}
.legal p,.legal li{font-size:15.5px;line-height:1.7;margin:0 0 12px}
.legal strong{font-weight:600}
.legal a{word-break:break-word}

/* Pie */
.pie{background:var(--tinta);color:#bfb6ae;font-size:14.5px}
.pie .envoltura{padding-block:56px 36px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
.pie .envoltura>*{min-width:0}
.pie h3{font:400 13px/1 var(--f-boton);letter-spacing:.24em;text-transform:uppercase;color:var(--cobre);margin-bottom:14px}
.pie a{color:#e9e4df;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie .logo-pie{width:64px;margin-bottom:14px}
.pie .legal-pie{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px}
@media (max-width:760px){.pie .envoltura{grid-template-columns:1fr}}
.ayudas{background:#fff;padding-block:18px}
.ayudas img{margin:0 auto;width:100%;max-width:1170px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}