/*
Theme Name: AlgoritmoIADigital
Theme URI: https://algoritmoiadigital.com
Author: AlgoritmoIADigital
Author URI: https://algoritmoiadigital.com
Description: Tema profesional de automatización IA para PYMEs. Diseño oscuro tech con estética cian/azul.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: algoritmoiadigital
Tags: dark, business, technology, one-page, responsive
*/

/* ─── VARIABLES ─── */
:root {
  --bg:        #060c18;
  --surface:   #0b1526;
  --surface2:  #0f1d35;
  --cyan:      #00d4c8;
  --blue:      #1a8cff;
  --white:     #f0f4ff;
  --muted:     #6a7d9e;
  --border:    rgba(0,212,200,0.15);
  --border2:   rgba(255,255,255,0.06);
  --cyan-glow: rgba(0,212,200,0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── PAGE BG ─── */
.page-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.page-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,200,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,200,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
}
.page-bg::after {
  content: ''; position: absolute; top: -20%; left: -10%; width: 60%; height: 60%;
  background: radial-gradient(ellipse, rgba(26,140,255,0.07) 0%, transparent 65%);
}
.page-bg-right {
  position: fixed; top: 30%; right: -10%; width: 50%; height: 60%;
  background: radial-gradient(ellipse, rgba(0,212,200,0.05) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* ─── FRAME CORNERS ─── */
.fc { position: fixed; width: 20px; height: 20px; border-color: rgba(0,212,200,0.3); border-style: solid; z-index: 200; pointer-events: none; }
.fc-tl { top:14px; left:14px; border-width:1.5px 0 0 1.5px; }
.fc-tr { top:14px; right:14px; border-width:1.5px 1.5px 0 0; }
.fc-bl { bottom:14px; left:14px; border-width:0 0 1.5px 1.5px; }
.fc-br { bottom:14px; right:14px; border-width:0 1.5px 1.5px 0; }

/* ─── KEYFRAMES ─── */
@keyframes slide-down { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-up    { from { opacity:0; transform:translateY(20px);  } to { opacity:1; transform:translateY(0); } }
@keyframes blink      { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
@keyframes pulse      { 0%,100%{transform:scale(1);opacity:0.7;} 50%{transform:scale(1.08);opacity:1;} }

/* ─── NAV ─── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 60px; height: 64px;
  background: rgba(6,12,24,0.88); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border2);
  animation: slide-down 0.5s ease both;
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-mark {
  width:32px; height:32px; border-radius:8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-weight:900; color:#fff;
  box-shadow: 0 0 16px rgba(0,212,200,0.3);
}
.nav-logo-text { font-family:'JetBrains Mono',monospace; font-size:0.78rem; font-weight:600; letter-spacing:0.06em; color:var(--white); }
.nav-logo-text span { color:var(--cyan); }
.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a { font-size:0.82rem; font-weight:600; color:var(--muted); text-decoration:none; letter-spacing:0.02em; transition:color 0.2s; }
.nav-links a:hover { color:var(--white); }
.nav-cta {
  background: linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  color:#fff !important; padding:8px 20px !important; border-radius:8px;
  font-weight:700 !important; box-shadow:0 0 20px rgba(0,200,200,0.2);
  transition: filter 0.2s, transform 0.2s !important;
}
.nav-cta:hover { filter:brightness(1.1); transform:translateY(-1px); }

/* ─── HERO ─── */
.hero {
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
  padding:96px 60px 80px;
  display:grid; grid-template-columns:1fr 310px; gap:64px; align-items:center;
}
.hero-left { display:flex; flex-direction:column; gap:28px; }
.pill {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cyan-glow); border:1px solid var(--border);
  border-radius:999px; padding:6px 14px; width:fit-content;
  animation: fade-up 0.5s 0.1s ease both;
}
.pill-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation: blink 2s ease-in-out infinite;
}
.pill span { font-family:'JetBrains Mono',monospace; font-size:0.67rem; color:var(--cyan); letter-spacing:0.12em; text-transform:uppercase; }
.hero-h1 { font-size:clamp(2.2rem,4vw,3.2rem); font-weight:900; line-height:1.12; letter-spacing:-0.03em; color:var(--white); animation: fade-up 0.5s 0.2s ease both; }
.grad { background: linear-gradient(90deg,var(--cyan) 0%,var(--blue) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:0.98rem; color:var(--muted); line-height:1.72; max-width:480px; font-weight:500; animation: fade-up 0.5s 0.3s ease both; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; animation: fade-up 0.5s 0.38s ease both; }
.htag { display:flex; align-items:center; gap:6px; padding:7px 14px; background:rgba(255,255,255,0.03); border:1px solid var(--border2); border-radius:8px; font-size:0.77rem; font-weight:600; color:#b0bdd8; transition:border-color 0.2s,color 0.2s,background 0.2s; cursor:default; }
.htag:hover { border-color:var(--border); color:var(--white); background:var(--cyan-glow); }
.htag-dot { color:var(--cyan); font-size:0.55rem; }
.hero-actions { display:flex; align-items:center; gap:16px; animation: fade-up 0.5s 0.46s ease both; }
.btn-p { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; background:linear-gradient(135deg,var(--blue),var(--cyan)); border-radius:10px; font-size:0.88rem; font-weight:800; color:#fff; text-decoration:none; letter-spacing:0.02em; box-shadow:0 4px 24px rgba(0,180,220,0.3),0 0 0 1px rgba(0,212,200,0.2); transition:filter 0.2s,transform 0.2s; }
.btn-p:hover { filter:brightness(1.1); transform:translateY(-2px); }
.btn-s { font-size:0.84rem; font-weight:600; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.btn-s:hover { color:var(--white); }

/* ─── METRIC PANEL ─── */
.hero-right { display:flex; flex-direction:column; gap:12px; animation: fade-up 0.5s 0.28s ease both; position:relative; }
.hero-right::before { content:''; position:absolute; inset:-50px; background:radial-gradient(ellipse,rgba(0,212,200,0.06) 0%,transparent 70%); filter:blur(24px); pointer-events:none; z-index:-1; animation:pulse 5s ease-in-out infinite; }
.mp { background:var(--surface); border:1px solid var(--border2); border-radius:13px; padding:18px 20px; display:flex; align-items:center; gap:16px; position:relative; overflow:hidden; transition:border-color 0.25s,transform 0.25s; cursor:default; }
.mp::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--cyan),var(--blue)); border-radius:3px 0 0 3px; }
.mp:hover { border-color:var(--border); transform:translateX(4px); }
.mp-icon { width:38px; height:38px; border-radius:9px; background:var(--cyan-glow); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.mp-val { font-size:1.55rem; font-weight:900; letter-spacing:-0.03em; line-height:1; background:linear-gradient(90deg,var(--cyan),var(--blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.mp-lbl { font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-top:3px; }
.mp-badge { margin-left:auto; flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:0.58rem; padding:3px 8px; border-radius:999px; background:rgba(0,212,200,0.1); border:1px solid var(--border); color:var(--cyan); }
.cta-card { background:linear-gradient(135deg,rgba(26,140,255,0.12),rgba(0,212,200,0.08)); border:1px solid rgba(0,212,200,0.22); border-radius:13px; padding:22px 20px; display:flex; flex-direction:column; gap:12px; }
.cta-card-title { font-size:0.9rem; font-weight:800; color:var(--white); }
.cta-card-sub { font-size:0.75rem; color:var(--muted); line-height:1.65; }
.cta-card-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; background:linear-gradient(135deg,var(--blue),var(--cyan)); border-radius:9px; font-size:0.82rem; font-weight:800; color:#fff; text-decoration:none; box-shadow:0 4px 20px rgba(0,180,220,0.28); transition:filter 0.2s,transform 0.2s; }
.cta-card-btn:hover { filter:brightness(1.1); transform:translateY(-2px); }

/* ─── DIVIDER ─── */
.div-wrap { max-width:1100px; margin:0 auto; padding:0 60px; position:relative; z-index:1; }
.div-line { height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); }

/* ─── PROOF BAR ─── */
.proof { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:44px 60px; display:flex; align-items:center; gap:32px; animation:fade-up 0.5s 0.55s ease both; }
.proof-lbl { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.proof-line { flex:1; height:1px; background:var(--border2); }
.proof-tools { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.ptool { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--muted); background:var(--surface); border:1px solid var(--border2); border-radius:7px; padding:5px 11px; letter-spacing:0.06em; transition:border-color 0.2s,color 0.2s; cursor:default; }
.ptool:hover { border-color:var(--border); color:var(--white); }

/* ─── SECTIONS ─── */
.sec { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 60px 88px; }
.sec-header { margin-bottom:44px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.sec-lbl { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--cyan); letter-spacing:0.14em; text-transform:uppercase; margin-bottom:10px; }
.sec-title { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:900; letter-spacing:-0.025em; color:var(--white); line-height:1.2; }
.sec-sub { font-size:0.8rem; color:var(--muted); max-width:300px; text-align:right; line-height:1.7; }

/* ─── SERVICES ─── */
.svcs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sc { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:30px 26px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; cursor:default; transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s; animation:fade-up 0.5s ease both; }
.sc:nth-child(1){animation-delay:0.1s;} .sc:nth-child(2){animation-delay:0.2s;} .sc:nth-child(3){animation-delay:0.3s;}
.sc:hover { border-color:var(--border); transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,0.4),0 0 0 1px rgba(0,212,200,0.1); }
.sc::after { content:''; position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:0; transition:opacity 0.3s; }
.sc:hover::after { opacity:1; }
.sc-num { position:absolute; top:22px; right:24px; font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:rgba(255,255,255,0.06); font-weight:600; transition:color 0.3s; }
.sc:hover .sc-num { color:var(--muted); }
.sc-icon { width:46px; height:46px; border-radius:12px; background:var(--cyan-glow); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.sc-title { font-size:1rem; font-weight:800; color:var(--white); letter-spacing:-0.015em; line-height:1.3; }
.sc-desc { font-size:0.79rem; color:var(--muted); line-height:1.72; flex:1; }
.sc-foot { display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--border2); }
.sc-tag { font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--cyan); background:var(--cyan-glow); border:1px solid var(--border); border-radius:999px; padding:3px 10px; letter-spacing:0.07em; }
.sc-arr { font-size:0.75rem; color:var(--muted); transition:color 0.2s,transform 0.2s; }
.sc:hover .sc-arr { color:var(--cyan); transform:translateX(4px); }

/* ─── PROCESS ─── */
.proc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border2); border-radius:16px; overflow:hidden; border:1px solid var(--border2); }
.step { background:var(--surface); padding:30px 24px; display:flex; flex-direction:column; gap:12px; transition:background 0.25s; cursor:default; }
.step:hover { background:var(--surface2); }
.step-num { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--cyan); letter-spacing:0.12em; font-weight:600; }
.step-title { font-size:0.9rem; font-weight:800; color:var(--white); line-height:1.3; }
.step-desc { font-size:0.75rem; color:var(--muted); line-height:1.7; }

/* ─── CTA BAND ─── */
.cta-band { position:relative; z-index:1; max-width:1100px; margin:0 auto 80px; padding:0 60px; }
.cta-inner { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:52px 60px; display:flex; align-items:center; justify-content:space-between; gap:40px; position:relative; overflow:hidden; }
.cta-inner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 0% 50%,rgba(26,140,255,0.08),transparent),radial-gradient(ellipse 40% 60% at 100% 50%,rgba(0,212,200,0.07),transparent); pointer-events:none; }
.cta-left { z-index:1; }
.cta-lbl { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--cyan); letter-spacing:0.14em; text-transform:uppercase; margin-bottom:12px; }
.cta-title { font-size:clamp(1.3rem,2.5vw,1.9rem); font-weight:900; letter-spacing:-0.025em; color:var(--white); line-height:1.2; max-width:400px; }
.cta-right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; z-index:1; flex-shrink:0; }
.cta-btn { display:inline-flex; align-items:center; gap:10px; padding:14px 32px; background:linear-gradient(135deg,var(--blue),var(--cyan)); border-radius:11px; font-size:0.9rem; font-weight:800; color:#fff; text-decoration:none; letter-spacing:0.03em; box-shadow:0 6px 30px rgba(0,180,220,0.35); transition:filter 0.2s,transform 0.2s; white-space:nowrap; }
.cta-btn:hover { filter:brightness(1.1); transform:translateY(-2px); }
.cta-note { font-size:0.7rem; color:var(--muted); font-family:'JetBrains Mono',monospace; }

/* ─── FOOTER ─── */
footer { position:relative; z-index:1; border-top:1px solid var(--border2); padding:24px 60px; max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.foot-logo { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--muted); letter-spacing:0.1em; }
.foot-logo span { color:var(--cyan); }
.foot-copy { font-size:0.7rem; color:var(--muted); font-family:'JetBrains Mono',monospace; }

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  nav{padding:0 24px;} .nav-links{display:none;}
  .hero{grid-template-columns:1fr; padding:60px 24px 48px;}
  .hero-right{display:grid; grid-template-columns:1fr 1fr;}
  .cta-card{grid-column:span 2;}
  .proof,.div-wrap{padding-left:24px; padding-right:24px;}
  .sec,.cta-band{padding-left:24px; padding-right:24px;}
  .svcs{grid-template-columns:1fr;}
  .proc-grid{grid-template-columns:1fr 1fr;}
  .sec-header{flex-direction:column; align-items:flex-start;}
  .sec-sub{text-align:left;}
  .cta-inner{flex-direction:column; align-items:flex-start; padding:36px 28px;}
  .cta-right{align-items:flex-start;}
  footer{flex-direction:column; gap:8px; padding:24px; text-align:center;}
}