/* Variables CSS */
     :root {
         --primary-color: #0b3d128d;
         --secondary-color: #dfddc9;
         --text-color: #333;
         --background-light: #bad4af39;
         --background-cta: #75b15baf;
         --backgroun-gradiente: linear-gradient(rgb(120, 172, 97), rgb(52, 59, 2));
         --white: #fff;
         --black: #000;
         --background-dark: rgba(224, 233, 228, 0.766);
         --green: #033c02;
         --red: #ff4d4d;
         --menu: rgb(216, 221, 201);
         --border-color: #ddd;
     }

     /* Reset básico y estilos globales */
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         font-family: 'Roboto', sans-serif;
         line-height: 1.6;
         color: var(--text-color);
         background-color: var(--background-light);
     }

     .spinner {
         margin: 2em auto;
         width: 50px;
         height: 50px;
         border: 5px solid #d2e954;
         border-top: 5px solid #3b9c60;
         border-radius: 50%;
         animation: spin 3s infinite;

     }

     @keyframes spin {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 20px;
     }

     a {
         text-decoration: none;
         color: var(--primary-color);
     }

     a:hover {
         text-decoration: underline;
     }

     .btn {
         display: inline-block;
         padding: 10px 20px;
         border-radius: 5px;
         font-weight: bold;
         text-align: center;
         transition: background-color 0.3s ease;
     }

     .btn-primary {
         background-color: var(--primary-color);
         color: var(--white);
         border: 1px solid var(--black);
     }

     .btn-primary:hover {
         background-color: #0056b3;
         border-color: #0056b3;
     }

     .btn-secondary {
         background-color: var(--secondary-color);
         color: var(--white);
         border: 1px solid var(--secondary-color);
     }

     .btn-secondary:hover {
         background-color: #5a6268;
         border-color: #5a6268;
     }

     .btn-login {
         background-color: transparent;
         color: rgb(8, 8, 8);
         border: 1px solid var(--black);
         padding: 10px 20px;
         display: inline-block;
     }

     .btn-login:hover {
         background-color: var(--primary-color);
         color: var(--white);
     }

     /* Header */
     .main-header {
         background: linear-gradient(rgb(120, 172, 97), rgb(52, 59, 2));
         /* background-color: var(--menu); */
         padding: 15px 0;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         position: sticky;
         top: 0;
         z-index: 1000;
     }

     .main-header .container {
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-wrap: nowrap;
     }

     .main-header .logo img {
         height: 80px;
         width: 100px;
         flex-shrink: 0;
         flex-grow: 0;
     }

     /* Navegación Principal (Menú) */
     .main-nav {
         flex-grow: 1;
         display: flex;
         justify-content: center;
         margin: 0;
         padding: 0;
     }

     .main-nav .nav-list {
         list-style: none;
         margin: 0;
         padding: 0;
         display: flex;
         gap: 25px;
     }

     .main-nav .nav-list a {
         color: rgb(8, 8, 8);
         font-weight: bold;
         transition: color 0.3s ease;
         padding: 5px 0;
         font-size: 1.3em;
     }

     .main-nav .nav-list a:hover {
         color: var(--primary-color);
         text-decoration: none;
     }

     .main-nav .nav-list h3 {
         color: rgb(245, 241, 27);
         font-weight: bold;
         transition: color 0.3s ease;
         padding: 5px 0;
         font-size: 3.3em;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
         /* Ejemplo: Sombra negra */
     }

     .main-nav .nav-list h3:hover {
         color: rgb(5, 248, 66);
         text-shadow: 0 0 8px rgb(7, 49, 3);
         cursor: pointer;
     }

     /* Botón de autenticación (Área Cliente) */
     .auth-buttons {
         display: flex;
         align-items: center;
         flex-shrink: 0;
     }

     /* Botón de Hamburguesa (Menu responsivo) */
     .menu-toggle {
         display: none;
         background: none;
         border: none;
         cursor: pointer;
         padding: 10px;
         z-index: 1001;
     }

     .menu-toggle span {
         display: block;
         width: 25px;
         height: 3px;
         background-color: var(--text-color);
         margin: 5px 0;
         transition: 0.3s;
     }

     /* Sección Hero */
     .hero-section {
         background: linear-gradient(rgba(50, 105, 54, 0.500), rgba(186, 212, 175, 0.0)), url('../img/arbol_leyes_an.png');
         color: var(--white);
         text-align: center;
         padding: 100px 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         min-height: 480px;
         max-height: 600px;
         background-size: auto;
         background-position: center;

     }

     .hero-section img {
         max-width: 100%;
         height: auto;
         display: block;
     }

     .hero-section h1 {
         text-shadow: 2px 2px 4px rgba(8, 145, 72, 0.5);
         font-size: 3.5em;
         margin-bottom: 10px;
     }

     .hero-section h3 {
         text-shadow: 2px 2px 4px rgba(20, 63, 5, 0.5);
         color: var(--white);
         font-style: italic;
         font-size: 2em;
         margin-bottom: 10px;
     }



     .hero-section p {
         text-shadow: 2px 2px 4px rgba(11, 126, 25, 0.683);
         color: var(--white);
         font-size: 1.6em;
         margin-bottom: 10px;
     }

     /* Secciones generales */
     section {
         padding: 20px 0;
         text-align: center;
     }

     section h2 {
         font-size: 3.5em;
         margin-bottom: 10px;
         color: var(--primary-color);
     }



     /* Sección panel_divide */
     .panel-section {
         margin-top: 10px;
         margin-bottom: 10px;
         /* background-color: var(--primary-color); */
         /* max-height: 200px; */
         /* min-height: 100px; */
         /* padding: 100px 20px; */
         display: flex;
         /* align-items: center;
         justify-content: center; */

     }

     /* Sección Medio */
     .medio-section {
         margin-top: 20px;
         background-color: var(--background-light);
         /* max-height: 200px; */
         /* min-height: 100px; */
         /* padding: 100px 20px; */
         display: flex;
         align-items: center;
         justify-content: center;

     }

     .medio-section h2 {
         font-size: 1.6em;
         margin-bottom: 5px;
         margin-left: 40px;
         color: var(--black);
     }

     .medio-section h3 {
         font-size: 1.6em;
         color: var(--green);
         margin-left: 20%;
         margin-right: 20%;
         margin-bottom: 5px;
     }

     .medio-section p {
         font-size: 1.2em;
         color: #555;
         margin-bottom: 10px;
     }

     /* Sección Características */
     .caracteristicas-section {
         background-color: var(--background-light);
     }

     .caracteristicas-section h2 {
         font-size: 2.2em;
         margin-bottom: 10px;
         color: #0056b3
             /* color:     var(--black); */
     }

     .caracteristicas-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
         gap: 30px;
         margin-top: 10px;
     }

     .caracteristica-item {
         padding: 30px;
         border: 1px solid var(--border-color);
         border-radius: 8px;
         background-color: var(--white);
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
         transition: transform 0.3s ease;
     }

     .caracteristica-item:hover {
         transform: translateY(-5px);
     }

     .caracteristica-item img {
         height: 60px;
         margin-bottom: 20px;
     }

     .caracteristica-item h3 {
         font-size: 1.5em;
         margin-bottom: 10px;
         color: var(--black);
     }

     .caracteristica-item p {
         font-size: 1.2em;
         color: #555;
     }

     /* Sección Flujo / Testimonios */
     .flujo-section {
         background-color: var(--background-light);
         position: relative;

     }

     .flujo-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 30px;
         margin-top: 40px;
     }

     .flujo-item {
         flex: 0 0 100%;
         min-width: 100%;
         padding: 30px;
         background-color: var(--white);
         border-radius: 8px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
         margin-right: 20px;
         text-align: center;
     }

     .flujo-item img {
         height: 60px;
         margin-bottom: 20px;
     }

     .flujo-item:last-child {
         margin-right: 0;
     }

     .flujo-item p {
         font-size: 1.2em;
         font-style: italic;
         margin-bottom: 15px;
         color: #444;
     }

     .flujo-section h4 {
         font-weight: bold;
         color: var(--primary-color);
     }

     .flujo-section h3 {
         font-size: 1.5em;
         font-weight: bold;
         color: var(--text-color);
     }

     .flujo-section h2 {
         font-size: 2.8em;
         margin-bottom: 10px;
         color: var(--black);
     }

     /* Sección Cuenta */
     .conta-section {
         background-color: var(--white);
     }

     .conta-image {
         flex: 1;
         min-width: 300px;
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .conta-image .macbook-mockup {
         max-width: 100%;
         height: auto;
         display: block;
         z-index: 2;
         position: relative;
     }

     /* Estilo para el círculo de fondo detrás de la imagen */
     .conta-image .image-background-circle {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 400px;
         height: 400px;
         background-color: #e0f2f7;
         border-radius: 50%;
         z-index: 1;
     }

     .conta-section .container {
         width: 100%;
         display: flex;
         align-items: top;
         gap: 50px;
         flex-wrap: wrap;
     }

     .conta-content {
         display: flex;
         width: 100%;
         align-items: center;
         gap: 50px;
         flex-wrap: wrap;
     }

     .conta-text {
         flex: 1.5;
         min-width: 350px;
     }

     .conta-text p.description {
         font-weight: bold;
         margin-bottom: 25px;
         color: var(--text-color);

     }

     .conta-text p {
         font-size: 1.2em;
         line-height: 1.8;
         margin-bottom: 15px;
         color: #555;
         text-align: left;
     }

     .conta-text h2 {
         font-size: 2.8em;
         color: var(--text-color);
         margin-bottom: 10px;
         position: relative;
         text-align: center;
     }

     .conta-text h4 {
         font-size: 1.6em;
         color: var(--text-color);
         margin-bottom: 10px;
         position: relative;
         text-align: left;
     }

     /* Sección de Llamada a la Acción (CTA) */
     .cta-section {
         background: var(--backgroun-gradiente);
         /* background-color: var(--background-cta); */
         /* color: var(--black); */
         padding: 80px 20px;
         text-align: center;
     }

     .cta-section h2 {
         text-shadow: 2px 2px 4px rgba(3, 41, 21, 0.997);
         color: var(--white);
         font-size: 2.8em;
     }

     .cta-section p {
         font-size: 1.3em;
         margin-bottom: 40px;
     }

     /* Footer */
     .main-footer {
         /* height: 230px; */
         background-color: rgb(0, 0, 0);
         color: var(--white);
         padding: 10px 0 20px;
         font-size: 0.9em;
     }

     .main-footer .footer-links {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 30px;
         margin-bottom: 20px;
         text-align: left;
     }

     .main-footer .footer-column h3 {
         font-size: 1.2em;
         margin-bottom: 10px;
         color: var(--primary-color);
     }

     .main-footer .footer-column ul {
         list-style: none;
     }

     .main-footer .footer-column ul li {
         margin-bottom: 10px;
     }

     .main-footer .footer-column a {
         color: var(--white);
         opacity: 0.8;
         transition: opacity 0.3s ease;
     }

     .main-footer .footer-column a:hover {
         opacity: 1;
         text-decoration: underline;
     }

     .main-footer .social-media {
         margin-top: 20px;
     }

     .main-footer .social-media a {
         display: inline-block;
         margin-right: 15px;
     }

     .main-footer .social-media img {
         /* height: 30px; */
         /* width: 30px; */
         opacity: 0.8;
         transition: opacity 0.3s ease;
     }

     .main-footer .social-media img:hover {
         opacity: 1;
     }

     .main-footer .footer-bottom {
         text-align: center;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         padding-top: 5px;
         margin-top: 5px;
         opacity: 0.7;
     }

     .separador {
         height: 20px;
     }

     /* ===================================== */
     /* SECCIÓN: ¿QUÉ ES LAWSTREE?             */
     /* ===================================== */
     .what-is-lawstree-section {
         background-color: var(--white);
         padding: 50px 0;
         text-align: left;
     }

     .what-is-lawstree-section .container {
         display: flex;
         align-items: center;
         gap: 50px;
         flex-wrap: wrap;
     }

     .what-is-lawstree-content {
         display: flex;
         width: 100%;
         align-items: center;
         gap: 50px;
         flex-wrap: wrap;
     }

     .what-is-lawstree-image {
         flex: 1;
         min-width: 300px;
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .what-is-lawstree-image .macbook-mockup {
         max-width: 100%;
         height: auto;
         display: block;
         z-index: 2;
         position: relative;
     }

     /* Estilo para el círculo de fondo detrás de la imagen */
     .what-is-lawstree-image .image-background-circle {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 400px;
         height: 400px;
         background-color: #e0f2f7;
         border-radius: 50%;
         z-index: 1;
     }

     .what-is-lawstree-text {
         flex: 1.5;
         min-width: 350px;
     }

     .what-is-lawstree-text h2 {
         font-size: 2.8em;
         color: var(--text-color);
         margin-bottom: 10px;
         position: relative;
         text-align: left;
     }

     /* Línea verde debajo del título */
     .what-is-lawstree-text h2::after {
         content: '';
         display: block;
         width: 60px;
         height: 4px;
         background-color: var(--primary-color);
         margin-top: 10px;
         margin-bottom: 20px;
     }

     .what-is-lawstree-text p {
         font-size: 1.2em;
         line-height: 1.8;
         margin-bottom: 5px;
         color: #555;
     }

     .what-is-lawstree-text p.description {
         font-size: 1.4em;
         font-weight: bold;
         margin-bottom: 25px;
         color: var(--text-color);
     }

     /* Media Queries para Responsividad */
     @media (max-width: 992px) {
         .main-header .container {
             justify-content: space-between;
             flex-wrap: nowrap;
         }

         .menu-toggle {
             display: block;
             order: 3;
             margin-left: 15px;
         }

         .main-nav {
             display: none;
             position: absolute;
             top: 100%;
             left: 0;
             width: 100%;
             background-color: var(--menu);
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
             flex-direction: column;
             align-items: flex-start;
             padding: 10px 0;
             z-index: 999;
         }

         .main-nav.active {
             display: flex;
         }

         .main-nav .nav-list {
             flex-direction: column;
             width: 100%;
             padding: 0;
         }

         .main-nav .nav-list li {
             margin: 0;
             width: 100%;
             text-align: left;
         }

         .main-nav .nav-list a {
             padding: 10px 20px;
             display: block;
             border-bottom: 1px solid rgba(0, 0, 0, 0.05);
         }

         .main-nav .nav-list li:last-child a {
             border-bottom: none;
         }


         .auth-buttons {
             display: flex;
             order: 2;
             margin-left: auto;
             margin-right: 15px;
         }

         .menu-toggle {
             display: block;
             order: 3;
         }

         .hero-section h1 {
             font-size: 2.5em;
         }

         .hero-section p {
             font-size: 1em;
         }

         section {
             padding: 60px 0;
         }

         section h2 {
             font-size: 2em;
         }

         .footer-links {
             grid-template-columns: 1fr;
             text-align: center;
         }

         .footer-column ul {
             padding-bottom: 20px;
         }

         .what-is-lawstree-section .container {
             flex-direction: column;
             text-align: center;
         }

         .what-is-lawstree-image {
             width: 80%;
             max-width: 400px;
             margin-bottom: 30px;
         }

         .what-is-lawstree-image .image-background-circle {
             width: 300px;
             height: 300px;
         }

         .what-is-lawstree-text {
             min-width: unset;
             width: 100%;
         }

         .what-is-lawstree-text h2 {
             text-align: center;
         }

         .what-is-lawstree-text h2::after {
             margin-left: auto;
             margin-right: auto;
         }

         .conta-section .container {
             flex-direction: column;
             text-align: center;
         }

         .conta-image {
             width: 80%;
             max-width: 400px;
             margin-bottom: 30px;
         }

         .conta-image .image-background-circle {
             width: 300px;
             height: 300px;
         }

         .conta-text {
             min-width: unset;
             width: 100%;
         }

         .conta-text h2 {
             text-align: center;
         }
     }

     @media (max-width: 600px) {
         .what-is-lawstree-section {
             padding: 60px 0;
         }

         .what-is-lawstree-text h2 {
             font-size: 2em;
         }

         .what-is-lawstree-text p {
             font-size: 1em;
         }

         .conta-section {
             padding: 60px 0;
         }

         .conta-text h2 {
             font-size: 2em;
         }

         .conta-text p {
             font-size: 1em;
         }
     }