/* Hacienda San Antonio · estilos del sitio público (marca.json 2026-10-09) */

/* fuentes: ver fuentes/fuentes.css */

/* ---------- base ---------- */
:root{
  --negro:#231f20;--gris:#6c6e70;--gris-texto:#5e6062;--bronce:#a78b6b;--bronce-texto:#7f6442;--oro:#f9ac00;--oro-fin:#825721;
  --marfil:#fbf8f2;--hueso:#f3ecdf;--linea:#e4d9c7;--crema:#f3ecdf;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--marfil);color:var(--negro);font:300 17px/1.65 var(--sans)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.in{max-width:1120px;margin:auto}
section{padding:92px 22px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

.etq{font:500 12px var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--bronce-texto);text-align:center;margin:0}
h2{font:italic 500 46px/1.1 var(--serif);margin:8px 0 14px;text-align:center}
.sub{max-width:640px;margin:0 auto 52px;text-align:center;color:var(--gris)}
.filete{width:64px;height:1px;background:var(--bronce);margin:0 auto 22px;position:relative}
.filete::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;background:var(--bronce);transform:translateX(-50%) rotate(45deg)}
.filete.izq{margin-left:0}
.dos>div>.etq,.dos>div>h2{text-align:left}

.btn{display:inline-block;background:var(--negro);color:#fff;font:400 13px var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:14px 26px;border-radius:2px;border:1px solid var(--negro);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--bronce);border-color:var(--bronce)}
.btn.claro{background:transparent;color:var(--negro)}
.btn.claro:hover{background:var(--negro);color:#fff}
.btn.oro{background:var(--oro);color:var(--negro);border-color:var(--oro)}
.btn.oro:hover{background:#fff;border-color:#fff}
.btn:disabled{opacity:.6;cursor:wait}

/* fotos: con imagen o con marco vacío */
.foto{background:linear-gradient(135deg,#d9cdbb,#ece3d3);color:#8a7c66;display:flex;align-items:center;justify-content:center;font:italic 500 18px var(--serif);text-align:center;padding:16px;border-radius:2px;position:relative;overflow:hidden}
.foto::after{content:"";position:absolute;inset:10px;border:1px solid rgba(167,139,107,.45);pointer-events:none}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto.con-imagen::after{display:none}
.foto.vertical{aspect-ratio:4/5}
.foto.cuadrada{aspect-ratio:1}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:5;background:rgba(251,248,242,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.nav{max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 22px}
.nav-logo img{height:46px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font:400 13px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.nav ul a:hover{color:var(--bronce)}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:24px;height:1.5px;background:var(--negro)}
.menu-movil{display:flex;flex-direction:column;border-top:1px solid var(--linea);padding:10px 22px 18px;font:400 14px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.menu-movil a{padding:11px 0;border-bottom:1px solid var(--linea)}

/* ---------- portada ---------- */
.hero{background:var(--negro);color:#fff;position:relative;overflow:hidden;padding:0}
.hero-fondo{position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,#4a3f35,#1b1918)}
.hero-fondo img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero .in{position:relative;padding:120px 22px 130px;text-align:center}
.hero-logo{width:min(560px,86%);margin:0 auto 28px}
.hero-lema{font:italic 500 28px/1.3 var(--serif);margin:0 0 34px;color:var(--crema)}

/* ---------- el jardín ---------- */
.dos.jardin{grid-template-columns:1.1fr 1fr}
.cifras{display:flex;gap:42px;margin-top:26px}
.cifras b{display:block;font:italic 500 40px/1.1 var(--serif);color:var(--bronce)}
.cifras span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

/* ---------- paquetes / tarjetas ---------- */
.paquetes{background:var(--hueso)}
.paquetes .sub{color:var(--gris-texto)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tarjeta{background:#fff;border:1px solid var(--linea);display:flex;flex-direction:column}
.tarjeta .foto{aspect-ratio:4/3;border-radius:0}
.tarjeta .cu{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.tarjeta h3{font:italic 600 27px/1.15 var(--serif);margin:0}
.tarjeta p{margin:0;color:var(--gris);font-size:15px}
.tarjeta ul{margin:6px 0 0;padding:0;list-style:none;font-size:14px;color:var(--gris)}
.tarjeta li{padding:3px 0 3px 18px;position:relative}
.tarjeta li::before{content:"◆";position:absolute;left:0;top:9px;color:var(--bronce);font-size:8px}
.tarjeta .btn{margin-top:auto;text-align:center;padding:12px 14px}
.tarjeta .btn:not(:first-child){margin-top:16px}
.miniaturas{display:flex;gap:6px;margin-top:8px}
.miniaturas img{width:46px;height:36px;object-fit:cover;border:1px solid var(--linea)}
.fecha{font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronce-texto)}
.tarjeta.entrada{cursor:pointer;transition:border-color .2s}
.tarjeta.entrada:hover{border-color:var(--bronce)}
.cargando,.vacio{grid-column:1/-1;text-align:center;color:var(--gris);margin:0;padding:36px 20px;border:1px dashed var(--linea);font-style:italic;font-family:var(--serif);font-size:20px}
.vacio .btn{margin-top:18px;font-style:normal}

/* ---------- galería ---------- */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px}
.mosaico .foto{height:100%;border-radius:2px}
.mosaico .foto:nth-child(1){grid-column:span 2;grid-row:span 2}
.mosaico .foto:nth-child(6),.mosaico .foto:nth-child(7){grid-column:span 2}

/* ---------- nosotros ---------- */
.nosotros{background:var(--negro);color:var(--crema)}
.nosotros h2{color:#fff}
.nosotros .etq{color:var(--bronce)}
.nosotros p{color:#d6cdbd}
.nosotros .foto{background:linear-gradient(135deg,#3b332c,#262120);color:#8d7b63}
.datos-nosotros{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;margin:26px 0 0}
.datos-nosotros:empty{display:none}
.datos-nosotros dt{font:500 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bronce)}
.datos-nosotros dd{margin:4px 0 0;color:#fff;font:italic 500 22px/1.3 var(--serif)}

/* ---------- contacto ---------- */
.contacto{background:var(--hueso)}
.dos.contacto-dos{grid-template-columns:1fr 1.1fr}
.contacto .dos{grid-template-columns:1fr 1.1fr;align-items:start}
.datos-contacto{margin-top:8px}
.dato{margin:18px 0}
.dato b{display:block;font:500 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bronce-texto)}
.dato a:hover{color:var(--bronce)}
form{display:grid;gap:14px;background:#fff;border:1px solid var(--linea);padding:34px}
form label{font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gris);display:grid;gap:6px}
input,select{font:300 16px var(--sans);padding:12px 14px;border:1px solid #d9cdbb;background:var(--marfil);border-radius:2px;width:100%;color:var(--negro)}
input:focus,select:focus{outline:2px solid var(--bronce);outline-offset:1px}
input.invalido,select.invalido{border-color:#b3261e}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-intro{margin:0;padding:12px 14px;background:var(--hueso);border-left:2px solid var(--bronce);font-size:15px;color:var(--negro)}
.form-msg{margin:0;min-height:1.2em;font-size:15px;color:var(--gris)}
.form-msg.exito{color:#2e6b3a}
.form-msg.error{color:#b3261e}

/* ---------- pie ---------- */
footer{background:#161312;color:#b9b2a6;padding:46px 22px;text-align:center;font-size:14px}
footer img{height:70px;width:auto;margin:0 auto 14px}
footer p{margin:4px 0}
footer .peq{font-size:12px;opacity:.7}
footer .peq:empty{display:none}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{position:fixed;right:18px;bottom:18px;background:#25d366;color:#fff;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:9;transition:transform .2s}
.wa-flotante:hover{transform:scale(1.06)}

/* ---------- diálogo de entrada ---------- */
.dialogo{border:0;padding:0;background:var(--marfil);color:var(--negro);max-width:min(720px,92vw);width:100%;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dialogo::backdrop{background:rgba(22,19,18,.7)}
.dialogo-cerrar{position:absolute;right:10px;top:8px;background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--gris);z-index:1}
.dialogo-cuerpo{padding:0 0 34px}
.dialogo-cuerpo .foto{aspect-ratio:16/8;border-radius:0}
.dialogo-cuerpo .texto{padding:26px 34px 0}
.dialogo-cuerpo h3{font:italic 600 34px/1.1 var(--serif);margin:6px 0 14px}
.dialogo-cuerpo p{margin:0 0 14px;color:var(--negro)}

/* ---------- móvil ---------- */
@media (max-width:860px){
  .nav ul,.nav-btn{display:none}
  .menu-btn{display:flex}
  .dos,.dos.jardin,.contacto .dos{grid-template-columns:1fr;gap:34px}
  .grid{grid-template-columns:1fr}
  .mosaico{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .mosaico .foto:nth-child(1){grid-column:span 2}
  h2{font-size:36px}
  .dos>div>.etq,.dos>div>h2{text-align:center}
  .filete.izq{margin-left:auto}
  .cifras{justify-content:center}
  .hero .in{padding:80px 20px 90px}
  .hero-lema{font-size:23px}
  .fila{grid-template-columns:1fr}
  section{padding:64px 20px}
  form{padding:24px 18px}
  .datos-nosotros{grid-template-columns:1fr}
  .jardin .foto.vertical{order:1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.wa-flotante{transition:none}}