/*
Theme Name: Egovenz Child
Description: Child Theme for Egovenz Theme (CCDRSJ)
Author: Zozothemes (customizado)
Version: 1.0
Template: egovenz
Text Domain: zozotheme
*/
/* =========================================================
0) IDENTIDAD CCDRSJ: COLORES + TIPOGRAFÍA BASE
========================================================= */
:root{
--ccdr-azul: #003366;
--ccdr-verde: #26B979;
--ccdr-celeste: #3499CC;
--ccdr-magenta: #CC3399;
--gris-sub: #888888;
--gris-nieto: #9a9a9a;
--radius: 6px;
--radius-lg: 12px;
--shadow-sub: 0 8px 24px rgba(0,0,0,.06);
/* Tipografía institucional (redondeada + con peso, NO delgada) */
--ccdr-font: "Inter Tight", system-ui, -apple-system, "Segoe UI",
Roboto, "Noto Sans", Ubuntu, Cantarell,
"Helvetica Neue", Arial, sans-serif;
}
/* Base tipográfica global (evita diferencias editor/frontend) */
body{
font-family: var(--ccdr-font);
font-weight: 500; /* evita “delgada” */
}
h1, h2, h3, h4, h5, h6{
font-family: var(--ccdr-font);
font-weight: 800;
}
/* =========================================================
1) HEADER / MENÚ (nivel 1)
========================================================= */
.site-header,
.header,
.header-main,
.header-top,
.navbar,
#masthead{
background-color: var(--ccdr-azul) !important;
border-color: var(--ccdr-azul) !important;
color:#fff !important;
}
.main-navigation > ul > li > a,
.navbar .menu > li > a{
color:#fff !important;
font-family: var(--ccdr-font) !important;
font-weight: 700 !important;
}
/* Caret del tema (flechita) */
.main-navigation .menu-item-has-children > a:after,
.navbar .menu .menu-item-has-children > a:after{
border-top-color:#fff !important;
}
/* =========================================================
1.1) SUBMENÚS (nivel 2+)
========================================================= */
.main-navigation ul.sub-menu,
.navbar .menu li ul.sub-menu,
#masthead .dropdown-menu{
background:#fff !important;
border:1px solid #eee !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-sub) !important;
padding:.5rem !important;
}
/* Links submenú */
.main-navigation ul.sub-menu li > a,
.navbar .menu li ul.sub-menu li > a,
#masthead .main-navigation ul.sub-menu li > a,
.dropdown-menu li > a{
background:#fff !important;
color: var(--ccdr-azul) !important;
position: relative;
transition: background-color .2s ease, color .2s ease;
border-radius: var(--radius);
border-left:4px solid transparent !important;
box-shadow:none !important;
padding:.55rem .9rem .55rem 1rem !important;
font-family: var(--ccdr-font) !important;
font-weight: 600 !important;
}
/* Hover/focus */
#masthead .main-navigation ul.sub-menu li > a:hover,
#masthead .main-navigation ul.sub-menu li > a:focus,
.navbar .menu li ul.sub-menu li > a:hover,
.navbar .menu li ul.sub-menu li > a:focus,
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus{
color: var(--ccdr-verde) !important;
background:#fff !important;
border-left-color: var(--ccdr-verde) !important;
}
/* Sub-submenús */
.main-navigation ul.sub-menu ul.sub-menu,
.navbar .menu li ul.sub-menu ul.sub-menu{
background:#fff !important;
border:1px solid #eee !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-sub) !important;
padding:.5rem !important;
}
.main-navigation ul.sub-menu ul.sub-menu li > a,
.navbar .menu li ul.sub-menu ul.sub-menu li > a{
background:#fff !important;
color: var(--ccdr-azul) !important;
border-left:4px solid transparent !important;
border-radius: var(--radius);
}
.main-navigation ul.sub-menu ul.sub-menu li > a:hover,
.navbar .menu li ul.sub-menu ul.sub-menu li > a:hover{
color: var(--ccdr-verde) !important;
border-left-color: var(--ccdr-verde) !important;
}
/* =========================================================
1.2) SUBMENÚ: “rayita” verde solo en hover (no fija)
========================================================= */
.egovenz-main-menu li.menu-item.dropdown .dropdown-menu > li > a::before,
#masthead .main-navigation ul.sub-menu li > a::before,
.navbar .menu li ul.sub-menu li > a::before,
.dropdown-menu li > a::before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:4px;
background: var(--ccdr-verde) !important;
transform: scaleY(0);
transform-origin: center top;
transition: transform .22s ease;
border-radius: 2px;
}
.egovenz-main-menu li.menu-item.dropdown .dropdown-menu > li > a:hover::before,
.egovenz-main-menu li.menu-item.dropdown .dropdown-menu > li > a:focus::before,
#masthead .main-navigation ul.sub-menu li > a:hover::before,
#masthead .main-navigation ul.sub-menu li > a:focus::before,
.navbar .menu li ul.sub-menu li > a:hover::before,
.navbar .menu li ul.sub-menu li > a:focus::before,
.dropdown-menu li > a:hover::before,
.dropdown-menu li > a:focus::before{
transform: scaleY(1) !important;
}
/* Quitar rayita fija en estados current/active */
.egovenz-main-menu li.menu-item.dropdown .dropdown-menu > li.current-menu-item > a::before,
.egovenz-main-menu li.menu-item.dropdown .dropdown-menu > li.current_page_item > a::before,
#masthead .main-navigation ul.sub-menu li.current-menu-item > a::before,
#masthead .main-navigation ul.sub-menu li.current_page_item > a::before,
#masthead .main-navigation ul.sub-menu li.current-menu-parent > a::before,
#masthead .main-navigation ul.sub-menu li.current-menu-ancestor > a::before,
.navbar .menu li ul.sub-menu li.current-menu-item > a::before,
.navbar .menu li ul.sub-menu li.current_page_item > a::before,
.dropdown-menu li.current-menu-item > a::before,
.dropdown-menu li.current_page_item > a::before,
.dropdown-menu .active > a::before{
transform: scaleY(0) !important;
}
/* Fallback: sin borde verde fijo */
.egovenz-main-menu li.menu-item.dropdown .dropdown-menu > li.current-menu-item > a,
.egovenz-main-menu li.menu-item.dropdown .dropdown-menu > li.current_page_item > a,
#masthead .main-navigation ul.sub-menu li.current-menu-item > a,
#masthead .main-navigation ul.sub-menu li.current_page_item > a,
#masthead .main-navigation ul.sub-menu li.current-menu-parent > a,
#masthead .main-navigation ul.sub-menu li.current-menu-ancestor > a,
.navbar .menu li ul.sub-menu li.current-menu-item > a,
.navbar .menu li ul.sub-menu li.current_page_item > a,
.dropdown-menu li.current-menu-item > a,
.dropdown-menu li.current_page_item > a,
.dropdown-menu .active > a{
border-left-color: transparent !important;
color: var(--ccdr-azul) !important;
}
/* Accesibilidad teclado */
.main-navigation a:focus-visible,
.dropdown-menu a:focus-visible{
outline: 2px solid var(--ccdr-celeste) !important;
outline-offset: 2px !important;
border-radius: var(--radius);
}
/* =========================================================
1.3) MENÚ MÓVIL / OFFCANVAS
========================================================= */
.offcanvas,
.mobile-menu{ background:#fff !important; }
.offcanvas .menu > li > a,
.mobile-menu .menu > li > a{
color: var(--ccdr-azul) !important;
font-family: var(--ccdr-font) !important;
font-weight: 700 !important;
}
.offcanvas .sub-menu a,
.mobile-menu .sub-menu a{
color: var(--ccdr-azul) !important;
background:#fff !important;
border-left:4px solid transparent !important;
border-radius: var(--radius);
transition: color .2s ease, border-color .2s ease;
font-family: var(--ccdr-font) !important;
font-weight: 600 !important;
}
.offcanvas .sub-menu a:hover,
.offcanvas .sub-menu a:focus,
.offcanvas .sub-menu .current-menu-item > a,
.mobile-menu .sub-menu a:hover,
.mobile-menu .sub-menu a:focus,
.mobile-menu .sub-menu .current-menu-item > a{
color: var(--ccdr-verde) !important;
border-left-color: var(--ccdr-verde) !important;
}
/* =========================================================
2) UTILIDAD SECCIONES OSCURAS
========================================================= */
.ccdr-bg-azul{ background:var(--ccdr-azul) !important; color:#fff !important; }
.ccdr-bg-azul a{ color:#fff !important; }
.ccdr-bg-azul a:hover{ color:var(--ccdr-verde) !important; }
/* =========================================================
3) BOTONES
========================================================= */
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
a.button,
a.btn,
.btn,
.button,
.elementor-button,
.read-more,
.more-link{
background-color: var(--ccdr-verde) !important;
border-color: var(--ccdr-verde) !important;
color:#fff !important;
border-radius: var(--radius);
text-decoration:none !important;
font-family: var(--ccdr-font) !important;
font-weight: 800 !important;
}
button:hover, button:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
input[type="button"]:hover, input[type="button"]:focus,
.wp-block-button__link:hover, .wp-block-button__link:focus,
a.button:hover, a.button:focus,
a.btn:hover, a.btn:focus,
.btn:hover, .btn:focus,
.button:hover, .button:focus,
.elementor-button:hover, .elementor-button:focus,
.read-more:hover, .read-more:focus,
.more-link:hover, .more-link:focus{
background-color: var(--ccdr-azul) !important;
border-color: var(--ccdr-azul) !important;
color:#fff !important;
outline:none;
}
/* Outline */
.btn-outline, .button-outline,
.wp-block-button.is-style-outline .wp-block-button__link{
background:transparent !important;
color: var(--ccdr-verde) !important;
border:2px solid var(--ccdr-verde) !important;
}
.btn-outline:hover, .button-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover{
color:#fff !important;
background: var(--ccdr-verde) !important;
border-color: var(--ccdr-verde) !important;
}
/* =========================================================
4) ÍCONOS (NO global: evitar romper SVG del sitio)
========================================================= */
/* Mantengo reglas de color para FA y botones */
i.fa, i.fas, i.far, i.fab,
.fa, .fas, .far, .fab{ color:#fff !important; }
button i, a.button i, .btn i, .elementor-button i{ color:#fff !important; }
a:hover i.fa, a:hover i.fas, a:hover i.far, a:hover i.fab{ color: var(--ccdr-verde) !important; }
/* =========================================================
5) MS FORMS EMBED
========================================================= */
.msforms-embed{
max-width: 940px;
margin: 2.5rem auto;
padding: 1.5rem;
background:#fff;
border: 2px solid var(--accent, var(--ccdr-azul));
border-radius:16px;
box-shadow:0 12px 28px rgba(0,0,0,.08);
text-align:center;
font-family: var(--ccdr-font);
}
.msforms-embed h1{
font-size:1.8rem;
color: var(--accent, var(--ccdr-azul));
margin-bottom:.5rem;
font-weight: 800;
}
.msforms-embed p{ font-size:1rem; color:#333; margin-bottom:1rem; }
.msforms-embed iframe{
width:100%;
height:80vh;
min-height:700px;
border:none;
border-radius:12px;
margin-top:1rem;
}
.msf-legal{ font-size:.9rem; color:#444; margin-top:1rem; }
.sugerencias{ --accent: var(--ccdr-verde); }
.quejas{ --accent: var(--ccdr-celeste); }
.denuncias{ --accent: var(--ccdr-azul); }
/* ================================
TITULO PRINCIPAL INSTITUCIONAL
(Elementor Heading – CCDRSJ)
================================ */
.ccdrsj-page-title .elementor-heading-title{
color: #003366 !important; /* Azul institucional CCDRSJ */
font-family: inherit !important; /* Hereda la tipografía del sitio */
font-size: 42px !important; /* Tamaño del título */
font-weight: 700 !important;
line-height: 1.15 !important;
margin: 0 !important;
}
/* =========================================
CCDRSJ – SUBTITULO INSTITUCIONAL
Elementor Heading (H2)
========================================= */
.ccdrsj-page-subtitle .elementor-heading-title{
color: #6b7280 !important; /* Gris institucional elegante */
font-family: inherit !important; /* Hereda tipografía del sitio */
font-size: clamp(16px, 2.2vw, 20px) !important; /* Responsive */
font-weight: 400 !important; /* Más ligero que el H1 */
line-height: 1.4 !important;
letter-spacing: 0.2px;
margin-top: 6px !important;
margin-bottom: 0 !important;
}
/* =========================================
CCDRSJ – SUBTITULO DE SECCIÓN (H3)
Elementor Heading
========================================= */
.ccdrsj-section-title .elementor-heading-title{
color: #003366 !important; /* Azul institucional */
font-family: inherit !important; /* Hereda tipografía del sitio */
font-size: clamp(18px, 2.5vw, 24px) !important; /* Responsive */
font-weight: 600 !important; /* Seminegrita institucional */
line-height: 1.3 !important;
letter-spacing: 0.1px;
margin-top: 18px !important;
margin-bottom: 6px !important;
}
/* =========================================================
6) DIRECTORIO INTERNO (encapsulado)
========================================================= */
.directorio-interno .elementor-heading-title{ color: var(--ccdr-azul) !important; }
.directorio-interno .elementor-widget-egovenzteam .team-name h3,
.directorio-interno .elementor-widget-egovenzteam .team-name h3 a,
.directorio-interno .team-wrapper.team-default .team-name h3,
.directorio-interno .team-wrapper.team-default .team-name h3 a,
.directorio-interno a.client-name{
color: var(--ccdr-verde) !important;
text-decoration: none !important;
}
.directorio-interno .elementor-widget-egovenzteam .team-name h3 a:hover,
.directorio-interno .team-wrapper.team-default .team-name h3 a:hover,
.directorio-interno a.client-name:hover,
.directorio-interno .elementor-widget-egovenzteam .team-name h3 a:focus,
.directorio-interno .team-wrapper.team-default .team-name h3 a:focus,
.directorio-interno a.client-name:focus{
color: var(--ccdr-verde) !important;
text-decoration: none !important;
}
/* =========================================================
7) QUICK LINKS (Accesos directos) – SOLO dentro de .ccdr-quicklinks
========================================================= */
.ccdr-quicklinks .ccdr-ql-card{
position: relative;
background:#fff;
border-radius: var(--radius-lg);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
padding: 28px 18px;
text-align:center;
cursor:pointer;
overflow:hidden;
transition: transform .28s ease, box-shadow .28s ease;
}
.ccdr-quicklinks .ccdr-ql-card:hover{
transform: translateY(-10px);
box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.ccdr-quicklinks .ccdr-ql-card::before{
content:"";
position:absolute;
left:0; top:0;
width:100%; height:100%;
background: rgba(0,0,0,.04);
transform: translateY(-100%);
transition: transform .55s ease;
z-index: 0;
}
.ccdr-quicklinks .ccdr-ql-card:hover::before{ transform: translateY(0); }
.ccdr-quicklinks .ccdr-ql-card::after{
content:"";
position:absolute;
left:0; bottom:0;
width:100%; height:4px;
background: linear-gradient(90deg,
var(--ccdr-azul) 0%,
var(--ccdr-verde) 33%,
var(--ccdr-celeste) 66%,
var(--ccdr-magenta) 100%
);
transform: scaleX(0);
transform-origin:left;
transition: transform .28s ease;
z-index: 1;
}
.ccdr-quicklinks .ccdr-ql-card:hover::after{ transform: scaleX(1); }
.ccdr-quicklinks .ccdr-ql-card > *{ position: relative; z-index: 2; }
.ccdr-quicklinks .ccdr-ql-icon{
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1px;
line-height: 1;
}
.ccdr-quicklinks .ccdr-ql-icon img{
width: 90px;
max-width: 90px;
height: auto;
transition: transform .28s ease;
}
.ccdr-quicklinks .ccdr-ql-card:hover .ccdr-ql-icon img{ transform: scale(1.06); }
/* SVG en quicklinks (encapsulado) */
.ccdr-quicklinks svg,
.ccdr-quicklinks svg *{
fill: currentColor !important;
stroke: currentColor !important;
}
.ccdr-quicklinks .ccdr-ql-title .elementor-heading-title{
margin-top: 12px;
margin-bottom: 0;
color: var(--ccdr-azul) !important;
font-weight: 800 !important;
font-size: 20px !important;
line-height: 1.15;
letter-spacing: .2px;
transition: color .2s ease;
font-family: var(--ccdr-font) !important;
}
.ccdr-quicklinks .ccdr-ql-card:hover .ccdr-ql-title .elementor-heading-title{
color: var(--ccdr-verde) !important;
}
.ccdr-quicklinks .ccdr-ql-card:focus-visible{
outline: 3px solid var(--ccdr-celeste);
outline-offset: 3px;
}
/* =========================================================
QUICK LINKS – SOLO CAMBIO DE COLOR (sin alterar líneas)
Azul normal / Verde hover
========================================================= */
.ccdr-quicklinks .ccdr-ql-icon,
.ccdr-quicklinks .ccdr-ql-icon .elementor-icon{
color: var(--ccdr-azul) !important;
transition: color .2s ease;
}
.ccdr-quicklinks .ccdr-ql-card:hover .ccdr-ql-icon,
.ccdr-quicklinks .ccdr-ql-card:hover .ccdr-ql-icon .elementor-icon{
color: var(--ccdr-verde) !important;
}
/* SOLO recolorea lo que ya tenga stroke definido en el SVG */
.ccdr-quicklinks .ccdr-ql-icon svg [stroke],
.ccdr-quicklinks .ccdr-ql-icon .elementor-icon svg [stroke]{
stroke: currentColor !important;
}
/* SOLO recolorea lo que ya tenga fill definido en el SVG */
.ccdr-quicklinks .ccdr-ql-icon svg [fill],
.ccdr-quicklinks .ccdr-ql-icon .elementor-icon svg [fill]{
fill: currentColor !important;
}
/* =========================================================
8) QUITAR FRANJA / TITLEBAR DEL TEMA (EGOVENZ)
========================================================= */
.page-title-wrap,
.page-header,
.page-title-area,
.page-banner,
.inner-banner,
.inner-header,
.breadcrumb-area,
.breadcrumbs-area,
.section-title,
.section-bg,
.section-bg-dark{
background: transparent !important;
background-image: none !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
.page-title-wrap h1,
.page-header h1{
display: none !important;
}
/* Pseudo-elementos que meten degradado */
.inner-banner::before,
.inner-banner::after,
.page-title-area::before,
.page-title-area::after,
.page-header::before,
.page-header::after{
display: none !important;
}
/* =========================================================
9) ACORDEÓN CCDRSJ (Nested Accordion e-n-*)
Clase en widget: ccdr-accordion
Hover: azul / Activo: verde
========================================================= */
.ccdr-accordion{
--acc-radius: 8px;
--acc-hover: rgba(38, 185, 121, .98); /* Verde activo */
--acc-active: rgba(0, 51, 102, .95); /* Azul hover */
--acc-text: var(--ccdr-azul, #003366);
font-family: var(--ccdr-font);
}
.ccdr-accordion .e-n-accordion{
border-radius: var(--acc-radius) !important;
overflow: hidden !important;
background: #ffffff !important;
}
.ccdr-accordion .e-n-accordion-item{
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ccdr-accordion summary.e-n-accordion-item-title{
font-family: inherit !important;
font-size: inherit !important;
font-weight: 800 !important; /* más “fuerte” */
color: var(--acc-text) !important;
background: #ffffff !important;
padding: 18px 20px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
transition: background-color .18s ease, color .18s ease;
}
.ccdr-accordion summary.e-n-accordion-item-title::-webkit-details-marker{ display:none !important; }
.ccdr-accordion summary.e-n-accordion-item-title::marker{ content: "" !important; }
.ccdr-accordion .e-n-accordion-item-title-header{ order: 1 !important; flex: 1 1 auto !important; }
.ccdr-accordion .e-n-accordion-item-title-icon{
order: 2 !important;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* SVG del acordeón (encapsulado) */
.ccdr-accordion svg,
.ccdr-accordion svg *{
fill: currentColor !important;
stroke: currentColor !important;
}
.ccdr-accordion .e-n-accordion-item-title-icon,
.ccdr-accordion .e-n-accordion-item-title-icon *{
color: var(--acc-text) !important;
opacity: 1 !important;
}
.ccdr-accordion summary.e-n-accordion-item-title:hover{
background: var(--acc-hover) !important;
color: #ffffff !important;
}
.ccdr-accordion summary.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon,
.ccdr-accordion summary.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon *{
color:#ffffff !important;
}
.ccdr-accordion details[open] > summary.e-n-accordion-item-title{
background: var(--acc-active) !important;
color: #ffffff !important;
}
.ccdr-accordion details[open] > summary.e-n-accordion-item-title .e-n-accordion-item-title-icon,
.ccdr-accordion details[open] > summary.e-n-accordion-item-title .e-n-accordion-item-title-icon *{
color:#ffffff !important;
}
.ccdr-accordion .e-n-accordion-item-content{
font-family: inherit !important;
font-size: inherit !important;
padding: 16px 20px 20px !important;
background: #ffffff !important;
color: #333333 !important;
}
.ccdr-accordion summary.e-n-accordion-item-title:focus-visible{
outline: 3px solid var(--ccdr-celeste, #3499CC) !important;
outline-offset: 3px !important;
border-radius: 8px !important;
}
/* =========================================================
8) DOC CARDS – Tarjetas de documentos (Acordeón Presupuesto)
Estructura (Elementor):
.ccdr-docs
└─ .ccdr-docs-grid
└─ .ccdr-doc-card (poné aquí el enlace del PDF en Elementor)
├─ (Widget Imagen) class="ccdr-doc-icon"
└─ (Widget Heading) class="ccdr-doc-title"
========================================================= */
.ccdr-docs{
--doc-icon-color: #CC3399; /* Magenta */
--doc-text-color: #003366; /* Azul CCDRSJ */
--doc-radius: var(--radius-lg);
}
/* GRID: 5 TARJETAS */
/* GRID: aplicar a contenedor y al wrapper interno de Elementor */
.ccdr-docs-grid,
.ccdr-docs-grid > .e-con-inner{
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 18px !important;
}
@media (min-width: 1200px){
.ccdr-docs-grid,
.ccdr-docs-grid > .e-con-inner{
grid-template-columns: repeat(5, minmax(200px, 1fr)) !important;
}
}
/* Responsive */
@media (max-width: 1200px){
.ccdr-docs-grid,
.ccdr-docs-grid > .e-con-inner{
grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
}
}
@media (max-width: 992px){
.ccdr-docs-grid,
.ccdr-docs-grid > .e-con-inner{
grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
}
}
@media (max-width: 680px){
.ccdr-docs-grid,
.ccdr-docs-grid > .e-con-inner{
grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
}
}
@media (max-width: 420px){
.ccdr-docs-grid,
.ccdr-docs-grid > .e-con-inner{
grid-template-columns: 1fr !important;
}
}
/* Responsive */
@media (max-width: 1200px){
.ccdr-docs-grid{ grid-template-columns: repeat(4, minmax(150px, 1fr)); }
}
@media (max-width: 992px){
.ccdr-docs-grid{ grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}
@media (max-width: 680px){
.ccdr-docs-grid{ grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 420px){
.ccdr-docs-grid{ grid-template-columns: 1fr; }
}
/* TARJETA */
.ccdr-doc-card{
position: relative;
background: #fff;
border-radius: var(--doc-radius);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
padding: 26px 16px;
min-height: 260px;
/* 👉 CONTROL DE ANCHO DE LA TARJETA */
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
text-align: center;
cursor: pointer;
overflow: hidden;
transition: transform .28s ease, box-shadow .28s ease;
display: flex;
flex-direction: column;
}
/* Hover */
.ccdr-doc-card:hover{
transform: translateY(-6px);
box-shadow: 0 16px 36px rgba(0,0,0,.12);
}
/* Capa gris (de arriba hacia abajo) */
.ccdr-doc-card::before{
content:"";
position:absolute;
inset: 0;
background: rgba(0,0,0,.05);
transform: translateY(-100%);
transition: transform .55s ease;
z-index: 0;
}
.ccdr-doc-card:hover::before{ transform: translateY(0); }
.ccdr-doc-card > *{
position: relative;
z-index: 1;
}
/* ICONO (imagen en blanco/negro → coloreada por CSS) */
.ccdr-doc-icon{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 12px;
}
.ccdr-doc-icon img{
width: 160px !important; /* MÁS GRANDE */
max-width: 160px !important;
height: auto !important;
display: block;
margin: 0 auto;
transition: transform .28s ease;
filter: brightness(0) saturate(100%)
invert(28%) sepia(64%) saturate(2634%)
hue-rotate(305deg) brightness(92%) contrast(102%);
}
.ccdr-doc-card:hover .ccdr-doc-icon img{
transform: scale(1.06);
}
/* SVG inline (si usás SVG pegado como código) */
.ccdr-doc-icon svg,
.ccdr-doc-icon svg *{
fill: var(--doc-icon-color) !important;
stroke: var(--doc-icon-color) !important;
}
/* TÍTULO (compatible con Elementor Heading) */
.ccdr-doc-title,
.ccdr-doc-title .elementor-heading-title{
margin: 0 !important;
font-family: var(--ccdr-font) !important;
font-weight: 900 !important;
font-size: 16px !important;
line-height: 1.15 !important;
color: var(--doc-text-color) !important;
letter-spacing: .2px;
text-align: center;
}
/* Clamp 2 líneas SOLO al texto real del heading (Elementor) */
.ccdr-doc-title .elementor-heading-title{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Empuja el título hacia la parte inferior de la tarjeta */
.ccdr-doc-title{
margin-top: auto !important;
padding-top: 12px;
}
/* =========================================================
Contenedor general del bloque de leyes en MARCO NORMATIVO
========================================================= */
/* Normaliza tipografía dentro del bloque de marco normativo */
.ccdr-accordion-laws,
.ccdr-accordion-laws * {
font-size: 0.95rem;
line-height: 1.55;
font-weight: 400;
}
/* Contenedor general */
.ccdr-accordion-laws {
padding: 0.75rem 0.5rem 1rem;
}
/* Lista */
.ccdr-accordion-law-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
/* Tarjeta */
.ccdr-law-card {
background: rgba(0, 51, 102, 0.05);
border-radius: 12px;
padding: 0.65rem 0.85rem;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(0, 51, 102, 0.12);
cursor: pointer;
transition: 0.18s ease-in-out;
}
/* Hover */
.ccdr-law-card:hover {
background: rgba(0, 153, 204, 0.08);
border-color: rgba(0, 51, 102, 0.28);
}
/* Título de ley */
.ccdr-law-title {
font-weight: 600; /* título un poco más fuerte */
color: #003366;
flex: 1;
margin-right: 0.5rem;
}
/* Bullet institucional */
.ccdr-law-title::before {
content: "● ";
color: #26B979;
font-size: 0.9rem;
}
/* Icono externo */
.ccdr-law-icon {
width: 18px; /* tamaño final corregido */
height: auto; /* evita deformar el SVG */
opacity: 0.72;
transition: 0.18s ease-in-out;
}
/* Hover icon */
.ccdr-law-card:hover .ccdr-law-icon {
opacity: 1;
}
/* Descripción bajo las leyes (cuando se use) */
.ccdr-accordion-description {
margin-top: 0.75rem;
font-size: 0.95rem;
line-height: 1.6;
color: #333333;
font-weight: 400;
}
/* =========================================================
CCDRSJ | Medallero JDN - Tarjetas de medallas (AJUSTADO FINAL)
---------------------------------------------------------
Ajustes incluidos:
- Monocromático por tarjeta (texto + CTA + label + SVG)
========================================================= */
/* -------------------------
1) CONTENEDOR DE SECCIÓN
------------------------- */
.ccdrsj-medallero{
max-width: 1100px;
margin: 0 auto;
padding: 56px 18px;
text-align: center;
}
/* -------------------------
2) GRID DE TARJETAS
------------------------- */
.ccdrsj-cards{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
align-items: stretch;
}
/* -------------------------
3) TARJETA BASE
------------------------- */
.ccdrsj-card{
display: block;
background: #fff;
border: 1px solid #E9EEF5;
border-radius: 16px;
padding: 26px 22px 20px;
/* Importante: neutraliza estilos del tema sobre enlaces */
text-decoration: none !important;
box-shadow: 0 10px 22px rgba(0,0,0,.06);
transition: transform .18s ease, box-shadow .18s ease;
position: relative;
min-height: 320px;
/* Color base (luego se sobrescribe por medalla: oro/plata/bronce) */
color: #1C2B39;
}
/* Hover: levanta tarjeta (la sombra se define por medalla abajo) */
.ccdrsj-card:hover{
transform: translateY(-6px);
}
/* Ícono (SVG en ![]()
) */
.ccdrsj-card__icon{
width: 88px;
height: auto;
margin: 6px auto 14px;
display: block;
transition: filter .18s ease;
}
/* Texto ORO / PLATA / BRONCE */
.ccdrsj-card__name{
font-weight: 800;
letter-spacing: 1px;
font-size: 30px;
margin-bottom: 10px;
/* Hereda el color de la tarjeta (monocromo) */
color: inherit !important;
}
/* Número grande */
.ccdrsj-card__num{
font-weight: 900;
font-size: 72px;
line-height: 1;
margin: 10px 0 6px;
/* Hereda el color de la tarjeta (monocromo) */
color: inherit !important;
}
/* Etiqueta “MEDALLAS” */
.ccdrsj-card__label{
font-weight: 700;
letter-spacing: 2px;
font-size: 14px;
opacity: .95;
margin-bottom: 18px;
/* Clave: nunca verde/negro del tema */
color: inherit !important;
}
/* CTA inferior */
.ccdrsj-card__cta{
font-weight: 700;
font-size: 16px;
margin-top: auto;
opacity: .95;
/* Clave: nunca verde/negro del tema */
color: inherit !important;
}
/* -------------------------
4) LÍNEA INFERIOR DE COLOR
------------------------- */
.ccdrsj-card::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height: 6px;
border-radius: 0 0 16px 16px;
}
/* -------------------------
5) COLORES POR MEDALLA (MONOCROMO)
Nota: usamos color en la tarjeta para que TODO herede igual
------------------------- */
/* 🥇 ORO */
.ccdrsj-card.is-gold{
color:#C9A227;
}
.ccdrsj-card.is-gold::after{
background:#C9A227;
}
/* Tinte del SVG (porque es ![]()
y no inline svg) */
.ccdrsj-card.is-gold .ccdrsj-card__icon{
filter: invert(63%) sepia(65%) saturate(473%) hue-rotate(6deg) brightness(92%) contrast(90%);
}
/* Hover: sombra dorada + mantener color (anti-theme) */
.ccdrsj-card.is-gold:hover{
box-shadow: 0 16px 34px rgba(201,162,39,.35);
}
.ccdrsj-card.is-gold:hover,
.ccdrsj-card.is-gold:hover *{
color:#C9A227 !important;
}
/* 🥈 PLATA */
.ccdrsj-card.is-silver{
color:#8A96A3;
}
.ccdrsj-card.is-silver::after{
background:#8A96A3;
}
.ccdrsj-card.is-silver .ccdrsj-card__icon{
filter: invert(64%) sepia(8%) saturate(220%) hue-rotate(169deg) brightness(90%) contrast(88%);
}
.ccdrsj-card.is-silver:hover{
box-shadow: 0 16px 34px rgba(138,150,163,.35);
}
.ccdrsj-card.is-silver:hover,
.ccdrsj-card.is-silver:hover *{
color:#8A96A3 !important;
}
/* 🥉 BRONCE */
.ccdrsj-card.is-bronze{
color:#B06A3B;
}
.ccdrsj-card.is-bronze::after{
background:#B06A3B;
}
.ccdrsj-card.is-bronze .ccdrsj-card__icon{
filter: invert(47%) sepia(27%) saturate(706%) hue-rotate(345deg) brightness(93%) contrast(91%);
}
.ccdrsj-card.is-bronze:hover{
box-shadow: 0 16px 34px rgba(176,106,59,.35);
}
.ccdrsj-card.is-bronze:hover,
.ccdrsj-card.is-bronze:hover *{
color:#B06A3B !important;
}
/* -------------------------
6) RESPONSIVE
------------------------- */
@media (max-width: 900px){
.ccdrsj-cards{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 580px){
.ccdrsj-cards{
grid-template-columns: 1fr;
}
.ccdrsj-card{
min-height: 300px;
}
}
/* =========================================================
CCDRSJ | JDN – Acordeón Elementor (más cercano al mockup)
---------------------------------------------------------
Uso:
- Clase en el widget Acordeón:
ccdrsj-jdn-accordion is-gold / is-silver / is-bronze
- En el título del acordeón usar:
🏃 Atletismo
5 medallas
- En el botón de medalla usar clase:
ccdrsj-medal-badge
========================================================= */
/* =========================================================
1) VARIABLES POR MEDALLA
========================================================= */
.ccdrsj-jdn-accordion.is-gold{ --m:#C9A227; --mbg:rgba(201,162,39,.12); }
.ccdrsj-jdn-accordion.is-silver{ --m:#8A96A3; --mbg:rgba(138,150,163,.12); }
.ccdrsj-jdn-accordion.is-bronze{ --m:#B06A3B; --mbg:rgba(176,106,59,.12); }
/* =========================================================
2) CONTENEDOR GENERAL
========================================================= */
.ccdrsj-jdn-accordion{
max-width: 980px;
margin: 0 auto;
/* NO imponemos fuente: toma la del sitio */
font-family: inherit;
}
/* =========================================================
3) ITEM (TARJETA) + SOMBRA TIPO MOCKUP
========================================================= */
.ccdrsj-jdn-accordion .elementor-accordion-item{
background: #fff;
border: 1px solid #E9EEF5;
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
/* Sombra más visible tipo mockup */
box-shadow: 0 14px 28px rgba(16,24,40,.08);
}
/* =========================================================
4) CABECERA DEL ACORDEÓN (TÍTULO)
========================================================= */
.ccdrsj-jdn-accordion .elementor-tab-title{
background: #fff;
padding: 18px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
/* tipografía del sitio, solo reforzamos peso/tamaño */
font-weight: 900;
font-size: 22px;
color: #1C2B39;
border-bottom: 2px solid rgba(0,0,0,.06);
}
/* Icono + / − de Elementor */
.ccdrsj-jdn-accordion .elementor-accordion-icon{
color: var(--m);
}
/* Nuestro bloque “icono + disciplina” */
.ccdrsj-jdn-accordion .ccdrsj-disc-title{
display: inline-flex;
align-items: center;
gap: 12px;
}
/* Icono a la izquierda del título */
.ccdrsj-jdn-accordion .ccdrsj-disc-ico{
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #F6F9FC;
border: 1px solid #EEF3F8;
color: var(--m);
font-size: 18px;
line-height: 1;
}
/* =========================================================
5) PILL “X MEDALLAS” (alineado derecha)
========================================================= */
.ccdrsj-jdn-accordion .ccdrsj-pill{
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 900;
padding: 6px 12px;
border-radius: 999px;
background: var(--mbg);
border: 1px solid rgba(0,0,0,.08);
color: var(--m);
white-space: nowrap;
}
/* =========================================================
6) CONTENIDO
========================================================= */
.ccdrsj-jdn-accordion .elementor-tab-content{
background: #fff;
padding: 18px 18px 16px;
color: #3B4A5A;
font-size: 16px;
line-height: 1.6;
}
/* =========================================================
7) FILA DE DEPORTISTA (Elementor Containers)
Clases requeridas:
- ccdrsj-athlete-row
- ccdrsj-athlete-photo
- ccdrsj-athlete-text
- ccdrsj-medal-badge (en el botón)
========================================================= */
.ccdrsj-jdn-accordion .ccdrsj-athlete-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 0;
border-top: 1px solid #EEF3F8;
}
.ccdrsj-jdn-accordion .ccdrsj-athlete-row:first-child{
border-top: none;
}
/* Avatar */
.ccdrsj-jdn-accordion .ccdrsj-athlete-photo img{
width: 56px;
height: 56px;
border-radius: 999px;
object-fit: cover;
border: 3px solid rgba(0,0,0,.06);
background: #F6F9FC;
}
/* Texto */
.ccdrsj-jdn-accordion .ccdrsj-athlete-text{
flex: 1;
min-width: 0;
}
/* Nombre (no azul, no enorme) */
.ccdrsj-jdn-accordion .ccdrsj-athlete-text .elementor-heading-title{
margin: 0;
font-weight: 900;
font-size: 18px;
line-height: 1.2;
color: #1C2B39;
}
/* Prueba */
.ccdrsj-jdn-accordion .ccdrsj-athlete-text .elementor-widget-text-editor{
margin: 4px 0 0;
color: #6B7A89;
font-size: 14px;
}
/* =========================================================
8) BADGE “🏅 ORO” (que no parezca botón, sin hover verde/azul)
========================================================= */
.ccdrsj-jdn-accordion .ccdrsj-medal-badge .elementor-button{
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--mbg);
color: var(--m);
border: 1px solid rgba(0,0,0,.08);
border-radius: 999px;
padding: 8px 12px;
font-weight: 900;
font-size: 14px;
/* para que NO se vea como botón “clickeable” */
box-shadow: none;
cursor: default;
}
/* Anula efectos hover del tema (verde/azul) */
.ccdrsj-jdn-accordion .ccdrsj-medal-badge .elementor-button:hover,
.ccdrsj-jdn-accordion .ccdrsj-medal-badge .elementor-button:focus{
background: var(--mbg);
color: var(--m);
box-shadow: none;
}
/* Quita subrayados o estilos del tema */
.ccdrsj-jdn-accordion .ccdrsj-medal-badge .elementor-button,
.ccdrsj-jdn-accordion .ccdrsj-medal-badge .elementor-button:visited{
text-decoration: none;
}
/* =========================================================
CCDRSJ – Estructura Organizacional (EO)
CSS FINAL UNIFICADO – AJUSTADO
========================================================= */
/* ---------------- Variables institucionales ---------------- */
:root{
--eo-navy:#003366;
--eo-green:#26B979; /* Verde institucional */
--eo-muted:#6b7280;
--eo-line:#e6e9ef;
}
/* ---------------- Layout principal ---------------- */
.eo-block{
display:flex !important;
align-items:center !important;
gap:6px !important;
padding:22px 0 !important;
}
/* ---------------- Columna del icono ---------------- */
.eo-icon{
flex:0 0 76px !important;
max-width:76px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
/* Icon widget (Elementor) */
.eo-icon .elementor-icon i{
font-size:125px !important;
line-height:1 !important;
color:var(--eo-navy) !important;
}
/* SVG del widget Icon */
.eo-icon .elementor-icon svg{
width:125px !important;
height:125px !important;
}
/* Asegurar color azul en SVG */
.eo-icon .elementor-icon svg,
.eo-icon .elementor-icon svg *{
fill:var(--eo-navy) !important;
stroke:var(--eo-navy) !important;
}
/* ---------------- Contenido ---------------- */
/* TÍTULO: misma fuente del texto, más grande y azul */
.eo-content .elementor-heading-title{
color:var(--eo-navy) !important;
font-weight:600 !important; /* menos pesado */
font-size:1.35rem !important; /* más grande que el texto */
margin:0 0 6px 0 !important;
font-family:inherit !important; /* usa la misma tipografía del texto */
}
.eo-content .elementor-widget-text-editor,
.eo-content .elementor-widget-text-editor p{
color:var(--eo-muted) !important;
margin:0 !important;
line-height:1.55 !important;
}
/* ---------------- Acciones (enlaces) ---------------- */
.eo-actions{
display:flex !important;
gap:14px !important;
align-items:center !important;
margin-top:2px !important;
}
/* Estilo base de los enlaces */
.eo-actions .elementor-button,
.eo-actions .elementor-button-wrapper .elementor-button{
background:transparent !important;
background-image:none !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
border-radius:0 !important;
color:var(--eo-navy) !important;
font-weight:700 !important;
text-decoration:none !important;
transition:color .15s ease-in-out !important;
}
/* Hover: SOLO cambia el color del texto a verde */
.eo-actions a:hover,
.eo-actions .elementor-button:hover{
color:var(--eo-green) !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
text-decoration:none !important;
}
/* Quitar borde explícitamente a "Descargar PDF" */
.eo-download .elementor-button{
border:none !important;
padding:0 !important;
}
/* ---------------- Separador ---------------- */
.eo-divider{
margin:10px 0 !important;
padding:0 !important;
}
.eo-divider .elementor-divider-separator{
border-top:1px solid var(--eo-line) !important;
}
/* ---------------- Responsive móvil ---------------- */
@media (max-width: 767px){
.eo-block{
flex-direction:column !important;
gap:10px !important;
padding:18px 0 !important;
}
.eo-icon{
flex:0 0 auto !important;
max-width:none !important;
}
.eo-icon .elementor-icon i{
font-size:100px !important;
}
.eo-icon .elementor-icon svg{
width:100px !important;
height:100px !important;
}
}
/* =========================================================
CCDRSJ | Misión, Visión y Valores – FINAL (CON CHIPS)
Elementor Free | Sin JS | Tipografía heredada
========================================================= */
:root{
--ccdr-navy:#003366;
--ccdr-green:#26B979;
--ccdr-muted:#6b7280;
--ccdr-card:#ffffff;
/* Chips */
--ccdr-chip-bg:#eef6ff;
--ccdr-chip-border:rgba(0,51,102,.15);
}
/* =========================================================
CONTENEDOR PADRE – 3 TARJETAS GRANDES (UNA SOLA LÍNEA)
========================================================= */
.mv-block{
display:flex !important;
justify-content:center !important;
align-items: stretch !important;
gap: 26px !important;
width: 100% !important;
/* Desktop: 3 juntas */
flex-wrap: nowrap !important;
}
/* =========================================================
TARJETA GRANDE (MISIÓN / VISIÓN / VALORES)
========================================================= */
.mv-card{
background: var(--ccdr-card) !important;
border-radius: 16px !important;
padding: 26px !important;
border: 1px solid rgba(0,0,0,.04) !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
text-align: center !important;
/* Tipografía del sitio */
font-family: inherit !important;
/* Layout interno */
display:flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
/* ANCHO PRO */
width: 100% !important;
max-width: 360px !important;
min-width: 300px !important;
/* Evita que Elementor las comprima */
flex: 0 0 auto !important;
transition: transform .18s ease, box-shadow .18s ease !important;
}
.mv-card:hover{
transform: translateY(-2px) !important;
box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
}
/* =========================================================
ICONO GRANDE (Icon Widget o Imagen)
========================================================= */
.mv-icon{ margin: 0 !important; }
/* Imagen */
.mv-icon img{
width: 56px !important;
height: 56px !important;
object-fit: contain !important;
}
/* Icon widget (svg / i) */
.mv-icon .elementor-icon,
.mv-icon .elementor-icon svg,
.mv-icon i{
width: 56px !important;
height: 56px !important;
font-size: 56px !important;
}
/* Color azul institucional */
.mv-icon .elementor-icon{
color: var(--ccdr-navy) !important;
}
.mv-icon .elementor-icon svg *{
fill: var(--ccdr-navy) !important;
stroke: var(--ccdr-navy) !important;
}
/* =========================================================
TITULO Y TEXTO GRANDES
========================================================= */
.mv-title .elementor-heading-title{
color: var(--ccdr-navy) !important;
font-family: inherit !important;
font-weight: 800 !important;
font-size: 24px !important;
line-height: 1.15 !important;
margin: 0 !important;
}
.mv-text{
color: var(--ccdr-muted) !important;
font-family: inherit !important;
font-size: 14.8px !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.mv-text p{ margin: 0 !important; }
/* =========================================================
CHIPS (para la tarjeta de Valores)
- Contenedor: mv-chips
- Cada chip: mv-chip
========================================================= */
.mv-chips{
display:flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin-top: 8px !important;
width: 100% !important;
}
.mv-chip{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding: 8px 14px !important;
border-radius: 999px !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: var(--ccdr-navy) !important;
background: var(--ccdr-chip-bg) !important;
border: 1px solid var(--ccdr-chip-border) !important;
transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}
.mv-chip:hover{
background: rgba(38,185,121,.14) !important;
border-color: rgba(38,185,121,.35) !important;
transform: translateY(-1px) !important;
}
/* =========================================================
TARJETAS DE ABAJO (VALORES EN ACCIÓN) – 4 POR FILA EN PC
========================================================= */
.mva-grid{
display:grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 4 por fila */
gap: 18px !important;
width: 100% !important;
align-items: stretch !important;
}
/* Tarjeta pequeña */
.mva-card{
background: var(--ccdr-card) !important;
border-radius: 16px !important;
padding: 18px !important;
border: 1px solid rgba(0,0,0,.04) !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
text-align:center !important;
font-family: inherit !important;
display:flex !important;
flex-direction: column !important;
align-items:center !important;
justify-content: flex-start !important;
gap: 8px !important;
/* Quita límites que estorbaban el grid */
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
/* Icono pequeño */
.mva-icon img{
width: 44px !important;
height: 44px !important;
object-fit: contain !important;
}
.mva-icon .elementor-icon,
.mva-icon .elementor-icon svg,
.mva-icon i{
width: 44px !important;
height: 44px !important;
font-size: 44px !important;
}
/* Azul institucional */
.mva-icon .elementor-icon{ color: var(--ccdr-navy) !important; }
.mva-icon .elementor-icon svg *{
fill: var(--ccdr-navy) !important;
stroke: var(--ccdr-navy) !important;
}
/* Título pequeño */
.mva-title .elementor-heading-title{
color: var(--ccdr-navy) !important;
font-family: inherit !important;
font-weight: 800 !important;
font-size: 16px !important;
margin: 0 !important;
}
/* Texto pequeño */
.mva-text{
color: var(--ccdr-muted) !important;
font-family: inherit !important;
font-size: 13.6px !important;
line-height: 1.55 !important;
margin: 0 !important;
}
.mva-text p{ margin: 0 !important; }
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1024px){
/* 3 tarjetas grandes ya pueden bajar */
.mv-block{ flex-wrap: wrap !important; }
.mv-card{ max-width: 380px !important; }
/* valores en acción: 2 por fila */
.mva-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 640px){
.mv-card{
max-width: 100% !important;
min-width: 0 !important;
}
/* valores en acción: 1 por fila */
.mva-grid{
grid-template-columns: 1fr !important;
}
}
/* =========================================================
CCDRSJ – Evolución del Logo - Sección Información Institucional
========================================================= */
.ccdr-evo{
--navy:#003366;
--green-soft:#e8f6ef;
--green-soft-strong:#dff2e8;
--gray:#6b7280;
--line:#e5e7eb;
}
/* ===============================
Timeline contenedor principal
=============================== */
.ccdr-evo-timeline{
background:#ffffff !important;
padding:28px !important;
border-radius:22px !important;
box-shadow:0 14px 32px rgba(0,0,0,.06) !important;
position:relative !important;
overflow:visible !important;
}
/* Línea horizontal sutil */
.ccdr-evo-timeline::before{
content:"" !important;
position:absolute !important;
left:28px !important;
right:28px !important;
top:56% !important;
height:2px !important;
background:var(--line) !important;
z-index:0 !important;
}
/* ===============================
Items del timeline
=============================== */
.ccdr-evo-item{
position:relative !important;
z-index:2 !important;
text-align:center !important;
}
/* Imagen del logo */
.ccdr-evo-item .elementor-widget-image img{
max-width:170px !important;
height:auto !important;
background:#ffffff !important;
padding:16px !important;
border-radius:16px !important;
display:block !important;
margin:0 auto !important;
}
/* ===============================
Chips (años) – centrado PERFECTO
=============================== */
.ccdr-evo-chip{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background:var(--green-soft) !important;
color:var(--navy) !important;
height:38px !important; /* altura fija */
padding:0 18px !important; /* solo horizontal */
border-radius:999px !important;
font-family: inherit !important;
font-size:14px !important;
font-weight:600 !important;
line-height:38px !important; /* CLAVE: centra vertical */
white-space:nowrap !important;
margin-top:10px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:3 !important;
}
/* Chip histórico (tip fino) */
.ccdr-evo-chip.is-historic{
background:#f1f5f9 !important;
color:#475569 !important;
}
/* Item actual (2025) */
.ccdr-evo-item.current .ccdr-evo-chip{
background:var(--green-soft-strong) !important;
color:var(--navy) !important;
}
/* Logo actual */
.ccdr-evo-item.current .elementor-widget-image img{
box-shadow:0 14px 30px rgba(38,185,121,.35) !important;
}
/* ===============================
Contenedores de texto inferiores
=============================== */
.ccdr-evo-texts{
margin-top:12px !important;
}
.ccdr-evo-box{
background:#ffffff !important;
padding:26px !important;
border-radius:20px !important;
box-shadow:0 12px 26px rgba(0,0,0,.05) !important;
}
.ccdr-evo-box .elementor-heading-title{
color:var(--navy) !important;
font-weight:700 !important;
margin-bottom:8px !important;
}
.ccdr-evo-box .elementor-widget-text-editor{
color:#4b5563 !important;
line-height:1.6 !important;
}
/* ===============================
Responsive
=============================== */
@media (max-width:768px){
.ccdr-evo-timeline{
flex-direction:column !important;
}
.ccdr-evo-timeline::before{
display:none !important;
}
}
/* =========================================================
CCDRSJ | JDN – Sección Juegos Deportivos Nacionales
Scope: .ccdrsj-jdn
========================================================= */
/* =========================================================
CCDRSJ | JDN – CSS COMPLETO (FULL WIDTH + números más gordos + spacing compacto)
Scope: .ccdrsj-jdn
========================================================= */
.ccdrsj-jdn{
--navy:#003366;
--green:#26B979;
--line:#E9EEF5;
--muted:#6b7280;
--radius:16px;
--cardRadius:16px;
--shadowBase:0 10px 22px rgba(0,0,0,.06);
--gold:#C9A227;
--silver:#8A96A3;
--bronze:#B06A3B;
font-family: inherit !important;
color: inherit;
}
.ccdrsj-jdn, .ccdrsj-jdn *{ font-family: inherit !important; }
.ccdrsj-jdn a{ color: inherit !important; text-decoration:none !important; }
.ccdrsj-jdn a:hover{ color: inherit !important; text-decoration:none !important; }
/* =========================
FULL WIDTH FIX (Elementor)
========================= */
.ccdrsj-jdn .jdn-medals-wrap{
width:100% !important;
max-width:100% !important;
}
.ccdrsj-jdn .jdn-medals-wrap,
.ccdrsj-jdn .jdn-medals-wrap > .elementor-container,
.ccdrsj-jdn .jdn-medals-wrap > .elementor-container > .elementor-row,
.ccdrsj-jdn .jdn-medals-wrap .elementor-widget-wrap,
.ccdrsj-jdn .jdn-medals-wrap .e-con,
.ccdrsj-jdn .jdn-medals-wrap .e-con-inner{
width:100% !important;
max-width:100% !important;
flex: 0 0 100% !important;
}
/* =========================
Acordeón
========================= */
.ccdrsj-jdn .ccdr-accordion .e-n-accordion{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius: var(--radius) !important;
overflow:hidden !important;
box-shadow: var(--shadowBase) !important;
}
.ccdrsj-jdn .ccdr-accordion summary.e-n-accordion-item-title{
background:#fff !important;
color: var(--navy) !important;
border:1px solid #dbe2ea !important;
border-radius:14px !important;
margin:0 0 10px 0 !important;
padding:18px 20px !important;
font-weight:900 !important;
font-size:18px !important;
line-height:1.2 !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
box-shadow:0 6px 16px rgba(0,0,0,.06) !important;
transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ccdrsj-jdn .ccdr-accordion summary.e-n-accordion-item-title::-webkit-details-marker{ display:none !important; }
.ccdrsj-jdn .ccdr-accordion summary.e-n-accordion-item-title::marker{ content:"" !important; }
.ccdrsj-jdn .ccdr-accordion .e-n-accordion-item-title-icon,
.ccdrsj-jdn .ccdr-accordion .e-n-accordion-item-title-icon *{ color: var(--navy) !important; opacity:1 !important; }
.ccdrsj-jdn .ccdr-accordion summary.e-n-accordion-item-title:hover{
background: rgba(38,185,121,.92) !important;
color:#fff !important;
transform: translateY(-1px) !important;
box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
}
.ccdrsj-jdn .ccdr-accordion summary.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon,
.ccdrsj-jdn .ccdr-accordion summary.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon *{ color:#fff !important; }
.ccdrsj-jdn .ccdr-accordion details[open] > summary.e-n-accordion-item-title{
position:relative !important;
background: rgba(0,51,102,.98) !important;
color:#fff !important;
}
.ccdrsj-jdn .ccdr-accordion details[open] > summary.e-n-accordion-item-title::before{
content:"";
position:absolute; left:0; top:0; bottom:0;
width:6px; background: var(--green);
border-radius:14px 0 0 14px;
}
.ccdrsj-jdn .ccdr-accordion details[open] > summary.e-n-accordion-item-title .e-n-accordion-item-title-icon,
.ccdrsj-jdn .ccdr-accordion details[open] > summary.e-n-accordion-item-title .e-n-accordion-item-title-icon *{ color:#fff !important; }
.ccdrsj-jdn .ccdr-accordion .e-n-accordion-item-content{
background:#fff !important;
padding:18px 20px 20px !important;
color:#333 !important;
}
/* =========================
Header interno del año
========================= */
.ccdrsj-jdn .jdn-yearhead{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:14px !important;
padding:16px !important;
display:flex !important;
align-items:center !important;
gap:16px !important;
box-shadow: var(--shadowBase) !important;
position: relative !important;
}
.ccdrsj-jdn .jdn-yearhead::after{
content:"";
position:absolute;
left:16px; right:16px;
bottom:-12px;
height:1px;
background: var(--line);
}
.ccdrsj-jdn .jdn-year,
.ccdrsj-jdn .jdn-year *{
margin:0 !important;
font-weight:900 !important;
font-size:44px !important;
line-height:1 !important;
color: var(--navy) !important;
}
.ccdrsj-jdn .jdn-yearmeta{ display:flex !important; align-items:center !important; gap:12px !important; }
.ccdrsj-jdn .jdn-yearicon,
.ccdrsj-jdn .jdn-yearicon *{ color: var(--green) !important; }
.ccdrsj-jdn .jdn-yearlabel,
.ccdrsj-jdn .jdn-yearlabel *{
color: var(--navy) !important;
font-weight:900 !important;
font-size:18px !important;
margin:0 !important;
}
.ccdrsj-jdn .jdn-yeardesc{
margin:18px 2px 0 !important;
color: var(--muted) !important;
font-size: 15.5px !important;
line-height: 1.45 !important;
}
/* =========================================================
MEDALLERO – cambios pedidos
- Número más gordo
- Menos espacio icono->nombre y nombre->número
========================================================= */
.ccdrsj-jdn .jdn-medals{
width:100% !important;
max-width:100% !important;
display:grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap:22px !important;
align-items: stretch !important;
}
@media (max-width: 900px){
.ccdrsj-jdn .jdn-medals{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 580px){
.ccdrsj-jdn .jdn-medals{ grid-template-columns: 1fr !important; }
}
.ccdrsj-jdn .jdn-card{
display:flex !important;
flex-direction: column !important;
align-items:center !important;
width:100% !important;
background:#fff !important;
border: 2px solid var(--line) !important;
border-radius: var(--cardRadius) !important;
padding: 24px 22px 18px !important;
box-shadow: var(--shadowBase) !important;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
position:relative !important;
min-height: 320px !important;
text-decoration:none !important;
color: #1C2B39 !important;
}
.ccdrsj-jdn .jdn-card, .ccdrsj-jdn .jdn-card *{ color: inherit !important; }
.ccdrsj-jdn .jdn-card:hover{ transform: translateY(-6px) !important; }
.ccdrsj-jdn .jdn-card::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height: 6px !important;
border-radius: 0 0 16px 16px;
background: var(--line);
}
/* ICONO: reduce espacio con el nombre (antes 12px) */
.ccdrsj-jdn .jdn-medal-icon{
width: 96px !important;
margin: 4px auto 6px !important; /* ↓ menos aire debajo */
display:block !important;
}
.ccdrsj-jdn .jdn-card .elementor-icon{
font-size: 96px !important;
line-height:1 !important;
margin: 4px auto 6px !important; /* ↓ menos aire */
}
.ccdrsj-jdn .jdn-card .elementor-icon svg{
width:96px !important;
height:96px !important;
}
/* NOMBRE: reduce aire hacia el número */
.ccdrsj-jdn .jdn-medal-name{
font-weight: 800 !important;
letter-spacing: 1px !important;
font-size: 30px !important;
margin: 0 0 2px !important; /* ↓ menos espacio */
line-height: 1.02 !important; /* ↓ compacto */
text-transform: uppercase !important;
}
/* 🔥 NÚMERO MÁS GORDO: máxima robustez sin cargar fuentes
- weight 900 (si la fuente no soporta 950, igual se ve)
- text-shadow 0 0 0 currentColor “engorda” visualmente (truco seguro)
- tamaño un poco mayor
*/
.ccdrsj-jdn .jdn-medal-count{
font-size: 92px !important;
line-height: .90 !important;
margin: 0 0 0 !important; /* ↓ elimina aire */
font-weight: 900 !important;
letter-spacing: .03em !important;
font-stretch: expanded;
font-variant-numeric: tabular-nums;
/* Truco para engrosar visualmente sin cambiar fuente */
text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}
/* LABEL: compacto */
.ccdrsj-jdn .jdn-medal-sub{
font-weight: 700 !important;
letter-spacing: 2px !important;
font-size: 14px !important;
opacity: .95 !important;
margin: 2px 0 10px !important; /* ↓ más pegado al número */
line-height: 1.05 !important;
}
/* CTA */
.ccdrsj-jdn .jdn-detail{
font-weight: 700 !important;
font-size: 16px !important;
margin-top: auto !important;
opacity: .95 !important;
}
/* Botón Elementor -> link */
.ccdrsj-jdn .jdn-card .elementor-button{
background: transparent !important;
border: 0 !important;
padding: 0 !important;
min-height: auto !important;
height: auto !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Colores por medalla: texto + borde default + línea + sombra hover */
.ccdrsj-jdn .jdn-gold{ color: var(--gold) !important; border-color: rgba(201,162,39,.55) !important; }
.ccdrsj-jdn .jdn-gold::after{ background: var(--gold) !important; }
.ccdrsj-jdn .jdn-gold:hover{ box-shadow: 0 16px 34px rgba(201,162,39,.35) !important; }
.ccdrsj-jdn .jdn-silver{ color: var(--silver) !important; border-color: rgba(138,150,163,.55) !important; }
.ccdrsj-jdn .jdn-silver::after{ background: var(--silver) !important; }
.ccdrsj-jdn .jdn-silver:hover{ box-shadow: 0 16px 34px rgba(138,150,163,.35) !important; }
.ccdrsj-jdn .jdn-bronze{ color: var(--bronze) !important; border-color: rgba(176,106,59,.55) !important; }
.ccdrsj-jdn .jdn-bronze::after{ background: var(--bronze) !important; }
.ccdrsj-jdn .jdn-bronze:hover{ box-shadow: 0 16px 34px rgba(176,106,59,.35) !important; }
/* =========================================================
CCDRSJ | JDN – TARJETAS KPI INFERIORES (FINAL + CONTROL ICONO)
Scope: .ccdrsj-jdn
========================================================= */
/* =========================================================
0) VARIABLES KPI (AJUSTES RÁPIDOS)
👉 Cambiá SOLO estos valores cuando quieras ajustar
========================================================= */
.ccdrsj-jdn{
--kpi-icon-size: 38px; /* ⬅️ TAMAÑO DEL ÍCONO */
--kpi-padding-y: 8px; /* ⬅️ ALTURA DE LA TARJETA */
--kpi-padding-x: 14px;
--kpi-title-size: 15.5px;
--kpi-value-size: 18px;
}
/* =========================================================
1) CONTENEDOR GENERAL DE KPIs
========================================================= */
.ccdrsj-jdn .jdn-kpis{
margin-top: 18px !important;
display: flex !important;
gap: 14px !important;
flex-wrap: wrap !important;
}
/* =========================================================
2) TARJETA KPI (COMPACTA)
========================================================= */
.ccdrsj-jdn .jdn-kpi{
flex: 1 1 240px !important;
background: #ffffff !important;
border: 1px solid #E6EDF5 !important;
border-radius: 14px !important;
padding: var(--kpi-padding-y) var(--kpi-padding-x) !important;
box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
}
/* =========================================================
3) FILA HORIZONTAL (ICONO + TEXTO)
========================================================= */
.ccdrsj-jdn .jdn-kpi-row{
display: flex !important;
align-items: center !important; /* ⬅️ reduce altura visual */
gap: 12px !important;
}
/* =========================================================
4) ICONO KPI (CONTROL CENTRALIZADO)
========================================================= */
.ccdrsj-jdn .jdn-kpi-icon,
.ccdrsj-jdn .jdn-kpi .elementor-icon{
font-size: var(--kpi-icon-size) !important;
line-height: 1 !important;
flex-shrink: 0 !important;
}
.ccdrsj-jdn .jdn-kpi-icon svg,
.ccdrsj-jdn .jdn-kpi .elementor-icon svg{
width: var(--kpi-icon-size) !important;
height: var(--kpi-icon-size) !important;
}
/* Color institucional forzado */
.ccdrsj-jdn .jdn-kpi-icon,
.ccdrsj-jdn .jdn-kpi-icon *,
.ccdrsj-jdn .jdn-kpi .elementor-icon,
.ccdrsj-jdn .jdn-kpi .elementor-icon *{
color: var(--navy, #003366) !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* =========================================================
5) CONTENEDOR DE TEXTO (COLUMNA)
========================================================= */
.ccdrsj-jdn .jdn-kpi-text{
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 2px !important; /* ⬅️ compacto */
}
/* =========================================================
6) TEXTO SUPERIOR (TÍTULO)
========================================================= */
.ccdrsj-jdn .jdn-kpi-title{
margin: 0 !important;
padding: 0 !important;
font-size: var(--kpi-title-size) !important;
font-weight: 500 !important;
line-height: 1.05 !important;
color: var(--navy, #003366) !important;
}
/* =========================================================
7) TEXTO INFERIOR (VALOR)
========================================================= */
.ccdrsj-jdn .jdn-kpi-value{
margin: 0 !important;
padding: 0 !important;
font-size: var(--kpi-value-size) !important;
font-weight: 900 !important;
line-height: 1.05 !important;
color: var(--navy, #003366) !important;
}
/* =========================================================
8) RESPONSIVE
========================================================= */
@media (max-width: 580px){
.ccdrsj-jdn{
--kpi-icon-size: 34px;
--kpi-title-size: 15px;
--kpi-value-size: 17px;
}
.ccdrsj-jdn .jdn-kpis{
gap: 10px !important;
}
.ccdrsj-jdn .jdn-kpi{
padding: 8px 12px !important;
}
}
/* Responsive */
@media (max-width: 580px){
.ccdrsj-jdn .jdn-card{ min-height: 300px !important; }
.ccdrsj-jdn .jdn-medal-count{ font-size: 78px !important; }
.ccdrsj-jdn .jdn-card .elementor-icon,
.ccdrsj-jdn .jdn-card .elementor-icon svg{
width: 78px !important;
height: 78px !important;
}
}
/* =========================================================
CCDRSJ | Programas Recreativos – CSS FINAL DEFINITIVO
Elementor (sin JS / sin HTML)
========================================================= */
:root{
--ccdr-navy:#003366;
--ccdr-green:#26B979;
--ccdr-text:#111827;
--ccdr-muted:#6b7280;
--ccdr-line:#e5e7eb;
--ccdr-soft:#f3f4f6;
--ccdr-radius:14px;
}
/* =========================
GRID
========================= */
.ccdr-prog-grid{
display:flex !important;
flex-wrap:wrap !important;
gap:24px !important;
}
/* =========================
TARJETA
========================= */
.ccdr-prog-card{
flex:0 0 calc(50% - 12px) !important;
display:flex !important;
flex-direction:column !important;
background:#fff !important;
border:1px solid var(--ccdr-line) !important;
border-radius:var(--ccdr-radius) !important;
box-shadow:0 6px 18px rgba(0,0,0,.06) !important;
overflow:hidden !important;
}
/* =========================
TOP (imagen + textos)
========================= */
.ccdr-prog-top{
display:flex !important;
align-items:stretch !important;
gap:0 !important;
}
/* =========================
IMAGEN
========================= */
.ccdr-prog-media{
flex:0 0 170px !important;
}
.ccdr-prog-img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block !important;
}
/* =========================
BODY (TEXTOS)
========================= */
.ccdr-prog-body{
flex:1 1 auto !important;
padding:14px 18px 10px 18px !important;
display:flex !important;
flex-direction:column !important;
gap:4px !important;
min-width:0 !important;
}
/* -------- TÍTULO -------- */
.ccdr-prog-title,
.ccdr-prog-title .elementor-heading-title{
color:var(--ccdr-navy) !important;
font-family:inherit !important;
font-weight:800 !important;
font-size:22px !important;
line-height:1.15 !important;
margin:0 !important;
padding:0 !important;
}
/* -------- SEPARADOR -------- */
.ccdr-prog-divider{
margin:4px 0 4px 0 !important;
padding:0 !important;
}
.ccdr-prog-divider .elementor-divider,
.ccdr-prog-divider .elementor-divider-separator{
margin:0 !important;
padding:0 !important;
border-top:1px solid var(--ccdr-line) !important;
}
/* -------- TEXTO -------- */
.ccdr-prog-desc,
.ccdr-prog-meta{
font-family:inherit !important;
color:var(--ccdr-muted) !important;
line-height:1.3 !important;
margin:0 !important;
padding:0 !important;
}
/* Elimina márgenes reales del Text Editor */
.ccdr-prog-body p{
margin:0 !important;
padding:0 !important;
}
.ccdr-prog-body br{
display:none !important;
}
/* Meta destacada */
.ccdr-prog-meta strong{
color:var(--ccdr-text) !important;
font-weight:700 !important;
}
/* =========================
FOOTER (ANCHO COMPLETO)
========================= */
.ccdr-prog-footer{
background:var(--ccdr-soft) !important;
border-top:1px solid var(--ccdr-line) !important;
padding:12px 18px !important;
display:flex !important;
justify-content:flex-end !important;
align-items:center !important;
}
/* =========================
CTA "VER MÁS" – HOVER CORRECTO
========================= */
.ccdr-prog-link .elementor-button,
.ccdr-prog-link .elementor-button:hover,
.ccdr-prog-link .elementor-button:focus{
background:transparent !important;
border:0 !important;
padding:0 !important;
box-shadow:none !important;
text-decoration:none !important;
}
/* Estado normal */
.ccdr-prog-link .elementor-button-text,
.ccdr-prog-link .elementor-button-icon{
color:var(--ccdr-navy) !important;
font-family:inherit !important;
font-weight:800 !important;
opacity:1 !important;
visibility:visible !important;
}
/* Hover: SOLO cambia a verde */
.ccdr-prog-link .elementor-button:hover .elementor-button-text,
.ccdr-prog-link .elementor-button:hover .elementor-button-icon,
.ccdr-prog-link .elementor-button:focus .elementor-button-text,
.ccdr-prog-link .elementor-button:focus .elementor-button-icon{
color:var(--ccdr-green) !important;
}
/* =========================
RESPONSIVE
========================= */
@media (max-width:1024px){
.ccdr-prog-card{ flex:0 0 100% !important; }
.ccdr-prog-media{ flex:0 0 150px !important; }
}
@media (max-width:640px){
.ccdr-prog-top{ flex-direction:column !important; }
.ccdr-prog-media{
width:100% !important;
height:180px !important;
}
.ccdr-prog-title,
.ccdr-prog-title .elementor-heading-title{
font-size:20px !important;
}
}
/************************************************************
CCDRSJ | Sedes e Instalaciones (Distritos)
- Grid centrado
- Hover iconos SVG a verde
- district-name hereda tipografía del sitio
- Textos grises se mantienen (NO se tocan)
************************************************************/
/* ================= VARIABLES ================= */
:root{
--ccdrsj-blue:#003366;
--ccdrsj-green:#26B979;
--ccdrsj-gray:#6b7280;
--ccdrsj-border:#e6eaf0;
}
/* ================= GRID (centrado) ================= */
.districts-grid{
width:100% !important;
display:grid !important;
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
gap:18px !important;
/* centra las tarjetas cuando sobra espacio (última fila, pantallas anchas) */
justify-content:center !important;
}
@media (max-width:1024px){
.districts-grid{
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}
}
@media (max-width:767px){
.districts-grid{
grid-template-columns: 1fr !important;
}
}
/* ================= TARJETA ================= */
.district-card{
border:1px solid var(--ccdrsj-border) !important;
border-radius:14px !important;
background:#fff !important;
padding:20px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
min-height:120px;
box-shadow:0 10px 24px rgba(0,0,0,.06) !important;
cursor:pointer;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.district-card:hover{
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,.10) !important;
border-color:rgba(0,51,102,.25) !important;
}
/* ================= LADO IZQUIERDO ================= */
.district-left{
display:flex !important;
align-items:center !important;
gap:12px !important;
}
/* ================= ICONO (SVG reales / Icon Widget / fallback img) ================= */
/* Base: forzar azul */
.district-icon{
display:flex;
align-items:center;
justify-content:center;
}
/* Caso Icon widget (i) */
.district-icon i{
color:var(--ccdrsj-blue) !important;
transition: color .18s ease !important;
}
/* Caso SVG inline (lo más común cuando son SVG reales) */
.district-icon svg{
width:auto;
height:auto;
max-width:44px;
max-height:44px;
transition: fill .18s ease, stroke .18s ease, color .18s ease !important;
}
/* Pintar SVG azul: cubre fill/stroke en paths */
.district-icon svg,
.district-icon svg *{
fill: var(--ccdrsj-blue) !important;
stroke: var(--ccdrsj-blue) !important;
}
/* Caso raro: SVG con currentColor */
.district-icon{
color: var(--ccdrsj-blue) !important;
}
/* Fallback si el SVG está como ![]()
(no siempre perfecto) */
.district-icon img{
width:44px;
height:44px;
object-fit:contain;
transition: filter .18s ease !important;
/* intenta “pintar” a azul si es monocromo */
filter: brightness(0) saturate(100%) invert(12%) sepia(38%) saturate(1900%)
hue-rotate(186deg) brightness(92%) contrast(102%);
}
/* Hover: icono verde (sin tocar los textos grises) */
.district-card:hover .district-icon{
color: var(--ccdrsj-green) !important;
}
/* Hover icon widget */
.district-card:hover .district-icon i{
color: var(--ccdrsj-green) !important;
}
/* Hover SVG inline */
.district-card:hover .district-icon svg,
.district-card:hover .district-icon svg *{
fill: var(--ccdrsj-green) !important;
stroke: var(--ccdrsj-green) !important;
}
/* Hover fallback img */
.district-card:hover .district-icon img{
filter: brightness(0) saturate(100%) invert(55%) sepia(37%) saturate(693%)
hue-rotate(110deg) brightness(92%) contrast(94%);
}
/* ================= TEXTO ================= */
.district-text{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
text-align:left !important;
}
/* district-name: heredar tipografía del sitio (no forzar font-family) */
.district-card .district-name,
.district-card .district-name *,
.district-card .elementor-heading-title,
.district-card .elementor-heading-title *,
.district-card h1,
.district-card h2,
.district-card h3,
.district-card h4,
.district-card h5,
.district-card h6,
.district-card h1 a,
.district-card h2 a,
.district-card h3 a,
.district-card h4 a,
.district-card h5 a,
.district-card h6 a{
color:var(--ccdrsj-blue) !important;
text-decoration:none !important;
/* ✅ NO tocamos font-family: que herede del sitio */
font-family: inherit !important;
/* mantenemos tu peso fuerte */
font-weight:800 !important;
transition:color .18s ease !important;
}
/* Hover del nombre (verde) */
.district-card:hover .district-name,
.district-card:hover .district-name *,
.district-card:hover .elementor-heading-title,
.district-card:hover .elementor-heading-title *,
.district-card:hover h1,
.district-card:hover h2,
.district-card:hover h3,
.district-card:hover h4,
.district-card:hover h5,
.district-card:hover h6,
.district-card:hover h1 a,
.district-card:hover h2 a,
.district-card:hover h3 a,
.district-card:hover h4 a,
.district-card:hover h5 a,
.district-card:hover h6 a{
color:var(--ccdrsj-green) !important;
}
/* Cantidad: SIEMPRE gris (no tocar) */
.district-count{
margin-top:6px !important;
color:var(--ccdrsj-gray) !important;
font-size:14px !important;
line-height:1.1 !important;
}
/* ================= FLECHA ================= */
.district-arrow{
transition: transform .18s ease !important;
}
.district-arrow i,
.district-arrow svg,
.district-arrow svg *{
color:var(--ccdrsj-blue) !important;
fill:var(--ccdrsj-blue) !important;
stroke:var(--ccdrsj-blue) !important;
font-size:22px !important;
transition:color .18s ease, fill .18s ease, stroke .18s ease !important;
}
.district-card:hover .district-arrow i,
.district-card:hover .district-arrow svg,
.district-card:hover .district-arrow svg *{
color:var(--ccdrsj-green) !important;
fill:var(--ccdrsj-green) !important;
stroke:var(--ccdrsj-green) !important;
}
.district-card:hover .district-arrow{
transform:translateX(2px);
}
/* ================= ACCESIBILIDAD ================= */
.district-card:focus-within{
outline:3px solid rgba(38,185,121,.25);
outline-offset:3px;
}
:root{
--ccdr-navy:#003366;
--ccdr-green:#26B979;
--ccdr-line:#e6e9ef;
}
/* Caja del carrusel */
.jdn-galeria{
border-radius:14px !important;
overflow:hidden !important;
background:#fff !important;
box-shadow:0 12px 28px rgba(0,0,0,.10) !important;
border:1px solid var(--ccdr-line) !important;
}
/* Si usa Swiper (Elementor casi siempre) */
.jdn-galeria .swiper,
.jdn-galeria .swiper-container{
width:100% !important;
}
.jdn-galeria .swiper-wrapper{
align-items:stretch !important;
}
.jdn-galeria .swiper-slide{
width:100% !important;
height:220px !important;
}
/* Forzar que el contenido llene el slide */
.jdn-galeria .swiper-slide > *,
.jdn-galeria .swiper-slide a,
.jdn-galeria .swiper-slide figure,
.jdn-galeria .swiper-slide .swiper-slide-inner,
.jdn-galeria img{
width:100% !important;
height:100% !important;
display:block !important;
}
/* Imagen: cover */
.jdn-galeria img{
object-fit:cover !important;
transition: transform .35s ease, filter .35s ease !important;
}
.jdn-galeria .swiper-slide:hover img{
transform:scale(1.03) !important;
filter:saturate(1.05) contrast(1.02) !important;
}
/* Flechas */
.jdn-galeria .swiper-button-prev,
.jdn-galeria .swiper-button-next{
width:40px !important;
height:40px !important;
border-radius:999px !important;
background:rgba(255,255,255,.92) !important;
border:1px solid rgba(0,0,0,.08) !important;
box-shadow:0 10px 20px rgba(0,0,0,.12) !important;
}
.jdn-galeria .swiper-button-prev:after,
.jdn-galeria .swiper-button-next:after{
font-size:14px !important;
font-weight:900 !important;
color:var(--ccdr-navy) !important;
}
.jdn-galeria .swiper-button-prev:hover:after,
.jdn-galeria .swiper-button-next:hover:after{
color:var(--ccdr-green) !important;
}
/* Dots */
.jdn-galeria .swiper-pagination-bullet{
width:8px !important;
height:8px !important;
opacity:.35 !important;
background:var(--ccdr-navy) !important;
}
.jdn-galeria .swiper-pagination-bullet-active{
opacity:1 !important;
background:var(--ccdr-green) !important;
}
/* Móvil */
@media (max-width:767px){
.jdn-galeria .swiper-slide{ height:170px !important; }
}
/* =========================================================
CCDRSJ | PROGRAMA RECREATIVO DETALLE
Club de Vida Sana
========================================================= */
:root{
--ccdr-azul:#003366;
--ccdr-verde:#26B979;
--ccdr-celeste:#3499CC;
--ccdr-texto:#4B5563;
--ccdr-subtexto:#6B7280;
--ccdr-borde:#E5E7EB;
--ccdr-borde-soft:#E4ECF5;
--ccdr-fondo-soft:#F6FAFF;
--ccdr-blanco:#FFFFFF;
--ccdr-radius:16px;
--ccdr-radius-lg:18px;
--ccdr-shadow:0 10px 24px rgba(0, 51, 102, 0.05);
}
/* CONTENEDOR GENERAL */
.program-page{
width:100%;
}
/* HERO */
.program-hero{
max-width:900px;
margin:0 auto;
}
.program-description{
max-width:860px;
margin:0 auto;
}
.program-description p{
margin:0;
color:var(--ccdr-texto);
line-height:1.9em;
font-size:18px;
}
/* TÍTULOS DE SECCIÓN */
.program-section-title{
text-align:center;
}
.program-section-title .elementor-heading-title{
color:var(--ccdr-azul);
font-weight:800;
line-height:1.2em;
}
/* TARJETA OBJETIVO */
.program-objective-card{
background:var(--ccdr-fondo-soft);
border:1px solid var(--ccdr-borde-soft);
border-radius:18px;
box-shadow:var(--ccdr-shadow);
}
.program-objective-card .elementor-heading-title{
color:var(--ccdr-azul);
font-weight:800;
}
.program-objective-card p{
color:var(--ccdr-texto);
line-height:1.7em;
margin:0;
}
/* GRID KPIS */
.program-kpi-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
}
.program-kpi-card{
background:#fff;
border:1px solid var(--ccdr-borde);
border-radius:16px;
box-shadow:0 8px 20px rgba(0,0,0,.04);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.program-kpi-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 28px rgba(0, 51, 102, 0.08);
border-color:#D8E5F2;
}
.program-kpi-card .elementor-icon{
color:var(--ccdr-azul);
}
.program-kpi-card h3,
.program-kpi-card .kpi-number{
color:var(--ccdr-azul);
font-weight:800;
line-height:1em;
}
.program-kpi-card p{
color:var(--ccdr-texto);
margin:0;
line-height:1.45em;
}
/* GRID ACTIVIDADES */
.program-activities-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
}
.program-activity-card{
background:#fff;
border:1px solid var(--ccdr-borde);
border-radius:16px;
box-shadow:0 8px 20px rgba(0,0,0,.04);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.program-activity-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 28px rgba(0, 51, 102, 0.08);
border-color:#D8E5F2;
}
.program-activity-card .elementor-icon{
color:var(--ccdr-azul);
}
.program-activity-card .elementor-heading-title{
color:var(--ccdr-azul);
font-weight:800;
line-height:1.3em;
}
.program-activity-card p{
color:var(--ccdr-subtexto);
margin:0;
line-height:1.6em;
}
/* TABLA */
.program-schedules-table{
background:#fff;
border:1px solid #D9E3EE;
border-radius:14px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,.04);
}
.program-table-wrap{
width:100%;
overflow-x:auto;
}
.program-table{
width:100%;
border-collapse:collapse;
font-size:16px;
}
.program-table thead th{
background:#DCECFB;
color:var(--ccdr-azul);
font-weight:700;
text-align:center;
padding:18px 20px;
border-bottom:1px solid #D3E0EC;
}
.program-table tbody td{
padding:16px 20px;
border-bottom:1px solid #E8EEF5;
color:var(--ccdr-texto);
vertical-align:middle;
}
.program-table tbody tr:last-child td{
border-bottom:none;
}
.program-table tbody td:first-child{
font-weight:600;
color:var(--ccdr-azul);
width:36%;
}
.program-table tbody td:last-child{
width:64%;
}
/* BANDA FINAL */
.program-bottom-band{
background:var(--ccdr-fondo-soft);
border:1px solid var(--ccdr-borde-soft);
border-radius:14px;
box-shadow:0 8px 20px rgba(0,0,0,.03);
}
.program-bottom-band .elementor-icon{
color:var(--ccdr-azul);
}
.program-bottom-band .elementor-heading-title,
.program-bottom-band p{
margin:0;
}
.program-bottom-band .elementor-heading-title{
color:var(--ccdr-azul);
font-weight:700;
}
.program-bottom-band p{
color:var(--ccdr-texto);
}
/* RESPONSIVE */
@media (max-width:1024px){
.program-description p{
font-size:17px;
}
}
@media (max-width:767px){
.program-description p{
font-size:16px;
line-height:1.8em;
}
.program-objective-card{
padding:22px !important;
}
.program-table{
min-width:680px;
}
}
/************************************************************
CCDRSJ | BLOQUE GALERÍA DEL PROGRAMA
-----------------------------------------------------------
Mejora visual para el slider ubicado debajo de
"Sedes y Horarios".
Objetivos del estilo:
- Integrar el slider al diseño institucional
- Crear una tarjeta visual contenedora
- Unificar tamaño de imágenes
- Mejorar flechas y paginación
- Mantener responsive limpio
************************************************************/
/* =========================================================
1. CONTENEDOR GENERAL DE LA SECCIÓN GALERÍA
---------------------------------------------------------
Agrega espacio superior para separar el slider de
la tabla de sedes y horarios.
========================================================= */
.program-gallery-section{
margin-top:40px;
}
/* =========================================================
2. TÍTULO DE LA GALERÍA
---------------------------------------------------------
Mantiene el mismo estilo institucional que las
otras secciones (Metas, Actividades, etc.)
========================================================= */
.program-gallery-title{
text-align:center;
margin-bottom:20px;
}
.program-gallery-title h2{
color:#003366; /* Azul institucional CCDRSJ */
font-weight:800;
font-size:34px;
line-height:1.2;
margin:0;
}
/* =========================================================
3. TARJETA CONTENEDORA DEL SLIDER
---------------------------------------------------------
Crea una tarjeta institucional blanca con bordes
suaves para integrar el slider al diseño.
========================================================= */
.program-gallery-card{
background:#ffffff;
border:1px solid #E5E7EB; /* Gris institucional */
border-radius:16px;
padding:18px;
box-shadow:0 8px 20px rgba(0,0,0,.04);
overflow:hidden;
}
/* =========================================================
4. IMÁGENES DEL SLIDER
---------------------------------------------------------
Fuerza que todas las imágenes tengan el mismo tamaño
visual y evita deformaciones.
========================================================= */
.program-gallery-card img{
width:100%;
height:340px; /* altura ideal desktop */
object-fit:cover; /* recorte elegante */
border-radius:12px;
display:block;
}
/* =========================================================
5. CONTENEDOR DEL SLIDER (SWIPER / ELEMENTOR)
---------------------------------------------------------
Asegura que el slider respete las esquinas redondeadas
========================================================= */
.program-gallery-card .swiper,
.program-gallery-card .swiper-container{
border-radius:12px;
overflow:hidden;
}
/* =========================================================
6. FLECHAS DE NAVEGACIÓN DEL SLIDER
---------------------------------------------------------
Estilo institucional limpio y moderno
========================================================= */
.program-gallery-card .swiper-button-prev,
.program-gallery-card .swiper-button-next{
width:42px;
height:42px;
border-radius:999px;
background:rgba(255,255,255,.92);
box-shadow:0 6px 16px rgba(0,0,0,.10);
}
/* Icono de las flechas */
.program-gallery-card .swiper-button-prev:after,
.program-gallery-card .swiper-button-next:after{
font-size:16px;
color:#003366; /* azul institucional */
font-weight:700;
}
/* =========================================================
7. PAGINACIÓN (LOS PUNTOS)
========================================================= */
.program-gallery-card .swiper-pagination-bullet{
background:#cbd5e1; /* gris claro */
opacity:1;
}
.program-gallery-card .swiper-pagination-bullet-active{
background:#003366; /* azul institucional */
}
/* =========================================================
8. RESPONSIVE
---------------------------------------------------------
Ajustes para tablet y móvil
========================================================= */
@media (max-width:767px){
.program-gallery-card{
padding:12px;
border-radius:14px;
}
.program-gallery-card img{
height:220px; /* altura móvil */
border-radius:10px;
}
.program-gallery-card .swiper-button-prev,
.program-gallery-card .swiper-button-next{
width:36px;
height:36px;
}
}
/************************************************************
CCDRSJ | INSTALACIONES POR DISTRITO / POR SEDE
-----------------------------------------------------------
CSS para:
1) Leyenda superior de instalaciones
2) Iconos dentro de cada tarjeta
3) Hover visual institucional
4) Ajustes responsive
Estructura esperada en Elementor:
-----------------------------------------------------------
LEYENDA SUPERIOR
- Contenedor padre: facility-legend
- Contenedor item: facility-legend-item
- Widget icono: facility-legend-icon
- Widget texto: facility-legend-text
TARJETA
- Contenedor iconos: facility-icons
- Contenedor caja: facility-icon-box
- Widget icono: facility-icon-symbol
Nota:
Este CSS está pensado para trabajar con widgets de ícono
de Elementor y no con HTML manual.
************************************************************/
/* =========================================================
1. VARIABLES BASE
---------------------------------------------------------
Se usan variables institucionales del sitio.
Si ya las tenés definidas globalmente, no hace falta
volverlas a declarar. Las dejo aquí comentadas como guía.
========================================================= */
/*
:root{
--ccdrsj-blue:#003366;
--ccdrsj-green:#26B979;
--ccdrsj-gray:#6b7280;
--ccdrsj-border:#e6eaf0;
}
*/
/* =========================================================
2. LEYENDA SUPERIOR DE INSTALACIONES
---------------------------------------------------------
Este bloque va debajo del texto introductorio de la página.
Clase del contenedor principal:
.facility-legend
Dentro van varios items:
.facility-legend-item
Cada item lleva:
- un widget de icono con clase .facility-legend-icon
- un widget de texto con clase .facility-legend-text
========================================================= */
.facility-legend{
width:100%;
display:flex;
flex-wrap:wrap; /* Permite que los elementos bajen de línea */
justify-content:center; /* Centra horizontalmente la leyenda */
align-items:center; /* Alinea verticalmente los items */
gap:18px 28px; /* fila / columna */
margin:24px 0 34px; /* separación arriba y abajo */
}
.facility-legend-item{
display:flex;
align-items:center;
gap:8px; /* separación entre icono y texto */
width:auto;
}
/* Icono de la leyenda superior */
.facility-legend-icon .elementor-icon{
font-size:18px;
color:var(--ccdrsj-blue);
line-height:1;
}
/* Texto de la leyenda superior */
.facility-legend-text{
color:var(--ccdrsj-gray);
font-size:15px;
font-weight:500;
line-height:1.3;
}
/* =========================================================
3. CONTENEDOR DE ICONOS DENTRO DE CADA TARJETA
---------------------------------------------------------
Este bloque va justo debajo del nombre de la sede.
Clase del contenedor:
.facility-icons
Dentro van varias cajas de icono:
.facility-icon-box
Dentro de cada caja, el widget de icono lleva:
.facility-icon-symbol
========================================================= */
.facility-icons{
display:flex;
flex-wrap:wrap; /* Permite que los iconos bajen de línea */
align-items:center;
gap:8px; /* separación entre iconos */
margin-top:12px; /* espacio respecto al título */
}
/* =========================================================
4. CAJA VISUAL DE CADA ICONO
---------------------------------------------------------
Cada icono vive dentro de una pequeña caja tipo "chip"
o "badge", para que se vea más ordenado y elegante.
Clase:
.facility-icon-box
========================================================= */
.facility-icon-box{
width:34px;
min-width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
background:#f3f5f7;
border:1px solid #e6eaf0;
transition:all .25s ease;
cursor:default; /* evita apariencia de enlace */
}
/* =========================================================
5. ICONO INTERNO DE CADA CAJA
---------------------------------------------------------
Este selector afecta al widget de ícono de Elementor
colocado dentro de .facility-icon-box
Clase:
.facility-icon-symbol
========================================================= */
.facility-icon-symbol .elementor-icon{
font-size:16px;
color:var(--ccdrsj-gray);
line-height:1;
transition:all .25s ease;
}
/* =========================================================
6. EFECTO HOVER EN ICONOS DE TARJETA
---------------------------------------------------------
Cuando el usuario pasa el cursor:
- la caja sube levemente
- cambia el fondo
- cambia el borde
- el icono pasa a verde institucional
========================================================= */
.facility-icon-box:hover{
transform:translateY(-1px);
background:rgba(38,185,121,.10);
border-color:rgba(38,185,121,.25);
}
.facility-icon-box:hover .facility-icon-symbol .elementor-icon{
color:var(--ccdrsj-green);
}
/* =========================================================
7. OPCIONAL | SI QUERÉS QUE EL ICONO SIEMPRE SEA CENTRADO
---------------------------------------------------------
A veces Elementor agrega márgenes o alineaciones internas
según el widget o el tema. Este ajuste ayuda a mantener
el icono perfectamente centrado.
========================================================= */
.facility-icon-symbol,
.facility-icon-symbol .elementor-widget-container{
display:flex;
align-items:center;
justify-content:center;
}
/* =========================================================
8. OPCIONAL | SI USÁS SVG EN WIDGETS O IMÁGENES
---------------------------------------------------------
Esto ayuda a controlar tamaño si en vez del ícono estándar
de Elementor usás SVG o un widget de imagen pequeño.
Podés dejarlo activo aunque no lo uses.
========================================================= */
.facility-icon-symbol img,
.facility-icon-symbol svg{
width:16px;
height:16px;
display:block;
}
/* =========================================================
9. RESPONSIVE | TABLET Y MÓVIL
---------------------------------------------------------
Ajustes para que la leyenda y los iconos se acomoden bien
en pantallas más pequeñas.
========================================================= */
@media (max-width:767px){
/* Leyenda superior:
se alinea a la izquierda para que respire mejor en móvil */
.facility-legend{
justify-content:flex-start;
gap:12px 18px;
margin:18px 0 26px;
}
/* Texto de la leyenda un poco más compacto */
.facility-legend-text{
font-size:14px;
}
/* Menor separación entre iconos en la tarjeta */
.facility-icons{
gap:7px;
margin-top:10px;
}
/* Caja del icono ligeramente más pequeña */
.facility-icon-box{
width:32px;
min-width:32px;
height:32px;
border-radius:7px;
}
/* Icono ligeramente más pequeño */
.facility-icon-symbol .elementor-icon{
font-size:15px;
}
/* Si usás SVG o imagen */
.facility-icon-symbol img,
.facility-icon-symbol svg{
width:15px;
height:15px;
}
}
/* =========================================================
10. RESPONSIVE | PANTALLAS MUY PEQUEÑAS
---------------------------------------------------------
Ajuste extra por si la leyenda superior se ve muy cargada
en celulares pequeños.
========================================================= */
@media (max-width:480px){
.facility-legend{
gap:10px 14px;
}
.facility-legend-text{
font-size:13px;
}
.facility-legend-icon .elementor-icon{
font-size:16px;
}
}
/************************************************************
CCDRSJ | PÁGINA DE INSTALACIÓN (VERSIÓN FINAL AJUSTADA)
************************************************************/
/* ================= HERO ================= */
.facility-hero{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(-50vw + 50%) !important;
min-height:520px !important;
display:flex !important;
align-items:flex-start !important; /* 🔥 IMPORTANTE */
justify-content:flex-start !important; /* 🔥 IMPORTANTE */
padding:90px 64px 60px 64px !important; /* 🔥 MÁS ARRIBA */
overflow:hidden !important;
background-position:center center !important;
background-repeat:no-repeat !important;
background-size:cover !important;
}
/* CONTENIDO INTERNO */
.facility-hero-content{
width:100% !important;
max-width:900px !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:6px !important;
}
/* TÍTULO */
.facility-hero-title .elementor-heading-title{
font-size:60px !important;
line-height:1.05 !important;
font-weight:800 !important;
color:#003366 !important;
margin:0 !important;
}
/* SUBTÍTULO */
.facility-hero-subtitle,
.facility-hero-subtitle p{
color:#475569 !important;
font-size:20px !important;
line-height:1.3 !important;
margin:0 !important;
}
/* ================= CHIPS ================= */
.facility-tags-wrap{
width:100% !important;
max-width:1200px !important;
margin:0 auto !important;
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap:16px !important;
padding:18px 20px 12px !important;
}
.facility-tag{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
padding:10px 18px !important;
background:#f5f7fb !important;
border:1px solid #e5ebf1 !important;
border-radius:14px !important;
box-shadow:0 4px 12px rgba(15,23,42,.05) !important;
}
.facility-tag-icon .elementor-icon{
color:#003366 !important;
font-size:17px !important;
}
.facility-tag-text{
color:#003366 !important;
font-size:15px !important;
font-weight:600 !important;
}
/* ================= RESUMEN ================= */
.facility-summary{
width:100% !important;
max-width:1200px !important;
margin:0 auto !important;
display:flex !important;
flex-wrap:wrap !important;
gap:20px !important;
justify-content:center !important;
padding:24px 20px 30px !important;
}
.facility-summary-card{
flex:1 1 240px !important;
display:flex !important;
align-items:center !important;
gap:14px !important;
padding:24px !important;
background:#ffffff !important;
border:1px solid #e6eaf0 !important;
border-radius:16px !important;
box-shadow:0 6px 18px rgba(15,23,42,.07) !important;
}
.facility-summary-icon .elementor-icon{
font-size:28px !important;
color:#36506b !important;
}
.facility-summary-title .elementor-heading-title{
font-size:20px !important;
font-weight:700 !important;
color:#003366 !important;
}
.facility-summary-desc{
color:#5f6b7a !important;
font-size:15px !important;
}
/* ================= SECCIONES ================= */
.facility-section-title .elementor-heading-title{
font-size:30px !important;
font-weight:800 !important;
color:#003366 !important;
}
.facility-about-text{
color:#4b5563 !important;
font-size:18px !important;
}
/* ================= ESPACIOS ================= */
.facility-spaces-grid{
display:flex !important;
flex-wrap:wrap !important;
gap:20px !important;
}
.facility-space-card{
flex:1 1 calc(25% - 15px) !important;
background:#ffffff !important;
border-radius:16px !important;
overflow:hidden !important;
box-shadow:0 6px 18px rgba(15,23,42,.07) !important;
}
.facility-space-image img{
height:180px !important;
object-fit:cover !important;
}
.facility-space-body{
padding:18px !important;
}
.facility-space-title .elementor-heading-title{
font-size:18px !important;
font-weight:700 !important;
color:#003366 !important;
}
/* ================= RESPONSIVE ================= */
@media (max-width:767px){
.facility-hero{
padding:60px 20px !important;
min-height:380px !important;
}
.facility-hero-title .elementor-heading-title{
font-size:34px !important;
}
.facility-space-card{
flex:1 1 100% !important;
}
}
/* =========================================================
FIX GENERAL | RESTAURA DISEÑO Y MANTIENE HERO ARRIBA
========================================================= */
/* HERO ancho completo con texto más arriba */
.facility-hero{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(-50vw + 50%) !important;
min-height:520px !important;
padding:80px 64px 60px 64px !important;
display:flex !important;
align-items:flex-start !important;
justify-content:flex-start !important;
background-position:center center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
}
.facility-hero-content{
width:100% !important;
max-width:1200px !important;
margin:0 auto !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:8px !important;
}
.facility-hero-title .elementor-heading-title{
font-size:60px !important;
line-height:1.05 !important;
font-weight:800 !important;
color:#003366 !important;
margin:0 !important;
}
.facility-hero-subtitle,
.facility-hero-subtitle p,
.facility-hero-subtitle .elementor-heading-title{
color:#ffffff !important;
font-size:18px !important;
line-height:1.3 !important;
font-weight:600 !important;
margin:0 !important;
}
/* CHIPS */
.facility-tags-wrap{
width:100% !important;
max-width:1200px !important;
margin:0 auto !important;
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap:16px !important;
padding:28px 20px 18px !important;
}
.facility-tag{
width:auto !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
padding:10px 18px !important;
background:#f5f7fb !important;
border:1px solid #e5ebf1 !important;
border-radius:14px !important;
box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
}
.facility-tag-icon .elementor-icon{
color:#003366 !important;
font-size:17px !important;
}
.facility-tag-text,
.facility-tag-text p,
.facility-tag-text .elementor-heading-title{
color:#003366 !important;
font-size:15px !important;
font-weight:600 !important;
line-height:1.2 !important;
margin:0 !important;
}
/* TARJETAS RESUMEN */
.facility-summary{
width:100% !important;
max-width:1200px !important;
margin:0 auto !important;
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
gap:20px !important;
justify-content:center !important;
align-items:stretch !important;
padding:24px 20px 42px !important;
}
.facility-summary-card{
flex:1 1 240px !important;
min-height:118px !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:14px !important;
padding:24px !important;
background:#ffffff !important;
border:1px solid #e6eaf0 !important;
border-radius:16px !important;
box-shadow:0 6px 18px rgba(15,23,42,.07) !important;
}
.facility-summary-icon .elementor-icon{
font-size:28px !important;
color:#36506b !important;
}
.facility-summary-texts{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
}
.facility-summary-title .elementor-heading-title{
font-size:20px !important;
line-height:1.15 !important;
font-weight:700 !important;
color:#003366 !important;
margin:0 !important;
}
.facility-summary-desc,
.facility-summary-desc p,
.facility-summary-desc .elementor-heading-title{
color:#5f6b7a !important;
font-size:15px !important;
line-height:1.45 !important;
margin:0 !important;
}
/* SECCIONES */
.facility-about,
.facility-spaces-section,
.facility-services-section,
.facility-gallery-section{
width:100% !important;
max-width:1200px !important;
margin:0 auto !important;
padding:28px 20px 10px !important;
}
.facility-section-title .elementor-heading-title{
font-size:30px !important;
line-height:1.15 !important;
font-weight:800 !important;
color:#003366 !important;
margin:0 !important;
}
.facility-about-text,
.facility-about-text p{
color:#4b5563 !important;
font-size:18px !important;
line-height:1.7 !important;
}
.facility-divider{
width:100% !important;
height:1px !important;
background:#e7edf3 !important;
margin-top:20px !important;
}
/* ESPACIOS DISPONIBLES */
.facility-spaces-grid{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
gap:20px !important;
align-items:stretch !important;
justify-content:flex-start !important;
margin-top:18px !important;
}
.facility-space-card{
flex:1 1 calc(25% - 15px) !important;
max-width:calc(25% - 15px) !important;
background:#ffffff !important;
border:1px solid #e6eaf0 !important;
border-radius:16px !important;
overflow:hidden !important;
box-shadow:0 6px 18px rgba(15,23,42,.07) !important;
display:flex !important;
flex-direction:column !important;
}
.facility-space-image img{
width:100% !important;
height:180px !important;
object-fit:cover !important;
display:block !important;
}
.facility-space-body{
padding:18px !important;
display:flex !important;
flex-direction:column !important;
gap:10px !important;
}
.facility-space-head{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:10px !important;
}
.facility-space-icon .elementor-icon{
font-size:18px !important;
color:#003366 !important;
}
.facility-space-title .elementor-heading-title{
font-size:18px !important;
line-height:1.2 !important;
font-weight:700 !important;
color:#003366 !important;
margin:0 !important;
}
.facility-space-text,
.facility-space-text p{
color:#4b5563 !important;
font-size:15px !important;
line-height:1.55 !important;
margin:0 !important;
}
/* SERVICIOS + MAPA */
.facility-services-layout{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
align-items:stretch !important;
gap:24px !important;
margin-top:18px !important;
}
.facility-services-list{
flex:1 1 58% !important;
}
.facility-features-grid{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
gap:16px !important;
}
.facility-feature-card{
flex:1 1 calc(50% - 8px) !important;
min-height:64px !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:12px !important;
padding:18px 20px !important;
background:#ffffff !important;
border:1px solid #e6eaf0 !important;
border-radius:14px !important;
box-shadow:0 4px 14px rgba(15,23,42,.05) !important;
}
.facility-feature-icon .elementor-icon{
color:#178a66 !important;
font-size:22px !important;
}
.facility-feature-text,
.facility-feature-text p,
.facility-feature-text .elementor-heading-title{
color:#003366 !important;
font-size:16px !important;
line-height:1.35 !important;
font-weight:500 !important;
margin:0 !important;
}
.facility-map-card{
flex:1 1 38% !important;
min-height:320px !important;
background:#ffffff !important;
border:1px solid #e6eaf0 !important;
border-radius:18px !important;
overflow:hidden !important;
box-shadow:0 6px 18px rgba(15,23,42,.07) !important;
display:flex !important;
flex-direction:column !important;
justify-content:space-between !important;
}
.facility-map-card iframe{
width:100% !important;
min-height:320px !important;
border:0 !important;
display:block !important;
}
/* GALERÍA */
.facility-gallery-grid{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
gap:16px !important;
margin-top:18px !important;
}
.facility-gallery-image{
flex:1 1 calc(25% - 12px) !important;
}
.facility-gallery-image img{
width:100% !important;
height:180px !important;
object-fit:cover !important;
border-radius:14px !important;
display:block !important;
}
/* RESPONSIVE */
@media (max-width:1024px){
.facility-hero{
min-height:420px !important;
padding:64px 30px 50px !important;
}
.facility-hero-title .elementor-heading-title{
font-size:44px !important;
}
.facility-space-card{
flex:1 1 calc(50% - 10px) !important;
max-width:calc(50% - 10px) !important;
}
.facility-gallery-image{
flex:1 1 calc(50% - 8px) !important;
}
}
@media (max-width:767px){
.facility-hero{
min-height:340px !important;
padding:44px 20px !important;
}
.facility-hero-title .elementor-heading-title{
font-size:34px !important;
}
.facility-hero-subtitle,
.facility-hero-subtitle p{
font-size:18px !important;
}
.facility-tags-wrap{
justify-content:flex-start !important;
padding:16px 20px 8px !important;
}
.facility-summary{
padding:18px 20px 24px !important;
}
.facility-summary-card{
flex:1 1 100% !important;
}
.facility-section-title .elementor-heading-title{
font-size:26px !important;
}
.facility-about-text,
.facility-about-text p{
font-size:16px !important;
}
.facility-space-card,
.facility-feature-card,
.facility-gallery-image{
flex:1 1 100% !important;
max-width:100% !important;
}
.facility-services-layout{
flex-direction:column !important;
}
}
/* Icono blanco en botón de mapa */
.facility-map-button .elementor-button-icon,
.facility-map-button .elementor-button-icon i,
.facility-map-button .elementor-button-icon svg{
color:#ffffff !important;
fill:#ffffff !important;
}
/*CSS para el HTML de estructura de careptas dentro de acordeón de los años*/
.ccdrsj-folder-system {
display: flex;
flex-direction: column;
gap: 12px;
padding: 10px 0;
font-family: inherit;
}
.ccdrsj-folder,
.ccdrsj-subfolder {
background: #ffffff;
border: 1px solid #e3e7ec;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 51, 102, 0.04);
overflow: hidden;
}
.ccdrsj-subfolder {
margin: 10px 0 0 28px;
box-shadow: none;
}
.ccdrsj-folder summary,
.ccdrsj-subfolder summary {
cursor: pointer;
list-style: none;
padding: 14px 18px;
color: #003366;
font-weight: 700;
font-size: 16px;
}
.ccdrsj-folder summary::-webkit-details-marker,
.ccdrsj-subfolder summary::-webkit-details-marker {
display: none;
}
.ccdrsj-folder summary::after,
.ccdrsj-subfolder summary::after {
content: "⌄";
float: right;
font-size: 18px;
color: #003366;
}
.ccdrsj-folder[open] > summary::after,
.ccdrsj-subfolder[open] > summary::after {
content: "⌃";
}
.ccdrsj-doc-list {
display: flex;
flex-direction: column;
margin: 0 18px 16px;
border: 1px solid #edf0f3;
border-radius: 8px;
overflow: hidden;
background: #fafbfc;
}
.ccdrsj-doc-list a {
display: block;
padding: 12px 16px;
color: #2d3748;
font-size: 15px;
text-decoration: none;
border-bottom: 1px solid #edf0f3;
}
.ccdrsj-doc-list a:last-child {
border-bottom: none;
}
.ccdrsj-doc-list a::before {
content: "📄";
margin-right: 8px;
}
.ccdrsj-doc-list a:hover {
background: #f2f7fb;
color: #003366;
}
.ccdrsj-empty {
padding: 12px 16px;
color: #7a8694;
font-size: 14px;
font-style: italic;
}