/* =========================
   Reset & base
========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: #333; background: #fafafa; overflow-x: hidden; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* =========================
   Header & navegación
========================= */
header.sticky {
  position: sticky; top: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e0e0e0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
header .container { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; }
.logo { height: 80px; transition: transform 0.3s; }
.logo:hover { transform: scale(1.05); }

nav ul { list-style: none; display: flex; gap: 25px; }
nav a { text-decoration: none; color: #333; font-weight: 600; position: relative; }
nav a::after {
  content: ""; display: block; width: 0; height: 2px; background: #34a853;
  transition: width 0.3s; position: absolute; bottom: -5px; left: 0;
}
nav a:hover::after { width: 100%; }

/* --- Estado activo para SPA (#hash) --- */
nav a.active { color:#111; }
nav a.active::after { width:100%; }

.menu-toggle { display: none; font-size: 2rem; cursor: pointer; }

@media (max-width: 768px) {
  header .container { padding: 10px 0; }
  .logo { height: 64px; }
  nav { display: none; flex-direction: column; position: absolute; top: 100%; right: 0; background: #fff;
        width: 88vw; max-width: 320px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
  nav.active { display: flex; }
  nav ul { flex-direction: column; gap: 16px; padding: 20px; }
  .menu-toggle { display: block; }
}

/* =========================
   Botones globales
========================= */
.btn-primary,
a.btn-primary {
  display:inline-block; border:0; border-radius:999px; padding:14px 20px; font-weight:600;
  background: linear-gradient(90deg, #7b61ff, #ffb503); color:#111; text-decoration:none; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-outline {
  background: transparent; border: 1px solid currentColor; color: inherit;
  padding: 14px 20px; border-radius: 999px; font-weight: 600; text-decoration: none;
}

/* =========================
   Secciones / hero video
========================= */
/* HOME — Video hero (full-bleed en desktop; seguro en móvil) */
.video-hero{
  position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  height:82vh; min-height:420px; display:grid; place-items:center; overflow:hidden; background:#0f0f12;
}
.video-hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55);}
.video-hero .inner{position:relative; z-index:1; text-align:center; color:#fff; padding:0 16px;}
.video-hero h1{font-size:clamp(28px,5vw,52px); line-height:1.05; margin:0 0 8px;}
.video-hero p{font-size:clamp(16px,2vw,20px); opacity:.95; max-width:920px; margin:0 auto 16px;}
.video-hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px;}

/* Evitar desbordamiento lateral en móviles por 100vw */
@media (max-width: 768px){
  .video-hero{
    width:100%;
    left:auto; right:auto; margin-left:0; margin-right:0;
    height:68vh; min-height:360px;
  }
}

/* =========================
   Feature rows
========================= */
.feature-row{display:grid; gap:28px; align-items:center; grid-template-columns: 1.15fr 1fr; padding:48px 0;}
.feature-row.reverse{grid-template-columns:1fr 1.15fr;}
.feature-media{border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.18); background:#101114;}
.feature-media img, .feature-media video{display:block; width:100%; height:100%; object-fit:cover;}
.feature-copy h2,.feature-copy h3{margin:0 0 8px; font-size:clamp(22px,3.2vw,34px);}
.feature-copy p{margin:0 0 10px; opacity:.9;}
.feature-copy ul{margin:8px 0 0 18px;}
.feature-copy li{margin:4px 0;}
@media (max-width: 980px){
  .feature-row,.feature-row.reverse{grid-template-columns: 1fr; padding:28px 0;}
}

/* =========================
   Listas y apps
========================= */
.service-list{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.service-item{
  background:#fff; padding: 22px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-item:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.service-item h3{ margin:0 0 8px; color:#34a853; font-size: 1.1rem; }
.service-item p{ color:#555; margin:0; }

/* --- Iconos de servicios (Ciberseguridad) --- */
.service-item .service-icon{
  width: 48px; height: 48px; object-fit: contain; display:block;
  margin-bottom: 10px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}
@media (min-width: 1100px){
  .service-item .service-icon{ width: 56px; height: 56px; }
}

/* Apps */
.apps-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.app-card{ background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; }
.app-card h4{ margin:0 0 6px; font-size:14px; color:#111; }
.app-card p{ margin:0; color:#555; font-size:13px; }

/* =========================
   Animaciones scroll
========================= */
[data-animate]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.animate-in{opacity:1 !important; transform:none !important;}

/* =========================
   CONTACTO — fondo detrás, contenido delante
========================= */
.contact-hero{
  position: relative;
  isolation: isolate;
  background: none !important;
  overflow: hidden;
  padding: clamp(60px, 6vw, 120px) 0;
}
.contact-hero::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background: url('images/custom/contact-bg.png') center/cover no-repeat;
  border-radius: inherit;
}
.contact-hero .contact-overlay{
  position: absolute; inset: 0;
  z-index: -1 !important;
  pointer-events: none;
  background: rgba(17,17,17,.35);
  backdrop-filter: blur(1px);
}
.contact-hero .contact-wrapper{
  position: relative; z-index: 1 !important;
  display:grid; gap:28px;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 520px);
  align-items:start;
}
@media (max-width: 920px){
  .contact-hero .contact-wrapper{ grid-template-columns: 1fr; }
}
.contact-copy h2{ color:#fff; font-size: clamp(28px, 4vw, 40px); margin:0 0 8px; }
.contact-copy p, .contact-copy li{ color:#f0f0f0; }
.contact-copy ul{ list-style:none; padding:0; margin:12px 0 0; }

/* Tarjeta de contacto */
.contact-card{
  background:#fff; border:1px solid #e6e6e9; border-radius:16px; padding:22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.contact-card h3{ margin:0 0 8px; font-size:20px; color:#111; }
.contact-card p{ margin:0 0 14px; color:#444; }
.contact-email{ font-size:18px; font-weight:600; margin-bottom:14px; color:#111; }
.contact-card a{ color:#111; text-decoration:underline; font-weight:600; }
.contact-card .mailto,
a.mailto{
  display:inline-block; border:0; border-radius:999px; padding:12px 18px; font-weight:600;
  background: linear-gradient(90deg, #7b61ff, #ffb503); color:#111; text-decoration:none; box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.contact-card .mailto:hover,
a.mailto:hover{ transform: translateY(-1px); }

/* El ancla del prefooter no se tapa con el header sticky */
.contact-prefooter{ scroll-margin-top: 120px; }

/* Forzar visible el prefooter aunque alguien añada data-animate por error */
#prefooter-contact .contact-wrapper{
  opacity: 1 !important;
  transform: none !important;
}
#prefooter-contact{ position:relative !important; isolation:isolate !important; }
#prefooter-contact .contact-overlay{ z-index:-1 !important; pointer-events:none !important; }
#prefooter-contact .contact-wrapper{ z-index:10 !important; position:relative !important; }

/* =========================
   FOOTER — blanco, ancho total, 3 columnas (centro más grande)
========================= */
.site-footer{
  background:#fff !important;
  color:#111 !important;
  text-align: left;
  padding:36px 0;
  margin-top:40px;
}
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer .footer-inner{
  width: calc(100% - 40px);
  max-width: none;
  margin: 0 auto;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr minmax(260px, clamp(380px, 26vw, 560px)) 1fr;
  gap:32px;
  align-items:center;
}
.footer-left{ font-size:12.5px; line-height:1.55; justify-self: start; }
.footer-left p{ margin:0; }
.footer-media img{ width:auto; height:auto; display:block; }
.footer-media.center{ justify-self: center; text-align: center; }
.footer-media.right{ justify-self: end; }
.footer-media.center img{ max-height: clamp(150px, 20vw, 230px); }
.footer-media.right  img{ max-height: 90px; }
@media (max-width:920px){
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .footer-media.center{ order: -1; }
  .footer-media.center img{ max-height: 180px; }
  .footer-media.right img{ max-height: 72px; }
  .footer-media img{ margin: 10px auto 0; }
}

/* =========================
   CIBERSEGURIDAD — HERO (también full-bleed seguro)
========================= */
.cyber-hero{
  position: relative;
  width:100vw; left:50%; margin-left:-50vw;
  height:88vh; min-height:520px;
  display:grid; place-items:center; overflow:hidden;
  color:#fff; background:#0b1e3a url('images/custom/banerseguridad.png') center/cover no-repeat;
}
.cyber-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(1200px 600px at 70% 35%, rgba(24,64,128,.35), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}
.cyber-hero .inner{ position:relative; z-index:1; text-align:center; padding:0 16px; max-width:1100px; }
.cyber-hero h1{ font-size:clamp(30px,5.2vw,56px); line-height:1.05; margin:0 0 10px; }
.cyber-hero p{ font-size:clamp(16px,2vw,20px); opacity:.95; margin:0 auto 10px; max-width:900px; }
.cyber-hero .tagline{ font-weight:700; letter-spacing:.2px; margin-top:6px; }
.cyber-hero .cta{ margin-top:14px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
@media (max-width: 920px){
  .cyber-hero{ height:72vh; min-height:460px; }
}
@media (max-width: 768px){
  .cyber-hero{
    width:100%;
    left:auto; margin-left:0;
  }
}

/* =========================
   Odoo Gold Partner section (HOME)
========================= */
.section { padding: clamp(48px, 6vw, 96px) 0; }

/* HOME — grid principal y métricas responsivas */
.gold-partner .gold-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 960px){
  .gold-partner .gold-grid { grid-template-columns: 1fr; }
}

.gold-partner .gold-badge h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 8px;
}
.gold-partner .gold-badge .lead {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  opacity: .9;
}

/* HOME — métricas: 2 cols en tablet, 1 col en móviles pequeños */
.gold-partner .gold-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 16px;
}
@media (min-width: 1100px){
  .gold-partner .gold-metrics { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
}
@media (max-width: 420px){
  .gold-partner .gold-metrics { grid-template-columns: 1fr; }
}

.gold-partner .metric {
  background: var(--card-bg, rgba(0,0,0,.04));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  padding: clamp(16px, 3.4vw, 20px);
  text-align: center;
  backdrop-filter: saturate(120%) blur(2px);
}
:root[data-theme="dark"] .gold-partner .metric {
  --card-bg: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
.gold-partner .kpi {
  display: block;
  font-weight: 700;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1;
}
.gold-partner .label {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  opacity: .8;
}

/* =========================
   AI Consulting cover (HOME)
========================= */
.ai-cover {
  position: relative;
  color: var(--ai-color, #fff);
  overflow: clip;
  /* más respiración en móvil */
  padding: clamp(40px, 6vw, 80px) 0;
}
.ai-cover .ai-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('https://www.predictland.com/wp-content/uploads/frequency-wave-7776034_1920.jpg');
  background-size: cover;
  background-position: center;
  filter: saturate(105%);
  z-index: 0;
}
.ai-cover .ai-inner {
  position: relative;
  z-index: 1;
}
.ai-cover .eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  opacity: .9;
  margin: 0 0 4px;
}
.ai-cover .title {
  font-size: clamp(28px, 4.8vw, 56px);
  line-height: 1.1;
  margin: 0 0 10px;
}
.nowrap { white-space: nowrap; }
.ai-cover .lead {
  font-size: clamp(16px, 2vw, 20px);
  opacity: .95;
  margin-bottom: 24px;
}

/* HOME — grid de features + links totalmente fluida */
.features-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px,1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1200px) { .features-grid { grid-template-columns: repeat(4, minmax(160px,1fr)); } }
@media (max-width: 720px)  { .features-grid { grid-template-columns: repeat(2, minmax(140px,1fr)); gap: 12px; } }
@media (max-width: 380px)  { .features-grid { grid-template-columns: 1fr; } }

.feature {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature .icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  margin: 0 auto;
}
.feature p { margin: 0; font-size: 14px; line-height: 1.4; }
.feature strong { display: inline-block; }

.ai-links {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px,1fr));
  gap: 16px;
}
@media (max-width: 900px) { .ai-links { grid-template-columns: 1fr; } }
.ai-link {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 4px;
  transition: transform .2s ease, background .2s ease;
}
.ai-link:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }

/* Shared container if not present */
.container { width: min(1100px, 92vw); margin-inline: auto; }