:root{
/* Tema claro - colores más conservadores y profesionales */
--bg:#ffff; --fg:#0b1220; --muted:#475569; --line:#e5e7eb;
--primary:#1e3a8a; --primary-2:#1e40af;
--card:#ffff; --hover:#f8fafc;
--focus:#2563eb; --shadow:0 4px 12px rgba(0,0,0,.05);
--radius:12px;
--accent:#f8fafc;
}
[data-theme="dark"]{
--bg:#0f172a; --fg:#e5e7eb; --muted:#a3b2c2; --line:#1e293b;
--primary:#3b82f6; --primary-2:#60a5fa;
--card:#1e293b; --hover:#111827;
--accent:#1e293b;
--shadow:0 4px 12px rgba(0,0,0,.25);
}
[data-theme="dark"] .bubble.user{background:rgba(148,163,184,.15)}
[data-theme="dark"] .bubble.ai{background:rgba(99,102,241,.16)}

*{box-sizing:border-box}
html,body{margin:0}
body{
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
background:var(--bg); color:var(--fg); line-height:1.6;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
font-weight: 400;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Tipografía más seria y profesional */
h1, h2, h3 {
font-family: 'Merriweather', Georgia, serif;
font-weight: 700;
letter-spacing: -0.02em;
}

p {
line-height: 1.6;
max-width: 65ch;
}

/* Accesibilidad */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:10px;width:auto;height:auto;background:#fff;border:2px solid var(--focus);padding:8px 10px;border-radius:10px;z-index:1000}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
.sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Header */
header{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:20;transition:box-shadow .2s ease}
[data-theme="dark"] header{background:rgba(15,23,42,.95)}
header.scrolled{box-shadow:0 8px 20px rgba(30,58,138,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.logo-wrap{
display:flex;
align-items:center;
text-decoration:none; /* Quitar subrayado del enlace */
}
.logo-wrap:hover{
opacity:0.8; /* Efecto hover sutil */
transition:opacity 0.2s ease;
}
.logo-img{height:55px;width:auto}
.navlinks{display:flex;gap:18px;align-items:center}
.nav a{font-size:14px;color:inherit;opacity:.85}
.nav a:hover{opacity:1}
.nav .btn{font-size:14px;}
.nav .btn:hover {
opacity: 1;
text-decoration: underline;
}
.menu-toggle{
display:none;
width:44px;
height:44px;
position:relative;
border:1px solid var(--line);
border-radius:12px;
background:var(--card);
cursor:pointer;
padding:0;
transition:background .2s ease, border-color .2s ease;
}
.menu-toggle:hover{background:var(--hover)}
.menu-toggle .bar{
position:absolute;
left:50%;
width:22px;
height:2px;
border-radius:2px;
background:var(--fg);
transform:translate(-50%, 0);
transform-origin:center;
transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle .bar:nth-child(1){top:16px}
.menu-toggle .bar:nth-child(2){top:21px}
.menu-toggle .bar:nth-child(3){top:26px}
header.menu-open .menu-toggle .bar:nth-child(1){transform:translate(-50%, 5px) rotate(45deg)}
header.menu-open .menu-toggle .bar:nth-child(2){opacity:0}
header.menu-open .menu-toggle .bar:nth-child(3){transform:translate(-50%, -5px) rotate(-45deg)}
[data-theme="dark"] .menu-toggle{border-color:var(--line);background:var(--card)}
[data-theme="dark"] .menu-toggle .bar{background:var(--fg)}

/* Botones más conservadores */
.btn{
display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
padding:10px 14px;border-radius:12px;font-weight:500;background:var(--card);
transition:background .2s ease, border-color .2s ease;
letter-spacing: 0.025em;
}
.btn:active{transform:none} /* eliminar efecto de "salto" */
.btn.primary{background:var(--primary);color:#fff;border-color:transparent}
.btn.primary:hover{background:var(--primary-2)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--hover);border-color:#cbd5e1}
[data-theme="dark"] .btn.ghost:hover{border-color:#374151}

/* Mejora de contraste para botones ghost en modo oscuro */
[data-theme="dark"] .btn.ghost{
border-color:#374151;
background:rgba(255,255,255,.03);
color:var(--fg);
}
[data-theme="dark"] .btn.ghost:hover{
background:rgba(255,255,255,.08);
border-color:#4b5563;
}

/* Botón icon-only (switch) */
.iconbtn{
width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
border-radius:12px;border:1px solid var(--line);background:transparent;cursor:pointer;
padding:0;
color: var(--fg); /* Asegurar que use el color de texto principal */
}
.iconbtn:hover{background:var(--hover)}
.iconbtn svg{
width:18px;height:18px;display:block;
color: inherit; /* Heredar el color del botón */
}

/* Mejorar visibilidad del icono en modo oscuro */
[data-theme="dark"] .iconbtn {
color: var(--fg); /* Color de texto claro en modo oscuro */
border-color: var(--line);
}

[data-theme="dark"] .iconbtn:hover {
background: var(--hover);
color: var(--fg);
}

/* Asegurar que el SVG use el color correcto */
[data-theme="dark"] .iconbtn svg {
color: var(--fg); /* Forzar color claro en modo oscuro */
}

/* Hero mejorado */
.hero{position:relative;padding:80px 0 64px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;place-items:center;text-align:center}
.hero-intro{max-width:720px;margin-inline:auto;text-align:center}
.hero-logo{
display:block;
margin:-75px auto -25px;
width:100%;
max-width:340px;
min-width:120px;
height:auto;
}

/* Credenciales profesionales */
.credentials {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin: 20px 0;
font-size: 14px;
color: var(--muted);
}

.credential {
display: flex;
align-items: center;
gap: 6px;
}

.badge{display:inline-block;font-size:12px;background:var(--accent);padding:6px 10px;border-radius:999px;color:var(--muted);border:1px solid var(--line)}
h1{font-size:clamp(28px,3.6vw,40px);line-height:1.15;margin:10px 0 12px}
h1{ letter-spacing:-0.4px; }
#manifiesto h2{ font-family: Merriweather, Georgia, serif; letter-spacing:-0.3px; }
p.lead{color:var(--muted);max-width:60ch;margin:10px 0 22px}
.hero p.lead{
text-align: center !important;
margin-left: auto;
margin-right: auto;
}
.hero-buttons{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.microtrust{
display:flex; gap:8px; align-items:center; justify-content:center;
color:var(--muted); font-size:14px; margin-top:8px;
}
.microtrust svg{ opacity:.6; width:16px; height:16px }

/* Tarjetas con sombras más sutiles */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--card)}
.chat-mock{padding:16px}
.bubble{font-size:14px;padding:10px 12px;border-radius:12px;margin:8px 0}
.bubble.user{background:#f8fafc}
.bubble.ai{background:#eef2ff}
.chat-input{display:flex;gap:10px;margin-top:8px}
.chat-input input{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px;background:transparent;color:var(--fg)}
.chat-input button{border-radius:12px;padding:12px 14px;border:1px solid var(--line);background:var(--fg);color:#fff}

/* Secciones con más espaciado */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:step }
.flow li{ list-style:none; border:1px solid var(--line); border-radius:12px; padding:14px; position:relative; background:var(--card) }
.flow li::before{ counter-increment:step; content:counter(step); position:absolute; top:-10px; left:-10px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--fg); color:#fff; font-weight:700 }
@media (max-width: 900px){ .flow{ grid-template-columns:1fr } }

/* Contraste mejorado para numeración de pasos */
[data-theme="light"] .flow li::before{
background: var(--fg);
color: #fff;
}
[data-theme="dark"] .flow li::before{
background: var(--fg);
color: #0b1220;
border: 1px solid #cbd5e1;
}

section{padding:80px 0} /* más espaciado para mayor seriedad */
h2{font-size:24px;margin:0 0 8px}
p.sub{color:var(--muted);margin:0 0 20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{border:1px solid var(--line);border-radius:12px;padding:24px 20px;background:var(--card);text-align:center}
.feature h3{font-size:18px;margin:12px 0 8px;color:var(--primary)}
.feature p{font-size:14px;color:var(--muted);margin:0}

/* Iconos de servicios */
.feature-icon {
font-size: 32px;
margin-bottom: 12px;
display: block;
}

/* Credenciales */
.credentials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 32px;
}

.credential-item {
text-align: center;
padding: 24px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--card);
}

.credential-item h3 {
color: var(--primary);
margin-bottom: 8px;
font-size: 18px;
}

/* Información de contacto en footer */
.contact-info {
margin-top: 12px;
font-size: 14px;
}

.contact-info p {
margin: 4px 0;
display: flex;
align-items: center;
gap: 8px;
}

/* Manifiesto centrado - CORREGIDO */
#manifiesto .container{
width:60%;
max-width:none;
margin:0 auto;
}
#manifiesto h2{
text-align:center;
margin-bottom:12px;
}
#manifiesto p{
text-align:center;
max-width:none; /* Anular la restricción general */
margin-left:auto;
margin-right:auto;
}
@media (max-width: 720px){
#manifiesto .container{ width:92%; }
}

/* Banner Probar */
.try{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:16px;padding:18px;background:linear-gradient(180deg,rgba(248,250,252,.7),transparent)}
[data-theme="dark"] .try{background:linear-gradient(180deg,rgba(17,24,39,.6),transparent)}

/* Confianza */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trust .item{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card)}
.trust small{color:#64748b}

/* Testimonios */
.testi{display:flex;gap:14px;align-items:flex-start}
.q{font-size:28px;line-height:1;color:#94a3b8}
.dots{display:flex;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;cursor:pointer}
.dot.active{background:#0f172a}

/* Precios pro */
.plan{padding:18px}
.price{font-weight:800;font-size:22px;margin:6px 0 2px}
.note{color:#64748b;font-size:12px}

/* FAQ mejorado - más profesional */
.faq-container {
max-width: 800px;
margin: 0 auto;
}

.faq-item {
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 16px;
background: var(--card);
overflow: hidden;
transition: box-shadow 0.2s ease;
}

.faq-item:hover {
box-shadow: var(--shadow);
}

.faq-item summary {
padding: 20px 24px;
cursor: pointer;
font-weight: 600;
font-size: 16px;
color: var(--fg);
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
transition: background-color 0.2s ease;
}

.faq-item summary:hover {
background: var(--hover);
}

.faq-item summary::-webkit-details-marker {
display: none;
}

.faq-item summary::after {
content: '+';
font-size: 20px;
font-weight: 300;
color: var(--primary);
transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
transform: rotate(45deg);
}

.faq-item .faq-content {
padding: 0 24px 20px 24px;
border-top: 1px solid var(--line);
background: var(--accent);
}

.faq-item .faq-content p {
margin: 16px 0 0 0;
color: var(--muted);
line-height: 1.6;
max-width: none;
}

.faq-item .faq-content ul {
margin: 12px 0 0 0;
padding-left: 20px;
color: var(--muted);
}

.faq-item .faq-content ul li {
margin-bottom: 8px;
line-height: 1.5;
}

/* Mejoras para modo oscuro */
[data-theme="dark"] .faq-item summary::after {
color: var(--primary-2);
}

[data-theme="dark"] .faq-item .faq-content {
background: rgba(30, 41, 59, 0.3);
}

/* Footer */
footer{border-top:1px solid var(--line);padding:40px 0 24px;color:#475569}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.footlinks{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.legal{margin-top:16px;text-align:center;color:#94a3b8;font-size:12px}
.legal p{max-width:none;margin-left:auto;margin-right:auto} /* Centrar párrafos del footer legal */

/* Modal */
.modal{
position:fixed;
inset:0;
display:none;
place-items:center;
background:rgba(15,23,42,.45);
backdrop-filter: blur(6px);
}
.modal.open{
display:grid
}
.modal .panel{width:min(720px,94vw)}
.modal .panel{ transform:translateY(6px); opacity:0; transition:transform .18s ease, opacity .18s ease; }
.modal.open .panel{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){
.modal .panel{ transition:none }
}
.modal .panel { position: relative; }
.modal .modal-x {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--line);
background: rgba(15,23,42,.6);
color: #fff;
cursor: pointer;
}
.modal .modal-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px;
border-bottom:1px solid var(--line);
}
.modal .modal-header h2{
font-size:18px;
margin:0;
}

/* Login Modal - Mejorado para modo oscuro */
#login-modal .modal-body{
padding:20px;
}
#login-modal form{
display:flex;
flex-direction:column;
gap:14px;
}
#login-modal .field{
display:flex;
flex-direction:column;
gap:6px;
}
#login-modal .field label{
font-size:14px;
color:var(--muted);
}
#login-modal .field input{
border:1px solid var(--line);
border-radius:10px;
padding:10px;
font-size:14px;
background:var(--card);
color:var(--fg);
}

/* Mejorar visibilidad de inputs en modo oscuro */
[data-theme="dark"] #login-modal .field input {
border-color: #4b5563;
background: rgba(30, 41, 59, 0.8);
color: var(--fg);
}

[data-theme="dark"] #login-modal .field input:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#login-modal .form-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
}
#login-modal .status{
min-height:20px;
font-size:14px;
color:#dc2626;
margin:-2px 0 2px;
}
#login-modal .status.success{
color:#16a34a;
}
#login-modal .form-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:4px;
}

/* Mejorar botón cancelar en modo oscuro */
[data-theme="dark"] #login-modal .form-actions .btn:not(.primary) {
border-color: #4b5563;
background: rgba(30, 41, 59, 0.8);
color: var(--fg);
}

[data-theme="dark"] #login-modal .form-actions .btn:not(.primary):hover {
border-color: #6b7280;
background: rgba(30, 41, 59, 1);
}

/* Contact Modal - Mejorado para modo oscuro */
#contact-modal .modal-body{
padding:20px;
}
#contact-modal form{
display:flex;
flex-direction:column;
gap:14px;
}
#contact-modal .row-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
@media (max-width:600px){
#contact-modal .row-2{ grid-template-columns:1fr; }
}
#contact-modal .field{
display:flex;
flex-direction:column;
gap:6px;
}
#contact-modal .field label{
font-size:14px;
color:var(--muted);
}
#contact-modal .field input,
#contact-modal .field textarea{
border:1px solid var(--line);
border-radius:10px;
padding:10px;
font-size:14px;
background:var(--card);
color:var(--fg);
}

/* Mejorar visibilidad de inputs del modal de contacto en modo oscuro */
[data-theme="dark"] #contact-modal .field input,
[data-theme="dark"] #contact-modal .field textarea {
border-color: #4b5563;
background: rgba(30, 41, 59, 0.8);
color: var(--fg);
}

[data-theme="dark"] #contact-modal .field input:focus,
[data-theme="dark"] #contact-modal .field textarea:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#contact-modal .field textarea{
min-height:120px;
resize:vertical;
}
#contact-modal .form-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:4px;
}

/* Mejorar botones del modal de contacto en modo oscuro */
[data-theme="dark"] #contact-modal .form-actions .btn:not(.primary) {
border-color: #4b5563;
background: rgba(30, 41, 59, 0.8);
color: var(--fg);
}

[data-theme="dark"] #contact-modal .form-actions .btn:not(.primary):hover {
border-color: #6b7280;
background: rgba(30, 41, 59, 1);
}

/* Mejorar botón X de cerrar modal en modo oscuro */
[data-theme="light"] .modal .modal-x { 
background: rgba(15,23,42,.6); 
color:#fff; 
}

[data-theme="dark"] .modal .modal-x { 
background: rgba(30, 41, 59, 0.9); 
color: var(--fg);
border-color: #4b5563;
}

.modal .modal-x:hover { 
background: var(--hover); 
color: inherit; 
}

.modal .panel.fullbleed{ width:min(1200px,96vw); background:#000; padding:0 }
.modal .panel.fullbleed .card{ box-shadow:none }
.videobox{ max-height:80vh }
@media (max-width: 600px){
.videobox{ max-height:70vh }
}

/* Responsive */
@media (max-width: 900px){
.menu-toggle{display:inline-flex}
.nav{gap:12px;height:64px}
.navlinks{
position:fixed;
top:72px;
right:16px;
left:16px;
background:var(--card);
border:1px solid var(--line);
border-radius:16px;
box-shadow:0 18px 36px rgba(15,23,42,.18);
display:none;
flex-direction:column;
align-items:flex-start;
gap:12px;
padding:22px 20px 24px;
max-height:calc(100vh - 96px);
overflow-y:auto;
z-index:40;
}
header.menu-open .navlinks{display:flex}
.navlinks a{width:100%;font-size:16px;padding:6px 0}
.navlinks .btn{width:100%;justify-content:center}
.navlinks #themeToggle{align-self:flex-end;margin-top:8px}
.hero-grid{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.footgrid{grid-template-columns:1fr}
.try{flex-direction:column;align-items:flex-start}
.trust{grid-template-columns:1fr}
}
@media (max-width: 600px){
.hero{padding:56px 0 40px}
.hero-intro{padding-inline:6px}
.hero-buttons{flex-direction:column;align-items:center}
.hero-buttons .btn{width:100%;max-width:320px}
}