/* Estilos sencillos para el TFG - M&M Studio */
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f5f1ea;color:#2b2b2b;line-height:1.5}
header{background:linear-gradient(120deg,#111111,#6b5438,#b99a5b);color:white;padding:22px;text-align:center}
.logo{font-size:38px;margin:8px 0 4px 0;letter-spacing:2px}.subtitulo{margin:0 0 14px 0;color:#f4ead7}
nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}
nav a{color:white;text-decoration:none;background:rgba(255,255,255,.18);padding:10px 13px;border-radius:20px;font-weight:bold}
nav a:hover{background:white;color:#49351f}.hero{max-width:1120px;margin:30px auto;padding:25px;display:grid;grid-template-columns:1.1fr .9fr;gap:25px;align-items:center}.hero img,.imagen-redonda{width:100%;border-radius:18px;box-shadow:0 5px 15px #0003;object-fit:cover;max-height:390px}.boton{display:inline-block;background:#8c6a32;color:white;text-decoration:none;padding:12px 18px;border-radius:8px;margin-top:10px}.boton:hover{background:#5b421e}.contenedor{max-width:1120px;margin:25px auto;padding:0 20px}.titulo-seccion{text-align:center;font-size:30px;color:#4a3821;margin-bottom:10px}.texto-centro{text-align:center;max-width:850px;margin:0 auto 25px auto}.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.tarjeta{background:white;border-radius:16px;padding:22px;box-shadow:0 4px 12px #0002}.tarjeta img{width:100%;height:190px;object-fit:cover;border-radius:12px}.precio{font-size:30px;color:#8c6a32;font-weight:bold}.destacado{border:3px solid #b99a5b;transform:scale(1.02)}.vip{border:3px solid #111;background:#fffdf8}.lista{padding-left:20px}.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.paso{background:#eadfcf;padding:18px;border-radius:12px;text-align:center}.franja{background:#151515;color:white;padding:30px;text-align:center;margin-top:35px}.opiniones{display:grid;grid-template-columns:1fr 1fr;gap:20px}.opinion{background:#fff;border-left:6px solid #b99a5b;padding:18px;border-radius:10px}form{background:white;max-width:720px;margin:25px auto;padding:25px;border-radius:16px;box-shadow:0 4px 12px #0002}label{display:block;margin-top:12px;font-weight:bold}input,select,textarea{width:100%;padding:11px;margin-top:5px;border:1px solid #ccc;border-radius:8px;font-size:15px}textarea{min-height:120px}button{background:#8c6a32;color:white;border:0;border-radius:8px;padding:12px 18px;margin-top:18px;cursor:pointer;font-size:16px}button:hover{background:#5b421e}.footer{background:#111;color:white;text-align:center;padding:20px;margin-top:35px}.scroll-top{position:fixed;right:20px;bottom:20px;border-radius:50%;width:44px;height:44px;padding:0}.tabla{width:100%;border-collapse:collapse;background:white;border-radius:12px;overflow:hidden}.tabla th,.tabla td{border:1px solid #ddd;padding:12px;text-align:left}.tabla th{background:#3a2b16;color:white}.nota{background:#fff7db;border-left:5px solid #d29f35;padding:12px;border-radius:8px}.bloque{background:white;border-radius:16px;padding:24px;box-shadow:0 4px 12px #0002;margin:20px 0}.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:20px}.etiqueta{display:inline-block;background:#eadfcf;color:#3a2b16;border-radius:20px;padding:6px 12px;margin:4px;font-weight:bold}.mini{font-size:14px;color:#555}.alerta{background:#f1eadc;border-left:5px solid #8c6a32;padding:15px;border-radius:10px;margin:18px 0}
@media(max-width:850px){.hero,.dos-columnas{grid-template-columns:1fr}.tarjetas,.pasos,.opiniones{grid-template-columns:1fr}.logo{font-size:30px}nav a{width:100%;max-width:260px}.destacado{transform:none}}

/* ---- BOTÓN FLOTANTE CONTACTO ---- */
#contact-fab{position:fixed;top:20px;right:20px;z-index:8999;background:linear-gradient(135deg,#111111,#6b5438);color:white!important;border:2px solid #b99a5b;border-radius:30px;padding:10px 18px;font-size:14px;font-weight:bold;text-decoration:none;display:flex;align-items:center;gap:7px;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s;}
#contact-fab:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(0,0,0,.45);background:linear-gradient(135deg,#1a1a1a,#8c6a32)!important;color:white!important;}

/* ---- MODO OSCURO ---- */
.mm-dark-toggle{position:fixed!important;bottom:20px!important;left:20px!important;z-index:9997!important;width:54px!important;height:54px!important;border-radius:50%!important;background:linear-gradient(135deg,#111111,#6b5438)!important;border:2px solid #b99a5b!important;color:white!important;cursor:pointer!important;font-size:22px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 4px 18px rgba(0,0,0,.35)!important;transition:transform .2s!important;padding:0!important;margin:0!important;line-height:1!important;}
.mm-dark-toggle:hover{transform:scale(1.1)!important;background:linear-gradient(135deg,#1a1a1a,#8c6a32)!important;}
body.dark-mode{background:#1b1714;color:#e0d5c5;}
body.dark-mode .tarjeta,body.dark-mode .bloque{background:#252118;box-shadow:0 4px 12px #0006;color:#e0d5c5;}
body.dark-mode .opinion{background:#252118;color:#e0d5c5;}
body.dark-mode form{background:#252118;color:#e0d5c5;}
body.dark-mode .paso{background:#2d2318;color:#e0d5c5;}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#1a1714;color:#e0d5c5;border-color:#4a3821;}
body.dark-mode label{color:#e0d5c5;}
body.dark-mode .tabla{background:#252118;}
body.dark-mode .tabla td{color:#e0d5c5;border-color:#3a2f20;}
body.dark-mode .tabla th{background:#1a130a;}
body.dark-mode .nota{background:#2d2318;color:#e0d5c5;}
body.dark-mode .alerta{background:#2d2318;color:#e0d5c5;}
body.dark-mode .franja{background:#0a0807;}
body.dark-mode .titulo-seccion{color:#d4a96a;}
body.dark-mode .vip{background:#1e1c16;}
body.dark-mode .etiqueta{background:#2d2318;color:#d4a96a;}
body.dark-mode .mini{color:#a09080;}

/* ---- ANIMACIONES DE SCROLL ---- */
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .65s ease,transform .65s ease;}
.animate-on-scroll.visible{opacity:1;transform:translateY(0);}
.hidden{display:none!important;}

/* ---- STATS (contadores) ---- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0;}
.stat-item{background:white;border-radius:16px;padding:24px 16px;text-align:center;box-shadow:0 4px 12px #0002;}
.stat-num{font-size:42px;font-weight:bold;color:#8c6a32;display:block;line-height:1;}
.stat-label{font-size:13px;color:#888;margin-top:6px;}
body.dark-mode .stat-item{background:#252118;color:#e0d5c5;}
body.dark-mode .stat-num{color:#d4a96a;}
@media(max-width:850px){.stats-grid{grid-template-columns:repeat(2,1fr);}}

/* ---- QUIZ ---- */
.quiz-progress{background:#eadfcf;border-radius:20px;height:8px;margin:20px 0 6px 0;overflow:hidden;}
.quiz-progress-bar{background:linear-gradient(90deg,#6b5438,#b99a5b);height:100%;border-radius:20px;transition:width .45s ease;}
.quiz-step-label{text-align:center;color:#8c6a32;font-weight:bold;margin:0 0 22px 0;}
.quiz-opciones{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0 20px 0;}
.quiz-opcion{background:white;border:2px solid #eadfcf;border-radius:14px;padding:18px 16px;cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s;font-size:15px;}
.quiz-opcion small{display:block;color:#888;font-size:12px;margin-top:5px;font-weight:normal;}
.quiz-opcion:hover{border-color:#8c6a32;transform:translateY(-2px);box-shadow:0 4px 14px #0002;}
.quiz-opcion.selected{border-color:#b99a5b;background:#fdf8f0;box-shadow:0 0 0 3px #b99a5b33;}
.quiz-nav{display:flex;justify-content:space-between;margin-top:20px;gap:10px;}
.quiz-result-card{background:white;border-radius:18px;padding:34px;text-align:center;box-shadow:0 6px 24px #0002;border:2px solid #b99a5b;}
body.dark-mode .quiz-opcion{background:#252118;border-color:#3a2f20;color:#e0d5c5;}
body.dark-mode .quiz-opcion small{color:#a0947d;}
body.dark-mode .quiz-opcion.selected{background:#2d2318;border-color:#b99a5b;}
body.dark-mode .quiz-result-card{background:#252118;color:#e0d5c5;}
body.dark-mode .quiz-progress{background:#2d2318;}
body.dark-mode .quiz-step-label{color:#d4a96a;}
@media(max-width:600px){.quiz-opciones{grid-template-columns:1fr;}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}