/** * GICA Elements — sistema de diseño * Tokens + componentes de los widgets. Editable vía controles de Elementor * (los controles generan overrides con {{WRAPPER}}, estos son los defaults). */ :root{ --gic-green:#163D2A; --gic-accent:#009900; --gic-yellow:#FEFE00; --gic-mint:#ECF7EC; --gic-chip:#D7F0D0; --gic-white:#FFFFFF; --gic-ink:#1E1E1E; --gic-muted:#5B6B60; --gic-line:#E3ECE4; --gic-display:'GICA Display','Jost','Century Gothic',system-ui,sans-serif; --gic-sans:'GICA Sans','Figtree',system-ui,-apple-system,sans-serif; --gic-radius-card:16px; --gic-radius-lg:32px; --gic-radius-pill:999px; --gic-radius-btn:12px; --gic-ease:cubic-bezier(.22,.61,.36,1); /* Check en círculo (el que precede a «Estas empresas ya han confiado…»). */ --gic-check-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E"); } /* ---------- Utilidades base ---------- */ /* El iconito que precede a los títulos (el rombo verde) se dibuja con ::before. Sus tres propiedades viven en variables CSS para que los controles de Elementor puedan cambiarlas: forma, color, tamaño y separación. --gic-ico-color color del icono --gic-ico-size tamaño (ancho = alto) --gic-ico-gap separación icono ↔ texto */ .gic-eyebrow { display: inline-flex; align-items: center; gap: var(--gic-ico-gap, 10px); font-family: var(--gic-sans); font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--gic-accent); margin: 0 0 16px; } .gic-eyebrow::before { content: ""; flex: 0 0 auto; width: var(--gic-ico-size, 14px); height: var(--gic-ico-size, 14px); background: var(--gic-ico-color, var(--gic-accent)); transform: rotate(45deg); } .gic-eyebrow--light { color: var(--gic-mint); } .gic-eyebrow--light::before { background: var(--gic-ico-color, var(--gic-yellow)); } /* Eyebrow aplicado a un widget Heading (builder). Especificidad alta para ganar al color global Primary que Elementor asigna por defecto al heading. */ .elementor-widget.gic-eyebrow-wrap .elementor-heading-title { display: inline-flex; align-items: center; gap: var(--gic-ico-gap, 10px); font-family: var(--gic-sans); font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--gic-accent); } .elementor-widget.gic-eyebrow-wrap .elementor-heading-title::before { content: ""; flex: 0 0 auto; width: var(--gic-ico-size, 14px); height: var(--gic-ico-size, 14px); background: var(--gic-ico-color, var(--gic-accent)); transform: rotate(45deg); } .gic-eyebrow-wrap { margin-bottom: 19px; } .elementor-widget.gic-eyebrow-wrap--light .elementor-heading-title { color: var(--gic-mint); } .elementor-widget.gic-eyebrow-wrap--light .elementor-heading-title::before { background: var(--gic-ico-color, var(--gic-yellow)); } /* Imagen con radio estándar del sistema */ .gic-img-rounded img { border-radius: var(--gic-radius-card); width: 100%; object-fit: cover; } /* Hairline entre ítems de listas horizontales */ .gic-hairline { border-color: var(--gic-line); } /* Chip reutilizable (proyectos, blog, filtros de categoría, etc.) */ .gic-chip { display: inline-flex; align-items: center; background: #B7F5B7; color: #325242; font-family: var(--gic-sans); font-size: 16px; font-weight: 600; line-height: 1; padding: 4px 10px; border-radius: 8px; white-space: nowrap; } /* Header sticky con borde al hacer scroll (Elementor Pro sticky) */ .gic-header { background: var(--gic-white); min-height: 73px; border-bottom: 1px solid rgba(143, 165, 151, .30); } .gic-header.elementor-sticky--effects { box-shadow: 0 6px 24px -18px rgba(22, 61, 42, .25); } /* El botón "Contacto" del header usa el verde de marca (#163D2A), no el verde oscuro (#003E00) del resto. */ .gic-header .gic-btn.gic-btn--yellow { color: #163D2A; } .gic-header .gic-btn.gic-btn--yellow svg { background: #163D2A; color: var(--gic-yellow); } /* ---------- Botones ---------- */ .gic-btn { display: inline-flex; box-sizing: border-box; align-items: center; gap: 16px; font-family: var(--gic-sans); font-size: 18px; font-weight: 500; line-height: 1; padding: 16px 24px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .3s var(--gic-ease), color .3s var(--gic-ease), border-color .3s var(--gic-ease), transform .3s var(--gic-ease); white-space: nowrap; } .gic-btn svg { width: 16px; height: 16px; transition: transform .3s var(--gic-ease); } .gic-btn:hover svg { transform: translateX(4px); } .gic-btn--download:hover svg { transform: translateY(3px); } /* Dobles clases: ganar especificidad al color de enlaces del Kit (.elementor-kit-X a) */ .gic-btn.gic-btn--yellow { background: #FEFE00; color: #003E00; } /* Hover (fiel al Figma): el botón amarillo invierte a verde brillante + texto amarillo. */ .gic-btn.gic-btn--yellow:hover { background: #009A00; color: #FEFE00; } .gic-btn.gic-btn--yellow:hover svg { background: #FEFE00; color: #009A00; } /* Contorno (el segundo botón del hero en el PDF): fondo transparente, borde y texto amarillos, misma altura y radio que el botón sólido de al lado. El icono ya NO se oculta por CSS: se elige en el control «Icono» del widget. */ .gic-btn.gic-btn--outline { background: transparent; color: #FEFE00; border-color: #FEFE00; } /* Hover (fiel al Figma): el botón outline se rellena de verde brillante. */ .gic-btn.gic-btn--outline:hover { background: #009A00; color: #FEFE00; border-color: #009A00; } /* Fantasma: como el contorno pero sin borde (para zonas muy limpias). */ .gic-btn.gic-btn--ghost { background: transparent; color: #FEFE00; border-color: transparent; } .gic-btn.gic-btn--ghost:hover { background: rgba(254, 254, 0, .12); color: #FEFE00; } /* Sin icono: no hay hueco fantasma entre texto y borde. */ .gic-btn.gic-btn--noicon { gap: 0; } /* Flecha-en-caja: botones sólidos (amarillo/link/contorno) muestran el ícono dentro de una caja de color. Todo esto es editable desde la pestaña Estilo. */ .gic-btn.gic-btn--yellow svg, .gic-btn.gic-btn--outline svg, .gic-btn.gic-btn--ghost svg, .gic-btn.gic-btn--link svg { width: 24px; height: 24px; padding: 6px; box-sizing: border-box; border-radius: 6px; background: #003E00; color: #FEFE00; transition: transform .3s var(--gic-ease), background .3s var(--gic-ease), color .3s var(--gic-ease); } /* Sobre fondo oscuro (contorno / fantasma) la caja se invierte: amarilla con flecha verde. */ .gic-btn.gic-btn--outline svg, .gic-btn.gic-btn--ghost svg { background: #FEFE00; color: #003E00; } .gic-btn.gic-btn--outline:hover svg, .gic-btn.gic-btn--ghost:hover svg { background: #FEFE00; color: #009A00; } /* No es un link plano: texto subrayado + caja de flecha (mismo patrón que los "more" links, ver §gic-scard__more etc). */ .gic-btn.gic-btn--link { background: none; border: none; padding: 0; border-radius: 0; gap: 11px; color: #003E00; font-size: 16px; font-weight: 500; text-decoration: underline; } /* Variante para fondos oscuros (banda verde, hero, CTA…): texto/caja amarillos, flecha verde oscuro. */ .gic-btn.gic-btn--link.gic-btn--light { color: #FEFE00; } .gic-btn.gic-btn--link.gic-btn--light svg { background: #FEFE00; color: #003E00; } .gic-btn.gic-btn--download { background: var(--gic-green); color: var(--gic-mint); } .gic-btn.gic-btn--download:hover { background: #0F2C1D; color: var(--gic-white); } .gic-btn:focus-visible { outline: 2px solid var(--gic-accent); outline-offset: 2px; } /* ---------- Header / Footer helpers ---------- */ .gic-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .gic-logo img { display: block; height: 40px; width: auto; } .gic-logo__text { font-family: var(--gic-display); font-size: 22px; font-weight: 700; color: var(--gic-green); line-height: 1; } .gic-logo--light .gic-logo__text, .gic-logo--light .gic-logo__text span { color: var(--gic-mint); } /* Título de sección (widget Heading nativo dentro de gicb_section_head) — auto-estilado para no depender del kit global de Elementor. */ .gic-h2 .elementor-heading-title { font-family: var(--gic-display); font-weight: 700; color: var(--gic-green); font-size: clamp(38px, 5vw, 60px); line-height: 1.2; letter-spacing: normal; } /* Las palabras largas en español ("especialidades", "Repotenciación"…) no deben desbordar en pantallas estrechas. */ .gic-h2 .elementor-heading-title, .gic-hero__title, .gic-cta__title, .gic-cert__title, .gic-post__title, .gic-scard__title, .gic-proj__title, .gic-tst__quote { overflow-wrap: break-word; word-break: break-word; } .gic-h2--light .elementor-heading-title { color: var(--gic-mint); } .gic-h2--center .elementor-heading-title { text-align: center; } /* ---------- Barra legal del footer (widget «GICA · Barra legal») ---------- Dos bloques: los ENLACES legales y el COPYRIGHT (con el crédito opcional). Cómo se colocan lo decide el control «Orden de los bloques», que es responsive: se puede elegir una cosa en el ordenador y otra en el teléfono. El control escribe una clase en el envoltorio del widget — .gic-legal--, .gic-legal-tablet--, .gic-legal-mobile-- — y aquí abajo está lo que hace cada una. Variables editables (Avanzado → CSS personalizado del widget o del footer): --gic-legal-color color del texto base --gic-legal-link color de los enlaces --gic-legal-link-hover color de los enlaces al pasar el cursor --gic-legal-line color de la línea divisoria de arriba */ .gic-legal { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 20px; width: 100%; padding-top: 24px; border-top: 1px solid var(--gic-legal-line, rgba(255, 255, 255, .12)); font-family: var(--gic-sans); font-size: 16px; line-height: 1.6; text-align: left; color: var(--gic-legal-color, rgba(255, 255, 255, .6)); } .gic-legal--nodiv { border-top: none; padding-top: 0; } /* La franja ocupa SIEMPRE el ancho completo de la caja del pie. Si se queda encogida (porque la columna que la contiene no llega al 100 %), los dos bloques no caben en una línea y se parten en dos renglones aunque el reparto sea el correcto. */ .gic-footer .elementor-widget:has(.gic-legal), .gic-footer .e-con:has(.gic-legal), .gic-footer .elementor-column:has(.gic-legal) { width: 100% !important; max-width: 100% !important; flex-basis: auto !important; } .gic-footer .elementor-widget:has(.gic-legal) > .elementor-widget-container { width: 100%; } .gic-legal__links { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; } .gic-legal a { color: var(--gic-legal-link, rgba(255, 255, 255, .72)); text-decoration: underline; text-underline-offset: 3px; transition: color .3s var(--gic-ease); } .gic-legal a:hover { color: var(--gic-legal-link-hover, var(--gic-yellow)); } .gic-legal--nounderline a { text-decoration: none; } .gic-legal--nounderline a:hover { text-decoration: underline; } .gic-legal__copy { color: inherit; } .gic-legal__credit { margin-left: 8px; } .gic-legal__credit a { color: var(--gic-legal-link, rgba(255, 255, 255, .72)); } /* Crédito «en una línea aparte»: sin sangría heredada y pegado al copyright. */ .gic-legal--creditbelow .gic-legal__credit { display: inline-block; margin-left: 0; margin-top: 4px; } /* Separadores opcionales entre enlaces. */ .gic-legal--sep-dot .gic-legal__links a:not(:last-child)::after, .gic-legal--sep-bar .gic-legal__links a:not(:last-child)::after { display: inline-block; margin-left: 26px; text-decoration: none; color: rgba(255, 255, 255, .35); } .gic-legal--sep-dot .gic-legal__links a:not(:last-child)::after { content: "\00B7"; } .gic-legal--sep-bar .gic-legal__links a:not(:last-child)::after { content: "|"; } /* --- Órdenes (control «Orden de los bloques») --- Cuando los dos bloques van apilados, cuál va arriba lo decide el control «Qué va primero», que cambia el orden REAL del HTML (no con `order`), para que un lector de pantalla lea lo mismo que se ve. Por eso aquí las disposiciones apiladas ponen `order: 0` en los dos: reinician el `order` que pueda venir de la disposición de escritorio. */ /* --- Escritorio (y base para todo lo demás) --- */ /* enlaces a la izquierda · copyright a la derecha */ .gic-legal--links-left .gic-legal { flex-direction: row; align-items: center; text-align: left; } .gic-legal--links-left .gic-legal__links { order: 0; justify-content: flex-start; } .gic-legal--links-left .gic-legal__copy { order: 1; text-align: right; } /* copyright a la izquierda · enlaces a la derecha */ .gic-legal--copy-left .gic-legal { flex-direction: row; align-items: center; text-align: left; } .gic-legal--copy-left .gic-legal__links { order: 1; justify-content: flex-end; } .gic-legal--copy-left .gic-legal__copy { order: 0; text-align: left; } /* todo a la izquierda, en dos líneas */ .gic-legal--both-left .gic-legal { flex-direction: column; align-items: flex-start; text-align: left; } .gic-legal--both-left .gic-legal__links { order: 0; justify-content: flex-start; } .gic-legal--both-left .gic-legal__copy { order: 0; text-align: left; } /* todo centrado, en dos líneas */ .gic-legal--both-center .gic-legal { flex-direction: column; align-items: center; text-align: center; } .gic-legal--both-center .gic-legal__links { order: 0; justify-content: center; } .gic-legal--both-center .gic-legal__copy { order: 0; text-align: center; } /* todo a la derecha, en dos líneas */ .gic-legal--both-right .gic-legal { flex-direction: column; align-items: flex-end; text-align: right; } .gic-legal--both-right .gic-legal__links { order: 0; justify-content: flex-end; } .gic-legal--both-right .gic-legal__copy { order: 0; text-align: right; } /* --- Tablet (<= 1024 px) — solo si se eligió algo distinto para tablet --- */ @media (max-width: 1024px) { /* enlaces a la izquierda · copyright a la derecha */ .gic-legal-tablet--links-left .gic-legal { flex-direction: row; align-items: center; text-align: left; } .gic-legal-tablet--links-left .gic-legal__links { order: 0; justify-content: flex-start; } .gic-legal-tablet--links-left .gic-legal__copy { order: 1; text-align: right; } /* copyright a la izquierda · enlaces a la derecha */ .gic-legal-tablet--copy-left .gic-legal { flex-direction: row; align-items: center; text-align: left; } .gic-legal-tablet--copy-left .gic-legal__links { order: 1; justify-content: flex-end; } .gic-legal-tablet--copy-left .gic-legal__copy { order: 0; text-align: left; } /* todo a la izquierda, en dos líneas */ .gic-legal-tablet--both-left .gic-legal { flex-direction: column; align-items: flex-start; text-align: left; } .gic-legal-tablet--both-left .gic-legal__links { order: 0; justify-content: flex-start; } .gic-legal-tablet--both-left .gic-legal__copy { order: 0; text-align: left; } /* todo centrado, en dos líneas */ .gic-legal-tablet--both-center .gic-legal { flex-direction: column; align-items: center; text-align: center; } .gic-legal-tablet--both-center .gic-legal__links { order: 0; justify-content: center; } .gic-legal-tablet--both-center .gic-legal__copy { order: 0; text-align: center; } /* todo a la derecha, en dos líneas */ .gic-legal-tablet--both-right .gic-legal { flex-direction: column; align-items: flex-end; text-align: right; } .gic-legal-tablet--both-right .gic-legal__links { order: 0; justify-content: flex-end; } .gic-legal-tablet--both-right .gic-legal__copy { order: 0; text-align: right; } } /* --- Teléfono (<= 767 px) — solo si se eligió algo distinto para móvil --- */ @media (max-width: 767px) { /* enlaces a la izquierda · copyright a la derecha */ .gic-legal-mobile--links-left .gic-legal { flex-direction: row; align-items: center; text-align: left; } .gic-legal-mobile--links-left .gic-legal__links { order: 0; justify-content: flex-start; } .gic-legal-mobile--links-left .gic-legal__copy { order: 1; text-align: right; } /* copyright a la izquierda · enlaces a la derecha */ .gic-legal-mobile--copy-left .gic-legal { flex-direction: row; align-items: center; text-align: left; } .gic-legal-mobile--copy-left .gic-legal__links { order: 1; justify-content: flex-end; } .gic-legal-mobile--copy-left .gic-legal__copy { order: 0; text-align: left; } /* todo a la izquierda, en dos líneas */ .gic-legal-mobile--both-left .gic-legal { flex-direction: column; align-items: flex-start; text-align: left; } .gic-legal-mobile--both-left .gic-legal__links { order: 0; justify-content: flex-start; } .gic-legal-mobile--both-left .gic-legal__copy { order: 0; text-align: left; } /* todo centrado, en dos líneas */ .gic-legal-mobile--both-center .gic-legal { flex-direction: column; align-items: center; text-align: center; } .gic-legal-mobile--both-center .gic-legal__links { order: 0; justify-content: center; } .gic-legal-mobile--both-center .gic-legal__copy { order: 0; text-align: center; } /* todo a la derecha, en dos líneas */ .gic-legal-mobile--both-right .gic-legal { flex-direction: column; align-items: flex-end; text-align: right; } .gic-legal-mobile--both-right .gic-legal__links { order: 0; justify-content: flex-end; } .gic-legal-mobile--both-right .gic-legal__copy { order: 0; text-align: right; } } /* --- Repartos EN LÍNEA: los dos bloques comparten fila de verdad --- La franja permite envolver (para que los enlaces salten de línea entre ellos), pero eso hacía que, en cuanto el copyright y el crédito se alargaban, el bloque entero se cayera a una segunda línea y pareciera apilado. En los repartos en línea los dos bloques no envuelven: encogen, y es el texto de dentro el que salta de línea. */ .gic-legal--links-left .gic-legal, .gic-legal--copy-left .gic-legal { flex-wrap: nowrap; } .gic-legal--links-left .gic-legal__links, .gic-legal--links-left .gic-legal__copy, .gic-legal--copy-left .gic-legal__links, .gic-legal--copy-left .gic-legal__copy { min-width: 0; } /* Cuando no cabe todo, quien cede es la lista de políticas —que ya está pensada para saltar de línea entre enlaces—, no el bloque de derechos de autor, que se partiría por la mitad de una frase. */ .gic-legal--links-left .gic-legal__links, .gic-legal--copy-left .gic-legal__links { flex: 1 1 auto; } .gic-legal--links-left .gic-legal__copy, .gic-legal--copy-left .gic-legal__copy { flex: 0 1 auto; max-width: 100%; } /* El crédito viaja entero: o cabe en la línea del copyright, o baja completo. */ .gic-legal__credit { white-space: nowrap; } @media (max-width: 1024px) { .gic-legal-tablet--links-left .gic-legal, .gic-legal-tablet--copy-left .gic-legal { flex-wrap: nowrap; } .gic-legal-tablet--links-left .gic-legal__links, .gic-legal-tablet--links-left .gic-legal__copy, .gic-legal-tablet--copy-left .gic-legal__links, .gic-legal-tablet--copy-left .gic-legal__copy { min-width: 0; } /* Y al revés: si en tablet se eligió apilado, la franja vuelve a envolver. */ .gic-legal-tablet--both-left .gic-legal, .gic-legal-tablet--both-center .gic-legal, .gic-legal-tablet--both-right .gic-legal { flex-wrap: wrap; } } @media (max-width: 767px) { .gic-legal-mobile--links-left .gic-legal, .gic-legal-mobile--copy-left .gic-legal { flex-wrap: nowrap; } .gic-legal-mobile--links-left .gic-legal__links, .gic-legal-mobile--links-left .gic-legal__copy, .gic-legal-mobile--copy-left .gic-legal__links, .gic-legal-mobile--copy-left .gic-legal__copy { min-width: 0; } .gic-legal-mobile--both-left .gic-legal, .gic-legal-mobile--both-center .gic-legal, .gic-legal-mobile--both-right .gic-legal { flex-wrap: wrap; } } /* En el teléfono el conjunto se aprieta un poco. */ @media (max-width: 767px) { .gic-legal { font-size: 14px; gap: 14px; padding-top: 20px; } .gic-legal__links { gap: 16px; } .gic-legal--sep-dot .gic-legal__links a:not(:last-child)::after, .gic-legal--sep-bar .gic-legal__links a:not(:last-child)::after { margin-left: 16px; } /* Interruptor «Enlaces uno debajo de otro en el teléfono». */ .gic-legal--linkstack .gic-legal__links { flex-direction: column; align-items: inherit; gap: 10px; } .gic-legal--linkstack .gic-legal__links a:not(:last-child)::after { content: none !important; } } /* --- Red de seguridad para marcado ANTIGUO de la franja legal --- El widget de la v1.33 escribe siempre una clase por dispositivo (`gic-legal-mobile--…`). Si esa clase NO está, lo que se está pintando viene de una versión anterior del plugin o de un CSS cacheado, y sus clases pueden estar peleadas entre sí (la v1.32 escribía la del escritorio y la del móvil a la vez, y ganaba la que estuviera más abajo en el archivo). En ese caso manda el diseño, no lo que haya guardado: · Ordenador y tablet → derechos a la izquierda, políticas a la derecha. · Teléfono → apiladas a la izquierda, políticas arriba. En cuanto el widget nuevo pinta la franja, esta red deja de aplicarse sola y vuelve a mandar el control «Orden de los bloques». */ @media (min-width: 768px) { .elementor-widget:not([class*="gic-legal-mobile--"]) .gic-legal { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; } .elementor-widget:not([class*="gic-legal-mobile--"]) .gic-legal .gic-legal__copy { order: 0 !important; text-align: left !important; flex: 0 1 auto !important; min-width: 0 !important; } .elementor-widget:not([class*="gic-legal-mobile--"]) .gic-legal .gic-legal__links { order: 1 !important; justify-content: flex-end !important; text-align: right !important; flex: 1 1 auto !important; min-width: 0 !important; } } @media (max-width: 767px) { .elementor-widget:not([class*="gic-legal-mobile--"]) .gic-legal { flex-direction: column !important; flex-wrap: wrap !important; align-items: flex-start !important; text-align: left !important; } .elementor-widget:not([class*="gic-legal-mobile--"]) .gic-legal .gic-legal__links { order: 0 !important; justify-content: flex-start !important; text-align: left !important; } .elementor-widget:not([class*="gic-legal-mobile--"]) .gic-legal .gic-legal__copy { order: 1 !important; text-align: left !important; } } /* ---------- Footer: arreglos sobre el footer YA construido ---------- Estos selectores actúan sobre la plantilla que ya existe en el sitio, sin tener que rehacerla. Se usa :has() para localizar las filas por su contenido, en vez de depender de la profundidad exacta del anidamiento (que cambia entre versiones de Elementor). */ /* (1) «Síguenos» vuelve a la misma fila que las demás columnas. Las cinco columnas suman ~94 % y, con los huecos, pasan del 100 %: la quinta se iba a una fila nueva. El contenedor flex del footer puede ser `.e-con` (contenedor a ancho completo), `.e-con-inner` (contenedor con caja) o `.elementor-container` (maquetación antigua por secciones), y no hay forma de saber cuál usa cada sitio. Por eso se aplica `nowrap` a TODOS los contenedores del footer: en los que apilan en columna no tiene ningún efecto, y en el que es una fila resuelve el problema. La franja legal se exceptúa más abajo. */ @media (min-width: 1025px) { .gic-footer .e-con, .gic-footer .e-con-inner, .gic-footer .elementor-container { flex-wrap: nowrap !important; } /* Sin min-width:0 las columnas no se dejan encoger y se desbordan. */ .gic-footer .e-con, .gic-footer .e-con-inner > .e-con, .gic-footer .elementor-column { min-width: 0 !important; flex-shrink: 1 !important; } /* La franja legal SÍ puede envolver: son dos bloques, no cinco columnas. */ .gic-footer .e-con:has(.gic-footer-legal), .gic-footer .e-con-inner:has(.gic-footer-legal), .gic-footer .elementor-container:has(.gic-footer-legal) { flex-wrap: wrap !important; } } /* (2) Franja legal ANTIGUA (la de dos bloques de texto sueltos, anterior al widget «GICA · Barra legal»): · Ordenador y tablet → los DERECHOS DE AUTOR a la izquierda y las POLÍTICAS a la derecha, en la misma línea. · Teléfono → las dos cosas apiladas contra el margen izquierdo, con las POLÍTICAS ARRIBA y los derechos debajo. Para dejarlo apilado a la izquierda TAMBIÉN en el ordenador, añadir la clase `gic-footer--legal-left` al contenedor del pie (Avanzado → Clases CSS). */ /* --- Ordenador y tablet: reparto a dos lados --- */ @media (min-width: 768px) { /* Derechos de autor: a la izquierda. */ .gic-footer:not(.gic-footer--legal-left) .e-con:has(> .e-con-inner .gic-footer-legal:not(.gic-footer-legal--links)), .gic-footer:not(.gic-footer--legal-left) .e-con:has(> .gic-footer-legal:not(.gic-footer-legal--links)), .gic-footer:not(.gic-footer--legal-left) .elementor-column:has(.gic-footer-legal:not(.gic-footer-legal--links)) { order: -1; align-items: flex-start !important; text-align: left; } /* Políticas y demás botones: a la derecha. */ .gic-footer:not(.gic-footer--legal-left) .e-con:has(> .e-con-inner .gic-footer-legal--links), .gic-footer:not(.gic-footer--legal-left) .e-con:has(> .gic-footer-legal--links), .gic-footer:not(.gic-footer--legal-left) .elementor-column:has(.gic-footer-legal--links) { order: 1; align-items: flex-end !important; text-align: right; } /* La fila no envuelve y las dos mitades se reparten el ancho. Sin esto, dos columnas al 50 % más el hueco suman más del 100 % y la segunda se cae a un renglón nuevo (que es justo lo que parecía «apilado»). */ .gic-footer:not(.gic-footer--legal-left) .e-con:has(> .gic-footer-legal--links), .gic-footer:not(.gic-footer--legal-left) .e-con:has(> .e-con-inner .gic-footer-legal--links), .gic-footer:not(.gic-footer--legal-left) .e-con:has(> .gic-footer-legal:not(.gic-footer-legal--links)), .gic-footer:not(.gic-footer--legal-left) .e-con:has(> .e-con-inner .gic-footer-legal:not(.gic-footer-legal--links)), .gic-footer:not(.gic-footer--legal-left) .elementor-column:has(.gic-footer-legal) { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; } .gic-footer:not(.gic-footer--legal-left) .e-con:has(.gic-footer-legal--links):has(.gic-footer-legal:not(.gic-footer-legal--links)), .gic-footer:not(.gic-footer--legal-left) .e-con-inner:has(.gic-footer-legal--links):has(.gic-footer-legal:not(.gic-footer-legal--links)), .gic-footer:not(.gic-footer--legal-left) .elementor-container:has(.gic-footer-legal--links) { flex-wrap: nowrap !important; } /* El widget ocupa todo el ancho de su columna para que el texto llegue de verdad al borde que le toca; si no, queda flotando a media caja. */ .gic-footer:not(.gic-footer--legal-left) .gic-footer-legal:not(.gic-footer-legal--links) { align-self: flex-start !important; width: 100%; } .gic-footer:not(.gic-footer--legal-left) .gic-footer-legal--links { align-self: flex-end !important; width: 100%; } .gic-footer:not(.gic-footer--legal-left) .gic-footer-legal:not(.gic-footer-legal--links), .gic-footer:not(.gic-footer--legal-left) .gic-footer-legal:not(.gic-footer-legal--links) p { text-align: left !important; } .gic-footer:not(.gic-footer--legal-left) .gic-footer-legal--links, .gic-footer:not(.gic-footer--legal-left) .gic-footer-legal--links p { text-align: right !important; } } /* --- Todo apilado a la izquierda, con la clase de escape --- */ .gic-footer--legal-left .e-con:has(.gic-footer-legal), .gic-footer--legal-left .e-con-inner:has(.gic-footer-legal), .gic-footer--legal-left .elementor-container:has(.gic-footer-legal), .gic-footer--legal-left .elementor-widget-wrap:has(.gic-footer-legal) { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } .gic-footer--legal-left .e-con:has(.gic-footer-legal), .gic-footer--legal-left .elementor-column:has(.gic-footer-legal) { width: 100% !important; max-width: 100% !important; } .gic-footer--legal-left .e-con:has(> .gic-footer-legal--links), .gic-footer--legal-left .elementor-column:has(.gic-footer-legal--links) { order: -1 !important; } .gic-footer--legal-left .gic-footer-legal, .gic-footer--legal-left .gic-footer-legal p { text-align: left !important; } /* (3) Crédito del autor del sitio, añadido al lado del copyright. */ .gic-footer .gic-footer-credit { margin-left: 8px; white-space: nowrap; } .gic-footer .gic-footer-credit a { color: rgba(255, 255, 255, .72) !important; text-decoration: underline; text-underline-offset: 3px; } .gic-footer .gic-footer-credit a:hover { color: var(--gic-yellow) !important; } /* (4) Las cinco columnas del footer, alineadas a la izquierda siempre. El texto de cada columna (títulos, enlaces, contacto) arranca en el mismo margen izquierdo, sin centrados heredados del kit global. */ .gic-footer .gic-footer-heading, .gic-footer .gic-footer-desc, .gic-footer .gic-footer-links, .gic-footer .gic-footer-contact, .gic-footer .gic-footer-social { text-align: left; } /* En tablet y móvil todo vuelve a apilarse a la izquierda. */ @media (max-width: 1024px) { .gic-footer .e-con-inner > .e-con > .e-con-inner, .gic-footer > .e-con-inner > .e-con > .e-con-inner { flex-wrap: wrap; } .gic-footer .e-con-inner > .e-con > .e-con-inner > .e-con, .gic-footer > .e-con-inner > .e-con > .e-con-inner > .e-con { min-width: 210px; } } @media (max-width: 767px) { /* En el teléfono cada columna del footer ocupa el ancho completo, sea cual sea la estructura de contenedores. */ .gic-footer .e-con > .e-con, .gic-footer .e-con-inner > .e-con, .gic-footer .elementor-column { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* En el teléfono el reparto a dos lados no cabe: la franja se apila contra el margen izquierdo, con las POLÍTICAS arriba y los DERECHOS DE AUTOR debajo. Esto vale con o sin la clase de escape. */ .gic-footer .e-con:has(.gic-footer-legal), .gic-footer .e-con-inner:has(.gic-footer-legal), .gic-footer .elementor-container:has(.gic-footer-legal), .gic-footer .elementor-widget-wrap:has(.gic-footer-legal) { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } .gic-footer .e-con:has(> .e-con-inner .gic-footer-legal--links), .gic-footer .e-con:has(> .gic-footer-legal--links), .gic-footer .elementor-column:has(.gic-footer-legal--links) { order: -1 !important; } .gic-footer .gic-footer-legal { align-self: flex-start !important; width: 100%; } .gic-footer .gic-footer-legal, .gic-footer .gic-footer-legal p { text-align: left !important; } .gic-footer .gic-footer-credit { display: block; margin-left: 0; margin-top: 4px; white-space: normal; } } /* ---------- Widget «GICA · Título de sección» ---------- */ .gic-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; width: 100%; } .gic-shead:not(.gic-shead--row) { display: block; } .gic-shead__main { min-width: 0; } .gic-shead--row .gic-shead__main { flex: 1 1 auto; } .gic-shead--row .gic-shead__aside { flex: 0 0 auto; } .gic-shead:not(.gic-shead--row) .gic-shead__aside { margin-top: 24px; } .gic-shead .gic-shead__eyebrow { margin: 0 0 16px; } .gic-shead .gic-shead__title { font-family: var(--gic-display); font-weight: 700; font-size: clamp(38px, 5vw, 60px); line-height: 1.2; color: var(--gic-green); margin: 0; overflow-wrap: break-word; word-break: break-word; } .gic-shead__title em { font-style: italic; color: var(--gic-accent); } .gic-shead__intro { font-family: var(--gic-sans); font-size: 20px; line-height: 1.5; color: var(--gic-ink); margin: 24px 0 0; max-width: 760px; } /* Centrado: la introducción también se centra. */ .gic-shead[style*="center"] .gic-shead__intro, .gic-shead__intro--center { margin-inline: auto; } /* Sobre fondo oscuro. */ .gic-shead--light .gic-shead__title { color: var(--gic-mint); } .gic-shead--light .gic-shead__intro { color: rgba(255, 255, 255, .85); } @media (max-width: 767px) { .gic-shead, .gic-shead--row { display: block; } .gic-shead--row .gic-shead__aside { margin-top: 22px; } .gic-shead .gic-shead__title { font-size: clamp(28px, 8vw, 38px); line-height: 1.15; } .gic-shead__intro { font-size: 16px; margin-top: 16px; } } @media (max-width: 479px) { .gic-shead .gic-shead__title { font-size: 26px; } } /* ---------- Icono elegido en la BIBLIOTECA de Elementor ---------- Cuando se elige un icono real (Font Awesome o SVG propio) se inyecta dentro del título como … y se apaga el rombo dibujado con ::before. Comparte las mismas variables que las formas. */ .elementor-heading-title.gic-has-ico { display: inline-flex; align-items: center; gap: var(--gic-ico-gap, 10px); } .elementor-heading-title.gic-has-ico::before { display: none !important; content: none !important; } .gic-title-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; color: var(--gic-ico-color, var(--gic-accent)); font-size: var(--gic-ico-size, 20px); transition: color .3s var(--gic-ease); } .gic-title-ico svg { width: var(--gic-ico-size, 20px); height: var(--gic-ico-size, 20px); display: block; } /* Los iconos de relleno (Font Awesome) se pintan con `fill`; los de trazo traen fill="none" inline. Si forzáramos `fill` a todos, los de trazo se convertirían en manchas sólidas. Por eso solo se pinta el relleno cuando el propio SVG no lo ha desactivado. */ .gic-title-ico svg:not([fill="none"]) { fill: currentColor; } .gic-title-ico svg[stroke] { stroke: currentColor; } .gic-title-ico i, .gic-title-ico i::before { font-size: var(--gic-ico-size, 20px); line-height: 1; } /* Títulos CENTRADOS (banda de clientes, cabeceras centradas): el icono fluye en línea con el texto en vez de ser un ítem flex, para que el conjunto quede centrado de verdad aunque el texto ocupe dos renglones. */ .gic-h2--center .elementor-heading-title.gic-has-ico, .gic-clients-title .elementor-heading-title.gic-has-ico { display: block; } .gic-h2--center .gic-title-ico, .gic-clients-title .gic-title-ico { display: inline-flex; vertical-align: middle; margin-right: var(--gic-ico-gap, 14px); position: relative; top: -1px; } /* ---------- Formas del iconito de los títulos ---------- Las activa el control «GICA · Icono del título» del widget Heading, que añade la clase gic-ico- al wrapper. Todas comparten las variables --gic-ico-size / --gic-ico-color / --gic-ico-gap. Nota de especificidad: la regla base del eyebrow es `.elementor-widget.gic-eyebrow-wrap .elementor-heading-title::before` (dos clases en el mismo elemento). Por eso aquí se dobla también la clase con `.elementor-widget`, si no el rombo original ganaría siempre. */ /* Títulos que NO son eyebrows del diseño: hay que crearles el icono. */ .elementor-widget[class*="gic-ico-"]:not(.gic-ico-):not(.gic-ico-none):not(.gic-eyebrow-wrap):not(.gic-clients-title) .elementor-heading-title { display: inline-flex; align-items: center; gap: var(--gic-ico-gap, 10px); } .elementor-widget[class*="gic-ico-"]:not(.gic-ico-):not(.gic-ico-none):not(.gic-eyebrow-wrap):not(.gic-clients-title) .elementor-heading-title::before { content: ""; display: inline-block; flex: 0 0 auto; width: var(--gic-ico-size, 7px); height: var(--gic-ico-size, 7px); background: var(--gic-ico-color, var(--gic-accent)); vertical-align: middle; } /* Formas (aplican a cualquier título: eyebrow, clientes o normal). */ .elementor-widget.gic-ico-none .elementor-heading-title::before, .gic-ico-none .elementor-heading-title::before { display: none !important; } .elementor-widget.gic-ico-diamond .elementor-heading-title::before, .gic-ico-diamond .elementor-heading-title::before { border-radius: 0; transform: rotate(45deg); clip-path: none; } .elementor-widget.gic-ico-circle .elementor-heading-title::before, .gic-ico-circle .elementor-heading-title::before { border-radius: 50%; transform: none; clip-path: none; } .elementor-widget.gic-ico-square .elementor-heading-title::before, .gic-ico-square .elementor-heading-title::before { border-radius: 0; transform: none; clip-path: none; } .elementor-widget.gic-ico-rounded .elementor-heading-title::before, .gic-ico-rounded .elementor-heading-title::before { border-radius: 30%; transform: none; clip-path: none; } .elementor-widget.gic-ico-triangle .elementor-heading-title::before, .gic-ico-triangle .elementor-heading-title::before { border-radius: 0; transform: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .elementor-widget.gic-ico-bar .elementor-heading-title::before, .gic-ico-bar .elementor-heading-title::before { border-radius: 2px; transform: none; clip-path: none; width: calc(var(--gic-ico-size, 7px) / 2); height: calc(var(--gic-ico-size, 7px) * 2.4); } /* Mismas formas para el eyebrow que dibujan los widgets GICA (.gic-eyebrow). */ .gic-eico-none .gic-eyebrow::before { display: none !important; } .gic-eico-diamond .gic-eyebrow::before { border-radius: 0; transform: rotate(45deg); clip-path: none; } .gic-eico-circle .gic-eyebrow::before { border-radius: 50%; transform: none; clip-path: none; } .gic-eico-square .gic-eyebrow::before { border-radius: 0; transform: none; clip-path: none; } .gic-eico-rounded .gic-eyebrow::before { border-radius: 30%; transform: none; clip-path: none; } .gic-eico-triangle .gic-eyebrow::before { border-radius: 0; transform: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .gic-eico-bar .gic-eyebrow::before { border-radius: 2px; transform: none; clip-path: none; width: calc(var(--gic-ico-size, 7px) / 2); height: calc(var(--gic-ico-size, 7px) * 2.4); } /* Párrafo introductorio bajo el H2 de sección (Servicios, Portafolio…). */ .gic-section-intro { font-family: var(--gic-sans); font-size: 20px; line-height: 1.5; color: var(--gic-ink); margin-top: 24px; max-width: var(--gic-intro-w, 1000px); } .gic-section-intro p { margin: 0; } .gic-section-intro--light { color: var(--gic-mint); } .gic-section-intro--center { text-align: center; margin-left: auto; margin-right: auto; } /* Encabezado de la banda de clientes — NO es el H2 grande de sección, tamaño propio más pequeño. */ .gic-clients-title .elementor-heading-title { font-family: var(--gic-sans); font-size: 28px; font-weight: 700; line-height: 1.35; color: var(--gic-green); text-align: center; } /* El check verde que precede al título en el Figma. Va como máscara para que el color siga saliendo de --gic-ico-color (y por tanto del control de Elementor «Icono del título → Color»). */ .gic-clients-title .elementor-heading-title::before { content: ""; display: inline-block; width: var(--gic-ico-size, 25px); height: var(--gic-ico-size, 25px); margin-right: var(--gic-ico-gap, 19px); background: var(--gic-ico-color, var(--gic-accent)); transform: none; vertical-align: -5px; -webkit-mask: var(--gic-check-svg) center / contain no-repeat; mask: var(--gic-check-svg) center / contain no-repeat; } /* Nav Menu de Elementor Pro dentro del header GICA */ .gic-header-menu .elementor-nav-menu a.elementor-item { font-family: var(--gic-sans); font-size: 18px; font-weight: 400; color: #253E32; padding: 10px 14px; } .gic-header-menu .elementor-nav-menu a.elementor-item:after { background: var(--gic-accent) !important; } .gic-header-menu .elementor-nav-menu a.elementor-item.elementor-item-active, .gic-header-menu .elementor-nav-menu a.elementor-item:hover { color: var(--gic-accent); } .gic-header-menu .elementor-nav-menu a.elementor-item:first-child, .gic-header-menu .elementor-nav-menu a.elementor-item.elementor-item-active { font-weight: 700; } .gic-header-menu .elementor-nav-menu { white-space: nowrap; gap: 32px; } .gic-footer-heading { font-family: var(--gic-sans); font-size: 18px; font-weight: 600; color: var(--gic-white); margin: 0 0 18px; } .gic-footer-links { list-style: none; margin: 0; padding: 0; } .gic-footer-links li { margin: 0 0 11px; } .gic-footer-links a { font-family: var(--gic-sans); font-size: 16px; color: var(--gic-white); opacity: 1; text-decoration: none; transition: opacity .3s var(--gic-ease), color .3s var(--gic-ease); } .gic-footer-links a:hover { color: var(--gic-yellow); } .gic-footer-desc { font-family: var(--gic-sans); font-size: 16px; font-weight: 400; line-height: 1.7; color: rgba(255, 255, 255, .72); max-width: 300px; } .gic-footer-desc p { margin: 0; } /* --- Footer: forzar texto legible sobre el verde oscuro. El kit (NC) pinta .elementor-heading-title y los enlaces de icon-list con colores oscuros que ganan por especificidad; apuntamos a los elementos REALES con !important. --- */ .gic-footer .elementor-heading-title { color: var(--gic-white) !important; } .gic-footer .gic-footer-desc, .gic-footer .gic-footer-desc p { color: rgba(255, 255, 255, .72) !important; } .gic-footer .gic-footer-links a, .gic-footer .gic-footer-links a .elementor-icon-list-text, .gic-footer .gic-footer-links .elementor-icon-list-text { color: rgba(255, 255, 255, .72) !important; } .gic-footer .gic-footer-links a:hover, .gic-footer .gic-footer-links a:hover .elementor-icon-list-text { color: var(--gic-yellow) !important; } .gic-footer .gic-footer-contact a, .gic-footer .gic-footer-contact a span { color: rgba(255, 255, 255, .82) !important; } .gic-footer .gic-footer-contact a:hover, .gic-footer .gic-footer-contact a:hover span { color: var(--gic-yellow) !important; } .gic-footer .gic-footer-contact__ic, .gic-footer .gic-footer-contact__ic svg { color: var(--gic-yellow) !important; } .gic-footer .gic-footer-social, .gic-footer .gic-footer-social .elementor-icon-list-text { color: rgba(255, 255, 255, .82) !important; } .gic-footer .gic-footer-social:hover { color: var(--gic-yellow) !important; } .gic-footer .gic-footer-legal, .gic-footer .gic-footer-legal p { color: rgba(255, 255, 255, .6) !important; } .gic-footer .gic-footer-legal a { color: rgba(255, 255, 255, .72) !important; } .gic-footer .gic-footer-legal a:hover { color: var(--gic-yellow) !important; } /* Contacto del footer: icono amarillo + texto. */ .gic-footer-contact a, .gic-footer-contact .gic-footer-contact__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-family: var(--gic-sans); font-size: 16px; color: var(--gic-white); text-decoration: none; } .gic-footer-contact a:hover { color: var(--gic-yellow); } .gic-footer-contact__ic { flex: 0 0 auto; display: inline-flex; color: var(--gic-yellow); } .gic-footer-contact__ic svg { width: 18px; height: 18px; display: block; } .gic-footer-social { display: inline-flex; align-items: center; gap: 10px; font-family: var(--gic-sans); font-size: 16px; color: var(--gic-white); text-decoration: none; } .gic-footer-social:hover { color: var(--gic-yellow); } .gic-footer-legal { font-family: var(--gic-sans); font-size: 13px; color: var(--gic-white); } .gic-footer-legal p { margin: 0; } .gic-footer-legal a { color: inherit; text-decoration: underline; } .gic-footer-legal a:hover { color: var(--gic-yellow); } .gic-social { display: flex; gap: 12px; } .gic-social a { width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gic-mint); transition: background .3s var(--gic-ease), color .3s var(--gic-ease), border-color .3s var(--gic-ease); } .gic-social a:hover { background: var(--gic-yellow); color: var(--gic-green); border-color: var(--gic-yellow); } .gic-social svg { width: 16px; height: 16px; } .gic-contact-list .elementor-icon-list-text { font-family: var(--gic-sans); font-size: 15px; color: var(--gic-white); } .gic-contact-list .elementor-icon-list-icon, .gic-contact-list .elementor-icon-list-icon i, .gic-contact-list .elementor-icon-list-icon svg { color: var(--gic-yellow); } /* Bloques de contacto (página Contacto): título + descripción + dato/enlace. */ .gic-contact-list .gic-contact-block { padding: 20px 0; border-bottom: 1px solid var(--gic-line); } .gic-contact-list .gic-contact-block:first-child { padding-top: 0; } .gic-contact-list .gic-contact-block:last-child { border-bottom: 0; } .gic-contact-list .gic-contact-block h3 { font-family: var(--gic-display); font-weight: 700; font-size: 20px; color: var(--gic-green); margin: 0 0 6px; } .gic-contact-list .gic-contact-block p { font-family: var(--gic-sans); font-size: 15px; line-height: 1.5; color: var(--gic-muted); margin: 0 0 8px; } .gic-contact-list .gic-contact-block a { font-family: var(--gic-sans); font-size: 16px; font-weight: 600; color: var(--gic-accent); text-decoration: none; } .gic-contact-list .gic-contact-block a:hover { text-decoration: underline; } /* ================================================================== Métodos de contacto (widget GICA · Métodos de contacto) Banda menta del frame «10 Contacto • Desktop»: 3 columnas de 370 con 45 de hueco; icono verde de 44, título 31, descripción 18/27 y el dato en verde. ================================================================== */ .gic-contact-methods { display: grid; grid-template-columns: repeat(var(--gic-cols, 3), minmax(0, 1fr)); column-gap: 45px; row-gap: 45px; width: 100%; } .gic-contact-method { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; } .gic-contact-method .gic-contact-method__ic { display: inline-flex; color: var(--gic-accent); margin: 0 0 26px; line-height: 0; } .gic-contact-method .gic-contact-method__ic svg { width: 44px; height: 44px; display: block; } .gic-contact-method .gic-contact-method__title { font-family: var(--gic-display); font-weight: 700; font-size: 31px; line-height: 1.2; letter-spacing: normal; color: var(--gic-green); margin: 0 0 17px; padding: 0; overflow-wrap: break-word; } .gic-contact-method .gic-contact-method__text { font-family: var(--gic-sans); font-size: 18px; font-weight: 400; line-height: 27px; color: var(--gic-ink); margin: 0 0 26px; } .gic-contact-method .gic-contact-method__value { display: inline-block; font-family: var(--gic-sans); font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--gic-accent); text-decoration: none; overflow-wrap: anywhere; transition: color .25s var(--gic-ease); } /* ================================================================== Bloques «Encuéntranos» y «Horarios» del pie de Contacto Foto 569 × 379 (3:2) con radio 16, titular 40 y el texto a 19/28. ================================================================== */ .gic-infoblock .gic-infoblock__img img, .gic-infoblock img { width: 100%; height: auto; aspect-ratio: var(--gic-infoblock-ratio, 3 / 2); object-fit: cover; border-radius: 16px; display: block; } .gic-infoblock-h .elementor-heading-title { font-family: var(--gic-display); font-weight: 700; font-size: clamp(30px, 3vw, 40px); line-height: 1.15; letter-spacing: normal; color: var(--gic-green); margin: 0; } .gic-infoblock-text, .gic-infoblock-text p { font-family: var(--gic-sans); font-size: 19px; font-weight: 400; line-height: 28px; color: var(--gic-ink); margin: 0; } .gic-infoblock-text strong { font-weight: 700; } /* Título de bloque (compatibilidad con páginas ya guardadas). */ .gic-block-h .elementor-heading-title { font-family: var(--gic-display); font-weight: 700; font-size: 28px; color: var(--gic-green); } /* ---------- Botón de la cabecera bajado debajo del carrusel (móvil) ---------- */ /* Lo coloca gica.js; aquí solo se le da el aire y el ancho que pide la lámina. El hueco vacío no ocupa nada mientras el botón está arriba (ordenador). */ .gic-carousel__btn-slot:empty { display: none; } .gic-carousel__btn-slot { width: 100%; } @media (max-width: 767px) { .gic-carousel__btn-slot { margin-top: 32px; } /* El botón baja a ancho completo. Especificidad baja (0,2,0) a propósito: el control «Ancho del botón» del widget escribe con {{WRAPPER}} y por tanto siempre puede más que esto. */ .gic-carousel__btn-slot .gic-btn { width: 100%; justify-content: center; } /* La columna de la cabecera que se ha quedado sin su botón. */ .gic-moved-out { display: none !important; } } /* ---------- Hero ---------- */ .gic-hero { position: relative; width: 100%; overflow: hidden; background: var(--gic-green); /* En columna para poder invertir el orden: en el teléfono la foto va DEBAJO del texto (control «Dónde va la foto»). */ display: flex; flex-direction: column; } .gic-hero__media, .gic-hero__content { width: 100%; } .gic-hero__media { position: relative; width: 100%; min-height: 653px; overflow: hidden; } .gic-slider__track { display: flex; width: 100%; height: 100%; transition: transform .7s var(--gic-ease); will-change: transform; } .gic-slide { position: relative; flex: 0 0 100%; width: 100%; } /* La altura full-bleed (653px) es SOLO del hero; testimonios/otros se ajustan al contenido. */ .gic-hero__media .gic-slide { height: 100%; min-height: 653px; } /* La foto del slide. El `:not(.gic-hero__watermark)` es porque desde la v1.35.0 el logo va dentro del propio slide (para poder ponerlo o quitarlo foto a foto) y no debe estirarse como la foto. */ .gic-slide img:not(.gic-hero__watermark) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .gic-hero__overlay { position: absolute; inset: 0; /* Scrim negro plano: deja leer la foto pero hace resaltar texto/logo. */ background: rgba(0, 0, 0, .45); z-index: 1; pointer-events: none; } .gic-hero__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Logo protagonista centrado sobre la foto oscurecida (como el Figma: ~536px). */ width: min(520px, 46%); height: auto; opacity: .95; z-index: 1; pointer-events: none; } .gic-hero__media--empty { display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: repeating-linear-gradient(45deg, #eef4ee, #eef4ee 12px, #e2ece2 12px, #e2ece2 24px); color: var(--gic-green); font-family: var(--gic-sans); font-size: 15px; line-height: 1.5; } .gic-hero__watermark img, .gic-hero__watermark svg { display: block; width: 100%; height: auto; } /* Desde la v1.35.0 el logo vive dentro de su slide, así que tiene que quedar por encima del velo oscuro, que es hermano del carril de fotos. */ .gic-hero__media .gic-slide .gic-hero__watermark { z-index: 2; } .gic-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border-radius: 12px; border: none; background: var(--gic-yellow); color: var(--gic-green); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 28px -14px rgba(22, 61, 42, .5); transition: background .3s var(--gic-ease), color .3s var(--gic-ease); } .gic-slider__nav svg { width: 18px; height: 18px; } .gic-slider__nav:hover { background: var(--gic-green); color: var(--gic-yellow); } .gic-slider__nav--prev { left: 32px; } .gic-slider__nav--next { right: 32px; } /* Variante sin sombra (control «Sombra» del hero). */ .gic-slider__nav--flat { box-shadow: none; } .gic-slider__nav--prev svg { transform: rotate(180deg); } /* Especificidad suficiente para ganar a estilos de botón del kit/tema activo. */ [data-gic="slider"] button.gic-slider__nav { background: var(--gic-yellow); color: var(--gic-green); border: none; } [data-gic="slider"] button.gic-slider__nav:hover { background: var(--gic-green); color: var(--gic-yellow); } .gic-slider__nav:focus-visible { outline: 2px solid var(--gic-accent); outline-offset: 2px; } .gic-slider__nav[disabled] { opacity: .35; pointer-events: none; box-shadow: none; } .gic-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; z-index: 3; list-style: none; margin: 0; padding: 0; } .gic-dots button { appearance: none; -webkit-appearance: none; width: 9px; height: 9px; padding: 0; margin: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .4); cursor: pointer; transition: background .3s var(--gic-ease), transform .3s var(--gic-ease); } .gic-dots button:hover { background: rgba(255, 255, 255, .7); } .gic-dots button.is-active { background: var(--gic-yellow); transform: scale(1.15); } .gic-dots button:focus-visible { outline: 2px solid var(--gic-accent); outline-offset: 2px; } /* El kit del sitio (NC) fuerza padding:16px 26px + border-radius:999px a TODOS los