/* ============================================================
   app.css — sitio público
   Paleta de tierra y verde serrano, como el modelo de referencia.

   DECISIÓN DE FONDO: quien compra un lote lo decide mirando fotos
   grandes y leyendo poco. Todo acá está hecho para que la imagen
   mande: secciones amplias, tipografía con aire y la menor cantidad
   de elementos compitiendo por atención.
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root{
  /* Tierra */
  --crema:      #FDF9F3;
  --papel:      #F5EBE0;
  --arena:      #FAF6F0;
  --tierra:     #8B5A3C;
  --tierra-sua: #C4A484;
  --tierra-cla: #E8D5B7;
  --dorado:     #B8935A;

  /* Verde */
  --verde:          #4A5D3F;
  --verde-profundo: #2D3E2A;
  --verde-musgo:    #6B7C5A;
  --verde-salvia:   #8FA07A;
  --verde-suave:    #B8C4A8;
  --verde-claro:    #D4DCC4;

  /* Neutros */
  --tinta:   #1A1612;
  --tinta-2: #5A524A;
  --linea:   #E5DACB;
  --blanco:  #FFFFFF;

  /* Tipografía */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Medidas */
  --ancho:    1240px;
  --radio:    4px;
  --sombra:   0 2px 6px rgba(26,22,18,.05), 0 16px 40px rgba(26,22,18,.08);
  --hdr-h:    72px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 12px);
}
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--verde); }
button{ font:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:300; line-height:1.14; margin:0; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

/* El punto final de cada título va en dorado: es el único adorno de
   toda la tipografía y le da el remate que tiene el sitio modelo. */
h2 em, h1 em{ font-style:italic; color:var(--dorado); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--verde-profundo); color:#fff; padding:.9rem 1.4rem;
}
.skip:focus{ left:0; }

/* ── Estructura ──────────────────────────────────────────── */
.wrap{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.wrap--medio{   width:min(100% - 2.5rem, 900px); margin-inline:auto; }
.wrap--angosto{ width:min(100% - 2.5rem, 720px); margin-inline:auto; }

.seccion{ padding:clamp(3rem, 5.5vw, 5.5rem) 0; position:relative; }
.seccion--papel{  background:var(--papel); }
.seccion--arena{  background:var(--arena); }
.seccion--oscura{ background:var(--verde-profundo); color:#EDF0E8; }

.grid-2{ display:grid; gap:clamp(2.5rem, 6vw, 5rem); grid-template-columns:1fr 1fr; align-items:center; }
.grid-2--form{ align-items:start; }

/* ── Tipografía de sección ───────────────────────────────── */
.volanta{
  display:block; margin:0 0 1.25rem;
  font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tierra);
}
.volanta--clara{ color:var(--tierra-cla); }

.h2{ font-size:clamp(1.6rem, 2.9vw, 2.5rem); margin-bottom:1rem; }
.h2--claro{ color:#F6F3EC; }

.bajada{ font-size:1.03rem; color:var(--tinta-2); max-width:62ch; margin-inline:auto; }
.bajada--izq{ margin-inline:0; }
.bajada--clara{ color:#C9D2BE; }

.cabecera{ text-align:center; margin-bottom:clamp(2.25rem, 3.6vw, 3.5rem); }
.cabecera--izq{ text-align:left; }

.parrafo{ color:var(--tinta-2); margin-bottom:1.15rem; }
.parrafo--grande{ font-size:1.05rem; }
.sub-h{ font-family:var(--display); font-size:1.35rem; margin:3rem 0 1.5rem; text-align:center; }
.vacio{ text-align:center; color:var(--tinta-2); padding:3rem 0; }

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:46px; padding:.7rem 1.5rem;
  border:1px solid transparent; border-radius:999px;
  font-family:var(--texto); font-weight:600; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--oscuro{ background:var(--verde-profundo); color:#fff; }
.btn--oscuro:hover{ background:var(--verde); }
.btn--claro{ background:var(--crema); color:var(--tinta); }
.btn--claro:hover{ background:#fff; }
.btn--linea{ border-color:var(--linea); color:var(--tinta); background:transparent; }
.btn--linea:hover{ border-color:var(--verde); color:var(--verde); }
.btn--linea-clara{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn--linea-clara:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }
.btn--ancho{ width:100%; }

/* ── Header ──────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
/* Sobre la portada va transparente, encima de la foto. La clase la
   agrega app.js al scrollear, y las páginas internas la traen fija. */
.hdr--solido, .hdr.is-scroll{
  background:rgba(253,249,243,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--linea);
}
.hdr__in{ display:flex; align-items:center; gap:2rem; height:var(--hdr-h); }

.marca{ text-decoration:none; color:#fff; margin-right:auto; transition:color .3s ease; }
.hdr--solido .marca, .hdr.is-scroll .marca{ color:var(--tinta); }
.marca__nombre{
  display:block; font-family:var(--display); font-size:1.15rem; line-height:1.2;
}
.marca__bajada{
  display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; opacity:.7;
}

.nav{ display:flex; align-items:center; gap:.25rem; }
.nav a, .nav__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem .95rem; border:0; background:none; cursor:pointer;
  color:rgba(255,255,255,.88); text-decoration:none;
  font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; transition:color .2s ease;
}
.hdr--solido .nav a, .hdr--solido .nav__btn,
.hdr.is-scroll .nav a, .hdr.is-scroll .nav__btn{ color:var(--tinta-2); }
.nav a:hover, .nav__btn:hover{ color:var(--dorado); }

/* Submenú de loteos: se abre con clic, no con hover. En una tablet el
   hover no existe y el menú queda inalcanzable. */
.nav__grupo{ position:relative; }
.nav__panel{
  position:absolute; top:calc(100% + .5rem); left:0; z-index:10;
  display:none; min-width:17rem; padding:.5rem;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.nav__panel.is-abierto{ display:block; }
.nav__panel a{
  display:block; padding:.7rem .85rem; color:var(--tinta);
  text-transform:none; letter-spacing:0; font-size:.95rem;
}
.nav__panel a:hover{ background:var(--papel); color:var(--verde); }
.nav__panel strong{ display:block; font-weight:600; }
.nav__panel small{ display:block; font-size:.8rem; color:var(--tinta-2); font-weight:400; }

.hdr__cta{ min-height:44px; padding:.55rem 1.4rem; border-color:rgba(255,255,255,.45); color:#fff; }
.hdr--solido .hdr__cta, .hdr.is-scroll .hdr__cta{ border-color:var(--linea); color:var(--tinta); }

.burger{ display:none; background:none; border:0; padding:.6rem; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.hdr--solido .burger span, .hdr.is-scroll .burger span{ background:var(--tinta); }
.burger span+span{ margin-top:6px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ── Portada ─────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:center;
  background:linear-gradient(140deg, var(--verde-profundo), var(--verde));
  color:#fff; overflow:hidden;
}
.hero--loteo{ min-height:76svh; }
.hero__fondo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* El velo es lo que hace legible el texto sobre cualquier foto. Más
   oscuro abajo, donde cae el título. */
.hero__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(26,22,18,.55) 0%, rgba(26,22,18,.2) 35%, rgba(26,22,18,.75) 100%);
}
.hero__in{ position:relative; text-align:center; padding:var(--hdr-h) 0 3.5rem; }
.hero__h1{
  font-size:clamp(2.1rem, 4.6vw, 3.6rem); color:#fff; margin-bottom:1.1rem;
}
.hero__h1 em{ color:#fff; opacity:.92; }
.hero__bajada{
  font-size:clamp(.98rem, 1.3vw, 1.1rem); color:rgba(255,255,255,.88);
  max-width:46ch; margin:0 auto 2.5rem;
}
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

/* Ficha rápida del loteo, sobre la foto. */
.ficha{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  margin:0 auto 2.5rem; max-width:46rem;
  border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2);
}
.ficha li{ flex:1 1 9rem; padding:1rem .75rem; }
.ficha li + li{ border-left:1px solid rgba(255,255,255,.2); }
.ficha strong{
  display:block; font-family:var(--display); font-size:1.25rem; font-weight:400; color:#fff;
}
.ficha span{
  display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.65); margin-top:.3rem;
}

.hero__scroll{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid rgba(255,255,255,.5); border-radius:999px;
}
.hero__scroll span{
  position:absolute; left:50%; top:9px; width:3px; height:7px; border-radius:2px;
  background:#fff; transform:translateX(-50%); animation:baja 1.8s ease-in-out infinite;
}
@keyframes baja{ 0%,100%{ transform:translate(-50%,0); opacity:1 } 60%{ transform:translate(-50%,13px); opacity:0 } }

/* ── Grilla de loteos ────────────────────────────────────── */
.loteos{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.loteo{
  background:var(--blanco); border:1px solid var(--linea); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.loteo:hover{ transform:translateY(-5px); box-shadow:var(--sombra); }
.loteo__foto{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--papel); }
.loteo__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.loteo:hover .loteo__foto img{ transform:scale(1.04); }

.pastilla{
  position:absolute; left:1rem; top:1rem;
  padding:.35rem .85rem; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:var(--blanco); color:var(--verde);
}
.pastilla--proximo{ background:var(--tierra-cla); color:var(--tierra); }
.pastilla--agotado{ background:#DED9D2; color:var(--tinta-2); }

.loteo__cuerpo{ padding:1.4rem; display:flex; flex-direction:column; flex:1; }
.loteo__h{ font-size:1.35rem; margin-bottom:.45rem; }
.loteo__h a{ color:inherit; text-decoration:none; }
.loteo__h a:hover{ color:var(--verde); }
.loteo__ubic{
  display:flex; align-items:center; gap:.4rem;
  font-size:.86rem; color:var(--tierra); margin-bottom:.75rem;
}
.loteo__sub{ color:var(--tinta-2); font-size:.97rem; }

.loteo__datos{ display:flex; flex-wrap:wrap; gap:1.5rem; margin:1.25rem 0; padding:1.25rem 0;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.loteo__datos dt{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2);
}
.loteo__datos dd{ margin:.2rem 0 0; font-family:var(--display); font-size:1.05rem; }

.loteo__cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:.5rem;
  color:var(--verde); text-decoration:none; font-weight:600;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
}
.loteo__cta:hover{ gap:.85rem; }
.loteo__cta .ico{ transition:transform .2s ease; }

/* ── Cifras ──────────────────────────────────────────────── */
.cifras{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); }
.cifra{ background:var(--papel); padding:1.75rem 1.25rem; text-align:center; }
.cifra strong{ display:block; font-family:var(--display); font-size:clamp(1.8rem,3vw,2.4rem); color:var(--verde); font-weight:300; }
.cifra span{ display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); margin-top:.4rem; }

/* ── Pilares ─────────────────────────────────────────────── */
.pilares{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }
.pilar__ico{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:1.25rem;
  border:1px solid rgba(255,255,255,.25); border-radius:50%; color:var(--tierra-cla);
}
.pilar__h{ font-size:1.12rem; margin-bottom:.5rem; color:#F6F3EC; }
.pilar__p{ font-size:.97rem; color:#C3CCB9; margin:0; }

/* ── Galería ─────────────────────────────────────────────── */
.galeria{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
.galeria__item{ margin:0; overflow:hidden; background:var(--blanco); position:relative; }
.galeria__item img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s ease; }
.galeria__item:hover img{ transform:scale(1.05); }
.galeria__item--ancho{ grid-column:span 2; grid-row:span 2; }
.galeria__item--ancho img{ aspect-ratio:auto; height:100%; }
.galeria__item figcaption{
  position:absolute; inset:auto 0 0; padding:1.5rem 1.25rem .9rem;
  background:linear-gradient(transparent, rgba(26,22,18,.75));
  color:#fff; font-size:.85rem;
}

/* ── Mapa y distancias ───────────────────────────────────── */
.mapa{ aspect-ratio:21/9; border:1px solid var(--linea); overflow:hidden; background:var(--papel); }
.mapa iframe{ width:100%; height:100%; border:0; display:block; }

.distancias{ display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  background:var(--linea); border:1px solid var(--linea); }
.dist{ background:var(--crema); padding:1.35rem 1.2rem; }
.dist__t{ display:flex; align-items:baseline; gap:.35rem; margin:0 0 .5rem; }
.dist__t strong{ font-family:var(--display); font-size:1.7rem; font-weight:300; color:var(--verde); }
.dist__t span{ font-size:.8rem; color:var(--tinta-2); }
.dist__h{ font-size:1.05rem; font-family:var(--texto); font-weight:600; margin-bottom:.3rem; }
.dist__p{ font-size:.88rem; color:var(--tinta-2); margin:0; }

/* ── Masterplan ──────────────────────────────────────────── */
.plano{ margin:0; text-align:center; }
.plano img{ width:100%; border:1px solid var(--linea); background:var(--blanco); }
.plano figcaption{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1rem; font-size:.85rem; color:var(--tinta-2);
}

/* ── Servicios ───────────────────────────────────────────── */
.servicios{ display:grid; gap:1.9rem 1.75rem; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.serv{ padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.2); }
.serv__ico{ display:block; color:var(--tierra-cla); margin-bottom:1rem; }
.serv__h{ font-size:1.1rem; margin-bottom:.4rem; color:#F6F3EC; }
.serv__p{ font-size:.95rem; color:#C3CCB9; margin:0; }

/* ── Atractivos ──────────────────────────────────────────── */
/* Columnas fijas y no auto-fit: con cuatro atractivos —que es lo
   habitual— auto-fit daba tres arriba y uno huérfano abajo. */
.atractivos{ display:grid; gap:1.25rem; grid-template-columns:repeat(4,1fr); }

.atrac{ position:relative; overflow:hidden; border-radius:var(--radio); }
.atrac--foto{ aspect-ratio:4/5; display:flex; align-items:flex-end; }
.atrac__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s ease;
}
.atrac--foto:hover .atrac__img{ transform:scale(1.05); }
/* El velo es lo que hace legible el texto sobre cualquier foto: casi
   nada arriba, donde está el paisaje, y oscuro abajo, donde cae el
   título. Sin esto el texto desaparece sobre un cielo claro. */
.atrac__velo{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(26,22,18,0) 35%, rgba(26,22,18,.82) 100%);
}
.atrac--foto .atrac__cuerpo{ position:relative; padding:1.5rem 1.35rem 1.4rem; color:#fff; }
.atrac--foto .atrac__h{ color:#fff; font-style:italic; }
.atrac--foto .atrac__p{ color:rgba(255,255,255,.85); }

/* Sin foto cargada: tarjeta de texto, para que la sección no se
   rompa mientras el loteo está a medio cargar. */
.atrac--texto{ background:var(--blanco); border:1px solid var(--linea); }
.atrac--texto .atrac__cuerpo{ padding:1.5rem 1.4rem; }

.atrac__h{ font-size:1.15rem; margin-bottom:.3rem; }
.atrac__p{ font-size:.92rem; color:var(--tinta-2); margin:0; }

/* ── Contacto ────────────────────────────────────────────── */
.datos{ display:grid; gap:.25rem; margin-top:2.5rem; }
.datos li > *{
  display:flex; align-items:center; gap:1rem; padding:.9rem .5rem;
  color:inherit; text-decoration:none; transition:background .2s ease;
}
.datos a:hover{ background:var(--blanco); }
.datos__ico{
  display:grid; place-items:center; flex:none; width:44px; height:44px;
  border:1px solid var(--linea); border-radius:50%; color:var(--tierra);
}
.datos strong{ display:block; font-size:.97rem; }
.datos small{ display:block; font-size:.88rem; color:var(--tinta-2); }

.form-caja{ background:var(--blanco); border:1px solid var(--linea); padding:clamp(1.75rem,3vw,2.5rem); }
.form{ display:grid; gap:1.15rem; }
.fila{ display:grid; gap:1.15rem; grid-template-columns:1fr 1fr; }
.campo{ display:grid; gap:.4rem; }
.campo label{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2);
}
.req{ color:var(--tierra); }
.campo input, .campo select, .campo textarea{
  width:100%; padding:.7rem .9rem; min-height:46px;
  font:inherit; font-size:1rem; color:var(--tinta);
  background:var(--arena); border:1px solid var(--linea); border-radius:var(--radio);
  transition:border-color .2s ease, background .2s ease;
}
.campo textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  background:#fff; border-color:var(--verde-salvia); outline:none;
}
.campo ::placeholder{ color:#A79F96; }

.form__nota{
  display:flex; align-items:flex-start; gap:.45rem;
  margin:.25rem 0 0; font-size:.82rem; color:var(--tinta-2);
}
.form__nota .ico{ flex:none; margin-top:.25rem; color:var(--verde-salvia); }

/* Honeypot: fuera de pantalla, pero NO display:none — varios bots
   detectan ese truco y saltean el campo. */
.miel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.aviso{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.9rem 1.1rem; margin-bottom:1.25rem; font-size:.95rem;
  border-left:3px solid;
}
.aviso .ico{ flex:none; margin-top:.2rem; }
.aviso--ok{    background:#EDF2E7; border-color:var(--verde-musgo); color:var(--verde); }
.aviso--error{ background:#FAEDE4; border-color:var(--tierra);      color:var(--tierra); }

/* ── Pie ─────────────────────────────────────────────────── */
.pie{ background:var(--verde-profundo); color:#C9D2BE; padding:3.25rem 0 1.75rem; }
.pie__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; }
.pie__marca strong{ font-family:var(--display); font-size:1.3rem; color:#F6F3EC; display:block; margin-bottom:.4rem; }
.pie__marca p{ margin:0 0 .4rem; font-size:.92rem; }
.pie__dato{ display:flex; align-items:center; gap:.4rem; }
.pie h3{
  font-family:var(--texto); font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tierra-cla); margin-bottom:1rem;
}
.pie__nav, .pie__contacto{ display:grid; gap:.5rem; align-content:start; }
.pie__nav a, .pie__link{
  display:flex; align-items:center; gap:.5rem;
  color:#C9D2BE; text-decoration:none; font-size:.93rem;
}
.pie__nav a:hover, .pie__link:hover{ color:#fff; }

.pie__legal{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
}
.pie__legal p{ margin:0; font-size:.78rem; color:rgba(201,210,190,.7); }
.pie__nota{ max-width:60ch; }

/* ── WhatsApp flotante ───────────────────────────────────── */
.wa-flota{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:90;
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 8px 24px rgba(26,22,18,.3);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.wa-flota.is-visible{ opacity:1; visibility:visible; transform:none; }
.wa-flota:hover{ background:#1FBA58; }

/* ── Aparición al scrollear ──────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-in{ opacity:1; transform:none; }
.reveal--d1{ transition-delay:.1s; }
.reveal--d2{ transition-delay:.2s; }
.reveal--d3{ transition-delay:.3s; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1100px){
  :root{ --hdr-h:70px; }
  .nav{
    position:absolute; inset:var(--hdr-h) 0 auto; flex-direction:column; align-items:stretch; gap:0;
    padding:1rem 1.25rem 1.5rem; background:var(--crema);
    border-bottom:1px solid var(--linea); box-shadow:0 18px 30px rgba(26,22,18,.08);
    display:none;
  }
  .nav.is-abierto{ display:flex; }
  .nav a, .nav__btn{ color:var(--tinta-2) !important; padding:.9rem .5rem; font-size:.85rem; }
  .nav__panel{ position:static; display:block; box-shadow:none; border:0; padding:0 0 0 1rem; }
  .burger{ display:block; order:3; }
  .hdr__cta{ display:none; }
  .pie__in{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .grid-2{ grid-template-columns:1fr; }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .galeria__item--ancho{ grid-column:span 2; grid-row:auto; }
  .atractivos{ grid-template-columns:repeat(2,1fr); }
  .galeria__item--ancho img{ aspect-ratio:16/10; }
  .mapa{ aspect-ratio:4/3; }
  .pie__legal{ flex-direction:column; }
}

@media (max-width:560px){
  .fila{ grid-template-columns:1fr; }
  .galeria{ grid-template-columns:1fr; }
  .galeria__item--ancho{ grid-column:auto; }
  .atractivos{ grid-template-columns:1fr; }
  .cifras{ grid-template-columns:1fr 1fr; }
  .pie__in{ grid-template-columns:1fr; }
  .hero__acciones .btn{ width:100%; }
  .ficha li + li{ border-left:0; border-top:1px solid rgba(255,255,255,.2); }
  .ficha li{ flex:1 1 100%; }
  .marca__bajada{ display:none; }
}

/* ── Preferencias del sistema ────────────────────────────── */
/* Quien pidió menos animación en su sistema operativo lo pidió por
   algo (mareos, vértigo): se respeta y se apaga todo el movimiento. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .hdr, .wa-flota, .burger, .hero__scroll{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1; transform:none; }
}