/* KOOWEXA - Plataforma Optimizada v3.2 */
/* https://koowexa.github.io/oficial/ */

/* ============================================================
   RESET Y VARIABLES GLOBALES
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}

:root{
  --primary:#1A1A1A;--secondary:#0052CC;--accent:#E65100;
  --success:#1B5E20;--error:#B71C1C;--warning:#E65100;--info:#0D47A1;
  --bg-primary:#FFFFFF;--bg-secondary:#F1F3F5;--bg-tertiary:#E9ECEF;
  --bg-card:#FFFFFF;--bg-modal:rgba(0,0,0,.9);
  --text-primary:#1A1A1A;--text-secondary:#2D3436;--text-muted:#5F6368;--text-inverse:#FFFFFF;
  --text-light:#495057;--text-lighter:#6C757D;
  --border-color:#DEE2E6;--border-radius:10px;--border-radius-lg:16px;--border-radius-sm:6px;
  --shadow:0 2px 10px rgba(0,0,0,.08);--shadow-md:0 4px 20px rgba(0,0,0,.12);
  --shadow-lg:0 10px 40px rgba(0,0,0,.15);
  --space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;
  --space-xl:2rem;--space-xxl:4rem;
  --font-primary:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-heading:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;
  --font-size-xl:1.5rem;--font-size-xxl:2rem;--font-size-xxxl:3.5rem;
  --line-height-tight:1.2;--line-height-normal:1.6;--line-height-relaxed:1.8;
  --letter-spacing-tight:-0.02em;--letter-spacing-normal:0;--letter-spacing-wide:0.02em;
  --container-width:1200px;--header-height:80px;--z-fixed:1030;--z-modal:1050;
  --transition-fast:.2s cubic-bezier(0.4,0,0.2,1);--transition-normal:.3s cubic-bezier(0.4,0,0.2,1);--transition-slow:.5s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   TEMA ESTÁNDAR (Recomendable visualmente)
   ============================================================ */
:root.theme-standard{
  --primary:#1A1A1A;--secondary:#0052CC;--accent:#E65100;
  --success:#1B5E20;--error:#B71C1C;--warning:#E65100;--info:#0D47A1;
  --bg-primary:#FFFFFF;--bg-secondary:#F1F3F5;--bg-tertiary:#E9ECEF;
  --bg-card:#FFFFFF;--bg-modal:rgba(0,0,0,.9);
  --text-primary:#1A1A1A;--text-secondary:#2D3436;--text-muted:#5F6368;--text-inverse:#FFFFFF;
  --text-light:#495057;--text-lighter:#6C757D;
  --border-color:#DEE2E6;
  --shadow:0 2px 10px rgba(0,0,0,.08);--shadow-md:0 4px 20px rgba(0,0,0,.12);
  --shadow-lg:0 10px 40px rgba(0,0,0,.15);
}
:root.theme-standard .hero-banner-img{filter:none}
:root.theme-standard img:not(.logo img){filter:none}
:root.theme-standard #main-header{background:rgba(255,255,255,.8);border-bottom-color:rgba(0,0,0,.05)}

/* ============================================================
   TEMA ALTO CONTRASTE (Blanco/Negro)
   ============================================================ */
:root.theme-high-contrast{
  --primary:#000000;--secondary:#000000;--accent:#000000;
  --success:#000000;--error:#000000;--warning:#000000;--info:#000000;
  --bg-primary:#FFFFFF;--bg-secondary:#F5F5F5;--bg-tertiary:#EEEEEE;
  --bg-card:#FFFFFF;--bg-modal:rgba(0,0,0,.95);
  --text-primary:#000000;--text-secondary:#000000;--text-muted:#000000;--text-inverse:#FFFFFF;
  --text-light:#000000;--text-lighter:#000000;
  --border-color:#000000;
  --shadow:0 2px 4px rgba(0,0,0,.3);--shadow-md:0 4px 8px rgba(0,0,0,.4);
  --shadow-lg:0 8px 16px rgba(0,0,0,.5);
}
:root.theme-high-contrast .hero-banner-img{filter:grayscale(100%) contrast(1.2) brightness(0.9)}
:root.theme-high-contrast img:not(.logo img){filter:grayscale(100%) contrast(1.1)}
:root.theme-high-contrast #main-header{background:#FFFFFF;border-bottom:3px solid #000000}
:root.theme-high-contrast .btn{border:2px solid #000000;font-weight:900}
:root.theme-high-contrast .btn:hover{background:#000000;color:#FFFFFF;border-color:#000000}
:root.theme-high-contrast a{color:#000000;text-decoration:underline}
:root.theme-high-contrast .info-card,:root.theme-high-contrast .project-card,:root.theme-high-contrast .testimonial,:root.theme-high-contrast .plan-card{border:2px solid #000000;background:#FFFFFF}
:root.theme-high-contrast .modal-container{border:3px solid #000000}
:root.theme-high-contrast footer{background:#000000;color:#FFFFFF}
:root.theme-high-contrast .nav-link{border:1px solid transparent}
:root.theme-high-contrast .nav-link:hover{border:1px solid #000000;background:#F5F5F5}
:root.theme-high-contrast .nav-link.active{border-bottom:3px solid #000000;background:transparent}
:root.theme-high-contrast .nav-link.active::after{background:#000000}

html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}

body{
  font-family:var(--font-primary);line-height:var(--line-height-normal);color:var(--text-primary);
  background-color:var(--bg-primary);min-height:100vh;display:flex;flex-direction:column;
  font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color var(--transition-normal),color var(--transition-normal);
  letter-spacing:var(--letter-spacing-normal);
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);font-weight:800;line-height:var(--line-height-tight);margin-bottom:var(--space-md);
  color:var(--text-primary);letter-spacing:var(--letter-spacing-tight);
}
h1{font-size:var(--font-size-xxxl);font-weight:900;line-height:1.1}
h2{font-size:2.5rem;font-weight:800;line-height:1.2}
h3{font-size:2rem;font-weight:800;line-height:1.25}
h4{font-size:var(--font-size-xxl);font-weight:700}
h5{font-size:var(--font-size-xl);font-weight:700}
h6{font-size:var(--font-size-lg);font-weight:700}

p{
  margin-bottom:var(--space-md);line-height:var(--line-height-relaxed);font-weight:500;color:var(--text-primary);
  letter-spacing:var(--letter-spacing-normal);
}
a{
  color:var(--secondary);text-decoration:none;font-weight:600;transition:color var(--transition-fast);
  text-underline-offset:4px;border-radius:2px;
}
a:hover,a:focus-visible{
  text-decoration:underline;outline:2px solid var(--secondary);outline-offset:2px;
}
img,svg{pointer-events:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;max-width:100%;height:auto;display:block;border-radius:inherit}
picture{display:block;width:100%;height:100%}

.container{width:100%;max-width:var(--container-width);margin:0 auto;padding:0 var(--space-lg)}
.section{padding:var(--space-xxl) 0;position:relative}
.section-title{text-align:center;margin-bottom:var(--space-xl)}
.section-title .subtitle{color:var(--text-secondary);font-size:var(--font-size-lg);max-width:600px;margin:0 auto;font-weight:600}

/* ============================================================
   HEADER Y NAVEGACION
   ============================================================ */
#main-header{
  position:fixed;top:0;left:0;width:100%;background:rgba(255,255,255,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 4px 30px rgba(0,0,0,.05);z-index:var(--z-fixed);height:var(--header-height);
  border-bottom:1px solid rgba(0,0,0,.05);transition:all var(--transition-normal);
}

#main-header::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,82,204,.5),transparent);
  animation:neonGlow 3s ease-in-out infinite;
}

@keyframes neonGlow{
  0%,100%{opacity:.3}
  50%{opacity:1}
}

.navbar{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 var(--space-md)}
.logo-container{display:flex;align-items:center;gap:var(--space-md)}
.logo{
  width:48px;height:48px;border-radius:var(--border-radius);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0052CC 0%,#0F1C3F 100%);transition:all var(--transition-fast);
  box-shadow:0 0 20px rgba(0,82,204,.3);border:1px solid rgba(0,82,204,.5);
  animation:logoFloat 3s ease-in-out infinite;will-change:transform;
}

@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.logo:hover{
  transform:scale(1.1);
  box-shadow:0 0 30px rgba(0,82,204,.6);
  border-color:rgba(0,82,204,.8);
}
.logo img,.logo svg{width:100%;height:100%;object-fit:contain;padding:6px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.logo-text{
  font-size:1.5rem;font-weight:900;color:var(--text-primary);
  background:linear-gradient(135deg,#0052CC 0%,#0F1C3F 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  transition:all var(--transition-fast);
}
.logo-text span{
  color:var(--secondary);
  text-shadow:0 0 10px rgba(0,82,204,.5);
}

.hamburger{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;transition:transform var(--transition-fast)}
.hamburger::before{content:'☰';font-size:1.5rem;line-height:1}
.hamburger.active::before{content:'✕'}
.hamburger:hover{transform:scale(1.1)}
.hamburger.active{transform:rotate(90deg)}

.nav-menu{display:flex;gap:var(--space-lg);list-style:none;transition:all var(--transition-normal)}
.nav-link{color:var(--text-primary);font-weight:700;padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius);position:relative;transition:all var(--transition-fast)}
.nav-link:hover,.nav-link:focus-visible{color:var(--secondary);background-color:var(--bg-secondary);outline:2px solid var(--secondary)}
.nav-link.active{color:var(--secondary);background-color:var(--bg-secondary)}
.nav-link.active::after{content:'';position:absolute;bottom:-2px;left:var(--space-md);right:var(--space-md);height:3px;background:var(--secondary);border-radius:1px}

.btn-contact{background:var(--secondary);color:var(--text-inverse)!important;border:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-sm);font-weight:700;transition:all var(--transition-fast)}
.btn-contact:hover{background:var(--accent);transform:translateY(-2px)}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero{
  padding:calc(var(--header-height) + var(--space-xxl)) 0 var(--space-xxl);
  color:var(--text-inverse);position:relative;overflow:hidden;background-size:cover;background-position:center;background-attachment:fixed;
}

.hero-banner-picture{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;
}

.hero-banner-img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;will-change:transform;
}
@media (max-width: 768px) {
  .hero-banner-img{object-position:center 30%}
}
@media (max-width: 480px) {
  .hero-banner-img{object-position:center 50%}
}

.hero-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.8) 100%);
  z-index:1;pointer-events:none;
}

.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(255,107,53,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(0,82,204,.1) 0%,transparent 50%);
  pointer-events:none;z-index:2;
}

.hero .container{
  position:relative;z-index:3;
}

.hero-content{
  animation:fadeIn .8s ease;
}

.hero h2{
  color:var(--text-inverse);font-size:var(--font-size-xxxl);margin-bottom:var(--space-lg);
  text-shadow:0 4px 20px rgba(0,0,0,.5);
  animation:slideInDown .6s ease;font-weight:900;line-height:1.1;
  letter-spacing:var(--letter-spacing-tight);
}

.hero .lead{
  font-size:1.5rem;line-height:var(--line-height-relaxed);margin-bottom:var(--space-xl);max-width:800px;font-weight:600;
  animation:slideInUp .6s ease;text-shadow:0 2px 10px rgba(0,0,0,.5);
  color:rgba(255,255,255,.95);
}

.hero-actions{
  display:flex;gap:var(--space-md);margin-top:var(--space-xl);flex-wrap:wrap;
  animation:slideInUp .8s ease;
}

@keyframes slideInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
  padding:1rem 2rem;background:var(--secondary);color:var(--text-inverse);
  border:none;border-radius:var(--border-radius);font-family:var(--font-primary);
  font-weight:800;font-size:1rem;cursor:pointer;min-height:50px;position:relative;
  overflow:hidden;text-align:center;line-height:1.2;border:2px solid transparent;
  transition:all var(--transition-fast);user-select:text;letter-spacing:0.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.3);border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}
.btn:active::before{width:300px;height:300px}

.btn:hover,.btn:focus-visible{
  background:var(--primary);color:var(--text-inverse);border-color:var(--secondary);
  outline:2px solid var(--secondary);outline-offset:2px;transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.btn-large{padding:1.25rem 2.5rem;font-size:1.125rem;min-height:60px}
.btn-small{padding:.75rem 1.5rem;font-size:.875rem;min-height:42px}
.btn-secondary{
  background:rgba(0,0,0,.05);color:var(--text-primary);border:2px solid var(--border-color);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
:root.theme-standard .btn-secondary{background:rgba(0,0,0,.05)}
.btn-secondary:hover{
  background:var(--bg-secondary);border-color:var(--secondary);color:var(--secondary);
}
.btn-accent{background:var(--accent);color:var(--text-inverse)}
.btn-disabled,.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ============================================================
   TARJETAS Y GRILLAS
   ============================================================ */
.info-grid,.projects-grid{display:grid;gap:var(--space-lg);margin-bottom:var(--space-xl)}
.info-card,.project-card{
  background:var(--bg-card);padding:var(--space-xl);border-radius:var(--border-radius-lg);
  display:flex;flex-direction:column;transition:all var(--transition-normal);
}

.info-card:hover,.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--secondary)}
.info-icon,.project-icon{font-size:3rem;color:var(--secondary);margin-bottom:var(--space-md);display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:var(--bg-secondary);border-radius:50%;transition:all var(--transition-normal);flex-shrink:0}
.info-card:hover .info-icon,.project-card:hover .project-icon{transform:scale(1.1);background:var(--secondary);color:var(--text-inverse)}

.info-card h4,.project-card h4{
  margin-bottom:var(--space-md);color:var(--text-primary);font-size:1.5rem;
  font-weight:700;line-height:1.3;
}
.info-card p,.project-card p{
  color:var(--text-light);flex-grow:1;font-size:1.1rem;
  line-height:var(--line-height-relaxed);
}
.project-card .btn-small{margin-top:auto;align-self:flex-start}
.project-card img{width:100%;height:auto;border-radius:var(--border-radius-lg);margin-bottom:var(--space-md)}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testimonial-section{background:var(--bg-secondary)}
.testimonials{display:grid;gap:var(--space-lg);margin-top:var(--space-xl)}
.testimonial{
  background:var(--bg-card);padding:var(--space-xl);border-radius:var(--border-radius-lg);
  box-shadow:var(--shadow-md);border:2px solid var(--border-color);
  transition:all var(--transition-normal);
}

.testimonial:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--secondary)}
.testimonial-content{font-style:italic;color:var(--text-primary);margin-bottom:var(--space-lg);position:relative;padding-left:var(--space-lg);font-size:1.1rem}
.testimonial-content::before{content:'"';position:absolute;left:0;top:-10px;font-size:3rem;color:var(--secondary);opacity:.5;font-family:Georgia,serif}
.testimonial-author{display:flex;flex-direction:column;gap:var(--space-xs);padding-top:var(--space-md);border-top:2px solid var(--border-color)}
.testimonial-author strong{color:var(--text-primary);font-size:var(--font-size-xl);font-weight:800}
.testimonial-author span{color:var(--text-muted);font-size:var(--font-size-md);font-weight:600}
.testimonial img{width:60px;height:60px;border-radius:50%;object-fit:cover;margin-right:var(--space-md)}

/* ============================================================
   PLANES
   ============================================================ */
.plans-section{background:var(--bg-secondary)}
.plans-grid{display:grid;gap:var(--space-xl);margin-top:var(--space-xl)}
.plan-card{
  background:var(--bg-card);padding:var(--space-xl);border-radius:var(--border-radius-lg);
  box-shadow:var(--shadow-md);border:3px solid var(--border-color);
  transition:all var(--transition-normal);
}

.plan-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--secondary)}
.plan-card.featured{border-color:var(--secondary);background:linear-gradient(135deg,var(--bg-card) 0%,rgba(0,82,204,.05) 100%);position:relative}
.plan-card.featured::before{content:'DESTACADO';position:absolute;top:-12px;left:20px;background:var(--secondary);color:var(--text-inverse);padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:800}

.plan-header{text-align:center;margin-bottom:var(--space-xl)}
.plan-header h4{color:var(--text-primary);font-size:1.75rem;margin-bottom:var(--space-sm)}
.plan-header .plan-subtitle{color:var(--text-light);font-size:1.1rem;font-weight:600}
.plan-features{list-style:none;margin:var(--space-xl) 0}
.plan-features li{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md);padding:var(--space-sm);background:var(--bg-secondary);border-radius:var(--border-radius);font-weight:600}
.plan-features li.feature-no{opacity:.5;color:var(--text-lighter);text-decoration:line-through}
.plan-price{text-align:center;font-size:2.5rem;font-weight:900;color:var(--secondary);margin:var(--space-xl) 0;padding:var(--space-lg);background:var(--bg-secondary);border-radius:var(--border-radius);border:2px solid var(--border-color)}
.plan-actions{display:flex;justify-content:center;margin-top:var(--space-xl)}
.paid-plan-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-top:var(--space-lg)}
.paid-plan-option{background:var(--bg-secondary);padding:var(--space-lg);border-radius:var(--border-radius);border:2px solid var(--border-color);transition:all var(--transition-normal)}
.paid-plan-option:hover{border-color:var(--secondary);background:rgba(0,82,204,.05)}
.paid-plan-option h5{text-align:center;color:var(--text-primary);margin-bottom:var(--space-lg);font-size:1.3rem}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--primary);color:var(--text-inverse);padding-top:var(--space-xxl);margin-top:auto;transition:all var(--transition-normal)}
.footer-content{display:grid;gap:var(--space-xl);margin-bottom:var(--space-xl)}
.footer-about{display:flex;flex-direction:column;gap:var(--space-md)}
.footer-logo{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}
.footer-logo svg,.footer-logo img{width:50px;height:50px;flex-shrink:0}
.footer-logo-text{font-size:2rem;color:var(--text-inverse);font-weight:900}
.footer-logo-text span{color:var(--secondary)}
.footer-description{color:var(--text-inverse);line-height:1.8;font-size:1.1rem;opacity:.8}
.social-links{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-md)}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;background:rgba(255,255,255,.1);border-radius:50%;color:var(--text-inverse);font-size:1.2rem;transition:all var(--transition-fast)}
.social-link:hover,.social-link:focus-visible{background:var(--secondary);outline:2px solid var(--text-inverse);transform:scale(1.1)}

.footer-contact h4,.footer-projects h4{color:var(--text-inverse);margin-bottom:var(--space-lg);font-size:var(--font-size-xl)}
.footer-contact ul{list-style:none}
.footer-contact li{display:flex;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-md);line-height:1.8}
.footer-contact i{margin-top:2px;color:var(--text-inverse);min-width:24px;text-align:center;font-size:1.2rem}
.footer-contact span{font-size:1.1rem;font-weight:600}
.footer-projects{display:flex;flex-direction:column;gap:var(--space-lg)}
.project-links{display:grid;gap:var(--space-sm)}
.project-links a{display:flex;align-items:center;gap:var(--space-sm);color:var(--text-inverse);padding:var(--space-md);background:rgba(255,255,255,.05);border-radius:var(--border-radius);font-weight:600;transition:all var(--transition-fast)}
.project-links a:hover{background:rgba(255,255,255,.15);color:var(--text-inverse);transform:translateX(4px)}
.project-links i{width:24px;text-align:center;color:var(--secondary)}
.footer-app{background:rgba(255,255,255,.05);padding:var(--space-lg);border-radius:var(--border-radius);border:2px solid rgba(255,255,255,.1);transition:all var(--transition-normal)}
.footer-app h4{color:var(--text-inverse);margin-bottom:var(--space-md)}
.footer-app:hover{background:rgba(255,255,255,.1);border-color:var(--secondary)}
.app-download{display:inline-flex;align-items:center;gap:var(--space-sm);background:var(--secondary);color:var(--text-inverse);padding:var(--space-md) var(--space-lg);border-radius:var(--border-radius);font-weight:800;margin-top:var(--space-sm);font-size:1.1rem;transition:all var(--transition-fast)}
.app-download:hover{background:var(--accent);transform:translateY(-2px)}
.footer-bottom{text-align:center;padding:var(--space-lg) 0;border-top:2px solid rgba(255,255,255,.2);color:var(--text-inverse);font-size:var(--font-size-md);font-weight:600}
.footer-legal{margin-top:var(--space-md);display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap}
.footer-legal a{color:var(--text-inverse);font-weight:600;transition:color var(--transition-fast);opacity:.8}
.footer-legal a:hover{color:var(--secondary);text-decoration:underline}

/* ============================================================
   MODALES
   ============================================================ */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-modal);display:none;justify-content:center;align-items:center;z-index:var(--z-modal);padding:var(--space-md);animation:fadeIn .3s ease}
.modal-container{background:var(--bg-card);border-radius:var(--border-radius-lg);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-md);border:2px solid var(--secondary);animation:slideInUp .3s ease}
.modal-content{padding:var(--space-xl)}
.modal-icon{font-size:3rem;color:var(--secondary);text-align:center;margin-bottom:var(--space-lg)}
.modal-title{text-align:center;margin-bottom:var(--space-lg);color:var(--text-primary)}
.modal-body{margin-bottom:var(--space-xl);line-height:1.8;color:var(--text-primary);font-size:1.1rem}
.modal-actions{display:flex;justify-content:center;gap:var(--space-md)}

/* ============================================================
   LOADING Y NOTIFICACIONES
   ============================================================ */
.loading-spinner{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-modal);display:none;justify-content:center;align-items:center;flex-direction:column;z-index:var(--z-modal);color:var(--text-inverse);animation:fadeIn .3s ease}
.spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:var(--secondary);margin-bottom:var(--space-lg);animation:spin 1s linear infinite}
@keyframes spin{100%{transform:rotate(360deg)}}

.notification{
  background:var(--bg-card);color:var(--text-primary);padding:var(--space-md) var(--space-lg);
  border-radius:var(--border-radius);box-shadow:var(--shadow-md);display:flex;align-items:center;
  gap:var(--space-md);max-width:400px;border-left:4px solid var(--info);
  pointer-events:auto;margin-bottom:var(--space-sm);font-weight:600;
  transition:all var(--transition-normal);animation:slideInRight .3s ease forwards;
}

.notification-success{border-left-color:var(--success)}
.notification-error{border-left-color:var(--error)}
.notification-warning{border-left-color:var(--warning)}
.notification-info{border-left-color:var(--info)}

@keyframes slideInRight{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.login-modal{display:flex}
.login-form{width:100%}
.form-group{margin-bottom:var(--space-lg)}
.form-group label{display:block;margin-bottom:var(--space-sm);font-weight:600;color:var(--text-primary)}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:var(--space-md);border:2px solid var(--border-color);
  border-radius:var(--border-radius);font-family:var(--font-primary);font-size:1rem;
  background-color:var(--bg-card);color:var(--text-primary);
  transition:all var(--transition-fast);
}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(0,82,204,.1)
}
.form-group textarea{min-height:120px;resize:vertical}
.radio-group{display:flex;gap:var(--space-md);flex-wrap:wrap}
.radio-option{display:flex;align-items:center;gap:var(--space-sm)}

/* ============================================================
   SECCION DE CONTACTO
   ============================================================ */
.contact-section{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:var(--text-inverse)}
.contact-section h3{color:var(--text-inverse)}
.contact-section .subtitle{color:rgba(255,255,255,.9)}
.contact-grid{display:grid;gap:var(--space-xl);margin-top:var(--space-xl)}
.contact-info{background:rgba(255,255,255,.1);padding:var(--space-xl);border-radius:var(--border-radius-lg);border:2px solid rgba(255,255,255,.2);transition:all var(--transition-normal)}
.contact-info:hover{background:rgba(255,255,255,.15);border-color:var(--secondary)}
.contact-info h4{color:var(--text-inverse);margin-bottom:var(--space-lg)}
.contact-info ul{list-style:none}
.contact-info li{display:flex;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-md);color:var(--text-inverse)}
.contact-info i{color:var(--text-inverse);min-width:24px;text-align:center;font-size:1.2rem}
.contact-form{background:var(--bg-card);padding:var(--space-xl);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md)}
.contact-form h4{margin-bottom:var(--space-lg)}
.contact-form .form-group:last-child{margin-bottom:0}

/* ============================================================
   CARRUSEL
   ============================================================ */
.testimonial-carousel{position:relative;overflow:hidden;margin-top:var(--space-xl)}
.testimonial-slides{display:flex;transition:transform var(--transition-slow) ease}
.testimonial-slide{min-width:100%;padding:0 var(--space-md)}
.carousel-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-md);margin-top:var(--space-lg)}
.carousel-btn{background:var(--secondary);color:var(--text-inverse);border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all var(--transition-fast)}
.carousel-btn:hover{background:var(--primary);transform:scale(1.1)}
.carousel-indicators{display:flex;gap:var(--space-sm)}
.carousel-indicator{width:12px;height:12px;border-radius:50%;background:var(--border-color);border:none;cursor:pointer;transition:all var(--transition-fast)}
.carousel-indicator.active{background:var(--secondary);transform:scale(1.3)}

/* ============================================================
   CAPTCHA
   ============================================================ */
.captcha-container{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md);padding:var(--space-sm);background:var(--bg-secondary);border-radius:var(--border-radius);border:2px solid var(--border-color)}
.captcha-text{font-family:'Courier New',monospace;font-size:1.5rem;font-weight:900;letter-spacing:5px;padding:var(--space-sm);background:var(--bg-card);border-radius:var(--border-radius);color:var(--secondary);user-select:none;-webkit-user-select:none;flex-grow:1;text-align:center;min-height:50px;display:flex;align-items:center;justify-content:center}
.btn-refresh-captcha{background:var(--bg-tertiary);color:var(--text-primary);border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;transition:all var(--transition-fast)}
.btn-refresh-captcha:hover{background:var(--secondary);color:var(--text-inverse);transform:rotate(180deg)}
.captcha-input-group{display:flex;gap:var(--space-sm);margin-top:var(--space-sm)}
.captcha-input{flex-grow:1;font-family:'Courier New',monospace;font-weight:700;letter-spacing:2px;text-align:center}
.captcha-error{color:var(--error);font-size:var(--font-size-sm);margin-top:var(--space-xs);display:none;font-weight:600}
.captcha-error.show{display:block;animation:shake .3s ease}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ============================================================
   CARACTERISTICAS DE IA
   ============================================================ */
.ai-feature-btn{
  background:linear-gradient(135deg,var(--secondary) 0%,var(--accent) 100%);
  color:var(--text-inverse);border:none;padding:var(--space-sm) var(--space-md);
  border-radius:var(--border-radius);cursor:pointer;font-weight:700;display:flex;
  align-items:center;gap:var(--space-sm);justify-content:center;width:100%;margin-top:var(--space-sm);
  transition:all var(--transition-fast);
}

.ai-feature-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.ai-feature-btn:active{transform:translateY(0)}

.ai-recommendation{background:var(--bg-secondary);padding:var(--space-lg);border-radius:var(--border-radius);border-left:4px solid var(--secondary);margin:var(--space-md) 0;animation:slideInLeft .3s ease}
.ai-recommendation h5{color:var(--secondary);margin-bottom:var(--space-sm)}

@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}

.tooltip{position:relative;display:inline-block}
.tooltip .tooltip-text{visibility:hidden;width:200px;background-color:var(--bg-card);color:var(--text-primary);text-align:center;border-radius:var(--border-radius);padding:var(--space-sm);position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-100px;border:2px solid var(--border-color);opacity:0;transition:opacity var(--transition-normal);font-size:var(--font-size-sm)}
.tooltip:hover .tooltip-text{visibility:visible;opacity:1}

.ai-status-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border-radius:var(--border-radius);margin-bottom:var(--space-md);font-size:var(--font-size-sm);transition:all var(--transition-normal)}
.ai-status-indicator.active{color:var(--success)}
.ai-status-indicator.limited{color:var(--warning)}
.ai-status-indicator.blocked{color:var(--error)}
.ai-status-indicator i{font-size:1.2rem}

.ai-usage-counter{text-align:center;padding:var(--space-sm);background:var(--bg-secondary);border-radius:var(--border-radius);margin-top:var(--space-sm);font-size:var(--font-size-sm);color:var(--text-muted)}
.ai-usage-counter.warning{color:var(--warning);font-weight:700}
.ai-usage-counter.danger{color:var(--error);font-weight:700}

/* ============================================================
   RESPONSIVE DESIGN - TABLET
   ============================================================ */
@media(min-width:640px){
  .info-grid,.projects-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
}

@media(min-width:768px){
  .testimonials{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .footer-content{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .plans-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}
  .contact-grid{grid-template-columns:2fr 1fr}
  .modal-container{max-width:600px}
}

/* ============================================================
   RESPONSIVE DESIGN - MOBILE
   ============================================================ */
@media(max-width:768px){
	  :root{--header-height:70px;--space-xl:1.5rem;--space-xxl:2.5rem;--font-size-xxxl:2.5rem}
	  
	  .hamburger{display:flex}
  .nav-menu{position:fixed;top:var(--header-height);left:0;width:100%;background:var(--bg-card);flex-direction:column;padding:var(--space-md);box-shadow:var(--shadow-md);transform:translateY(-100%);opacity:0;visibility:hidden;z-index:1000;max-height:calc(100vh - var(--header-height));overflow-y:auto;transition:all var(--transition-normal)}
  .nav-menu.active{transform:translateY(0);opacity:1;visibility:visible}
  
  .hero h2{font-size:var(--font-size-xxxl)}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  
  .paid-plan-options{grid-template-columns:1fr;gap:var(--space-lg)}
  .contact-grid{grid-template-columns:1fr}
  .modal-container{margin:var(--space-md);max-width:calc(100% - 2rem)}
}

@media(max-width:480px){
  h1{font-size:2.5rem}
  h2{font-size:2rem}
  h3{font-size:1.75rem}
  
  .container{padding:0 var(--space-md)}
  .section{padding:var(--space-xl) 0}
  .btn{padding:.875rem 1.75rem;font-size:1rem}
  .footer-content{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr}
  .plan-price{font-size:2rem}
  .modal-container{margin:var(--space-sm)}
  .hero h2{font-size:2rem}
  .paid-plan-options{gap:var(--space-md)}
}

/* ============================================================
   ACCESIBILIDAD Y UTILIDADES
   ============================================================ */
strong,b{font-weight:800}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

.keyboard-navigation *:focus-visible{outline:2px solid var(--secondary);outline-offset:2px}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ============================================================
   IMPRESION
   ============================================================ */
@media print{
  header,footer,.btn-contact,.modal,.loading-spinner{display:none!important}
  body{background:white;color:black}
  a{color:blue;text-decoration:underline}
}

/* ============================================================
   PLAN GRATUITO — SECCIÓN DE LIMITACIONES
   ============================================================ */
.plan-section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary, #0052CC);
  padding: 8px 0 4px;
  margin-top: 12px;
  border-top: 1px solid rgba(0, 82, 204, 0.15);
}

.plan-section-label--limits {
  color: #e65c00;
  border-top-color: rgba(230, 92, 0, 0.15);
}

.plan-limitations {
  margin-top: 4px !important;
}

.plan-limitations .feature-limit {
  color: #b85000 !important;
  font-size: 13px;
  padding: 3px 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.plan-limitations .feature-limit::before {
  content: none;
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  .plan-section-label {
    color: #4d9fff;
    border-top-color: rgba(77, 159, 255, 0.2);
  }
  .plan-section-label--limits {
    color: #ff8c42;
    border-top-color: rgba(255, 140, 66, 0.2);
  }
  .plan-limitations .feature-limit {
    color: #ff8c42 !important;
  }
}

/* ============================================================
   SEGURIDAD — ESTILOS GLOBALES
   ============================================================ */
/* Protección de imágenes */
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* Deshabilitar selección global (excepto inputs) */
body {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}