/* ===================== VARIABLES ===================== */
:root {
  --crema: #f7f3ee; --beige: #ede6db; --beige-oscuro: #d6c9b8;
  --madera: #b8956a; --madera-oscura: #8a6a42;
  --blanco: #fdfaf7; --texto-oscuro: #1e1810;
  --texto-medio: #5a4a38; --texto-suave: #9a8878;
  --rojo-alerta: #c0392b; --amarillo-precaucion: #d4860a;
  --verde-ok: #2d7a4f; --azul-confianza: #2a5f8f;
  --pro-color: #7c4dff; --pro-light: rgba(124,77,255,0.1);
  --sombra: rgba(30,15,5,0.1); --sombra-media: rgba(30,15,5,0.18);
  --bg-main: #fdfaf7; --bg-section: #f7f3ee;
  --border: #d6c9b8; --nav-bg: rgba(253,250,247,0.94);
}
  /* MODO OSCURO */ 
[data-theme="dark"] {
  --crema: #1a1510; --beige: #252018; --beige-oscuro: #3a3025;
  --madera: #c8a878; --madera-oscura: #d4a86a;
  --blanco: #141210; --texto-oscuro: #f0ebe4;
  --texto-medio: #c8b8a8; --texto-suave: #7a6a5a;
  --sombra: rgba(0,0,0,0.4); --sombra-media: rgba(0,0,0,0.5);
  --bg-main: #141210; --bg-section: #1a1510;
  --border: #3a3025; --nav-bg: rgba(20,18,16,0.96);
  --pro-light: rgba(124,77,255,0.15);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background:var(--bg-main); color:var(--texto-oscuro); font-family:'DM Sans',sans-serif; font-weight:300; line-height:1.7; overflow-x:hidden; transition:background 0.3s,color 0.3s; }

/* ===================== NAVBAR ===================== */
.navbar { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; justify-content:space-between; align-items:center; padding:16px 60px; background:var(--nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); transition:background 0.3s; }
.nav-logo { display:flex; align-items:center; gap:10px; }
.logo-icon { font-size:1.4rem; color:var(--madera); }
.logo-text { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:600; color:var(--texto-oscuro); }
.logo-text em { font-style:italic; color:var(--madera-oscura); }
.nav-right { display:flex; align-items:center; gap:10px; flex-shrink: 0; overflow: visible; }
.nav-tagline { font-size:0.78rem; color:var(--texto-suave); letter-spacing:0.08em; }

.plan-badge { font-size:0.7rem; font-weight:600; letter-spacing:0.12em; padding:5px 12px; border-radius:100px; cursor:pointer; transition:all 0.2s; background:var(--beige); color:var(--texto-medio); border:1px solid var(--border); }
.plan-badge.pro { background:var(--pro-light); color:var(--pro-color); border-color:rgba(124,77,255,0.3); }
.plan-badge:hover { transform:scale(1.05); }

.nav-usos { font-size:0.75rem; color:var(--texto-suave); }
.nav-usos.agotado { color:var(--rojo-alerta); font-weight:500; }

.btn-darkmode { background:var(--beige); border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:1rem; cursor:pointer; transition:all 0.2s; }
.btn-darkmode:hover { background:var(--beige-oscuro); transform:scale(1.1); }

/* ===================== HERO ===================== */
.hero { padding:140px 60px 80px; background:var(--bg-section); background-image:radial-gradient(ellipse at 80% 50%,rgba(184,149,106,0.12) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(90,138,106,0.08) 0%,transparent 50%); text-align:center; position:relative; overflow:hidden; }
.hero-bg-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(184,149,106,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(184,149,106,0.06) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
.hero-content { position:relative; z-index:1; animation:fadeUp 0.8s ease both; }
.hero-badge { display:inline-block; background:var(--beige); border:1px solid var(--border); color:var(--madera-oscura); font-size:0.8rem; padding:8px 20px; border-radius:100px; letter-spacing:0.05em; margin-bottom:28px; }
.hero h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,7vw,5.5rem); font-weight:300; line-height:1.1; color:var(--texto-oscuro); margin-bottom:24px; }
.hero h1 em { font-style:italic; color:var(--madera-oscura); }
.hero-desc { font-size:1rem; color:var(--texto-medio); max-width:480px; margin:0 auto; line-height:1.8; }

.contador-strip { display:flex; justify-content:center; align-items:center; gap:40px; margin-top:48px; padding:28px 40px; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:12px; max-width:600px; margin-left:auto; margin-right:auto; position:relative; z-index:1; }
[data-theme="dark"] .contador-strip { background:rgba(255,255,255,0.03); }
.contador-item { text-align:center; }
.contador-num { display:block; font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:600; color:var(--madera-oscura); line-height:1; margin-bottom:6px; }
.contador-label { font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--texto-suave); }
.contador-sep { font-size:1.5rem; color:var(--border); }

/* ===================== ANALYZER ===================== */
.analyzer { max-width:760px; margin:-20px auto 0; padding:0 30px 80px; position:relative; z-index:10; }

/* BARRA DE USOS */
.usos-bar { background:var(--bg-main); border:1px solid var(--border); border-radius:12px 12px 0 0; padding:16px 20px 12px; margin-bottom:0; border-bottom:none; }
.usos-info { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
#usos-texto { font-size:0.8rem; color:var(--texto-suave); }
#usos-texto.agotado { color:var(--rojo-alerta); font-weight:500; }
.usos-upgrade { background:var(--pro-light); color:var(--pro-color); border:1px solid rgba(124,77,255,0.25); padding:5px 14px; border-radius:100px; font-size:0.75rem; font-weight:500; cursor:pointer; transition:all 0.2s; font-family:'DM Sans',sans-serif; }
.usos-upgrade:hover { background:rgba(124,77,255,0.18); transform:scale(1.03); }
.usos-track { height:5px; background:var(--beige); border-radius:100px; overflow:hidden; }
.usos-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--verde-ok),var(--madera)); transition:width 0.6s ease; }
.usos-fill.medio { background:linear-gradient(90deg,var(--madera),var(--amarillo-precaucion)); }
.usos-fill.bajo { background:linear-gradient(90deg,var(--amarillo-precaucion),var(--rojo-alerta)); }

.tabs { display:flex; gap:8px; background:var(--beige); border:1px solid var(--border); border-top:none; padding:10px 10px 0; overflow-x:auto; }
.tab { flex:1; padding:12px 16px; border:none; background:transparent; color:var(--texto-suave); font-family:'DM Sans',sans-serif; font-size:0.83rem; cursor:pointer; border-radius:8px 8px 0 0; transition:all 0.25s; white-space:nowrap; }
.tab:hover { color:var(--texto-medio); background:rgba(255,255,255,0.3); }
.tab.active { background:var(--bg-main); color:var(--madera-oscura); font-weight:500; box-shadow:0 -2px 0 var(--madera) inset; }

.input-panel { display:none; background:var(--bg-main); border:1px solid var(--border); border-top:none; padding:32px; }
.input-panel.active { display:block; }
.input-label { display:block; font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--texto-suave); margin-bottom:12px; }
.main-input { width:100%; padding:16px 20px; border:1.5px solid var(--border); border-radius:6px; background:var(--bg-section); color:var(--texto-oscuro); font-family:'DM Sans',sans-serif; font-size:0.95rem; font-weight:300; outline:none; transition:border-color 0.3s,box-shadow 0.3s; }
.main-input:focus { border-color:var(--madera); box-shadow:0 0 0 3px rgba(184,149,106,0.15); }
.main-textarea { height:140px; resize:vertical; }
.input-hint { margin-top:10px; font-size:0.8rem; color:var(--texto-suave); }
.upload-zone { border:2px dashed var(--border); border-radius:8px; padding:48px 32px; text-align:center; cursor:pointer; transition:all 0.3s; background:var(--bg-section); }
.upload-zone:hover { border-color:var(--madera); background:var(--beige); }
.upload-icon { font-size:2.5rem; margin-bottom:12px; }
.upload-zone p { color:var(--texto-medio); font-size:0.95rem; margin-bottom:6px; }
.upload-zone span { font-size:0.78rem; color:var(--texto-suave); }
.upload-preview img { max-width:100%; max-height:200px; margin-top:20px; border-radius:6px; object-fit:contain; border:1px solid var(--border); }

/* MODO ANÁLISIS */
.modo-analisis { display:grid; grid-template-columns:1fr 1fr; gap:12px; border:1px solid var(--border); border-top:none; background:var(--bg-main); padding:16px; }
.modo-opcion { cursor:pointer; }
.modo-opcion-inner { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border:2px solid var(--border); border-radius:10px; transition:all 0.25s; background:var(--bg-section); position:relative; }
.modo-opcion-inner:hover { border-color:var(--madera); }
.modo-opcion-inner.active { border-color:var(--madera-oscura); background:var(--beige); box-shadow:0 0 0 3px rgba(184,149,106,0.12); }
.modo-opcion-inner.pro-active { border-color:var(--pro-color); background:var(--pro-light); box-shadow:0 0 0 3px rgba(124,77,255,0.12); }
.modo-opcion-inner.locked { opacity:0.6; cursor:not-allowed; }
.modo-icono { font-size:1.5rem; flex-shrink:0; margin-top:2px; }
.modo-nombre { font-size:0.9rem; font-weight:500; color:var(--texto-oscuro); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.modo-desc { font-size:0.78rem; color:var(--texto-suave); line-height:1.5; }
.modo-tag { font-size:0.6rem; padding:2px 7px; border-radius:100px; letter-spacing:0.08em; font-weight:500; }
.pro-tag { background:var(--pro-color); color:white; }
.modo-lock { position:absolute; top:12px; right:12px; font-size:0.9rem; opacity:0.5; }

.btn-analyze { width:100%; padding:18px 32px; background:var(--madera-oscura); color:var(--blanco); border:none; border-radius:0 0 12px 12px; font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:500; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:12px; transition:all 0.3s; letter-spacing:0.04em; }
.btn-analyze:hover { background:var(--texto-oscuro); transform:translateY(-1px); box-shadow:0 8px 28px var(--sombra-media); }
.btn-analyze.deep-mode { background:linear-gradient(135deg,#4a1fa8,var(--pro-color)); }
.btn-analyze.deep-mode:hover { background:linear-gradient(135deg,#3a1090,#6a3add); }
.btn-icon { font-size:1.2rem; transition:transform 0.3s; }
.btn-analyze:hover .btn-icon { transform:translateX(4px); }

/* ===================== RESULTADO ===================== */
.resultado { max-width:760px; margin:0 auto; padding:0 30px 80px; }
.resultado-inner { background:var(--bg-main); border:1px solid var(--border); border-radius:12px; padding:44px; box-shadow:0 12px 48px var(--sombra); animation:fadeUp 0.5s ease both; }
.resultado-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--beige); gap:20px; flex-wrap:wrap; }
.resultado-label { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--texto-suave); }
.veredicto { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:600; padding:8px 24px; border-radius:6px; letter-spacing:0.05em; }
.veredicto.baja  { background:rgba(45,122,79,0.12);  color:var(--verde-ok);            border:1.5px solid rgba(45,122,79,0.25); }
.veredicto.media { background:rgba(212,134,10,0.12); color:var(--amarillo-precaucion); border:1.5px solid rgba(212,134,10,0.25); }
.veredicto.alta  { background:rgba(192,57,43,0.1);   color:var(--rojo-alerta);         border:1.5px solid rgba(192,57,43,0.25); }
.veredicto-extendido-wrap { text-align:right; }
.veredicto-extendido { font-family:'DM Sans',sans-serif; font-size:0.82rem; font-weight:500; padding:8px 18px; border-radius:100px; display:inline-block; margin-top:6px; letter-spacing:0.08em; }
.ve-verde    { background:rgba(45,122,79,0.12);   color:var(--verde-ok);            border:1.5px solid rgba(45,122,79,0.25); }
.ve-rojo     { background:rgba(192,57,43,0.1);    color:var(--rojo-alerta);         border:1.5px solid rgba(192,57,43,0.25); }
.ve-naranja  { background:rgba(192,100,43,0.1);   color:#c06a2b;                    border:1.5px solid rgba(192,100,43,0.25); }
.ve-amarillo { background:rgba(212,134,10,0.12);  color:var(--amarillo-precaucion); border:1.5px solid rgba(212,134,10,0.25); }
.ve-gris     { background:rgba(100,100,100,0.08); color:#777;                       border:1.5px solid rgba(100,100,100,0.2); }

.barra-container { margin-bottom:32px; }
.barra-labels { display:flex; justify-content:space-between; font-size:0.7rem; letter-spacing:0.15em; color:var(--texto-suave); margin-bottom:8px; }
.barra-track { height:10px; background:var(--beige); border-radius:100px; overflow:hidden; }
.barra-fill { height:100%; border-radius:100px; width:0%; transition:width 1s cubic-bezier(0.4,0,0.2,1); }
.barra-fill.baja  { background:linear-gradient(90deg,var(--verde-ok),#4aaa72); }
.barra-fill.media { background:linear-gradient(90deg,var(--amarillo-precaucion),#f0a030); }
.barra-fill.alta  { background:linear-gradient(90deg,var(--amarillo-precaucion),var(--rojo-alerta)); }

.senales-container { margin-bottom:28px; }
.senales-titulo { font-size:0.85rem; font-weight:500; color:var(--texto-medio); margin-bottom:16px; }
.senales-lista { list-style:none; display:flex; flex-direction:column; gap:10px; }
.senal-item { display:flex; align-items:flex-start; gap:12px; padding:14px 18px; background:var(--bg-section); border-radius:8px; border-left:3px solid var(--border); font-size:0.88rem; color:var(--texto-medio); animation:fadeUp 0.4s ease both; }
.senal-item.negativa  { border-left-color:var(--rojo-alerta); }
.senal-item.precaucion{ border-left-color:var(--amarillo-precaucion); }
.senal-item.positiva  { border-left-color:var(--verde-ok); }
.senal-icono { font-size:1rem; flex-shrink:0; }

.deep-analysis-box { background:linear-gradient(135deg,rgba(124,77,255,0.06),rgba(124,77,255,0.03)); border:1.5px solid rgba(124,77,255,0.2); border-radius:10px; padding:24px 28px; margin-bottom:20px; }
.deep-titulo { font-size:0.85rem; font-weight:500; color:var(--pro-color); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.deep-fuentes { margin-bottom:16px; }
.deep-fuentes-titulo { font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--texto-suave); margin-bottom:10px; }
.deep-fuente-item { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--bg-main); border-radius:6px; margin-bottom:6px; font-size:0.82rem; color:var(--texto-medio); border:1px solid var(--border); }
.deep-analisis-detallado { font-size:0.88rem; color:var(--texto-medio); line-height:1.8; white-space:pre-line; }

.manipulacion-box { background:rgba(192,57,43,0.05); border:1.5px solid rgba(192,57,43,0.2); border-radius:10px; padding:20px 24px; margin-bottom:20px; }
.manipulacion-titulo { font-size:0.85rem; font-weight:500; color:var(--rojo-alerta); margin-bottom:14px; }
.tecnicas-lista { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tecnica-tag { background:rgba(192,57,43,0.1); color:var(--rojo-alerta); border:1px solid rgba(192,57,43,0.2); border-radius:100px; padding:5px 14px; font-size:0.78rem; font-weight:500; }
.por-que-cae { font-size:0.87rem; color:var(--texto-medio); line-height:1.7; background:var(--bg-main); border-radius:6px; padding:12px 16px; }

.conclusion-box { background:var(--beige); border-radius:8px; padding:20px 24px; font-size:0.9rem; color:var(--texto-medio); line-height:1.8; margin-bottom:20px; border:1px solid var(--border); }
.acciones-box { background:rgba(45,122,79,0.06); border:1.5px solid rgba(45,122,79,0.2); border-radius:10px; padding:20px 24px; margin-bottom:24px; }
.acciones-titulo { font-size:0.85rem; font-weight:500; color:var(--verde-ok); margin-bottom:12px; }
.acciones-lista { list-style:none; display:flex; flex-direction:column; gap:8px; }
.acciones-lista li { font-size:0.88rem; color:var(--texto-medio); padding-left:18px; position:relative; line-height:1.6; }
.acciones-lista li::before { content:'→'; position:absolute; left:0; color:var(--verde-ok); font-weight:500; }

.resultado-acciones { display:flex; gap:12px; flex-wrap:wrap; }
.btn-nuevo { background:transparent; border:1.5px solid var(--border); color:var(--texto-medio); padding:12px 28px; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.85rem; cursor:pointer; transition:all 0.3s; }
.btn-nuevo:hover { border-color:var(--madera); color:var(--madera-oscura); }
.btn-compartir { background:var(--madera-oscura); color:white; border:none; padding:12px 28px; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.85rem; cursor:pointer; transition:all 0.3s; }
.btn-compartir:hover { background:var(--texto-oscuro); transform:translateY(-1px); }

/* ===================== MODALES ===================== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-box { background:var(--bg-main); border-radius:16px; padding:32px; max-width:480px; width:100%; box-shadow:0 24px 64px rgba(0,0,0,0.3); border:1px solid var(--border); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.modal-header p { font-size:1rem; font-weight:500; color:var(--texto-oscuro); }
.modal-header button { background:transparent; border:none; font-size:1.2rem; cursor:pointer; color:var(--texto-suave); padding:4px 8px; border-radius:4px; }
.modal-header button:hover { background:var(--beige); }

.tarjeta-preview { background:var(--bg-section); border:1px solid var(--border); border-radius:12px; padding:24px; margin-bottom:20px; }
.tarjeta-titulo { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:400; color:var(--texto-oscuro); margin-bottom:12px; }
.tarjeta-nivel { display:inline-block; font-size:1rem; font-weight:600; padding:6px 16px; border-radius:6px; margin-bottom:12px; }
.tarjeta-footer { font-size:0.72rem; color:var(--madera); margin-top:12px; letter-spacing:0.05em; }
.modal-acciones { display:flex; gap:10px; }
.btn-copiar { flex:1; padding:12px; background:var(--beige); border:1px solid var(--border); border-radius:8px; font-family:'DM Sans',sans-serif; font-size:0.85rem; cursor:pointer; color:var(--texto-medio); transition:all 0.2s; }
.btn-copiar:hover { background:var(--beige-oscuro); }
.btn-whatsapp { flex:1; padding:12px; background:#25d366; border:none; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:0.85rem; cursor:pointer; color:white; font-weight:500; transition:all 0.2s; }
.btn-whatsapp:hover { background:#1ebc58; }

/* MODAL PLANES */
.modal-planes-box { max-width:700px; }
.planes-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.plan-card { background:var(--bg-section); border:2px solid var(--border); border-radius:14px; padding:28px 24px; position:relative; transition:all 0.3s; }
.plan-card-pro { border-color:var(--pro-color); background:var(--pro-light); }
.plan-popular { font-size:0.68rem; font-weight:600; letter-spacing:0.1em; color:var(--pro-color); margin-bottom:10px; }
.plan-nombre { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:var(--texto-oscuro); margin-bottom:4px; }
.plan-nombre.pro { color:var(--pro-color); }
.plan-precio { font-size:2rem; font-weight:600; color:var(--texto-oscuro); margin-bottom:8px; }
.plan-precio span { font-size:0.9rem; font-weight:300; color:var(--texto-suave); }
.plan-desc { font-size:0.82rem; color:var(--texto-suave); margin-bottom:20px; }
.plan-features { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.plan-features li { font-size:0.85rem; padding-left:20px; position:relative; }
.plan-features li.si { color:var(--texto-medio); }
.plan-features li.si::before { content:'✓'; position:absolute; left:0; color:var(--verde-ok); font-weight:600; }
.plan-features li.no { color:var(--texto-suave); text-decoration:line-through; opacity:0.6; }
.plan-features li.no::before { content:'✗'; position:absolute; left:0; color:var(--texto-suave); }
.plan-btn { width:100%; padding:13px; border:none; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:0.88rem; font-weight:500; cursor:pointer; transition:all 0.2s; }
.plan-btn-free { background:var(--beige); color:var(--texto-medio); border:1.5px solid var(--border); }
.plan-btn-free:hover { background:var(--beige-oscuro); }
.plan-btn-pro { background:var(--pro-color); color:white; margin-top:8px; }
.plan-btn-pro:hover { background:#6a3add; transform:translateY(-1px); }
.plan-codigo-wrap { display:flex; flex-direction:column; gap:8px; }
.plan-codigo-input { width:100%; padding:11px 14px; border:1.5px solid rgba(124,77,255,0.3); border-radius:8px; background:var(--bg-main); color:var(--texto-oscuro); font-family:'DM Sans',sans-serif; font-size:0.88rem; outline:none; transition:border-color 0.3s; }
.plan-codigo-input:focus { border-color:var(--pro-color); box-shadow:0 0 0 3px rgba(124,77,255,0.12); }
.plan-codigo-hint { font-size:0.75rem; color:var(--texto-suave); margin-top:8px; text-align:center; }
.plan-codigo-hint a { color:var(--pro-color); text-decoration:none; }

/* SECCIÓN PRECIOS */
.precios-section { padding:80px 60px 100px; background:var(--bg-section); }
.planes-grid-section { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:700px; margin:0 auto; }
.plan-card-section { background:var(--bg-main); border:2px solid var(--border); border-radius:14px; padding:36px 30px; text-align:center; transition:all 0.3s; }
.plan-card-section:hover { transform:translateY(-4px); box-shadow:0 16px 48px var(--sombra); }
.plan-card-section-pro { border-color:var(--pro-color); background:var(--pro-light); position:relative; }
.plan-card-section .plan-features { text-align:left; }

/* ===================== HISTORIAL ===================== */
.historial-seccion { max-width:760px; margin:0 auto; padding:0 30px 80px; }
.historial-inner { background:var(--bg-main); border:1px solid var(--border); border-radius:12px; padding:36px 40px; }
.historial-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--beige); }
.historial-header h2 { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:300; color:var(--texto-oscuro); margin-top:6px; }
.btn-limpiar { background:transparent; border:1px solid var(--border); color:var(--texto-suave); padding:8px 16px; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.78rem; cursor:pointer; transition:all 0.2s; }
.btn-limpiar:hover { border-color:var(--rojo-alerta); color:var(--rojo-alerta); }
.historial-lista { display:flex; flex-direction:column; gap:12px; }
.historial-item { background:var(--bg-section); border:1px solid var(--border); border-radius:8px; padding:16px 20px; }
.historial-meta { display:flex; gap:12px; margin-bottom:6px; align-items:center; }
.historial-fecha { font-size:0.75rem; color:var(--texto-suave); }
.historial-tipo { font-size:0.72rem; background:var(--beige); color:var(--texto-medio); padding:2px 10px; border-radius:100px; }
.historial-contenido { font-size:0.85rem; color:var(--texto-medio); margin-bottom:10px; line-height:1.5; }
.historial-badges { display:flex; gap:8px; }
.h-badge { font-size:0.72rem; padding:3px 12px; border-radius:100px; font-weight:500; }
.nivel-baja  { background:rgba(45,122,79,0.12);  color:var(--verde-ok); }
.nivel-media { background:rgba(212,134,10,0.12); color:var(--amarillo-precaucion); }
.nivel-alta  { background:rgba(192,57,43,0.1);   color:var(--rojo-alerta); }
.veredicto-badge-small { background:var(--beige); color:var(--texto-medio); }

/* ===================== VS ===================== */
.vs-section { padding:80px 60px 100px; background:var(--texto-oscuro); }
.vs-section .section-label { color:var(--madera); }
.vs-section h2 { color:#f0ebe4; }
.vs-section .section-desc { color:#9a8878; }
.vs-tabla { display:flex; align-items:stretch; max-width:860px; margin:0 auto; }
.vs-col { flex:1; border-radius:12px; overflow:hidden; }
.vs-col-header { padding:20px 24px; font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:400; text-align:center; line-height:1.4; }
.vs-col-header small { display:block; font-family:'DM Sans',sans-serif; font-size:0.75rem; opacity:0.7; margin-top:4px; }
.vs-col-ellos { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); }
.vs-col-ellos .vs-col-header { color:#9a8878; }
.vs-col-nosotros { background:rgba(184,149,106,0.12); border:1px solid rgba(184,149,106,0.25); }
.vs-col-nosotros .vs-col-header { color:var(--madera); }
.vs-item { padding:13px 20px; font-size:0.87rem; border-top:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; gap:10px; }
.vs-malo { color:#7a6a5a; }
.vs-malo::before { content:'✗'; color:#6a4a4a; font-weight:500; flex-shrink:0; }
.vs-bueno { color:#c8b898; }
.vs-bueno::before { content:'✓'; color:var(--madera); font-weight:500; flex-shrink:0; }
.vs-medio { display:flex; align-items:center; justify-content:center; padding:0 24px; font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:var(--madera); font-weight:300; flex-shrink:0; }

/* ===================== CONSEJOS / CASOS / TESTIMONIOS ===================== */
.consejos-section, .como-funciona { padding:80px 60px 100px; background:var(--bg-main); }
.casos-section { padding:80px 60px 100px; background:var(--bg-section); }
.testimonios-section { padding:80px 60px 100px; background:var(--bg-main); }
.section-header { text-align:center; margin-bottom:56px; }
.section-label { display:block; font-size:0.72rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--madera); margin-bottom:12px; }
.section-header h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,2.8rem); font-weight:300; color:var(--texto-oscuro); }
.section-desc { color:var(--texto-suave); font-size:0.95rem; max-width:400px; margin:12px auto 0; }

.consejos-grid, .casos-grid, .testimonios-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1000px; margin:0 auto; }
.consejo-card { background:var(--bg-section); border:1px solid var(--border); border-radius:10px; padding:32px 28px; transition:transform 0.3s,box-shadow 0.3s; position:relative; overflow:hidden; }
.consejo-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px var(--sombra); }
.consejo-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--madera),var(--verde-ok)); transform:scaleX(0); transition:transform 0.4s; }
.consejo-card:hover::before { transform:scaleX(1); }
.consejo-num { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:300; color:var(--madera); opacity:0.5; margin-bottom:14px; line-height:1; }
.consejo-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:400; color:var(--texto-oscuro); margin-bottom:10px; }
.consejo-card p { font-size:0.85rem; color:var(--texto-suave); line-height:1.7; }

.caso-card { background:var(--bg-main); border:1px solid var(--border); border-radius:10px; padding:28px 24px; transition:transform 0.3s,box-shadow 0.3s; }
.caso-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px var(--sombra); }
.caso-nivel { display:inline-block; font-size:0.7rem; font-weight:500; letter-spacing:0.12em; padding:4px 12px; border-radius:100px; margin-bottom:14px; }
.caso-nivel.alta  { background:rgba(192,57,43,0.1);   color:var(--rojo-alerta); }
.caso-nivel.media { background:rgba(212,134,10,0.12); color:var(--amarillo-precaucion); }
.caso-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:400; color:var(--texto-oscuro); margin-bottom:10px; line-height:1.4; }
.caso-card p { font-size:0.85rem; color:var(--texto-suave); line-height:1.7; margin-bottom:16px; }
.caso-senales { display:flex; flex-direction:column; gap:6px; }
.caso-senales span { font-size:0.78rem; color:var(--texto-medio); background:var(--bg-section); padding:5px 10px; border-radius:6px; border:1px solid var(--border); }

.testimonio-card { background:var(--bg-section); border:1px solid var(--border); border-radius:10px; padding:32px 28px; transition:transform 0.3s; }
.testimonio-card:hover { transform:translateY(-3px); }
.testimonio-destacado { background:var(--beige); border-color:var(--madera); }
.testimonio-estrellas { color:var(--madera); font-size:0.9rem; margin-bottom:14px; letter-spacing:2px; }
.testimonio-card p { font-size:0.9rem; color:var(--texto-medio); line-height:1.8; font-style:italic; margin-bottom:18px; }
.testimonio-autor { font-size:0.78rem; color:var(--texto-suave); letter-spacing:0.04em; }

.pasos { display:flex; align-items:center; justify-content:center; gap:20px; max-width:900px; margin:0 auto; }
.paso { flex:1; background:var(--bg-section); border:1px solid var(--border); border-radius:10px; padding:36px 28px; text-align:center; transition:transform 0.3s,box-shadow 0.3s; }
.paso:hover { transform:translateY(-4px); box-shadow:0 12px 36px var(--sombra); }
.paso-num { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:300; color:var(--madera); margin-bottom:16px; opacity:0.7; }
.paso h3 { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:400; color:var(--texto-oscuro); margin-bottom:12px; }
.paso p { font-size:0.85rem; color:var(--texto-suave); line-height:1.7; }
.paso-arrow { font-size:1.5rem; color:var(--border); flex-shrink:0; }

/* ===================== FOOTER ===================== */
.footer { background:var(--texto-oscuro); color:var(--beige); text-align:center; padding:44px 60px; }
.footer-logo { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:300; margin-bottom:12px; }
.footer-logo em { font-style:italic; color:var(--madera); }
.footer p { font-size:0.85rem; color:var(--texto-suave); margin-bottom:8px; }
.footer-disclaimer { font-size:0.75rem !important; color:#6a5a4a !important; max-width:500px; margin:16px auto 0 !important; line-height:1.6; }

/* ===================== LOADING ===================== */
.loading-overlay { position:fixed; inset:0; background:rgba(30,15,5,0.6); backdrop-filter:blur(6px); z-index:999; display:flex; align-items:center; justify-content:center; }
.loading-box { background:var(--bg-main); border-radius:16px; padding:48px 56px; text-align:center; box-shadow:0 24px 64px rgba(0,0,0,0.3); min-width:300px; }
.loading-spinner { width:48px; height:48px; border:3px solid var(--beige); border-top-color:var(--madera-oscura); border-radius:50%; animation:spin 0.9s linear infinite; margin:0 auto 20px; }
.loading-text { font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--texto-oscuro); margin-bottom:6px; }
.loading-sub { font-size:0.82rem; color:var(--texto-suave); margin-bottom:16px; }
.loading-pasos { display:flex; flex-direction:column; gap:6px; text-align:left; }
.loading-paso { font-size:0.78rem; color:var(--texto-suave); display:flex; align-items:center; gap:8px; opacity:0; transition:opacity 0.3s; }
.loading-paso.visible { opacity:1; }
.loading-paso.done { color:var(--verde-ok); }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }

/* ===================== RESPONSIVE ===================== */
@media (max-width:768px) {
  .navbar { padding:14px 20px; }
  .nav-tagline { display:none; }
  .hero { padding:120px 24px 60px; }
  .contador-strip { flex-direction:column; gap:20px; padding:24px; margin-top:36px; }
  .contador-sep { display:none; }
  .analyzer { padding:0 16px 60px; }
  .tabs { gap:4px; padding:8px 8px 0; }
  .tab { font-size:0.75rem; padding:10px; }
  .input-panel { padding:24px 20px; }
  .modo-analisis { grid-template-columns:1fr; }
  .resultado { padding:0 16px 60px; }
  .resultado-inner { padding:28px 20px; }
  .resultado-header { flex-direction:column; gap:16px; }
  .veredicto-extendido-wrap { text-align:left; }
  .resultado-acciones { flex-direction:column; }
  .historial-seccion { padding:0 16px 60px; }
  .historial-inner { padding:24px 20px; }
  .planes-grid { grid-template-columns:1fr; }
  .planes-grid-section { grid-template-columns:1fr; max-width:400px; }
  .vs-section { padding:60px 24px 80px; }
  .vs-tabla { flex-direction:column; gap:16px; }
  .vs-medio { padding:8px 0; }
  .consejos-section,.casos-section,.testimonios-section,.como-funciona,.precios-section { padding:60px 24px 80px; }
  .consejos-grid,.casos-grid,.testimonios-grid { grid-template-columns:1fr; }
  .pasos { flex-direction:column; }
  .paso-arrow { transform:rotate(90deg); }
  .footer { padding:36px 24px; }
}

/* ===================== AUTH ===================== */
.btn-login {
  background: var(--acento);
  color: #ffffff !important;
  border: none;
  padding: 7px 16px;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.2s;
}
.btn-login:hover { opacity: 0.85; }

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-email {
  font-size: 0.78rem;
  color: var(--texto-suave);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-logout {
  background: none;
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.btn-logout:hover { color: var(--texto-oscuro); }

.modal-auth-box { max-width: 380px; }

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--borde);
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
}
.auth-tab.active {
  color: var(--acento);
  border-bottom-color: var(--acento);
  font-weight: 500;
}

.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo-card);
  color: var(--texto-oscuro);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-google:hover { background: var(--fondo-hover); }

.auth-separador {
  text-align: center;
  position: relative;
  margin: 16px 0;
  color: var(--texto-suave);
  font-size: 0.78rem;
}
.auth-separador::before, .auth-separador::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: var(--borde);
}
.auth-separador::before { left: 0; }
.auth-separador::after { right: 0; }

.auth-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  background: var(--fondo-input);
  color: var(--texto-oscuro);
  margin-bottom: 10px;
  box-sizing: border-box;
}
.auth-input:focus { outline: none; border-color: var(--acento); }

.btn-auth-submit {
  width: 100%;
  padding: 12px;
  background: var(--acento);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 0.2s;
}
.btn-auth-submit:hover { opacity: 0.88; }
.btn-auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-error {
  color: #c0392b;
  font-size: 0.82rem;
  margin-bottom: 8px;
  text-align: center;
}