/* Oliver Miró — Agentes de IA · Web & Apps
   -------------------------------------------------------
   Archivos:
   - index.html
   - css/styles.css
   - js/main.js
*/

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#2563eb;
  --secondary:#7c3aed;
  --accent:#06b6d4;
  --dark:#0f172a;
  --light:#f8fafc;
  --gray:#94a3b8;
  --gray-2:#64748b;
  --transition:all .3s cubic-bezier(.4,0,.2,1);
  --radius:20px;
}

html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  color:var(--light);
  min-height:100vh;
  overflow-x:hidden;
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
header{
  padding:1rem 0;
  position:sticky;top:0;
  background:rgba(15,23,42,.92);
  backdrop-filter:blur(10px);
  z-index:100;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-container{display:flex;justify-content:space-between;align-items:center;gap:16px}

.brand{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--light);
  min-width:220px;
}
.brand img{height:46px;width:auto;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-weight:900;font-size:1.05rem}
.brand-tag{font-weight:650;font-size:.9rem;color:var(--gray)}

.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{
  color:var(--light);
  text-decoration:none;
  font-weight:650;
  transition:var(--transition);
  padding:.55rem .9rem;
  border-radius:12px;
}
.nav-links a:hover{background:rgba(255,255,255,.08)}

.cta-button{
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  color:#fff;border:none;
  padding:.85rem 1.35rem;
  border-radius:12px;
  font-weight:750;
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
}
.cta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(37,99,235,.25);
}
.secondary-button{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.secondary-button:hover{box-shadow:0 10px 25px rgba(0,0,0,.18)}

.menu-btn{
  display:none;
  width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--light);
  cursor:pointer;
  transition:var(--transition);
}
.menu-btn:hover{background:rgba(255,255,255,.1)}
.menu-btn svg{width:22px;height:22px}

/* Hero */
section{scroll-margin-top:90px}
.hero{padding:5rem 0 3rem;text-align:center}
.ai-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(6,182,212,.10);
  border:1px solid rgba(6,182,212,.55);
  padding:.55rem 1rem;border-radius:999px;
  margin-bottom:1.8rem;
  font-weight:650;
  color:rgba(248,250,252,.92);
}
.ai-badge::before{content:"✦";font-size:1.05rem}

.hero h1{
  font-size:3.2rem;
  font-weight:950;
  margin-bottom:1.2rem;
  background:linear-gradient(90deg,var(--accent),var(--primary),var(--secondary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.1;
}
.hero-subtitle{
  font-size:1.25rem;
  color:var(--gray);
  margin:0 auto 2rem;
  max-width:880px;
  line-height:1.6;
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Reveal */
.section-title{text-align:center;font-size:2.3rem;margin-bottom:2.6rem;font-weight:850}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease, transform .55s ease}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* Cards */
.services{padding:4.5rem 0}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.6rem;
}
.card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:1.8rem;
  transition:var(--transition);
}
.card:hover{
  transform:translateY(-8px);
  border-color:rgba(6,182,212,.55);
  box-shadow:0 20px 40px rgba(0,0,0,.28);
}
.card-icon{font-size:2.6rem;margin-bottom:1rem;display:block}
.card h3{font-size:1.35rem;margin-bottom:.75rem;color:rgba(248,250,252,.95)}
.card p{color:var(--gray);line-height:1.65}

/* AI Agent */
.ai-agent{
  padding:4.5rem 0;
  background:rgba(6,182,212,.05);
  border-radius:40px;
  margin:2rem;
  border:1px solid rgba(255,255,255,.08);
}
.ai-agent-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.ai-orb{
  width:280px;height:280px;
  background:radial-gradient(circle at center, rgba(6,182,212,.9) 0%, transparent 70%);
  border-radius:50%;
  margin:0 auto;
  animation:pulse 4s infinite;
  display:flex;align-items:center;justify-content:center;
  font-size:4.2rem;
  color:#fff;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.05);opacity:1}
}
.ai-chat{
  background:rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:2rem;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
}
.ai-chat-title{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:1rem;
  font-size:1.35rem;font-weight:850;
}
.ai-typing{display:flex;gap:6px;align-items:center}
.ai-typing span{
  width:8px;height:8px;background:var(--accent);
  border-radius:50%;
  animation:typing 1.4s infinite;
}
.ai-typing span:nth-child(2){animation-delay:.2s}
.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.ai-response{
  background:rgba(255,255,255,.05);
  padding:1.2rem;
  border-radius:16px;
  margin-top:1rem;
  border-left:4px solid rgba(6,182,212,.8);
}
.ai-response p{margin-top:.45rem;color:rgba(248,250,252,.92);line-height:1.6}
.ai-list{margin:1rem 0 0 1.25rem;color:var(--gray);line-height:1.7}
.ai-note{margin-top:1rem;color:var(--gray);font-size:.95rem}

/* Projects */
.projects{padding:4.5rem 0}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.6rem;
}
.badge{
  display:inline-flex;align-items:center;
  padding:.25rem .6rem;border-radius:999px;
  background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.30);
  color:rgba(248,250,252,.9);
  font-weight:750;
  font-size:.85rem;
}

/* Contact */
.contact{padding:4.5rem 0}
.contact-wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:1.6rem;
  align-items:start;
}
.contact-card{
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  padding:1.8rem;
}
.contact-card h3{font-size:1.25rem;margin-bottom:.75rem}
.contact-card p{color:var(--gray);line-height:1.65}
.field{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.field label{font-weight:750;font-size:.95rem;color:rgba(248,250,252,.92)}
.field input,.field textarea{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.35);
  color:var(--light);
  outline:none;
}
.field input:focus,.field textarea:focus{border-color:rgba(6,182,212,.55)}
.field textarea{min-height:120px;resize:vertical}

/* Footer */
footer{
  padding:2.8rem 0;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:3rem;
}
.footer-content{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1.2rem;
}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{height:28px}
.copyright{color:var(--gray-2)}
.social-links{display:flex;gap:.75rem}
.social-link{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--light);
  transition:var(--transition);
}
.social-link:hover{background:var(--primary);transform:translateY(-3px)}

/* Animación extra */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media (max-width: 920px){
  .ai-agent{margin:1.25rem;border-radius:28px}
  .ai-agent-container{grid-template-columns:1fr;gap:1.8rem}
  .contact-wrap{grid-template-columns:1fr}
}
@media (max-width: 768px){
  .hero h1{font-size:2.35rem}
  .nav-links{display:none}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  header.nav-open .nav-links{
    display:flex;
    position:absolute;
    left:0;right:0;top:100%;
    padding:12px 18px 18px;
    background:rgba(15,23,42,.96);
    border-bottom:1px solid rgba(255,255,255,.08);
    flex-direction:column;
    gap:8px;
  }
  header.nav-open .nav-links a{width:100%;justify-content:center}
  .ai-orb{width:210px;height:210px;font-size:3.2rem}
  .footer-content{flex-direction:column;text-align:center}
}
@media (max-width: 480px){
  .hero{padding:4.2rem 0 2.5rem}
  .hero h1{font-size:2rem}
  .section-title{font-size:2rem}
  .card{padding:1.5rem}
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ai-orb{animation:none}
  .ai-typing span{animation:none}
  .reveal{transition:none;opacity:1;transform:none}
}

/* Utilities */
.w-100{width:100%}
.mt-14{margin-top:14px}
.mt-12{margin-top:1.2rem}
.mt-16{margin-top:1.6rem}
.btn-lg{font-size:1.1rem;padding:1rem 2.2rem}

/* Legal pages */
.legal{padding:4.5rem 0}
.legal h1{font-size:2.2rem;font-weight:900;margin-bottom:1rem}
.legal h2{font-size:1.35rem;font-weight:850;margin:1.4rem 0 .6rem}
.legal p,.legal li{color:var(--gray);line-height:1.75}
.legal ul{margin-left:1.25rem;margin-top:.6rem}
.legal .meta{color:var(--gray-2);font-size:.95rem;margin-top:.6rem}

/* Cookie banner */
.cookie-banner{
  position:fixed;
  left:16px;right:16px;bottom:16px;
  max-width:980px;margin:0 auto;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  border-radius:18px;
  padding:14px 14px;
  z-index:9999;
  display:none;
}
.cookie-banner.show{display:block}
.cookie-banner p{color:rgba(248,250,252,.9);line-height:1.5;margin-right:10px}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cookie-link{color:var(--accent);text-decoration:none;font-weight:750}
.cookie-link:hover{text-decoration:underline}
.cookie-btn{
  border-radius:12px;
  padding:.7rem 1rem;
  font-weight:800;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--light);
  cursor:pointer;
  transition:var(--transition);
}
.cookie-btn:hover{background:rgba(255,255,255,.1)}
.cookie-btn.accept{
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  border:none;
}
.cookie-btn.accept:hover{box-shadow:0 10px 25px rgba(37,99,235,.25)}

/* Footer legal links */
.footer-links{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:10px;
}
.footer-links a{
  color:rgba(248,250,252,.85);
  text-decoration:none;
  font-weight:750;
}
.footer-links a:hover{color:var(--accent);text-decoration:underline}

/* Portfolio (work) */
.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.4rem;
}
.work-card{
  overflow:hidden;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  transition:var(--transition);
}
.work-card:hover{
  transform:translateY(-6px);
  border-color:rgba(6,182,212,.55);
  box-shadow:0 20px 40px rgba(0,0,0,.28);
}
.work-card img{
  width:100%;
  height:auto;
  display:block;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.work-card figcaption{
  padding:1.1rem 1.2rem 1.2rem;
}
.work-card h3{
  margin-top:.75rem;
  font-size:1.15rem;
  font-weight:900;
}
.work-card p{
  margin-top:.45rem;
  color:var(--gray);
  line-height:1.6;
}


/* Header brand lockup (icon above text) */
.brand{
  display:grid;
  grid-template-rows:auto auto;
  gap:6px;
  align-items:center;
  justify-items:start;
  text-decoration:none;
  color:var(--light);
}
.brand-icon{
  width:100%;
  max-width:340px; /* desktop */
  height:auto;
  display:block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.brand-name{
  font-size:1.15rem;
  font-weight:900;
  letter-spacing:.2px;
}
.brand-tag{
  font-size:.92rem;
  font-weight:750;
  color:rgba(248,250,252,.75);
}

/* Responsive scaling for header brand */
@media (max-width: 768px){
  .brand{gap:5px}
  .brand-icon{max-width:230px}
  .brand-name{font-size:1.05rem}
  .brand-tag{font-size:.86rem}
}
@media (max-width: 480px){
  .brand{gap:4px}
  .brand-icon{max-width:190px}
  .brand-name{font-size:1rem}
  .brand-tag{font-size:.82rem}
}


/* HEADER LOGO — horizontal lockup (icon left + text right) */
header .brand{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:flex-start;
}
header .brand-icon{
  height: clamp(56px, 5.2vw, 86px); /* bigger head like reference */
  width:auto;
  max-width:none;
  flex: 0 0 auto;
}
header .brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.12;
}
header .brand-name{
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 950;
  letter-spacing: .2px;
}
header .brand-tag{
  font-size: clamp(.86rem, 1.4vw, 1.02rem);
  font-weight: 750;
  color: rgba(248,250,252,.78);
}

/* On very small screens, keep it tidy */
@media (max-width: 420px){
  header .brand{gap:10px}
  header .brand-icon{height: clamp(46px, 7vw, 62px)}
  header .brand-tag{display:none} /* prevents header overflow on small phones */
}

/* Contact buttons */
.contact-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.whatsapp-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:.85rem 1.05rem;
  border-radius:12px;
  font-weight:850;
  text-decoration:none;
  color:var(--light);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: var(--transition);
}
.whatsapp-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.22);
}
.whatsapp-icon{
  width:20px;height:20px;display:inline-block;flex:0 0 auto;
}