/* ============================================================
   Hacienda Guillermina · Ciales, PR
   Sistema visual: selva + río + sol (v1.0.0)
   ============================================================ */
:root {
  --selva: #0E3B2E;
  --selva-2: #14523F;
  --musgo: #1E5A41;
  --rio: #2E7E8C;
  --neblina: #F2F5F0;
  --crema: #FBFAF6;
  --sol: #E8A13D;
  --sol-osc: #B97A1C;
  --tinta: #12241C;
  --gris: #55665D;
  --linea: #DEE7DF;
  --rojo: #C0392B;
  --radio: 18px;
  --sombra: 0 12px 32px rgba(14, 59, 46, .12);
  --sombra-suave: 0 4px 14px rgba(14, 59, 46, .08);
  --f-display: 'Fraunces', Georgia, serif;
  --f-cuerpo: 'Albert Sans', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-cuerpo);
  color: var(--tinta);
  background: var(--crema);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--selva); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; margin: 0 0 .4em; }
h2 { font-size: clamp(26px, 4.6vw, 40px); letter-spacing: -.01em; }
.contenedor { width: min(1120px, 92%); margin: 0 auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sol-osc);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--sol); border-radius: 2px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 14px; border: 0; cursor: pointer;
  font: 600 15.5px var(--f-cuerpo); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn-sol { background: var(--sol); color: #221503; box-shadow: 0 8px 22px rgba(232, 161, 61, .38); }
.btn-sol:hover { filter: brightness(1.06); }
.btn-selva { background: var(--selva); color: #ffffff !important; }
.btn-selva:hover { background: var(--selva-2); }
.btn-linea { background: transparent; border: 1.6px solid rgba(255,255,255,.55); color: #fff !important; }
.btn-linea.oscuro { border-color: var(--selva); color: var(--selva) !important; }
.btn-linea:hover { background: rgba(255,255,255,.1); }
.btn-linea.oscuro:hover { background: rgba(14,59,46,.06); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-bloque { width: 100%; }

/* ---------- Navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(14, 59, 46, .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-int { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.marca svg { width: 30px; height: 30px; }
.marca b { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: #fff; }
.nav .btn { padding: 10px 16px; font-size: 14px; }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(232,161,61,.28), transparent 60%),
    linear-gradient(178deg, #0B2C22 0%, #0E3B2E 42%, #17564A 74%, #2E7E8C 118%);
  padding: clamp(72px, 11vh, 120px) 0 0;
}
.hero-int { position: relative; z-index: 3; text-align: left; max-width: 760px; padding-bottom: clamp(150px, 22vh, 230px); }
.hero h1 {
  font-size: clamp(38px, 7.2vw, 66px); font-weight: 620; letter-spacing: -.015em;
  margin: 14px 0 16px; text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--sol); }
.hero p.sub { font-size: clamp(16px, 2.4vw, 19px); color: rgba(255,255,255,.86); max-width: 56ch; margin: 0 0 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.hero-siluetas { position: absolute; inset: auto 0 -2px 0; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; }
.luciernaga {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #FFD98A; box-shadow: 0 0 12px 3px rgba(255, 217, 138, .8);
  opacity: 0; animation: flotar 9s ease-in-out infinite; z-index: 2; pointer-events: none;
}
@keyframes flotar {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .95; }
  55% { opacity: .45; }
  100% { transform: translate(var(--dx, 40px), var(--dy, -70px)); opacity: 0; }
}

/* ---------- Secciones ---------- */
.seccion { padding: clamp(56px, 9vw, 96px) 0; }
.seccion.tinte { background: var(--neblina); }
.cabecera-seccion { max-width: 640px; margin-bottom: 34px; }
.cabecera-seccion p { color: var(--gris); font-size: 16.5px; margin: 8px 0 0; }

.banda { background: var(--selva); color: #fff; padding: 20px 0; }
.banda-int { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; align-items: center; }
.banda-item { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.banda-item b { color: var(--sol); font-family: var(--f-display); font-size: 21px; font-weight: 650; }

/* ---------- Tarjetas de espacios ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
.tarjeta {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 24px; box-shadow: var(--sombra-suave); position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.tarjeta .escala { display: flex; align-items: flex-end; gap: 10px; height: 96px; margin-bottom: 16px; }
.rect-lote {
  border: 2px solid; border-radius: 6px; position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(0,0,0,.03));
}
.rect-lote span {
  position: absolute; inset: auto 0 -22px 0; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--gris);
}
.t-premium { color: var(--sol-osc); }  .t-premium .rect-lote { border-color: var(--sol); background-color: rgba(232,161,61,.1); }
.t-familiar { color: var(--rio); }     .t-familiar .rect-lote { border-color: var(--rio); background-color: rgba(46,126,140,.08); }
.t-estandar { color: var(--musgo); }   .t-estandar .rect-lote { border-color: var(--musgo); background-color: rgba(30,90,65,.08); }
.tarjeta h3 { font-size: 23px; }
.tarjeta .medidas { font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tarjeta .precio { font-family: var(--f-display); font-size: 30px; font-weight: 650; margin: 10px 0 2px; color: var(--tinta); }
.tarjeta .precio small { font-family: var(--f-cuerpo); font-size: 14px; font-weight: 500; color: var(--gris); }
.tarjeta ul { margin: 12px 0 18px; padding: 0 0 0 18px; color: var(--gris); font-size: 14.5px; }
.tarjeta ul li { margin: 5px 0; }

/* ---------- Mapa ---------- */
.mapa-marco {
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
  border: 1px solid var(--linea); position: relative; background: #dfe7e2;
}
#mapaPreview, #mapaReserva { width: 100%; height: clamp(380px, 58vh, 560px); }
.leyenda {
  display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; font-size: 13.5px; color: var(--gris);
  align-items: center;
}
.leyenda .punto { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 1px solid rgba(0,0,0,.15); }
.p-premium { background: rgba(232,161,61,.85); }
.p-familiar { background: rgba(46,126,140,.85); }
.p-estandar { background: rgba(103,178,111,.85); }
.p-ocupado { background: #9aa5a0; }
.p-calle { background: rgba(66,133,244,.55); }
.hg-etq {
  background: rgba(255,255,255,.94); border: 1px solid rgba(14,59,46,.25); border-radius: 7px;
  font: 700 11px/1 var(--f-cuerpo); color: var(--tinta); padding: 3px 5px; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.28); transform: translate(-50%, -50%); display: inline-block;
}
.leaflet-container { font-family: var(--f-cuerpo); }

/* ---------- Cómo funciona ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: paso; }
@media (max-width: 900px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }
.paso-item { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra-suave); }
.paso-item::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  font-family: var(--f-display); font-size: 30px; font-weight: 650; color: var(--sol);
  display: block; margin-bottom: 8px;
}
.paso-item h3 { font-size: 18.5px; }
.paso-item p { font-size: 14.5px; color: var(--gris); margin: 6px 0 0; }

/* ---------- Ubicación / Footer ---------- */
.ubicacion { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; }
@media (max-width: 860px) { .ubicacion { grid-template-columns: 1fr; } }
.dato-linea { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; font-size: 15.5px; }
.dato-linea svg { flex: 0 0 22px; margin-top: 2px; color: var(--sol-osc); }
.pie { background: var(--tinta); color: rgba(255,255,255,.8); padding: 34px 0 26px; font-size: 14px; }
.pie-int { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.pie a { color: #fff; }
.pie .credito { font-size: 12.5px; color: rgba(255,255,255,.5); }
.btn-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 56px; height: 56px; border-radius: 50%;
  background: #22c15e; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.28); color: #fff !important;
}
.btn-wa svg { width: 30px; height: 30px; }

/* ---------- Animación de entrada ---------- */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.aparece.visible { opacity: 1; transform: none; }

/* ============================================================
   WIZARD DE RESERVA
   ============================================================ */
.reserva-fondo { background: var(--neblina); min-height: 100vh; }
.reserva-caja { width: min(920px, 94%); margin: 26px auto 60px; }
.progreso { display: flex; gap: 8px; margin: 18px 0 22px; }
.progreso span {
  flex: 1; height: 6px; border-radius: 99px; background: #d8e2da; position: relative; overflow: hidden;
}
.progreso span.activo { background: var(--sol); }
.progreso span.hecho { background: var(--selva); }
.panel {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: clamp(20px, 4vw, 32px); animation: entra .35s ease;
}
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel h2 { font-size: clamp(23px, 4vw, 30px); }
.panel .nota { color: var(--gris); font-size: 14.5px; margin-top: 4px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 620px) { .campos { grid-template-columns: 1fr; } }
.campo label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 14px; border: 1.6px solid var(--linea); border-radius: 12px;
  font: 500 15.5px var(--f-cuerpo); color: var(--tinta); background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--selva); box-shadow: 0 0 0 3px rgba(14,59,46,.12);
}
.campo.ancho { grid-column: 1 / -1; }
.acciones { display: flex; gap: 12px; justify-content: space-between; margin-top: 24px; flex-wrap: wrap; }
.error-caja {
  background: #fdecec; border: 1px solid #f2b8b8; color: #8c2222;
  border-radius: 12px; padding: 12px 14px; font-size: 14.5px; margin-top: 16px; display: none;
}
.error-caja.visible { display: block; }
.sel-info {
  display: none; margin-top: 16px; border: 1.6px solid var(--linea); border-radius: 14px; padding: 16px;
  background: var(--crema); gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.sel-info.visible { display: flex; }
.sel-info .cod { font-family: var(--f-display); font-size: 30px; font-weight: 650; }
.sel-info .det { font-size: 14px; color: var(--gris); }
.sel-info .precio-sel { font-weight: 700; font-size: 17px; }
.resumen { border: 1.6px solid var(--linea); border-radius: 14px; overflow: hidden; margin-top: 16px; }
.resumen .fila { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; font-size: 15px; border-bottom: 1px solid var(--linea); }
.resumen .fila:last-child { border-bottom: 0; }
.resumen .fila.total { background: var(--neblina); font-weight: 700; }
.resumen .fila.deposito { background: var(--selva); color: #fff; font-weight: 700; font-size: 16.5px; }
.resumen .fila.deposito small { color: rgba(255,255,255,.75); font-weight: 500; }
.contador {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: #FFF4E0; border: 1px solid #F2DCB0; color: #7a5410;
  padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.metodos { display: grid; gap: 14px; margin-top: 20px; }
.metodo { border: 1.6px solid var(--linea); border-radius: 14px; padding: 18px; }
.metodo h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.metodo .desc { font-size: 14px; color: var(--gris); margin: 4px 0 12px; }
.cinta-demo {
  margin-top: 18px; background: #EEF4FB; border: 1.6px solid #C4D7EE; color: #1E4E79;
  border-radius: 12px; padding: 12px 14px; font-size: 14px;
}
.metodo.previo { background: #FAFBFA; opacity: .82; }
.metodo.previo .btn[disabled] { opacity: .55; }
.tag-previo {
  font: 700 11px var(--f-cuerpo); letter-spacing: .05em; text-transform: uppercase;
  background: #EDF1EE; color: var(--gris); border-radius: 999px; padding: 4px 10px;
}
.metodo.metodo-demo { border-color: var(--sol); background: #FFFBF2; box-shadow: 0 6px 18px rgba(232,161,61,.18); }
.ath-pasos { margin: 0 0 14px; padding-left: 20px; font-size: 14.5px; }
.ath-pasos li { margin: 6px 0; }
.ath-num {
  font-family: var(--f-display); font-size: 24px; font-weight: 650; color: var(--selva);
  background: var(--neblina); border: 1.6px dashed var(--selva); border-radius: 12px;
  padding: 10px 16px; display: inline-block; margin: 4px 0;
}
#botonATHM { min-height: 52px; }
.exito-icono { width: 76px; height: 76px; margin: 0 auto 14px; display: block; }
.centro { text-align: center; }
.codigo-grande {
  font-family: var(--f-display); font-size: clamp(30px, 7vw, 44px); font-weight: 650;
  letter-spacing: .04em; color: var(--selva); margin: 6px 0 2px;
}

/* ============================================================
   PANEL ADMIN
   ============================================================ */
.admin-cuerpo { background: var(--neblina); }
.admin-barra { background: var(--selva); color: #fff; }
.admin-barra-int { width: min(1160px, 94%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.admin-marca { color: #fff; text-decoration: none; font-family: var(--f-display); font-size: 18px; font-weight: 600; }
.admin-marca span { opacity: .65; font-family: var(--f-cuerpo); font-size: 13px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-nav a {
  color: rgba(255,255,255,.85); text-decoration: none; font-size: 13.5px; font-weight: 600;
  padding: 8px 12px; border-radius: 10px;
}
.admin-nav a:hover, .admin-nav a.activo { background: rgba(255,255,255,.14); color: #fff; }
.admin-nav a.salir { color: #FFD1C4; }
.admin-main { width: min(1160px, 94%); margin: 26px auto 60px; }
.admin-titulo { font-size: clamp(24px, 4vw, 32px); margin-bottom: 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 18px; box-shadow: var(--sombra-suave); }
.kpi b { display: block; font-family: var(--f-display); font-size: 32px; font-weight: 650; color: var(--selva); }
.kpi span { font-size: 13.5px; color: var(--gris); font-weight: 600; }
.tabla-caja { background: #fff; border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-suave); overflow-x: auto; margin-bottom: 26px; }
.tabla-caja h2 { font-size: 19px; padding: 16px 18px 0; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.tabla th { text-align: left; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); padding: 12px 14px; border-bottom: 1.6px solid var(--linea); }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:hover td { background: #FAFCF9; }
.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge-pendiente { background: #FFF4E0; color: #7a5410; }
.badge-pago_reportado { background: #E3F0F3; color: #1E5D6B; }
.badge-confirmada { background: #E5F4EA; color: #1C6B3C; }
.badge-cancelada, .badge-expirada { background: #ECEFEC; color: #6a756e; }
.btn-mini { padding: 8px 13px; font-size: 13px; border-radius: 10px; }
.form-admin { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 22px; box-shadow: var(--sombra-suave); max-width: 760px; }
.form-admin .campos { margin-top: 6px; }
.aviso-ok { background: #E5F4EA; border: 1px solid #BBDFC8; color: #1C6B3C; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; margin-bottom: 16px; }
.aviso-err { background: #fdecec; border: 1px solid #f2b8b8; color: #8c2222; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; margin-bottom: 16px; }
.login-caja { max-width: 420px; margin: 9vh auto; }
.admin-pie { text-align: center; color: var(--gris); font-size: 12.5px; padding: 20px 0 30px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.filtros input, .filtros select { padding: 10px 12px; border: 1.6px solid var(--linea); border-radius: 11px; font: 500 14px var(--f-cuerpo); background: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }

/* ============================================================
   v2 · Aventura: actividades, galería, hero con foto, estimado
   ============================================================ */
.hero.con-foto {
  background:
    linear-gradient(178deg, rgba(9,34,26,.82) 0%, rgba(14,59,46,.72) 45%, rgba(23,86,74,.62) 75%, rgba(46,126,140,.55) 110%),
    var(--foto) center 38% / cover no-repeat, #0E3B2E;
}
.grid-actividades { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.actividad {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 20px; box-shadow: var(--sombra-suave); transition: transform .2s ease, box-shadow .2s ease;
}
.actividad:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--sombra); }
.act-icono { font-size: 32px; display: block; margin-bottom: 8px; }
.actividad h3 { font-size: 18px; margin-bottom: 4px; }
.actividad p { font-size: 14px; color: var(--gris); margin: 0; }
.precios-grid .tarjeta ul { min-height: 92px; }
.tipo-estadia { display: flex; gap: 10px; flex-wrap: wrap; }
.opcion-tipo {
  flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1.6px solid var(--linea); border-radius: 12px; padding: 13px 14px;
  font-weight: 600; font-size: 15px; background: #fff; transition: border-color .15s, background .15s;
}
.opcion-tipo input { accent-color: var(--selva); }
.opcion-tipo.activo { border-color: var(--selva); background: #F0F6F2; box-shadow: 0 0 0 3px rgba(14,59,46,.08); }
.estimado { margin-top: 14px; font-size: 15px; color: var(--tinta); min-height: 22px; }
.estimado b { color: var(--selva); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.galeria .foto { display: block; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra-suave); aspect-ratio: 4/3; }
.galeria .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.galeria .foto:hover img { transform: scale(1.05); }
.galeria-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.foto-admin { background: #fff; border: 1.6px solid var(--linea); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra-suave); }
.foto-admin.es-portada { border-color: var(--sol); box-shadow: 0 6px 18px rgba(232,161,61,.25); }
.foto-admin img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.foto-acciones { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px; align-items: center; }

/* ============================================================
   v2.1 · Capa flashy: marquee, olas, tilt, lightbox, CTA móvil
   ============================================================ */
.hero { background-size: 200% 200%; animation: heroGrad 16s ease-in-out infinite alternate; }
@keyframes heroGrad { from { background-position: 0% 0%; } to { background-position: 100% 60%; } }
.hero.con-foto { position: relative; background: #0B241C; animation: none; }
.hero.con-foto::before {
  content: ""; position: absolute; inset: -6%; z-index: 0;
  background: var(--foto) center 38% / cover no-repeat;
  animation: kenburns 26s ease-in-out infinite alternate;
}
.hero.con-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(178deg, rgba(9,34,26,.84) 0%, rgba(14,59,46,.72) 45%, rgba(23,86,74,.6) 78%, rgba(46,126,140,.5) 110%);
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translate(-1.2%, -1%); } }
.hero-cta .btn-sol { position: relative; overflow: hidden; animation: latido 2.6s ease-in-out infinite; }
@keyframes latido { 0%,100% { box-shadow: 0 8px 22px rgba(232,161,61,.38); } 50% { box-shadow: 0 8px 34px rgba(232,161,61,.65); } }
.btn-sol::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -30%; width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); animation: brillo 3.4s ease-in-out infinite;
}
@keyframes brillo { 0%, 55% { left: -40%; } 100% { left: 130%; } }

.marquee {
  background: var(--sol); color: #221503; overflow: hidden; white-space: nowrap;
  transform: rotate(-1deg); margin-inline: -8px; border-block: 3px solid #B97A1C;
  font-weight: 800; font-size: 15px; letter-spacing: .04em; padding: 10px 0;
  pointer-events: none; user-select: none; contain: paint;
}
.marquee-pista { display: inline-block; will-change: transform; animation: marquear 30s linear infinite; }
.marquee-pista span { padding-right: 8px; }
@keyframes marquear { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.rio-divisor { line-height: 0; background: var(--crema); }
.rio-divisor svg { width: 100%; height: 46px; display: block; }
.ola path { animation: olear 7s ease-in-out infinite alternate; }
.ola-2 path { animation-duration: 5.2s; animation-delay: -2s; }
@keyframes olear { from { transform: translateX(0); } to { transform: translateX(-46px); } }

.tilt { transition: transform .18s ease, box-shadow .2s ease; will-change: transform; }
.act-icono svg { display: block; }
.actividad:hover .act-icono { animation: brinquito .5s ease; }
@keyframes brinquito { 30% { transform: translateY(-7px) rotate(-4deg); } 60% { transform: translateY(0) rotate(2deg); } }

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(10,22,17,.92);
  display: flex; align-items: center; justify-content: center; padding: 4vw; cursor: zoom-out;
  animation: entra .25s ease;
}
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.lb-cerrar {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 19px; cursor: pointer;
}

.cta-movil {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 80;
  background: rgba(14,59,46,.97); color: #fff; border-radius: 16px;
  padding: 12px 14px; display: none; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35); transform: translateY(120%); transition: transform .3s ease;
}
.cta-movil.visible { transform: none; }
.cta-movil b { display: block; font-size: 14.5px; }
.cta-movil span { font-size: 12px; color: rgba(255,255,255,.7); }
.cta-movil .btn { padding: 11px 16px; font-size: 14px; white-space: nowrap; }
@media (max-width: 860px) { .cta-movil { display: flex; } }

.auto-espacio {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1.6px dashed var(--sol-osc); background: #FFFBF2; border-radius: 14px;
  padding: 14px 16px; margin-top: 14px;
}
.auto-espacio b { display: block; font-size: 15.5px; }
.auto-espacio span { font-size: 13.5px; color: var(--gris); }

@media (prefers-reduced-motion: reduce) {
  .hero, .hero.con-foto::before, .btn-sol::after, .marquee-pista, .ola path, .hero-cta .btn-sol { animation: none !important; }
}

/* Hotfix v2.1.1: [hidden] debe ganar al display:flex del lightbox */
.lightbox[hidden] { display: none !important; }


/* ============================================================
   Hotfix v2.1.2 · Estabilidad de scroll en móvil
   - overflow-x oculto: nada puede empujar la página a lo ancho
     (Chrome Android "aleja" la vista cuando hay desborde lateral)
   - touch-action manipulation: elimina el zoom por doble-tap
     accidental al deslizar (mantiene el pellizco para zoom)
   ============================================================ */
html, body { overflow-x: hidden; max-width: 100%; }
html { touch-action: manipulation; }
.banda-item b[data-contador] { display: inline-block; min-width: 2.4ch; text-align: center; font-variant-numeric: tabular-nums; }

/* ============================================================
   v2.2 · Flyers de atracciones, pie de actividad y botón FB
   ============================================================ */
.act-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.act-desde { font-weight: 800; font-size: 14px; color: var(--sol-osc); background: #FFF4E0; border-radius: 999px; padding: 5px 11px; }
.act-flyer {
  font-size: 13px; font-weight: 700; text-decoration: none; color: var(--selva);
  border: 1.6px solid var(--selva); border-radius: 999px; padding: 6px 12px;
  transition: background .15s, color .15s;
}
.act-flyer:hover { background: var(--selva); color: #ffffff !important; }

.flyers { columns: 3 260px; column-gap: 14px; }
.flyer { display: block; margin: 0 0 14px; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra-suave); break-inside: avoid; }
.flyer img { width: 100%; display: block; transition: transform .3s ease; }
.flyer:hover img { transform: scale(1.03); }

.nav-fb { display: inline-flex; align-items: center; color: rgba(255,255,255,.85); }
.nav-fb:hover { color: #fff; }

.btn-fb-flot {
  position: fixed; right: 18px; bottom: 84px; z-index: 70; width: 56px; height: 56px; border-radius: 50%;
  background: #1877F2; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.28); color: #ffffff !important;
}
.btn-fb-flot svg { width: 30px; height: 30px; }
@media (max-width: 860px) { .btn-fb-flot { bottom: 158px; } .btn-wa { bottom: 92px; } }