/* --- TUS ESTILOS DE SIEMPRE --- */
       :root {
           --bg: #f8f9fa;
           --panel: #ffffff;
           --text: #1c2636;
           --text-secondary: #475569;
           --accent: #c63b36;
           --accent-hover: #e04e49;
           --header-bg: #1c2636;
           --header-text: #ffffff;
       }

       body,
       html {
           margin: 0;
           padding: 0;
           width: 100%;
           overflow-x: hidden;
           background: var(--bg);
           font-family: 'Segoe UI', system-ui, sans-serif;
           color: var(--text);
           min-height: 100vh;
           display: flex;
           flex-direction: column;
       }

       a {
           text-decoration: none;
           color: inherit;
           transition: 0.2s;
       }

       ul {
           list-style: none;
           padding: 0;
           margin: 0;
       }

       img {
           max-width: 100%;
           display: block;
       }

       /* --- HEADER --- */
       header {
           position: sticky;
           top: 0;
           background: var(--header-bg);
           border-bottom: 4px solid var(--accent);
           padding: 0.8rem 5%;
           display: flex;
           justify-content: space-between;
           align-items: center;
           z-index: 1000;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
       }

       .brand-container {
           display: flex;
           align-items: center;
           gap: 15px;
       }

       .brand-logo {
           height: 50px;
           width: auto;
           filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
       }

       .logo-text {
           font-size: 1.5rem;
           font-weight: 900;
           color: var(--header-text);
           text-transform: uppercase;
           letter-spacing: 1px;
       }

       .nav-links {
           display: flex;
           gap: 2rem;
       }

       .nav-links a {
           font-weight: 600;
           font-size: 0.95rem;
           color: var(--header-text);
           position: relative;
           padding: 5px 0;
       }

       .nav-links a::after {
           content: '';
           position: absolute;
           width: 0;
           height: 2px;
           bottom: 0;
           left: 0;
           background-color: var(--accent);
           transition: width 0.3s;
       }

       .nav-links a:hover::after {
           width: 100%;
       }

       .hamburger {
           display: none;
           cursor: pointer;
           flex-direction: column;
           gap: 6px;
           margin-left: auto
       }

       .hamburger span {
           display: block;
           width: 30px;
           height: 3px;
           background-color: var(--header-text);
           border-radius: 3px;
           transition: 0.3s;
       }

       .hamburger.open span:nth-child(1) {
           transform: translateY(9px) rotate(45deg);
       }

       .hamburger.open span:nth-child(2) {
           opacity: 0;
       }

       .hamburger.open span:nth-child(3) {
           transform: translateY(-9px) rotate(-45deg);
       }

       /* SECCIONES */
       section {
           padding: 4rem 5%;
           min-height: 80vh;
           display: flex;
           flex-direction: column;
           justify-content: center;
       }

       .section-title {
           font-size: 2.8rem;
           text-align: center;
           margin-bottom: 1rem;
           color: var(--text);
           text-transform: uppercase;
           font-weight: 800;
       }

       .section-subtitle {
           text-align: center;
           color: var(--text-secondary);
           margin-bottom: 3rem;
           max-width: 700px;
           margin-left: auto;
           margin-right: auto;
           font-size: 1.1rem;
       }

       /* HERO */
       #inicio {
           text-align: center;
           background: white;
           border-bottom: 1px solid #e2e8f0;
       }

       #inicio h1 {
           font-size: 4rem;
           margin-bottom: 1rem;
           line-height: 1.1;
           font-weight: 900;
           color: var(--text);
       }

       #inicio span {
           color: var(--accent);
       }

       .btn-main {
           background: var(--accent);
           color: white;
           padding: 14px 36px;
           border-radius: 50px;
           font-weight: bold;
           font-size: 1.1rem;
           margin-top: 2rem;
           display: inline-block;
           border: 2px solid transparent;
           box-shadow: 0 10px 20px rgba(198, 59, 54, 0.2);
           cursor: pointer;
       }

       .btn-main:hover {
           background: white;
           border-color: var(--accent);
           color: var(--accent);
           transform: translateY(-3px);
       }

       /* RECOMENDADOR */
       #recomendador {
           background: #f1f5f9;
       }

       .tool-wrapper {
           background: #000;
           padding: 0;
           border-radius: 20px;
           box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
           height: 850px;
           border: 8px solid var(--text);
           overflow: hidden;
       }

       iframe.tool-frame {
           width: 100%;
           height: 100%;
           border: none;
           display: block;
       }

       /* BLOG */
       #blog {
           background: white;
       }

       .blog-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 2rem;
       }

       .post-card {
           background: var(--panel);
           border-radius: 15px;
           overflow: hidden;
           transition: transform 0.3s, box-shadow 0.3s;
           border: 1px solid #e2e8f0;
           display: flex;
           flex-direction: column;
           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
       }

       .post-card:hover {
           transform: translateY(-8px);
           box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
           border-color: var(--accent);
       }

       .card-img-container {
           height: 220px;
           overflow: hidden;
           background: #eee;
           position: relative;
       }

       .card-img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .post-card-content {
           padding: 1.5rem;
           flex: 1;
           display: flex;
           flex-direction: column;
       }

       .post-meta {
           font-size: 0.85rem;
           color: var(--accent);
           font-weight: bold;
           text-transform: uppercase;
           margin-bottom: 0.5rem;
       }

       .post-title {
           font-size: 1.3rem;
           font-weight: bold;
           margin-bottom: 10px;
           color: var(--text);
       }

       .post-excerpt {
           font-size: 0.95rem;
           color: var(--text-secondary);
           margin-bottom: 1.5rem;
           flex: 1;
           line-height: 1.5;
       }

       .read-btn {
           text-align: center;
           background: white;
           padding: 12px;
           border-radius: 8px;
           font-weight: 600;
           color: var(--text);
           border: 2px solid #e2e8f0;
           display: block;
       }

       .read-btn:hover {
           background: var(--text);
           border-color: var(--text);
           color: white;
       }

       /* CONTACTO Y FOOTER */
       #contacto {
           background: #f8f9fa;
       }

       .contact-container {
           display: flex;
           flex-wrap: wrap;
           gap: 4rem;
           justify-content: center;
           max-width: 1000px;
           margin: 0 auto;
       }

       .contact-info h3 {
           color: var(--accent);
           margin-bottom: 1rem;
           font-size: 1.8rem;
       }

       .contact-item {
           font-size: 1.1rem;
           margin-bottom: 15px;
           color: var(--text-secondary);
           display: flex;
           align-items: center;
           gap: 10px;
       }

       form {
           display: flex;
           flex-direction: column;
           gap: 1rem;
           min-width: 300px;
           flex: 1;
       }

       input,
       textarea {
           background: white;
           border: 2px solid #cbd5e1;
           padding: 15px;
           border-radius: 10px;
           color: var(--text);
           font-family: inherit;
           font-size: 1rem;
           transition: 0.2s;
       }

       input:focus,
       textarea:focus {
           outline: none;
           border-color: var(--accent);
           box-shadow: 0 0 0 3px rgba(198, 59, 54, 0.1);
       }

       footer {
           text-align: center;
           padding: 3rem 2rem;
           background: var(--header-bg);
           color: #94a3b8;
           font-size: 0.9rem;
       }

       /* RESPONSIVE */
       /* --- RESPONSIVE FIXED --- */
       @media (max-width: 768px) {
           .hamburger {
               display: flex;
           }

           .brand-logo {
               height: 40px;
           }

           .logo-text {
               font-size: 1.2rem;
           }

           .nav-links {
               position: absolute;
               top: 100%;
               left: 0;
               width: 100%;
               background-color: var(--header-bg);

               flex-direction: column;
               align-items: flex-start;
               gap: 0;

               height: auto;
               max-height: 0;
               padding: 0;

               overflow: hidden;
               transition: max-height 0.5s ease-in-out;

               border-bottom: 0 solid var(--accent);
               box-shadow: none;
           }

           .nav-links.active {
               max-height: 500px;
               border-bottom: 4px solid var(--accent);
               box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
           }

           .nav-links li {
               width: 100%;
           }

           .nav-links a {
               display: block;
               width: 100%;
               padding: 1.2rem 5%;
               text-align: center;
               border-top: 1px solid rgba(255, 255, 255, 0.05);
               position: relative;
           }

           .nav-links a:hover {
               background-color: transparent;
               color: var(--accent);
           }

           .nav-links a::after {
               bottom: 0;
               left: 0;
               width: 0;
               height: 2px;
               background-color: var(--accent);
               transition: width 0.3s;
           }

           .nav-links a:hover::after {
               width: 100%;
           }

           #inicio h1 {
               font-size: 2.5rem;
           }

           .section-title {
               font-size: 2rem;
           }

           .brand-logo {
               height: 45px;
           }

           .logo-text {
               font-size: 1.4rem;
           }

           .tool-wrapper {
               height: 650px;
               border-width: 4px;
           }
       }