/* =============================================================== EstandarA2 — Estilos principales Paleta y tipografía replican ogtic.gob.do. Construido sobre Bootstrap 5.3. =============================================================== */ :root{ --ea2-color-primary:#083876; --ea2-color-primary-alpha:rgba(8,56,118,.7); --ea2-color-secondary:#002B5C; --ea2-color-cta:#ff6600; --ea2-color-cta-dark:#e65a00; --ea2-color-text:#000; --ea2-color-bg:#fff; --ea2-color-bg-alt:#eeeeee; --ea2-color-muted:#6B7280; /* Acentos institucionales */ --ea2-color-gov-bg:#0a1f3d; --ea2-color-gov-icon-bg:#1d4ed8; --ea2-color-accent:#7dd3fc; --ea2-color-error:#CE1126; /* Texto y enlaces */ --ea2-color-heading:#083876; --ea2-color-link:#083876; --ea2-color-text-muted:#374151; --ea2-color-text-placeholder:#9ca3af; /* Bordes */ --ea2-color-border:#e5e7eb; --ea2-color-divider:#d1d5db; /* Fondos UI */ --ea2-color-bg-hover:#f9fafb; --ea2-color-bg-subtle:#f3f4f6; --ea2-color-input-bg:#f4f4f4; /* Cards / Hero */ --ea2-color-card-bg:#ffffff; --ea2-color-card-border:#f0f0f0; --ea2-color-hero-text:#ffffff; /* Footer */ --ea2-color-footer-bg:#ffffff; --ea2-color-footer-text:#374151; --ea2-font-primary:'Inter',system-ui,-apple-system,sans-serif; --ea2-font-display:'Poppins','Inter',system-ui,sans-serif; --ea2-h1:2.5rem; --ea2-h2:2rem; --ea2-h3:1.5rem; --ea2-body-size:1rem; --ea2-body-weight:400; --ea2-heading-weight:700; --ea2-hero-height:700px; --ea2-radius-card:8px; --ea2-radius-btn:30px; } /* ===== Overrides Bootstrap ===== */ .btn-primary,.bg-primary{background-color:var(--ea2-color-primary)!important;border-color:var(--ea2-color-primary)!important} a{color:var(--ea2-color-link);text-decoration:none;transition:color .2s ease} a:hover{color:var(--ea2-color-cta)} /* ===== Base ===== */ html{ scroll-behavior:smooth; /* Contiene el desborde horizontal de elementos full-bleed (p.ej. el sidebar de Transparencia con margin: calc(50% - 50vw), donde 50vw incluye el ancho de la scrollbar y generaba ~15px de scroll horizontal). Se aplica en —y no en — para evitar el quirk de propagación de overflow al viewport. Se usa `clip` y no `hidden` para no romper el `position: sticky` del header. */ overflow-x:clip; } body{ font-family:var(--ea2-font-primary); font-size:var(--ea2-body-size); font-weight:var(--ea2-body-weight); color:var(--ea2-color-text); background:var(--ea2-color-bg); line-height:1.6; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--ea2-font-display); font-weight:var(--ea2-heading-weight); color:var(--ea2-color-heading); line-height:1.25; } h1{font-size:var(--ea2-h1)} h2{font-size:var(--ea2-h2)} h3{font-size:var(--ea2-h3)} img{max-width:100%;height:auto} .screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden} /* Tamaños de fuente accesibles */ .ea2-fs-sm{font-size:.9rem} .ea2-fs-lg{font-size:1.125rem} .ea2-fs-xl{font-size:1.25rem} /* ===== Botones EA2 ===== */ .ea2-btn{ display:inline-flex;align-items:center;justify-content:center; padding:15px 35px; font-size:1.2rem;font-weight:700; border-radius:var(--ea2-radius-btn); border:2px solid transparent; transition:all .25s ease; text-decoration:none;cursor:pointer;line-height:1.2; } .ea2-btn--cta{background:var(--ea2-color-cta);color:#fff} .ea2-btn--cta:hover,.ea2-btn--cta:focus-visible{background:var(--ea2-color-cta-dark);color:#fff;transform:translateY(-1px)} .ea2-btn--primary{background:var(--ea2-color-primary);color:#fff} .ea2-btn--primary:hover{background:var(--ea2-color-secondary);color:#fff} .ea2-btn--outline{background:transparent;border-color:#fff;color:#fff} .ea2-btn--outline:hover{background:#fff;color:var(--ea2-color-primary)} /* ===== Links de sección ===== */ .ea2-link{color:var(--ea2-color-primary);font-weight:600;text-decoration:none} .ea2-link:hover{color:var(--ea2-color-cta)} /* ===== Layout ===== */ .ea2-section{padding:4rem 0} .ea2-section__title{ font-size:var(--ea2-h2);color:var(--ea2-color-primary);font-weight:700; position:relative;padding-bottom:.75rem; } .ea2-section__title::after{ content:"";position:absolute;left:0;bottom:0;width:60px;height:4px; background:var(--ea2-color-cta);border-radius:2px; } .ea2-section--primary{background:var(--ea2-color-primary);color:#fff} .ea2-section--primary .ea2-section__title{color:#fff} .ea2-section--primary .ea2-section__title::after{background:#fff} /* ---------- Page header interior (breadcrumbs) ---------- */ .ea2-page-header{ position:relative; min-height:var(--ea2-ph-height, 200px); background-color:var(--ea2-ph-color, var(--ea2-color-primary)); color:#fff; display:flex;align-items:center; overflow:hidden; } .ea2-page-header--has-bg{ background-image:var(--ea2-ph-image); background-size:cover;background-position:center; } .ea2-page-header__overlay{ position:absolute;inset:0; background:rgba(8,56,118,var(--ea2-ph-overlay,.7)); pointer-events:none; } .ea2-page-header__inner{position:relative;z-index:2;padding:2rem 0} .ea2-page-header__title{color:#fff;margin:.25rem 0 0;font-size:var(--ea2-h1);font-weight:700} .ea2-page-header__subtitle{color:rgba(255,255,255,.9);margin-top:.75rem;font-size:1.125rem;max-width:680px} .ea2-page-header__meta{color:rgba(255,255,255,.8);margin-bottom:.5rem} /* Breadcrumbs */ .ea2-breadcrumbs{font-size:.875rem} .ea2-breadcrumbs__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem} .ea2-breadcrumbs__item{display:inline-flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.85)} .ea2-breadcrumbs__item a{color:rgba(255,255,255,.85);text-decoration:none} .ea2-breadcrumbs__item a:hover{color:var(--ea2-color-cta)} .ea2-breadcrumbs__item [aria-current]{color:#fff;font-weight:600} .ea2-breadcrumbs__sep{opacity:.6;color:#fff} /* ===== Skip link ===== */ .ea2-skip-link{ position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:10000; } .ea2-skip-link:focus{ left:12px;top:12px;width:auto;height:auto;padding:10px 18px; background:#000;color:#fff;text-decoration:none;border-radius:4px; } /* =============================================================== GOV BANNER (Sitio oficial del Gobierno) =============================================================== */ .ea2-gov-banner{ background:var(--ea2-color-gov-bg);color:#fff; font-size:.85rem; border-bottom:1px solid rgba(255,255,255,.08); } .ea2-gov-banner__toggle{ background:transparent;border:0;color:#fff; display:flex;align-items:center;gap:.6rem; width:100%;padding:.55rem 0;text-align:left; flex-wrap:nowrap;white-space:nowrap; } .ea2-gov-banner__toggle > span{ overflow:hidden;text-overflow:ellipsis; /* min-width:0 permite que el flex item se encoja por debajo del ancho de su contenido; sin esto el text-overflow:ellipsis no se activa y el texto largo desborda el viewport en pantallas estrechas. */ min-width:0; } .ea2-gov-banner__flag{flex-shrink:0;border-radius:2px} .ea2-gov-banner__cta{ color:var(--ea2-color-accent);text-decoration:underline;margin-left:.25rem;font-weight:500; } .ea2-gov-banner__chev{margin-left:.25rem;font-size:.7rem;transition:transform .25s ease} .ea2-gov-banner__toggle[aria-expanded="true"] .ea2-gov-banner__chev{transform:rotate(180deg)} .ea2-gov-banner__panel{background:var(--ea2-color-gov-bg);color:#fff;border-top:1px solid rgba(255,255,255,.08)} .ea2-gov-banner__icon{ width:48px;height:48px;border-radius:50%; background:var(--ea2-color-gov-icon-bg);color:#fff; display:inline-flex;align-items:center;justify-content:center; font-size:1.25rem;flex-shrink:0; } /* =============================================================== TOP BAR =============================================================== */ .ea2-topbar{ background:var(--ea2-color-primary); color:#fff; padding:.5rem 0; font-size:.8125rem; } .ea2-topbar a{color:#fff;text-decoration:none} .ea2-topbar a:hover{color:var(--ea2-color-cta)} .ea2-topbar__links{color:#fff} .ea2-fs-controls button{ background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff; width:28px;height:28px;border-radius:50%;padding:0;font-size:.75rem; display:inline-flex;align-items:center;justify-content:center;line-height:1; } .ea2-fs-controls button:hover{background:rgba(255,255,255,.15)} .ea2-topbar__social a{display:inline-flex;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);align-items:center;justify-content:center;font-size:.75rem} .ea2-topbar__social a:hover{background:var(--ea2-color-cta);color:#fff} /* =============================================================== HEADER (estilo OGTIC: 2 filas — logo+search arriba, nav abajo) =============================================================== */ .ea2-header{ background:#fff; border-bottom:1px solid rgba(0,0,0,.06); } .ea2-header-sticky .ea2-header{position:sticky;top:0;z-index:1020;box-shadow:0 2px 8px rgba(0,0,0,.04)} .ea2-header-fixed .ea2-header{position:fixed;top:0;left:0;right:0;z-index:1030} .ea2-header-fixed .ea2-main{padding-top:140px} /* Contiene el desborde horizontal del contenido. Las filas de WPBakery (.vc_row-fluid) traen márgenes negativos de 15px que, al no estar dentro de un .container con padding que los compense, sobresalen 15px y expanden el viewport en mobile (gap blanco a la derecha). `clip` lo contiene sin crear scroll ni afectar al header sticky (que está fuera de .ea2-main). */ .ea2-main{overflow-x:clip} .ea2-header__top{min-height:80px;padding:.75rem 0} .ea2-header__top-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .ea2-header__nav-wrap{background:#fff} .ea2-logo img{max-height:60px;width:auto;display:block} /* Un SVG con solo viewBox no tiene alto intrínseco definido; dentro del header flex, con width:auto y solo max-height, el ancho no se puede derivar y el logo se colapsa a 0px. Un alto DEFINIDO lo resuelve. El max-height de las media queries (p.ej. 54px en mobile) sigue limitándolo correctamente. */ .ea2-logo img[src$=".svg"]{height:60px} .ea2-logo--text{font-family:var(--ea2-font-display);font-weight:700;font-size:1.25rem;color:var(--ea2-color-primary);text-decoration:none} /* Search en el header */ .ea2-header-search{ display:inline-flex;align-items:center; background:var(--ea2-color-input-bg);border:1px solid var(--ea2-color-border); border-radius:999px; padding:4px 4px 4px 20px; width:340px;max-width:100%; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; } .ea2-header-search:focus-within{ background:#fff; border-color:var(--ea2-color-primary); box-shadow:0 0 0 3px rgba(8,56,118,.1); } .ea2-header-search input{ border:0;background:transparent;outline:none; flex:1;font-size:.95rem;color:#333; padding:.4rem 0; } .ea2-header-search input::placeholder{color:var(--ea2-color-text-placeholder)} .ea2-header-search button{ width:38px;height:38px;border-radius:50%;border:0; background:var(--ea2-color-cta);color:#fff; display:inline-flex;align-items:center;justify-content:center; cursor:pointer;transition:background .2s ease; flex-shrink:0; } .ea2-header-search button:hover{background:var(--ea2-color-cta-dark)} .ea2-header-search--mobile{width:100%} .ea2-header-search{position:relative} .ea2-header-search.is-invalid{border-color:var(--ea2-color-error);box-shadow:0 0 0 3px rgba(206,17,38,.12)} .ea2-search-msg{ position:absolute;left:20px;top:calc(100% + 6px); font-size:.8rem;color:var(--ea2-color-error); background:#fff;padding:4px 10px;border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,.08); display:none;white-space:nowrap; z-index:10; } .ea2-header-search.is-invalid .ea2-search-msg{display:block} /* Botón de portales (grid 3x3) — alineado verticalmente con el search */ .ea2-header__tools{align-items:center} .ea2-header__portals-btn{ background:transparent;border:0;padding:0; color:var(--ea2-color-primary); cursor:pointer; display:inline-flex;align-items:center; height:48px; } /* Separador vertical tipo pipe, altura fija para verse claro */ .ea2-header__portals-btn::before{ content:""; width:1px;height:36px; background:var(--ea2-color-divider); margin-right:1.25rem; display:block; } .ea2-grid-icon{ display:inline-grid; grid-template-columns:repeat(3,11px);grid-template-rows:repeat(3,11px); gap:4px; } .ea2-grid-icon span{ background:var(--ea2-color-primary); display:block;width:11px;height:11px;border-radius:2px; transition:background .2s ease; } .ea2-header__portals-btn:hover .ea2-grid-icon span{background:var(--ea2-color-cta)} /* Navbar (fila inferior estilo OGTIC) */ .ea2-nav{padding:0} .ea2-nav .navbar-nav{ display:flex;flex-direction:row;flex-wrap:wrap;align-items:center; width:100%;list-style:none;margin:0;padding:0; justify-content:flex-start;gap:.25rem; } .ea2-nav .navbar-nav > .nav-item{position:relative;list-style:none} .ea2-nav .navbar-nav .dropdown-menu{position:absolute} .ea2-nav .navbar-nav .nav-link{ color:var(--ea2-color-text-muted); font-weight:500;font-size:.95rem; padding:1rem 1.1rem; transition:color .2s ease; position:relative; } .ea2-nav .navbar-nav .nav-link:hover{color:var(--ea2-color-cta)} .ea2-nav .navbar-nav .nav-item.active > .nav-link, .ea2-nav .navbar-nav .nav-link.active{color:var(--ea2-color-error);font-weight:600} /* Subrayado del ítem activo en ::before (así no colisiona con el caret ::after) */ .ea2-nav .navbar-nav .nav-item.active > .nav-link::before, .ea2-nav .navbar-nav .nav-link.active::before{ content:"";position:absolute;left:1.1rem;right:1.1rem;bottom:.6rem;height:2px;background:var(--ea2-color-error); } /* Caret del dropdown en ::after (independiente del subrayado) */ .ea2-nav .navbar-nav .nav-link.dropdown-toggle::after{ content:"";display:inline-block; border:0; width:8px;height:8px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);margin-left:.5rem;vertical-align:2px; transition:transform .2s ease; } /* Al abrir el dropdown, la flecha apunta hacia arriba */ .ea2-nav .navbar-nav .nav-link.dropdown-toggle.show::after, .ea2-nav .navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"]::after{ transform:rotate(-135deg);vertical-align:-1px; } .ea2-nav .dropdown-menu{ border:0; border-top:1px solid var(--ea2-color-border); border-radius:0 0 4px 4px; box-shadow:0 14px 30px rgba(0,0,0,.1); padding:.5rem 0;margin-top:0;min-width:240px; } .ea2-nav .dropdown-item{ padding:.6rem 1.25rem;color:var(--ea2-color-text-muted);font-weight:500;font-size:.92rem; border-left:3px solid transparent; transition:all .2s ease; } .ea2-nav .dropdown-item:hover,.ea2-nav .dropdown-item:focus{ background:var(--ea2-color-bg-hover);color:var(--ea2-color-primary); border-left-color:var(--ea2-color-cta); } /* Ítem activo del dropdown (página actual): resaltado sutil, no el azul de Bootstrap */ .ea2-nav .dropdown-item.active, .ea2-nav .dropdown-item.current-menu-item, .ea2-nav .dropdown-item:active{ background:#dde4e7; color:var(--ea2-color-primary); font-weight:600; border-left-color:var(--ea2-color-error); } .ea2-offcanvas{--bs-offcanvas-width:320px} .ea2-offcanvas .nav-link{color:var(--ea2-color-primary);font-weight:600} /* =============================================================== PORTALES DROPDOWN (Enlaces de Interés) Se ancla justo debajo del botón grid 3x3 (no full-height). =============================================================== */ .ea2-portals .dropdown-menu.ea2-portals-dropdown{ width:380px;max-width:90vw; border:0;border-radius:8px; box-shadow:0 18px 40px rgba(0,0,0,.18); padding:0; max-height:600px;overflow:hidden; } /* Solo estructura flex cuando Bootstrap lo muestra */ .ea2-portals .dropdown-menu.ea2-portals-dropdown.show{ display:flex;flex-direction:column; } .ea2-portals-dropdown__title{color:var(--ea2-color-primary);font-size:1.1rem} .ea2-portals-dropdown__scroll{ overflow-y:auto;max-height:520px;padding:.5rem 1rem 1rem; } .ea2-portals-dropdown__group{margin-top:.5rem} .ea2-portals-dropdown__group-toggle{ background:transparent;border:0;padding:.75rem 0; font-weight:600;color:var(--ea2-color-primary);font-size:1rem; border-bottom:1px solid var(--ea2-color-border); } .ea2-portals-dropdown__group-toggle[aria-expanded="false"] .fa-chevron-up{transform:rotate(180deg)} .ea2-portals-dropdown__group-toggle .fa-chevron-up{transition:transform .25s ease;color:var(--ea2-color-primary)} .ea2-portals-dropdown__grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; padding:1rem 0 .5rem; } .ea2-portals-dropdown__item{color:var(--ea2-color-primary);transition:transform .2s ease;display:block} .ea2-portals-dropdown__item:hover{transform:translateY(-2px)} .ea2-portals-dropdown__icon{ width:64px;height:64px;border-radius:50%; background:var(--ea2-color-bg-subtle);color:var(--icon-color, var(--ea2-color-primary)); display:inline-flex;align-items:center;justify-content:center; font-size:1.5rem; transition:background .2s ease,border-color .2s ease; border:1px solid var(--ea2-color-border); } .ea2-portals-dropdown__item:hover .ea2-portals-dropdown__icon{background:#fff;border-color:var(--icon-color)} .ea2-portals-dropdown__label{color:var(--ea2-color-text-muted);font-weight:500;line-height:1.2} /* Wrapper del dropdown — asegurar ancla de Popper */ .ea2-portals{position:relative} .ea2-portals .dropdown-menu.ea2-portals-dropdown{margin-top:12px!important} /* =============================================================== HERO =============================================================== */ .ea2-hero{position:relative} .ea2-hero .carousel,.ea2-hero .carousel-inner,.ea2-hero .carousel-item{height:var(--ea2-hero-height);max-height:90vh} .ea2-hero__slide{ position:relative;height:100%; background-size:cover;background-position:center center; background-color:var(--ea2-color-secondary); display:flex;align-items:center; } .ea2-hero__overlay{ position:absolute;inset:0; background:linear-gradient(90deg, rgba(8,56,118,.92) 0%, rgba(8,56,118,.65) 55%, rgba(8,56,118,.25) 100%); pointer-events:none; } .ea2-hero__content{position:relative;z-index:2;color:var(--ea2-color-hero-text)} .ea2-hero__title{color:var(--ea2-color-hero-text);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;margin-bottom:1rem;text-shadow:0 2px 8px rgba(0,0,0,.25)} .ea2-hero__text{color:rgba(255,255,255,.95);font-size:1.125rem;margin-bottom:1.5rem;max-width:640px} .ea2-hero .carousel-indicators [data-bs-target]{ background-color:#fff;opacity:.6;width:10px;height:10px;border-radius:50%;border:0; } .ea2-hero .carousel-indicators .active{opacity:1;background:var(--ea2-color-cta)} .ea2-hero .carousel-control-prev,.ea2-hero .carousel-control-next{width:5%;opacity:.8} /* =============================================================== SERVICIOS =============================================================== */ .ea2-service-card{ background:var(--ea2-color-card-bg); border:1px solid var(--ea2-color-card-border); border-radius:var(--ea2-radius-card); padding:1.75rem; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; text-decoration:none;color:inherit; display:flex;flex-direction:column; } .ea2-service-card:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(8,56,118,.12); border-color:transparent;color:inherit; } .ea2-service-card__icon{ width:60px;height:60px;border-radius:50%; background:rgba(8,56,118,.08);color:var(--ea2-color-primary); display:inline-flex;align-items:center;justify-content:center; font-size:1.5rem;transition:all .25s ease; } .ea2-service-card:hover .ea2-service-card__icon{ background:var(--ea2-color-cta);color:#fff; } .ea2-service-card__title{color:var(--ea2-color-primary);margin-bottom:.5rem} .ea2-service-card__desc{color:#444;font-size:.95rem;flex:1} .ea2-service-card__more{color:var(--ea2-color-cta);font-weight:600;font-size:.9rem} .ea2-service-card--flat{border:0;background:transparent;padding:1rem 0} .ea2-service-card--outline{border:2px solid var(--ea2-color-primary)} /* Variante con imagen destacada como header (archivo de servicios) */ .ea2-service-card--media{padding:0;overflow:hidden} .ea2-service-card--media .ea2-service-card__media{ display:block;aspect-ratio:16/10;overflow:hidden; background:rgba(8,56,118,.06); } .ea2-service-card--media .ea2-service-card__media img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease; } .ea2-service-card--media:hover .ea2-service-card__media img{transform:scale(1.05)} .ea2-service-card__media--placeholder{ display:flex;align-items:center;justify-content:center; color:var(--ea2-color-primary);font-size:2.5rem; } .ea2-service-card--media .ea2-service-card__body{ padding:1.5rem;display:flex;flex-direction:column;flex:1; } /* Card tipo "Punto GOB": título + datos con iconos + botón */ .ea2-service-card--point .ea2-service-card__title{margin-bottom:1rem} .ea2-service-card--point .ea2-service-card__title a{color:var(--ea2-color-primary);text-decoration:none} .ea2-service-meta{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.85rem} .ea2-service-meta li{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;color:#374151;line-height:1.45} .ea2-service-meta li i{color:var(--ea2-color-primary);margin-top:.15rem;flex-shrink:0;width:1rem;text-align:center} .ea2-service-btn{ display:block;text-align:center;margin-top:auto; padding:.7rem 1rem;border:1px solid var(--ea2-color-primary);border-radius:999px; color:var(--ea2-color-primary);font-weight:600;font-size:.9rem;text-decoration:none; transition:background .2s ease,color .2s ease; } .ea2-service-btn:hover{background:var(--ea2-color-primary);color:#fff} /* =============================================================== KPIs =============================================================== */ .ea2-kpis{position:relative;overflow:hidden} .ea2-kpis::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 20% 50%, rgba(255,255,255,.08), transparent 60%); pointer-events:none; } .ea2-kpi__icon{font-size:2rem;color:var(--ea2-color-cta)} .ea2-kpi__number{font-family:var(--ea2-font-display);font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1;color:#fff} .ea2-kpi__suffix{font-size:.6em;color:var(--ea2-color-cta);margin-left:.25rem} .ea2-kpi__label{color:rgba(255,255,255,.85);margin-top:.5rem;text-transform:uppercase;letter-spacing:.05em;font-size:.875rem} /* =============================================================== NOTICIAS =============================================================== */ .ea2-news-card{ background:var(--ea2-color-card-bg);border-radius:var(--ea2-radius-card);overflow:hidden; border:1px solid var(--ea2-color-card-border); transition:transform .25s ease,box-shadow .25s ease; } .ea2-news-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08)} .ea2-news-card__media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ea2-color-bg-alt)} .ea2-news-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .ea2-news-card:hover .ea2-news-card__media img{transform:scale(1.05)} .ea2-news-card__placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--ea2-color-primary),var(--ea2-color-secondary))} .ea2-news-card__date{ position:absolute;top:12px;left:12px; background:var(--ea2-color-primary);color:#fff; font-size:.75rem;font-weight:600; padding:.35rem .75rem;border-radius:20px; box-shadow:0 2px 6px rgba(0,0,0,.2); } .ea2-news-card__title a{color:var(--ea2-color-primary);text-decoration:none;transition:color .2s ease} .ea2-news-card__title a:hover{color:var(--ea2-color-cta)} .ea2-news-list__thumb img{width:90px;height:90px;object-fit:cover;border-radius:var(--ea2-radius-card)} /* =============================================================== Noticias — archivo estilo OGTIC (barra de filtros + cards) =============================================================== */ .ea2-news-filterbar{background:#fff;border-bottom:1px solid var(--ea2-color-border)} .ea2-news-filterbar__form{ display:flex;align-items:center;flex-wrap:wrap;gap:.75rem; padding:1.1rem 0; } .ea2-news-filterbar__label{ font-size:.8rem;font-weight:700;letter-spacing:.05em; color:var(--ea2-color-text-muted);text-transform:uppercase;margin-right:.25rem; } .ea2-news-filter{ appearance:none;-webkit-appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23083876' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right .9rem center; background-size:14px; border:1px solid var(--ea2-color-border);border-radius:999px; padding:.55rem 2.4rem .55rem 1.1rem; font-size:.9rem;color:var(--ea2-color-primary);font-weight:500; cursor:pointer;min-width:150px;transition:border-color .2s ease,box-shadow .2s ease; } .ea2-news-filter:hover{border-color:var(--ea2-color-primary)} .ea2-news-filter:focus{outline:none;border-color:var(--ea2-color-primary);box-shadow:0 0 0 3px rgba(8,56,118,.12)} .ea2-news-filter__go{ border:1px solid var(--ea2-color-primary);background:var(--ea2-color-primary);color:#fff; border-radius:999px;padding:.55rem 1.2rem;font-size:.9rem;font-weight:600;cursor:pointer; } .ea2-news-filter__clear{ margin-left:.25rem;font-size:.85rem;color:var(--ea2-color-error);text-decoration:none;font-weight:600; display:inline-flex;align-items:center;gap:.3rem; } .ea2-news-filter__clear:hover{text-decoration:underline} .ea2-news-archive{background:var(--ea2-color-bg-subtle)} .ea2-post-card{ display:flex;flex-direction:column; background:var(--ea2-color-card-bg);border-radius:14px;overflow:hidden; border:1px solid var(--ea2-color-card-border); box-shadow:0 1px 2px rgba(16,24,40,.04); transition:transform .25s ease,box-shadow .25s ease; } .ea2-post-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(8,56,118,.12)} .ea2-post-card__media{ display:block;position:relative;aspect-ratio:16/10;overflow:hidden; background:var(--ea2-color-bg-alt); } .ea2-post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease} .ea2-post-card:hover .ea2-post-card__media img{transform:scale(1.05)} .ea2-post-card__placeholder{ display:flex;align-items:center;justify-content:center;width:100%;height:100%; background:linear-gradient(135deg,var(--ea2-color-primary),var(--ea2-color-secondary)); color:rgba(255,255,255,.85);font-size:2.5rem; } .ea2-post-card__body{display:flex;flex-direction:column;flex:1;padding:1.25rem 1.4rem 1.4rem} .ea2-post-card__cats{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem} .ea2-post-card__cat{ font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase; color:var(--ea2-color-primary);background:rgba(8,56,118,.08); padding:.28rem .6rem;border-radius:6px;text-decoration:none;transition:background .2s ease,color .2s ease; } .ea2-post-card__cat:hover{background:var(--ea2-color-primary);color:#fff} .ea2-post-card__title{font-size:1.05rem;line-height:1.35;font-weight:700;margin:0 0 .7rem} .ea2-post-card__title a{color:var(--ea2-color-primary);text-decoration:none;transition:color .2s ease} .ea2-post-card__title a:hover{color:var(--ea2-color-cta)} .ea2-post-card__excerpt{font-size:.9rem;line-height:1.5;color:var(--ea2-color-text-muted);margin:0 0 1.25rem} .ea2-post-card__footer{ display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-top:auto;padding-top:1rem;border-top:1px solid var(--ea2-color-card-border); } .ea2-post-card__date{font-size:.82rem;color:var(--ea2-color-text-placeholder)} .ea2-post-card__arrow{ flex-shrink:0;width:40px;height:40px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:rgba(8,56,118,.08);color:var(--ea2-color-primary); text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease; } .ea2-post-card__arrow:hover{background:var(--ea2-color-primary);color:#fff;transform:translateX(2px)} .ea2-news-empty{text-align:center;padding:4rem 1rem;color:var(--ea2-color-text-muted)} .ea2-news-empty i{font-size:3rem;color:var(--ea2-color-text-placeholder);margin-bottom:1rem;display:block} .ea2-news-empty p{margin-bottom:1.25rem} @media (max-width:575px){ .ea2-news-filter{flex:1 1 calc(50% - .75rem);min-width:0} } /* =============================================================== MVV =============================================================== */ .ea2-mvv__card{ background:var(--ea2-color-card-bg);border-radius:var(--ea2-radius-card); box-shadow:0 4px 14px rgba(8,56,118,.06); border-top:4px solid var(--ea2-color-cta); transition:transform .25s ease; } .ea2-mvv__card:hover{transform:translateY(-4px)} .ea2-mvv__icon{ width:56px;height:56px;border-radius:50%; background:var(--ea2-color-primary);color:#fff; display:inline-flex;align-items:center;justify-content:center; font-size:1.25rem; } /* Texto de las tarjetas (soporta HTML del WYSIWYG en Misión, Visión y Valores) */ .ea2-mvv__text{margin:0} .ea2-mvv__text > :last-child{margin-bottom:0} .ea2-mvv__text ul, .ea2-mvv__text ol{margin:0;padding-left:1.2rem} .ea2-mvv__text li{margin-bottom:.35rem;line-height:1.5} .ea2-mvv__text li:last-child{margin-bottom:0} /* =============================================================== TEAM =============================================================== */ .ea2-team-card{ background:var(--ea2-color-card-bg);border-radius:var(--ea2-radius-card);overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.05); padding:1rem;transition:transform .25s ease,box-shadow .25s ease; } .ea2-team-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(8,56,118,.1)} .ea2-team-card__photo img{border-radius:50%;aspect-ratio:1;object-fit:cover} .ea2-team-card__avatar{ width:120px;height:120px;border-radius:50%; background:linear-gradient(135deg,var(--ea2-color-primary),var(--ea2-color-secondary)); color:#fff;font-family:var(--ea2-font-display);font-weight:700;font-size:2rem; display:inline-flex;align-items:center;justify-content:center;margin:0 auto; } /* =============================================================== PROGRAMS =============================================================== */ .ea2-program-card{ background:var(--ea2-color-card-bg);border-radius:var(--ea2-radius-card);overflow:hidden; border:1px solid var(--ea2-color-card-border);color:inherit;text-decoration:none; transition:transform .25s ease,box-shadow .25s ease; } .ea2-program-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08);color:inherit} .ea2-program-card__media{height:180px;background-size:cover;background-position:center;background-color:var(--ea2-color-bg-alt)} /* =============================================================== CTA BANNER =============================================================== */ .ea2-cta{padding:3rem 0} .ea2-cta--primary{background:var(--ea2-color-primary);color:#fff} .ea2-cta--primary .ea2-cta__title{color:#fff} .ea2-cta--cta{background:var(--ea2-color-cta);color:#fff} .ea2-cta--cta .ea2-cta__title{color:#fff} .ea2-cta--dark{background:var(--ea2-color-gov-bg);color:#fff} .ea2-cta--dark .ea2-cta__title{color:#fff} /* =============================================================== TRANSPARENCIA =============================================================== */ .ea2-transparency__item{ background:var(--ea2-color-card-bg);border-radius:var(--ea2-radius-card); color:var(--ea2-color-primary);text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:all .25s ease; } .ea2-transparency__item:hover{ background:var(--ea2-color-primary);color:#fff; transform:translateY(-4px);box-shadow:0 10px 24px rgba(8,56,118,.2); } /* =============================================================== FOOTER (3 secciones estilo OGTIC) =============================================================== */ .ea2-footer{background:var(--ea2-color-footer-bg);color:var(--ea2-color-footer-text);margin-top:auto;border-top:1px solid var(--ea2-color-border)} .ea2-footer a{color:var(--ea2-color-footer-text);text-decoration:none;transition:color .2s ease} .ea2-footer a:hover{color:var(--ea2-color-primary)} /* ---- Sección 1: columnas principales ---- */ .ea2-footer__main{padding:3rem 0 2rem} .ea2-footer__row{align-items:flex-start} .ea2-footer__logo img{max-height:72px;width:auto;display:inline-block} /* Logo institucional (ocupa su propia columna ancha) */ .ea2-footer__logo--lg img{max-height:70px} /* Un SVG con solo viewBox (sin width/height) colapsa a 0 en flex: altura explícita */ .ea2-footer__logo img[src$=".svg"]{height:72px} .ea2-footer__logo--lg img[src$=".svg"]{height:70px} /* Pipe divisor vertical entre el logo y las columnas (solo desktop) */ @media (min-width:992px){ .ea2-footer__logo-col{display:flex;align-items:center;position:relative} .ea2-footer__logo-col::after{ content:"";position:absolute;top:50%;right:32px;transform:translateY(-50%); width:1px;height:130px;background:var(--ea2-color-border); } } .ea2-footer__title{ color:var(--ea2-color-primary); font-family:var(--ea2-font-display); font-size:1rem;font-weight:700; text-transform:uppercase;letter-spacing:.04em; margin-bottom:1rem; } .ea2-footer__text{color:#4b5563;line-height:1.6} .ea2-footer li{margin-bottom:.5rem;line-height:1.5} /* ---- Sección 2: certificaciones ---- */ .ea2-footer__certs{ border-top:1px solid var(--ea2-color-border); padding:2rem 0; } .ea2-footer__certs-title{ color:var(--ea2-color-primary); font-weight:700;font-size:1rem; margin-bottom:1rem; } .ea2-footer__cert img{max-height:100px;width:auto} .ea2-footer__cert a{ display:inline-block;line-height:0;transition:transform .2s ease; position:relative;cursor:pointer; } .ea2-footer__cert a > div{display:inline-block} .ea2-footer__cert a:hover{transform:translateY(-2px)} /* El iframe del sello NORTIC captura el click; lo deshabilitamos para que el click llegue al padre. */ .ea2-footer__cert a iframe{ pointer-events:none; max-width:100px;display:block; } .ea2-footer__cert--empty{color:var(--ea2-color-text-placeholder);font-style:italic} /* ---- Sección 3: copyright + redes ---- */ .ea2-footer__legal{ background:var(--ea2-color-primary); color:#fff;padding:1rem 0; } .ea2-footer__legal a{color:#fff} .ea2-footer__legal a:hover{color:var(--ea2-color-cta)} .ea2-footer__copy{color:#fff;margin:0} .ea2-footer__dev{color:rgba(255,255,255,.7)} /* Redes sociales: ahora viven en una COLUMNA del footer (fondo claro), por eso los iconos usan el color primario con glifo blanco (botones redondeados). */ .ea2-footer__social{gap:.5rem!important} .ea2-footer__social a{ width:40px;height:40px;border-radius:10px; background:var(--ea2-color-primary);color:#fff; display:inline-flex;align-items:center;justify-content:center; font-size:1rem;transition:all .25s ease; } .ea2-footer__social a:hover{background:var(--ea2-color-cta);color:#fff;transform:translateY(-2px)} /* Acordeón de certificaciones (solo mobile) */ .ea2-certs-toggle{ background:transparent;border:0; padding:1rem 0;min-height:56px; border-top:1px solid var(--ea2-color-border); line-height:1.2; } .ea2-certs-toggle[aria-expanded="true"] .fa-chevron-down{transform:rotate(180deg)} .ea2-certs-toggle .fa-chevron-down{transition:transform .25s ease;color:var(--ea2-color-primary)} @media (min-width: 992px){ .ea2-certs-collapse{display:block !important;height:auto !important;visibility:visible} } @media (max-width: 991.98px){ .ea2-footer__main{padding:2rem 0 1rem} .ea2-footer__logo img{max-height:56px} .ea2-footer__title{margin-top:.5rem;font-size:.95rem} .ea2-footer__certs{padding:0} .ea2-footer__certs-list{justify-content:flex-start!important;padding:.5rem 0 1rem} .ea2-footer__certs .col-lg-4{text-align:left} .ea2-footer__legal{text-align:center} /* Toggles de certificaciones: misma altura, sin gap entre ellos */ .ea2-certs-row{--bs-gutter-y:0!important} .ea2-certs-block + .ea2-certs-block .ea2-certs-toggle{border-top:1px solid var(--ea2-color-border)} } /* =============================================================== PORTAL DE TRANSPARENCIA (página interna con sidebar) =============================================================== */ .ea2-transparency-page{padding:2rem 0 4rem} /* Desktop: el collapse siempre visible, sin animaciones de Bootstrap */ @media (min-width: 992px){ .ea2-transparency-sidebar__collapse{ display:block !important;height:auto !important;visibility:visible; } } /* Header (gradiente) de menú lateral de sección — Transparencia / Institución */ .ea2-secnav-head{ position:relative;overflow:hidden; display:flex;align-items:center;gap:.9rem; padding:1.15rem 1.25rem;color:#fff; background:linear-gradient(120deg,#0d4a97 0%,var(--ea2-color-primary) 55%,#0a2f63 100%); } .ea2-secnav-head::after{ content:"";position:absolute;right:-34px;top:50%;transform:translateY(-50%); width:130px;height:130px;border-radius:50%; background:rgba(255,255,255,.06);pointer-events:none; } .ea2-secnav-head__icon{ flex:0 0 auto;position:relative;z-index:1; width:46px;height:46px;border-radius:11px; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.20); font-size:1.2rem;color:#fff; } .ea2-secnav-head__text{position:relative;z-index:1;display:flex;flex-direction:column;line-height:1.2;min-width:0} .ea2-secnav-head__title{font-family:var(--ea2-font-display);font-weight:700;font-size:1.05rem;color:#fff} .ea2-secnav-head__subtitle{font-size:.8rem;color:rgba(255,255,255,.72);margin-top:.15rem} /* Tarjeta que une header + menú en un solo bloque (Transparencia) */ .ea2-transparency-card{ border:1px solid var(--ea2-color-border); border-radius:12px;overflow:hidden;background:var(--ea2-color-card-bg); box-shadow:0 6px 18px rgba(8,56,118,.10); } .ea2-transparency-card .ea2-transparency-menu{border:0;border-radius:0;background:transparent} /* Toggle de acordeón (solo mobile) */ .ea2-transparency-sidebar__toggle{ background:var(--ea2-color-card-bg);border:1px solid var(--ea2-color-border); width:100%;padding:1rem 1.25rem; display:flex;align-items:center;justify-content:space-between; font-weight:700;color:var(--ea2-color-primary);font-size:.95rem; text-align:left; } .ea2-transparency-sidebar__toggle .fa-chevron-down{ transition:transform .25s ease;color:var(--ea2-color-primary); } .ea2-transparency-sidebar__toggle[aria-expanded="true"] .fa-chevron-down{transform:rotate(180deg)} /* Sidebar */ .ea2-transparency-menu{ border:1px solid var(--ea2-color-border);border-radius:6px;overflow:hidden;background:var(--ea2-color-card-bg); } .ea2-transparency-menu li{margin:0;border-bottom:1px solid var(--ea2-color-card-border)} .ea2-transparency-menu li:last-child{border-bottom:0} .ea2-transparency-menu a{ display:block;padding:.85rem 1rem; color:var(--ea2-color-primary);font-weight:500;font-size:.95rem; text-decoration:none;line-height:1.35; transition:background .2s ease,color .2s ease,border-left-color .2s ease; border-left:3px solid transparent; } .ea2-transparency-menu a:hover{background:var(--ea2-color-bg-hover);border-left-color:var(--ea2-color-cta);color:var(--ea2-color-primary)} .ea2-transparency-menu .current-menu-item > a, .ea2-transparency-menu .current-menu-ancestor > a{ background:rgba(8,56,118,.06); border-left-color:var(--ea2-color-primary); font-weight:700; } /* Items con hijos: botón de caret para abrir/cerrar (el enlace navega a su página) */ .ea2-transparency-menu .menu-item-has-children{position:relative} .ea2-transparency-menu .menu-item-has-children > a{padding-right:2.75rem} .ea2-transparency-menu__caret{ position:absolute;top:.5rem;right:.35rem; width:2rem;height:2rem;display:flex;align-items:center;justify-content:center; background:transparent;border:0;padding:0;border-radius:4px;cursor:pointer; color:var(--ea2-color-text-placeholder); } .ea2-transparency-menu__caret:hover{background:var(--ea2-color-bg-hover);color:var(--ea2-color-primary)} .ea2-transparency-menu__caret i{font-size:.72rem;line-height:1;pointer-events:none;transition:transform .2s ease} .ea2-transparency-menu .menu-item-has-children.is-open > .ea2-transparency-menu__caret i{transform:rotate(180deg)} /* Submenú inline */ .ea2-transparency-menu .sub-menu, .ea2-transparency-menu .dropdown-menu{ position:static!important;transform:none!important; list-style:none;margin:0;padding:0; background:var(--ea2-color-bg-hover);border:0;border-radius:0;box-shadow:none;display:none; } .ea2-transparency-menu .menu-item-has-children.is-open .sub-menu, .ea2-transparency-menu .menu-item-has-children.is-open .dropdown-menu{display:block} .ea2-transparency-menu .sub-menu a, .ea2-transparency-menu .dropdown-menu a{ padding-left:2rem;font-size:.875rem;color:#4b5563;font-weight:500; border-left:3px solid transparent; } .ea2-transparency-menu .sub-menu a:hover, .ea2-transparency-menu .dropdown-menu a:hover{ color:var(--ea2-color-primary);background:#fff; } /* =============================================================== Menú lateral de sección ("Más de esta sección") — Institución =============================================================== */ .ea2-secnav{ border:1px solid var(--ea2-color-border); border-radius:12px;overflow:hidden;background:var(--ea2-color-card-bg); box-shadow:0 6px 18px rgba(8,56,118,.10); } .ea2-secnav__menu{margin:0;padding:0;list-style:none} .ea2-secnav__menu li{margin:0;border-bottom:1px solid var(--ea2-color-card-border)} .ea2-secnav__menu li:last-child{border-bottom:0} .ea2-secnav__menu a{ display:block;padding:.8rem 1.15rem; color:var(--ea2-color-text-muted);font-size:.92rem;font-weight:500;line-height:1.35; text-decoration:none;border-left:3px solid transparent; transition:background .2s ease,color .2s ease,border-left-color .2s ease; } .ea2-secnav__menu a:hover{background:var(--ea2-color-bg-hover);border-left-color:var(--ea2-color-cta);color:var(--ea2-color-primary)} .ea2-secnav__menu .current-menu-item > a, .ea2-secnav__menu .current-menu-ancestor > a{ background:rgba(8,56,118,.06); border-left-color:var(--ea2-color-primary); color:var(--ea2-color-primary);font-weight:700; } /* Botones de compartir */ .ea2-share__btn{ width:40px;height:40px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:var(--ea2-color-card-bg);border:1px solid var(--ea2-color-border);color:var(--ea2-color-primary); transition:all .2s ease;text-decoration:none;cursor:pointer; } .ea2-share__btn:hover{background:var(--ea2-color-primary);color:#fff;transform:translateY(-2px)} /* Hero de bienvenida */ .ea2-transparency-hero{ position:relative;display:flex;align-items:center;justify-content:space-between; background:var(--ea2-color-card-bg);border:1px solid var(--ea2-color-border);border-radius:8px; padding:3rem 2rem;min-height:320px;overflow:hidden;gap:2rem; } .ea2-transparency-hero__body{flex:1;position:relative;z-index:2} .ea2-transparency-hero__eyebrow{ color:var(--ea2-color-primary);font-weight:600;margin-bottom:.5rem;font-size:1rem; } .ea2-transparency-hero__title{ color:var(--ea2-color-primary);font-size:clamp(1.75rem,3.5vw,2.5rem); line-height:1.1;margin:0;font-weight:700; } .ea2-transparency-hero__accent{color:var(--ea2-color-secondary,#CE1126)} .ea2-transparency-hero__shape{ width:340px;max-width:45%;position:relative;z-index:1; } .ea2-transparency-hero__shape svg{width:100%;height:auto} @media (max-width: 991.98px){ .ea2-transparency-hero{flex-direction:column-reverse;text-align:center;padding:2rem 1rem} .ea2-transparency-hero__shape{width:200px;max-width:70%} /* Sidebar de Transparencia edge-to-edge en mobile (rompe el container y grid padding) */ .ea2-transparency-sidebar{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0; margin-top:0;margin-bottom:0; } .ea2-transparency-sidebar__toggle{ border-left:0;border-right:0;border-radius:0; } .ea2-transparency-sidebar__collapse .ea2-transparency-menu{ border-left:0;border-right:0;border-radius:0;border-top:0; padding-left:5px; } /* Sin espacio entre el page-header y el toggle del sidebar en mobile */ .ea2-section.ea2-transparency-page{padding:0 0 3rem} .ea2-transparency-page .row{--bs-gutter-y:0} .ea2-transparency-main{padding-top:1.5rem} /* El toggle respeta el container real y no el negativo del sidebar */ .ea2-transparency-sidebar__toggle{padding-left:1.25rem;padding-right:1.25rem} } /* =============================================================== 404 + buscador =============================================================== */ .ea2-404{text-align:center;padding:6rem 0} .ea2-404__code{font-size:clamp(5rem,12vw,9rem);color:var(--ea2-color-primary);font-weight:800;line-height:1;margin:0} .ea2-404__title{margin:.5rem 0 1rem} /* Pagination */ .ea2-pagination{margin-top:2rem} .ea2-pagination .page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:40px;height:40px;padding:0 .75rem;margin:0 .15rem; border-radius:6px;background:var(--ea2-color-card-bg);color:var(--ea2-color-primary); border:1px solid var(--ea2-color-card-border);text-decoration:none;font-weight:600; } .ea2-pagination .page-numbers.current, .ea2-pagination .page-numbers:hover{background:var(--ea2-color-primary);color:#fff;border-color:var(--ea2-color-primary)} /* =============================================================== RESPONSIVE =============================================================== */ @media (max-width: 991.98px){ .ea2-hero{--ea2-hero-height:500px} .ea2-section{padding:3rem 0} .ea2-hero__title{font-size:1.75rem} /* ----- Padding lateral consistente en todo el tema en mobile ----- */ .ea2-header .container-xl, .ea2-footer .container-xl, .ea2-gov-banner .container-xl, .ea2-page-header .container-xl, .ea2-section .container-xl{ padding-left:1.25rem;padding-right:1.25rem; } /* ----- Header mobile (todo inline, menú dentro del dropdown de portales) ----- */ .ea2-header__top-row{align-items:center;flex-wrap:nowrap} .ea2-logo{flex:0 0 auto} .ea2-logo img{max-height:54px} .ea2-header__tools{flex:1;justify-content:flex-end;gap:.5rem;margin-left:auto} .ea2-header-search{flex:1;width:auto;padding:4px 4px 4px 16px;min-width:0} .ea2-header-search input{font-size:.9rem} .ea2-header__portals-btn{height:44px} .ea2-header__portals-btn::before{margin-right:.5rem;height:28px} /* Panel de portales: full-width inline cuando está abierto (se integra al flujo) */ .ea2-portals{position:static} .ea2-portals .dropdown-menu.ea2-portals-dropdown{ position:absolute !important; top:100% !important;left:0 !important;right:0 !important; transform:none !important; width:100% !important;max-width:100%; margin-top:0 !important;border-radius:0; box-shadow:0 10px 24px rgba(0,0,0,.08); border-top:1px solid var(--ea2-color-border); max-height:calc(100vh - 160px); } .ea2-header{position:relative} .ea2-portals-dropdown__scroll{max-height:none} /* Menú principal dentro del dropdown (solo mobile) */ .ea2-portals-dropdown__mainmenu{ padding:0 1.25rem 1rem; border-top:1px solid var(--ea2-color-border); margin-top:.5rem; } .ea2-portals-dropdown__mainmenu .ea2-nav .navbar-nav{flex-direction:column;gap:0} .ea2-portals-dropdown__mainmenu .nav-item{width:100%;border-bottom:1px solid var(--ea2-color-card-border)} .ea2-portals-dropdown__mainmenu .nav-item:last-child{border-bottom:0} .ea2-portals-dropdown__mainmenu .nav-link{ padding:1rem 0;font-weight:600;font-size:1rem;color:var(--ea2-color-primary); } .ea2-portals-dropdown__mainmenu .nav-item.active > .nav-link{ color:var(--ea2-color-primary);font-weight:700; } .ea2-portals-dropdown__mainmenu .nav-item.active > .nav-link::after{display:none} /* Submenús inline (no flotantes) */ .ea2-portals-dropdown__mainmenu .dropdown-menu{ position:static !important;transform:none !important; box-shadow:none;border:0;border-top:1px solid #f0f0f0; padding:.25rem 0 .75rem;margin:0;width:100%; } .ea2-portals-dropdown__mainmenu .dropdown-item{ padding:.65rem 0 .65rem 1rem;color:#4b5563;border-left:0; } .ea2-portals-dropdown__mainmenu .dropdown-item:hover{ background:transparent;color:var(--ea2-color-cta);border-left:0; } } @media (max-width: 575.98px){ .ea2-hero{--ea2-hero-height:420px} .ea2-btn{padding:12px 24px;font-size:1rem} .ea2-topbar{display:none} .ea2-header__top-row{gap:.75rem;flex-wrap:wrap} .ea2-header__tools{flex:1 0 100%;justify-content:space-between} /* Gov banner: 1 sola línea (como OGTIC oculta el CTA en mobile) */ .ea2-gov-banner{font-size:clamp(.7rem, 2.6vw, .85rem)} .ea2-gov-banner__toggle{padding:.45rem 0;gap:.4rem} .ea2-gov-banner__flag{width:18px;height:12px} .ea2-gov-banner__cta{display:none} .ea2-gov-banner__chev{margin-left:auto;font-size:.7em} } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } } /* =============================================================== WP File Download — subcarpetas como LISTA VERTICAL (estilo NORTIC) Convierte las cajas horizontales en filas: icono grande + nombre completo + línea separadora, como el portal de referencia. =============================================================== */ /* Alta especificidad (body .wpfd-container …) para ganar a las reglas !important propias del plugin sin depender del orden de carga. */ body .wpfd-container .wpfd-categories{ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:0 !important; margin-top:.5rem; text-align:left !important; } body .wpfd-container .wpfd-categories .wpfdcategory.catlink{ display:flex !important; flex-direction:row !important; /* WPFD usa flex:0 0 180px (ancho en su grid). En columna eso sería la ALTURA de cada fila → lo anulamos para que la altura la defina el contenido. */ flex:0 0 auto !important; align-items:center !important; justify-content:flex-start !important; gap:1.15rem !important; float:none !important; width:100% !important; max-width:100% !important; min-width:0 !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:.95rem .35rem !important; background:transparent !important; border:0 !important; border-bottom:1px solid var(--ea2-color-border) !important; border-radius:0 !important; box-shadow:none !important; text-align:left !important; cursor:pointer; transition:background .18s ease; } body .wpfd-container .wpfd-categories .wpfdcategory.catlink:hover{background:var(--ea2-color-bg-hover) !important} /* Icono de carpeta grande a la IZQUIERDA (order:1) */ body .wpfd-container .wpfd-categories .wpfdcategory.catlink i.wpfd-folder{ order:1 !important; position:static !important; font-size:2.3rem !important; line-height:1 !important; color:var(--ea2-color-primary) !important; margin:0 !important; padding:0 !important; flex:0 0 auto !important; width:auto !important; height:auto !important; top:auto !important;left:auto !important;right:auto !important;bottom:auto !important; } /* Nombre completo a la derecha del icono (order:2), sin truncar */ body .wpfd-container .wpfd-categories .wpfdcategory.catlink span{ order:2 !important; display:block !important; position:static !important; font-size:1rem !important; font-weight:400 !important; color:var(--ea2-color-text-muted) !important; line-height:1.35 !important; white-space:normal !important; /* nombre completo, sin "Constitución de l..." */ overflow:visible !important; text-overflow:clip !important; max-width:none !important; width:auto !important; margin:0 !important;padding:0 !important; text-align:left !important; } /* Ocultar los placeholders de relleno usados por el grid original */ body .wpfd-container .wpfd-categories .wpfdcategory_placeholder{display:none !important} /* Ocultar el título de la carpeta que repite el breadcrumb/título de la página */ body .wpfd-container .wpfd-categories > h2{display:none !important} /* Breadcrumb de WPFD: al entrar directo a una carpeta solo mostraba su nombre (p.ej. "Leyes"). Vía JS (initWpfdBreadcrumb) se le anteponen los ancestros (Transparencia → Base Legal → Leyes); aquí se les pone el separador. */ body .wpfd-content .breadcrumbs > li.ea2-wpfd-crumb::after{ content:"/"; padding:0 .5rem; color:var(--ea2-color-text-placeholder); } body .wpfd-content .breadcrumbs > li.ea2-wpfd-crumb > a{color:var(--ea2-color-primary) !important;font-weight:500} body .wpfd-content .breadcrumbs > li.ea2-wpfd-crumb > a:hover{color:var(--ea2-color-cta) !important} /* --------------------------------------------------------------- Lista de archivos: una sola columna, tarjetas grises, título e iconos institucionales (estilo de referencia). --------------------------------------------------------------- */ body .wpfd-content-default .wpfd_list{ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:1rem !important; width:100% !important; } /* Placeholders de relleno del grid original */ body .wpfd-content-default .wpfd_list .file.flex_span{display:none !important} body .wpfd-content-default .wpfd_list .file{ display:flex !important; align-items:center !important; width:100% !important; max-width:100% !important; min-width:0 !important; float:none !important; margin:0 !important; padding:1.1rem 1.25rem !important; background:var(--ea2-color-bg-subtle) !important; border:1px solid transparent !important; border-radius:8px !important; box-shadow:none !important; } /* Bloque central: icono a la izquierda, título arriba y metadatos debajo */ body .wpfd-content-default .wpfd_list .file .filecontent{ flex:1 1 auto !important; min-width:0 !important; display:grid !important; grid-template-columns:auto 1fr !important; grid-template-rows:auto auto !important; column-gap:1.1rem !important; row-gap:.4rem !important; align-items:center !important; } body .wpfd-content-default .wpfd_list .file .filecontent > .ext{grid-row:1 / span 2 !important;grid-column:1 !important;align-self:center !important} body .wpfd-content-default .wpfd_list .file .filecontent > h3{grid-column:2 !important;grid-row:1 !important;align-self:end !important;margin:0 !important} body .wpfd-content-default .wpfd_list .file .filecontent > .file-xinfo{grid-column:2 !important;grid-row:2 !important;align-self:start !important} /* Título en azul institucional y en negrita */ body .wpfd-content-default .wpfd_list .file .filecontent h3 a, body .wpfd-content-default .wpfd_list .file .filecontent h3 .f_title{ color:var(--ea2-color-primary) !important; font-weight:700 !important; text-decoration:none !important; } /* Metadatos algo más tenues */ body .wpfd-content-default .wpfd_list .file .file-xinfo{color:var(--ea2-color-text-placeholder) !important} body .wpfd-content-default .wpfd_list .file .file-xinfo span{color:var(--ea2-color-text-muted) !important} /* Columna de botones a la derecha, ancho fijo */ body .wpfd-content-default .wpfd_list .file .file-right{ flex:0 0 210px !important; width:210px !important; margin-left:1.25rem !important; align-self:center !important; } /* Botón Descargar → azul institucional (anula el color inline rojo) */ body .wpfd-content .file-right a.downloadlink, body .wpfd-content a.downloadlink.wpfd_downloadlink{ background-color:var(--ea2-color-primary) !important; border:1px solid var(--ea2-color-primary) !important; color:#fff !important; border-radius:6px !important; height:auto !important; min-height:38px !important; padding:.55rem .75rem !important; line-height:1.4 !important; display:flex !important;align-items:center !important;justify-content:center !important; } body .wpfd-content .file-right a.downloadlink:hover{background-color:var(--ea2-color-secondary) !important;border-color:var(--ea2-color-secondary) !important} /* Botón de vista previa (Avance/Visualizar) → claro con borde */ body .wpfd-content .file-right a.openlink{ background-color:#fff !important; border:1px solid var(--ea2-color-border) !important; color:var(--ea2-color-text-muted) !important; border-radius:6px !important; height:auto !important; min-height:38px !important; padding:.55rem .75rem !important; line-height:1.4 !important; display:flex !important;align-items:center !important;justify-content:center !important; } body .wpfd-content .file-right a.openlink:hover{background-color:var(--ea2-color-bg-hover) !important;border-color:var(--ea2-color-primary) !important;color:var(--ea2-color-primary) !important} /* Responsivo: en móvil, botones full-width debajo del contenido */ @media (max-width:575px){ body .wpfd-content-default .wpfd_list .file{flex-direction:column !important;align-items:stretch !important} body .wpfd-content-default .wpfd_list .file .file-right{width:100% !important;flex:1 1 auto !important;margin:1rem 0 0 !important} } /* =============================================================== Procesos de Compra (plugin DGCP) — estilo institucional. Sobrescribe el