/* ==========================================================================
components.css
--------------------------------------------------------------------------
Componentes reutilizables de interfaz: botones, tarjetas, menús, formularios,
selector de idioma, badges, paginación, etc.
Cada componente se escribe mobile-first; sus variantes por breakpoint van
en responsive.css. Se carga DESPUÉS de layout.css.
========================================================================== */
/* --------------------------------------------------------------------------
.gt-tabs — sistema de pestañas accesible
--------------------------------------------------------------------------
Patrón genérico: sirve para cualquier número de pestañas y puede repetirse
varias veces en una misma página. Ver assets/js/tabs.js
MEJORA PROGRESIVA. Por defecto la lista de pestañas está OCULTA y los
paneles VISIBLES: sin JavaScript se ven todas las secciones apiladas, que es
contenido correcto y navegable. Cuando el JS arranca añade .gt-tabs--ready y
entonces —y solo entonces— aparecen las pestañas y se oculta el panel
inactivo con el atributo hidden.
El contenido de todos los paneles está siempre en el HTML servido: se oculta
con CSS, nunca se elimina del DOM ni se carga por JS.
-------------------------------------------------------------------------- */
.gt-tabs__list {
display: none;
}
.gt-tabs--ready .gt-tabs__list {
/* Móvil: las pestañas reparten el ancho a partes iguales. Con dos etiquetas
cortas caben de sobra, y así cada una es un objetivo grande para el dedo
en lugar de dos palabras sueltas centradas. */
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 4px;
margin-bottom: 32px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.gt-tabs__tab {
position: relative;
padding: 14px 12px;
background: none;
border: 0;
cursor: pointer;
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
color: var(--color-text);
transition: color 0.2s ease;
}
/* Barra inferior. Se anima con scaleX, que no recalcula la maquetación. */
.gt-tabs__tab::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px; /* monta sobre el borde del tablist */
height: 3px;
background-color: var(--color-accent);
transform: scaleX(0);
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gt-tabs__tab:hover {
color: var(--color-primary);
}
/* Estado activo. Se estiliza desde aria-selected y no desde una clase: así el
aspecto no puede desincronizarse de lo que anuncia el lector de pantalla. */
.gt-tabs__tab[aria-selected="true"] {
color: var(--color-primary);
font-weight: 600;
}
.gt-tabs__tab[aria-selected="true"]::after {
transform: scaleX(1);
}
.gt-tabs__tab:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: -3px;
border-radius: 3px;
}
/* --------------------------------------------------------------------------
.gt-tabs__badge — contador opcional dentro de una pestaña
Para casos como "España 5": el número es dato, no adorno, así que va en el
HTML y no en un ::before de CSS.
-------------------------------------------------------------------------- */
.gt-tabs__badge {
display: inline-block;
margin-left: 7px;
padding: 1px 7px;
background-color: rgba(37, 73, 97, 0.1); /* --color-primary al 10% */
border-radius: 20px;
font-size: 0.75em;
font-weight: 600;
line-height: 1.5;
color: var(--color-primary);
transition: background-color 0.2s ease, color 0.2s ease;
}
.gt-tabs__tab[aria-selected="true"] .gt-tabs__badge {
background-color: var(--color-accent);
color: var(--color-bg);
}
/* --------------------------------------------------------------------------
.gt-visually-hidden — oculto en pantalla, presente para lectores
Utilidad general: quita el elemento de la vista sin sacarlo del árbol de
accesibilidad. No usar display:none, que sí lo saca.
-------------------------------------------------------------------------- */
.gt-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* El panel es enfocable para poder desplazarlo con el teclado; el foco al
llegar por tabulación no necesita marco propio. */
.gt-tabs__panel:focus {
outline: none;
}
/* Separación entre paneles cuando NO hay JS y se ven los dos seguidos. */
.gt-tabs:not(.gt-tabs--ready) .gt-tabs__panel + .gt-tabs__panel {
margin-top: 56px;
}
@media (min-width: 768px) {
/* Desde tablet las pestañas se centran y toman su ancho natural: repartir
el ancho completo entre dos etiquetas cortas dejaría dos botones enormes
y vacíos. */
.gt-tabs--ready .gt-tabs__list {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 40px;
/* LA RAYA, SOLO BAJO LAS PESTAÑAS. Cruzando la sección entera dejaba dos
etiquetas cortas flotando en medio de un filete de 1232 px que no era
suyo: el grupo se leía descentrado aunque estuviera centrado. Con el
ancho ajustado al contenido, la línea es el borde del grupo y el centrado
se ve. */
width: fit-content;
margin-inline: auto;
}
/* MODIFICADOR --left, HOY SIN USAR: la portada volvió a querer las pestañas
centradas. Se queda escrito porque este bloque ya ha cambiado de alineación
tres veces y reactivarlo es añadir la clase en la plantilla.
La regla de arriba centra el grupo con width:fit-content
y margin-inline:auto; aquí hay que deshacer las dos cosas, no solo el
justify-content: con el ancho ajustado al contenido, el margen automático
seguiría empujándolo al centro.
Tres clases para ganarle a la regla de arriba, que tiene dos. */
.gt-tabs--ready.gt-tabs--left .gt-tabs__list {
justify-content: flex-start;
margin-inline: 0;
}
.gt-tabs__tab {
padding: 16px 32px;
font-size: 1.0625rem;
}
}
@media (min-width: 1024px) {
.gt-tabs--ready .gt-tabs__list { margin-bottom: 48px; }
.gt-tabs__tab { padding: 18px 40px; font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
.gt-tabs__tab,
.gt-tabs__tab::after {
transition: none;
}
}
/* --------------------------------------------------------------------------
.gt-section-head — encabezado de sección (título + subtítulo)
Patrón repetido en todas las secciones de contenido del sitio.
-------------------------------------------------------------------------- */
.gt-section-head {
margin-bottom: 32px;
text-align: center;
}
/* --------------------------------------------------------------------------
.gt-section-head--left
--------------------------------------------------------------------------
REGLA: manda el eje de la página, no el de cada sección.
Se empezó aplicando este modificador solo donde el contenido de debajo iba
alineado a la izquierda, dejando centradas las secciones con rejilla de
tarjetas. En la práctica eso dejaba una sección descolocada respecto al
resto, así que en la página de servicio va en TODAS: el hero, los títulos y
el contenido comparten un único margen izquierdo de arriba abajo. Solo se
centra lo que va dentro de una tarjeta.
El valor por defecto del componente sigue siendo centrado, porque la home y
Calidad todavía no se han revisado con este criterio.
-------------------------------------------------------------------------- */
.gt-section-head--left {
text-align: left;
}
/* El subtítulo se centra con márgenes automáticos, así que hay que soltarlo
por la izquierda o seguiría centrado dentro de su propio ancho máximo. */
.gt-section-head--left .gt-section-head__subtitle {
margin-left: 0;
}
/* --------------------------------------------------------------------------
ESCALA DE LOS TÍTULOS DE SECCIÓN
--------------------------------------------------------------------------
Van SIEMPRE por debajo del H1 del hero, que mide 24 · 32 · 40px. Antes eran
26 · 32 · 36 y eso rompía la jerarquía por los dos lados: en móvil el título
de sección era MÁS GRANDE que el de la página, y en tablet median lo mismo.
La escala nueva —22 · 26 · 30px— deja un salto legible en los tres tamaños
sin que el título deje de mandar sobre su sección: el peso 700 y el azul lo
separan del cuerpo mucho antes que el tamaño.
-------------------------------------------------------------------------- */
.gt-section-head__title {
margin: 0 0 12px;
font-family: var(--font-primary);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-primary);
text-wrap: balance;
}
.gt-section-head__subtitle {
margin: 0 auto;
max-width: 68ch;
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.55;
color: var(--color-text);
text-wrap: pretty;
}
@media (min-width: 768px) {
.gt-section-head { margin-bottom: 40px; }
.gt-section-head__title { font-size: 1.625rem; }
.gt-section-head__subtitle { font-size: 1rem; }
}
@media (min-width: 1024px) {
/* EN ESCRITORIO EL SUBTÍTULO SE LLEVA TODO EL ANCHO DE LA SECCIÓN. Llevaba un
tope de 68ch —unos 650px— pensado como ancho de lectura cómodo, y el efecto
era el mismo que ya se corrigió en la entradilla de los silos: una frase que
arranca y muere a media sección, mientras el título de encima y las tarjetas
de debajo llegan a los 1232 del contenedor. Un renglón suelto más corto que
todo lo que le rodea no se lee como columna de lectura, se lee como algo mal
alineado.
SOLO EN LOS ENCABEZADOS ALINEADOS A LA IZQUIERDA. Los centrados —la home,
/contacto/— sí necesitan el tope: un texto centrado de 1232px de ancho es
ilegible, porque cada renglón empieza en un sitio distinto y el ojo pierde el
principio de línea. Ahí el límite se queda como estaba. */
.gt-section-head--left .gt-section-head__subtitle { max-width: none; }
.gt-section-head { margin-bottom: 48px; }
.gt-section-head__title { font-size: 1.875rem; }
}
/* --------------------------------------------------------------------------
.gt-service-grid — rejilla de tarjetas de servicio
--------------------------------------------------------------------------
EL PROBLEMA DE LA FILA HUÉRFANA. Con 13 tarjetas en 3 columnas, la última
fila queda con una sola tarjeta pegada a la izquierda. Y 13 es primo: no hay
número de columnas que reparta bien, así que el caso hay que resolverlo, no
esquivarlo.
Descartado auto-fit/minmax: reparte solo, pero deja las tarjetas de la
última fila más anchas que las de arriba, y entonces la retícula deja de
leerse como una retícula.
SOLUCIÓN: la rejilla tiene el DOBLE de columnas de las que se ven y cada
tarjeta ocupa dos. Eso da media columna de resolución, que es justo lo que
hace falta para centrar tanto una tarjeta suelta como dos.
Es una solución general: funciona con 9, con 13 y con cualquier número.
-------------------------------------------------------------------------- */
/* MÓVIL: 2 tarjetas por fila (rejilla de 4, span 2) */
.gt-service-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.gt-service-grid > * {
grid-column: span 2;
}
/* Número impar de tarjetas: la última se queda sola en su fila. Se centra. */
.gt-service-grid > :last-child:nth-child(2n + 1) {
grid-column: 2 / span 2;
}
@media (min-width: 480px) {
.gt-service-grid { gap: 16px; }
}
/* TABLET: 3 por fila (rejilla de 6, span 2) */
@media (min-width: 768px) {
.gt-service-grid {
grid-template-columns: repeat(6, 1fr);
gap: var(--gutter);
}
/* Anula el centrado de 2 columnas: con 3, que el número sea impar ya no
implica que sobre una tarjeta. Los reajustes van SIEMPRE antes que las
reglas nuevas: comparten especificidad y gana la última declarada. */
.gt-service-grid > :last-child:nth-child(2n + 1) {
grid-column: span 2;
}
/* Sobra UNA (13, 10, 7…) */
.gt-service-grid > :last-child:nth-child(3n + 1) {
grid-column: 3 / span 2;
}
/* Sobran DOS (14, 11, 8…): una a cada lado del eje */
.gt-service-grid > :nth-last-child(2):nth-child(3n + 1) {
grid-column: 2 / span 2;
}
.gt-service-grid > :nth-last-child(2):nth-child(3n + 1) + * {
grid-column: 4 / span 2;
}
}
/* DESKTOP: 4 por fila (rejilla de 8, span 2) */
@media (min-width: 1024px) {
.gt-service-grid {
grid-template-columns: repeat(8, 1fr);
}
/* Reajustes de los casos de 3 columnas */
.gt-service-grid > :last-child:nth-child(3n + 1),
.gt-service-grid > :nth-last-child(2):nth-child(3n + 1),
.gt-service-grid > :nth-last-child(2):nth-child(3n + 1) + * {
grid-column: span 2;
}
/* Sobra UNA (13, 9, 5…) */
.gt-service-grid > :last-child:nth-child(4n + 1) {
grid-column: 4 / span 2;
}
/* Sobran DOS (14, 10, 6…) */
.gt-service-grid > :nth-last-child(2):nth-child(4n + 1) {
grid-column: 3 / span 2;
}
.gt-service-grid > :nth-last-child(2):nth-child(4n + 1) + * {
grid-column: 5 / span 2;
}
/* Sobran TRES (15, 11, 7…) */
.gt-service-grid > :nth-last-child(3):nth-child(4n + 1) {
grid-column: 2 / span 2;
}
.gt-service-grid > :nth-last-child(3):nth-child(4n + 1) + * {
grid-column: 4 / span 2;
}
.gt-service-grid > :nth-last-child(3):nth-child(4n + 1) + * + * {
grid-column: 6 / span 2;
}
}
/* --------------------------------------------------------------------------
.gt-service-card — tarjeta de servicio
Componente reutilizable en todo el sitio. Ver
template-parts/components/service-card.php
-------------------------------------------------------------------------- */
.gt-service-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
height: 100%; /* todas las tarjetas de una fila, iguales */
padding: 18px 10px; /* ajustado a 2 columnas en móvil */
background-color: var(--color-bg);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06);
text-align: center;
text-decoration: none;
transition:
transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.25s ease;
}
.gt-service-card:hover,
.gt-service-card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
text-decoration: none;
}
.gt-service-card:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
.gt-service-card__icon — icono recoloreable
--------------------------------------------------------------------------
LOS ICONOS SON PNG, no SVG inline, así que no hay ningún "fill" que tocar.
TÉCNICA ELEGIDA: mask-image.
El PNG no se pinta: se usa su CANAL ALFA como recorte sobre un fondo de
color plano. Lo que era opaco en el PNG se ve del color que digamos, y lo
transparente sigue transparente. Cambiar de rojo a azul es entonces un
cambio de background-color, que además es animable.
Por qué no las alternativas:
- filter: hue-rotate() + saturate(): no permite llegar a un color de marca
concreto, hay que dar con la combinación por prueba y error, y el
resultado varía según el color de partida de cada icono.
- Duplicar cada icono en rojo y en azul: dobla los archivos que mantener y
dobla las descargas.
REQUISITO: el PNG debe tener fondo transparente. Si trae fondo blanco
opaco, la máscara lo tomará como parte del dibujo y saldrá un rectángulo
de color macizo.
RESPALDO: sin soporte de máscaras, el @supports no se aplica y el icono se
ve como imagen normal, con sus colores originales. Se pierde el
recoloreado, no el icono.
-------------------------------------------------------------------------- */
.gt-service-card__icon {
display: block;
width: 44px;
height: 44px;
flex-shrink: 0;
/* Respaldo: el PNG tal cual */
background-image: var(--gt-service-icon);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
.gt-service-card__icon {
background-image: none;
background-color: var(--color-accent);
-webkit-mask-image: var(--gt-service-icon);
mask-image: var(--gt-service-icon);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transition: background-color 0.25s ease;
}
.gt-service-card:hover .gt-service-card__icon,
.gt-service-card:focus-visible .gt-service-card__icon {
background-color: var(--color-primary);
}
}
/* Icono que todavía no existe en la Mediateca. Se marca en vez de dejar un
hueco vacío, para que un icono que falta se detecte de un vistazo. */
.gt-service-card__icon--missing {
background-image: none;
border: 2px dashed rgba(0, 0, 0, 0.18);
border-radius: 6px;
}
.gt-service-card__title {
font-family: var(--font-primary);
font-size: 0.75rem;
font-weight: 500; /* peso medio */
line-height: 1.3;
color: var(--color-text);
text-wrap: balance;
/* En columnas estrechas, títulos como "Almacén Fiscal de Hidrocarburos"
desbordan antes de encontrar dónde cortar. */
hyphens: auto;
overflow-wrap: break-word;
}
@media (min-width: 480px) {
.gt-service-card { padding: 22px 12px; gap: 12px; }
.gt-service-card__icon { width: 52px; height: 52px; }
.gt-service-card__title { font-size: 0.8125rem; }
}
@media (min-width: 768px) {
.gt-service-card { padding: 28px 18px; gap: 16px; }
.gt-service-card__icon { width: 64px; height: 64px; }
.gt-service-card__title { font-size: 0.9375rem; line-height: 1.35; }
}
@media (min-width: 1024px) {
.gt-service-card { padding: 32px 20px; gap: 18px; }
.gt-service-card__icon { width: 72px; height: 72px; }
.gt-service-card__title { font-size: 1rem; }
}
/* Sin movimiento para quien lo haya pedido: se conserva el cambio de color
del icono y la sombra, que no dependen de animación, pero no hay
desplazamiento. */
@media (prefers-reduced-motion: reduce) {
.gt-service-card {
transition: box-shadow 0.25s ease;
}
.gt-service-card:hover,
.gt-service-card:focus-visible {
transform: none;
}
}
/* ==========================================================================
VISOR DE IMAGEN (lightbox)
--------------------------------------------------------------------------
Componente genérico. Ver assets/js/lightbox.js
Vive en components.css y NO en gallery.css: lo comparten la galería de la
home y los certificados de la página de Calidad, que no carga gallery.css.
Antes estaba duplicado ahí dentro; se extrajo al hacerlo reutilizable.
El marcado lo crea el JS y se cuelga del : así queda fuera de
cualquier contenedor con overflow: hidden o transform, que son las dos
cosas que rompen un position: fixed.
No usa ninguna librería: son cuatro botones y una imagen.
========================================================================== */
.gt-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background-color: rgba(0, 0, 0, 0.92);
animation: gt-lightbox-in 0.2s ease both;
}
/* [hidden] por sí solo no gana a display: flex; hay que declararlo. */
.gt-lightbox[hidden] {
display: none;
}
@keyframes gt-lightbox-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Bloquea el scroll del fondo mientras el visor está abierto. Se aplica al
, que es donde vive el overflow-x: clip del proyecto. */
.gt-lightbox-open {
overflow: hidden;
}
.gt-lightbox__figure {
margin: 0;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.gt-lightbox__img {
display: block;
max-width: 100%;
/* dvh sigue el alto real del viewport en móvil cuando aparecen y
desaparecen las barras del navegador; vh queda de respaldo. */
max-height: 74vh;
max-height: 74dvh;
object-fit: contain;
border-radius: 6px;
background-color: var(--color-primary);
}
.gt-lightbox__caption {
margin: 0;
max-width: 60ch;
font-family: var(--font-primary);
font-size: 0.875rem;
line-height: 1.4;
color: var(--color-bg);
text-align: center;
}
.gt-lightbox__btn {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 44px; /* 44px es el mínimo cómodo para el dedo */
height: 44px;
padding: 0;
background-color: rgba(255, 255, 255, 0.12);
color: var(--color-bg);
border: 0;
border-radius: 50%;
cursor: pointer;
font-family: var(--font-primary);
font-size: 1.375rem;
line-height: 1;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.gt-lightbox__btn:hover {
background-color: rgba(255, 255, 255, 0.26);
transform: scale(1.08);
}
.gt-lightbox__btn:focus-visible {
outline: 3px solid var(--color-bg);
outline-offset: 3px;
}
.gt-lightbox__close { top: 12px; right: 12px; }
.gt-lightbox__prev { left: 10px; top: 50%; translate: 0 -50%; }
.gt-lightbox__next { right: 10px; top: 50%; translate: 0 -50%; }
/* Desde tablet hay sitio para separar los controles de los bordes */
@media (min-width: 768px) {
.gt-lightbox { padding: 32px; }
.gt-lightbox__btn { width: 52px; height: 52px; font-size: 1.625rem; }
.gt-lightbox__close { top: 24px; right: 24px; }
.gt-lightbox__prev { left: 24px; }
.gt-lightbox__next { right: 24px; }
.gt-lightbox__img { max-height: 78vh; max-height: 78dvh; }
.gt-lightbox__caption { font-size: 0.9375rem; }
}
/* El JS añade esta clase cuando el sistema pide movimiento reducido. Se hace
por clase y no solo por media query porque la animación de entrada la
declara este mismo archivo. */
.gt-lightbox--no-motion {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.gt-lightbox { animation: none; }
.gt-lightbox__btn { transition: none; }
.gt-lightbox__btn:hover { transform: none; }
}
/* --------------------------------------------------------------------------
.gt-page-header — cabecera de página interna
--------------------------------------------------------------------------
Componente reutilizable. Ver template-parts/components/page-header.php
Vive en components.css y no en calidad.css a propósito: lo usarán todas las
páginas internas, y calidad.css solo se carga en la plantilla de Calidad.
-------------------------------------------------------------------------- */
.gt-page-header {
position: relative;
overflow: hidden;
/* Azul corporativo. Una página interna necesita un arranque con peso: sobre
el gris claro anterior, el título competía con la cabecera del sitio y la
página empezaba sin jerarquía. Blanco sobre este azul da 9:1 de contraste,
muy por encima del mínimo. */
background-color: var(--color-primary);
padding-block: 28px 32px;
}
/* --------------------------------------------------------------------------
Franja decorativa: un degradado diagonal muy sutil, del propio azul a negro.
Rompe el plano del color plano sin introducir ningún color nuevo ni pedir
una imagen de fondo que habría que mantener.
-------------------------------------------------------------------------- */
.gt-page-header__decor {
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(115deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 55%),
linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 60%);
}
/* --------------------------------------------------------------------------
Variante con fotografía de fondo.
--------------------------------------------------------------------------
SIN VELO DE COLOR: la foto se ve con sus propios tonos, no teñida de azul.
Lo que sí se mantiene es un degradado NEUTRO —negro con opacidad— y no es
decorativo: sobre una fotografía el texto blanco puede caer encima de una
zona clara y volverse ilegible. El degradado es denso a la izquierda, donde
está el texto, y se abre hacia la derecha para que la imagen se lea. Es el
mismo recurso que el hero de la home.
Alto propio: una cabecera de servicio es la primera pantalla de una landing
y necesita presencia. Se usa svh para que las barras del navegador móvil no
recorten el contenido al aparecer y desaparecer.
-------------------------------------------------------------------------- */
.gt-page-header--has-image {
display: flex;
align-items: stretch;
/* 80svh y no más: deja asomar una franja de la sección siguiente, que es lo
que invita a seguir bajando. A pantalla completa el visitante no sabe si
hay algo debajo.
Con el contenido centrado, la altura extra se reparte arriba y abajo, así
que lo que gana el hero es aire, no huecos.
EL TOPE EN PÍXELES ES LO QUE IMPORTA. svh no tiene techo: el hero crece
con la pantalla pero el contenido no, así que el mismo diseño se ve
ajustado en una pantalla corta y vacío en una alta. El tope congela ese
hueco. En un móvil normal ni se activa; en uno grande evita un hero de
745px con 360px de contenido dentro. */
min-height: min(80vh, 620px);
min-height: min(80svh, 620px);
background-image: var(--gt-header-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* El bloque ocupa todo el alto y centra por dentro: así no salta si el navegador
pinta antes de tener todo el texto (CLS). */
.gt-page-header--has-image .gt-page-header__inner {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.gt-page-header--has-image .gt-page-header__decor {
background-image:
linear-gradient(
100deg,
rgba(0, 0, 0, 0.80) 0%,
rgba(0, 0, 0, 0.66) 42%,
rgba(0, 0, 0, 0.38) 74%,
rgba(0, 0, 0, 0.22) 100%
),
linear-gradient(0deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 55%);
}
.gt-page-header__inner {
position: relative;
z-index: 1;
}
/* --------------------------------------------------------------------------
.gt-page-header__video — vídeo de fondo del hero interior
--------------------------------------------------------------------------
Cubre la sección entera por debajo del degradado. object-fit: cover recorta
como lo haría una foto de fondo, así que el vídeo se comporta igual que la
imagen a la que sustituye y no hay que tocar nada más del hero.
z-index 0, el mismo que .gt-page-header__decor: el orden del marcado decide,
y el vídeo va antes. Así el degradado sigue cayendo encima y el texto
conserva su contraste sea cual sea el fotograma.
-------------------------------------------------------------------------- */
/* En móvil el hero con vídeo baja a la altura del de la portada: 60svh y 68svh
a partir de 480px. Antes se quedaba en el tope de 620px y era MÁS alto que la
portada, que es justo al revés de lo que se espera. */
.gt-page-header--has-image.gt-page-header--has-video {
min-height: 60vh;
min-height: 60svh;
}
@media (min-width: 480px) {
.gt-page-header--has-image.gt-page-header--has-video {
min-height: 68vh;
min-height: 68svh;
}
}
/* --------------------------------------------------------------------------
UN HERO CON VÍDEO PIDE MÁS ALTURA QUE UNO CON FOTO.
--------------------------------------------------------------------------
Con la foto, el tope de 620px estaba bien: la imagen se lee entera de un
vistazo. Un vídeo necesita sitio para que se vea que se mueve; a 594px en una
pantalla de 900 quedaba en una franja, y al lado del hero de la portada
—que ocupa la ventana entera— parecía un recorte.
SOLO DESDE TABLETA. En móvil el hero interior ya es MÁS alto que el de la
portada (620px contra 506px), así que allí no hay nada que subir.
vh y no svh a propósito: svh existe para la barra del navegador que aparece y
desaparece, que es cosa de móvil. De 768px arriba, vh es estable y predecible.
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
/* DOS CLASES, Y NO UNA, A PROPÓSITO. Más abajo hay dos reglas de
.gt-page-header--has-image —en 768 y en 1024— que vuelven a fijar la
altura. Con una sola clase empataríamos en especificidad y ganarían ellas
por ir después; con dos, esta manda esté donde esté en el archivo. */
.gt-page-header--has-image.gt-page-header--has-video {
min-height: min(88vh, 760px);
}
}
/* En escritorio, un escalón más: la misma medida que el hero de la portada. */
@media (min-width: 1024px) {
.gt-page-header--has-image.gt-page-header--has-video {
min-height: min(92vh, 880px);
}
}
/* La foto del hero como ![]()
(ver page-header.php): ocupa todo el hero
debajo del degradado y del contenido, igual que el vídeo. */
.gt-page-header__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
pointer-events: none;
}
.gt-page-header__video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Un vídeo es un elemento en línea: sin esto deja el hueco del descendente
debajo y el hero crece unos píxeles sin motivo. */
display: block;
/* No es interactivo: que no se coma los clics ni el cursor de texto. */
pointer-events: none;
}
/* Filo de acento a la izquierda del título: ata la cabecera a la paleta sin
pintar texto de rojo, que sobre azul no tendría contraste suficiente. */
.gt-page-header__title {
margin: 12px 0 0;
padding-left: 14px;
border-left: 4px solid var(--color-accent);
font-family: var(--font-primary);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-bg);
/* pretty y NO balance. balance reparte el título en líneas de longitud
parecida, y con "Almacén de Productos Químicos APQ & Seveso" eso partía
justo entre "Productos" y "Químicos", que son una unidad. pretty deja que
la línea se llene y solo evita que la última quede huérfana. */
text-wrap: pretty;
}
/* El hueco hasta el título crece con el tamaño del H1 en cada breakpoint
(22 · 26 · 32px). Con el mismo valor en los tres, en móvil sobraba y en
escritorio el bloque se leía como un párrafo de tres líneas seguidas en
lugar de tres piezas distintas. */
.gt-page-header__subtitle {
margin: 22px 0 0;
max-width: 62ch;
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
text-wrap: pretty;
}
/* --------------------------------------------------------------------------
Fragmento destacado de la entradilla.
--------------------------------------------------------------------------
Sube a blanco puro además de engordar: sobre el degradado del hero, el peso
por sí solo casi no se nota, y el resto de la entradilla va al 86% de opacidad
justamente para que este trozo pueda despegarse.
700 y no 600 porque el padre solo autoaloja Poppins en 300, 400 y 700: pedir
600 acabaría resolviéndose igualmente en 700, pero dejando en el CSS un
número que no existe.
-------------------------------------------------------------------------- */
.gt-page-header__mark {
font-weight: 700;
color: #fff;
}
/* --------------------------------------------------------------------------
Acciones de la cabecera
--------------------------------------------------------------------------
La cabecera absorbió el bloque de entradilla que antes iba debajo: título,
mensaje y salida a contacto son ahora una sola unidad. Así lo primero que se
ve ya lleva una vía de contacto, en vez de obligar a recorrer la página
entera hasta encontrarla.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
Las dos acciones, SIEMPRE en una fila.
--------------------------------------------------------------------------
En móvil los dos botones se reparten el ancho a partes iguales y se les
recorta el relleno lateral. No cabe todo en una línea de texto: "Hablar con
un técnico" parte en dos dentro de su botón. Se acepta a cambio de tener las
dos vías de contacto a la vista sin scroll, y align-items: stretch iguala
las alturas para que el botón de dos líneas no descuadre al otro.
El recorte del relleno se aplica SOLO dentro de la cabecera, no a .gt-btn en
general: el mismo botón se usa en la home y allí no hace falta.
-------------------------------------------------------------------------- */
.gt-page-header__actions {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 10px;
margin-top: 32px;
}
/* flex-basis auto y no 0: los dos botones llenan la fila, pero repartiéndose
el sobrante según lo que ocupa cada etiqueta. A partes iguales, el número de
WhatsApp —que es más largo que "Contáctenos"— se quedaba sin sitio y partía
en dos líneas. */
.gt-page-header__actions > * {
flex: 1 1 auto;
min-width: 0;
justify-content: center;
text-align: center;
}
.gt-page-header__actions .gt-btn,
.gt-page-header__actions .gt-page-header__phone {
padding-inline: 12px;
}
@media (min-width: 480px) {
/* A partir de aquí sobra ancho: cada botón vuelve a ocupar lo suyo y
recupera el relleno completo. */
.gt-page-header__actions {
gap: 14px;
}
.gt-page-header__actions > * {
flex: 0 1 auto;
}
.gt-page-header__actions .gt-btn { padding-inline: 34px; }
.gt-page-header__actions .gt-page-header__phone { padding-inline: 30px; }
}
/* --------------------------------------------------------------------------
Segunda acción: mismo tamaño que el botón principal, relleno AZUL.
--------------------------------------------------------------------------
El azul corporativo sobre el degradado oscuro del hero casi no se despega
del fondo, así que el botón lleva un filo blanco tenue: sin él se vería el
texto flotando y no una pieza pulsable. El texto va en blanco, que sobre
#254961 da 9:1.
-------------------------------------------------------------------------- */
.gt-page-header__phone {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background-color: var(--color-primary);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 3px;
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-bg);
text-decoration: none;
transition: background-color 0.25s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gt-page-header__phone-icon {
display: flex;
flex-shrink: 0;
}
.gt-page-header__phone-icon svg {
width: 18px;
height: 18px;
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* El botón principal mueve su flecha al pasar el ratón; este mueve su símbolo,
para que los dos respondan y no parezca que solo uno está vivo. Un crecimiento
corto basta: el botón ya se eleva y se aclara a la vez. */
.gt-page-header__phone:hover .gt-page-header__phone-icon svg,
.gt-page-header__phone:focus-visible .gt-page-header__phone-icon svg {
transform: scale(1.12);
}
.gt-page-header__phone:hover,
.gt-page-header__phone:focus-visible {
/* Un punto más claro, derivado del propio token: si cambia la paleta, el
hover cambia solo. */
background-color: color-mix(in srgb, var(--color-primary) 82%, #fff);
border-color: rgba(255, 255, 255, 0.75);
color: var(--color-bg);
text-decoration: none;
transform: translateY(-2px);
}
.gt-page-header__phone:active {
transform: translateY(0);
}
.gt-page-header__phone:focus-visible {
outline: 3px solid var(--color-bg);
outline-offset: 3px;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
Acabado compartido de las dos acciones del hero
--------------------------------------------------------------------------
Los dos botones tienen que leerse como una pareja y no como dos piezas
traídas de sitios distintos. Comparten tres cosas:
1. Un filo claro en el canto superior (box-shadow inset). Simula que la luz
cae desde arriba y le da cuerpo al botón sin dibujar un borde, que ya
lleva el de teléfono y sería redundante.
2. La misma sombra proyectada en reposo, en hover y al pulsar, para que los
dos se muevan en el mismo plano.
3. Un barrido de brillo que cruza el botón al pasar el ratón.
El barrido va en un ::before absoluto y por tanto se pinta POR ENCIMA del
texto: es justo lo que se espera de un reflejo, que cruce la pieza entera.
pointer-events: none evita que el pseudoelemento se coma el clic, y
overflow: hidden lo recorta a la forma del botón. El contorno de foco no se
ve afectado: se dibuja fuera de la caja y no lo recorta overflow.
Va acotado a .gt-page-header__actions a propósito. El mismo .gt-btn se usa
en la home y en los CTA de sección, donde no hay foto detrás y este acabado
sería puro ruido.
-------------------------------------------------------------------------- */
.gt-page-header__actions .gt-btn,
.gt-page-header__actions .gt-page-header__phone {
position: relative;
overflow: hidden;
/* 4px en lugar de los 3px del componente: sobre una foto, un canto tan vivo
recorta duro. Un punto más de radio y la pieza se asienta. */
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 4px 14px rgba(0, 0, 0, 0.28);
}
.gt-page-header__actions .gt-btn::before,
.gt-page-header__actions .gt-page-header__phone::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 45%;
background-image: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.26) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-18deg);
pointer-events: none;
/* Se desplaza con transform y no cambiando left: así el recorrido lo resuelve
la tarjeta gráfica y no obliga a recalcular la maquetación 60 veces por
segundo. Más lento que el resto de transiciones del botón: el brillo es lo
último que llega, después de que el color y la elevación ya hayan cambiado. */
transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 390% de su propio ancho (45% del botón) equivale a cruzar de -60% a 115%
del botón, es decir, entrar por fuera y salir por fuera. */
.gt-page-header__actions .gt-btn:hover::before,
.gt-page-header__actions .gt-btn:focus-visible::before,
.gt-page-header__actions .gt-page-header__phone:hover::before,
.gt-page-header__actions .gt-page-header__phone:focus-visible::before {
transform: translateX(390%) skewX(-18deg);
}
.gt-page-header__actions .gt-btn:hover,
.gt-page-header__actions .gt-btn:focus-visible,
.gt-page-header__actions .gt-page-header__phone:hover,
.gt-page-header__actions .gt-page-header__phone:focus-visible {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.30),
0 10px 24px rgba(0, 0, 0, 0.34);
}
.gt-page-header__actions .gt-btn:active,
.gt-page-header__actions .gt-page-header__phone:active {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 2px 6px rgba(0, 0, 0, 0.28);
}
/* Sin movimiento para quien lo haya pedido. Se conservan el cambio de color y
la sombra, que no son animación, y desaparecen el barrido y el crecimiento
del símbolo. */
@media (prefers-reduced-motion: reduce) {
.gt-page-header__phone,
.gt-page-header__phone-icon svg {
transition: none;
}
.gt-page-header__actions .gt-btn::before,
.gt-page-header__actions .gt-page-header__phone::before {
display: none;
}
.gt-page-header__phone:hover .gt-page-header__phone-icon svg,
.gt-page-header__phone:focus-visible .gt-page-header__phone-icon svg {
transform: none;
}
}
.gt-page-header__breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
font-family: var(--font-primary);
font-size: 0.8125rem;
line-height: 1.4;
}
/* Separador dibujado con CSS y no escrito en el HTML: así no lo lee el lector
de pantalla ni aparece al copiar el texto. */
.gt-page-header__breadcrumb li + li::before {
content: "/";
margin-right: 6px;
color: rgba(255, 255, 255, 0.4);
}
.gt-page-header__breadcrumb li {
display: flex;
align-items: center;
}
/* --------------------------------------------------------------------------
Sobre azul, el hover NO va a rojo de acento: ese rojo sobre este azul da
1.9:1 de contraste, muy por debajo del mínimo legible. Se resuelve pasando
a blanco puro con subrayado, que además es el gesto esperado en un enlace.
-------------------------------------------------------------------------- */
.gt-page-header__breadcrumb a {
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
transition: color 0.2s ease;
}
.gt-page-header__breadcrumb a:hover,
.gt-page-header__breadcrumb a:focus-visible {
color: var(--color-bg);
text-decoration: underline;
}
.gt-page-header__breadcrumb a:focus-visible {
outline: 3px solid var(--color-bg);
outline-offset: 3px;
border-radius: 2px;
}
/* Página actual y pasos intermedios sin enlace: algo más apagados, para que
se distingan de los que sí llevan a algún sitio. */
.gt-page-header__breadcrumb [aria-current="page"],
.gt-page-header__breadcrumb .gt-page-header__step {
color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 768px) {
.gt-page-header { padding-block: 44px 56px; }
/* Anchos acotados por dispositivo: sin límite, el título y la entradilla se
estiran hasta los 1232px útiles del contenedor y las últimas palabras caen
sobre la mitad derecha, que es donde el degradado se aclara para dejar ver
la foto y el contraste baja. */
/* 28ch da margen para que "Almacén de Productos Químicos" quepa entero en la
primera línea; con menos, el corte vuelve a caer dentro del sintagma. */
.gt-page-header__title { font-size: 2rem; padding-left: 18px; max-width: 28ch; }
.gt-page-header__subtitle { font-size: 1.0625rem; margin-top: 26px; max-width: 66ch; }
.gt-page-header__breadcrumb ol { font-size: 0.875rem; }
.gt-page-header__actions { margin-top: 38px; }
/* .gt-btn sube a 1rem en este breakpoint; el botón de teléfono tiene que
subir con él o la pareja se lee con dos cuerpos distintos. */
.gt-page-header__phone { font-size: 1rem; }
.gt-page-header--has-image {
min-height: min(60vh, 560px);
min-height: min(60svh, 560px);
}
}
@media (min-width: 1024px) {
.gt-page-header { padding-block: 60px 76px; }
/* EL TITULAR PUEDE SER MÁS ANCHO QUE UN PÁRRAFO. Estuvo a 28ch —unos 730px—
dentro de un contenedor de 1280: un titular largo de artículo se partía en
tres renglones con medio hero vacío a la derecha. Un titular no se lee
renglón a renglón como un texto seguido, se lee de un golpe, así que el
límite de las 80 columnas no le aplica: lo que le aplica es no pasar de dos
o tres líneas.
1000px POR PETICIÓN EXPRESA, y en píxeles y no en `ch` para que sea el
número que se pidió y no uno que dependa de la fuente. El contenedor da
1232, así que la cabecera respira 232px a la derecha: lo justo para que el
texto no toque el borde.
El titular y la entradilla van al MISMO ancho a propósito: son dos líneas de
la misma voz, y verlas cortar por sitios distintos hace que la cabecera
parezca dos bloques pegados en vez de uno.
El texto seguido del artículo NO cambia: ese va por su cuenta, a 800px. */
.gt-page-header__title { font-size: 2.5rem; max-width: 1000px; }
/* 74ch ocupa algo más de la mitad del contenedor, que es hasta donde el
degradado sigue siendo denso. Más ancho llevaría el final de las líneas a
la zona clara, donde la foto se ve y el texto blanco pierde contraste. */
/* --------------------------------------------------------------------
RITMO VERTICAL EN ESCRITORIO
Con un título de 48px, 16px de separación hasta la entradilla y 36px
hasta el botón dejaban los tres elementos apelmazados: los huecos deben
crecer con la tipografía, y aquí no lo hacían. Se separan en proporción
al tamaño que tiene el título a este breakpoint.
-------------------------------------------------------------------- */
/* Más pequeña que en tablet, no mayor: con el H1 en 40px, una entradilla de
17px competía con él. A 16px la jerarquía queda en 2,5×, y el bloque de
texto se estrecha —74ch escalan con la tipografía— así que además termina
antes de llegar a la zona clara del degradado. */
.gt-page-header__subtitle { font-size: 1rem; max-width: 1000px; margin-top: 32px; }
.gt-page-header__actions { margin-top: 40px; gap: 16px 20px; }
.gt-page-header--has-image {
min-height: min(66vh, 640px);
min-height: min(66svh, 640px);
}
}
/* Móvil en horizontal: un teléfono apaisado tiene muy poca altura y 56svh
dejaría el botón fuera de pantalla. */
@media (max-height: 500px) and (orientation: landscape) {
.gt-page-header--has-image {
min-height: 0;
padding-block: 32px 40px;
}
}
@media (prefers-reduced-motion: reduce) {
.gt-page-header__breadcrumb a { transition: none; }
}
/* --------------------------------------------------------------------------
.gt-locations__grid — rejilla de sedes
1 columna en móvil, 2 desde tablet, 3 desde desktop.
Sin lógica de fila huérfana: los grupos son de 5 y 2 sedes, y una fila
incompleta alineada a la izquierda se lee bien cuando el grupo lleva su
propio encabezado de país delante.
-------------------------------------------------------------------------- */
.gt-locations__grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.gt-locations__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--gutter);
}
}
@media (min-width: 1024px) {
.gt-locations__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* --------------------------------------------------------------------------
.gt-location — tarjeta de sede
--------------------------------------------------------------------------
Componente reutilizable. Ver template-parts/components/location-card.php
Mismo lenguaje visual que .gt-service-card y .gt-news-card: radio 10px,
misma sombra. No eleva en hover porque la tarjeta NO es clicable entera —
dentro hay dos enlaces distintos (teléfono y mapa), y sugerir que la caja
entera lleva a algún sitio sería mentir.
-------------------------------------------------------------------------- */
.gt-location {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
padding: 22px 20px;
background-color: var(--color-bg);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06);
}
.gt-location__name {
margin: 0 0 8px;
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
color: var(--color-primary);
text-wrap: balance;
}
/* La sede en rojo y la provincia en azul (usuario, 2026-09-13): CONSTANTÍ es
lo que se busca con la vista, (TARRAGONA) es el contexto y va sin negrita. El rojo #c94644
sobre blanco da 4,6:1, suficiente para texto en negrita de 16px y para los
13px del país. */
.gt-location__site {
color: var(--color-accent);
}
.gt-location__area {
color: var(--color-primary);
font-weight: 400;
}
/* --------------------------------------------------------------------------
Tipo de instalación y país: UNA LÍNEA, en gris y en frase normal.
--------------------------------------------------------------------------
Eran dos pastillas en mayúsculas —roja el tipo, azul el país— y el usuario
las descartó el 2026-09-12. Encaja con lo que ya ha pedido dos veces en
otros sitios: los rótulos pequeños quietos, en gris y sin caja. Lo que
distingue una planta de un lavadero es la palabra, no el color del fondo.
El punto medio separa los dos datos cuando están los dos; si falta uno, no
se dibuja, porque va pegado al país y no al tipo.
-------------------------------------------------------------------------- */
.gt-location__tags {
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin: 0 0 14px;
font-family: var(--font-primary);
font-size: 0.8125rem;
line-height: 1.4;
color: color-mix(in srgb, var(--color-text) 62%, var(--color-bg));
}
.gt-location__type,
.gt-location__country {
display: inline;
}
/* El país también en rojo, a juego con la sede; el tipo de instalación y el
punto medio siguen en el gris de la línea. */
.gt-location__country {
color: var(--color-accent);
font-weight: 700; /* en negrita a petición del usuario (2026-09-13); Poppins no trae el 600 */
}
.gt-location__type + .gt-location__country::before {
color: color-mix(in srgb, var(--color-text) 62%, var(--color-bg));
}
.gt-location__type + .gt-location__country::before {
content: "·";
margin: 0 0.45em;
}
/* --------------------------------------------------------------------------
Filas de dirección y teléfono
-------------------------------------------------------------------------- */
.gt-location__row {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 12px;
font-family: var(--font-primary);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-text);
}
.gt-location__icon {
display: flex;
flex-shrink: 0;
/* Empuja el icono a la altura de la primera línea de texto en vez de dejarlo
pegado al borde superior de la caja. */
margin-top: 2px;
color: var(--color-primary);
}
.gt-location__icon svg {
width: 15px;
height: 15px;
}
.gt-location__phone {
color: var(--color-text);
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.gt-location__phone:hover,
.gt-location__phone:focus-visible {
color: var(--color-accent);
color: color-mix(in srgb, var(--color-accent) 86%, #000);
text-decoration: underline;
}
/* --------------------------------------------------------------------------
Enlace al mapa
margin-top: auto lo empuja al fondo de la tarjeta, de modo que en una fila
con direcciones de distinta longitud todos los enlaces quedan alineados.
-------------------------------------------------------------------------- */
.gt-location__map {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 6px;
font-family: var(--font-primary);
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease, gap 0.2s ease;
}
.gt-location__map-icon {
width: 13px;
height: 13px;
}
.gt-location__map:hover,
.gt-location__map:focus-visible {
color: var(--color-accent);
color: color-mix(in srgb, var(--color-accent) 86%, #000);
gap: 9px;
text-decoration: underline;
}
.gt-location a:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
border-radius: 2px;
}
@media (min-width: 768px) {
.gt-location { padding: 24px 22px; }
.gt-location__name { font-size: 1.0625rem; }
.gt-location__row { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
.gt-location__phone,
.gt-location__map {
transition: color 0.2s ease;
}
.gt-location__map:hover,
.gt-location__map:focus-visible {
gap: 6px;
}
}
/* --------------------------------------------------------------------------
.gt-news-grid — rejilla de tarjetas de noticia
--------------------------------------------------------------------------
1 columna en móvil, 2 desde tablet, 4 desde desktop (una sola fila con las
cuatro últimas noticias).
A diferencia de .gt-service-grid, aquí NO hay lógica de fila huérfana: el
número de tarjetas lo fija la consulta (posts_per_page), no el contenido, y
está elegido para cuadrar con las columnas.
Una sola columna en móvil y no dos: estas tarjetas llevan imagen y titular
completo, y a media pantalla el titular se rompería en seis o siete líneas.
-------------------------------------------------------------------------- */
.gt-news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.gt-news-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--gutter);
}
}
@media (min-width: 1024px) {
.gt-news-grid {
grid-template-columns: repeat(4, 1fr);
}
/* EL ARCHIVO VA A TRES. En la home las cuatro últimas noticias son un aperitivo
y una fila de cuatro dice «hay más dentro»; en /noticias/ y /blog/ están todas,
y son varias filas seguidas. A cuatro por fila la tarjeta se queda en 284px y
el titular se rompe en cinco o seis renglones: la rejilla deja de leerse como
tarjetas y se lee como un muro. A tres, cada una mide 389px.
Se pone en un modificador y no en la plantilla del archivo para que el ancho de
la tarjeta y el `sizes` de su imagen —que va escrito en category.php— se vean
de una vez cuando alguien toque uno de los dos. */
.gt-news-grid--archivo {
grid-template-columns: repeat(3, 1fr);
}
}
/* --------------------------------------------------------------------------
.gt-news-card — tarjeta de noticia
--------------------------------------------------------------------------
Componente reutilizable. Ver template-parts/components/news-card.php
Mismo lenguaje visual que .gt-service-card —radio, sombra, elevación en
hover— para que las dos rejillas de la home se lean como del mismo sistema.
-------------------------------------------------------------------------- */
.gt-news-card {
display: flex;
flex-direction: column;
height: 100%; /* todas las tarjetas de una fila, iguales */
overflow: hidden; /* recorta la imagen al radio de la tarjeta */
background-color: var(--color-bg);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06);
text-decoration: none;
transition:
transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.25s ease;
}
.gt-news-card:hover,
.gt-news-card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
text-decoration: none;
}
.gt-news-card:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
Imagen
Proporción fija 16:10 para que las cuatro tarjetas midan lo mismo aunque las
imágenes destacadas vengan en formatos distintos. Fijarla en el contenedor
reserva el hueco antes de que llegue el archivo: sin salto de maquetación.
-------------------------------------------------------------------------- */
.gt-news-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: var(--color-bg-alt); /* se ve mientras carga */
}
.gt-news-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gt-news-card:hover .gt-news-card__img {
transform: scale(1.05);
}
/* Entrada sin imagen destacada. Ocupa exactamente el mismo espacio que una
imagen real, así que la fila no se descuadra. */
.gt-news-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: var(--color-primary);
color: var(--color-bg);
}
.gt-news-card__placeholder svg {
width: 38%;
max-width: 64px;
height: auto;
opacity: 0.35;
}
/* --------------------------------------------------------------------------
Texto
-------------------------------------------------------------------------- */
.gt-news-card__body {
display: flex;
flex-direction: column;
gap: 8px;
/* flex: 1 iguala la altura de los cuerpos cuando un titular ocupa más
líneas que otro, de modo que las tarjetas terminan a la misma altura. */
flex: 1;
padding: 18px 18px 22px;
}
/* Fecha en gris: acompaña al titular sin competir con él. Se deriva del color
de texto en lugar de introducir un gris suelto, para que siga la paleta. */
.gt-news-card__date {
font-family: var(--font-primary);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.02em;
color: rgba(0, 0, 0, 0.55);
}
.gt-news-card__title {
margin: 0;
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
color: var(--color-text);
text-wrap: pretty;
transition: color 0.2s ease;
}
.gt-news-card:hover .gt-news-card__title,
.gt-news-card:focus-visible .gt-news-card__title {
color: var(--color-primary);
}
@media (min-width: 768px) {
.gt-news-card__body { padding: 20px 20px 24px; }
.gt-news-card__date { font-size: 0.8125rem; }
.gt-news-card__title { font-size: 1rem; }
}
@media (min-width: 1280px) {
.gt-news-card__title { font-size: 1.0625rem; }
}
/* Sin movimiento para quien lo haya pedido: se conservan sombra y cambio de
color, que no dependen de animación. */
@media (prefers-reduced-motion: reduce) {
.gt-news-card,
.gt-news-card__img,
.gt-news-card__title {
transition: box-shadow 0.25s ease;
}
.gt-news-card:hover,
.gt-news-card:focus-visible {
transform: none;
}
.gt-news-card:hover .gt-news-card__img {
transform: none;
}
}
/* --------------------------------------------------------------------------
.gt-feature — bloque destacado (texto + imagen + CTA)
--------------------------------------------------------------------------
Componente reutilizable en todo el sitio. Ver
template-parts/components/feature-block.php
Vive en components.css y no en un módulo propio por el mismo criterio que
.gt-service-card: lo reutilizable va aquí, y los módulos de sección guardan
solo el envoltorio (fondo y espaciado) de cada sección concreta.
MÓVIL: una columna. La imagen va primero porque es el primer elemento del
HTML — engancha, y el texto y el botón cierran el bloque justo antes de la
siguiente sección.
-------------------------------------------------------------------------- */
.gt-feature {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
}
/* --------------------------------------------------------------------------
Imagen
La proporción 16:9 es casi la nativa del archivo (1080×516 ≈ 2.09), así que
el recorte de object-fit es mínimo. Fijar la proporción en el contenedor, y
no dejar que la marque la imagen, reserva el hueco antes de que el archivo
llegue: no hay salto de maquetación al cargar.
-------------------------------------------------------------------------- */
.gt-feature__media {
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 10px;
background-color: var(--color-bg-alt); /* se ve mientras carga */
}
.gt-feature__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --------------------------------------------------------------------------
Variante 'badge': sellos, logos o certificados en lugar de fotografía.
--------------------------------------------------------------------------
Se muestran a su tamaño real y sin recortar. Un sello de 300×300 estirado a
una caja 16:9 saldría borroso Y mutilado por los lados, que es justo lo que
no puede pasarle a un distintivo normativo: es una acreditación, y tiene que
leerse entera y nítida.
-------------------------------------------------------------------------- */
.gt-feature--media-badge .gt-feature__media {
aspect-ratio: auto;
overflow: visible;
border-radius: 0;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.gt-feature--media-badge .gt-feature__img {
width: auto;
height: auto;
max-width: 220px;
max-height: 220px;
object-fit: contain;
border-radius: 8px;
}
@media (min-width: 1024px) {
.gt-feature--media-badge .gt-feature__img {
max-width: 260px;
max-height: 260px;
}
}
/* --------------------------------------------------------------------------
Texto
-------------------------------------------------------------------------- */
.gt-feature__title {
margin: 0 0 14px;
font-family: var(--font-primary);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
text-wrap: balance;
}
/* Fragmento resaltado del título, en color de acento. Se marca desde el
componente con un ; el resto del título queda en color de texto para
que el contraste haga su trabajo. */
.gt-feature__highlight {
color: var(--color-accent);
}
.gt-feature__text {
margin: 0 0 24px;
max-width: 58ch; /* longitud de línea cómoda de leer */
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.65;
color: var(--color-text);
}
/* El botón reutiliza .gt-btn tal cual; aquí solo se asegura de que no herede
el ancho completo del contenedor en móvil. */
.gt-feature__cta {
align-self: flex-start;
}
@media (min-width: 480px) {
.gt-feature__title { font-size: 1.75rem; }
.gt-feature__text { font-size: 1rem; }
}
/* Desde tablet, dos columnas. La imagen se coloca por número de columna en vez
de por order: así el HTML puede mantener siempre el mismo orden y la
variante izquierda/derecha es solo cuestión de posición en la rejilla. */
@media (min-width: 768px) {
.gt-feature {
grid-template-columns: 1fr 1fr;
gap: var(--gutter);
}
.gt-feature--image-right .gt-feature__media { grid-column: 2; grid-row: 1; }
.gt-feature--image-right .gt-feature__content { grid-column: 1; grid-row: 1; }
.gt-feature--image-left .gt-feature__media { grid-column: 1; grid-row: 1; }
.gt-feature--image-left .gt-feature__content { grid-column: 2; grid-row: 1; }
.gt-feature__title { font-size: 2rem; margin-bottom: 16px; }
}
@media (min-width: 1024px) {
.gt-feature {
gap: 56px;
}
.gt-feature__title { font-size: 2.25rem; margin-bottom: 18px; }
.gt-feature__text { font-size: 1.0625rem; margin-bottom: 28px; }
}
@media (min-width: 1280px) {
.gt-feature { gap: 64px; }
.gt-feature__title { font-size: 2.5rem; }
}
/* --------------------------------------------------------------------------
.gt-btn — botón de llamada a la acción
Vive aquí y no en hero.css porque se reutilizará en el resto de secciones:
es un componente, no una pieza del hero.
Usa --color-accent, reservado justamente para CTAs.
-------------------------------------------------------------------------- */
.gt-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 34px;
background-color: var(--color-accent);
color: var(--color-bg);
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.04em;
text-align: center;
text-decoration: none;
border: 0;
border-radius: 3px;
cursor: pointer;
/* Sombra en reposo: mínima, solo despega el botón del fondo */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Flecha decorativa. Va en un pseudoelemento y no en el HTML porque no aporta
significado: el texto del botón ya dice a dónde lleva. Se desplaza en hover
para reforzar la idea de avance. */
.gt-btn::after {
content: "→";
font-family: var(--font-symbols);
font-size: 1.05em;
line-height: 1;
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gt-btn:hover,
.gt-btn:focus-visible {
/* Tono un punto más oscuro derivado del propio token: si cambia la paleta,
el hover cambia solo. color-mix no está en Safari < 16.2; allí el botón
simplemente conserva el color base, que sigue siendo correcto. */
background-color: color-mix(in srgb, var(--color-accent) 86%, #000);
/* Elevación: subida corta y sombra algo más abierta */
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
text-decoration: none;
color: var(--color-bg);
}
.gt-btn:hover::after,
.gt-btn:focus-visible::after {
transform: translateX(4px);
}
/* Al pulsar, el botón vuelve a apoyarse: da sensación de clic físico */
.gt-btn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Foco visible por teclado: obligatorio para accesibilidad. Se dibuja por
fuera del botón para que se vea también sobre el vídeo del hero. */
.gt-btn:focus-visible {
outline: 3px solid var(--color-bg);
outline-offset: 3px;
}
@media (min-width: 768px) {
.gt-btn {
padding: 17px 42px;
font-size: 1rem;
}
}
/* Sin movimiento para quien lo haya pedido: el botón conserva el cambio de
color en hover, que no depende de animación, pero no se desplaza. */
@media (prefers-reduced-motion: reduce) {
.gt-btn,
.gt-btn::after {
transition: background-color 0.25s ease;
}
.gt-btn:hover,
.gt-btn:focus-visible,
.gt-btn:active {
transform: none;
}
.gt-btn:hover::after,
.gt-btn:focus-visible::after {
transform: none;
}
}
/* ==========================================================================
CTA FINAL
========================================================================== */
/* --------------------------------------------------------------------------
BANDA de cierre, no caja.
--------------------------------------------------------------------------
Antes era un rectángulo azul redondeado flotando dentro del contenedor, con
fondo blanco alrededor. Es la solución por defecto de cualquier plantilla y
se leía como un anuncio pegado al final, no como el final.
A todo el ancho, la página termina en un plano completo: no queda nada
alrededor que mirar y las dos únicas salidas son los botones.
Y en azul OSCURO, no en el azul corporativo. Ese ya lo usa la franja de
medidas de seguridad, y dos planos idénticos separados solo por una sección
blanca se leen como la misma pieza repetida. Oscurecerlo, además, hace que
el rojo del botón salte más.
-------------------------------------------------------------------------- */
.gt-service-cta {
position: relative;
padding-block: 48px;
background-color: #1d394c; /* reserva */
background-color: color-mix(in srgb, var(--color-primary) 78%, #000);
/* Luz suave desde la esquina superior derecha en lugar de un degradado
diagonal: da profundidad sin dibujar una diagonal que compita con nada. */
background-image:
radial-gradient(115% 85% at 100% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 58%);
/* Filo rojo superior: separa la banda de la sección blanca anterior y repite
el recurso del hero, donde el mismo rojo marca el H1. Sobre fondo oscuro
el acento decora, nunca escribe: aquí es una línea, no texto. */
border-top: 4px solid var(--color-accent);
}
.gt-service-cta__inner {
display: flex;
flex-direction: column;
gap: 26px;
}
/* Mismo tamaño que cualquier otro título de sección, aunque sea el cierre de
la página: quien lo destaca es el bloque azul que lo rodea, no la tipografía.
Si además fuera más grande, sería el texto mayor de todo el documento y
competiría con el H1. */
.gt-service-cta__title {
margin: 0 0 10px;
font-family: var(--font-primary);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-bg);
text-wrap: balance;
}
.gt-service-cta__text {
margin: 0;
max-width: 54ch;
font-family: var(--font-primary);
font-size: 1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
text-wrap: pretty;
}
/* Fragmento destacado. Sube a blanco puro además de engordar: el resto de la
línea va al 85% de opacidad justamente para que este trozo pueda despegarse.
700 y no 600 porque el padre solo autoaloja Poppins en 300, 400 y 700. */
.gt-service-cta__mark {
font-weight: 700;
color: #fff;
}
/* --------------------------------------------------------------------------
Las dos acciones, SIEMPRE en una fila, igual que en el hero.
--------------------------------------------------------------------------
El teléfono ya no es un enlace de texto junto al botón: es un segundo botón.
Con el texto del bloque reducido a un título y una línea, un enlace suelto
se quedaba flotando y no se leía como opción, sino como pie de página del
recuadro.
En móvil se reparten el ancho y se les recorta el relleno lateral, mismo
criterio que en la cabecera.
-------------------------------------------------------------------------- */
.gt-service-cta__actions {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 10px;
}
.gt-service-cta__actions > * {
flex: 1 1 auto;
min-width: 0;
justify-content: center;
text-align: center;
}
.gt-service-cta__actions .gt-btn {
padding-inline: 12px;
}
/* --------------------------------------------------------------------------
Segundo botón: cara BLANCA con la letra azul.
--------------------------------------------------------------------------
Aquí no puede repetirse la fórmula del hero —relleno azul con filo blanco—
porque el fondo de la banda ya es azul y el botón desaparecería. Se invierte
del todo: blanco macizo y el texto en el azul corporativo, que sobre blanco
da 9:1.
Frente al contorno hueco que había antes, el blanco macizo da una pareja de
dos piezas sólidas en vez de una sólida y una vacía. Sigue sin competir con
el botón principal, porque quien manda la atención es el color: el rojo es
el único acento de la banda.
La sombra es la misma que la de .gt-btn, en reposo y en hover, para que los
dos se muevan en el mismo plano.
-------------------------------------------------------------------------- */
.gt-service-cta__phone {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 15px 12px;
background-color: var(--color-bg);
/* Filo del mismo blanco que la cara: no se ve, pero mantiene la altura que
ya tenía el botón y evita que la pareja se descuadre. */
border: 1px solid var(--color-bg);
border-radius: 4px;
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-primary);
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
transition:
box-shadow 0.25s ease,
transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gt-service-cta__phone-icon {
display: flex;
flex-shrink: 0;
}
.gt-service-cta__phone-icon svg {
width: 18px;
height: 18px;
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* No cambia de color al pasar el ratón: sobre blanco cualquier tinte se
ensuciaría con el azul del fondo. Lo que responde es la elevación y la
sombra, igual que en el botón principal. */
.gt-service-cta__phone:hover,
.gt-service-cta__phone:focus-visible {
background-color: var(--color-bg);
color: var(--color-primary);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
}
.gt-service-cta__phone:hover .gt-service-cta__phone-icon svg,
.gt-service-cta__phone:focus-visible .gt-service-cta__phone-icon svg {
transform: scale(1.12);
}
.gt-service-cta__phone:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.gt-service-cta__phone:focus-visible {
outline: 3px solid var(--color-bg);
outline-offset: 3px;
}
/* Se conserva la sombra del hover, que no es animación; se van el
desplazamiento y el crecimiento del símbolo. Los selectores repiten :hover
y :focus-visible a propósito: sin ellos no ganarían en especificidad a las
reglas de arriba y el botón seguiría moviéndose. */
@media (prefers-reduced-motion: reduce) {
.gt-service-cta__phone,
.gt-service-cta__phone-icon svg {
transition: box-shadow 0.25s ease;
}
.gt-service-cta__phone:hover,
.gt-service-cta__phone:focus-visible,
.gt-service-cta__phone:active {
transform: none;
}
.gt-service-cta__phone:hover .gt-service-cta__phone-icon svg,
.gt-service-cta__phone:focus-visible .gt-service-cta__phone-icon svg {
transform: none;
}
}
@media (min-width: 480px) {
/* Desde aquí sobra ancho: cada botón ocupa lo suyo y recupera el relleno
completo, mismo criterio que en la cabecera. */
.gt-service-cta__actions { gap: 14px; }
.gt-service-cta__actions > * { flex: 0 1 auto; }
.gt-service-cta__actions .gt-btn { padding-inline: 34px; }
.gt-service-cta__phone { padding-inline: 26px; }
}
@media (min-width: 768px) {
.gt-service-cta { padding-block: 64px; }
.gt-service-cta__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.gt-service-cta__title { font-size: 1.625rem; }
.gt-service-cta__text { font-size: 1rem; }
/* .gt-btn sube a 1rem en este breakpoint; el segundo botón tiene que subir
con él o la pareja se lee con dos cuerpos distintos. */
.gt-service-cta__phone { font-size: 1rem; }
/* En fila también aquí, no apilados. Con el texto reducido a dos líneas, el
bloque es ancho y bajo: dos botones en columna a la derecha lo estirarían
de alto justo cuando lo que se busca es que se lea de un vistazo. */
.gt-service-cta__actions {
flex-shrink: 0;
gap: 14px;
}
/* LA FILA SE PARTE CUANDO NO CABE, y hasta ahora no se partía. Los botones no
encogen, así que entre 768 y 1023 el texto se quedaba con los 179 px que
sobraban y caía en SIETE líneas de tres palabras. Con una base de 420 px,
cuando el párrafo no llega a esa medida los botones bajan solos a la línea
siguiente y el texto recupera el ancho entero.
min-width: 0 porque un elemento flexible no baja de su contenido mínimo si
no se le dice: sin esto, la base de 420 px es una intención, no un límite. */
.gt-service-cta__inner { flex-wrap: wrap; }
.gt-service-cta__body {
flex: 1 1 420px;
min-width: 0;
}
}
@media (min-width: 1024px) {
.gt-service-cta { padding-block: 76px; }
.gt-service-cta__title { font-size: 1.875rem; }
/* SE LEVANTA EL TOPE DE 54ch, que dejaba el párrafo en 543 px y una franja de
aire muerto hasta los botones. El tope de línea existe para que un texto
largo no se lea a saltos; aquí son dos frases dentro de una banda de color,
y el ancho lo marca el hueco que dejan los botones, no una medida de
columna de lectura. El párrafo tampoco llega al borde: los botones no
encogen y el gap de 40 px se mantiene. */
.gt-service-cta__text { max-width: none; }
}
/* ==========================================================================
.gt-fab — botón flotante de contacto
==========================================================================
Aparece al bajar media ventana y abre tres vías: WhatsApp, llamada y
formulario. Arriba del todo no hace falta —el hero ya tiene su botón y la
cabecera su Contacto—, y un tercero pidiendo lo mismo en la misma pantalla
sobra.
POSICIÓN: abajo a la derecha, pero POR ENCIMA del botón «Subir» del tema
padre, que es fijo, mide 45px y vive a 20px del borde en escritorio. En móvil
ese botón no es fijo, así que aquí baja a 20px del suelo.
z-index 998: por debajo de la cabecera (999) y por encima de todo lo demás.
Si algún día tapa algo, ese es el número a mirar.
========================================================================== */
.gt-fab {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 998;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
/* Escondido hasta que el script lo saca. Sin JS no aparece nunca, y es lo
correcto: sin JS tampoco se abriría. */
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.gt-fab--visible {
opacity: 1;
visibility: visible;
transform: none;
}
/* --------------------------------------------------------------------------
Las tres acciones
--------------------------------------------------------------------------
Pastilla con el rótulo a la izquierda y el símbolo en su círculo a la
derecha: el símbolo solo obliga a adivinar, y aquí adivinar cuesta una
llamada perdida.
-------------------------------------------------------------------------- */
.gt-fab__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
/* EL ATRIBUTO hidden NO GANA A UN display DECLARADO. El navegador lo aplica con
«[hidden] { display: none }» en su hoja de usuario, que pierde contra
cualquier regla de autor: con el display:flex de arriba, la lista seguía
ocupando sus 238px de alto aunque estuviera «cerrada». Hay que decirlo. */
.gt-fab__actions[hidden] {
display: none;
}
.gt-fab__action {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 6px 6px 16px;
background-color: var(--color-bg);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10), 0 8px 22px rgba(0, 0, 0, 0.14);
text-decoration: none;
transition: transform 0.2s ease;
}
.gt-fab__action:hover,
.gt-fab__action:focus-visible {
transform: translateX(-2px);
}
.gt-fab__label {
font-family: var(--font-primary);
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
color: var(--color-primary);
white-space: nowrap;
}
.gt-fab__icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
color: var(--color-bg);
}
.gt-fab__icon svg {
width: 20px;
height: 20px;
}
/* Verde de WhatsApp: es una marca y su color es parte de cómo se reconoce. */
.gt-fab__action--wa .gt-fab__icon { background-color: #25d366; }
.gt-fab__action--tel .gt-fab__icon { background-color: var(--color-primary); }
.gt-fab__action--mail .gt-fab__icon { background-color: var(--color-accent); }
/* --------------------------------------------------------------------------
El botón que abre
-------------------------------------------------------------------------- */
.gt-fab__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 0;
background-color: var(--color-accent);
color: var(--color-bg);
border: 0;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16), 0 10px 28px rgba(0, 0, 0, 0.18);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.gt-fab__toggle:hover,
.gt-fab__toggle:focus-visible {
background-color: color-mix(in srgb, var(--color-accent) 86%, #000);
transform: translateY(-2px);
}
.gt-fab__toggle svg {
width: 26px;
height: 26px;
}
/* La cruz sustituye al bocadillo al abrir: dos iconos en el mismo botón, y se
enseña uno u otro. Así no hay que redibujar nada por JS. */
.gt-fab__toggle-icon--cerrar { display: none; }
.gt-fab--abierto .gt-fab__toggle-icon--abrir { display: none; }
.gt-fab--abierto .gt-fab__toggle-icon--cerrar { display: flex; }
@media (prefers-reduced-motion: reduce) {
.gt-fab,
.gt-fab__action,
.gt-fab__toggle {
transition: none;
}
.gt-fab__action:hover,
.gt-fab__toggle:hover {
transform: none;
}
}
@media (min-width: 1024px) {
/* Ya no hay que dejar sitio al «Subir» del padre: está oculto en footer.css.
El flotante baja al rincón, que es donde se espera. */
.gt-fab {
right: 20px;
bottom: 20px;
}
}