/* =========================================================
   LANDING - CSS
   (extraído de tus <style> y ordenado)
========================================================= */

/* ===== Variables ===== */
:root{
  --header-h:72px;
  --chat-safe:100px;

  --blue:#2563eb;
  --green:#10b981;
  --ink:#0f172a;
  --slate:#334155;

  --card:#ffffff;
  --ring:rgba(37,99,235,.15);
  --shadow:0 20px 60px rgba(2,6,23,.08);
  --radius:18px;
}

/* ===== Base ===== */
body{
  padding-top:var(--header-h);
  color:var(--ink);
  background:#f8fafc;
}

.brand-logo{ height:40px; }

/* =========================================================
   WhatsApp flotante + label
========================================================= */
.whatsapp-float{
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 58px;
  height: 58px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  z-index: 1200;
  transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float img{
  width: 28px;
  height: 28px;
  filter: invert(1);
}

.whatsapp-float:hover{
  transform: scale(1.08);
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
}

/* Label arriba del WhatsApp */
.whatsapp-label{
  position: fixed;
  right: 22px;
  bottom: calc(22px + 58px + 12px); /* 12px arriba del botón */
  background: rgba(15,23,42,.92);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  z-index: 1200;
  line-height: 1;
  white-space: nowrap;
}

/* Flechita hacia el botón */
.whatsapp-label::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(15,23,42,.92);
}

/* Responsive WhatsApp */
@media (max-width: 768px){
  .whatsapp-float{
    bottom: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
  }
  .whatsapp-label{ display:none; }
}

/* =========================================================
   NAV CTAs
========================================================= */
.nav-ctas .btn{
  border-radius:999px;
  padding:.45rem 1.05rem;
  font-weight:700;
  box-shadow:0 10px 22px rgba(2,6,23,.10);
  white-space:nowrap;
}
.nav-ctas .btn-outline-dark{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(8px);
  border-color:rgba(15,23,42,.18);
}

/* =========================================================
   Hint “Así se ve el sistema”
========================================================= */
.see-system-hint{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:0;
}

.see-system-title{
  margin:0;
  font-weight:800;
  letter-spacing:-.3px;
  font-size:1.9rem;
  line-height:1.1;
  background:linear-gradient(90deg, #2563eb, #10b981);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: subtlePulse 2.8s ease-in-out infinite;
}

.see-system-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:999px;
  background:rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.20);
  color:#2563eb;
  animation: arrowBounce 1.8s infinite;
}

.see-system-arrow i{ font-size:1.05rem; }

@keyframes arrowBounce{
  0%,100%{ transform: translateY(0); opacity:.9; }
  50%{ transform: translateY(7px); opacity:1; }
}

@keyframes subtlePulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.78; }
}

@media (max-width: 575.98px){
  .see-system-hint{ justify-content:center; width:100%; }
  .see-system-title{ font-size:1.55rem; }
}

/* =========================================================
   Header fijo
========================================================= */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1030;
  height:72px;
  display:flex;
  align-items:center;
  background:#fff;
  transition:background .25s, box-shadow .25s, backdrop-filter .25s;
  box-shadow:0 6px 24px rgba(2,6,23,.06);
}

.navbar.nav-blur{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px) saturate(120%);
  box-shadow:0 10px 30px rgba(2,6,23,.10);
}

/* =========================================================
   HERO
========================================================= */
.hero-section{
  background-color:#0f172a;
  background-image:
    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.18)),
    url('/imagenes/hero-bg.webp'),
    url('/imagenes/hero-bg.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;

  height:auto;
  min-height: calc(80vh - var(--header-h));

  padding-top: 76px !important;
  padding-bottom: 14px !important;

  overflow: visible;
  position: relative;

  display:flex;
  align-items:flex-start;
}

@media (min-width: 1200px){
  .hero-section{ min-height: calc(78vh - var(--header-h)); }
}

@media (max-width: 991.98px){
  .hero-section{
    min-height: auto;
    padding-top: 90px !important;
    padding-bottom: 16px !important;
  }
}

.hero-section .overlay{ display:none; }
.hero-section h1,
.hero-section p,
.hero-section .lead{ color:#fff !important; }

/* =========================================================
   Card glass / inputs
========================================================= */
.card-form,
.card[style*="backdrop-filter"]{
  border-radius:var(--radius);
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(8px);
  border:1px solid rgba(2,6,23,.06);
  box-shadow:var(--shadow);
}

.form-control:focus,
.form-select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 .25rem var(--ring);
}

/* =========================================================
   Tiles
========================================================= */
.feature-tile{
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  border-radius:16px;
  padding:18px;
  height:100%;
  box-shadow:var(--shadow);
  transition:transform .18s, box-shadow .18s;
}

.feature-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 70px rgba(2,6,23,.12);
}

.icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(16,185,129,.18), rgba(37,99,235,.18));
}

/* =========================================================
   Footer
========================================================= */
.site-footer{
  background:#f8fafc;
  border-top:1px solid rgba(2,6,23,.06);
  color:#334155;
}
.site-footer a{ color:#2563eb; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* =========================================================
   KPIs
========================================================= */
.kpis{ display:flex; gap:12px; }
.kpi{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  border-radius:999px;
  padding:6px 12px;
  box-shadow:0 8px 20px rgba(2,6,23,.08);
  font-size:.85rem;
  color:#334155;
  white-space:nowrap;
}
.kpi .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#10b981;
}
@media (max-width: 991.98px){
  .kpis{ display:none !important; }
}

/* =========================================================
   Product slider
========================================================= */
.product-slider{ padding:18px 0; }

.product-slider .slider-shell{
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.95));
  border:1px solid rgba(2,6,23,.06);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.product-slider .carousel-inner{ background:#f1f5f9; }
.product-slider .carousel-item{ height:560px; }

.product-slider .carousel-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#f1f5f9;
}

.product-slider .carousel-control-prev,
.product-slider .carousel-control-next{
  width:56px;
  opacity:1;
}

.product-slider .carousel-control-prev-icon,
.product-slider .carousel-control-next-icon{
  filter:none;
  background-color:rgba(15,23,42,.70);
  border-radius:999px;
  background-size:55% 55%;
}

.product-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.product-slider .carousel-control-next:hover .carousel-control-next-icon{
  background-color:rgba(15,23,42,.85);
}

.product-slider .caption-pill{
  position:absolute;
  left:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(2,6,23,.08);
  box-shadow:0 14px 35px rgba(2,6,23,.18);
  font-weight:700;
  color:var(--ink);
}
.product-slider .caption-pill small{
  font-weight:600;
  color:#475569;
}

.product-slider .thumbbar{
  display:flex;
  gap:10px;
  padding:12px;
  background:rgba(248,250,252,.9);
  border-top:1px solid rgba(2,6,23,.06);
  overflow:auto;
}

.product-slider .thumbbar button{
  border:1px solid rgba(2,6,23,.12);
  background:#fff;
  border-radius:12px;
  padding:0;
  width:110px;
  height:64px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(2,6,23,.08);
  opacity:.85;
  transition:transform .15s ease, opacity .15s ease;
  cursor:pointer;
}

.product-slider .thumbbar button:hover{
  transform:translateY(-2px);
  opacity:1;
}

.product-slider .thumbbar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.product-slider .thumbbar button.active{
  outline:3px solid rgba(37,99,235,.35);
  opacity:1;
  transform:translateY(-1px);
}

/* =========================================================
   Form HERO: quepa completo en pantalla (desktop)
========================================================= */
@media (min-width: 992px){
  .hero-section #form{
    width:100% !important;
    max-width:80% !important;
    margin-left:auto !important;
    margin-right:-44px !important;
    margin-top:-18px !important;

    max-height:calc(100vh - 170px) !important;
    overflow:auto !important;
  }

  .hero-section #form.card{ padding:14px !important; }
  .hero-section #form .mb-3{ margin-bottom:.5rem !important; }

  .hero-section #form .form-label{
    margin-bottom:.25rem !important;
    font-size:.90rem !important;
  }

  .hero-section #form .form-control,
  .hero-section #form .form-select{
    padding-top:.42rem !important;
    padding-bottom:.42rem !important;
  }

  .hero-section #form textarea.form-control{
    height:64px !important;
    resize:none !important;
  }

  .hero-section #form button.btn{
    padding-top:.52rem !important;
    padding-bottom:.52rem !important;
  }

  .hero-section #form .text-center.text-secondary{
    margin-top:.55rem !important;
    font-size:.84rem !important;
  }
}

/* =========================================================
   PLAY: wrapper
========================================================= */
.hero-section{ position: relative; }

.hero-play-wrapper{
  position:static;
  transform:none;
  z-index:5;
  display:flex;
  justify-content:center;
  margin: 8px 0 14px 0;
}

@media (min-width: 1200px){
  .hero-play-wrapper{
    position:absolute;
    left:50%;
    top:58%;
    transform:translate(-50%, -50%);
    margin:0;
  }
  .hero-play-wrapper .play-pulse{ margin-top:0; }
}

/* =========================================================
   PLAY PULSE BUTTON
========================================================= */
.play-pulse{
  --size:92px;
  --core: rgba(255,255,255,.58);
  --logo-green:#6BCB2D;
  --ring1: rgba(37,99,235,.45);
  --ring2: rgba(107,203,45,.45);
  --icon: var(--logo-green);

  position:relative;
  width:var(--size);
  height:var(--size);
  border-radius:999px;

  background:var(--core);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);

  border:1px solid rgba(255,255,255,.55);

  box-shadow:
    0 18px 45px rgba(2,6,23,.28),
    inset 0 0 0 1px rgba(255,255,255,.35);

  display:inline-grid;
  place-items:center;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}

.play-pulse:hover{
  transform:translateY(-1px);
  box-shadow:
    0 26px 70px rgba(2,6,23,.33),
    0 0 0 1px rgba(255,255,255,.60) inset;
}

.play-pulse:active{ transform:translateY(0); }

.play-pulse .tri{
  width:0;height:0;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-left:24px solid var(--icon);
  margin-left:5px;
  filter:drop-shadow(0 8px 18px rgba(107,203,45,.30));
}

.play-pulse::before,
.play-pulse::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:999px;
  pointer-events:none;
  border:4px solid transparent;
  opacity:.95;
  animation:pulseRing 1.65s ease-out infinite;
  filter:blur(.2px);
}

.play-pulse::before{
  border-color:var(--ring1);
  box-shadow:0 0 0 6px rgba(37,99,235,.10);
}

.play-pulse::after{
  inset:-28px;
  border-color:var(--ring2);
  animation-delay:.35s;
  box-shadow:0 0 0 7px rgba(107,203,45,.12);
}

.play-pulse .ripple{
  position:absolute;
  inset:-45px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.25);
  animation:rippleSoft 2.2s ease-out infinite;
  pointer-events:none;
}

@keyframes pulseRing{
  0%   { transform:scale(.82); opacity:.95; }
  70%  { transform:scale(1.35); opacity:.20; }
  100% { transform:scale(1.45); opacity:0; }
}

@keyframes rippleSoft{
  0%   { transform:scale(.75); opacity:.35; }
  100% { transform:scale(1.55); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .play-pulse::before,
  .play-pulse::after,
  .play-pulse .ripple{
    animation:none;
    opacity:.35;
    transform:none;
  }
}

/* =========================================================
   VIDEO MODAL
========================================================= */
.video-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(6px);
}
.video-modal.show{ display:flex; }

.video-modal .dialog{
  width:min(980px, 96vw);
  border-radius:18px;
  overflow:hidden;
  background:#0b1220;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  position:relative;
}

.video-modal .close-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(15,23,42,.55);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.video-modal .ratio-wrap{
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  position:relative;
}

.video-modal iframe,
.video-modal video{
  width:100%;
  height:100%;
  border:0;
  display:block;
}