/* ===================================================================
   CIBERGOB — Estilos compartidos de la web multipágina
   =================================================================== */
* { margin:0; padding:0; box-sizing:border-box; }
:root { --blue:#1e6fd9; --cyan:#38bdf8; --navy:#0e1c38; --ink:#161d2e; --muted:#5a6378; --line:#e7ecf4; }
html { scroll-behavior:smooth; }
body { font-family:"Inter",sans-serif; color:var(--ink); background:#fff; }
h1,h2,h3,.eyebrow { font-family:"Space Grotesk",sans-serif; }
.kw { font-family:"Quicksand",sans-serif; font-weight:700; }
a { text-decoration:none; color:inherit; }
.container { max-width:1180px; margin:0 auto; padding:0 56px; }
.btn { font-weight:600; border-radius:9px; padding:15px 28px; font-size:1rem; font-family:"Space Grotesk",sans-serif; display:inline-block; transition:.2s; cursor:pointer; }
.btn--primary { background:var(--blue); color:#fff; } .btn--primary:hover { background:#195fbd; }
.btn--white { background:#fff; color:var(--blue); } .btn--ghost { border:1px solid #cfd8e6; color:var(--ink); }
.link-strong { color:var(--blue); font-weight:600; }

/* ---- Barra superior (multipágina) ---- */
.nav { display:flex; align-items:center; gap:24px; padding:14px 56px; border-bottom:1px solid #eef1f6; position:sticky; top:0; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); z-index:80; }
.nav__logo img { height:38px; display:block; }
.nav__menu { margin-left:auto; }
.nav__menu > ul { display:flex; gap:22px; list-style:none; font-size:.85rem; font-weight:600; align-items:center; }
.drop { list-style:none; }
.nav__menu a { color:#44506b; padding:6px 0; }
.nav__menu a:hover, .nav__menu a.active { color:var(--blue); }
.has-drop { position:relative; }
.has-drop > a::after { content:"\25be"; margin-left:6px; font-size:.7em; color:#9aa3b5; }
.drop { position:absolute; top:100%; left:0; min-width:230px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 44px rgba(13,30,60,.14); padding:8px; display:none; flex-direction:column; gap:2px; }
.has-drop:hover > .drop { display:flex; }
.drop li a { display:block; padding:10px 12px; border-radius:8px; font-size:.9rem; }
.drop li a:hover { background:#f3f7ff; }
.has-sub { position:relative; }
.has-sub > a { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.has-sub > a::after { content:"\203a"; color:#9aa3b5; font-size:1.1em; }
.drop--right { top:-8px; left:100%; min-width:200px; }
.has-sub:hover > .drop--right { display:flex; }
.nav__right { display:flex; align-items:center; gap:16px; }
.nav__promise { font-size:.78rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.nav__promise b { color:var(--ink); }
.nav__cta { background:var(--blue); color:#fff!important; padding:11px 20px; border-radius:8px; font-size:.85rem; white-space:nowrap; }
.nav__cta:hover { background:#195fbd; }
.nav__burger { display:none; margin-left:auto; background:none; border:0; font-size:1.5rem; color:var(--ink); cursor:pointer; }

/* ---- Hero home ---- */
.hero { position:relative; overflow:hidden; background:#fff; }
.hero__mesh { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(600px 420px at 88% 6%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(640px 540px at 76% 28%, rgba(30,111,217,.13), transparent 62%),
    radial-gradient(520px 500px at 4% 98%, rgba(30,111,217,.07), transparent 60%); }
.hero__grid { max-width:1180px; margin:0 auto; padding:84px 56px 66px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; position:relative; z-index:2; }
.hero__copy { text-align:center; }
.eyebrow { display:inline-block; color:var(--blue); font-weight:600; font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:22px; }
.hero h1 { font-size:3.6rem; font-weight:700; line-height:1.04; letter-spacing:-1.4px; }
.hero .sub { margin:22px auto 0; font-size:1.16rem; color:var(--muted); line-height:1.65; max-width:500px; }
.hero__btns { margin-top:32px; display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; }
.hero__seg { margin-top:14px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.radar { position:relative; height:400px; display:flex; align-items:center; justify-content:center; }
.radar__grid { position:absolute; width:340px; height:340px; border-radius:50%; border:1px solid rgba(30,111,217,.16);
  background:
    linear-gradient(rgba(30,111,217,.10),rgba(30,111,217,.10)) center/100% 1px no-repeat,
    linear-gradient(rgba(30,111,217,.10),rgba(30,111,217,.10)) center/1px 100% no-repeat; }
.radar__grid::before { content:""; position:absolute; inset:56px; border-radius:50%; border:1px solid rgba(30,111,217,.13); }
.radar__grid::after { content:""; position:absolute; inset:112px; border-radius:50%; border:1px solid rgba(30,111,217,.11); }
.radar__sweep { position:absolute; width:340px; height:340px; border-radius:50%; z-index:2;
  background:conic-gradient(from 0deg, rgba(56,189,248,0) 0deg 300deg, rgba(56,189,248,.22) 360deg);
  -webkit-mask:radial-gradient(circle, #000 99%, transparent 100%); mask:radial-gradient(circle, #000 99%, transparent 100%);
  animation:sweep 4s linear infinite; }
@keyframes sweep { to { transform:rotate(360deg); } }
.radar__spiral { width:220px; height:220px; object-fit:contain; position:relative; z-index:3; filter:drop-shadow(0 12px 30px rgba(30,111,217,.28)); }
.ring { position:absolute; border:2px solid rgba(30,111,217,.32); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); animation:pulse 4s ease-out infinite; z-index:2; }
.ring.r2 { animation-delay:1.3s; } .ring.r3 { animation-delay:2.6s; }
@keyframes pulse { 0%{width:230px;height:230px;opacity:.5} 100%{width:520px;height:520px;opacity:0} }

/* ---- Hero de páginas internas ---- */
.page-hero { position:relative; overflow:hidden; background:#fff; border-bottom:1px solid #eef1f6; }
.page-hero .container { padding-top:64px; padding-bottom:54px; text-align:center; position:relative; z-index:2; }
.page-hero h1 { font-size:2.8rem; line-height:1.08; letter-spacing:-1px; max-width:760px; margin:14px auto 0; }
.page-hero .sub { margin:18px auto 0; max-width:600px; color:var(--muted); font-size:1.12rem; line-height:1.6; }
.page-hero .hero__btns { margin-top:28px; }

/* ---- Trust ---- */
.trust { border-top:1px solid #eef1f6; }
.trust__in { max-width:1180px; margin:0 auto; padding:26px 56px 42px; }
.trust__lead { text-align:center; font-size:.76rem; text-transform:uppercase; letter-spacing:1.2px; color:#9aa3b5; margin-bottom:22px; font-weight:600; }
.trust__logos { display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap; }
.trust__logos img { height:42px; filter:grayscale(1) opacity(.55); transition:filter .25s; }
.trust__logos img:hover { filter:grayscale(0) opacity(1); }

/* ---- Secciones ---- */
.section { padding:4rem 0; }
.quote-sec { padding:3.2rem 0; text-align:center; }
.section--alt { background:#fbfcff; }
.section--navy { background:radial-gradient(700px 300px at 80% 0%, rgba(56,189,248,.16), transparent), linear-gradient(160deg,#0e1c38,#0b1530); color:#fff; }
.head { text-align:center; max-width:700px; margin:0 auto 3rem; }
.head .eyebrow { display:inline-block; }
.head h2 { font-size:2.3rem; font-weight:700; letter-spacing:-.6px; }
.head p { color:var(--muted); margin-top:14px; font-size:1.08rem; line-height:1.6; }

/* ---- Dos caminos ---- */
.caminos { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1080px; margin:0 auto; }
.camino { display:block; background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; box-shadow:0 10px 30px rgba(22,29,46,.05); transition:transform .2s, box-shadow .2s; color:inherit; }
.camino:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(22,29,46,.10); }
.camino .ic i { color:var(--blue); font-size:1.3rem; }
.camino h3 { font-size:1.3rem; margin-bottom:10px; }
.camino p { color:var(--muted); font-size:1rem; line-height:1.6; margin-bottom:18px; }
.camino__cta { color:var(--blue); font-weight:600; font-family:"Space Grotesk",sans-serif; }

/* ---- Tarjetas ---- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cards--2 { grid-template-columns:repeat(2,1fr); max-width:880px; margin:0 auto; }
.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:0 10px 30px rgba(22,29,46,.05); transition:transform .2s, box-shadow .2s; }
.card:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(22,29,46,.10); }
.ic { width:46px; height:46px; border-radius:12px; background:#eaf2ff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.ic i { color:var(--blue); font-size:1.3rem; }
.card h3 { font-size:1.12rem; margin-bottom:8px; }
.card p { color:var(--muted); font-size:.95rem; line-height:1.55; }

/* ---- Pilares ---- */
.pilares { display:grid; grid-template-columns:repeat(3,1fr); gap:44px; max-width:1080px; margin:0 auto; text-align:center; }
.pilar i { font-size:2.7rem; color:var(--blue); }
.pilar h3 { font-size:1.25rem; margin:20px 0 12px; }
.pilar p { color:var(--muted); font-size:.98rem; line-height:1.65; }

/* ---- Paneles servicios ---- */
.panels { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1180px; margin:0 auto; padding:0 56px 4.5rem; }
.panel { min-height:380px; display:flex; flex-direction:column; justify-content:center; padding:46px; color:#fff; border-radius:18px; overflow:hidden; box-shadow:0 18px 44px rgba(13,30,60,.18); }
.panel.emp { background:linear-gradient(160deg,#0e7490 0%,#0b5566 100%); }
.panel.pub { background:linear-gradient(160deg,#16294d 0%,#0b1733 100%); }
.panel__c { max-width:420px; margin:0 auto; width:100%; text-align:center; }
.panel h3 { font-size:1.8rem; font-weight:700; line-height:1.14; margin-bottom:24px; color:#fff; }
.panel ul { list-style:none; margin-bottom:30px; }
.panel li { padding:9px 0; font-size:1.05rem; display:flex; gap:12px; align-items:center; justify-content:center; }
.panel li::before { content:"\2713"; color:#fff; font-weight:700; }
.panel .btn { background:#fff; color:#15294d; text-transform:uppercase; letter-spacing:.5px; font-size:.85rem; }

/* ---- Pasos (fases MADAC) ---- */
.steps { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.step { display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:0 8px 24px rgba(22,29,46,.04); }
.step__n { flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:700; display:flex; align-items:center; justify-content:center; }
.step h3 { font-size:1.08rem; margin-bottom:4px; }
.step p { color:var(--muted); font-size:.95rem; line-height:1.55; }

/* ---- Contador ---- */
.contador { background:linear-gradient(160deg,#2d6abf 0%,#3a8ae8 55%,#5aa8f5 100%); padding:4rem 0; }
.contador__title { font-family:"Space Grotesk"; color:#fff; text-align:center; font-size:clamp(1.4rem,3vw,1.8rem); font-weight:700; line-height:1.3; max-width:780px; margin:0 auto 3rem; }
.counters-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); border-radius:14px; overflow:hidden; }
.counter-cell { background:rgba(255,255,255,.10); padding:2.4rem 1rem; text-align:center; transition:background .2s; }
.counter-cell:hover { background:rgba(255,255,255,.18); }
.counter-num { font-family:"Space Grotesk"; font-size:clamp(2.6rem,5vw,3.4rem); font-weight:700; color:#fff; line-height:1; margin-bottom:8px; letter-spacing:-1px; }
.counter-lbl { font-size:.9rem; color:rgba(255,255,255,.88); }

/* ---- Cita ---- */
.quote { font-family:"Space Grotesk"; font-size:1.9rem; font-weight:500; line-height:1.4; max-width:840px; margin:0 auto; letter-spacing:-.4px; }
.quote__who { color:var(--muted); margin-top:18px; font-weight:600; }

/* ---- Clientes ---- */
.client-logos { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.logo-cell { background:#fff; border:1px solid var(--line); border-radius:14px; min-height:92px; display:flex; align-items:center; justify-content:center; padding:16px; box-shadow:0 8px 24px rgba(22,29,46,.05); transition:transform .2s; cursor:pointer; }
.logo-cell:hover { transform:translateY(-4px); }
.logo-cell img { max-width:82%; max-height:50px; object-fit:contain; filter:grayscale(.6) opacity(.72); transition:filter .25s; }
.logo-cell:hover img { filter:grayscale(0) opacity(1); }
.logo-cell .logo-text { font-weight:700; color:#15294d; font-size:1.05rem; text-align:center; letter-spacing:.2px; }
.logo-cell--extra { display:none; }
.ver-mas-wrap { text-align:center; margin-top:28px; }
.ver-mas { background:#fff; border:1px solid #cfd8e6; color:var(--ink); padding:12px 26px; border-radius:9px; font-weight:600; font-family:"Space Grotesk",sans-serif; cursor:pointer; font-size:.95rem; transition:.2s; }
.ver-mas:hover { background:#f6f9ff; border-color:var(--blue); color:var(--blue); }

/* ---- Noticias ---- */
.noticias-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.noticia { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:0 10px 30px rgba(22,29,46,.05); transition:transform .2s, box-shadow .2s; }
.noticia:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(22,29,46,.10); }
.noticia__fecha { color:var(--blue); font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; }
.noticia h3 { font-size:1.12rem; margin-bottom:10px; line-height:1.32; }
.noticia p { color:var(--muted); font-size:.95rem; line-height:1.55; margin-bottom:14px; }
.noticia__cliente { font-size:.8rem; font-weight:600; color:var(--blue); background:#eaf2ff; padding:5px 12px; border-radius:20px; display:inline-block; }
.noticia__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:4px; }
.noticia__more { color:var(--blue); font-weight:600; font-family:"Space Grotesk",sans-serif; font-size:.9rem; white-space:nowrap; }
.noticia__more:hover { text-decoration:underline; }

/* ---- Artículo individual ---- */
.article { max-width:760px; margin:0 auto; }
.article__meta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.article__body p { color:var(--ink); line-height:1.8; margin-bottom:18px; font-size:1.05rem; }
.article__body h2,.article__body h3 { font-family:"Space Grotesk",sans-serif; margin:28px 0 12px; line-height:1.3; }
.article__body ul { margin:0 0 18px 22px; color:var(--ink); line-height:1.85; }
.article__body li { margin-bottom:6px; }
.article__body blockquote { border-left:3px solid var(--blue); padding-left:16px; margin:0 0 18px; color:var(--muted); font-style:italic; }
.article__back { display:inline-block; margin-top:6px; }

/* ---- CTA ---- */
.cta { background:linear-gradient(135deg,var(--blue),#3a8ae8); color:#fff; text-align:center; border-radius:24px; padding:4rem 2rem; }
.cta h2 { font-size:2.2rem; margin-bottom:14px; }
.cta p { opacity:.92; margin-bottom:26px; font-size:1.1rem; }

/* ---- FAQ ---- */
.faq { max-width:820px; margin:0 auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:12px; padding:0 22px; margin-bottom:14px; box-shadow:0 6px 18px rgba(22,29,46,.04); }
.faq summary { list-style:none; cursor:pointer; padding:20px 0; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--blue); font-size:1.6rem; font-weight:400; line-height:1; }
.faq details[open] summary::after { content:"\2013"; }
.faq details p { color:var(--muted); line-height:1.65; padding:0 0 22px; margin:0; font-size:.98rem; }

/* ---- Prosa / contenido ---- */
.prose { max-width:760px; margin:0 auto; }
.prose p { color:var(--muted); line-height:1.75; margin-bottom:18px; font-size:1.02rem; }
.prose h2 { font-size:1.7rem; margin:34px 0 14px; }
.prose ul { margin:0 0 18px 20px; color:var(--muted); line-height:1.8; }

/* ---- Borrador (pendiente de dato) ---- */
.borrador { max-width:760px; margin:0 auto; background:#fff7e6; border:1px dashed #e6b94a; border-radius:14px; padding:26px 28px; color:#7a5a12; }
.borrador b { color:#5a4209; }

/* ---- Formulario contacto ---- */
.form { max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.form input, .form textarea { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; font-size:1rem; font-family:"Inter",sans-serif; }
.form textarea { min-height:120px; resize:vertical; }
.form .priv { font-size:.82rem; color:var(--muted); }

/* ---- Footer ---- */
.footer { background:#000; color:#cfd3da; padding:52px 0 30px; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.f-logo { height:62px; width:auto; }
.f-right { display:flex; align-items:center; gap:46px; flex-wrap:wrap; }
.f-seals { display:flex; align-items:center; gap:18px; }
.f-seals img { height:74px; width:auto; }
.f-nav { display:flex; gap:26px; font-size:.92rem; font-weight:600; flex-wrap:wrap; }
.f-nav a { color:#fff; } .f-nav a:hover { color:#5fa0ff; }
.f-divider { border:none; border-top:1px dotted rgba(255,255,255,.3); margin:30px 0 22px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.9rem; color:#9aa0aa; }
.footer-legal { display:flex; gap:30px; flex-wrap:wrap; }
.footer-legal a { color:#cfd3da; } .footer-legal a:hover { color:#fff; }
.to-top { position:fixed; right:24px; bottom:24px; width:44px; height:44px; border-radius:8px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; box-shadow:0 8px 20px rgba(0,0,0,.3); z-index:60; }

/* ---- Animación ---- */
.anim { opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.22,.68,0,1.1), transform .6s cubic-bezier(.22,.68,0,1.1); }
.anim.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .anim{opacity:1;transform:none} .ring,.radar__sweep,.radar__spiral{animation:none} }

/* ---- Responsive ---- */
@media (max-width:980px){
  .nav { gap:14px; padding:14px 22px; }
  .nav__burger { display:block; }
  .nav__menu { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); padding:12px 22px 18px; box-shadow:0 18px 30px rgba(13,30,60,.10); }
  .nav.open .nav__menu { display:block; }
  .nav__menu > ul { flex-direction:column; align-items:flex-start; gap:6px; }
  .drop { position:static; box-shadow:none; border:0; padding:4px 0 4px 14px; min-width:0; }
  .has-drop > a::after { content:""; }
  .nav__right .nav__promise { display:none; }
}
@media (max-width:900px){
  .container { padding:0 24px; }
  .hero__grid{grid-template-columns:1fr; padding:54px 24px 48px} .radar{order:-1;height:300px}
  .radar__grid,.radar__sweep{width:262px;height:262px} .radar__spiral{width:168px;height:168px}
  .radar__grid::before{inset:44px} .radar__grid::after{inset:88px}
  .cards{grid-template-columns:1fr} .cards--2{grid-template-columns:1fr} .pilares{grid-template-columns:1fr; gap:34px}
  .panels{grid-template-columns:1fr; padding:0 24px 3rem} .caminos{grid-template-columns:1fr} .counters-grid{grid-template-columns:repeat(2,1fr)}
  .client-logos{grid-template-columns:repeat(3,1fr)} .noticias-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.6rem} .page-hero h1{font-size:2.1rem}
}