/* ============================================================ GUÍA COLÓN 2026 — Capa CSS custom archivo : templates/guiacolon/guia26.css invocado: Helix Ultimate > Custom CSS (como en ) prefijo : gc- (BEM: .gc-bloque__elemento--modificador) regla : sin !important · sin float · max 3 niveles de nesting ============================================================ */ /* ----------------------------------------------- RESETS GENERALES ----------------------------------------------- */ /* 404 PAGE */ .error-page .error-logo { max-width: 200px; } /* end 404 PAGE */ .mark, mark { padding: 0; } * { letter-spacing: -0.25px; } a { color: var(--gc-color-primary); } a:hover, a:focus, a:active { filter: brightness(1.3); text-decoration: none; } img { /* hack temporal para resolver los íconos que no tienen la clase nombre-campo de tel, whatsapp, etc que están al lado de los datos y como sin img toman display block por defecto */ display: unset; } button { padding: 15px 15px 10px; border-radius: 10px; /* margin: 1rem; */ border: none; background-color: var(--gc-gray-150); color: var(--gc-color-primary); &:hover { color: var(--gc-color-lightgray); background-color: var(--gc-color-darkblue); } } #sp-left .sp-module, #sp-right .sp-module { border: none; margin: 0; border-radius: 0; padding: 0; } /* ----------------------------------------------- 0. FUENTES — Open Sans (local, sin llamada externa) ----------------------------------------------- */ @font-face { font-family: "Open Sans"; src: url("fonts/opensans/open-sans-v44-latin-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("fonts/opensans/open-sans-v44-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("fonts/opensans/open-sans-v44-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("fonts/opensans/open-sans-v44-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("fonts/opensans/open-sans-v44-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("fonts/opensans/open-sans-v44-latin-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* ----------------------------------------------- 1. TOKENS GLOBALES (:root) ----------------------------------------------- */ :root { /* Colores */ --gc-color-primary: #1a5faa; /* azul institucional */ --gc-color-accent: #fed717; /* amarillo (logo / botones) */ --gc-color-accent-hover: #d2aa14; --gc-color-text: #1c1c1e; --gc-color-text-light: #fefefe; --gc-color-bg: #fafafa; --gc-color-border: #dde2ea; --gc-color-lightgray: #e5e5ea; --gc-color-white: #fbfbfb; --gc-color-cianblue: #048ffb; --gc-color-red: #ec430f; --gc-color-darkblue: #154c89; /* Paleta de grises */ --gc-gray: #8e8e93; --gc-gray-100: #f8f9fa; --gc-gray-150: #f2f4f5; --gc-gray-200: #e9ecef; --gc-gray-300: #dee2e6; --gc-gray-400: #cbd1d8; --gc-gray-500: #adb5bd; --gc-gray-600: #6c757d; --gc-gray-700: #495057; --gc-gray-800: #343a40; --gc-gray-900: #212529; --gc-darkgray: #3a3a3c; /* Colores del logotipo */ --gc-yellow-logo: #fed716; /* amarillo símbolo y GUÍA */ --gc-blue-logo: #1a5faa; /* igual que primary; variable independiente */ --gc-white-cian: lab(95.21% -0.88 -3.59); /* blanco-cian letras COLÓN */ --gc-white: #f5f5f5; /* blanco neutro para texto sobre fondos oscuros */ /* Tipografía */ --gc-font-base: "Open Sans", system-ui, -apple-system, Arial, sans-serif; --gc-font-size-base: 1rem; --gc-line-height: 1.5; /* Espaciado */ --gc-space-xs: 0.4rem; --gc-space-sm: 1rem; --gc-space-md: 1.4rem; --gc-space-lg: 2.5rem; --gc-space-xl: 4rem; /* ========================================================== SWITCHER: POSICIÓN DEL SHARE EN ARTICLE-DETAILS 0 = arriba (antes del cuerpo del artículo) 20 = abajo (al pie del artículo) ========================================================== */ --gc-share-article-order: 0; /* Radios */ --gc-radius-sm: 4px; --gc-radius-md: 8px; /* Sombras */ --gc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --gc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); /* Transiciones */ --gc-transition: 150ms ease; /* Z-index */ --gc-z-overlay: 100; --gc-z-modal: 200; } /* CENTRADO GENERAL CON FLEX COLUMN */ .gc-flex-center { display: flex; flex-direction: column; justify-content: center; align-items: center; } /* ----------------------------------------------- 2. BASE TIPOGRÁFICA Y UTILIDADES MÍNIMAS ----------------------------------------------- */ /* (se agregan conforme se necesiten) */ /* ----------------------------------------------- 3. LAYOUT GLOBAL ----------------------------------------------- */ body { font-family: "Roboto", "Open Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } body.gc-home #sp-main-body .container { max-width: 100%; } /* Header Helix Ultimate. */ #sp-header { background-color: var(--gc-color-primary); /* height: 60px; */ @media (max-width: 575px) { /* override del template */ height: unset; } } /* icono menú hamburguesa */ .burger-icon { display: block; /* display: flex; flex-direction: column; justify-content: center; gap: 5px; inline-size: 28px; */ } .burger-icon > span { display: block; inline-size: 28px; block-size: 3px; border-radius: 999px; background-color: var(--gc-white-cian); } /* buscador del header */ #mod-finder-searchword-header { font-size: 1.2rem; border: none; border-radius: 2px; height: 48px; } #sp-main-body { padding-top: 20px; background-color: var(--gc-color-bg); } /* Scope de portada via clase gc-home en el menu item (Helix → body class). Oculta elementos de Joomla/Helix que no deben aparecer en la portada. */ body.gc-home .page-header, body.gc-home .article-info, body.gc-home .article-header { display: none; width: 0; height: 0; margin: 0; } /* Elimina todo padding/margin de los wrappers Bootstrap y Helix que crean la banda entre el header y el hero de portada. Cadena: #sp-main-body > .row > #sp-component > .sp-column > .article-details */ body.gc-home #sp-main-body, body.gc-home #sp-main-body > .row, body.gc-home #sp-component, body.gc-home #sp-component > .sp-column, body.gc-home .article-details, body.gc-home .article-can-edit { padding: 0; margin: 0; } /* ----------------------------------------------- 4. COMPONENTES ----------------------------------------------- */ /* --- gc-home-hero --- Cabezal completo de portada: logo + buscador + accesos rápidos. Fuente HTML: _DEV/_HTMLS/gc-HOME-article.html Vive en el artículo "Inicio" (com_content). ---------------------------------------------------------------- */ .gc-home-hero { background-color: var(--gc-color-primary); padding: var(--gc-space-xl) var(--gc-space-sm) var(--gc-space-lg) var(--gc-space-sm); display: flex; flex-direction: column; align-items: center; font-family: var(--gc-font-base); color: var(--gc-color-text-light); text-align: center; @media (max-width: 575px) { padding: var(--gc-space-lg) var(--gc-space-md); } } /* Bloque: identidad (logo + slogan) */ .gc-home-hero__logo { max-width: 300px; display: block; width: 100%; height: auto; margin-bottom: var(--gc-space-sm); justify-self: center; } .gc-home-hero__subtitle { font-size: clamp(0.9rem, 2vw, 1.3rem); font-weight: 600; margin: 0 0 var(--gc-space-md); color: var(--gc-color-text-light); } /* Bloque: buscador */ .gc-home-hero_search-container { display: flex; justify-content: center; } .gc-home-hero__search { display: flex; width: 100%; max-width: 480px; margin-bottom: var(--gc-space-lg); } input.gc-home-hero__search-input, .gc-home-hero .gc-home-hero__search .gc-home-hero__search-input { flex: 1; padding: 14px 20px !important; font-size: var(--gc-font-size-base); color: var(--gc-color-text); border: none; border-radius: 10px 0 0 10px; outline: none; box-shadow: none; appearance: none; font-size: 1.2rem; -webkit-appearance: none; } .gc-home-hero__search-input::placeholder { color: #9aa5b4; } .gc-home-hero__search-btn { background-color: #fed717; color: var(--gc-color-darkblue); border: none; border-radius: 0 10px 10px 0; padding: 14px 28px; font-size: var(--gc-font-size-base); font-weight: 600; text-transform: uppercase; cursor: pointer; white-space: nowrap; /* letter-spacing: 0.02em; */ transition: background-color var(--gc-transition); &:hover, &:focus-visible { background-color: var(--gc-color-accent-hover); } } /* Bloque: accesos rápidos — grid 4 → 2 columnas */ .gc-home-hero__quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gc-space-sm); width: 100%; max-width: 840px; margin-bottom: var(--gc-space-sm); @media (max-width: 575px) { grid-template-columns: repeat(2, 1fr); gap: var(--gc-space-sm); } } .gc-home-hero__quick-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gc-space-xs); padding: var(--gc-space-sm) var(--gc-space-xs); border: 2px solid rgba(255, 255, 255, 0.55); border-radius: var(--gc-radius-md); color: var(--gc-color-text-light); text-decoration: none; font-size: 1rem; font-weight: 500; line-height: 1.3; transition: border-color var(--gc-transition), background-color var(--gc-transition); &:hover, &:focus-visible, &:focus { border-color: var(--gc-blue-logo); background-color: #2b83cc; color: var(--gc-color-text-light); text-decoration: none; box-shadow: 2px 4px 10px 0px rgba(0, 13, 23, 0.22); } &:active { background-color: var(--gc-color-primary); color: var(--gc-color-text-light); text-decoration: none; box-shadow: inset 2px 2px 6px 0px rgba(0, 13, 23, 0.28); transform: translateY(2px); } } .gc-home-hero__quick-icon { width: 48px; height: auto; object-fit: contain; flex-shrink: 0; } /* Bloque: accesos secundarios — grid 2 → 1 columna */ .gc-home-hero__secondary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gc-space-sm); width: 100%; max-width: 600px; @media (max-width: 575px) { grid-template-columns: 1fr; gap: var(--gc-space-sm); } } .gc-home-hero__secondary-link { display: flex; align-items: center; justify-content: center; padding: var(--gc-space-sm) var(--gc-space-md); border: 2px solid rgba(255, 255, 255, 0.55); border-radius: var(--gc-radius-md); color: var(--gc-color-text-light); text-decoration: none; font-size: 1rem; font-weight: 500; transition: border-color var(--gc-transition), background-color var(--gc-transition); &:hover, &:focus-visible { border-color: var(--gc-color-text-light); background-color: rgba(255, 255, 255, 0.1); color: var(--gc-color-text-light); text-decoration: none; } } /* ----------------------------------------------- 4a. gc-hero-module — Modulo hero para la navegación ----------------------------------------------- */ /* --- gc-hero-module --- Cabezal de portada: logo + buscador . Fuente HTML: _DEV/_HTMLS/gc-HERO-module.html publicado en position 1 al tope de la estructura ---------------------------------------------------------------- */ .gc-hero-module { padding: 3rem 1rem 0; } /* ----------------------------------------------- /* ----------------------------------------------- 4b. gc-home-hooks — Categorías + preguntas gancho ----------------------------------------------- */ .gc-home-hooks { background-color: var(--gc-white-cian); padding: var(--gc-space-xl) var(--gc-space-sm); display: flex; flex-direction: column; align-items: center; font-family: var(--gc-font-base); text-align: center; box-sizing: border-box; } /* Categorías principales — pills en flex wrap */ .gc-home-hooks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gc-space-md); width: min(100%, 1280px); margin-bottom: var(--gc-space-md); box-sizing: border-box; } .gc-home-hooks__grid > * { min-width: 0; } @media (max-width: 575px) { .gc-home-hooks { padding: var(--gc-space-lg) var(--gc-space-sm); } .gc-home-hooks__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gc-space-sm); margin-bottom: var(--gc-space-sm); } } @media (max-width: 480px) { .gc-home-hooks__grid { grid-template-columns: 1fr; justify-items: stretch; } .gc-home-hooks__btn { min-width: 0; font-size: 1.15rem; padding: 1rem 0.9rem; } } .gc-home-hooks__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; padding: clamp(1rem, 1.5vw, 2.5rem) clamp(1rem, 2vw, 2.5rem); background-color: #fff; color: var(--gc-color-primary); border: 1.2px solid var(--gc-color-cianblue); border-radius: 10px; text-decoration: none; font-size: 1.4rem; font-weight: 500; line-height: 1.15; text-align: center; transition: background-color var(--gc-transition), color var(--gc-transition), box-shadow var(--gc-transition), transform var(--gc-transition); &:hover, &:focus-visible { background-color: var(--gc-color-primary); color: #fff; text-decoration: none; border-color: var(--gc-white-cian); box-shadow: 2px 4px 10px 0px rgba(0, 13, 23, 0.22); } &:active { background-color: var(--gc-color-primary); color: #fff; box-shadow: inset 2px 2px 6px 0px rgba(0, 13, 23, 0.28); transform: translateY(1px); } } .gc-home-hooks__btn-icon { width: 1.3em; height: 1.3em; flex: 0 0 auto; } .gc-home-hooks__btn-label { display: inline-block; } /* Preguntas gancho — 2 columnas → 1 columna */ .gc-home-hooks__hooks { display: grid; max-width: 1280px; gap: 0.75rem; grid-template-columns: 1fr 1fr; width: 100%; border-radius: var(--gc-radius-md); overflow: hidden; text-align: left; margin: var(--gc-space-lg) 0; @media (max-width: 575px) { grid-template-columns: 1fr; } } .gc-home-hooks__hook-btn { display: flex; gap: 10px; align-items: center; padding: 2rem var(--gc-space-md); font-size: 1.25rem; color: var(--gc-color-primary); text-decoration: none; font-weight: 400; line-height: 1.5; border-bottom: 1px solid var(--gc-gray-400); border-radius: 25px; background-color: #fff; transition: background-color var(--gc-transition), color var(--gc-transition); &::before { content: "›"; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--gc-yellow-logo); flex-shrink: 0; } &:hover, &:focus, &:focus-visible { background-color: var(--gc-color-primary); color: #fff; text-decoration: none; } } /* CTA final */ .gc-home-hooks__cta-wrap { display: flex; justify-content: center; align-items: center; padding: var(--gc-space-md) 0; } .gc-home-hooks__cta { display: inline-flex; align-items: center; justify-content: center; padding: 1.5rem 4rem; background-color: #fff; color: var(--gc-color-primary); border-radius: 50px; text-decoration: none; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.5px; box-shadow: 2px 4px 10px 0px rgba(0, 13, 23, 0.15); transition: background-color var(--gc-transition), box-shadow var(--gc-transition), transform var(--gc-transition); &:hover, &:focus-visible { background-color: var(--gc-color-primary); color: var(--gc-white-cian); text-decoration: none; box-shadow: 2px 4px 14px 0px rgba(0, 13, 23, 0.22); } &:active { transform: translateY(1px); box-shadow: inset 2px 2px 6px 0px rgba(0, 13, 23, 0.15); } } /* ------- Ajuste intermedio: evitar overflow entre 576px y 764px ------- */ @media (min-width: 576px) and (max-width: 764px) { .gc-home-hero { padding: var(--gc-space-lg) var(--gc-space-sm); } .gc-home-hero__quick { grid-template-columns: repeat(2, 1fr); gap: var(--gc-space-sm); } .gc-home-hooks { padding: var(--gc-space-lg) var(--gc-space-sm); } .gc-home-hooks__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gc-space-sm); } .gc-home-hooks__btn { min-width: 0; padding: 1rem 0.875rem; font-size: 1.2rem; } .gc-home-hooks__btn-label { overflow-wrap: anywhere; } .gc-home-hooks__hooks { grid-template-columns: 1fr; gap: var(--gc-space-sm); } .gc-home-hooks__hook-btn { min-width: 0; padding: 1.25rem var(--gc-space-sm); font-size: 1.1rem; } } /*----------------------------------------------- 5. SCROLL REVEAL DEL HEADER (global) ----------------------------------------------- */ /* El header permanece oculto mientras el sentinela inicial (home: __subtitle / resto: page-title o page-header) es visible. JS (gc.header) agrega gc-header-reveal-enabled y gc-header-visible. */ body.gc-header-reveal-enabled #sp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; /* iguala el z-index de #sp-header.header-sticky de Helix */ opacity: 0; visibility: hidden; animation: none; /* cancela spFadeIn .5s de Helix — sin esto el header aparece al cargar */ transition: opacity 300ms ease, visibility 300ms ease; } body.gc-header-reveal-enabled #sp-header.header-sticky { animation: none; /* cancela spFadeInDown .5s que Helix aplica al activar sticky */ } body.gc-header-reveal-enabled.gc-header-visible #sp-header { opacity: 1; visibility: visible; } /* ----------------------------------------------- 6. BREADCRUMB (.sp-page-title via Helix Page Title) ----------------------------------------------- */ .breadcrumb-item + .breadcrumb-item::before { padding: 0 2px; } .breadcrumb { --bs-breadcrumb-padding-x: 10px; --bs-breadcrumb-padding-y: 0; --bs-breadcrumb-margin-bottom: 0; --bs-breadcrumb-bg: ; --bs-breadcrumb-border-radius: ; --bs-breadcrumb-divider-color: #6c757d; --bs-breadcrumb-item-padding-x: 2px; --bs-breadcrumb-item-active-color: #6c757d; display: flex; flex-wrap: wrap; padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x); margin-bottom: var(--bs-breadcrumb-margin-bottom); font-size: var(--bs-breadcrumb-font-size); list-style: none; background-color: var(--bs-breadcrumb-bg); border-radius: var(--bs-breadcrumb-border-radius); } .sp-page-title { background: none; background-color: var(--gc-gray-600); padding: 1rem 0; } .mod-breadcrumbs__item.breadcrumb-item > a.pathway > span { &:before { content: ""; display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.4em; vertical-align: -0.08em; background: url("../../images/svg/guiacolon-isotipo.svg") no-repeat center; background-size: contain; } } .breadcrumb-item + .breadcrumb-item::before { content: ">"; } .sp-page-title .breadcrumb { font-size: 1rem; font-weight: 400; padding: 0 !important; /* este !important es una excepción para sobreescribir el !important de bootstrap */ justify-content: center; & span.divider.icon-location.icon-fw { /* elimino el icono location por defecto del breadcrumb */ display: none; } } /* En categoria de 1er nivel se oculta solo breadcrumb (se mantiene H1) */ body.view-category.gc-hide-cat-lvl1-breadcrumb .sp-page-title .mod-breadcrumbs__wrapper { display: none; } /* el heading se muestra y se utiliza */ .sp-page-title-heading { display: block; text-align: center; } /* En la home no tiene sentido el bloque page-title */ body.gc-home .sp-page-title { display: none; } /* ----------------------------------------------- 7. HELPERS DE COMPATIBILIDAD ----------------------------------------------- */ /* (solo si son inevitables y bien justificados) */ /* ----------------------------------------------- 8. PÁGINAS DE PLAN (.gc-plan-basico / .gc-plan-destacado) ----------------------------------------------- */ .gc-planes-list #sp-main-body { background-color: var(--gc-color-white); padding-top: 50px; } .gc-plan-basico { max-width: 680px; } body.gc-plan .article-details, .article-details:has(.gc-plan) { max-width: 840px; justify-self: center; margin-top: 2rem; } .gc-plan, .gc-plan-basico, .gc-plan-destacado, .gc-plan-banner, .gc-plan-payment, .gc-plan-confirmation { font-family: var(--gc-font-base); text-align: center; } /* Wrappers de texto: solo separan bloques. Si el contenido ya fluye bien, no sumar layout extra. */ .gc-plan__header, .gc-plan-basico__header, .gc-plan-destacado__intro-block, .gc-plan-banner__header, .gc-plan-payment__header, .gc-plan-confirmation__header { margin-bottom: var(--gc-space-lg); } .gc-plan__title, .gc-plan-basico__title, .gc-plan-destacado__title, .gc-plan-banner__title, .gc-plan-payment__title, .gc-plan-confirmation__title { margin-bottom: var(--gc-space-md); font-weight: bold; font-size: 32px; color: var(--gc-color-darkblue); padding: 20px; background-color: var(--gc-color-accent); } .gc-plan__text, .gc-plan-basico__intro, .gc-plan-destacado__lead, .gc-plan-destacado__support, .gc-plan-destacado__cta-copy, .gc-plan-banner__intro, .gc-plan-banner__support, .gc-plan-banner__cta-copy, .gc-plan-payment__lead, .gc-plan-confirmation__lead, .gc-plan-confirmation__text, .gc-plan-payment__help, .gc-plan-payment__option-text { font-size: 1rem; line-height: 1.7; /* color: var(--gc-gray-900); */ margin: 10px 0; } .gc-plan-payment__help { margin-top: 2rem; } .gc-plan__panel, .gc-plan-confirmation__panel { background-color: var(--gc-gray-150); margin: 1rem 0; } .gc-plan__link, .gc-plan-basico__plans-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--gc-color-primary); font-weight: 600; text-decoration: none; &:hover, &:focus-visible { text-decoration: underline; } } .gc-plan__form-area, .gc-plan-basico__form-area, .gc-plan-destacado__form-area, .gc-plan-banner__form-area, .gc-plan__panel, .gc-plan-confirmation__panel, .gc-plan-payment__option { /* border: 1px solid var(--gc-color-border); border-radius: var(--gc-radius-md); */ overflow: hidden; } .gc-plan__text strong, .gc-plan-banner__cta-copy strong, .gc-plan-banner__intro strong, .gc-plan-payment__lead strong, .gc-plan-confirmation__lead strong { font-weight: 700; color: var(--gc-color-text); } .gc-plan-payment__price { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--gc-color-primary); } .gc-plan-payment__options { display: grid; gap: var(--gc-space-md); } .gc-plan-payment__option { padding: var(--gc-space-md); display: grid; gap: 0.9rem; } .gc-plan-payment__option-title { margin: 0; font-size: 1.15rem; line-height: 1.2; color: var(--gc-color-text); } .gc-plan-payment__qr-link { display: flex; justify-content: center; padding: 0.75rem; border: 1px solid var(--gc-color-border); background: #fff; text-decoration: none; } .gc-plan-payment__subscription-logo { width: 100%; max-width: 300px; height: auto; display: block; justify-self: center; padding-top: 2rem; } .gc-plan-payment--destacado { user-select: none; } .gc-plan-payment--destacado .gc-plan-payment__header { background-color: var(--gc-color-accent); } .gc-plan-payment--destacado .gc-plan-payment__option, .gc-plan-payment--destacado .gc-plan-payment__header { border: 2px dotted var(--gc-color-accent); padding: var(--gc-space-md); &:hover { background-color: var(--gc-color-accent); filter: brightness(1.1); } } .gc-plan-payment--destacado .gc-plan-payment__brand-icon { justify-self: center; max-width: 200px; display: block; margin: 0 0 0.75rem; } .gc-plan-payment--destacado .gc-plan-payment__title { font-size: 1.4rem; text-transform: uppercase; display: inline-block; border: dotted 1px var(--gc-color-darkblue); } .gc-plan-payment--destacado .gc-plan-payment__lead { font-weight: 600; margin-top: 1.5rem; line-height: 1.45; } .gc-plan-payment--destacado .gc-plan-payment__price { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.35rem; padding: 0.45rem 1.05rem; background: var(--gc-color-primary); color: #fff; border-radius: 8px; font-size: 1.8rem; } .gc-plan-payment--destacado .gc-emoji-hex { display: inline-block; margin-top: 1rem; font-size: 1.89rem; } .gc-plan-payment--destacado .gc-plan-payment__option-title { font-size: 1.5rem; font-weight: 700; border: dotted 1px var(--gc-color-darkblue); display: flex; text-transform: uppercase; width: 100%; align-items: center; justify-content: center; padding: 1rem 0; background-color: var(--gc-color-text-light); } .gc-plan-payment--destacado .gc-plan-payment__option-text { font-size: 1rem; line-height: 1.35; } .gc-plan-payment__secure-brand { margin-top: var(--gc-space-md); padding-top: var(--gc-space-md); border-top: 1px solid var(--gc-gray-400); display: flex; justify-content: center; } .gc-plan-payment__secure-brand-logo { width: 100%; max-width: 320px; height: auto; } .gc-plan-payment__qr { width: 100%; max-width: 320px; height: auto; } .gc-plan-payment__cta, .gc-plan-confirmation__whatsapp { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.8rem 1.15rem; border-radius: 15px; background: var(--gc-color-primary); color: #fff; font-weight: 700; text-decoration: none; &:hover, &:focus-visible, &:focus, &:active { background: #154f8e; color: #fff; } } .gc-plan__panel, .gc-plan-confirmation__panel { text-align: center; } .gc-plan-confirmation--payment .gc-plan-confirmation__panel { border-color: rgba(29, 111, 184, 0.25); } .gc-plan-confirmation__whatsapp--image { display: inline-block; justify-self: center; padding: 0; min-height: 0; border: 0; background: transparent; } .gc-plan-confirmation__whatsapp--image:hover, .gc-plan-confirmation__whatsapp--image:focus-visible { background: transparent; } .gc-plan-confirmation__whatsapp-image { display: block; width: 100%; max-width: 320px; height: auto; margin-bottom: 10px; } .gc-plan-confirmation__home { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; margin-top: 1rem; color: var(--gc-color-primary); font-weight: 700; text-decoration: none; letter-spacing: 0.02em; &:hover, &:focus-visible { color: #154f8e; text-decoration: underline; } } .gc-plan-confirmation__home-icon { font-size: 1.1rem; line-height: 1; } .gc-plan-confirmation__home-text { line-height: 1; } @media (min-width: 860px) { .gc-plan-payment__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gc-plan__alt-contact, .gc-plan-basico__alt-contact { margin: var(--gc-space-md) 0 0; font-size: 0.95rem; line-height: 1.8; color: var(--gc-color-text); text-align: center; } .gc-plan-basico__mail-icon-wrap { display: flex; justify-content: center; margin-top: var(--gc-space-md); color: var(--gc-color-primary); } .gc-plan-basico__mail-icon { width: 40px; height: 40px; display: block; } .gc-plan-confirmation__mail-icon-wrap { display: flex; justify-content: center; margin-top: var(--gc-space-md); color: var(--gc-color-primary); } .gc-plan-confirmation__mail-icon { width: 40px; height: 40px; display: block; } .gc-plan__mail-link, .gc-plan-basico__mail-link, .gc-plan-confirmation__mail-link { color: var(--gc-color-primary); text-decoration: none; &:hover, &:focus-visible { text-decoration: underline; } } .gc-plan-destacado__lead strong, .gc-plan-destacado__cta-copy strong { font-weight: 700; color: var(--gc-color-text); } .gc-plan__social-links, .gc-plan-destacado__social-links { display: inline-flex; flex-direction: column; gap: 0.35rem; margin: 1rem 0; /* align-content: center; */ justify-content: center; } .gc-plan__social-link, .gc-plan-destacado__social-link { color: var(--gc-color-primary); font-weight: 600; text-decoration: none; padding: 10px 20px; border-radius: var(--gc-radius-md); background-color: var(--gc-color-primary); color: var(--gc-color-white); &:hover, &:focus-visible { /* text-decoration: underline; */ color: var(--gc-color-white); } } .gc-plan-form { display: flex; justify-content: center; text-align: left; } /* ----------------------------------------------- 8a. FORMULARIOS CONVERT FORMS (planes) Estilo compartido para plan-basico y banner-publicitario. ----------------------------------------------- */ body.com_convertforms.view-form #sp-component .convertforms { width: min(100%, 46rem); margin: 0 auto; padding: calc(var(--gc-space-md) + 0.5rem) var(--gc-space-md) var(--gc-space-md); border: 1px solid var(--gc-color-border); border-radius: 12px; background-color: #fff; box-shadow: var(--gc-shadow-sm); } body.com_convertforms.view-form #sp-component .convertforms .cf-content { margin-bottom: var(--gc-space-md); } body.com_convertforms.view-form #sp-component .convertforms .cf-content-img { display: flex; justify-content: center; padding-block: 1.6rem; margin-bottom: var(--gc-space-sm); } body.com_convertforms.view-form #sp-component .convertforms .cf-content-img img { display: block; max-width: min(100%, 20rem); height: auto; } body.com_convertforms.view-form #sp-component .convertforms .cf-form-wrap { width: 100%; } body.com_convertforms.view-form #sp-component .convertforms .cf-control-group[data-type="heading"] > .cf-heading { margin: 0 0 var(--gc-space-md); color: var(--gc-color-darkblue); font-weight: 700; line-height: 1.2; text-align: center; } body.com_convertforms.view-form #sp-component .convertforms .cf-control-group[data-type="heading"] > h1.cf-heading { font-size: clamp(1.8rem, 2.8vw, 2.1rem); } body.com_convertforms.view-form #sp-component .convertforms .cf-control-group[data-type="heading"] > h2.cf-heading { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-top: 0.2rem; } body.com_convertforms.view-form #sp-component .convertforms .cf-control-group[data-type="heading"] > h5.cf-heading { margin-top: var(--gc-space-sm); font-size: 1rem; font-weight: 600; color: var(--gc-gray-700); } body.com_convertforms.view-form #sp-component .convertforms .cf-control-group { margin-bottom: var(--gc-space-sm); } body.com_convertforms.view-form #sp-component .convertforms .cf-label { display: inline-block; margin-bottom: 0.35rem; color: var(--gc-gray-800); font-weight: 600; } body.com_convertforms.view-form #sp-component .convertforms .cf-input { width: 100%; min-height: 2.9rem; padding: 0.72rem 0.85rem; border: 1px solid var(--gc-gray-400); border-radius: 10px; background-color: #fff; color: var(--gc-color-text); transition: border-color var(--gc-transition), box-shadow var(--gc-transition); } body.com_convertforms.view-form #sp-component .convertforms textarea.cf-input { min-height: 8rem; resize: vertical; } body.com_convertforms.view-form #sp-component .convertforms .cf-input:focus, body.com_convertforms.view-form #sp-component .convertforms .cf-input:focus-visible { border-color: var(--gc-color-primary); box-shadow: 0 0 0 3px rgba(26, 95, 170, 0.15); outline: none; } body.com_convertforms.view-form #sp-component .convertforms .tf-file-upload-editor { border: 1px dashed var(--gc-gray-500); border-radius: 10px; background-color: var(--gc-gray-100); } body.com_convertforms.view-form #sp-component .convertforms .tf-file-upload-editor .dz-message { padding: 1.25rem 1rem; } body.com_convertforms.view-form #sp-component .convertforms .cf-btn { min-height: 2.9rem; padding: 0.75rem 1.2rem; border: 0; border-radius: 10px; background-color: var(--gc-color-primary); color: #fff; font-weight: 700; letter-spacing: 0.01em; transition: background-color var(--gc-transition), transform var(--gc-transition); } body.com_convertforms.view-form #sp-component .convertforms .cf-btn:hover, body.com_convertforms.view-form #sp-component .convertforms .cf-btn:focus-visible { background-color: var(--gc-color-darkblue); } body.com_convertforms.view-form #sp-component .convertforms .cf-btn:active { transform: translateY(1px); } @media (max-width: 575px) { body.com_convertforms.view-form #sp-component .convertforms { padding: var(--gc-space-sm); border-radius: 10px; } } /* ----------------------------------------------- 10. LISTADO DE PLANES (.gc-planes-list) muestra las opciones comparativas de los diferentes planes ----------------------------------------------- */ .gc-planes-list { /* inline-size: 100%; */ /* padding: var(--gc-space-lg) var(--gc-space-sm); */ font-family: var(--gc-font-base); } .gc-planes-list .article-details { padding: 0; max-width: 700px; justify-self: center; } /* Encabezado */ .gc-planes-list__header { text-align: center; margin-bottom: var(--gc-space-lg); } .gc-planes-list__title { font-size: 2rem; font-weight: 300; color: var(--gc-color-text); margin-bottom: var(--gc-space-sm); } .gc-planes-list__steps { margin: 0 0 0.65rem; font-size: 1.05rem; font-weight: 700; color: var(--gc-color-primary); } .gc-planes-list__perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .gc-planes-list__perks li { font-size: 0.95rem; color: #555; } /* Grid de tarjetas */ .gc-planes-list__grid { display: flex; align-items: flex-start; gap: var(--gc-space-md); justify-content: center; } /* Tarjeta base */ .gc-planes-list__card { flex: 1; min-width: 0; border: 1px solid var(--gc-color-border); border-radius: var(--gc-radius-md); background: #fff; box-shadow: var(--gc-shadow-sm); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow var(--gc-transition); } .gc-planes-list__card:hover { box-shadow: var(--gc-shadow-md); } /* Card featured (Anuncio Destacado) — ligeramente más grande */ .gc-planes-list__card--featured { box-shadow: var(--gc-shadow-md); transform: scale(1.04); transform-origin: center top; border-color: var(--gc-color-primary); } .gc-planes-list__card--featured:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } /* Cabecera de tarjeta */ .gc-planes-list__card-header { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--gc-color-border); display: flex; flex-direction: column; justify-content: center; align-items: center; } .gc-planes-list__card-name { text-align: center; font-size: 1.2rem; font-weight: 600; color: var(--gc-color-text); margin: 0 0 0.75rem; } /* Precio */ .gc-planes-list__card-price { display: flex; align-items: baseline; gap: 0.1rem; } .gc-planes-list__card-price-symbol { font-size: 1.1rem; color: var(--gc-color-primary); font-weight: 300; } .gc-planes-list__card-price-amount { font-size: 2.8rem; font-weight: 300; color: var(--gc-color-primary); line-height: 1; } .gc-planes-list__card-price-amount--free { font-size: 2.8rem; font-weight: 300; color: var(--gc-color-primary); } .gc-planes-list__card-price-period { font-size: 0.85rem; color: #888; margin-left: 2px; } /* Features */ .gc-planes-list__card-features { list-style: none; padding: 1rem 1.5rem; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .gc-planes-list__card-features li { font-size: 0.85rem; color: #555; line-height: 1.4; } /* Footer / CTA */ .gc-planes-list__card-footer { padding: 1rem 1.5rem 1.5rem; } .gc-planes-list__card-cta { display: block; text-align: center; border: 1px solid var(--gc-color-primary); border-radius: var(--gc-radius-sm); color: var(--gc-color-primary); background: transparent; font-size: 1rem; font-weight: 500; padding: 1rem; text-decoration: none; transition: background var(--gc-transition), color var(--gc-transition); } .gc-planes-list__card-cta:hover { background: var(--gc-color-primary); color: #fff; } /* CTA del plan featured con fondo sólido */ .gc-planes-list__card-cta--featured { background: var(--gc-color-primary); color: #fff; } .gc-planes-list__card-cta--featured:hover { background: #154f8e; color: #fff; } /* Sección de pago */ .gc-planes-list__payment { text-align: center; margin-top: var(--gc-space-lg); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .gc-planes-list__payment-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--gc-color-text); margin: 0; } .gc-planes-list__payment-logo { max-width: 180px; height: auto; } /* Responsive */ @media (max-width: 768px) { .gc-planes-list__grid { flex-direction: column; align-items: stretch; } .gc-planes-list__card--featured { transform: none; order: -1; } .gc-planes-list__title { font-size: 1.5rem; } } /* ----------------------------------------------- 11. SECCIÓN DIRECTORIO DE CATEGORÍAS .gc-cats-section (wrapper en el artículo) .gc-cats-list (módulo Custom HTML) ----------------------------------------------- */ /* Sección wrapper */ .gc-cats-section { background: var(--gc-color-bg); padding: var(--gc-space-xl) var(--gc-space-md); display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Título h2 genérico para secciones de portada */ .gc-home-section__title { font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--gc-color-primary); margin: 10px 0 var(--gc-space-lg); padding-bottom: var(--gc-space-xs); display: inline-block; border-bottom: 3px solid var(--gc-yellow-logo); } /* Grid de categorías — 4 columnas, flujo vertical */ .gc-cats-list { column-count: 4; column-gap: var(--gc-space-lg); width: 100%; max-width: 1320px; } /* Cada ítem de categoría */ .gc-cats-list__item { break-inside: avoid; padding: 0.75rem 0; border-bottom: 1px solid var(--gc-color-accent); /* margin-bottom: 1rem; */ } /* Nombre de categoría principal */ .gc-cats-list__name { display: block; font-weight: 700; /* font-size: 1rem; */ color: var(--gc-color-darkblue); /* text-decoration: none; */ margin-bottom: 4px; line-height: 1.3; } .gc-cats-list__name:hover { color: var(--gc-color-primary); } /* Subcategorías */ .gc-cats-list__subs { font-weight: 500; font-size: 0.9rem; color: var(--gc-gray); line-height: 1.4; } .gc-cats-list__subs a { color: var(--gc-color-darkgray); text-decoration: none; white-space: nowrap; } .gc-cats-list__subs a:hover { color: var(--gc-color-primary); text-decoration: underline; } /* Responsive */ @media (max-width: 768px) { .gc-cats-list { column-count: 2; } } @media (max-width: 575px) { .gc-cats-list { column-count: 1; } } /* ----------------------------------------------- 9b.  MENÚ LATERAL DE CATEGORÍAS (.gc-aside-cats) left position ----------------------------------------------- */ #sp-left .sp-module { padding: 0; } .gc-aside-cats { background: #fff; } .gc-aside-cats__toggle { align-items: center; justify-content: space-between; gap: 0.75rem; display: none; width: 100%; border: 0; border-bottom: 1px solid var(--gc-color-border); background: var(--gc-gray-600); color: var(--gc-color-text-light); text-align: left; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600; cursor: pointer; } .gc-aside-cats__toggle::after { content: "▾"; margin-inline-start: auto; transition: transform var(--gc-transition); } .gc-aside-cats.is-open .gc-aside-cats__toggle::after { transform: rotate(180deg); } .gc-aside-cats__list { list-style: none; padding: 0; margin: 0; } .gc-aside-cats__list > a { display: block; text-decoration: none; } .gc-aside-cats__list > a + a .gc-aside-cats__item { border-top: 1px solid var(--gc-gray-400); } .gc-aside-cats__item { font-size: 14px; padding: 0.55rem 0.75rem; color: var(--gc-color-darkblue); line-height: 1.5; list-style: none; } .gc-aside-cats__list > a:hover .gc-aside-cats__item, .gc-aside-cats__list > a:focus-visible .gc-aside-cats__item, .gc-aside-cats__list > a.is-active .gc-aside-cats__item { background: var(--gc-color-cianblue); color: var(--gc-white-cian); } @media (max-width: 991px) { .gc-aside-cats__item { /* background-color: #fff; */ color: var(--gc-white-cian); font-size: 1.1rem; } .gc-aside-cats__toggle { display: flex; } .gc-aside-cats__list { display: none; } .gc-aside-cats.is-open .gc-aside-cats__list { display: block; background-color: var(--gc-blue-logo); /* background-color: var(--gc-gray-600); */ filter: brightness(0.9); } .gc-aside-cats__list > a:hover .gc-aside-cats__item, .gc-aside-cats__list > a:focus-visible .gc-aside-cats__item, .gc-aside-cats__list > a.is-active .gc-aside-cats__item { filter: brightness(1); background-color: var(--gc-gray-600); } .gc-aside-cats__list > a + a .gc-aside-cats__item { border-color: var(--gc-gray-400); } .sp-page-title .container { position: relative; padding-right: 4rem; } .gc-aside-cats--header { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: transparent; z-index: 50; } .gc-aside-cats--header .gc-aside-cats__toggle { /* display: grid; */ /* place-items: center; */ justify-content: start; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0; font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden; position: relative; } .gc-aside-cats--header .gc-aside-cats__toggle::after { content: ""; position: static; width: 1.1rem; height: 2px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; transition: none; margin: 0; } .gc-aside-cats--header.is-open .gc-aside-cats__toggle::after { transform: none; } .gc-aside-cats--header .gc-aside-cats__list { position: absolute; right: 0; top: calc(100% + 1.1rem); width: min(90vw, 380px); max-height: 400px; overflow: auto; /* border: 1px solid var(--gc-color-border); */ /* background: rgba(255, 255, 255, 0.99); */ /* background-color: #048ffb; */ box-shadow: var(--gc-shadow-md); border-radius: 0 0 10px 10px; } } /* ----------------------------------------------- 12. TELÉFONOS DE INTERÉS (.gc-tels) ----------------------------------------------- */ .gc-tels { list-style: none; padding: 0; margin: 0; max-width: 840px; } .gc-tels__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--gc-color-border); color: var(--gc-color-primary); flex-wrap: wrap; } .gc-tels__icon { width: 24px; height: 24px; flex-shrink: 0; } .gc-tels__number { font-size: 1.2rem; font-weight: 700; white-space: nowrap; } .gc-tels__label { color: var(--gc-color-text); font-size: 1rem; } /* Sección wrapper en el artículo home */ .gc-tels-section { background: var(--gc-white-cian); padding: var(--gc-space-lg) var(--gc-space-md); display: grid; justify-items: center; } /* Título: hereda de .gc-home-section__title (ver sección 9) */ .gc-tels-section .gc-tels { inline-size: min(100%, 740px); @media (min-width: 768px) { inline-size: min(100%, 1080px); columns: 2; column-gap: 3rem; } } /* Evitar que un ítem se parta entre columnas */ .gc-tels-section .gc-tels li, .gc-tels-section .gc-tels p { break-inside: avoid; } /* ------- Cartelera de ayuda ante violencia doméstica (módulo Custom HTML) ------- */ .gc-home-violencia-domestica { display: grid; justify-items: center; width: 100%; max-width: 820px; background: #fff; padding: 1.4rem; text-align: center; justify-self: center; margin: 2rem 0; @media (max-width: 480px) { margin: 0; } } /* CTAs: botones de llamada */ .gc-violencia__ctas { display: grid; gap: 0.7rem; margin: 0.9rem 0 1rem; justify-items: center; } .gc-violencia__cta { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 700px; gap: 0.55rem; padding: 0.8rem 0.9rem; border-radius: 10px; background: var(--gc-color-primary); color: var(--gc-color-text-light); box-shadow: var(--gc-shadow-sm); font-size: 1.1rem; text-decoration: none; &:hover, &:focus { filter: brightness(1.1); color: var(--gc-color-text-light); } @media (max-width: 991px) { flex-wrap: wrap; } } .gc-violencia__cta--fijo { background: var(--gc-color-red); font-size: 1.4rem; font-weight: 800; } .gc-violencia__cta-icon { width: 22px; height: 22px; flex-shrink: 0; } .gc-violencia__cta-number { font-weight: 800; letter-spacing: 0.3px; } /* Textos del bloque — heredan text-align, color y line-height del padre */ .gc-violencia__lead { color: var(--gc-color-darkblue); font-size: 1.2rem; font-weight: 700; } .gc-violencia__no-registro { text-decoration: underline; } /* ----------------------------------------------- 13. LISTADO DE CATEGORÍA 14. FICHA DE COMERCIO — pendiente ----------------------------------------------- */ /* todos los articulos en listado de articulos la clase añadida por joomla es article-list gc-article */ .gc-article { background-color: var(--gc-color-white); /* background-color: yellow !important; */ } .blog.com-content-category-blog h1 { font-size: 1.4rem; color: red; } /* -------- 📄 ARTICULOS COMUNES 📄 --------- */ /* estilos generales para artículos en LISTADOS y DESPLEGADOS */ /* estilos para ARTICULOS EN LISTADOS article-list es el artículo en los listados */ .article-list .article .article-header h1, .article-list .article .article-header h2, .article-list .article .article-header h4 { font-size: 1.4rem; margin: 0 0 0.25rem 0; } .article-list .article { border: none; border-bottom: solid 1px var(--gc-gray-300); margin-bottom: 1rem; } .article-list .article hr { border: none; } /* Listados por etiqueta: se alinean visualmente al blog de categoría. */ .view-tag.layout-blog .com-tags-tag__category { list-style: none; padding: 0; margin: 0; border: 0; background: transparent; } .view-tag.layout-blog .com-tags-tag__category > .list-group-item { border: none; border-bottom: solid 1px var(--gc-gray-300); margin-bottom: 1rem; padding: 0 0 1rem; background: transparent; border-radius: 0; } .view-tag.layout-blog .com-tags-tag__category > .list-group-item:last-child { margin-bottom: 0; } .view-tag.layout-blog .com-tags-tag__category > .list-group-item > h3 { font-size: 1.4rem; margin: 0 0 0.25rem; } .view-tag.layout-blog .com-tags-tag__category > .list-group-item > h3 a { color: inherit; text-decoration: none; } .view-tag.layout-blog .com-tags-tag__category > .list-group-item > .tag-body { display: block; } .view-tag.layout-blog .com-tags-tag__category > .list-group-item > .tag-body img#nombrecampo { width: 20px; height: 20px; } /* 📖 ARTICULO DESPLEGADO -------------------------- */ .article-details .article-can-edit { position: absolute; width: 0; height: 0; /* ⚠️ (sobreescribiendo bootstrap)*/ display: none !important; } /* 👉🏼 article-details es el artículo desplegado */ .article-details { position: relative; display: flex; flex-direction: column; padding: 1rem; border-bottom: solid 1px var(--gc-gray-400); } /* ------- Social share: reposicionado al pie del artículo via flex order ------- */ /* El bloque lo inyecta Helix ANTES del articleBody. Controlar con --gc-share-article-order (buscar "SWITCHER" en :root). */ .article-details .article-ratings-social-share { /* Override de ubicación del módulo share */ position: absolute; right: 0; order: var(--gc-share-article-order); padding: 0; border: 0; padding-right: 1rem; } /* En Home ocultamos solo el wrapper automático de Helix. El módulo manual {loadmoduleid 38} vive en .gc-home-share y debe mostrarse. */ body.gc-home .article-ratings-social-share { display: none; } /* Scope global para pantallas donde NO debe aparecer share links. Se usa con clase de menú/body: gc-nosharelink. */ body.gc-nosharelink .article-ratings-social-share { display: none !important; } .gc-home-share { padding: 1.5rem 0; border-top: solid 1px var(--gc-gray-400); border-bottom: solid 1px var(--gc-gray-400); } /* ------- Ficha anuncio (Joomla + JCE, sin wrappers custom) ------- */ /* Scope recomendado en menú: gc-ficha-anuncio */ body.view-article.gc-ficha-anuncio .article-details .article-body, body.view-article.gc-ficha-anuncio .article-details .article-body p, body.view-article.gc-ficha-anuncio .article-details .article-body a, body.view-article.gc-ficha-anuncio .article-details .article-body li { overflow-wrap: anywhere; word-break: break-word; } body.view-article.gc-ficha-anuncio .article-details .article-body img { max-width: 100%; height: auto; } body.view-article.gc-ficha-anuncio .article-details .article-body img#logo-anuncio { display: block; float: none; width: min(100%, 8.5rem); height: auto; margin: 0 auto 0.75rem; } body.view-article.gc-ficha-anuncio .article-details .article-body img#nombrecampo { display: inline-block; width: 1.45rem; height: 1.45rem; vertical-align: text-bottom; } body.view-article.gc-ficha-anuncio .article-details .article-body iframe { width: 100%; max-width: 100%; } /* ------- Botón volver (módulo bajo content en article view) ------- */ .gc-backnav { display: none; position: static; width: auto; margin: 0; padding: 0; } body.view-article .gc-backnav:not([hidden]) { display: flex; width: 100%; justify-content: center; margin: 0.75rem 0 1.25rem; } body.gc-home .gc-backnav { display: none; } .gc-backnav__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.6rem; padding: 0.6rem 1rem; border: 1px solid var(--gc-color-border); border-radius: 999px; background: #fff; color: var(--gc-color-primary); font-size: 1rem; font-weight: 600; text-decoration: none; transition: background-color var(--gc-transition), color var(--gc-transition), border-color var(--gc-transition); } .gc-backnav__btn::before { content: "<"; font-size: 1.05rem; line-height: 1; font-weight: 700; } .gc-backnav__btn:hover, .gc-backnav__btn:focus-visible { background-color: var(--gc-color-primary); border-color: var(--gc-color-primary); color: #fff; text-decoration: none; } .article-details .article-header h1, .article-details .article-header h2, .article-details .article-header h3 { font-size: 1.4rem; } /* --- 11a. Destacados en blog de categoría --- */ /* -------- ★⭐️★ ARTICULOS DESTACADOS ★⭐️★ ------- */ /* remueve ribbon "Featured" y aplica marca visual a destacados */ .view-category.layout-blog .featured-article-badge, .view-tag.layout-blog .featured-article-badge, .article-details .featured-article-badge { display: none; } /* ribbon removida en ambas vistas */ /* Destacados: se estilizan por el marcador que entrega Joomla en el HTML (`.featured-article-badge`) sin depender de reordenado client-side. */ .article-details:has(.featured-article-badge), .article:has(.featured-article-badge) { background-color: #fff; box-shadow: var(--gc-shadow-sm); & .article-body .article-header h2 { /* background-color: red; */ font-size: 1.6rem; } } /* --- 11b. Subcategorias al tope del listado (movidas por JS) --- */ /* Orden visual robusto del blog de categoria: subcategorias arriba, articulos en medio, paginacion al pie. */ .view-category.layout-blog .com-content-category-blog { display: flex; flex-direction: column; } .view-category.layout-blog .com-content-category-blog > .com-content-category-blog__children { order: 20; } .view-category.layout-blog .com-content-category-blog > .com-content-category-blog__items, .view-category.layout-blog .com-content-category-blog > .article-list, .view-category.layout-blog .com-content-category-blog > .items-more { order: 30; } .view-category.layout-blog .com-content-category-blog > .com-content-category-blog__navigation { order: 40; clear: both; } /* CONTENEDOR DE SUBCATEGORÍAS */ .com-content-category-blog__children.gc-subcats-top { display: flex; gap: 10px; /* margin-bottom: 1.25rem; */ /* padding-bottom: 0.75rem; */ border-bottom: 1px solid var(--gc-gray-400); /* background-color: azure; */ height: fit-content; align-items: flex-end; } /* .gc-subcats-top .com-content-category-blog__child { } */ .gc-subcats-top .item-title { margin: 0; padding: 0; border: 0; line-height: 1.2; font-size: 12px; height: fit-content; } .gc-subcats-top .item-title > a { display: block; color: var(--gc-gray-600); background-color: #fff; text-decoration: none; padding: 8px 12px; height: 100%; font-size: 14px; border-radius: 10px 10px 0 0; /* border: solid 1px var(--gc-gray-200); */ border-bottom: none; /* filter: brightness(0.98); */ } .gc-subcats-top .item-title > a:hover, .gc-subcats-top .item-title > a.is-active { color: var(--gc-gray-200); background-color: var(--gc-gray-600); font-weight: 700; box-shadow: inset 0 -3px 0 0 var(--gc-gray-800); } /* --- 11c. Anti-desborde de contenido en introtext --- */ .view-category.layout-blog .article-introtext, .view-tag.layout-blog .article-introtext, .view-tag.layout-blog .tag-body { overflow-wrap: anywhere; word-break: break-word; } .view-category.layout-blog .article-introtext::after, .view-tag.layout-blog .article-introtext::after, .view-tag.layout-blog .tag-body::after { content: ""; display: block; clear: both; } .view-category.layout-blog .article-introtext img, .view-tag.layout-blog .article-introtext img, .view-tag.layout-blog .tag-body img { max-width: 100%; height: auto; } .view-category.layout-blog .article-introtext a, .view-category.layout-blog .article-introtext joomla-hidden-mail, .view-tag.layout-blog .article-introtext a, .view-tag.layout-blog .article-introtext joomla-hidden-mail, .view-tag.layout-blog .tag-body a, .view-tag.layout-blog .tag-body joomla-hidden-mail { overflow-wrap: anywhere; word-break: break-word; } /* ========================================================== */ /* ==================== CP FOOTER MODULE ==================== */ /* ========================================================== */ #sp-footer.gc-footer { background-color: var(--gc-gray-900); } #sp-gc-footer { /* background-color: red; */ padding: 0; /* display: block;*/ width: 100%; } #sp-gc-footer.sp-column { flex: 0 0 100%; max-width: 100%; } section.gc-footer__container.gc-footer__mod { display: flex; justify-content: center; width: 100%; /* max-width: var(--gc-max_width); */ --gc-footer-brand-title-size: 1.3rem; --gc-footer-brand-line-size: 14px; --gc-footer-menu-size: 16px; --gc-footer-social-title-size: 16px; --gc-footer__svg-icons: 32px; color: var(--gc-gray-500, #a2a2a2); padding: 36px 0; } .gc-footer__grid { display: grid; width: min(100%, var(--gc-max_width, 1380px)); grid-template-columns: 1fr 1fr 1fr; column-gap: 128px; row-gap: 24px; align-items: center; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); } .gc-footer__col { min-width: 0; } .gc-footer__col--brand { text-align: left; } .gc-footer__brand-logo-wrap { margin-bottom: 10px; } .gc-footer__brand-logo { display: block; width: 150px; height: 45px; object-fit: contain; } .gc-footer__brand-logo .gc-footer-logo-white { fill: var(--gc-white, #fdfdfd); } .gc-footer__brand-logo .gc-footer-logo-blue { fill: var(--gc-blue-brand, #3165ac); } .gc-footer__brand-title { margin: 0 0 12px; /* color: var(--gc-white, #fdfdfd); */ font-size: var(--gc-footer-brand-title-size); font-weight: 500; line-height: 1.05; } .gc-footer__brand-line { margin: 0; /* color: #e0e0e0; */ font-size: var(--gc-footer-brand-line-size); line-height: 1.4; } .gc-footer__col--menu { text-align: center; } .gc-footer__menu-logo-wrap { display: flex; justify-content: center; margin: 0 0 12px; } .gc-footer__menu-logo { display: block; width: 100%; max-width: 200px; height: auto; } .gc-footer__menu-slogan { margin: 0; font-size: 1rem; line-height: 1.35; } .gc-footer__menu-list { list-style: none; margin: 0; padding: 0; line-height: 1.25; } .gc-footer__menu-list .gc-footer__menu-item + .gc-footer__menu-item { margin-top: 14px; } .gc-footer__menu-list a { color: var(--gc-gray-500, #a2a2a2); text-decoration: none; font-size: var(--gc-footer-menu-size); font-weight: 400; line-height: 1.2; } .gc-footer__menu-list a:hover, .gc-footer__menu-list a:focus-visible { color: var(--gc-white, #fdfdfd); border-bottom: 1px solid var(--gc-gray-500, #a2a2a2); padding-bottom: 5px; } .gc-footer__col--social { text-align: right; } .gc-footer__social-title { margin: 0 0 12px; color: var(--gc-white, #fdfdfd); font-size: var(--gc-footer-social-title-size); font-weight: 400; line-height: 1.2; } .gc-footer__social-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; gap: 22px; } .gc-footer__social-item { line-height: 1; } .gc-footer__social-list a { color: var(--gc-gray-500, #a2a2a2); display: inline-flex; align-items: center; justify-content: center; } .gc-footer__social-list a:hover, .gc-footer__social-list a:focus-visible { color: var(--gc-white, #fdfdfd); } .gc-footer__social-list svg { width: var(--gc-footer__svg-icons); height: var(--gc-footer__svg-icons); fill: currentColor; } .gc-footer__social-item:nth-child(2) svg { width: 29px; height: 29px; } @media (max-width: 768px) { #sp-footer #sp-gc-footer { flex: 0 0 100%; max-width: 100%; } .gc-footer__grid { grid-template-columns: minmax(200px, 1fr); justify-items: center; row-gap: 36px; column-gap: 28px; } .gc-footer__grid p, .gc-footer__grid h3 { color: var(--gc-gray-400); text-align: center; } .gc-footer__col--social { width: 100%; padding-top: 1rem; border-top: solid 1px var(--gc-gray-400); } .gc-footer__brand-logo-wrap { display: flex; justify-content: center; } .gc-footer__social-list { justify-content: center; } } @media (max-width: 575px) { #sp-footer #sp-footer2 { align-items: center; display: flex; justify-content: center; align-content: center; inline-size: 100%; margin: 20px 0; } #sp-footer1 { display: flex; justify-content: center; text-align: center; } #sp-footer1 img { display: block; } } /* Copyright modular en posicion copyright (Helix) */ .gc-copyright-module { background-color: var(--gc-gray-800); color: var(--gc-gray-100); } .gc-copyright { text-align: center; padding: 1rem 0; font-size: 12px; font-weight: 600; } .gc-copyright__line { margin: 0; } .gc-copyright__line + .gc-copyright__line { margin-top: 0.25rem; } .gc-copyright a { color: inherit; text-decoration: none; } .gc-copyright a:hover, .gc-copyright a:focus-visible { color: var(--gc-color-accent); text-decoration: none; } /* ---------- fichas comercios / servicios ------ */ /* hacks */ img#nombrecampo { display: inline; } /* ========================================================== OFFCANVAS MENU — Visual reciclado de .gc-aside-cats.is-open .gc-aside-cats__list ========================================================== */ /* ------- Panel principal + zona interior ------- */ .offcanvas-menu { background-color: var(--gc-blue-logo); font-weight: 600; max-height: 90dvh; overflow-y: auto; } .offcanvas-inner { background-color: var(--gc-blue-logo); filter: brightness(1); } /* ------- Links de menú: selector profundo que supera la especificidad de Helix ------- */ /* Helix gana con: .offcanvas-menu .offcanvas-inner ul.menu > li a Usamos la misma cadena para empatar y quedar después en cascada. */ .offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span { color: var(--gc-white); border-bottom: 1px solid var(--gc-gray-400); } /* ------- Hover / focus ------- */ .offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus, .offcanvas-menu .offcanvas-inner ul.menu > li span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li span:focus { filter: brightness(1.1) contrast(1.2); background-color: var(--gc-gray-600); color: var(--gc-white); } /* ------- Ítem activo / current ------- */ .offcanvas-menu .offcanvas-inner ul.menu > li.active > a, .offcanvas-menu .offcanvas-inner ul.menu > li.active > span, .offcanvas-menu .offcanvas-inner ul.menu > li.current > a, .offcanvas-menu .offcanvas-inner ul.menu > li.current > span { filter: brightness(1) contrast(1.2); background-color: var(--gc-color-darkblue); color: var(--gc-color-accent); } /* ------- Botón cerrar ------- */ .offcanvas-menu .close-offcanvas { color: var(--gc-white); } .offcanvas-menu .close-offcanvas:hover, .offcanvas-menu .close-offcanvas:focus { color: var(--gc-yellow-logo); } /* ------- Submenú dropdown (nivel 2) ------- */ .offcanvas-menu .offcanvas-inner ul.menu > li ul { background-color: var(--gc-blue-logo); filter: brightness(0.85); } .offcanvas-menu .offcanvas-inner ul.menu > li ul a, .offcanvas-menu .offcanvas-inner ul.menu > li ul span { color: var(--gc-white); border-bottom: 1px solid var(--gc-gray-400); } .offcanvas-menu .offcanvas-inner ul.menu > li ul a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li ul a:focus, .offcanvas-menu .offcanvas-inner ul.menu > li ul span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li ul span:focus { filter: brightness(1); background-color: var(--gc-gray-600); color: var(--gc-white); }