/* ================================================================
   La Reserva Naturaleza Arte
   Paleta tomada del propio material: verde del pasto, teja de los
   techos, niebla del amanecer, madera de la pasarela.
   ================================================================ */

:root{
  --tinta:#17221b;        /* verde casi negro, sombra de arboleda */
  --tinta-2:#24322a;
  --verde:#3d5c40;        /* pasto a media sombra */
  --verde-claro:#7c9a6d;
  --teja:#9c4a2f;         /* techo de tejas */
  --madera:#a8825a;       /* pasarela */
  --niebla:#e6e4da;       /* cielo de amanecer */
  --hueso:#f7f5ef;
  --papel:#fffefb;
  --gris:#6f7568;
  --linea:rgba(23,34,27,.14);

  --ancho:1180px;
  --radio:2px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--hueso);
  color:var(--tinta);
  font-family:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:400;
  font-variation-settings:'SOFT' 20,'WONK' 1;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0;
}

a{color:inherit}
img,video{max-width:100%;display:block}

.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.medida{max-width:62ch}

/* ── Botones ──────────────────────────────────────────────── */
.boton{
  display:inline-block;
  padding:14px 28px;
  border:1px solid var(--tinta);
  border-radius:var(--radio);
  background:var(--tinta);
  color:var(--hueso);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.boton:hover{background:var(--verde);border-color:var(--verde)}
.boton.hueco{background:transparent;color:var(--tinta)}
.boton.hueco:hover{background:var(--tinta);color:var(--hueso)}
.boton.claro{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.boton.claro:hover{background:#fff;color:var(--tinta);border-color:#fff}
.boton.solido-claro{background:var(--hueso);color:var(--tinta);border-color:var(--hueso)}
.boton.solido-claro:hover{background:var(--teja);border-color:var(--teja);color:#fff}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teja);
  outline-offset:3px;
}

/* ── Barra superior ───────────────────────────────────────── */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 24px;
  color:#fff;
  transition:background .3s,padding .3s,color .3s;
}
.barra.pegada{
  background:var(--papel);
  color:var(--tinta);
  padding:10px 24px;
  box-shadow:0 1px 0 var(--linea);
}
.barra .marca{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.15rem;
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;
}
.barra .marca span{display:block;font-family:'Karla',sans-serif;font-size:.62rem;letter-spacing:.22em;opacity:.7;margin-top:2px}
.menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-size:.93rem;padding:4px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a.activo{border-bottom-color:currentColor}
.menu .cta{border:1px solid currentColor;border-radius:var(--radio);padding:8px 18px}
.menu .cta:hover{border-bottom-color:currentColor}

.hamburguesa{display:none;background:none;border:0;color:inherit;font-size:1.5rem;line-height:1;cursor:pointer;padding:4px 8px}

@media(max-width:1020px){
  .hamburguesa{display:block}
  .menu{
    position:fixed;inset:0 0 0 auto;width:min(320px,84vw);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:22px;padding:40px;background:var(--tinta);color:var(--hueso);
    transform:translateX(100%);transition:transform .3s ease;
  }
  .menu.abierto{transform:translateX(0)}
  .menu a{font-size:1.15rem}
}

/* ── Portada ──────────────────────────────────────────────── */
.portada{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--tinta);
}
.portada video,.portada .respaldo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.portada .velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(178deg,rgba(23,34,27,.55) 0%,rgba(23,34,27,.12) 34%,rgba(23,34,27,.72) 100%);
}
.portada .texto{position:relative;z-index:2;width:100%;padding:0 24px 8vh;color:#fff}
.portada .texto .interior{max-width:var(--ancho);margin:0 auto}
.portada h1{
  font-size:clamp(2.6rem,6.4vw,5.4rem);
  max-width:15ch;
  text-wrap:balance;
  margin-bottom:20px;
}
.portada p{
  max-width:46ch;font-size:1.05rem;
  color:rgba(255,255,255,.82);margin:0 0 32px;
}
.portada .acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.portada .lugar{
  font-size:.78rem;letter-spacing:.2em;
  color:rgba(255,255,255,.7);margin-bottom:22px;
}

.bajar{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:3;color:rgba(255,255,255,.6);font-size:.72rem;letter-spacing:.18em;
  text-decoration:none;
}

/* ── Bloques ──────────────────────────────────────────────── */
.bloque{padding:96px 0}
.bloque.ajustado{padding:64px 0}
.bloque.oscuro{background:var(--tinta);color:var(--niebla)}
.bloque.oscuro h2{color:#fff}
.bloque.papel{background:var(--papel)}
.bloque.niebla{background:var(--niebla)}

.titulo-bloque{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:18ch;text-wrap:balance;margin-bottom:18px}
.rotulo{font-size:.76rem;letter-spacing:.2em;color:var(--gris);margin-bottom:14px}
.bloque.oscuro .rotulo{color:var(--verde-claro)}

/* dos columnas: titular izquierda, texto derecha (como el ejemplo) */
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:820px){.dos-columnas{grid-template-columns:1fr;gap:24px}}

/* ── Agenda de retiros ────────────────────────────────────── */
.agenda{display:grid;gap:0;margin-top:44px;border-top:1px solid var(--linea)}
.fila{
  display:grid;
  grid-template-columns:190px 1fr auto;
  gap:32px;align-items:baseline;
  padding:26px 0;
  border-bottom:1px solid var(--linea);
  text-decoration:none;
}
.fila:hover .fila-titulo{color:var(--teja)}
.fila-fecha{font-size:.95rem;color:var(--gris);font-variant-numeric:tabular-nums}
.fila-titulo{font-family:'Fraunces',Georgia,serif;font-size:1.35rem;line-height:1.25;transition:color .18s}
.fila-quien{font-size:.9rem;color:var(--gris);margin-top:6px}
.fila-estado{font-size:.78rem;letter-spacing:.14em;color:var(--gris);white-space:nowrap}
.fila-estado.agotado{color:var(--teja)}
.fila-estado.propio{color:var(--verde)}
@media(max-width:760px){
  .fila{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .fila-estado{margin-top:6px}
}
.agenda-vacia{padding:36px 0;color:var(--gris);border-bottom:1px solid var(--linea)}

/* ── Módulos alternados imagen / texto ────────────────────── */
.modulo{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.modulo .foto{aspect-ratio:16/10;overflow:hidden;background:var(--tinta-2)}
.modulo .foto img{width:100%;height:100%;object-fit:cover}
.modulo .cuerpo{padding:56px 8%}
.modulo:nth-child(even) .foto{order:2}
@media(max-width:880px){
  .modulo{grid-template-columns:1fr}
  .modulo:nth-child(even) .foto{order:0}
  .modulo .cuerpo{padding:36px 24px 48px}
}
.modulo h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px}
.modulo p{color:var(--gris);margin:0 0 22px;max-width:44ch}
.modulo .dato{font-size:.85rem;color:var(--verde);letter-spacing:.05em}

/* ── Números ──────────────────────────────────────────────── */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:left}
.cifra-n{font-family:'Fraunces',Georgia,serif;font-size:2.4rem;line-height:1;color:#fff}
.cifra-t{font-size:.86rem;color:var(--verde-claro);margin-top:8px;max-width:20ch}
@media(max-width:760px){.cifras{grid-template-columns:1fr 1fr;gap:26px}}

/* ── Formulario ───────────────────────────────────────────── */
.formulario{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:.84rem;letter-spacing:.04em;color:var(--gris)}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:.97rem;color:var(--tinta);
  background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);
  padding:12px 14px;width:100%;
}
.bloque.oscuro .campo label{color:var(--verde-claro)}
.bloque.oscuro .campo input,
.bloque.oscuro .campo select,
.bloque.oscuro .campo textarea{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff;
}
.campo textarea{resize:vertical;min-height:120px}
.aviso{padding:14px 18px;border-radius:var(--radio);font-size:.92rem;margin-bottom:22px}
.aviso.ok{background:rgba(124,154,109,.18);border:1px solid var(--verde-claro)}
.aviso.error{background:rgba(156,74,47,.14);border:1px solid var(--teja)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:700px){.formulario{grid-template-columns:1fr}}

/* ── Galería ──────────────────────────────────────────────── */
.mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.mosaico img{width:100%;aspect-ratio:16/10;object-fit:cover}
.mosaico figure:first-child{grid-column:span 2;grid-row:span 2}
.mosaico figure:first-child img{aspect-ratio:auto;height:calc(100% - 26px)}
@media(max-width:700px){
  .mosaico{grid-template-columns:1fr 1fr;gap:10px}
  .mosaico figure:first-child{grid-column:span 2;grid-row:auto}
  .mosaico figure:first-child img{aspect-ratio:16/10;height:auto}
}

/* ── Pie ──────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:var(--niebla);padding:64px 0 28px;font-size:.93rem}
.pie a{color:var(--niebla)}
.pie-grilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.pie h4{font-family:'Karla',sans-serif;font-size:.78rem;letter-spacing:.2em;color:var(--verde-claro);margin:0 0 14px;font-weight:600}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie .legal{margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:var(--gris);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.pie-grilla{grid-template-columns:1fr;gap:32px}}

/* ── Botón flotante de WhatsApp ───────────────────────────── */
.flotante{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:54px;height:54px;border-radius:50%;
  background:var(--verde);color:#fff;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.flotante:hover{background:var(--tinta)}
.flotante svg{width:26px;height:26px;fill:currentColor}