/* === THEME TOKENS ======================================================= */
:root{
  /* Dark (default) */
  --bg:#0f1221;
  --surface:#14182b; --surface-2:#0b0e1a;
  --text:#e6e6f1; --muted:#aab0c0;
  --primary:#6ee7b7; --primary-ink:#0c2b22;
  --secondary:#3b82f6; --accent:#f59e0b;

  --field-bg:#0d1230; --field-text:#e8ecff;
  --field-border:#22305b; --field-placeholder:#9aa5c7;

  --container:1140px; --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.28);
}

/* Light overrides */
:root[data-theme="light"]{
  --bg:#ffffff;
  --surface:#f7f8fb; --surface-2:#eef1f7;
  --text:#12141a; --muted:#5b6270;
  --primary:#1f7a65; --primary-ink:#ffffff;
  --secondary:#1f4db8; --accent:#b45309;

  --field-bg:#f1f3f7; --field-text:#111827;
  --field-border:#d0d7e2; --field-placeholder:#6b7280;
}

/* === BASE =============================================================== */
html{ scroll-behavior:smooth; }
*{box-sizing:border-box}
html, body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--secondary);text-decoration:none}
a:hover{text-decoration:none}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.section h2{font-family:"Playfair Display",serif;font-size:clamp(1.6rem,3vw,2.2rem);margin:0}

.btn{display:inline-flex;gap:8px;align-items:center;border:0;border-radius:999px;padding:12px 18px;font-weight:600;cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:var(--primary-ink)}
.btn-secondary{background:#313a5a;color:#fff}
.btn-light{background:#fff;color:#111}
.link{opacity:.9}
.list-unstyled{list-style:none;margin:0;padding:0}
.list-inline{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.check{list-style:none;padding-left:0}
.check li{position:relative;margin:.35rem 0;padding-left:26px}
.check li::before{content:"✓";position:absolute;left:0;top:0.1rem;color:var(--primary)}

/* === HEADER ============================================================= */
.logo{height:75px;width:auto;display:inline-block;vertical-align:middle}
.logo-light{display:none}
:root[data-theme="light"] .logo-dark{display:none}
:root[data-theme="light"] .logo-light{display:inline-block}

.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(6px);background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), transparent)}
.site-header.scrolled{background:color-mix(in srgb, var(--bg) 95%, transparent)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.main-nav{display:flex;gap:20px}
.main-nav a{color:color-mix(in srgb, var(--text) 85%, transparent);font-weight:600}
.header-cta{display:flex;gap:10px;align-items:center}
.hamb{display:none;background:none;border:0;cursor:pointer;padding:6px;margin-left:8px}
.hamb span{display:block;width:24px;height:2px;background:#fff;margin:6px 0;border-radius:2px;transition:transform .2s ease, opacity .2s ease}
:root[data-theme="light"] .brand,
:root[data-theme="light"] .main-nav a{color:#0f172a}
:root[data-theme="light"] .hamb span{background:#0f172a}

/* Animación a “X” */
.hamb.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamb.open span:nth-child(2){opacity:0}
.hamb.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Backdrop (mobile) */
.nav-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease;
  z-index:49;
}

/* === NAV MOBILE (OFF-CANVAS) =========================================== */
@media (max-width:900px){
  body,.kb-hero,.section,.search-bar{touch-action:pan-y}

  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(320px,80vw);
    background:var(--bg);
    border-left:1px solid color-mix(in srgb, var(--bg) 70%, #fff 30%);
    display:flex; flex-direction:column; gap:0; padding:80px 20px 20px;
    transform:translate3d(100%,0,0);
    transition:transform .25s ease;
    z-index:50;
    /* cerrado = oculto, sin eventos, sin sombra (no genera overflow) */
    visibility:hidden; pointer-events:none; box-shadow:none; will-change:transform;
  }
  :root[data-theme="light"] .main-nav{background:#ffffff;border-left:1px solid #e5e7ef}

  .main-nav a{padding:14px 8px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:600}
  :root[data-theme="light"] .main-nav a{color:#0f172a}

  /* abierto */
  .main-nav.open{
    transform:translate3d(0,0,0);
    visibility:visible; pointer-events:auto; box-shadow:-24px 0 60px rgba(0,0,0,.35);
  }
  .nav-backdrop.show{opacity:1;visibility:visible}

  body.nav-open .header-cta{display:none}
  .hamb{display:block}
}

/* Botón cerrar dentro del panel (mobile) */
.nav-close{
  display:none; position:absolute; top:16px; right:16px;
  width:38px; height:38px; border-radius:999px; border:0;
  background:rgba(255,255,255,.1); color:#fff; font-size:24px; line-height:1;
  cursor:pointer; transition:background .2s ease, transform .15s ease;
}
.nav-close:hover{background:rgba(255,255,255,.18); transform:translateY(-1px)}
:root[data-theme="light"] .nav-close{background:#eef2f7;color:#0f172a;border:1px solid #e5e7ef}
:root[data-theme="light"] .nav-close:hover{background:#e9eef5}
@media (max-width:900px){ .nav-close{display:inline-grid; place-items:center} }

/* Evitar scroll del body al abrir menú (fallback si el JS falla) */
body.nav-open{overflow:hidden}

/* === HERO KEN BURNS ===================================================== */
.kb-hero{position:relative;height:68vh;overflow:hidden;isolation:isolate}
.kb-slides{position:relative;height:100%}
.kb-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease;will-change:opacity,transform}
.kb-slide.is-active{opacity:1}
.kb-slide img{
  position:absolute;inset:0;margin:auto;
  width:110%;height:110%;object-fit:cover;transform-origin:center;
  filter:brightness(.9);
}
:root[data-theme="light"] .kb-slide img{filter:brightness(.96)}
.kb-caption{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  width:min(920px,92%);text-align:center;padding:12px 16px;color:#fff;
}
.kb-caption::before{
  content:"";position:absolute;inset:-10px -14px;z-index:-1;
  background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:20px;
}
.kb-caption h1{font-family:"Playfair Display",serif;font-weight:700;font-size:clamp(1.8rem,4vw,3rem);margin:.2rem 0;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.45)}
.kb-caption p{margin:.2rem 0 1rem;color:#f3f6ff;text-shadow:0 3px 12px rgba(0,0,0,.35)}

@keyframes kb-zoom-center   { from {transform:scale(1)} to {transform:scale(1.12)} }
@keyframes kb-pan-right-in  { from {transform:scale(1) translateX(-2%)} to {transform:scale(1.12) translateX(2%)} }
@keyframes kb-pan-left-out  { from {transform:scale(1.12) translateX(2%)} to {transform:scale(1) translateX(-2%)} }

.kb-slide[data-anim="zoom-center"].is-active img      { animation: kb-zoom-center var(--kb-dur,10s) linear forwards }
.kb-slide[data-anim="pan-right-zoom-in"].is-active img{ animation: kb-pan-right-in var(--kb-dur,10s) linear forwards }
.kb-slide[data-anim="pan-left-zoom-out"].is-active img{ animation: kb-pan-left-out var(--kb-dur,10s) linear forwards }

@media (prefers-reduced-motion: reduce){
  .kb-slide img{animation:none !important; transform:none}
}

/* Quitamos separadores/fades antiguos si quedaba algo */
.shape-sep{display:none!important}

/* === SEARCH BAR ========================================================= */
.search-bar{padding:18px 0;background:linear-gradient(180deg, var(--surface), var(--surface-2))}
.search-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.search-grid input,.search-grid select{
  background:var(--field-bg);color:var(--field-text);
  border:1px solid var(--field-border);border-radius:10px;padding:10px 12px
}
.search-grid input::placeholder{color:var(--field-placeholder)}
.search-grid .btn{grid-column:span 1}
@media (max-width:900px){ .search-grid{grid-template-columns:repeat(2,1fr)} }

/* === CARDS ============================================================== */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1000px){ .cards-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards-grid{grid-template-columns:1fr} }

.card{background:linear-gradient(180deg,#0f152f,#0c122a);border:1px solid #202a55;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
:root[data-theme="light"] .card{background:#fff;border:1px solid #e5e7ef}
.card-media{aspect-ratio:16/10;position:relative;overflow:hidden}
.badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;padding:6px 10px;border-radius:999px;font-size:.8rem}
:root[data-theme="light"] .badge{background:rgba(0,0,0,.35)}
.card-body{padding:14px}
.card-title{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.card-title h3{margin:0;font-size:1.05rem}
.price{font-weight:700;color:var(--text)}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:#c6cae0;font-size:.9rem;margin-top:8px}
:root[data-theme="light"] .meta{color:#475569}

/* === STRIP / VALOR ====================================================== */
.strip{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.strip h3{margin:.2rem 0 .4rem}
.strip p{color:var(--muted)}
@media (max-width:900px){ .strip-grid{grid-template-columns:1fr} }

/* === TWO COLUMNS ======================================================== */
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.media-card{border-radius:var(--radius);overflow:hidden;border:1px solid #242c55;box-shadow:var(--shadow)}
:root[data-theme="light"] .media-card{border:1px solid #e5e7ef}
.section .media-card img{height:100%;width:100%;object-fit:cover}
@media (max-width:900px){ .two-col{grid-template-columns:1fr} }

/* === CTA ================================================================ */
.cta{position:relative;padding:80px 0;background:
  radial-gradient(1200px 600px at 50% -200px, #3957a7, transparent 65%),
  linear-gradient(180deg, #15204d, #0f152f)}
:root[data-theme="light"] .cta{
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(26,86,219,.15), transparent 65%),
    linear-gradient(180deg, #e9eef7, #dde6f4);
}
.cta-inner{display:grid;place-items:center;text-align:center}
.cta h2{font-family:"Playfair Display",serif;margin:.2rem 0;color:var(--text)}
:root[data-theme="light"] .cta h2{color:#0f172a}
.cta p{opacity:.9;color:var(--text)}
:root[data-theme="light"] .cta p{color:#1f2937}

/* === CONTACTO =========================================================== */
.contact-form{display:grid;gap:10px}
.contact-form input,.contact-form textarea{
  background:var(--field-bg);color:var(--field-text);
  border:1px solid var(--field-border);border-radius:10px;padding:10px 12px
}
:root[data-theme="light"] .contact-form textarea,
:root[data-theme="light"] .contact-form input{background:#f5f7fb}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--field-placeholder)}

/* === FOOTER ============================================================= */
.site-footer {
  background: #0b0f20;
  border-top: 1px solid #1b244b;
  margin-top: 40px;
}

:root[data-theme="light"] .site-footer {
  background: #0f172a;
  color: #e5e7eb;
  border-top: 1px solid #1e293b;
}

.grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 18px;
  padding: 40px 0;
}

.footer-bottom {
  border-top: 1px solid #1b244b;
  padding: 12px 0;
  color: #aeb6d3;
}

:root[data-theme="light"] .footer-bottom {
  border-top: 1px solid #243043;
  color: #cbd5e1;
}

@media (max-width: 900px) {
  .grid-3 {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.socials {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Footer: centrar fila de redes */
.site-footer .socials{ justify-content:center; }

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #1b244b;
  color: #ffffff;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}

.social-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
}

.social-btn svg {
  width: 20px;
  height: 20px;
  display: block; /* Asegura que el SVG se comporte como bloque */
}
:root[data-theme="light"] .social-btn {
  background: #ffffff;
  border: 1px solid #e5e7ef;
  color: #0f172a;
}

:root[data-theme="light"] .social-btn:hover {
  background: #f8fafc;
}

/* Hereda colores del tema global (claro/oscuro). Solo layout del single */
.wrap{max-width:1200px;margin:0 auto;padding:24px}
.breadcrumb{font-size:.9rem;color:var(--muted);margin:8px 0 16px}
.layout{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}
@media (max-width:980px){.layout{grid-template-columns:1fr;gap:20px}}

.media{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.slider{position:relative;overflow:hidden;border-radius:10px}
.slides{display:flex;gap:8px;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth}
.slides::-webkit-scrollbar{height:8px}
.slides::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.slide{flex:0 0 100%;position:relative;scroll-snap-align:center;background:#000;min-height:360px;display:flex;align-items:center;justify-content:center}
.slide img,.slide iframe{width:100%;height:100%;object-fit:cover;border:0}
.thumbs{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.thumb{border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:#000;aspect-ratio:4/3;display:flex}
.thumb img{width:100%;height:100%;object-fit:cover}
.navBtn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(17,24,39,.55);border:0;color:#fff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.navBtn:hover{background:rgba(17,24,39,.85)}
.navPrev{left:8px}.navNext{right:8px}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:50}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;object-fit:contain}
.lightbox .close{position:absolute;top:16px;right:16px;background:transparent;border:0;color:#fff;font-size:28px;cursor:pointer}

.side{display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.titleRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.titleRow h1{font-size:1.45rem;margin:0}
.op{font-size:.85rem;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.price{font-weight:700;font-size:1.25rem}
.loc{color:var(--muted);display:flex;align-items:center;gap:8px}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:981px){.features{grid-template-columns:repeat(2,1fr)}}
.feat{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.feat svg{flex:0 0 20px}
.desc{line-height:1.7}
.desc :is(p,ul,ol,h1,h2,h3){margin:0 0 .7em}
.cta{display:flex;gap:10px}
.btn{padding:.8rem 1rem;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.btn-primary{background:var(--accent);border-color:transparent;color:#04131f;font-weight:600}
/* Overlay del menú mobile */
[data-nav-backdrop]{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 70; /* por encima del contenido, por debajo del panel/nav si hace falta */
}
[data-nav-backdrop].show{
  opacity: 1;
  visibility: visible;
}
/* Accesibilidad en títulos ocultos */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* WhatsApp */
.whatsapp-float{
  position:fixed;bottom:16px;right:16px;z-index:9999;
  /* respeta safe-area en iPhone */
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* Botón flotante centrado y “premium” */
.whatsapp-button{
  --wa-size: 60px;
  --wa: #25D366;
  --wa-dark:#1ebe57;

  width: var(--wa-size);
  height: var(--wa-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  background: var(--wa);
  color: #fff;
  /* centrado real del SVG */
  display: grid;
  place-items: center;
  /* evita que el texto o line-height empuje el SVG */
  font-size: 0;
  line-height: 0;

  box-shadow:
    0 8px 22px rgba(0,0,0,.25),
    inset 0 0 0 2px rgba(255,255,255,.18);
  cursor: pointer;
  outline: 0;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* El SVG ocupa un % del círculo y NO se desplaza */
.whatsapp-button svg{
  width: 60%;
  height: 60%;
  display: block;   /* elimina espacios fantasma inline */
  fill: currentColor;
}

/* Interacciones */
.whatsapp-button:hover{
  background: var(--wa-dark);
  transform: translateY(-1px) scale(1.03);
}
.whatsapp-button:active{
  transform: translateY(1px) scale(.98);
}
.whatsapp-button:focus-visible{
  box-shadow:
    0 0 0 4px rgba(37,211,102,.28),
    0 8px 22px rgba(0,0,0,.25),
    inset 0 0 0 2px rgba(255,255,255,.18);
  outline: none;
}

/* Panel */
.whatsapp-panel{
  position:absolute;bottom:72px;right:0;width:300px;max-width:85vw;
  background:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);
  display:none;flex-direction:column;padding:12px;gap:10px;
}
.whatsapp-panel[aria-hidden="false"]{display:flex}

/* Tarjeta de operador */
.whatsapp-operator{
  display:flex;align-items:center;gap:10px;
  border:1px solid #eee;border-left:4px solid #25D366;
  padding:10px;border-radius:8px;transition:background .15s ease-in-out;
}
.whatsapp-operator:hover{background:#f9f9f9}
.whatsapp-operator img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.whatsapp-operator .wp-link{
  text-decoration:none;color:#111;font-weight:600;display:inline-block;line-height:1.2;
  cursor:pointer;
}
.whatsapp-operator .wp-link:hover{ text-decoration: underline; }
.whatsapp-operator small{display:block;color:#444;font-weight:500;font-size:.92em}

/* Cierre */
.wp-close{
  position:absolute;top:6px;right:6px;border:none;background:transparent;
  font-size:22px;line-height:1;width:32px;height:32px;border-radius:6px;cursor:pointer;color:#555;
}
.wp-close:hover{background:#f2f2f2}

/* Backdrop */
.whatsapp-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.2);
}

/* Tema oscuro (si usás toggle dark) */
:root.dark .whatsapp-panel{background:#111;color:#eee;border:1px solid #222}
:root.dark .whatsapp-operator{border-color:#222}
:root.dark .whatsapp-operator:hover{background:#181818}
:root.dark .whatsapp-operator .wp-link{color:#fff}
:root.dark .wp-close{color:#bbb}

/* Orden de apilado para que el panel quede arriba del backdrop */
.whatsapp-float{ z-index: 9999; }
.whatsapp-panel{ position: absolute; bottom: 72px; right: 0; z-index: 3; }
.whatsapp-button{ z-index: 4; } /* el botón siempre por encima */
.whatsapp-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.2); z-index: 2; }

/* Mobile: un poquito más chico */
@media (max-width: 480px){
  .whatsapp-float{ right: 12px; bottom: 12px; }
  .whatsapp-button{ --wa-size: 56px; }
}

/* Accesibilidad: respeta reduced motion */
@media (prefers-reduced-motion: reduce){
  .whatsapp-button{ transition: none; }
}
.kb-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.kb-slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.kb-slides { position: relative; }