/* CSS para RedGlobal Educación Física y Deporte */

/* Variables CSS (colores originales de Kubio convertidos a valores estándar) */
:root {
    --color-primary: #2E5BBA;
    --color-primary-dark: #1F52A9;
    --color-secondary: #F17C20;
    --color-secondary-dark: #9B5014;
    --color-tertiary: #4EBA9A;
    --color-tertiary-dark: #2A6453;
    --color-text-dark: #2B2D42;
    --color-text-light: #69768B;
    --color-white: #FFFFFF;
    --color-light-gray: #CCCCCC;
    --color-medium-gray: #999999;
    --color-dark-gray: #323232;
    --color-black: #000000;
}

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

body {
    font-family: Mulish, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-text-dark);
}

/* Contenedor principal del sitio */
.site-container {
    min-height: 100vh;
}

/* Skip link para accesibilidad */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background-color: #eee;
    color: #444;
    padding: 15px 23px 14px;
    font-size: 1em;
    text-decoration: none;
    z-index: 100000;
}

.skip-link:focus {
    top: 5px;
    left: 5px;
}

/* BARRA SUPERIOR NEGRA */
.top-bar {
    background-color: var(--color-black);
    padding: 8px 0;
}

.top-bar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

/* Información de contacto en la barra superior */
.contact-info ul {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
}

.contact-info li {
    display: flex;
    align-items: center;
    gap: 5px;
}

.contact-info .icon {
    width: 14px;
    height: 14px;
    fill: var(--color-white);
    flex-shrink: 0;
}

.contact-info span {
    color: var(--color-white);
    font-size: 13px;
    white-space: nowrap;
}

.contact-info a {
    color: var(--color-white);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Contenedor derecho de la barra superior */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Selector de idiomas */
.language-selector {
    position: relative;
}

.language-selector select {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 12px;
    padding-right: 20px;
}

.language-selector select:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.language-selector select:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--color-white);
}

.language-selector select option {
    background-color: var(--color-text-dark);
    color: var(--color-white);
    padding: 5px;
}

/* Iconos sociales en la barra superior */
.social-icons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.social-icons .icon {
    width: 16px;
    height: 16px;
    fill: var(--color-light-gray);
    padding: 3px;
    transition: fill 0.3s ease;
}

.social-icons .icon:hover {
    fill: var(--color-white);
}

/* NAVEGACIÓN PRINCIPAL */
.main-nav {
    background-color: var(--color-white);
    padding: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-nav .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Logo centrado */
.logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.site-logo {
    max-height: 100px;
    height: auto;
    width: auto;
}

/* Menú principal con colores diferentes */
.menu-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}

.main-menu li {
    position: relative;
}

.main-menu li:nth-child(1) a {
    background-color: #2E5BBA; /* Azul para Inicio */
    color: white;
}

.main-menu li:nth-child(2) a {
    background-color: #1E88E5; /* Azul claro para Beneficios */
    color: white;
}

.main-menu li:nth-child(3) a {
    background-color: #26A69A; /* Verde azulado para Programa */
    color: white;
}

.main-menu li:nth-child(4) a {
    background-color: #5C6BC0; /* Púrpura para Comités */
    color: white;
}

.main-menu li:nth-child(5) a {
    background-color: #1976D2; /* Azul oscuro para Cuotas */
    color: white;
}

.main-menu li:nth-child(6) a {
    background-color: #D32F2F; /* Rojo para Presentación */
    color: white;
}

.main-menu li a {
    display: block;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
    border: none;
    margin: 0;
}

.main-menu li a:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Submenús (si aplica) */
.main-menu li ul {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.main-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-menu li ul li a {
    display: block;
    padding: 8px 20px;
    font-size: 14px;
    color: var(--color-text-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    transition: all 0.3s ease;
}

.main-menu li ul li:last-child a {
    border-bottom: none;
}

.main-menu li ul li a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Menú móvil (botón) */
.mobile-menu-toggle {
    display: none;
}

.mobile-menu-toggle button {
    background-color: var(--color-primary);
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

.mobile-menu-toggle button .icon {
    width: 20px;
    height: 20px;
    fill: white;
}

.mobile-menu-toggle button:hover {
    background-color: var(--color-primary-dark);
}

/* Offscreen menu (para móvil) */
.offscreen-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background-color: var(--color-text-dark);
    z-index: 9999;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.offscreen-menu.show {
    right: 0;
}

.offscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.offscreen-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* SECCIONES PRINCIPALES */
.section {
    padding: 60px 0;
}

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

.section .row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.column {
    flex: 1;
    min-width: 0;
}

/* Sección del título principal */
.hero-section {
    background-color: #f6f6f6;
    padding: 40px 0;
    text-align: center;
}

.hero-title {
    color: #0869b3;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

/* Sección de información del evento */
.event-info-section {
    padding: 30px 0;
    text-align: center;
}

.event-info-section p {
    text-align: center;
}
/*
.event-icon .icon {
    width: 48px;
    height: 48px;
    fill: #fe701c;
    margin: 0 auto 20px;
    display: block;
    color: #FE701C;
}
*/

/* Ajusta esta regla para el contenedor del icono de Font Awesome */
.event-info-section .event-icon-container { /* Usa la nueva clase aquí */
    display: block; /* O inline-block, dependiendo de tu diseño */
    text-align: center; /* Centra el icono si el span es un bloque */
    margin: 0 auto 20px; /* Margen para separarlo del texto */
    /* No necesitas width, height, ni fill aquí. El icono interno se ajustará. */
}

/* ESTA ES LA CLAVE: Estiliza directamente el icono de Font Awesome */
.event-info-section .event-icon-container .fa-anchor {
    color: #FE701C; /* Tu color deseado */
    font-size: 48px; /* Haz el icono más grande, como querías que fuera tu SVG original */
    line-height: 1; /* Asegura que no haya espacio extra alrededor */
}

.event-info-section p {
    font-weight: 700;
    font-size: 1.8em;
    color: var(--color-text-dark);
    margin: 10px 0;
}

/* Sección de información organizativa */
.organizational-info-section {
    background-color: #f6f6f6;
    padding: 50px 0;
    text-align: center;
}

.organizational-info-section p {
    font-size: 1.0em;
    line-height: 1.6;
    margin-bottom: 18px;
    text-align: center;
}

.organizational-info-section p strong {
    font-weight: 700;
}

.organizational-info-section a {
    color: var(--color-primary);
    text-decoration: none;
}

.organizational-info-section a:hover {
    text-decoration: underline;
}

/* Sección de presentación con columnas lado a lado */
.presentation-section {
    background-color: #f6f6f6;
    padding: 60px 0;
}

.content-two-columns {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: nowrap;
}

.text-column {
    flex: 0 0 55%;
    max-width: 55%;
    padding-right: 30px;
}

.image-column {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 30px;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin : 0px auto;
}

/* Títulos de sección */
.section-title {
    font-family: Mulish, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 2.4em;
    line-height: 1.2;
    color: var(--color-text-dark);
    margin-bottom: 20px;
}

/* Divisores */
.divider {
    width: 25%;
    height: 4px;
    background-color: #0869b3;
    border: none;
    margin-bottom: 20px;
}

/* Texto justificado */
p {
    text-align: justify;
    line-height: 1.6;
    margin-bottom: 18px;
    font-size: 1.05em;
}

/* Botones */
.button-group {
    margin-top: 30px;
}

.btn {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: 15px 30px;
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: var(--color-secondary-dark);
}

/* Tarjetas del programa lado a lado */
.program-cards-container {
    display: flex;
    align-items: stretch;
    gap: 4%;
    flex-wrap: nowrap;
    margin-top: 30px;
}

.program-card {
    flex: 0 0 48%;
    max-width: 48%;
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.program-card .card-image img {
    border-radius: 8px;
    margin-bottom: 20px;
}

.program-card .card-title {
    font-weight: 500;
    font-size: 1.6em;
    line-height: 1.4;
    margin-bottom: 15px;
}

/* Enlaces con iconos */
.read-more-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.read-more-link:hover {
    color: var(--color-primary-dark);
}

.read-more-link .icon {
    width: 14px;
    height: 14px;
    margin-left: 8px;
    fill: currentColor;
}

/* Footer */
.main-footer {
    background-color: var(--color-white);
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
}

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

.main-footer a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Iconos SVG (general) */
.icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .content-two-columns {
        flex-direction: column;
        gap: 20px;
    }
    
    .text-column,
    .image-column {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
    
    .main-menu {
        gap: 5px;
    }
    
    .main-menu li a {
        padding: 10px 15px;
        font-size: 12px;
    }
    
    .program-cards-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .program-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .top-bar .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .contact-info ul,
    .top-bar-right {
        justify-content: center;
    }
    
    .top-bar-right {
        gap: 10px;
    }
    
    .main-menu {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .hero-title {
        font-size: 2em;
    }
    
    .event-info-section p {
        font-size: 1.4em;
    }
    
    .section {
        padding: 40px 0;
    }
    
    .section .container {
        padding: 0 15px;
    }
    
    .button-group .btn {
        display: block;
        text-align: center;
        margin: 20px 0;
    }
    
    /* Menú móvil */
    .offscreen-menu .main-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    
    .offscreen-menu .main-menu li {
        width: 100%;
    }
    
    .offscreen-menu .main-menu li a {
        width: 100%;
        padding: 15px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5em;
    }
    
    .event-info-section p {
        font-size: 1.2em;
    }
    
    .section .container {
        padding: 0 10px;
    }
}

/* Utilidades */
.hide {
    display: none !important;
}

.show {
    display: block !important;
}

/* Transiciones globales */
* {
    transition: all 0.3s ease;
}

/* Prevenir overflow horizontal */
html, body {
    overflow-x: hidden;
}

/* Mejorar la accesibilidad */
:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Optimización de iconos SVG */
.icon {
    display: inline-block;
    vertical-align: middle;
}

/* Definiciones de iconos SVG (ejemplos, necesitarás las rutas SVG reales) */
.phone-icon {
    /* Aquí iría el SVG del icono de teléfono */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="phone-square" viewBox="0 0 1536 1896.0833"><path d="M1280 1193q0-11-2-16t-18-16.5-40.5-25-47.5-26.5-45.5-25-28.5-15q-5-3-19-13t-25-15-21-5q-15 0-36.5 20.5t-39.5 45-38.5 45T885 1167q-7 0-16.5-3.5T853 1157t-17-9.5-14-8.5q-99-55-170-126.5T525 842q-2-3-8.5-14t-9.5-17-6.5-15.5T497 779q0-13 20.5-33.5t45-38.5 45-39.5T628 631q0-10-5-21t-15-25-13-19q-3-6-15-28.5T555 492t-26.5-47.5-25-40.5-16.5-18-16-2q-48 0-101 22-46 21-80 94.5T256 631q0 16 2.5 34t5 30.5 9 33 10 29.5 12.5 33 11 30q60 164 216.5 320.5T843 1358q6 2 30 11t33 12.5 29.5 10 33 9 30.5 5 34 2.5q57 0 130.5-34t94.5-80q22-53 22-101zm256-777v960q0 119-84.5 203.5T1248 1664H288q-119 0-203.5-84.5T0 1376V416q0-119 84.5-203.5T288 128h960q119 0 203.5 84.5T1536 416z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.envelope-icon {
    /* Aquí iría el SVG del icono de sobre */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="envelope" viewBox="0 0 1792 1896.0833"><path d="M1792 710v794q0 66-47 113t-113 47H160q-66 0-113-47T0 1504V710q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38T639 1015q-91-64-262-182.5T172 690q-62-42-117-115.5T0 438q0-78 41.5-130T160 256h1472q65 0 112.5 47t47.5 113z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.facebook-icon {
    /* Aquí iría el SVG del icono de Facebook */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="facebook-square" viewBox="0 0 1536 1896.0833"><path d="M1248 128q119 0 203.5 84.5T1536 416v960q0 119-84.5 203.5T1248 1664h-188v-595h199l30-232h-229V689q0-56 23.5-84t91.5-28l122-1V369q-63-9-178-9-136 0-217.5 80T820 666v171H620v232h200v595H288q-119 0-203.5-84.5T0 1376V416q0-119 84.5-203.5T288 128h960z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.twitter-icon {
    /* Aquí iría el SVG del icono de Twitter */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="twitter-square" viewBox="0 0 1536 1896.0833"><path d="M1280 610q-56 25-121 34 68-40 93-117-65 38-134 51-61-66-153-66-87 0-148.5 61.5T755 722q0 29 5 48-129-7-242-65T326 550q-29 50-29 106 0 114 91 175-47-1-100-26v2q0 75 50 133.5t123 72.5q-29 8-51 8-13 0-39-4 21 63 74.5 104t121.5 42q-116 90-261 90-26 0-50-3 148 94 322 94 112 0 210-35.5t168-95 120.5-137 75-162T1176 746q0-18-1-27 63-45 105-109zm256-194v960q0 119-84.5 203.5T1248 1664H288q-119 0-203.5-84.5T0 1376V416q0-119 84.5-203.5T288 128h960q119 0 203.5 84.5T1536 416z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.youtube-icon {
    /* Aquí iría el SVG del icono de YouTube */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="youtube-square" viewBox="0 0 1536 1896.0833"><path d="M919 1303v-157q0-50-29-50-17 0-33 16v224q16 16 33 16 29 0 29-49zm184-122h66v-34q0-51-33-51t-33 51v34zM532 915v70h-80v423h-74V985h-78v-70h232zm201 126v367h-67v-40q-39 45-76 45-33 0-42-28-6-17-6-54v-290h66v270q0 24 1 26 1 15 15 15 20 0 42-31v-280h67zm252 111v146q0 52-7 73-12 42-53 42-35 0-68-41v36h-67V915h67v161q32-40 68-40 41 0 53 42 7 21 7 74zm251 129v9q0 29-2 43-3 22-15 40-27 40-80 40-52 0-81-38-21-27-21-86v-129q0-59 20-86 29-38 80-38t78 38q21 29 21 86v76h-133v65q0 51 34 51 24 0 30-26 0-1 .5-7t.5-16.5V1281h68zM785 457v156q0 51-32 51t-32-51V457q0-52 32-52t32 52zm533 713q0-177-19-260-10-44-43-73.5t-76-34.5q-136-15-412-15-275 0-411 15-44 5-76.5 34.5T238 910q-20 87-20 260 0 176 20 260 10 43 42.5 73t75.5 35q137 15 412 15t412-15q43-5 75.5-35t42.5-73q20-84 20-260zM563 519l90-296h-75l-51 195-53-195h-78q7 23 23 69l24 69q35 103 46 158v201h74V519zm289 81V470q0-58-21-87-29-38-78-38-51 0-78 38-21 29-21 87v130q0 58 21 87 27 38 78 38 49 0 78-38 21-27 21-87zm181 120h67V350h-67v283q-22 31-42 31-15 0-16-16-1-2-1-26V350h-67v293q0 37 6 55 11 27 43 27 36 0 77-45v40zm503-304v960q0 119-84.5 203.5T1248 1664H288q-119 0-203.5-84.5T0 1376V416q0-119 84.5-203.5T288 128h960q119 0 203.5 84.5T1536 416z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.vimeo-icon {
    /* Aquí iría el SVG del icono de Vimeo */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="vimeo-square" viewBox="0 0 1536 1896.0833"><path d="M1292 638q10-216-161-222-231-8-312 261 44-19 82-19 85 0 74 96-4 57-74 167t-105 110q-43 0-82-169-13-54-45-255-30-189-160-177-59 7-164 100l-81 72-81 72 52 67q76-52 87-52 57 0 107 179 15 55 45 164.5t45 164.5q68 179 164 179 157 0 383-294 220-283 226-444zm244-222v960q0 119-84.5 203.5T1248 1664H288q-119 0-203.5-84.5T0 1376V416q0-119 84.5-203.5T288 128h960q119 0 203.5 84.5T1536 416z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}
    /* Aquí iría el SVG del icono de life-bouy */
.menu-icon {
    /* Aquí iría el SVG del icono de menú */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="navicon" viewBox="0 0 1536 1896.0833"><path d="M1536 1344v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 960V832q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 448V320q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.arrow-right-icon {
    /* Aquí iría el SVG del icono de flecha derecha */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="angle-double-right" viewBox="0 0 512 545.5"><path d="M145.5 108.5l168 168L325 288l-11.5 11.5-168 168-22.5-23L279.5 288 123 131.5zm112 0l168 168L437 288l-11.5 11.5-168 168-22.5-23L391.5 288 235 131.5z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}




/* Estilos específicos para páginas de contenido */
.content-section {
    padding: 60px 0;
    background-color: var(--color-white);
}

.content-section.gray-background {
    background-color: #f6f6f6;
}

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

.section-title {
    font-family: Mulish, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    line-height: 1.2;
    color: var(--color-text-dark);
    text-align: left;
    margin-bottom: 20px;
}

.divider {
    width: 25%;
    height: 4px;
    background-color: var(--color-primary);
    margin: 10px 0 30px 0;
}

.lead-text {
    font-family: Mulish, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 1.3em;
    line-height: 1.6;
    color: var(--color-text-dark);
    margin-bottom: 30px;
}

.content-section ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}

.content-section ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1.6;
}

.content-section ul li::before {
    content: "•";
    color: var(--color-primary);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.content-section p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

.button-group {
    text-align: center;
    margin-top: 40px;
}

.button {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-family: Mulish, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 20px 40px;
    border-radius: 0;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: var(--color-secondary-dark);
}

/* Responsive design para páginas de contenido */
@media (max-width: 768px) {
    .content-section {
        padding: 40px 0;
    }
    
    .content-section .container {
        padding: 0 15px;
    }
    
    .section-title {
        font-size: 2em;
    }
    
    .lead-text {
        font-size: 1.2em;
    }
    
    .content-section p,
    .content-section ul li {
        font-size: 1em;
    }
    
    .button {
        padding: 15px 30px;
        font-size: 13px;
    }
}