/*
  $Id$

  Estudio LTV - Dpto. Desarrollo Web
  https://estudioltv.es

  Copyright (c) 2026 David Carlos Soler Domínguez.

  dlys v6.0
*/

/*****************************************************/
/* Página de estilos común -> ../activos/estilos.css */
/*****************************************************/

:root{
  --bg:#ffffff;
  --text:#111111;
  --menu: #faf0e6;
  --apagado:#5a616e;
  --acento:#3C4654;      
  --acento-cta:#D2B48C;  
  --whatsapp:#25D366;        
  --contenedor:1100px;
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
@font-face {font-family: 'social'; src: local('social'), url('../social.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap;}
*{box-sizing: border-box;}
html,body{height: 100%; margin: 0; padding: 0;}
body{background: var(--acento-cta); color: var(--text); line-height: 1.6;}
.social{font-family: "social";}
header{position: sticky; top: 0; background: rgba(17, 17, 17, 0.95); border-bottom: 1px solid rgba(16, 24, 40, 0.04); z-index: 40;}
.header-interno{display: flex; align-items: center; justify-content: space-between; padding: 0 18px;}
.logo img{height: 100%; display: block;}
nav{display: flex; gap: 18px; align-items: center;}
nav a{color: var(--menu); text-decoration: none; font-weight: 600; padding: 8px 10px; border-radius: 8px;}
nav a.cta{background: var(--acento-cta); color: var(--text);}
main{background: var(--bg); margin: 30px 80px; border-radius: var(--radius); overflow: hidden; min-height: 100vh;}
.contenedor{width: 100%; max-width: var(--contenedor); margin: 0 auto; padding: 0 20px;}
.hero{padding:80px 0;}
.hero-interno{display: flex; gap: 48px; align-items: center; justify-content: space-between;}
.hero-copy{flex: 1; max-width: 600px;}
.hero-visual{flex: 1; display: flex; justify-content: center;}
h1{font-weight: 700; font-size: 48px; line-height: 1.03; margin: 0 0 18px; color:var(--text); letter-spacing: -0.02em;}
p.lead{font-size: 18px; color:var(--menu); margin: 0 0 26px;}
.hero-cta{display: flex; gap: 12px; align-items: center;}
.btn{display:inline-block; padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(16,24,40,0.06);}
.btn.primario{background: var(--acento-cta); color: var(--acento);}
.btn.primario:hover{background: var(--acento); color: var(--acento-cta);}
.btn.secundario{background:transparent; border: 1px solid rgba(16,24,40,0.6); color: var(--apagado);}
.sub-claim{margin-top: 12px; color: var(--apagado); font-size: 14px;}
.tarjeta-visual{width: 100%; max-width: 480px; margin: 0 auto;}
.grafico-simulado {
    width: 100%;
    max-width: 480px; /* Evitamos que crezca más que la imagen */
    border-radius: 8px;
    overflow: hidden; /* Mantenemos el redondeo de esquinas */
    display: flex;    /* Cambiamos a flex para que se adapte al hijo */
    flex-direction: column;
    background: transparent; /* El negro de fondo puede causar saltos visuales */
}
.grafico-simulado figure{margin: 0;}
.grafico-simulado img{width: 100%; height: auto; display: block; object-fit: contain;}
.hero-img-top {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;      /* Importante para que el navegador calcule la altura */
    display: block;
    object-fit: cover; /* Cambiamos contain por cover para evitar franjas negras en móviles */
    object-position: center;
}
.section{padding:80px 0;}
.grid-2{display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start;}
.tarjetas-3, .precios-grid{display: grid;grid-template-columns: repeat(3, 1fr); gap: 20px;}
.tarjeta{background: var(--menu); padding: 22px; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(16,24,40,0.4);}
.lista-procesos{margin: 18px 0 0; padding-left: 18px;}
.lista-procesos li{margin-bottom: 12px; color: var(--apagado);}
.precio-tarjeta{background: var(--menu); padding: 22px; border-radius: var(--radius); text-align: center; box-shadow: 0 14px 36px rgba(16,24,40,0.6);}
.precio-tarjeta.highlight{transform: translateY(-6px); border: 1px solid rgba(0,0,0,0.3);}
.precio-tarjeta h3{margin: 6px 0 12px; color: var(--acento);}
.pritarjeta p{color: var(--apagado); margin: 8px 0;}
.centro .small{margin-top: 12px; color: var(--apagado); font-size: 13px;}
details{background: var(--bg); padding: 14px; border-radius: 10px; margin-bottom: 12px; box-shadow: 0 8px 20px rgba(16,24,40,0.04);}
.text-contacto{color: var(--bg);}
summary{font-weight: 700; cursor: pointer; color: var(--acento);}
.contact{background: var(--apagado); border-radius: 0 0 12px 12px;}
.contact .form{display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 18px;}
.contact .form input,.contact .form textarea{padding:12px; border-radius: 10px; border: 1px solid rgba(16,24,40,0.06); font-size: 15px;}
.contact .form textarea{grid-column: 1/3;}
.contact .form button{grid-column: 1/3; padding: 14px; border-radius: 10px; border: 2px solid var(--acento-cta); background: var(--acento-cta); color: var(--acento); font-weight: 700;}
.contact .form button:hover{background: var(--apagado); color: var(--acento-cta); border: 2px solid var(--acento-cta);}
.con-priv, .con-priv a{color: var(--bg);}
.con-priv a:hover{color: var(--acento-cta) !important; text-decoration: none;}
.legal-content{padding: 60px 0; max-width: 800px;}
.legal-content h1{font-size: 36px; margin-bottom: 20px; color: var(--accent);}
.legal-content h2{font-size: 24px; margin-top: 30px; color: var(--accent);}
.legal-content p, .legal-content li{font-size: 16px; color: var(--text); margin-bottom: 12px;}
.legal-content ul{padding-left: 20px;}
.btn-whatsapp{display: inline-flex; align-items: center; padding: 10px 10px; background-color: var(--whatsapp); color: var(--text); text-decoration: none; border-radius: 5px; font-family: sans-serif; font-weight: bold; font-size: 16px;}
.btn-whatsapp:hover{color: var(--bg); text-decoration: none;}
footer{padding:36px 0; text-align: center; color: var(--bg); background: var(--text); border-top: 1px solid rgba(16,24,40,0.04); font-size: 14px; font-weight: 500;}
.footer-grid{display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 20px;}
.footer-grid a{color: var(--bg) !important;}
.footer-grid a:hover{color: var(--acento-cta) !important; text-decoration: none;}
@media (max-width: 980px) {
  main{margin: 15px;}
  .hero-interno, .grid-2{flex-direction: column; grid-template-columns: 1fr; text-align: center;}
  .hero-copy, .hero-visual{max-width: 100%; width: 100%;}
  .tarjetas-3, .precios-grid{grid-template-columns: 1fr;}
  .hero-cta{justify-content: center;}
  .contact .form{grid-template-columns: 1fr;}
  .contact .form textarea, .contact .form button {grid-column: 1;}
}
.menu-toggle{display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 21px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 50;}

.menu-toggle .bar{width: 30px; height: 3px; background-color: var(--menu); border-radius: 10px; transition: all 0.3s linear; position: relative; transform-origin: 1px;}

/* --- Animación para convertir en X --- */
/* Cuando el JS añada la clase 'is-active' al botón */
.menu-toggle.is-active .bar:nth-child(1) {
    transform: rotate(45deg);
}

.menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}

.menu-toggle.is-active .bar:nth-child(3) {
    transform: rotate(-45deg);
}

/* --- Lógica Responsive (Móvil) --- */
@media (max-width: 980px) {
    .menu-toggle {
        display: flex; /* Aparece en móvil */
    }

    .nav-principal {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 100%; /* Justo debajo del header */
        left: 0;
        right: 0;
        background: var(--text); /* Fondo oscuro como tu header */
        padding: 20px;
        gap: 10px;
        border-bottom: 2px solid var(--acento-cta);
        text-align: center;
        box-shadow: 0 10px 15px rgba(0,0,0,0.2);
    }

    /* Clase que activará el JS */
    .nav-principal.active {
        display: flex;
        animation: fadeInDown 0.3s ease forwards;
    }

    .nav-principal a {
        padding: 15px;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .hero-visual {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0 10px; /* Margen de seguridad para que no toque los bordes */
    }
    .tarjeta-visual {
        width: 100%;
    }
}

/* Animación de entrada suave */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}