@import url('fonts.css');
/* ===================== CSS VARIABLES ===================== */
:root {
/* Colors - Primary Palette */
--color-primary: #00A0AD;
--color-primary-light: #0295A1;
--color-primary-lighter: #CCEAEC;
--color-primary-bg: #E5F5F7;
--color-secondary: #FCB64A;
--color-secondary-light: #FFCA79;
--color-accent: #DB813C;
--color-dark: #1F5E79;
--color-dark-alt: #007C86;
/* Colors - Neutrals */
--color-bg: #ffffff;
--color-text: #333333;
--color-text-light: #7e7e7e;
--color-hover-bg: #7e7e7e;
--color-hover-bg-sub: #746f5e;
--color-border: #eee;
--color-tag-bg: #f0f0f0;
--color-quote-bg: #f9f9f9;
/* Colors - Overlays & Effects */
--color-overlay: rgba(0, 0, 0, 0.8);
--color-overlay-light: rgba(0, 0, 0, 0.3);
--color-focus-shadow: #00A0AD80;
/* Additional Colors */
--color-black: #000;
--color-white: #fff;
--color-red: red;
--color-course-bg: #FFF8ED;
--color-placeholder: #7A8A99;
--color-hover-select: #F4FBFC;
--color-spinner-bg: #f3f3f3;
--color-success: #15803D;
--color-success-bg: #D4F5DD;
--color-error: #B91C1C;
--color-error-bg: #FFE1E1;
--color-info: #03687B;
--color-btn-alt: #045D6D;
/* Typography - Font Families */
--font-main: 'Poppins', sans-serif;
--font-secondary: 'Manrope', sans-serif;
/* Common Transitions */
--transition-default: all 0.3s ease;
--transition-transform: transform 0.3s ease;
--transition-menu: transform 0.4s ease-in-out;
/* Common Border Radius */
--radius-small: 0.5em;
--radius-medium: 1.2rem;
--radius-large: 1.6rem;
--radius-full: 999px;
--radius-button: 3rem;
--radius-curso: 12rem;
}
/* Spinner Animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===================== RESET & BASE ===================== */
html { font-size: 62.5%; scroll-behavior: smooth;
font-family: var(--font-main), serif; }
*, *::before, *::after { box-sizing: border-box; }
body { font-size: 1.6rem; font-weight: 400; line-height: 1.6; color: var(--color-dark); background-color: var(--color-bg); margin: 0; padding: 0; }
/* ===================== LAYOUT ===================== */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 2.5rem; padding-right: 2.5rem; }
/* ===================== TYPOGRAPHY ===================== */
h1, h2, h3, h4, h5, h6 {font-family: var(--font-main), serif; color: var(--color-dark); margin: 0; }
h1 { font-size: 7.2rem; font-weight: 600; }
h2 { font-size: 4rem; font-weight: 400; }
h3 { font-size: 2.4rem; font-weight: 400; line-height: 1.2; letter-spacing: 0; }
p { margin-bottom: 1.5rem; }
/* ===================== LINKS ===================== */
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: none; }
/* ===================== BUTTONS ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;gap:10px;opacity:1;font-family:var(--font-main);font-size:16px;line-height:1;letter-spacing:0;font-weight:500;text-decoration:none;transition:var(--transition-default);}
.btn-primary{min-width:197px;height:53px;padding:16px 24px;background:var(--color-dark-alt);color:var(--color-bg);border:none;font-size:14px;font-weight:600;line-height:1;}
.btn-primary:hover{background:var(--color-primary-light);}
.btn-primary:active{background:var(--color-primary-light);}
.btn-secondary{width:283px;height:56px;padding:16px;background:var(--color-bg);color:var(--color-dark);border:1px solid var(--color-dark);}
.btn-secondary:hover{background:var(--color-primary-lighter);}
.btn-secondary:active{background:var(--color-bg);box-shadow:0 0 0 3px var(--color-focus-shadow);}
.btn-tertiary{width:217px;height:56px;padding:16px 24px;background:var(--color-secondary);color:var(--color-dark);border:none;}
.btn-tertiary:hover{background:var(--color-secondary-light);}
.btn-tertiary:active{background:var(--color-secondary);border:3px solid var(--color-accent);}
/* ===================== UTILITIES ===================== */
.text-center { text-align: center; }
.text-white { color: var(--color-bg); }
.bg-primary { background-color: var(--color-primary); color: var(--color-bg); }
.bg-dark { background-color: var(--color-dark); color: var(--color-bg); }
/* ===================== HEADER ===================== */
.site-header { background: var(--color-bg);padding: 3rem 0; position: relative; z-index: 100; }
.header-desktop { display: flex; justify-content: space-between; align-items: center; }
.header-mobile { display: none; justify-content: space-between; align-items: center; }
.logo img { height: 48px; }
.menu-list { display: flex; list-style: none; gap: 3rem; margin: 0; padding: 0; }
.menu-list > li { position: relative; }
.menu-list li a { font-size: 1.4rem; font-weight: 400; color: var(--color-dark); transition: color 0.3s ease;text-transform: capitalize; display: flex; align-items: center; gap: 0.5rem; }
.menu-list li a:hover, .menu-list li.current-menu-item > a { color: var(--color-primary); text-decoration: none; }
/* Dropdown Styles */
.menu-list .sub-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--color-bg);
min-width: 220px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border-radius: var(--radius-small);
list-style: none;
padding: 0.8rem 0;
margin: 0.5rem 0 0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 999;
}
/* Level 2 submenu - appears below with indentation */
.menu-list .sub-menu .sub-menu {
position: relative;
left: 0;
top: 0;
margin: 0;
box-shadow: none;
border-left: 3px solid var(--color-primary-lighter);
border-radius: 0;
padding-left: 2rem;
opacity: 1;
visibility: visible;
transform: none;
display: none;
width: 100%;
min-width: auto;
}
/* Level 3 submenu - appears below with more indentation */
.menu-list .sub-menu .sub-menu .sub-menu {
padding-left: 3rem;
border-left: 3px solid var(--color-primary);
}
/* Show level 2 and 3 when parent is hovered */
.menu-list .sub-menu li:hover > .sub-menu {
display: block;
}
/* Show dropdown on hover */
.menu-list li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Dropdown menu items */
.menu-list .sub-menu li {
padding: 0;
margin: 0;
}
.menu-list .sub-menu li a {
padding: 0.8rem 1.6rem;
display: block;
color: var(--color-dark);
font-size: 1.3rem;
transition: all 0.3s ease;
}
.menu-list .sub-menu li a:hover {
color: var(--color-primary);
}
/* Dropdown icon */
.dropdown-icon {
transition: transform 0.3s ease;
margin-left: 0.2rem;
}
/* Rotate icon on hover */
.menu-list li:hover > a > .dropdown-icon {
transform: rotate(180deg);
}
/* All nested dropdowns icons point down since they appear below */
.menu-list .sub-menu .dropdown-icon,
.menu-list .sub-menu .sub-menu .dropdown-icon {
transform: rotate(0deg);
}
.menu-list .sub-menu li:hover > a > .dropdown-icon,
.menu-list .sub-menu .sub-menu li:hover > a > .dropdown-icon {
transform: rotate(180deg);
}
/* Active/current menu item in dropdown */
.menu-list .sub-menu li.current-menu-item > a {
color: var(--color-primary);
background: var(--color-primary-bg);
}
.menu-hamburger { font-size: 4.8rem; color: var(--color-primary); background: none; border: none; cursor: pointer; }
.mobile-menu { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; background: var(--color-bg); transform: translateX(100%); transition: var(--transition-menu); display: flex; flex-direction: column; padding: 2rem; z-index: 999; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.menu-close { font-size: 5rem; background-color:#ffffff;color:var(--color-primary-light); border: none; cursor: pointer; }
.menu-list-mobile { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.menu-list-mobile > li { position: relative; }
.menu-list-mobile li a { font-size: 1.8rem; font-weight: 700; color: var(--color-dark); padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); }
.menu-list-mobile li a:hover, .menu-list-mobile li.current-menu-item a { color: var(--color-primary); text-decoration: none; }
/* Mobile submenu styles */
.menu-list-mobile .sub-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
margin-top: 0.5rem;
}
.menu-list-mobile .sub-menu.open {
display: block;
}
.menu-list-mobile .sub-menu li a {
font-size: 1.6rem;
font-weight: 500;
padding: 0.8rem 0;
padding-left: 2rem;
border-bottom: 1px solid var(--color-border);
}
/* Level 2 mobile submenu */
.menu-list-mobile .sub-menu .sub-menu {
margin-left: 0;
}
.menu-list-mobile .sub-menu .sub-menu li a {
padding-left: 4rem;
}
/* Level 3 mobile submenu */
.menu-list-mobile .sub-menu .sub-menu .sub-menu li a {
padding-left: 6rem;
}
/* Mobile dropdown icon */
.menu-list-mobile .dropdown-icon {
transition: transform 0.3s ease;
margin-left: auto;
}
.menu-list-mobile .has-dropdown.menu-open > a > .dropdown-icon {
transform: rotate(180deg);
}
/* Mobile menu item states */
.menu-list-mobile .has-dropdown > a {
cursor: pointer;
}
.menu-list-mobile .menu-item.menu-open > .sub-menu {
display: block;
}
@media (max-width: 1130px) {
.header-desktop { display: none; }
.header-mobile { display: flex; }
}
/* ===================== HERO ===================== */
.hero { display: flex; justify-content: center; align-items: center; padding: 6rem 0; }
.hero-container h1{margin: 0;font-size: 7.2rem;font-weight: 500;line-height: 7.2rem;max-width: 900px;}
.hero-container { display: flex; flex-direction: column; align-items: center; text-align: center;}
.hero-subtitle { font-size: 2.4rem; color: var(--color-dark);font-weight: 400;max-width: 698px}
.hero-video-background { width: 100%; max-width: 1040px; height: 552px; background-size: cover; background-position: center; border-radius: var(--radius-medium); display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; overflow: hidden; }
.hero-video-background::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-primary); opacity: 0.3; z-index: 1; border-radius: var(--radius-medium); }
.video-play-icon { width: 72px; height: 72px; z-index: 2; position: relative; }
.hero-container .btn {margin-top: 2rem;}
@media only screen and (max-width: 700px){
.hero{padding: 3rem 0;}
.hero-container{gap: 1rem;}
.hero-container h1{font-size: 5rem;line-height: 6rem;}
.hero-subtitle { font-size: 2rem;line-height: 2.5rem}
}
/* ===================== FOOTER ===================== */
.site-footer { background: var(--color-dark); color: rgba(255,255,255,0.85); margin-top: 0; }
.site-footer__main {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 4rem;
padding: 5.6rem 0 4rem;
align-items: start;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 1.6rem; }
.site-footer__logo img { height: 52px; width: auto; display: block; filter: brightness(0) invert(1); }
.site-footer__tagline {
font-size: 1.4rem;
line-height: 1.5;
color: rgba(255,255,255,0.65);
margin: 0;
max-width: 28rem;
}
.site-footer__col-title {
font-family: var(--font-secondary), sans-serif;
font-size: 1.2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.55);
margin: 0 0 1.6rem;
}
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.site-footer__nav a {
color: rgba(255,255,255,0.85);
font-size: 1.5rem;
text-decoration: none;
transition: color .2s ease;
}
.site-footer__nav a:hover { color: var(--color-primary-lighter); }
.site-footer__social { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-footer__social a {
width: 4rem;
height: 4rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.08);
border-radius: 50%;
transition: background .2s ease, transform .2s ease;
}
.site-footer__social a:hover { background: var(--color-primary); transform: translateY(-2px); }
.site-footer__social a img { width: 18px; height: 18px; display: block; filter: brightness(0) invert(1); }
.site-footer__bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 1.8rem 0;
background: rgba(0,0,0,0.18);
}
.site-footer__bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.site-footer__copy,
.site-footer__credits {
font-size: 1.3rem;
color: rgba(255,255,255,0.55);
margin: 0;
}
.site-footer__credits a { color: #fff; font-weight: 500; }
.site-footer__credits a:hover { color: var(--color-primary-lighter); text-decoration: underline; }
@media (max-width: 900px) {
.site-footer__main { grid-template-columns: 1fr 1fr; gap: 3rem; padding: 4rem 0 3rem; }
}
@media (max-width: 600px) {
.site-footer__main { grid-template-columns: 1fr; gap: 2.4rem; }
.site-footer__bottom-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}
/* ===================== HERO PAGE ===================== */
.hero-page { display: flex; justify-content: center; align-items: center; padding: 6rem 0; }
.hero-page .container { text-align: center; }
.hero-page .content-page { max-width: 1040px; margin: 0 auto; }
.hero-page h1 { font-family: var(--font-main); font-size: 7.2rem; font-weight: 500; font-style: normal; line-height: 100%; letter-spacing: 0%; text-align: center; color: var(--color-dark); margin: 0 auto; }
.hero-page .hero-subtitle {
font-family: var(--font-main), serif; font-size: 2.4rem; font-weight: 400; font-style: normal; line-height: 100%; letter-spacing: 0%; text-align: center; color: var(--color-dark); margin: 3rem auto 0 auto; }
@media only screen and (max-width: 700px) {
.hero-page { padding: 2rem 0; }
.hero-page h1 { font-size: 4.8rem; line-height: 100%; }
}
/* ===================== TOOLS CARD ===================== */
.tools-wrapper { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.tool-card { width: 100%;max-width: 330px; min-height: 550px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;border:1px solid var(--color-primary-lighter); border-radius: 16px;}
@media only screen and (max-width: 1081px) {
.tool-card {max-width: 500px;}
}
@media only screen and (max-width: 780px) {
.tool-card {max-width: 330px;min-height: auto;}
}
.tool-card__icon-wrapper { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; background-color: var(--color-primary-lighter); overflow: hidden; padding: 2rem; }
.tool-card__icon { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.tool-card.style_1 .tool-card__icon-wrapper { background-color: #7AB8C0; }
.tool-card.style_2 .tool-card__icon-wrapper { background-color: var(--color-dark); }
.tool-card.style_3 .tool-card__icon-wrapper { background-color: var(--color-secondary-light); }
.tool-card__content { padding: 1rem 2rem; display: flex; flex-direction: column; justify-content: space-between; flex: 1;}
.tool-card__top { display: flex; flex-direction: column; gap: 0.8rem; }
.tool-card__category { font-size: 1.2rem; text-transform: uppercase; font-weight: 600; color: var(--color-dark); margin-top: 1rem; }
.tool-card__title { font-size: 2.4rem; font-weight: 600; margin: 0.5rem 0; line-height: 1.2;letter-spacing: 0;}
.tool-card__excerpt { font-size: 1.6rem;font-weight: 400;line-height: normal;letter-spacing: 0; flex-grow: 1; margin: 0; }
.tool-card__bottom { display: flex; flex-direction: column; }
.tool-card__footer { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.tool-card__footer a { text-align: center; }
.tool-card__btn { font-weight: 500; padding: 1.2rem; border-radius: 25px; font-size: 1.4rem; text-decoration: none; transition: var(--transition-default); display: inline-block; }
.tool-card__btn--outline { border: 1px solid var(--color-dark); background: transparent; color: var(--color-dark); }
.tool-card__btn--outline:hover { background-color: var(--color-dark-alt);color: var(--color-bg); }
.tool-card__btn--filled { border: 1px solid var(--color-dark-alt);background-color: var(--color-dark-alt);color: var(--color-bg); }
.tool-card__btn--filled:hover { border: 1px solid var(--color-dark); background: transparent; color: var(--color-dark); }
@media only screen and (max-width: 700px){
}
.tools-highlight { padding: 2.5rem; }
.tools-highlight__title { font-size: 5.2rem; font-weight: 400; color: var(--color-dark);text-align: center; max-width: 720px;margin: 0 auto;}
.tools-highlight__desc { font-size: 2.4rem; font-weight: 400;color: var(--color-dark); max-width:720px;margin: 3rem auto 3rem auto;text-align: center; }
.tools-highlight__button { margin-top: 3rem; }
.tools-highlight__button .btn-outline {padding: 1.2rem 2.4rem;font-size: 1.4rem;border-radius: var(--radius-button);}
@media only screen and (max-width: 700px){
.tools-highlight__title{line-height: 5rem;}
}
/* ===================== CITIZEN PORTAL ===================== */
.portal-ciudadano { width: 100%; background-color: var(--color-primary-light); padding: 10rem 0; color: var(--color-bg); }
.portal-ciudadano__container { display: flex; justify-content: center; align-items: center; gap: 4rem; flex-wrap: wrap; }
.portal-ciudadano__image img { max-width: 500px; height: auto;width: 100% }
.portal-ciudadano__content { text-align: left; max-width: 480px; }
.portal-ciudadano__title{font-family:var(--font-secondary);font-weight:700;font-size:4rem;line-height:1.2;letter-spacing:0;margin-bottom:1rem;color: var(--color-bg);}
.portal-ciudadano__desc { font-family:var(--font-main);font-weight:400;font-size:1.6rem;line-height:2rem;letter-spacing:0;color: var(--color-bg);}
@media only screen and (max-width: 700px){
.portal-ciudadano{ padding: 5rem 0;}
.portal-ciudadano__container{gap: 0;}
.portal-ciudadano__title{font-size:4rem;line-height:4rem;}
.portal-ciudadano__content{padding: 0 3rem;}
}
/* ===================== ABOUT INSTITUTIONS ===================== */
.sobre-instituciones { background-color: var(--color-primary-bg);margin-top: 10rem;padding-bottom: 8rem;position: relative;padding-top: 203px;}
.sobre-instituciones__titulo{width: 100%;background-image: url('../files/section-bg-1.svg');background-position: center center;background-repeat: no-repeat;background-size: cover;height:203px;position: absolute;width: 100%;top: -3px;left: 0;}
.sobre-instituciones__titulo h2 { text-align: center; font-size: 2rem; font-weight: 800; color: var(--color-dark); margin-bottom: 4rem;letter-spacing: 10%;text-transform: uppercase; }
.institucion-box { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 5rem; flex-wrap: wrap; }
.institucion-box__image img { border-radius: var(--radius-medium); max-width: 360px; height: auto;}
.institucion-box__content,
.institucion-box__image { width: 50%; }
.institucion-box:nth-child(1) .institucion-box__image{text-align: end;}
@media only screen and (max-width: 700px){
.sobre-instituciones{margin-top: 100px;padding-top: 0;}
.sobre-instituciones__titulo{height: 50px;position: relative;}
.sobre-instituciones__titulo h2{position: absolute;top: -80px;padding: 0 3rem;}
.institucion-box{flex-direction: column;gap: 30px}
.institucion-box__content, .institucion-box__image { width: 100%; }
.institucion-box__image img{max-width: 100%;width: 100%;}
.institucion-box:nth-child(1) .institucion-box__image{text-align: center;}
.institucion-box:nth-child(2){flex-direction: column-reverse;}
}
.institucion-box__title { font-family:var(--font-main);font-weight:600;font-size:32px;line-height:1.2;letter-spacing:0;color: var(--color-dark); }
.institucion-box__desc { font-family:var(--font-main);font-weight:400;font-size:16px;line-height:2rem;letter-spacing:0;
color: var(--color-dark); }
.institucion-box__link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-main);font-weight:700;font-size:16px;line-height:1;letter-spacing:0.1em;text-align:right;text-transform:uppercase;color:var(--color-dark);text-decoration:none;transition:color 0.3s ease;}
.institucion-box__link .arrow{display:inline-block;transition:var(--transition-transform);}
.institucion-box__link:hover .arrow{transform:translateX(10px);}
/* ===================== COURSE BLOCK ===================== */
.curso-wrapper{padding: 10rem 0;background-color: var(--color-course-bg);}
.curso-banner {background-color: var(--color-secondary);display: flex;align-items: center;justify-content: space-between;flex-wrap: nowrap;gap: 0;border-radius: var(--radius-curso);padding: 4rem;margin: 0 auto;width:100%;max-width: 1040px;}
.curso-banner__icon img { max-width: 80px; height: auto; }
.curso-banner__text { font-size: 3.6rem; font-weight: 600; color: var(--color-dark); line-height: 1.3; }
.curso-banner__text p{margin: 0;line-height: 3.5rem;font-weight: 400}
.curso-banner__text strong { font-weight: 700; font-size: 2.8rem; display: inline-block; margin-top: 0.4rem; }
.curso-banner__button .btn { background-color: var(--color-dark); color: var(--color-bg); font-weight: 600; font-size: 1.6rem; padding: 1.2rem 2.8rem; border-radius: 999px; text-decoration: none; }
@media only screen and (max-width: 780px){
.curso-wrapper{padding: 2rem 2rem;}
.curso-banner{flex-direction: column;border-radius: var(--radius-small);gap: 2rem;}
.curso-banner__text{text-align: center;}
}
/* ===================== LIGHTBOX ===================== */
.lightbox {display: none;position: fixed;top: 0; left: 0;width: 100%; height: 100%;background: var(--color-overlay);justify-content: center;align-items: center;z-index: 9999;}
.lightbox-content {position: relative;width: 80%;max-width: 1200px;background-color: var(--color-black);border-radius: 1em;overflow: hidden;}
.lightbox iframe {width: 100%;height: 800px;border: none;}
.close-btn {position: absolute;top: 0;right: 10px;background: transparent;color: white;border: none;padding: 10px;font-size: 50px;cursor: pointer;}
@media only screen and (max-width: 780px){
.lightbox-content{max-width: 700px;}
.lightbox iframe{height: 350px;}
}
/* ===================== BLOG SECTION ===================== */
.blog-section {padding: 8rem 0;}
.blog-section h2 {font-size: 4rem; margin-bottom: 4rem; color: var(--color-dark); font-weight: 600; text-align: center;}
.blog-cards-wrapper {display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; max-width: 1040px; margin: 0 auto; padding-bottom: 2rem;}
.blog-card {width: 100%; max-width: 330px; background-color: var(--color-bg); border: 1px solid var(--color-secondary); border-radius: var(--radius-medium); overflow: hidden; display: flex; flex-direction: column; text-align: left;}
.blog-card__image img {width: 100%; height: auto; max-height: 209px; object-fit: cover; display: block;}
.blog-card__content {padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; flex-grow: 1;}
.blog-card__category {font-size: 1.2rem; font-weight: 400; color: var(--color-dark-alt); background-color: var(--color-primary-bg); padding: 0.3rem 1rem; border-radius: var(--radius-small); display: inline-block; line-height: 24px; white-space: nowrap; width: auto; max-width: max-content;}
.blog-card__category--empty {visibility: hidden; }
.blog-card__title {font-size: 2rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; margin: 0; color: var(--color-dark);}
.blog-card__excerpt {font-size: 1.4rem; color: var(--color-text); flex-grow: 1;}
.blog-card__readmore {font-size: 1.6rem; font-weight: bold; text-transform: uppercase; color: var(--color-dark); text-decoration: none;}
.blog-section__more{border: 1px solid var(--color-dark);color: var(--color-dark);}
/* ===================== TOOL CONTROL DETAIL ===================== */
.herramienta-detail {padding: 6rem 0; max-width: 880px; width: 100%; margin: 0 auto;}
.herramienta-detail__top {display: flex; justify-content: space-between; align-items: start; gap: 4rem; flex-wrap: wrap; margin-bottom: 4rem;}
.herramienta-detail__info {flex: 1 1 467px;}
.herramienta-detail__title {font-size: 3.2rem; font-weight: 500; color: var(--color-dark); margin-bottom: 2rem; line-height: 120%;}
.herramienta-detail__desc {font-size: 1.6rem; color: var(--color-text); margin-bottom: 2rem;}
.herramienta-detail__btn {margin-top: 2rem;}
.herramienta-detail__visual {flex: 1 1 373px; min-height: 267px; border-radius: var(--radius-medium); display: flex; justify-content: center; align-items: start;}
.herramienta-detail__visual img{width: 100%;border-radius: var(--radius-large);}
.herramienta-detail__bottom {display: flex; flex-wrap: wrap; gap: 4rem;}
.herramienta-detail__bottom--full .herramienta-detail__col {flex: 1 1 100%; max-width: 100%;}
.herramienta-detail__col {flex: 1 1 45%; font-size: 1.6rem; color: var(--color-dark);}
.herramienta-detail__col ul {padding-left: 2rem; list-style: disc;}
@media (max-width: 920px) {
.herramienta-detail {padding: 4rem 2rem;}
.herramienta-detail__top, .herramienta-detail__bottom {flex-direction: column;}
.herramienta-detail__info {flex: 1 1 100%;}
.herramienta-detail__visual {width: 100%; min-height: 180px; margin-top: 2rem;}
.herramienta-detail__title {font-size: 2.4rem; text-align: center;}
.herramienta-detail__desc {text-align: center;}
.herramienta-detail__btn {text-align: center;}
.herramienta-detail__col {flex: 1 1 100%;}
}
/* ===================== BLOG DETAIL ===================== */
.blog-detail { padding: 6rem 0; max-width: 880px; width: 100%; margin: 0 auto; }
.blog-detail__header { margin-bottom: 4rem; }
.blog-detail__category { margin-bottom: 2rem; }
.blog-detail__category .blog-card__category { font-size: 1.4rem; font-weight: 600; color: var(--color-dark-alt); background-color: var(--color-primary-bg); padding: 0.5rem 1.5rem; border-radius: 0.5em; text-decoration: none; display: inline-block; }
.blog-detail__title {font-family: var(--font-main); font-size: 3.2rem; font-weight: 500; font-style: normal; line-height: 120%; letter-spacing: 0; color: var(--color-dark); margin-bottom: 2rem; }
.blog-detail__meta { display: flex; flex-direction: column; align-items: start; gap: 1rem; font-size: 1.4rem; color: var(--color-text); margin-bottom: 3rem; }
.blog-detail__date { font-weight: 500; color: var(--color-dark); }
.blog-detail__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: start; }
.blog-detail__tags a { background-color: var(--color-tag-bg); color: var(--color-dark); padding: 0.3rem 1rem; border-radius: 1rem; font-size: 1.2rem; text-decoration: none; transition: var(--transition-default); }
.blog-detail__tags a:hover { background-color: var(--color-primary); color: white; }
.blog-detail__image { margin-bottom: 4rem; text-align: center; }
.blog-detail__featured-img { width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-medium); }
.blog-detail__content { font-size: 1.6rem; line-height: 1.6; color: var(--color-dark); margin-bottom: 4rem; }
.blog-detail__content h2, .blog-detail__content h3, .blog-detail__content h4 { margin-top: 3rem; margin-bottom: 1.5rem; color: var(--color-dark); font-family: var(--font-main); }
.blog-detail__content h2 { font-size: 2.8rem; font-weight: 400; }
.blog-detail__content h3 { font-size: 2.4rem; font-weight: 400; }
.blog-detail__content p { margin-bottom: 1.5rem; }
.blog-detail__content ul, .blog-detail__content ol { margin-bottom: 1.5rem; padding-left: 2rem; }
.blog-detail__content li { margin-bottom: 0.5rem; }
.blog-detail__content img { max-width: 100%; height: auto; border-radius: var(--radius-medium); margin: 2rem 0; }
.blog-detail__content blockquote { border-left: 4px solid var(--color-primary); padding-left: 2rem; margin: 2rem 0; font-style: italic; background-color: var(--color-quote-bg); padding: 2rem; border-radius: var(--radius-medium); }
/* ===================== BLOG NAVIGATION ===================== */
.blog-navigation { margin: 3rem 0; padding: 2rem 0; border-top: 1px solid var(--color-border); }
.blog-nav-links { display: flex; justify-content: space-between; margin-bottom: 2rem; }
.blog-nav-previous, .blog-nav-next { flex: 1; max-width: 48%; }
.blog-nav-next { text-align: right; }
.blog-nav-previous a, .blog-nav-next a { display: block; text-decoration: none; color: var(--color-dark); transition: var(--transition-default); }
.blog-nav-previous a:hover, .blog-nav-next a:hover { color: var(--color-primary); text-decoration: none; }
.blog-nav-subtitle { display: block; font-size: 1.4rem; color: var(--color-text); margin-bottom: 0.5rem; font-weight: 400; }
.blog-nav-title { display: block; font-size: 1.6rem; font-weight: 600; color: var(--color-dark); line-height: 1.3; }
.back-to-blog { text-align: center; }
@media (max-width: 920px) {
.blog-detail { padding: 4rem 2rem; }
.blog-detail__title { font-size: 3rem; }
.blog-detail__content { font-size: 1.6rem; }
.blog-nav-links { flex-direction: column; gap: 2rem; }
.blog-nav-previous, .blog-nav-next { max-width: 100%; }
.blog-nav-next { text-align: left; }
}
@media (max-width: 600px) {
.blog-detail__title { font-size: 2.4rem; }
.blog-detail__meta { flex-direction: column; gap: 1rem; }
.blog-detail__tags { flex-direction: column; align-items: center; }
}
/* ===================== PAGE CONTENT ===================== */
.page-content .content-page { max-width: 1040px; margin: 0 auto; }
.page-content h2, .page-content h3, .page-content h4 { font-family: var(--font-main); color: var(--color-dark); margin-top: 3rem; margin-bottom: 1.5rem; }
.page-content h2 { font-size: 2.8rem; font-weight: 400; }
.page-content h3 { font-size: 2.4rem; font-weight: 400; }
.page-content p { font-size: 2.4rem; line-height: 1.6; color: var(--color-dark); margin-bottom: 1.5rem; }
.page-content li { margin-bottom: 0.5rem; }
.page-content img { max-width: 100%; height: auto; border-radius: var(--radius-medium); margin: 2rem 0; }
.page-content blockquote { border-left: 4px solid var(--color-primary); padding-left: 2rem; margin: 2rem 0; font-style: italic; background-color: var(--color-quote-bg); padding: 2rem; border-radius: var(--radius-medium); }
@media (max-width: 920px) {
.page-content { padding: 4rem 2rem; }
}
/* ===================== MISSION VISION SECTION ===================== */
.row-columns { display: flex; gap: 4rem; max-width: 1040px; margin: 0 auto; align-items: stretch; }
.row-columns .column { flex: 1; display: flex; flex-direction: column; }
.row-columns .column h2 {font-family: var(--font-main), serif; font-size: 3.6rem; font-weight: 600; color: var(--color-dark); margin-bottom: 2rem;}
@media (max-width: 920px) {
.mission-vision-section { padding: 4rem 2rem; }
.row-columns { flex-direction: column; gap: 2.5rem; max-width: 100%; }
.row-columns .column { padding: 2.5rem; }
.row-columns .column .title { font-size: 2.2rem; }
.row-columns .column .content { font-size: 1.5rem; }
}
@media (max-width: 600px) {
.mission-vision-section { padding: 3rem 1.5rem; }
.row-columns .column { padding: 2rem; }
.row-columns .column .title { font-size: 2rem; }
.row-columns .column .content { font-size: 1.4rem; line-height: 1.6; }
}
.laws-and-rules-section{background-color: var(--color-primary-bg);position: relative;padding: 80px 0;margin: 130px 0;}
.laws-and-rules-section:before,.laws-and-rules-section:after{position: absolute;content: '';width: 100%;height: 130px;left: 0;background-size: cover;background-position: center center;background-repeat: no-repeat;}
.laws-and-rules-section:before{background-image: url('../files/section-bg-2-top.svg');top: -125px;}
.laws-and-rules-section:after{background-image: url('../files/section-bg-2-bottom.svg');bottom: -125px;}
.laws-and-rules-section .section-short_title{text-align: center;font-weight: 700;font-size: 2rem;text-transform: uppercase;display: inline-block;width: 100%;}
.laws-and-rules-section .section-title{font-weight: 600;font-size: 5.2rem;line-height: 100%;letter-spacing: 0;text-align: center;margin: 0;}
.laws-and-rules-section .section-subtitle{font-weight: 400;font-size: 2.4rem;text-align: center;}
.laws-and-rules-section .laws-list{display: flex;flex-direction: row;flex-wrap: wrap;gap: 10px;justify-content: space-between;width: 100%;max-width: 1030px;margin: 0 auto;}
.laws-and-rules-section .laws-list .law-item{width: 508px;background: var(--color-bg);transform: rotate(0deg);opacity: 1;gap: 10px;border-radius: 24px;padding: 24px;border: 1px solid var(--color-primary-light);display: flex;flex-direction: column;justify-content: space-between;height: 100%;min-height: 250px;}
.laws-and-rules-section .law-button-wrapper {margin-top: auto;}
.laws-and-rules-section .laws-list .law-item .law-badge{font-size: 1.2rem;font-weight: 600;text-transform: uppercase;}
.laws-and-rules-section .laws-list .law-item .law-title{font-size: 2.4rem;font-weight: 600;}
.laws-and-rules-section .laws-list .law-item .btn-law{transform: rotate(0deg);padding: 8px 16px 8px 24px;border-radius: 999px;border: 1px solid var(--color-dark);display: inline-flex;align-items: center;justify-content: start;gap: 10px;background-color: transparent;cursor: pointer;font-size: 1.4rem;font-weight: 500;text-align: center;text-decoration: none;color: var(--color-dark);}
@media (max-width: 1200px) {
.laws-and-rules-section .laws-list{flex-wrap: wrap;justify-content: center;}
}
/* key functions */
.key_functions{padding: 40px 0 80px;margin: 130px 0; }
.key_functions .section-title{font-weight: 600;font-size: 5.2rem;line-height: 100%;letter-spacing: 0;text-align: center;margin: 40px 0;}
.function-list{display: flex;flex-direction: row;justify-content: space-around;align-items: start;gap: 20px 30px;flex-wrap: wrap;}
.function-list .function-item{width: 330px;display: flex;flex-direction: column;gap: 10px;}
.function-list .function-item img{max-width: 40px;width: 100%;}
.function-list .function-item .function-title{font-size: 2.4rem;font-weight: 600;line-height: 120%;}
/*GRID*/
.audits-list{padding:80px 0;}
#auditorias-list{margin:0;padding:0;list-style:none;}
#auditorias-list li{list-style:none;margin:0;}
.audit-card{
display:flex;
flex-direction:column;
gap:1.6rem;
height:100%;
background:var(--color-bg);
border:1px solid var(--color-primary-lighter);
border-radius:1.6rem;
text-decoration:none;
color:inherit;
position:relative;
overflow:hidden;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.audit-card__image{
width:100%;
height:180px;
background:var(--color-primary-bg);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
padding:2rem;
}
.audit-card__image img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
display:block;
transition:transform .35s ease;
}
.audit-card:hover .audit-card__image img{ transform:scale(1.05); }
.audit-card > .audit-card__meta,
.audit-card > .audit-card__title,
.audit-card > .audit-card__excerpt,
.audit-card > .audit-card__cta{
padding-left:2.4rem;
padding-right:2.4rem;
}
.audit-card > .audit-card__meta{ padding-top:2.4rem; }
.audit-card > .audit-card__cta{ padding-bottom:2.4rem; }
.audit-card:hover{
transform:translateY(-4px);
border-color:var(--color-primary);
box-shadow:0 1.2rem 3.2rem rgba(0,160,173,.12);
text-decoration:none;
}
.audit-card__meta{
display:flex;
align-items:center;
gap:1rem;
flex-wrap:wrap;
}
.audit-card__date{
font-family:var(--font-secondary);
font-weight:700;
font-size:1.2rem;
line-height:1;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--color-primary);
}
.audit-card__category{
display:inline-flex;
align-items:center;
padding:.5rem 1rem;
border-radius:999px;
font-family:var(--font-secondary);
font-size:1.1rem;
font-weight:600;
line-height:1;
letter-spacing:.02em;
background:var(--color-primary-bg);
color:var(--color-dark);
}
.audit-card__title{
font-family:var(--font-secondary);
font-weight:700;
font-size:1.6rem;
line-height:1.35;
letter-spacing:0;
color:var(--color-dark);
margin:0;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.audit-card__excerpt{
font-family:var(--font-main);
font-size:1.3rem;
line-height:1.55;
color:#4a6b7c;
margin:0;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
flex:1 1 auto;
}
.audit-card__cta{
display:inline-flex;
align-items:center;
gap:.8rem;
font-family:var(--font-secondary);
font-weight:600;
font-size:1.4rem;
color:var(--color-primary);
margin-top:.4rem;
transition:gap .25s ease;
}
.audit-card__cta svg{width:1.4rem;height:1.4rem;transition:transform .25s ease;}
.audit-card:hover .audit-card__cta{gap:1.2rem;}
.audit-card:hover .audit-card__cta svg{transform:translateX(4px);}
.audits-empty{
grid-column:1/-1;
text-align:center;
padding:4rem 2rem;
color:var(--color-text-light);
}
#auditorias-list.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:2rem;
}
#auditorias-list.grid li{width:100%;}
#auditorias-list.list{display:flex;flex-direction:column;gap:1.2rem;}
#auditorias-list.list .audit-card{
flex-direction:row;
align-items:stretch;
gap:0;
}
#auditorias-list.list .audit-card__image{
width:200px;
height:auto;
flex-shrink:0;
padding:1.6rem;
}
#auditorias-list.list .audit-card > .audit-card__meta,
#auditorias-list.list .audit-card > .audit-card__title,
#auditorias-list.list .audit-card > .audit-card__excerpt,
#auditorias-list.list .audit-card > .audit-card__cta{
padding-left:0;
padding-right:0;
}
#auditorias-list.list .audit-card > .audit-card__meta{ padding-top:2rem; padding-left:2.4rem; padding-right:2.4rem; }
#auditorias-list.list .audit-card > .audit-card__title{ padding-left:2.4rem; padding-right:2.4rem; -webkit-line-clamp:2; }
#auditorias-list.list .audit-card > .audit-card__excerpt{ padding-left:2.4rem; padding-right:2.4rem; -webkit-line-clamp:2; }
#auditorias-list.list .audit-card > .audit-card__cta{ padding:0 2.4rem 2rem; white-space:nowrap; }
@media (max-width: 768px){
#auditorias-list.list .audit-card{flex-direction:column;gap:1.2rem;}
#auditorias-list.list .audit-card__image{width:100%;height:160px;padding:1.6rem;}
#auditorias-list.list .audit-card__title{flex:none;max-width:100%;}
.audit-card__image{height:140px;}
.audit-card > .audit-card__meta,
.audit-card > .audit-card__title,
.audit-card > .audit-card__excerpt,
.audit-card > .audit-card__cta{padding-left:1.8rem;padding-right:1.8rem;}
.audit-card > .audit-card__meta{padding-top:1.8rem;}
.audit-card > .audit-card__cta{padding-bottom:1.8rem;}
.audit-card__title{font-size:1.8rem;}
}
/* --- Audits Filter (scoped) --- */
/* Container */
.audits-filter{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:20px 0;justify-content:space-between;padding:0 15px;}
.audits-filter .audits-type-view button{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:4px;transition:background .2s;}
.audits-filter .audits-type-view button:hover{background:rgba(0,0,0,.05);}
.audits-filter .audits-type-view button.active{background:rgba(0,0,0,.15);}
.audits-filter .audits-type-view button svg{width:20px;height:20px;}
/* Search field */
.audits-filter .audits-filter-form{display: flex;}
.audits-filter .audits-field{position:relative;width:328px;height:56px;display:flex;align-items:center;}
.audits-filter .audits-input{width:100%;height:100%;padding:16px 16px 16px 24px;border:1px solid var(--color-primary-lighter);border-radius:999px;font-family:Manrope,sans-serif;font-weight:700;font-size:16px;line-height:100%;letter-spacing:0;outline:none;background:var(--color-bg);color: var(--color-dark);}
.audits-filter .audits-input::placeholder{color:var(--color-placeholder);opacity:1;}
.audits-filter .audits-input__icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;pointer-events:none;}
.audits-filter .audits-input__icon svg{display:block;}
/* Select wrapper */
.audits-filter .audits-select{position:relative;width:328px;color: var(--color-dark);}
.audits-filter .audits-select__button{width:100%;height:56px;display:flex;align-items:center;justify-content:space-between;padding:16px 16px 16px 24px;border:1px solid var(--color-primary-lighter);border-radius:999px;background:var(--color-bg);cursor:pointer;font-family:Manrope,sans-serif;font-weight:700;font-size:16px;line-height:100%;letter-spacing:0;}
.audits-filter .audits-select__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color: var(--color-dark);}
.audits-filter .audits-select__icon{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;}
.audits-filter .audits-select__icon .icon-up{display:none;}
.audits-filter .audits-select.is-open .icon-down{display:none;}
.audits-filter .audits-select.is-open .icon-up{display:inline-flex;}
/* Force dropdown UL to ignore .audits-list ul rules */
.audits-filter .audits-select .audits-select__list{position:absolute;top:calc(100% + 8px);left:0;width:100%;display:none;background:var(--color-bg);border:1px solid var(--color-primary-lighter);border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,0.08);padding:8px 0;margin:0;z-index:20;max-height:280px;overflow:auto;list-style:none;flex-wrap:nowrap;gap:0;}
.audits-filter .audits-select.is-open .audits-select__list{display:block;}
/* Force LI to ignore .audits-list ul li rules */
.audits-filter .audits-select .audits-select__list .audits-select__option{display:block;border:none;border-radius:0;padding:10px 16px;list-style:none;width:100%;max-width:none;min-height:auto;margin:0;box-shadow:none;background:transparent;align-items:unset;justify-content:flex-start;gap:0;cursor:pointer;font-family:Manrope,sans-serif;font-weight:600;font-size:15px;line-height:1.2;color:var(--color-dark);text-decoration:none;}
.audits-filter .audits-select .audits-select__list .audits-select__option:hover{background:var(--color-hover-select);}
/* Loading state */
.audits-list ul.is-loading{opacity:0.7;pointer-events:none;}
/* Spinner loader */
.spinner-loader{display:inline-block;width:40px;height:40px;border:4px solid var(--color-spinner-bg);border-top:4px solid var(--color-dark);border-radius:50%;animation:spin 1s linear infinite;}
.spinner-container{text-align:center;padding:40px;}
/* Responsive */
@media (max-width:780px){.audits-filter{gap:12px;}.audits-filter .audits-field,.audits-filter .audits-select{width:100%;}}
/* plans-reports */
.plans-reports-section{background: var(--color-course-bg);width: 100%;position: relative;margin: 130px 0;padding: 1px 0}
.plans-reports-section:before,.plans-reports-section:after{position: absolute;content: '';width: 100%;height: 130px;left: 0;background-size: cover;background-position: center center;background-repeat: no-repeat;}
.plans-reports-section:before{background-image: url('../files/section-bg-3-top.svg');top: -125px;}
.plans-reports-section:after{background-image: url('../files/section-bg-3-bottom.svg');bottom: -125px;}
.plans-reports-section .section-short_title{text-align: center;font-weight: 700;font-size: 2rem;text-transform: uppercase;display: inline-block;width: 100%;}
.plans-reports-section .section-title{font-weight: 600;font-size: 5.2rem;line-height: 100%;letter-spacing: 0;text-align: center;margin: 0 auto;max-width: 660px}
.plans-reports-section .items{display: flex;flex-direction: row;width:100%;max-width: 1040px;gap: 24px;justify-content: space-between;align-items: start;margin: 100px auto;flex-wrap: wrap;}
.plans-reports-section .items .card{width:100%;max-width:508px;background:var(--color-bg);border-radius:24px;border:1px solid var(--color-primary-light);display:flex;flex-direction:column;overflow:hidden;min-height: 330px;}
.plans-reports-section .items .card .icon{height:160px;display:flex;align-items:center;justify-content:center;}
.plans-reports-section .items .card .icon img{width:100%;height:100%;object-fit:cover;}
.plans-reports-section .items .card .content{padding:24px;display:flex;flex-direction:column;flex-grow:1;gap: 10px;}
.plans-reports-section .items .card .title{font-family:Poppins;font-weight:600;font-style:normal;font-size:24px;line-height:120%;letter-spacing:0;margin-bottom:8px;}
.plans-reports-section .items .card .extract{font-family:Poppins;font-weight:400;font-style:normal;font-size:16px;line-height:100%;letter-spacing:0;margin-bottom:auto;}
.plans-reports-section .items .card .btn{font-weight:500;font-size:16px;line-height:1;width:100%;height:56px;gap:10px;opacity:1;border:1px solid var(--color-btn-alt);border-radius:999px;padding:16px;background:transparent;color:var(--color-btn-alt);text-decoration:none;display:inline-block;text-align:center;align-self:start;transition:background-color 0.3s ease,color 0.3s ease;margin-top: 40px;}
.plans-reports-section .items .card .btn:hover{background-color:var(--color-btn-alt);color:var(--color-bg);}
@media (max-width: 1200px) {
.plans-reports-section .items{justify-content: center;}
}
/* authorities */
.authorities{background-color: var(--color-bg);padding: 5rem 0;}
.authorities .section-title{text-align: center;font-weight: 600;font-size: 5.2rem;}
.authorities .items{display: flex;flex-direction: row;width:100%;max-width: 1040px;gap: 24px;justify-content: space-between;align-items: start;margin: 100px auto;flex-wrap: wrap;}
.authorities .items .authority{width: 100%;max-width: 480px;}
.authorities .items .authority .authority-image img{width: 100%;border-radius: 16px;}
.authorities .items .authority .authority-subtitle{font-size: 2rem;font-weight: 700;text-transform: uppercase;}
.authorities .items .authority .authority-title{font-weight: 600;font-size: 4rem;line-height: 120%;}
@media (max-width: 1030px) {
.authorities .items{flex-direction: column;justify-content: start;align-items: center;}
}
/* debates */
.debates{background:var(--color-white);padding:80px 0 60px 0;margin:20px 0;position:relative;}
.debates__title{font-weight:600;font-size:5.2rem;line-height:100%;letter-spacing:0;text-align:center;margin:0 0 20px 0;color:var(--color-dark);}
.debates__desc{font-weight:400;font-size:2.4rem;text-align:center;color:var(--color-dark);max-width:720px;margin:0 auto 40px auto;}
.debates__wrapper{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;width:100%;max-width:1040px;margin:0 auto;}
.debate-card{width:100%;max-width:330px;min-height:350px;background:var(--color-white);border-radius:24px;border:1px solid var(--color-primary-light);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
.debate-card__content{padding:24px 24px 0 24px;display:flex;flex-direction:column;gap:10px;flex-grow:1;}
.debate-card__title{font-family:'Poppins',sans-serif;font-weight:600;font-size:2.4rem;line-height:120%;letter-spacing:0;margin:0 0 8px 0;color:var(--color-dark);}
.debate-card__tags{display:flex;gap:8px;flex-wrap:wrap;}
.debate-tag{font-size:1.2rem;font-weight:600;text-transform:uppercase;background:var(--color-primary-bg);color:var(--color-dark);padding:3px 10px;border-radius:1rem;}
.debate-card__excerpt{font-family:'Poppins',sans-serif;font-weight:400;font-size:1.4rem;line-height:1.4;letter-spacing:0;color:var(--color-text);}
.debate-card__stats{display:flex;gap:8px;margin:12px 0 0 0;}
.debate-badge{display:inline-flex;align-items:center;gap:5px;font-size:1.2rem;font-weight:600;padding:3px 12px;border-radius:999px;}
.debate-badge--up{background:var(--color-success-bg);color:var(--color-success);}
.debate-badge--down{background:var(--color-error-bg);color:var(--color-error);}
.debate-badge--comments{background:var(--color-primary-lighter);color:var(--color-info);}
.debate-card__footer{padding:0 24px 24px 24px;display:flex;justify-content:flex-start;margin-top: 10px;}
.debate-card__btn{font-weight:500;font-size:16px;line-height:1;width:100%;height:44px;gap:10px;opacity:1;border:1px solid var(--color-btn-alt);border-radius:999px;padding:12px 0;background:transparent;color:var(--color-btn-alt);text-decoration:none;text-align:center;transition:background-color 0.3s ease,color 0.3s ease;}
.debate-card__btn:hover{background-color:var(--color-btn-alt);color:var(--color-white);}
.debates__actions{display:flex;justify-content:center;padding:32px 0 0 0;}
@media (max-width:1200px){.debates__wrapper{justify-content:center;}}
@media (max-width:900px){.debates__wrapper{flex-direction:column;align-items:center;}.debate-card{max-width:100%;}}
@media (max-width:700px){.debates{padding:40px 0;}.debates__title{font-size:3.2rem;}.debates__desc{font-size:1.6rem;}.debate-card__title{font-size:1.7rem;}}
/* FAQ Section */
.faq-section{background-color:var(--color-primary-bg);position:relative;padding:80px 0;margin-top: 80px;}
.faq-section:before{position:absolute;content:'';width:100%;height:130px;left:0;background-size:cover;background-position:center center;background-repeat:no-repeat;}
.faq-section:before{background-image:url('../files/section-bg-2-top.svg');top:-125px;}
.faq-section .faq-container{max-width:1040px;width:100%;margin:0 auto;}
.faq-section .section-title{font-weight: 600;font-size: 5.2rem;line-height: 100%;letter-spacing: 0;text-align: center;margin: 0;}
.faq-section .faq-list{display:flex;flex-direction:column;gap:16px;margin: 80px 0;}
.faq-section .faq-question{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0;cursor:pointer;list-style:none;user-select:none;}
.faq-section .faq-q-text{font-weight:700;font-style:normal;font-size:2.4rem;line-height:120%;letter-spacing:0;color:#1F5E79;}
.faq-section .faq-answer{padding:20px 10px;color:var(--color-dark);font-size:16px;line-height:150%;border-bottom:1px solid #0295A1;}
.faq-section .faq-answer ul{padding:10px;}
.faq-section .faq-answer h1{color:#1F5E79;}
.faq-section .faq-answer h2{color:#1F5E79;}
.faq-section .faq-answer h3{color:#1F5E79;}
.faq-section .faq-answer h4{color:#1F5E79;}
.faq-section .faq-answer h5{color:#1F5E79;}
.faq-section .faq-answer h6{color:#1F5E79;}
.faq-section .faq-question::-webkit-details-marker{display:none;}
.faq-section .faq-chevron{width:36px;height:36px;flex:0 0 18px;background-repeat:no-repeat;background-position:center;background-size:36px 36px;}
.faq-section .faq-item .faq-chevron{background-image:url("data:image/svg+xml;utf8,");}
.faq-section .faq-item[open] .faq-chevron{background-image:url("data:image/svg+xml;utf8,");}
@media (max-width:780px){.faq-section{padding:48px 40px;}}
/* Scope: Single Auditoria */
section.single-auditoria{padding:6rem 0;max-width:880px;width:100%;margin:0 auto;}
section.single-auditoria .single-auditoria{padding:80px 0;}
section.single-auditoria .single-auditoria.container{max-width:1040px;width:100%;margin:0 auto;}
section.single-auditoria .single-auditoria__header{margin-bottom:4rem;}
section.single-auditoria .single-auditoria__title{font-family:var(--font-main);font-weight:500;font-style:normal;font-size:3.2rem;line-height:120%;letter-spacing:0;color:var(--color-dark);margin:0 0 1.2rem 0;}
section.single-auditoria .single-auditoria__tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin:10px 0;}
section.single-auditoria .single-auditoria__tags a{background-color:var(--color-tag-bg);color:var(--color-dark);padding:0.3rem 1rem;border-radius:1rem;font-size:1.2rem;text-decoration:none;transition:var(--transition-default);}
section.single-auditoria .single-auditoria__tags a:hover{background-color:var(--color-primary);color:#fff;}
section.single-auditoria .single-auditoria__meta{width:100%;display:flex;justify-content:space-between;flex-direction:row;align-items:start;gap:1rem;font-size:1.4rem;color:var(--color-text);margin-bottom:3rem;}
section.single-auditoria .single-auditoria__date{font-weight:600;font-size:1.6rem;color:var(--color-dark);text-transform:uppercase;}
section.single-auditoria .single-auditoria__date span{display:block;font-weight:normal;}
section.single-auditoria .single-auditoria__image{margin-bottom:4rem;text-align:center;}
section.single-auditoria .single-auditoria__featured-img{width:100%;max-width:100%;height:auto;border-radius:var(--radius-medium);}
section.single-auditoria .single-auditoria__content{font-size:1.6rem;line-height:1.6;color:var(--color-dark);margin-bottom:4rem;}
section.single-auditoria .download{width:100%;display:flex;flex-direction:row;justify-content:center;}
@media(max-width:780px){section.single-auditoria .single-auditoria.container{padding-left:2rem;padding-right:2rem;}}
/* Tags: label + list + item + link (compatible con ACF inline styles) */
section.single-auditoria .single-auditoria__tags-label{font-weight:600;color:var(--color-dark);}
section.single-auditoria .single-auditoria__tags-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
section.single-auditoria .single-auditoria__tag{margin:0;padding:0;}
section.single-auditoria .single-auditoria__tag-link{display:inline-block;padding:4px 8px;border-radius:5px;text-decoration:none;color:var(--color-dark);background:var(--color-tag-bg);}
.about-us .container{display: flex;flex-direction: row;gap: 10px;}
.about-us .content-page,
.about-us.featured-image-wrap{width: 50%;}
@media (max-width:780px){
.about-us .container{flex-wrap: wrap;}
.about-us .content-page,
.about-us.featured-image-wrap{width: 100%;}
}
.ctrl-video-container{position:relative;width:100%;height:500px;overflow:hidden;}
.ctrl-video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.entry-content iframe[src*="youtube.com"],.entry-content iframe[src*="youtu.be"],.content iframe[src*="youtube.com"],.content iframe[src*="youtu.be"],.page-content iframe[src*="youtube.com"],.page-content iframe[src*="youtu.be"]{width:100% !important;height:500px !important;display:block;margin:0 auto;border:0;}
/* ===================== GALLERY MASONRY STYLES ===================== */
/* Reset WordPress gallery defaults */
.gallery dl, .gallery dt, .gallery dd { margin: 0; padding: 0; }
/* Masonry layout using CSS columns */
.gallery {
column-count: 1;
column-gap: 16px;
margin: 2rem 0;
}
/* Responsive column counts */
@media (min-width: 640px) {
.gallery { column-count: 2; }
}
@media (min-width: 900px) {
.gallery { column-count: 3; }
}
@media (min-width: 1200px) {
.gallery { column-count: 4; }
}
/* Gallery items */
.gallery .gallery-item {
display: block;
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 16px;
}
.gallery .gallery-icon {
margin: 0;
}
.gallery .gallery-icon a {
display: block;
}
.gallery .gallery-icon img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.gallery .gallery-icon img:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* Hide captions */
.gallery .gallery-caption {
display: none !important;
}
/* Hide WordPress default breaks */
.gallery br[style*="clear"] {
display: none !important;
}
.gallery br {
display: none !important;
}
/* Modern CSS Grid masonry (for browsers that support it) */
@supports (grid-template-rows: masonry) {
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-template-rows: masonry;
gap: 16px;
column-count: unset;
}
.gallery .gallery-item {
margin: 0;
}
}