/* 3GENIOS — estilos propios.
   Van en hoja aparte: style.css es tan grande que el navegador
   dejaba de aplicar las reglas del final. */

/* ===== 3GENIOS — hero fluido =====
   El español corre más largo que el inglés. clamp() + tamaños por palabra
   para que nunca desborde ni se parta en dos renglones. */
.main-banner .hero-content .hero-title .hero-digital,
.main-banner .hero-content .hero-title .hero-marketing {
  font-size: clamp(2.8rem, 11.5vw, 220px) !important;
  line-height: 0.92;
  white-space: nowrap;
}
.main-banner .hero-content .hero-title .hero-we {
  font-size: clamp(1.8rem, 5.2vw, 96px) !important;
  white-space: nowrap;
}
.main-banner .hero-content .hero-title .hero-agency {
  font-size: clamp(1.2rem, 3.1vw, 56px) !important;
  white-space: nowrap;
}
.main-banner .hero-content .hero-title .hero-are {
  font-size: clamp(0.8rem, 1.6vw, 30px) !important;
}
.main-banner .hero-content .hero-title .hero-desc {
  font-size: clamp(0.9rem, 1.15vw, 21px) !important;
}
.main-banner .hero-content .hero-title { overflow-wrap: normal; }

/* ===== 3GENIOS — logo siempre sobre fondo oscuro =====
   El wordmark es texto blanco: en modo claro sería invisible.
   Se fuerza la pastilla oscura del logo y el footer en ambos modos. */
.site-header .logo-btn.menu-btn1 {
  background: #171717 !important;
  border-radius: 100px;
}
.site-header .logo-btn.menu-btn1 .menu-content,
.site-header .logo-btn.menu-btn1 .menu-content * {
  color: #fff !important;
}
.site-header .logo-btn.menu-btn1 .hamburger span { background: #fff !important; }
.site-footer.style-3 { background-color: #171717; }
/* En el footer sólo debe verse una variante del wordmark */
.site-footer .footer-bottom img.dark { display: none !important; }
.site-footer .footer-bottom img.light { display: inline-block !important; }

/* ===== 3GENIOS — páginas legales =====
   El skin define --body-color en blanco (pensado para secciones oscuras).
   En los legales el fondo es claro, así que el texto se fija explícitamente. */
.legal-body { color: #2b2b2b; }
.legal-body p,
.legal-body li { color: #2b2b2b; font-size: 1rem; }
.legal-body h3 { color: #171717; font-size: 1.35rem; }
.legal-body ul { padding-left: 1.4rem; margin-bottom: 1.2rem; }
.legal-body li { margin-bottom: .5rem; list-style: disc; }
.legal-body strong { color: #171717; }
.legal-body a { color: #2f9e2f; text-decoration: underline; }
[data-theme-version="dark"] .legal-body,
[data-theme-version="dark"] .legal-body p,
[data-theme-version="dark"] .legal-body li { color: rgba(255,255,255,.85); }
[data-theme-version="dark"] .legal-body h3,
[data-theme-version="dark"] .legal-body strong { color: #fff; }
[data-theme-version="dark"] .legal-body a { color: #63EA63; }

/* ===== 3GENIOS — footer legible =====
   El footer se forzó a fondo oscuro (#171717) para que el wordmark blanco
   funcione, pero el skin pinta los textos en #171717 -> contraste 1:1.
   Aquí se fija el texto en claro. */
.site-footer.style-3 { background-color: #171717 !important; color: rgba(255,255,255,.75); }
.site-footer.style-3 .footer-title { color: #fff !important; }
.site-footer.style-3 .footer-top-title .title { color: #fff !important; }
.site-footer.style-3 .footer-top-title .title span { color: #63EA63 !important; }
.site-footer.style-3 p,
.site-footer.style-3 li,
.site-footer.style-3 .widget ul li a { color: rgba(255,255,255,.75) !important; }
.site-footer.style-3 .widget ul li a:hover,
.site-footer.style-3 .social-contact ul li a:hover { color: #63EA63 !important; }
.site-footer.style-3 .social-contact ul li a { color: #fff !important; }
.site-footer.style-3 .copyright-text { color: rgba(255,255,255,.6) !important; }
.site-footer.style-3 .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); }
.site-footer.style-3 .list-underline li a { border-bottom-color: rgba(255,255,255,.25); }
/* el botón outline-light debe verse sobre negro */
.site-footer.style-3 .btn-outline-light { color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.site-footer.style-3 .btn-outline-light:hover { background: #63EA63 !important; color: #171717 !important; border-color: #63EA63 !important; }

/* ===== 3GENIOS — tarjetas de portafolio ===== */
.portfolio-card .portfolio-giro{
  display:inline-block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:#171717; background:#63EA63; padding:.3rem .7rem;
  border-radius:100px; margin-bottom:.6rem;
}
.portfolio-card .portfolio-content .title{ margin-bottom:.5rem; }
.portfolio-card .portfolio-nota{
  font-size:.95rem; line-height:1.55; color:#171717; opacity:.85;
  max-width:46ch; margin-bottom:0;
}
.portfolio-card .media img{ width:100%; height:auto; border-radius:14px; display:block; }
[data-theme-version="dark"] .portfolio-card .portfolio-nota,
[data-theme-version="dark"] .portfolio-card .portfolio-content .title{ color:#fff; }

/* ===== 3GENIOS — legibilidad de las tarjetas de portafolio =====
   El contenido va encima de la captura: se necesita un velo oscuro. */
.portfolio-card{ position:relative; border-radius:16px; overflow:hidden; }
.portfolio-card .media{ position:absolute; inset:0; }
.portfolio-card .media img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.portfolio-card .media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.82) 55%, rgba(10,10,10,.94) 100%);
}
.portfolio-card .portfolio-content{
  position:relative; z-index:2; padding:2rem; align-self:flex-end; width:100%;
}
.portfolio-card .portfolio-content .title{ color:#fff !important; font-size:1.9rem; }
.portfolio-card .portfolio-nota{ color:rgba(255,255,255,.9) !important; opacity:1; }
.portfolio-card .portfolio-giro{ background:#63EA63; color:#171717; }
.portfolio-card .circle-button{ position:absolute; top:1.4rem; right:1.4rem; z-index:3; }
[data-theme-version="dark"] .portfolio-card .portfolio-nota{ color:rgba(255,255,255,.9) !important; }

/* altura util para que quepan captura + nota */
.portfolio-card{ min-height:520px; }
@media (max-width:767px){
  .portfolio-card{ min-width:88vw !important; min-height:460px; }
  .portfolio-card .portfolio-content{ padding:1.25rem; }
  .portfolio-card .portfolio-content .title{ font-size:1.45rem; }
  .portfolio-card .portfolio-nota{ font-size:.88rem; }
}

/* ===== 3GENIOS — el contenido del portafolio SIEMPRE visible =====
   El template lo escondía hasta el hover; en celular no hay hover y las
   notas de venta no se veían nunca. */
.portfolio-card .portfolio-content{
  position:relative !important;
  top:auto !important; left:auto !important;
  transform:none !important;
  align-items:flex-start !important;
  text-align:left !important;
  margin-top:auto;
}
.portfolio-card::before{ opacity:1 !important; background:transparent !important; }
.portfolio-card{ align-items:stretch !important; justify-content:flex-end !important; flex-direction:column; }
.portfolio-card:hover .media img{ transform:scale(1.04); }
.portfolio-card .media img{ transition:transform .5s ease; }

/* el botón circular no debe tapar la nota: arriba a la derecha y más chico */
.portfolio-card .portfolio-content .circle-button{
  position:absolute !important; top:1.2rem !important; right:1.2rem !important;
  left:auto !important; bottom:auto !important;
  width:56px !important; height:56px !important; z-index:5;
}
.portfolio-card .portfolio-content .circle-button .btn-arrow-icon svg{ width:20px; height:20px; }
.portfolio-card .portfolio-content{ padding-right:2rem; }

/* ===== 3GENIOS — tarjetas de paquete (Fase B) ===== */
.paq-card{
  position:relative; background:#171717; color:rgba(255,255,255,.82);
  border-radius:20px; padding:2.2rem 2rem; height:100%;
  display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.08);
}
.paq-card-destacado{ border:2px solid #63EA63; box-shadow:0 0 40px rgba(99,234,99,.18); }
.badge-destacado{
  position:absolute; top:-14px; left:2rem; background:#63EA63; color:#171717;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; padding:.4rem .9rem; border-radius:100px;
}
.paq-nombre{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#63EA63; font-weight:600; }
.paq-precio{ display:flex; align-items:baseline; gap:.5rem; margin:.4rem 0 .2rem; }
.paq-monto{ font-size:2.8rem; font-weight:700; color:#fff; line-height:1; }
.paq-iva{ font-size:.85rem; color:rgba(255,255,255,.55); }
.paq-gancho{ color:rgba(255,255,255,.8); margin-bottom:1rem; }
.paq-meta{ list-style:none; padding:0; margin:0 0 1.2rem; font-size:.9rem; }
.paq-meta li{ color:rgba(255,255,255,.7); margin-bottom:.25rem; }
.paq-meta strong{ color:#fff; }
.paq-lista-titulo{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:#63EA63; font-weight:600; margin-bottom:.6rem; }
.paq-lista ul{ list-style:none; padding:0; margin:0 0 1rem; }
.paq-lista li{ position:relative; padding-left:1.6rem; margin-bottom:.5rem;
  font-size:.94rem; line-height:1.45; color:rgba(255,255,255,.85); }
.paq-lista li::before{ content:"✓"; position:absolute; left:0; color:#63EA63; font-weight:700; }
.paq-excluye{ font-size:.85rem; color:rgba(255,255,255,.5); margin-bottom:1rem; }
.paq-excluye strong{ color:rgba(255,255,255,.7); }
.paq-cta{ margin-top:auto; justify-content:center; }
.paq-nota{ background:rgba(99,234,99,.10); border-left:4px solid #63EA63;
  border-radius:12px; padding:1.5rem; color:#2b2b2b; }
.paq-nota strong{ color:#171717; }
[data-theme-version="dark"] .paq-nota{ color:rgba(255,255,255,.85); }
[data-theme-version="dark"] .paq-nota strong{ color:#fff; }
@media (max-width:575px){ .paq-card{ padding:1.8rem 1.3rem; } .paq-monto{ font-size:2.2rem; } }

/* pasos del proceso en la ficha de paquete */
.paso-item{ display:flex; gap:1.2rem; align-items:flex-start; padding:1.1rem 1.3rem;
  background:rgba(99,234,99,.07); border-radius:14px; }
.paso-num{ flex:0 0 42px; height:42px; border-radius:50%; background:#63EA63; color:#171717;
  font-weight:700; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.paso-item h4{ font-size:1.08rem; }
[data-theme-version="dark"] .paso-item{ background:rgba(99,234,99,.10); }

/* ===== 3GENIOS — correcciones de contraste y forma ===== */

/* La nota del primer año quedaba blanco sobre verde clarito: ilegible */
.paq-nota{ background:#171717 !important; border-left:4px solid #63EA63;
  color:rgba(255,255,255,.88) !important; }
.paq-nota p, .paq-nota li{ color:rgba(255,255,255,.88) !important; }
.paq-nota strong{ color:#63EA63 !important; }
.paq-nota .paq-lista-titulo{ color:#63EA63 !important; }

/* Los CTA de paquete salían como rectángulos planos */
.paq-cta, .paq-card .btn{
  border-radius:100px !important; padding:.9rem 1.6rem !important;
  font-weight:600; border:none;
}

/* Los iconos de servicio traen su propio fondo negro: quitar el marco */
.service-card .icon-bx img, .dz-box .icon-bx img,
.icon-bx-wraper .icon-media img{ background:transparent; mix-blend-mode:screen; }

/* El banner verde plano de 'equipo regio' sin imagen se veía vacío */
.content-inner-1.overflow-hidden .section-head.style-1 .title{ color:#171717; }

/* ===== 3GENIOS — portafolio: que se vean TODAS las tarjetas =====
   El scroll horizontal de GSAP solo se activa en >=1920px
   (custom.js: matchMedia "(min-width: 1920px)"). Debajo de eso las
   tarjetas quedaban en fila fija, cortadas y sin poder avanzar.
   Solución: abajo de 1920px se acomodan en cuadrícula. */
@media (max-width: 1919px){
  .horizontal-section{ height:auto !important; }
  .horizontal-wrapper{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px !important;
    width:100% !important;
    transform:none !important;
  }
  .horizontal-wrapper .panel{
    min-width:0 !important; width:100% !important;
    flex:none !important; height:auto !important;
  }
  .horizontal-wrapper .portfolio-card{ min-height:440px; }
  /* el indicador de progreso circular no aplica sin scroll horizontal */
  .horizontal-section .circle-progress{ display:none !important; }
}
@media (max-width: 767px){
  .horizontal-wrapper{ grid-template-columns:1fr !important; }
  .horizontal-wrapper .portfolio-card{ min-height:400px; }
}

/* El velo tapaba por completo la captura del sitio del cliente.
   Ahora la imagen ocupa la parte de arriba y el texto va debajo. */
.portfolio-card{ background:#171717; }
.portfolio-card .media{ position:relative !important; inset:auto !important;
  height:230px; flex:0 0 230px; overflow:hidden; border-radius:16px 16px 0 0; }
.portfolio-card .media img{ height:100%; width:100%; object-fit:cover; object-position:top center; }
.portfolio-card .media::after{
  background:linear-gradient(180deg, rgba(23,23,23,0) 55%, rgba(23,23,23,.95) 100%) !important; }
.portfolio-card .portfolio-content{ padding:1.5rem !important; }
.portfolio-card .circle-button{ top:auto !important; bottom:1.2rem !important; right:1.2rem !important; }
@media (max-width:767px){ .portfolio-card .media{ height:190px; flex-basis:190px; } }

/* ===== 3GENIOS — CTA 'Cotiza tu página hoy mismo' =====
   El fondo ahora es una foto real; hace falta velo para que se lea. */
.bg-middel{ position:relative; }
.bg-middel::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.62) 50%, rgba(10,10,10,.88) 100%);
}
.bg-middel > *{ position:relative; z-index:2; }
.bg-middel .title{ color:#fff !important; }
.bg-middel .btn-primary{ background:#63EA63 !important; color:#171717 !important; border-color:#63EA63 !important; }

/* ===== 3GENIOS — precios en el home ===== */
.precio-card{ position:relative; display:flex; flex-direction:column; gap:.35rem;
  background:#171717; border:1px solid rgba(255,255,255,.10); border-radius:18px;
  padding:1.9rem 1.5rem; height:100%; text-decoration:none; transition:.25s; }
.precio-card:hover{ transform:translateY(-4px); border-color:#63EA63; }
.precio-card-destacado{ border:2px solid #63EA63; box-shadow:0 0 40px rgba(99,234,99,.18); }
.precio-badge{ position:absolute; top:-13px; left:1.4rem; background:#63EA63; color:#171717;
  font-size:.66rem; font-weight:700; letter-spacing:.1em; padding:.35rem .8rem; border-radius:100px; }
.precio-nom{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:#63EA63; font-weight:600; }
.precio-monto{ font-size:2.3rem; font-weight:700; color:#fff; line-height:1.05; }
.precio-iva{ font-size:.8rem; color:rgba(255,255,255,.62); }
.precio-desc{ font-size:.95rem; color:rgba(255,255,255,.85); margin-top:.5rem; }
.precio-ent{ font-size:.85rem; color:rgba(255,255,255,.62); }
.precio-cta{ margin-top:auto; padding-top:1rem; color:#63EA63; font-weight:600; font-size:.92rem; }
.precio-nota{ color:#171717; font-weight:500; margin-bottom:1rem; }
[data-theme-version="dark"] .precio-nota{ color:rgba(255,255,255,.85); }

/* ===== botón flotante de WhatsApp ===== */
.wa-flotante{ position:fixed; right:22px; bottom:22px; z-index:9999;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.28); transition:transform .2s; }
.wa-flotante:hover{ transform:scale(1.08); color:#fff; }
@media (max-width:575px){ .wa-flotante{ right:16px; bottom:16px; width:52px; height:52px; } }
/* que no se encime con el botón de volver arriba */
#scrollProgress, .scroltop{ bottom:92px !important; }

/* ===== 3GENIOS — video de fondo en el CTA de cotización ===== */
.bg-middel-video{ overflow:hidden; }
.bg-middel-video .bg-middel-vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
.bg-middel-video::before{ z-index:1; }
@media (prefers-reduced-motion: reduce){
  .bg-middel-video .bg-middel-vid{ display:none; }
}

/* ===== 3GENIOS — video del equipo en Nosotros ===== */
.dz-media-video video{ object-fit:cover; border-radius:inherit; display:block; }

/* ===== 3GENIOS — tarjetas de precio en el home =====
   Reusan el diseño de paquetes.html, compactadas para caber en 4 columnas. */
.paq-card-home{ padding:1.6rem 1.4rem; }
.paq-card-home .paq-monto{ font-size:2rem; }
.paq-card-home .paq-gancho{ font-size:.92rem; min-height:3.2em; }
.paq-card-home .paq-lista ul{ margin-bottom:0; }
.paq-card-home .paq-lista li{ font-size:.88rem; }
.paq-card-home .paq-meta{ margin-bottom:.9rem; }
.paq-card-home .paq-cta{ margin-top:auto; }
.paq-card-home .paq-detalle{
  display:block; text-align:center; margin-top:.7rem;
  font-size:.85rem; color:#63EA63; text-decoration:underline;
}
.paq-card-home .paq-detalle:hover{ color:#7ef07e; }
.precios-section .precio-nota{ margin-top:.5rem; margin-bottom:1.4rem; }
@media (min-width:1200px){
  .paq-card-home .paq-gancho{ min-height:4.2em; }
}

/* ===== 3GENIOS — sin animación para quien la desactivó ===== */
@media (prefers-reduced-motion: reduce){
  .wow{ opacity:1 !important; animation:none !important; }
}

/* ===== 3GENIOS — tarjetas de prueba verificable =====
   Sustituyen a los testimonios: cada una lleva un dato comprobable
   y liga al sitio real del cliente. */
.prueba-card{
  display:flex; flex-direction:column; height:100%;
  background:#171717; border:1px solid rgba(255,255,255,.10);
  border-radius:18px; padding:1.7rem 1.5rem; transition:.25s;
}
.prueba-card:hover{ transform:translateY(-4px); border-color:#63EA63; }
.prueba-dato{
  display:inline-block; align-self:flex-start; margin-bottom:.9rem;
  background:rgba(99,234,99,.14); color:#63EA63;
  border:1px solid rgba(99,234,99,.35); border-radius:999px;
  padding:.35rem .85rem; font-size:.76rem; font-weight:600; letter-spacing:.04em;
}
.prueba-nom{ color:#fff; font-size:1.35rem; margin:0 0 .6rem; }
.prueba-desc{ color:rgba(255,255,255,.82); font-size:.95rem; line-height:1.6; margin-bottom:1.1rem; }
.prueba-link{
  margin-top:auto; color:#63EA63; font-weight:600; font-size:.9rem;
  text-decoration:none; display:inline-flex; align-items:center; gap:.35rem;
}
.prueba-link:hover{ color:#7ef07e; text-decoration:underline; }

/* ===== 3GENIOS — franja de confianza bajo el hero =====
   Sube a portada las tres objeciones que antes vivían en la FAQ. */
.confianza-franja{ background:#171717; padding:2.2rem 0; }
.confianza-lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.confianza-lista li{
  padding-left:1.1rem; border-left:3px solid #63EA63;
}
.confianza-lista strong{
  display:block; color:#63EA63; font-size:1rem; margin-bottom:.3rem;
}
.confianza-lista span{
  display:block; color:rgba(255,255,255,.78); font-size:.88rem; line-height:1.5;
}
@media (max-width:991px){ .confianza-lista{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px){ .confianza-lista{ grid-template-columns:1fr; gap:1.1rem; } }

/* El costo del año 2 va junto al precio, no escondido en la FAQ. */
.precio-nota-ano2{
  display:block; margin-top:.5rem; font-size:.88rem;
  color:rgba(23,23,23,.72); font-weight:400; max-width:62ch;
  margin-left:auto; margin-right:auto; line-height:1.55;
}
[data-theme-version="dark"] .precio-nota-ano2{ color:rgba(255,255,255,.72); }

/* ===== 3GENIOS — marco para los videos de sección ===== */
.video-marco{
  position:relative; width:100%; overflow:hidden;
  border-radius:20px; background:#171717; line-height:0;
}
.video-marco video{
  width:100%; height:auto; display:block;
}
@media (max-width:575px){ .video-marco{ border-radius:14px; } }

/* El intro de Contacto va sobre fondo claro: necesita contraste real. */
.contacto-intro{ color:#171717 !important; opacity:1 !important; font-size:1.02rem; }
[data-theme-version="dark"] .contacto-intro{ color:rgba(255,255,255,.85) !important; }