/* ====================== Paintball Rural Leticia — Tema Abstracto ====================== */
/* Paleta: naranja + verde militar + azul + blanco                                       */

:root{
  --orange:#ff7a1a;
  --blue:#38a3ff;
  --military:#2f4f3a;
  --bg:#0f1613;
  --fg:#f7f9fc;
  --muted:#c6d1da;
  --card:#141c17;
  --stroke:#1f2a22;
  --shadow:0 18px 54px rgba(0,0,0,.38);

  /* Proporciones de imágenes */
  --svc-media-ratio: 4 / 3;      /* Servicios */
  --extras-media-ratio: 4 / 3;   /* “Además, aquí encontrarás” */
}

/* ===== Base ===== */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  max-width:100%; overflow-x:hidden;
}
img,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* No cortar palabras extrañamente en títulos/botones */
h1,h2,p,.btn,.cta{word-break:normal;overflow-wrap:break-word}

/* ===== Fondo abstracto ===== */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; opacity:.35; pointer-events:none;
  background:
    conic-gradient(from 210deg at 85% 15%, rgba(255,122,26,.35), rgba(255,122,26,0) 40%),
    conic-gradient(from -20deg at 10% 30%, rgba(56,163,255,.30), rgba(56,163,255,0) 42%),
    radial-gradient(1000px 600px at 70% 85%, rgba(47,79,58,.55), transparent 60%),
    radial-gradient(800px 480px at 0% 100%, rgba(47,79,58,.45), transparent 60%);
}
body::after{
  content:""; position:fixed; right:-12vw; top:-8vh; width:60vw; height:60vh; z-index:-1;
  filter:blur(18px); opacity:.25; pointer-events:none;
  background:
    radial-gradient(circle at 35% 40%, var(--orange), transparent 55%),
    radial-gradient(circle at 70% 60%, var(--blue), transparent 55%),
    radial-gradient(80% 60% at 50% 50%, rgba(255,255,255,.08), transparent 60%);
  clip-path: path("M 0.2 0.5 C 0.15 0.1, 0.55 0.05, 0.7 0.25 C 0.9 0.45, 0.85 0.8, 0.55 0.9 C 0.35 0.95, 0.25 0.9, 0.2 0.5 Z");
}

/* ================= Header ================= */
header{
  position:sticky; top:0; z-index:40; background:rgba(15,22,19,.78);
  backdrop-filter:blur(10px) saturate(140%); border-bottom:1px solid var(--stroke);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px; min-width:0}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.brand span{white-space:nowrap}
.nav .cta{flex:0 0 auto; white-space:nowrap; padding:10px 14px; font-size:14px; border-radius:12px}

@media (max-width:480px){
  .brand img{width:36px;height:36px}
  .nav .cta{padding:8px 12px; font-size:13.5px}
}

/* ================= Botones ================= */
.cta,.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:14px;
  border:1px solid var(--orange);
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(56,163,255,.12));
  font-weight:800; transition:transform .15s ease, box-shadow .2s ease;
}
.cta:hover,.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pill{display:flex;gap:12px;flex-wrap:wrap}
.small{color:var(--muted);font-size:12px}

/* ================= Hero ================= */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .bg{
  position:absolute;inset:0;z-index:-3;opacity:.26;
  background:
    conic-gradient(from 210deg at 80% 20%, rgba(255,122,26,.30), rgba(255,122,26,0) 40%),
    conic-gradient(from -20deg at 15% 25%, rgba(56,163,255,.28), rgba(56,163,255,0) 42%),
    radial-gradient(700px 420px at 70% 80%, rgba(47,79,58,.55), transparent 60%),
    radial-gradient(520px 300px at 10% 100%, rgba(47,79,58,.45), transparent 60%);
}
.hero-inner{
  padding:80px 0 52px;
  display:grid; max-width:1100px; margin:0 auto;
  grid-template-columns:minmax(320px,560px) minmax(260px,430px);
  justify-content:center; align-items:center; gap:32px;
}
.hero h1{font-size:clamp(30px,4.8vw,56px);line-height:1.05;margin:0 0 10px;color:var(--orange)}
.hero p.lead{color:var(--muted);font-size:clamp(15px,1.6vw,18px);margin:0 0 18px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 24px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);background:rgba(20,28,23,.74)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#66d38e}
.hero-card{border:1px solid var(--stroke);background:var(--card);border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.media{width:clamp(260px,32vw,430px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;margin:0 auto;background:#000;border:1px solid var(--stroke);box-shadow:0 12px 32px rgba(0,0,0,.35);max-height:80vh}
.media>video,.media>iframe{width:100%;height:100%;border:0;object-fit:contain}

@media (max-width:640px){
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:16px}
  .badges,.pill{justify-content:center}
}

/* ================= Secciones ================= */
section{padding:60px 0;border-top:1px solid var(--stroke)}
h2.sec{font-size:clamp(22px,3.2vw,32px);margin:0 0 16px;color:#fff}
p.sec-lead{margin:0 0 26px;color:var(--muted)}

/* ================= Servicios ================= */
#servicios .sec{
  text-align:center; color:var(--orange);
  font-size:clamp(26px,3.6vw,36px); font-weight:900; letter-spacing:.2px;
  margin:0 auto 10px;
}
#servicios .sec::after{
  content:""; display:block; width:140px; height:6px; margin:8px auto 0;
  border-radius:999px; background:linear-gradient(90deg, var(--orange), var(--blue));
  box-shadow:0 6px 18px rgba(255,122,26,.35);
}
#servicios .sec-lead{ text-align:center; max-width:720px; margin:0 auto 26px; color:var(--muted) }

.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:960px){ .svc-grid{grid-template-columns:1fr} }

.svc-card{
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),#0e1712);
  border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column; padding-bottom:6px;
}
.svc-media{position:relative; aspect-ratio:var(--svc-media-ratio); overflow:hidden; background:#0b0f0c}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.svc-card:hover .svc-media img{transform:scale(1.04)}
.svc-tag{position:absolute; left:10px; top:10px; font-size:12px; padding:6px 10px; border-radius:999px; color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18)}
.svc-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px}
.svc-body h3{margin:0;font-weight:800;font-size:1.1rem}
.svc-body p{margin:0;color:var(--muted)}
.price-badge{display:block;margin:10px auto 0;text-align:center;color:var(--orange);font-weight:900}
.svc-cta{margin-top:14px;display:flex;justify-content:center}
.svc-cta .btn{min-width:150px;justify-content:center}

/* ================= Reconocimiento (video vertical) ================= */
#reconocimiento{position:relative; isolation:isolate; overflow:hidden; padding-bottom:32px; border-bottom:1px solid var(--stroke); margin-bottom:24px}
.reco-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
@media (max-width:900px){ .reco-grid{grid-template-columns:1fr;gap:18px} }
.reco-media{position:relative}
.reco-media .glow{
  position:absolute; inset:-20px -18px -24px -18px; z-index:0; filter:blur(18px); opacity:.45;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(255,122,26,.45), transparent 60%),
    radial-gradient(60% 80% at 80% 60%, rgba(56,163,255,.35), transparent 60%),
    radial-gradient(80% 70% at 50% 90%, rgba(47,79,58,.55), transparent 60%);
  border-radius:22px;
}
.media-tall{width:min(90vw,420px); aspect-ratio:9/16; margin:0 auto; border-radius:18px; overflow:hidden; background:#000; border:1px solid var(--stroke); box-shadow:0 14px 36px rgba(0,0,0,.42); max-height:84vh}
.media-tall>video,.media-tall>iframe{width:100%;height:100%;border:0;object-fit:contain}
.reco-copy h2{margin:0 0 8px}
.reco-copy p.lead{color:var(--muted);margin:0 0 14px}
.reco-bullets{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.reco-bullets li{display:flex;align-items:center;gap:10px;color:var(--fg)}
.reco-badge{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;background:linear-gradient(135deg,rgba(255,122,26,.25),rgba(56,163,255,.25));border:1px solid var(--stroke)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 6px}
.cta-primary{border-color:var(--orange);background:linear-gradient(135deg,rgba(255,122,26,.22),rgba(56,163,255,.16))}
.note{color:var(--muted);font-size:12px;margin-top:2px}
.socials{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.socials .label{color:var(--muted);font-size:12px;margin-right:6px}
.socials a{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--stroke);background:linear-gradient(180deg,var(--card),#0e1712);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.socials a:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.socials svg{width:18px;height:18px;fill:#fff;opacity:.9}

/* ================= Ubicación + Horarios (unificados) ================= */
#ubicacion-horarios{position:relative; isolation:isolate; overflow:hidden}
.lh-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start}
#ubicacion-horarios .sec{word-break:normal; overflow-wrap:break-word}
#ubicacion-horarios .map-embed{width:100%; height:420px; border:0; border-radius:12px}
.lh-right .hours-status{margin-bottom:10px}
.lh-right .hours-grid{margin-top:0}

@media (max-width:980px){
  .lh-grid{grid-template-columns:1fr; gap:18px}
  #ubicacion-horarios .map-embed{height:320px}
}

/* ================= Horarios (cards) ================= */
.hours-wrap{max-width:1100px;margin:0 auto}
.hours-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
@media (max-width:700px){.hours-head{flex-direction:column;align-items:flex-start}}
.hours-status{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--stroke);background:linear-gradient(180deg,var(--card),#0e1712);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.dot{width:10px;height:10px;border-radius:50%}
.dot.ok{background:#29d07a;box-shadow:0 0 10px rgba(41,208,122,.6)}
.dot.warn{background:#ffb703;box-shadow:0 0 10px rgba(255,183,3,.6)}
.dot.off{background:#ef476f;box-shadow:0 0 10px rgba(239,71,111,.6)}
.hours-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:900px){.hours-grid{grid-template-columns:1fr}}
.h-card{border:1px solid var(--stroke);background:linear-gradient(180deg,var(--card),#0e1712);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.h-card h3{margin:0 0 6px;font-weight:900}
.h-sub{color:var(--muted);margin:0 0 12px}
.h-time{font-weight:900;font-size:18px}
.h-note{color:var(--muted);font-size:12px;margin-top:6px}
.h-cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.h-cta .btn{padding:10px 14px;border-radius:12px}

/* ================= “Además, aquí encontrarás” ================= */
#extras{grid-column:1 / -1; width:100%}
#extras .sec-accent{
  text-align:center; font-size:clamp(24px,3.6vw,36px); color:#fff; font-weight:900; position:relative;
}
#extras .sec-accent::after{
  content:""; display:block; width:140px; height:4px; margin:8px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--blue)); opacity:.95;
}
.extras-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); align-items:stretch}
.extra-card{border:1px solid var(--stroke); background:linear-gradient(180deg,var(--card),#0e1712); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; min-height:100%}
.extra-media{position:relative; aspect-ratio:var(--extras-media-ratio); overflow:hidden; background:#0b0f0c}
.extra-media img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.extra-card:hover .extra-media img{transform:scale(1.04)}
.extra-body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px}
.extra-body h3{margin:0; font-weight:800}
.extra-body p{margin:0; color:var(--muted)}
.extra-body .btn{align-self:center; margin-top:auto}
.btn-blue{border-color:var(--blue); background:linear-gradient(135deg, rgba(56,163,255,.16), rgba(255,122,26,.10))}

@media (min-width:1200px){ .extras-grid{ grid-template-columns:repeat(4, minmax(240px,1fr)) } }
@media (min-width:900px) and (max-width:1199px){ .extras-grid{ grid-template-columns:repeat(3, minmax(240px,1fr)) } }
@media (min-width:600px) and (max-width:899px){ .extras-grid{ grid-template-columns:repeat(2, minmax(240px,1fr)) } }

/* ================= Footer ================= */
footer{border-top:1px solid var(--stroke);padding:40px 0;color:var(--muted)}
.footgrid{display:grid;grid-template-columns:1fr;gap:16px}
footer .brand{display:flex;align-items:center;gap:10px}
footer .brand img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px}

/* ================= Botón flotante “mancha” Contacto ================= */
/* Si aún tienes el flotante antiguo, ocúltalo: */
.whatsapp-float{ display:none !important; }

.contact-splat{
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px; border: 0; cursor: pointer; user-select: none;
  color: #ffffff; font-weight: 900; font-size: 14px; letter-spacing: .2px;
  border-radius: 18px;
  background:
    radial-gradient(18px 18px at 14% 40%, rgba(255,122,26,.9), transparent 60%),
    radial-gradient(22px 22px at 80% 30%, rgba(56,163,255,.85), transparent 60%),
    radial-gradient(16px 16px at 60% 75%, rgba(47,79,58,.85), transparent 60%),
    linear-gradient(135deg, rgba(255,122,26,.22), rgba(56,163,255,.18));
  box-shadow: 0 12px 26px rgba(12, 12, 12, 0.36), inset 0 0 12px rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.contact-splat .icon{ width:18px; height:18px; opacity:.95 }
.contact-splat .label{ text-shadow:0 1px 0 rgba(255, 255, 255, 0.25) }
.contact-splat:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(255, 255, 255, 0.42) }
@media (max-width:480px){ .contact-splat{ padding:10px 12px; font-size:13px } .contact-splat .label{ display:none } }

/* ================= Modal de contacto (bonito) ================= */
.contact-modal[hidden]{ display:none !important; }
.contact-modal{ position:fixed; inset:0; z-index:9998; display:grid; place-items:center }
.contact-backdrop{ position:absolute; inset:0; background:rgba(0, 0, 0, 0.6); backdrop-filter:blur(2px); animation:fadeIn .22s ease both }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.contact-panel{
  position:relative; z-index:1;
  width:min(92vw, 620px);
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, rgba(255,122,26,.45), rgba(56,163,255,.45)) border-box;
  border:1px solid transparent; border-radius:16px;
  box-shadow:var(--shadow); padding:18px;
  transform:translateY(12px); opacity:0; transition:transform .22s ease, opacity .22s ease;
}
.contact-modal.open .contact-panel{ transform:translateY(0); opacity:1 }

.contact-close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--stroke); background:rgba(83, 83, 83, 0.7);
  color:#0e0d0d; font-size:18px; cursor:pointer;
}
.contact-panel h3{
  margin:0 0 8px; color:#fff;
  font-size:clamp(18px, 2.2vw, 22px); font-weight:900; letter-spacing:.2px;
}
.contact-panel h3::after{
  content:""; display:block; width:160px; height:4px; margin:8px 0 6px;
  border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--blue));
  box-shadow:0 6px 14px rgba(255,122,26,.35);
}
.contact-desc{ color:var(--muted); margin:0 0 12px; line-height:1.4 }
.contact-label{ display:block; font-size:13px; color:var(--muted); margin:10px 0 6px }
.contact-input,.contact-textarea{
  width:100%; color:var(--fg); line-height:1.35;
  background:rgba(39, 39, 39, 0.8);
  border:1px solid var(--stroke); border-radius:12px;
  padding:12px 14px; outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.contact-input::placeholder{ color:rgba(198,209,218,.75) }
.contact-input:focus,.contact-textarea:focus{ border-color:rgba(255,122,26,.6); box-shadow:0 0 0 3px rgba(255,122,26,.18) }
.contact-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px }
.contact-actions .btn{ padding:10px 16px; border-radius:12px }
#sendWhatsApp.cta-primary{ border-color:#25D366; background:linear-gradient(135deg, rgba(37,211,102,.25), rgba(255,122,26,.18)) }
#sendWhatsApp.cta-primary::before{ content:"📲"; margin-right:8px }
.contact-note{ color:var(--muted); font-size:12px; margin-top:6px }
/* Texto blanco solo dentro del modal */
.contact-actions .btn{ color:#fff !important; }
#sendWhatsApp{ color:#fff !important; }     /* “Abrir WhatsApp” */

/* ================= Ajustes móviles finos ================= */
@media (max-width:480px){
  .container{padding-inline:16px}
  .hero-inner{padding:56px 0 36px;gap:14px}
  .hero h1{font-size:clamp(24px,8vw,34px)}
  .hero p.lead{font-size:14.5px}
  .cta,.btn{padding:10px 14px;border-radius:12px}
  .badge{padding:6px 10px}
  .media{width:min(78vw,360px)}
}
/* Ocultar en JS cuando no aplique */
.hidden{ display:none !important; }

/* Botón "Llamar" con acento azul */
.phone-btn{
  border-color: var(--blue);
  background: linear-gradient(135deg, rgba(56,163,255,.20), rgba(255,122,26,.10));
}
.phone-btn::before{ content:"📞"; margin-right:8px; }
/* Aísla la sección y asegura que nada le flote por encima */
#reconocimiento{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* La caja del video y el brillo */
.reco-media{
  position: relative;
}

/* El brillo NUNCA debe interceptar clics */
.reco-media .glow{
  position: absolute;
  inset: -20px -18px -24px -18px;
  z-index: 0;                 /* por debajo del video */
  pointer-events: none;       /* no toca eventos */
  filter: blur(18px);
  opacity: .45;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(255,122,26,.45), transparent 60%),
    radial-gradient(60% 80% at 80% 60%, rgba(56,163,255,.35), transparent 60%),
    radial-gradient(80% 70% at 50% 90%, rgba(47,79,58,.55), transparent 60%);
  border-radius: 22px;
}

/* La tarjeta del video siempre por encima */
.media-tall{
  position: relative;
  z-index: 1;
  width: min(90vw, 420px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--stroke);
  box-shadow: 0 14px 36px rgba(0,0,0,.42);
  max-height: 84vh;
}

/* Garantiza que el propio <video> reciba los clics */
.media-tall > video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: auto;
}
/* WRAPPER opcional si quieres */
.widget-center{
  display:flex;
  justify-content:center;   /* centra horizontal */
  align-items:center;       /* ya lo tienes centrado vertical */
  padding:8px 0;
  text-align:center;
}

/* Tripadvisor a veces mete floats/anchos: los anulamos */
.TA_cdswritereviewlg,
.TA_cdswritereviewlg ul,
.TA_cdswritereviewlg li{
  float:none !important;
}

/* El <ul> que crea el widget: conviértelo en flex y centra */
.TA_cdswritereviewlg ul{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px;
  padding:0 !important;
  margin:0 auto !important;
}

/* El bloque en sí como inline-block para que respete el centrado */
#TA_cdswritereviewlg827,
.TA_cdswritereviewlg{
  display:inline-block !important;
  max-width:100%;
  margin:0 auto !important;      /* truco extra para centrar */
}