/*
Theme Name: Appa
Theme URI: https://Appa.cl
Author: Tu Nombre
Author URI: https://Appa.cl/
Description: Tema construido por PedaGO Chile.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbarra
*/

body {
    color:#000;
    background:#E2E8F4;
    font-weight:400;
    font-size:14px;
	font-family: "Google Sans", sans-serif;
}

.content-menu .menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.content-menu .menu > li {
    position: relative;
    padding: 20px 0;
    cursor: pointer;
}

.content-menu .menu .sub-menu {
    position: absolute;
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%) translateY(15px); 
    background-color: #e2e8f4;
    list-style: none;
    margin: 0;
    min-width: 150px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: 100;
	padding:15px;
}

.content-menu .menu li:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.content-menu .menu .sub-menu li a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: #000;
    transition: color 0.2s ease;
}

.content-menu .menu .sub-menu li a:hover {
    color: #0056b3;
}

.sector-iz{
    width:33%;
}

.elementor-divider-separator{
    border-radius:150px;
}

.btn-contacto{
    background:transparent;
    border-radius:150px;
    border:solid 1px #00365C;
    padding:10px 15px;
    cursor:pointer;
    transition:.3s;
	display:none;
}

.btn-igfojas{
    background:#00365C;
    border:solid 1px #00365C;
    border-radius:150px;
    color:#fff !important;
    padding:10px 15px;
    cursor:pointer;
    transition:.3s;
}

.header-menu{
    transition: all 0.3s ease;
    position: fixed;
    width:100%;
    z-index: 1;
	background:#E2E8F4;
	box-shadow: 0px 5px 20px 0px rgba(0 0 0 / 50%);
}

.scroll .menu li{
    padding:10px 0px;
    transition:.3s;
}

.scroll .btn-contacto{
    padding:5px 15px;
    transition:.3s;
}

.scroll .btn-igfojas{
    padding:5px 15px;
    transition:.3s;
}

.scroll{
    background: #e2e8f4;
    box-shadow: 1px 5px 20px 0px rgba(0 0 0 / 20%);
    backdrop-filter: blur(15px);
    position: fixed;
    width: 100%;
    z-index: 2;
    transition: all 0.3s ease;
}

.scroll .logo img{
    width:80px;
    transition:.3s;
}

.scroll .menu a {
    font-size:14px;
    transition:.3s;
}

.logo{
    width:33%;
    text-align:center;
}

.logo img{
    width:130px;
    transition:.3s;
}

.content-menu{
    width:33%;
}

.menu {
    display:flex;
}

.menu a {
    display:flex;
    align-items:center;
    transition:.3s;
    letter-spacing:1px;
}

.menu a .ti {
    margin-right:5px;
    font-size:18px;
}

.menu li{
    transition:.2s;
    cursor:pointer;
    border-bottom:solid 2px transparent;
	text-align:left;
}

.menu li:hover{
    background:transparent;
    transition:.2s;
    border-bottom:solid 2px #005896;
}

.inner-menu{
    display:flex;
    width:80%;
    margin:0 auto;
    align-items: center;
    justify-content: space-between;
}

.content-menu ul{
    text-decoration:none;
    list-style-type: none;
    padding:0;
    margin:0;
}

a{
    color: inherit;
    text-decoration: none;
}

.custom-container{
    width:100%;
    margin:0 auto;
}

.hamburger-btn, 
.close-btn,
.menu-overlay {
    display: none;
}

.menu-item-38{
    background:#005896;
    border-radius:10px;
    color:#fff;
}

.menu-item-38:hover{
    background:#005896;
    border-radius:0px;
    color:#333;
}

.bg-footer{
    background:#005896;
    padding:20px 0;
    color:#fff;
}

.bg-footer a:hover{
	color:#00375D !important;
	transition:.3s;
}

.footer-inner{
    width:80%;
    display:flex;
    justify-content:space-between;
    margin:0 auto;
    flex-wrap: wrap;
}

.sub-footer{
    padding:10px;
    width:100%;
    background:#00375D;
    color:#fff;
    font-size:12px;
    text-align:center;
}

.sub-footer img {
    width:60px;
}

.bg-footer .spaciador{
    width:10%;
    height:2px;
    background:#fff;
    margin:6px 0;
    border-radius:150px;
}

.bg-footer ul{
    padding-left:0;
}

.bg-footer ul li {
  list-style-type: none;
  transition:.3s;
}

.bg-footer ul li:hover{
    color:#005896;
    transition:.3s;
}

.linea-footer{
    border-top:solid 2px #005896;
    padding-top:30px;
}

.icon-rrss{
    background:#005896;
    width:32px;
    height:32px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:150px;
    transition:.3s;
}

.icon-rrss{
    font-size:18px;
}

.chc-btn--accept, .chc-btn--reject{
min-width: 140px;
  color: #fff;
  background: #2D76D4 !important;
  border-color: #2D76D4 !important;
}

.chc-btn--config, .chc-btn--save{
    background: transparent !important;
    border-color: #333 !important;
    color: #333 !important;
}

.chc-cat{
    background: #E3E8F0 !important;
    border: 1px solid #ccc !important;
}

.chc-cat-txt strong{
    color:#333 !important
}

.chc-cat-desc{
    color:#666 !important;
}

.chc-banner{
    border:solid 1px #ccc !important
}

.chc-title{
    color:#333 !important;
}

.chc-body{
    color:#666 !important;
}

.chc-banner{
    background:#EEF1F8 !important;
}

/* --- ESTILOS GENERALES PARA LA FLECHA (CHEVRON CSS) --- */

/* 1. Contenedor flex para empujar la flecha a la derecha */
.content-menu .menu > li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px; 
    width: 100%; 
}

/* 2. Dibujando el Chevron con bordes CSS */
.content-menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 7px;  /* Ancho del icono */
    height: 7px; /* Alto del icono */
    
    /* Creamos solo los bordes inferior y derecho */
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    
    /* Ajuste fino para centrarlo verticalmente respecto al texto */
    position: relative;
    top: -2px; 
    
    /* Lo rotamos 45 grados para que apunte hacia abajo */
    transform: rotate(45deg); 
    
    /* Configuración de la animación fluida */
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
}


/* --- COMPORTAMIENTO EN ESCRITORIO (Hover) --- */

/* Al pasar el mouse, rotamos 180 grados (45 + 180 = 225) para que apunte arriba */
.content-menu .menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(225deg); 
}


/* --- COMPORTAMIENTO EN MÓVIL (Acordeón abierto) --- */

@media (max-width: 768px) {
    .content-menu .menu > li.menu-item-has-children > a {
        padding-right: 15px; 
    }

    /* Cuando el JS inyecta la clase .is-open */
    .content-menu .menu .menu-item-has-children.is-open > a::after {
        transform: rotate(225deg); 
    }

    /* Anulamos el hover accidental en móvil */
    .content-menu .menu li:hover > a::after {
        transform: rotate(45deg); 
    }
}


@media screen and (max-width: 1140px) {
    
    .content-menu .menu {
        flex-direction: column;
        gap: 0;
    }

    .content-menu .menu > li {
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    .content-menu .menu .sub-menu {
        position: static; 
        transform: none;
        visibility: visible;
        opacity: 1;
        text-align:left;
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0 0 0 15px;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    }

    .content-menu .menu li:hover > .sub-menu {
        transform: none;
    }

    .content-menu .menu .menu-item-has-children.is-open > .sub-menu {
        padding-top: 15px;
        padding-bottom: 0px;
    }
    
    .logo{
        margin:0 auto;
    }
    
    .header-menu{
        padding:10px 0;
    }
    
    .logo img{
        width:90px;
    }
    
    .sector-iz{
        display:none;
    }

    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 100;
    }
    
    .hamburger-btn span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #005896;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
        transform-origin: center;
    }

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

    .hamburger-btn.open span:nth-child(2) {
        opacity: 0;
        transform: translateX(10px);
    }

    .hamburger-btn.open span:nth-child(3) {
        transform: translateY(-10.5px) rotate(-45deg);
    }
    
    .content-menu {
        position: absolute;
        top: 45px;
        right: 0;
        width: 35%; 
        height: 100vh; 
        background-color: #e2e8f4; 
        z-index: 1000;
        padding: 10px 20px; 
        transform: translateX(100%); 
        transition: transform 0.3s ease-in-out;
    }

    .scroll .content-menu {
        top: 38px;
    }

    .content-menu.active {
        transform: translateX(0); 
    }


    .close-btn {
        display: block;
        position: absolute;
        top: -1%;
    	right: 13%;
        background: none;
        border: none;
        font-size: 50px;
        cursor: pointer;
        color: #333;
    }
	
	.menu{
		display: flex;
    	flex-direction: column;
	}
	
	.inner-menu{
		width:90%;
	}
}

@media screen and (max-width: 960px) {

    .content-menu {
        width: 40%; 
    }

}

@media screen and (max-width: 720px) {
    .content-menu {
        width: 70%; 
    }
}