/* ========================================
   LOJOJKOT V2 - SISTEMA DE ESTILOS
   Autor: Sebastián / lÓjÓjkot
   Descripción:
   CSS principal del sitio de la agencia.
   Base blanco y negro con acentos azul,
   verde, amarillo y naranja.
======================================== */


/* ========================================
   1) VARIABLES GLOBALES
   - Colores
   - Sombras
   - Radios
   - Ancho máximo
======================================== */

:root{
  --bg:#f5f5f5;
  --white:#ffffff;
  --black:#0d0d0d;
  --black2:#171717;
  --text:#111111;
  --muted:#666666;
  --line:#e8e8e8;
  --shadow:0 18px 45px rgba(0,0,0,.08);
  --radius:24px;
  --max:1200px;

  /* Colores de acento */
  --blue:#2563eb;
  --green:#16a34a;
  --yellow:#facc15;
  --orange:#f97316;

  /* Fondos suaves */
  --blue-soft:#dbeafe;
  --green-soft:#dcfce7;
  --yellow-soft:#fef9c3;
  --orange-soft:#ffedd5;
}


/* ========================================
   2) RESET GENERAL
   - Limpia márgenes
   - Box sizing consistente
======================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}


/* ========================================
   3) ESTILOS BASE DEL SITIO
   - body
   - enlaces
   - contenedor principal
======================================== */

body{
  font-family:Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 22%),
    radial-gradient(circle at top right, rgba(249,115,22,.08), transparent 18%),
    linear-gradient(180deg,#ffffff 0%, #f4f4f4 100%);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:min(92%, var(--max));
  margin:auto;
}


/* ========================================
   4) FONDOS DECORATIVOS
   - círculos borrosos del fondo
======================================== */

.bgDecor{
  position:fixed;
  z-index:-2;
  border-radius:50%;
  filter:blur(90px);
  opacity:.20;
}

.bgA{
  width:250px;
  height:250px;
  background:var(--blue);
  left:-70px;
  top:100px;
}

.bgB{
  width:300px;
  height:300px;
  background:var(--orange);
  right:-80px;
  top:300px;
}


/* ========================================
   5) HEADER PRINCIPAL
   - barra superior fija
======================================== */

.siteHeader{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(255, 255, 255, 0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 25px rgba(0,0,0,.03);
}

.navWrap{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}


/* ========================================
   6) MARCA / LOGO
   - logo
   - texto de marca
======================================== */

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

.brandLogo{
  width:64px;
  height:64px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}

.brandLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;

  /* Zoom del logo dentro del contenedor */
  transform:scale(2.35);
}

.brandText strong{
  display:block;
  font-size:18px;
  line-height:1.1;
}

.brandText small{
  color:var(--muted);
  font-size:12px;
}


/* ========================================
   7) NAVEGACIÓN PRINCIPAL
   - menú desktop
   - hover elegante
   - enlace activo
   - menú móvil premium
======================================== */

.mainNav{
  display:flex;
  align-items:center;
  gap:18px;
}

.mainNav a{
  font-weight:700;
  font-size:15px;
  color:#222;
  transition:.28s ease;
  position:relative;
  letter-spacing:.2px;
}

.mainNav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transition:width .28s ease;
}

.mainNav a:hover{
  color:var(--blue);
}

.mainNav a:hover::after{
  width:100%;
}

.mainNav a.active{
  color:var(--blue);
}

.mainNav a.active::after{
  width:100%;
}


/* ========================================
   8) BOTÓN MENÚ MÓVIL PREMIUM
   - botón tipo glass
   - líneas finas
   - estado activo en X
======================================== */

.menuToggle{
  display:none;
  width:50px;
  height:50px;
  position:relative;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  backdrop-filter:blur(12px);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  cursor:pointer;
  box-shadow:
    0 8px 22px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition:all .30s cubic-bezier(.4,0,.2,1);
}

.menuToggle:hover{
  transform:translateY(-2px);
  border-color:rgba(37,99,235,.25);
  box-shadow:
    0 14px 30px rgba(37,99,235,.14),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.menuToggle:active{
  transform:scale(.97);
}

.menuToggle .line{
  position:absolute;
  left:11px;
  width:28px;
  height:2.5px;
  border-radius:999px;
  background:linear-gradient(90deg,#111,#374151);
  transition:
    transform .35s cubic-bezier(.4,0,.2,1),
    opacity .22s ease,
    top .35s cubic-bezier(.4,0,.2,1),
    background .25s ease;
}

.menuToggle .l1{ top:15px; }
.menuToggle .l2{ top:23px; }
.menuToggle .l3{ top:31px; }

.menuToggle.active{
  background:linear-gradient(135deg,#111,#1f2937);
  border-color:#111;
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

.menuToggle.active .line{
  background:#fff;
}

.menuToggle.active .l1{
  top:23px;
  transform:rotate(45deg);
}

.menuToggle.active .l2{
  opacity:0;
  transform:scale(.2);
}

.menuToggle.active .l3{
  top:23px;
  transform:rotate(-45deg);
}


/* ========================================
   9) RESPONSIVE MÓVIL
   - menú desplegable premium
   - cards en una columna
======================================== */

@media (max-width: 768px){

  .menuToggle{
    display:block;
  }

  .mainNav{

    position:absolute;
    top:84px;
    right:4%;

    width:min(92vw,330px);

    /* fondo negro */
    background:#0f0f0f;

    border:1px solid #1f1f1f;

    border-radius:18px;

    padding:16px;

    display:flex;
    flex-direction:column;

    gap:8px;

    /* sombra oscura */
    box-shadow:
    0 20px 50px rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(-8px);

    transition:.25s ease;

  }

  .mainNav.open{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateY(0);

  }

  /* links */

  .mainNav a{

    padding:13px 16px;

    border-radius:12px;

    font-size:15px;

    color:#e5e5e5;

    background:#171717;

    transition:.25s ease;

  }

  /* hover */

  .mainNav a:hover{

    background:#222;

    color:#fff;

  }

  /* activo */

  .mainNav a.active{

    background:#2a2a2a;

    color:#fff;

    border:1px solid #3a3a3a;

  }

  /* quitar línea desktop */

  .mainNav a::after{
    display:none;
  }

  .heroGrid,
  .contactGrid,
  .footerGrid,
  .grid4,
  .grid3,
  .grid2{
    grid-template-columns:1fr;
  }

  .footerBottomWrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero{
    padding:70px 0 60px;
  }

}
.mainNav a:hover{

background:#479e97;

transform:translateX(4px);

}
/* ========================================
   9) BOTONES GENERALES
   - base
   - blanco
   - negro
   - mini
   - full width
======================================== */

.btn{
  min-height:48px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  font-weight:800;
  transition:.25s ease;
  border:1px solid transparent;
}

.btnWhite{
  background:#fff;
  color:#000;
  border:1px solid rgba(0,0,0,.08);
}

.btnWhite:hover{
  transform:translateY(-2px);
  background:#f8fbff;
  border-color:var(--blue);
  color:var(--blue);
}

.btnBlack{
  background:#000;
  color:#fff;
  border:1px solid #000;
}

.btnBlack:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, var(--black), var(--orange));
  border-color:var(--orange);
}

.btnMini{
  min-height:40px;
  padding:0 16px;
  background:linear-gradient(135deg, var(--blue), var(--green));
  color:#fff !important;
  border-radius:12px;
  border:none;
  box-shadow:0 10px 24px rgba(37,99,235,.20);
}

.btnMini:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
}

.full{
  width:100%;
}


/* ========================================
   10) HERO PRINCIPAL
   - sección portada
   - grid
   - títulos
   - texto
   - botones
======================================== */

.hero{
  padding:90px 0 70px;
}

.heroGrid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:center;
}

.pill{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--blue), var(--green));
  color:#fff;
  font-size:12px;
  font-weight:800;
  margin-bottom:18px;
  letter-spacing:.5px;
  box-shadow:0 8px 20px rgba(37,99,235,.16);
}

.pillDark{
  background:linear-gradient(135deg, var(--black), var(--orange));
  color:#fff;
}

.heroText h1{
  font-size:clamp(2.5rem, 5vw, 4.7rem);
  line-height:1.03;
  margin-bottom:16px;
}

.heroText h1 span{
  background:linear-gradient(135deg, var(--blue), var(--orange));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.heroText p{
  color:var(--muted);
  max-width:700px;
  font-size:1.05rem;
}

.heroBtns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:26px;
}


/* ========================================
   11) MOCKUP VISUAL DEL HERO
   - navegador falso
   - tarjetas simuladas
======================================== */

.mockBrowser{
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.mockTop{
  display:flex;
  gap:8px;
  padding:16px;
  border-bottom:1px solid var(--line);
}

.mockTop span{
  width:12px;
  height:12px;
  border-radius:50%;
}

.mockTop span:nth-child(1){ background:var(--orange); }
.mockTop span:nth-child(2){ background:var(--yellow); }
.mockTop span:nth-child(3){ background:var(--green); }

.mockBody{
  padding:24px;
}

.mockLine{
  height:13px;
  border-radius:999px;
  background:#111;
  opacity:.12;
  margin-bottom:14px;
}

.mockLine.xl{ width:84%; height:18px; }
.mockLine.lg{ width:66%; }
.mockLine.md{ width:52%; }

.mockCards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:22px;
}

.mCard{
  height:120px;
  border-radius:18px;
  background:#f4f4f4;
  border:1px solid var(--line);
}

.mCard:nth-child(1){
  background:linear-gradient(180deg, #fff, var(--blue-soft));
}

.mCard:nth-child(2){
  background:linear-gradient(180deg, #111, #1f2937);
}

.mCard:nth-child(3){
  background:linear-gradient(180deg, #fff, var(--orange-soft));
}

.mCard.dark{
  background:#111;
}


/* ========================================
   12) SECCIONES GENERALES
   - separación vertical
   - versión oscura
======================================== */

.section{
  padding:85px 0;
}

.sectionDark{
  background:linear-gradient(180deg, #0f0f0f, #151515);
  color:#fff;
}

.sectionHead{
  text-align:center;
  max-width:820px;
  margin:0 auto 40px;
}

.sectionHead h2{
  font-size:clamp(2rem,3vw,3rem);
  margin-bottom:10px;
}


/* ========================================
   13) GRIDS GENERALES
   - layouts reutilizables
======================================== */

.grid{
  display:grid;
  gap:22px;
}

.grid2{ grid-template-columns:repeat(2,1fr); }
.grid3{ grid-template-columns:repeat(3,1fr); }
.grid4{ grid-template-columns:repeat(4,1fr); }


/* ========================================
   14) TARJETAS GENERALES
   - cards de servicios
   - galería
   - contacto
   - planes
======================================== */

.card,
.serviceBig,
.galleryCard,
.styleCard,
.contactInfo,
.contactForm,
.planCard,
.planDetail,
.ctaBox{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:26px;
  box-shadow:var(--shadow);
  transition:.3s ease;
}

.sectionDark .planCard,
.sectionDark .styleCard{
  background:#1a1a1a;
  border-color:#2b2b2b;
  color:#fff;
}

.card:hover,
.serviceBig:hover,
.galleryCard:hover,
.styleCard:hover,
.planCard:hover,
.planDetail:hover,
.ctaBox:hover{
  transform:translateY(-6px);
  border-color:rgba(37,99,235,.20);
  box-shadow:0 20px 50px rgba(37,99,235,.10);
}


/* ========================================
   15) ÍCONOS CIRCULARES
   - usados en servicios/cards
======================================== */

.iconCircle{
  width:58px;
  height:58px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--black), var(--blue));
  color:#fff;
  display:grid;
  place-items:center;
  font-size:24px;
  margin-bottom:16px;
  box-shadow:0 10px 22px rgba(37,99,235,.16);
}

.iconCircle.lg{
  width:70px;
  height:70px;
  font-size:28px;
}


/* ========================================
   16) TEXTOS DENTRO DE CARDS
======================================== */

.card h3,
.serviceBig h3,
.galleryCard h3,
.styleCard h3{
  margin-bottom:10px;
}

.card p,
.serviceBig p,
.galleryCard p,
.styleCard p,
.planDesc,
.contactInfo p,
.ctaBox p{
  color:var(--muted);
}


/* ========================================
   17) BOTÓN INTERNO DE TARJETAS
======================================== */

.cardBtn{
  display:inline-block;
  margin-top:16px;
  background:linear-gradient(135deg, var(--blue), var(--green));
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
  transition:.25s ease;
  box-shadow:0 10px 24px rgba(37,99,235,.18);
}

.cardBtn:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}

.sectionDark .cardBtn{
  background:#fff;
  color:#000;
}


/* ========================================
   18) PLANES / BADGES / DESTACADOS
======================================== */

.planBadge{
  display:inline-block;
  margin-bottom:14px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--orange), var(--yellow));
  color:#111;
  font-size:12px;
  font-weight:800;
}

.featured{
  outline:2px solid var(--orange);
  box-shadow:0 20px 45px rgba(249,115,22,.15);
}

.sectionDark .featured{
  outline:2px solid var(--yellow);
}

.planList{
  list-style:none;
  margin:20px 0;
}

.planList li{
  padding:10px 0;
  border-bottom:1px solid #ececec;
}
.planPrice{
  font-size:22px;
  font-weight:800;
  margin:10px 0 6px;
  color:#2563eb;
}

.planNote{
  margin-top:14px;
  font-size:10px;
  color:#666;
  line-height:1.5;
}
.planHelp{

margin-top:60px;

padding:40px;

background:#fff;

border-radius:20px;

border:1px solid #eee;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.planHelp h3{

font-size:26px;

margin-bottom:10px;

}

.planHelp p{

color:#555;

max-width:700px;

margin:auto;

}

.planHelpNote{

margin-top:10px;

font-size:14px;

color:#777;

}

.planHelpActions{

margin-top:25px;

display:flex;

gap:15px;

justify-content:center;

flex-wrap:wrap;

}

/* ========================================
   19) GRUPO DE ACCIONES
   - botones dentro de servicios/planes
======================================== */

.serviceActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}


/* ========================================
   20) CHIPS / ETIQUETAS PEQUEÑAS
======================================== */

.chipsWrap{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

.chip{
  background:#fff;
  color:#000;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(37,99,235,.12);
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}

.sectionDark .chip{
  background:#fff;
  color:#000;
}


/* ========================================
   21) ESTRUCTURA DE PÁGINAS INTERNAS
======================================== */

.pageTopSpace{
  padding-top:10px;
}

.pageHero{
  padding:55px 0 10px;
}

.pageHero h1{
  font-size:clamp(2rem,4vw,3.7rem);
  line-height:1.06;
  margin-bottom:12px;
}

.pageHero p{
  color:var(--muted);
  max-width:760px;
}

.galleryIcon{
  font-size:42px;
  margin-bottom:14px;
}
/* ========================================
   22) CONTACTO / FORMULARIOS
   - grid de contacto
   - panel informativo
   - lista de datos
   - campos del formulario
======================================== */

.contactGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}

/* panel izquierdo de información */
.contactInfo{
  background:#fff;
  padding:28px;
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:0 15px 40px rgba(0,0,0,.06);

  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.contactInfo h3{
  margin-bottom:10px;
  font-size:1.5rem;
}

.contactInfo p{
  color:var(--muted);
  line-height:1.7;
}

/* lista de datos de contacto */
.infoList{
  display:grid;
  gap:12px;
  margin-top:20px;
}

.infoItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:14px;
  background:#f7f7f7;
  border:1px solid var(--line);
  font-weight:600;
  color:#333;
  transition:.25s ease;
}

.infoItem:hover{
  background:#ffffff;
  border-color:rgba(37,99,235,.18);
  box-shadow:0 10px 24px rgba(37,99,235,.08);
}

.infoIcon{
  font-size:18px;
  line-height:1;
  flex-shrink:0;
}

.infoItem a{
  color:var(--blue);
  text-decoration:none;
  transition:.25s ease;
  word-break:break-word;
}

.infoItem a:hover{
  color:var(--green);
}

/* formulario */
.contactForm{
  background:#ffffff;
  padding:28px;
  border-radius:20px;
  border:1px solid #e8e8e8;
  box-shadow:0 20px 50px rgba(0,0,0,.08);

  width:100%;
  height:100%;
}

/* campos */
.field{
  display:flex;
  flex-direction:column;
  margin-bottom:18px;
}

.field label{
  margin-bottom:8px;
  font-weight:800;
  color:#111;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #dcdcdc;
  background:#fff;
  color:#111;
  outline:none;
  font-size:15px;
  transition:.25s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.field textarea{
  resize:vertical;
  min-height:140px;
}

.fullRow{
  grid-column:1 / -1;
}

/* responsive */
@media (max-width: 768px){
  .contactGrid{
    grid-template-columns:1fr;
  }

  .contactInfo,
  .contactForm{
    padding:22px;
    height:auto;
  }

  .infoItem{
    align-items:flex-start;
  }
}

/* ========================================
   23) FOOTER PRINCIPAL
======================================== */

.siteFooter{
  margin-top:50px;
  background:linear-gradient(180deg, #0f0f0f, #111827);
  color:#fff;
}

.footerGrid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr 1fr;
  gap:24px;
  padding:55px 0;
}

.footerBrand{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.footerBrand p,
.footerCol li,
.footerCol a,
.footerBottom p{
  color:#cfcfcf;
}

.footerCol h4{
  margin-bottom:16px;
}

.footerCol ul{
  list-style:none;
}

.footerCol li{
  margin-bottom:12px;
}

.footerSocial{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.footerSocial a{
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  color:#000;
  font-weight:800;
  transition:.25s ease;
}

.footerSocial a:hover{
  background:linear-gradient(135deg, var(--blue), var(--green));
  color:#fff;
}

.footerBottom{
  border-top:1px solid rgba(255,255,255,.08);
}

.footerBottomWrap{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}



.footerLegal{

margin-top:15px;

display:flex;

gap:15px;

flex-wrap:wrap;

font-size:13px;

}

.footerLegal a{

color:#888;

text-decoration:none;

}

.footerLegal a:hover{

color:#2563eb;

}
/* ========================================
   BOTÓN SUBIR ARRIBA - ESTILO PRO
======================================== */
#toTopBtn{
  position:fixed;
  right:22px;
  bottom:190px;
  width:52px;
  height:52px;
  border:none;
  border-radius:16px;

  /* azul pro */
  background:linear-gradient(135deg,#c9710c,#1d4ed8);

  color:#fff;
  font-size:20px;
  font-weight:800;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 14px 35px rgba(37,99,235,.25),
    0 0 0 1px rgba(255,255,255,.05) inset;

  transition:.28s ease;
  z-index:9999;
}

/* hover elegante */

#toTopBtn:hover{

transform:translateY(-3px);

box-shadow:
0 20px 45px rgba(19, 19, 20, 0.35);

background-color: #f97316;

}

/* ========================================
   24) BOTÓN FLOTANTE WHATSAPP
======================================== */

/* ========================================
   WHATSAPP PREMIUM
======================================== */

.waWrap{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.waFab{
  width:62px;
  height:62px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:
    0 14px 35px rgba(0,0,0,.28),
    0 0 0 0 rgba(37,211,102,.45);
  transition:.30s ease;
  animation:waFloat 3s ease-in-out infinite;
  position:relative;
}

.waFab:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:
    0 20px 45px rgba(0,0,0,.35),
    0 0 25px rgba(37,211,102,.45);
}

.waFab::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(37,211,102,.35);
  z-index:-1;
  animation:waPulse 2.5s infinite;
}

.waPanel{
  width:min(92vw, 330px);
  background:rgba(15,15,15,.96);
  color:#fff;
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  box-shadow:0 24px 55px rgba(0,0,0,.35);
  overflow:hidden;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px) scale(.98);
  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility .28s ease;
}

.waPanel.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.waPanelHead{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  background:linear-gradient(180deg,#111827,#0f0f0f);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.waHeadIcon{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(37,211,102,.28);
}

.waHeadText{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.waHeadText strong{
  font-size:15px;
  font-weight:800;
  color:#fff;
}

.waHeadText small{
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#d1d5db;
  font-size:12px;
}

.waDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  display:inline-block;
  box-shadow:0 0 10px rgba(34,197,94,.7);
}

.waClose{
  margin-left:auto;
  width:34px;
  height:34px;
  border:none;
  border-radius:10px;
  background:#1f2937;
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:.25s ease;
}

.waClose:hover{
  background:#374151;
}

.waPanelBody{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.waOption{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:16px;
  background:#171717;
  border:1px solid rgba(255,255,255,.04);
  transition:.25s ease;
}

.waOption:hover{
  transform:translateX(-4px);
  background:#1f1f1f;
  border-color:rgba(37,211,102,.22);
}

.waOption > span{
  font-size:18px;
  line-height:1;
  margin-top:2px;
}

.waOption strong{
  display:block;
  font-size:14px;
  font-weight:800;
  color:#fff;
}

.waOption small{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:#cfcfcf;
}

.waOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(2px);
  z-index:998;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.25s ease;
}

.waOverlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

@keyframes waFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@keyframes waPulse{
  0%{
    transform:scale(1);
    opacity:.55;
  }
  70%{
    transform:scale(1.7);
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

@media (max-width: 768px){
  .waWrap{
    right:16px;
    bottom:16px;
  }

  .waPanel{
    width:min(92vw, 310px);
  }

  .waFab{
    width:58px;
    height:58px;
  }
}

/* ========================================
   25) ANIMACIONES
   - reveal
   - delay
   - floating
======================================== */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:all .8s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

.delay1{ transition-delay:.12s; }
.delay2{ transition-delay:.24s; }

.floating{
  animation:floating 4s ease-in-out infinite;
}

@keyframes floating{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}


/* ========================================
   26) RESPONSIVE TABLET
======================================== */

@media (max-width: 1100px){
  .heroGrid,
  .contactGrid,
  .footerGrid,
  .grid4,
  .grid3{
    grid-template-columns:1fr 1fr;
  }
}


/* ========================================
   27) RESPONSIVE MÓVIL
   - menú móvil
   - grids en 1 columna
======================================== */

@media (max-width: 768px){
  .menuToggle{
    display:block;
  }

  .mainNav{
    position:absolute;
    top:82px;
    right:4%;
    width:min(92vw, 320px);
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    box-shadow:0 18px 40px rgba(0,0,0,.10);
  }

  .mainNav.open{
    display:flex;
  }

  .heroGrid,
  .contactGrid,
  .footerGrid,
  .grid4,
  .grid3,
  .grid2{
    grid-template-columns:1fr;
  }

  .footerBottomWrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero{
    padding:70px 0 60px;
  }
}

/* ========================================
   BOTÓN REGRESAR ARRIBA IZQUIERDA
======================================== */

.goBackBtn{

position:fixed;

/* esquina superior izquierda */

top:95px;

left:20px;

width:48px;

height:48px;

border:none;

border-radius:14px;

background:#111;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

font-weight:800;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.20);

transition:.25s ease;

z-index:9999;

}

.goBackBtn:hover{

transform:translateY(-2px);

box-shadow:0 15px 35px rgba(0,0,0,.25);

}


/* ========================================
   Body para sitio general
======================================== */
body{
  font-family:'Inter', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 22%),
    radial-gradient(circle at top right, rgba(249,115,22,.08), transparent 18%),
    linear-gradient(180deg,#ffffff 0%, #f4f4f4 100%);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}




/* ========================================
   CINTA / SLIDER INFINITO
======================================== */

.tickerWrap{
  padding:0px 0;
  overflow:hidden;
}

.ticker{
  width:100%;
  overflow:hidden;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#f8647d;
}

.tickerTrack{
  display:flex;
  align-items:center;
  gap:24px;
  width:max-content;
  white-space:nowrap;
  padding:14px 0;
  animation:tickerMove 28s linear infinite;
}

.tickerTrack a{
  color:#111;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  transition:.25s ease;
}

.tickerTrack a:hover{
  color:var(--blue);
}

.tickerTrack span{
  color:#888;
  font-size:18px;
  line-height:1;
}

@keyframes tickerMove{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}
.ticker:hover .tickerTrack{
  animation-play-state:paused;
}