/* --- 1. Variables y Estilos Globales --- */
        :root {
            --color-primary-blue: #002a9c;
            --color-primary-yellow: #f2bc1c;
            --color-secondary-yellow: #d3a029;
            --color-text-dark: #333333;
            --color-text-light: #ffffff;
            --color-background-light: #ffffff;
            --color-background-dark: #002a9c;
            --font-main: 'Roboto', sans-serif;
            --font-heading: 'Roboto Slab', serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-main);
            color: var(--color-text-dark);
            background-color: #f0f2f5;
        }

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

        section {
            padding: 10px 0;
        }

        h3, h4 {
            font-family: var(--font-heading);
            font-weight: 700;
            color: var(--color-primary-blue);
            text-align: center;
            font-size: 24px;
            margin-bottom: 25px;
        }

        p {
            line-height: 1.5em;
        }

        /* --- 2. Estilos de Secciones Específicas --- */

/* Sección Hero (VERSIÓN ENCAPSULADA Y FIEL) */
        .hero-section {
            background-color: var(--color-background-light); /* El fondo general de la página se encargará del color */
            padding: 10px 0;
        }
        .hero-wrapper {
            display: flex;
            background-color: var(--color-primary-blue);
            border-radius: 25px; /* Redondeamos el contenedor principal */
            overflow: hidden; /* Muy importante para que los hijos no se salgan de los bordes redondeados */
            min-height: 615px;
        }
        .hero-panel-left, .hero-panel-right {
            flex: 1; /* Cada panel ocupa el 50% */
            min-width: 50%; /* Asegura que no se colapsen */
        }

        .hero-panel-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px 20px; 
            color: var(--color-text-light);
        }

        .hero-logo img {
            max-width: 100%; /* Controla el ancho máximo del logo */
            height: auto;
            margin-bottom: 10px; /* Espacio entre el logo y el texto de abajo */
        }

        .hero-text {
            width: 100%;
            max-width: 100%; /* Le damos un ancho máximo al bloque */
            text-align: center; /* Le decimos que centre a sus hijos (como el availability-box) */
        }

        .hero-text p {
            font-family: var(--font-heading);
            font-size: 32px; /* AUMENTAMOS EL TAMAÑO DE FUENTE PRINCIPAL */
            font-weight: 700;
            margin-bottom: 25px; /* Aumentamos el espaciado */
            text-align: center;
            color: var(--color-text-light);
        }

        .hero-panel-left .highlight-yellow {
            color: var(--color-primary-yellow);
        }
        
        .availability-box {
            border: 2px solid var(--color-primary-yellow);
            border-radius: 10px;
            padding: 20px 20px;
            margin-top: 30px;
            display: inline-block;
            font-size: 24px;
            font-weight: 400;
            font-family: var(--font-main);
        }

        .hero-panel-right {
            padding: 30px; /* Este padding crea el marco azul alrededor de la imagen */
        }

        .hero-image-wrapper {
            width: 100%;
            height: 100%;
            background-image: url('/_static-pages/constituir-una-empresa-en-peru/images/emprendedores-ce-landing-page-1.webp');
            background-size: cover;
            background-position: center;
            border-radius: 40px; /* Bordes redondeados para la imagen */
            transition: transform 0.25s ease-in-out; /* Transición suave para la animación */
        }

        .hero-image-wrapper:hover {
            transform: scale(0.92);
        }

        /* --- Media Query para dispositivos móviles --- */
        @media (max-width: 768px) {
            .hero-wrapper {
                flex-direction: column; /* Apila los paneles verticalmente */
            }
            .hero-panel-left {
                text-align: center;
                align-items: center;
            }
            .hero-text p {
                text-align: center;
            }
            .hero-panel-right {
                min-height: 100%;
                padding: 20px;
            }
            .hero-image-wrapper {
                width: auto;
                height: 380px; /* Le damos una altura fija en lugar de 100% */
            }
        }

/* Botones de Contacto (VERSIÓN FIEL) */
        .contact-buttons {
            background-color: var(--color-background-light);
            padding: 15px 0;
        }
        .buttons-grid {
            display: flex;
            justify-content: center;
            align-items: flex-start; /* Alinea los items al principio */
            gap: 50px; /* Espacio entre las columnas de botones */
            flex-wrap: wrap;
        }
        .button-column {
            display: flex;
            flex-direction: column; /* Apila el botón y el icono verticalmente */
            align-items: center; /* Centra los elementos horizontalmente */
            gap: 15px; /* Espacio entre el botón y el icono */
        }
        .contact-button {
            display: inline-block;
            padding: 15px 40px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 400;
            font-size: 24px;
            color: var(--color-text-light);
            transition: transform 0.2s ease-in-out;
            min-width: 180px; /* Asegura un ancho mínimo similar */
            text-align: center;
        }
        .contact-button.whatsapp {
            background-color: #34af23; /* Verde brillante original */
        }
        .contact-button.call {
            background-color: var(--color-primary-blue); /* Azul corporativo */
        }
        .contact-icon img {
            max-width: 50px;
            height: auto;
            transition: transform 0.2s ease-in-out;
        }
        /* Animación "Grow" solo para el botón rectangular */
        .contact-button:hover {
            transform: scale(1.07);
        }
        /* Animación "Grow" solo para el icono de imagen */
        .contact-icon:hover img {
            transform: scale(1.2);
        }

/* --- Secciones de Información (CONSOLIDADO) --- */
        .info-section {
            background-color: var(--color-background-light);
        }
        .info-section.dark {
            background-color: var(--color-background-dark);
            color: var(--color-text-light);
        }
        .info-section.dark h3, .info-section.dark h4 {
            color: var(--color-text-light);
        }

        /* Caja para Títulos Destacados (Componente) */
        .info-section .title-box {
            padding: 15px 20px;
            border-radius: 10px;
            max-width: 600px;
            margin: 0 auto 40px auto;
        }
        .info-section .title-box.yellow {
            background-color: var(--color-primary-yellow);
            margin-bottom: 10px;
        }
        .info-section .title-box h3 {
            color: var(--color-primary-blue);
            font-size: 24px;
            margin-bottom: 0;
            text-align: center;
        }

        /* Caja para Contenido General (Componente) */
        .info-section .content-box {
            text-align: center;
            color: var(--color-primary-blue); /* Color de texto por defecto para el contenido */
        }
        
        /* Párrafos generales dentro de .info-section (Estilo por defecto) */
        .info-section p {
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto 0px auto;
        }

        /* Clases de Utilidad para Texto (Anulan el estilo por defecto) */
        .info-section .text-large {
            font-family: var(--font-heading);
            font-size: 26px !important; /* Usamos !important para asegurar que gane */
            font-weight: 700;
            margin-bottom: 15px;
        }
        .info-section .text-medium {
            font-size: 20px !important;
            margin-bottom: 5px;
            text-align: justify;
        }
        .info-section .text-small {
            font-size: 14px !important;
            margin-top: 10px;
            text-align: left;
        }

/* Estilos para grids dentro de secciones de información */
        .info-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            margin-top: 30px;
        }
        @media (min-width: 768px) {
            .info-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
            .info-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
        }
        .info-grid p {
            font-size: 16px;
        }
        .info-grid strong {
            color: var(--color-primary-yellow);
            font-size: 16px;
            display: block;
            margin-bottom: 5px;
        }

        /* Componente Reutilizable: Caja de Características */
        .feature-box {
            padding: 20px 15px;
            border-radius: 15px;
            text-align: center;
        }

        /* Modificador de Color para la Caja */
        .feature-box.blue {
            background-color: var(--color-primary-blue);
            border: 3px solid var(--color-primary-yellow);
            color: var(--color-text-light); /* Color de texto por defecto para párrafos */
        }

        /* Título dentro de la Caja */
        .feature-box h4 {
            font-family: var(--font-main);
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 15px;
        }
        .feature-box.blue h4 {
            color: var(--color-primary-yellow); /* Color específico para el título en la caja azul */
        }

        /* Párrafo dentro de la Caja */
        .feature-box p {
            font-size: 16px;
            line-height: 1.6;
            margin: 0;
            color: inherit; /* Hereda el color del padre (.feature-box) */
        }

 /* --- Acordeón de FAQ --- */
        .faq-section {
            background-color: var(--color-background-light);
            padding: 15px 0;
        }
        .accordion-wrapper {
            max-width: 700px;
            margin: 0 auto;
        }
        .accordion-item {
            border: 1px solid #e0e0e0;
            margin-bottom: 10px;
            border-radius: 3px;
        }
        .accordion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            background-color: #f2bc1c;
            border: none;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: 700;
            font-family: var(--font-main);
            color: var(--color-primary-blue);
            cursor: pointer;
            text-align: left;
        }
        .accordion-header .icon-closed,
        .accordion-header.active .icon-opened {
            display: inline-block;
        }
        .accordion-header .icon-opened,
        .accordion-header.active .icon-closed {
            display: none;
        }
        .accordion-header .icon-closed i { color: var(--color-text-dark); }
        .accordion-header .icon-opened i { color: green; }
        
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out;
        }
        .accordion-content-inner {
            padding: 16px 24px;
            font-size: 16px;
            color: var(--color-primary-blue);
        }
        .accordion-content-inner ol {
            margin-top: 0;
            margin-bottom: 8px;
            padding-left: 20px;
        }
        .accordion-content-inner p {
            margin-top: 0;
            margin-bottom: 0;
        }
        .accordion-content-inner ol li {
            line-height: 1.4;      /* Interlineado interno */
            margin-bottom: 4px;   /* Separación entre items */
        }
        .accordion-content-inner ul {
            list-style-type: none; /* El punto negro por defecto */
            padding-left: 0;    /* Espacio a la izquierda para la indentación */
            margin-top: 0;       /* Espacio arriba de la lista */
            margin-bottom: 0;    /* Espacio abajo de la lista */
        }
        .accordion-content-inner li {
            margin-bottom: 0.5em; /* Espacio entre ítems */
            padding-left: 1.5em;   /* 3. Creamos espacio a la izquierda para el icono */
            position: relative;    /* 4. Necesario para posicionar el icono */
            line-height: 1.4;
        }
        .accordion-content-inner li::before {
            content: '\f058'; /* Código Unicode del icono 'check-circle' de Font Awesome */
            font-family: 'Font Awesome 6 Free'; /* MUY IMPORTANTE: Especificar la fuente de iconos */
            font-weight: 900; /* Para usar la versión sólida del icono */
            color: var(--color-secondary-yellow); /* Color del icono */
            position: absolute; /* Posicionamos el icono */
            left: 0;
            top: 2px;
            font-size: 1em;
        }
        .accordion-content-inner a {
            color: var(--color-primary-blue);
            font-weight: 700;
            text-decoration: underline;
        }
        .accordion-content-inner strong {
            font-family: var(--font-heading);
        }
        
        /* Formulario */
        .form-section {
            background-color: var(--color-background-light);
        }
        .form-container {
            max-width: 480px;
            margin: 0 auto;
        }
        .form-container input[type="text"],
        .form-container input[type="tel"],
        .form-container input[type="email"],
        .form-container textarea {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-family: var(--font-main);
            font-size: 16px;
        }
        .form-container .submit-button {
            width: 100%;
            padding: 15px;
            background-color: var(--color-primary-blue);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .form-container .submit-button:hover {
            background-color: #001f75;
        }
        .form-container .privacy-policy {
            font-size: 14px;
            margin-bottom: 15px;
        }
        .form-container .recaptcha-notice {
            font-size: 11px;
            text-align: center;
            color: #777;
            margin-top: 20px;
        }