/* Theme Name: Hello Elementor Child Theme URI: https://www.solucionweb.com/ Description: Tema hijo personalizado para Hello Elementor con login privado, reglas de acceso, botones flotantes configurables, WhatsApp, shortcodes básicos administrables y seguridad antispam para formularios. Author: Solución Web Author URI: https://www.solucionweb.com/ Template: hello-elementor Version: 2.4.6 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: custom-login, translation-ready, elementor, child-theme */ /* ========================================================================== EL ÉBANO · Estilos personalizados -------------------------------------------------------------------------- Los colores, tipografías, botones y campos de formulario viven en Elementor › Ajustes del sitio (kit). Aquí sólo va lo que los widgets no resuelven por sí solos. Cada bloque indica la zona del sitio donde se usa y la clase CSS que se asigna en Elementor › Avanzado › Clases CSS. ========================================================================== */ /* -------------------------------------------------------------------------- 0. GLOBAL -------------------------------------------------------------------------- */ :root { --eb-header-h: 126px; /* lo recalcula assets/js/elebano.js */ --eb-ease: cubic-bezier(.22, .61, .36, 1); --eb-esquina: 25px; /* esquina unica del sitio */ } html { scroll-behavior: smooth; } body { overflow-x: clip; -webkit-font-smoothing: antialiased; } [id] { scroll-margin-top: calc(var(--eb-header-h) + 24px); } :focus-visible { outline: 3px solid var(--e-global-color-secondary); outline-offset: 3px; } /* Palabra destacada de los titulares ( dentro del título) */ .elementor-heading-title em, .elementor-widget-theme-post-title em { font-style: normal; color: var(--e-global-color-secondary); } .elementor-heading-title .destacado { color: var(--e-global-color-accent); } .elementor-heading-title { text-wrap: balance; } /* Botones: elevación leve al pasar el puntero (mismo gesto de la maqueta) */ .elementor-button { transition: background-color .25s var(--eb-ease), color .25s var(--eb-ease), border-color .25s var(--eb-ease), transform .25s var(--eb-ease); white-space: nowrap; } .elementor-button:hover { transform: translateY(-2px); } @media (max-width: 420px) { .elementor-button { white-space: normal; text-align: center; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- 1. ENCABEZADO · plantilla «Encabezado del sitio» Clases: .encabezado-sitio .topbar .topbar-emergencia .barra-navegacion .menu-principal (ítems del menú: .menu-solo-movil .menu-cta-movil) -------------------------------------------------------------------------- */ .topbar .elementor-icon-list-item, .topbar .elementor-icon-list-text { white-space: nowrap; } .topbar .elementor-button { line-height: 1.1; } .topbar .elementor-icon-list-items { flex-wrap: nowrap; } .topbar { overflow: hidden; } @media (max-width: 767px) { .topbar .solo-escritorio { display: none; } } .topbar-emergencia b { color: var(--e-global-color-accent); font-weight: 700; letter-spacing: .03em; } /* Barra de navegación: se compacta al hacer scroll (efecto de Elementor sticky) */ .encabezado-sitio .barra-navegacion { transition: min-height .3s var(--eb-ease); } .encabezado-sitio.elementor-sticky--effects .barra-navegacion { --min-height: 70px; } .encabezado-sitio .header-logo img { transition: width .3s var(--eb-ease), transform .3s var(--eb-ease); } /* Logos del encabezado y del pie: crecen levemente al pasar el puntero */ .encabezado-sitio .header-logo img, .pie-logo img { transform-origin: center; } /* Ítems que sólo existen en el menú móvil (Contacto y el CTA) */ .menu-principal .elementor-nav-menu--main .menu-solo-movil { display: none; } .menu-principal .elementor-nav-menu--dropdown .menu-cta-movil > a { margin: 14px 16px 18px; justify-content: center; border-radius: 4px; background: var(--e-global-color-accent) !important; color: var(--e-global-color-text) !important; font-weight: 600; } /* Menú desplegable: indicador naranja a la izquierda, como en la maqueta */ .menu-principal .elementor-nav-menu--main .sub-menu a { border-left: 2px solid transparent; } .menu-principal .elementor-nav-menu--main .sub-menu a:hover { border-left-color: var(--e-global-color-accent); } .menu-principal .elementor-nav-menu--main .sub-menu { min-width: 272px; padding: 8px; } .menu-principal .elementor-nav-menu--main .sub-menu a { border-radius: 4px !important; } /* Menú móvil: panel de ancho completo bajo el encabezado fijo; hace scroll si no cabe. No empuja ni se monta sobre el logo ni sobre el ícono del menú. */ @media (max-width: 1024px) { .menu-principal .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; left: 0 !important; right: 0 !important; width: 100vw !important; top: var(--eb-menu-top, var(--eb-header-h)) !important; margin: 0 !important; z-index: 989; max-height: calc(100dvh - var(--eb-menu-top, var(--eb-header-h))); overflow-y: auto; border-top: 1px solid var(--e-global-color-linea); box-shadow: 0 24px 40px rgba(0,43,99,.18); } .menu-principal .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container { box-shadow: none; } .menu-principal .elementor-nav-menu--dropdown a { padding-left: 24px !important; padding-right: 24px !important; } } .menu-principal .elementor-nav-menu--dropdown a { text-transform: uppercase; font-weight: 600; letter-spacing: .03em; } .menu-principal .elementor-nav-menu--dropdown .sub-menu a { text-transform: none; font-weight: 500; letter-spacing: 0; } /* El ícono del menú nunca se monta sobre el logo ni sobre otros elementos */ .menu-principal { min-width: 0; } .menu-principal .elementor-menu-toggle { margin-left: auto; flex: none; } @media (max-width: 1024px) { .menu-principal .elementor-menu-toggle { width: 44px; height: 44px; justify-content: center; } } /* Móvil y tablet: los enlaces de la barra superior amplían su área táctil sin cambiar la altura de la barra */ @media (max-width: 1024px) { .topbar .elementor-icon-list-item > a, .topbar .elementor-button { position: relative; } .topbar .elementor-icon-list-item > a::after, .topbar .elementor-button::after { content: ""; position: absolute; inset: -8px -4px; } } /* -------------------------------------------------------------------------- 2. INICIO · Carrusel de portada Clases: .carrusel-portada .slide-portada .slide-aniversario .aniv-cifra .contador-50 .slide-foto -------------------------------------------------------------------------- */ .carrusel-portada .slide-portada { min-height: calc(100svh - var(--eb-header-h)); } @media (max-width: 767px) { .carrusel-portada .slide-portada { min-height: max(620px, calc(100svh - var(--eb-header-h))); } } /* Fondo del aniversario: retícula suave y halos de luz */ .slide-aniversario { position: relative; isolation: isolate; overflow: hidden; } .slide-aniversario::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 0%, transparent 78%); mask-image: radial-gradient(75% 65% at 50% 45%, #000 0%, transparent 78%); } .slide-aniversario::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; width: 40vw; height: 40vw; left: -10vw; bottom: -12vw; background: radial-gradient(circle, rgba(255,157,0,.16) 0%, transparent 70%); animation: ebHalo 18s ease-in-out infinite alternate; } @keyframes ebHalo { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(3vw,-4vh,0) scale(1.12); } } /* Anillo punteado que gira alrededor del «50» */ .aniv-cifra { position: relative; } .aniv-cifra::before { content: ""; position: absolute; inset: auto; top: 50%; left: 50%; right: auto; bottom: auto; width: min(94%, 430px); height: auto; aspect-ratio: 1; background: none; opacity: 1; border: 1.5px dashed rgba(5,170,216,.55); border-radius: 50%; transform: translate(-50%, -50%); animation: ebAnillo 34s linear infinite; pointer-events: none; } @keyframes ebAnillo { to { transform: translate(-50%, -50%) rotate(360deg); } } .contador-50 .elementor-counter-number-wrapper { font-variant-numeric: tabular-nums; } .contador-50 .elementor-counter-title { padding-left: .42em; } @media (max-width: 767px) { .aniv-cifra::before { width: min(78vw, 300px); } } /* Navegación del carrusel: punto activo alargado en naranja */ .carrusel-portada .swiper-pagination-bullet { transition: width .25s var(--eb-ease), background-color .25s; opacity: 1; } .carrusel-portada .swiper-pagination-bullet-active { width: 30px; border-radius: 100px; background: var(--e-global-color-accent); } .carrusel-portada .elementor-swiper-button { transition: background-color .25s, color .25s; } /* Flechas y puntos juntos, abajo a la izquierda y alineados con el contenido (como en la maqueta): flecha (40 px) · 16 px · puntos (81 px) · 16 px · flecha */ .carrusel-portada { --eb-nav-x: max(48px, calc((100% - 1184px) / 2)); } @media (max-width: 1024px) { .carrusel-portada { --eb-nav-x: 32px; } } @media (max-width: 767px) { .carrusel-portada { --eb-nav-x: 20px; } } .carrusel-portada .elementor-swiper-button { top: auto !important; bottom: 35px !important; transform: none !important; width: 40px; height: 40px; padding: 0 !important; box-sizing: border-box; justify-content: center; align-items: center; } .carrusel-portada .elementor-swiper-button-prev { left: var(--eb-nav-x) !important; right: auto !important; } .carrusel-portada .elementor-swiper-button-next { left: calc(var(--eb-nav-x) + 153px) !important; right: auto !important; } .carrusel-portada .swiper-pagination { top: auto !important; bottom: 51px !important; left: calc(var(--eb-nav-x) + 56px) !important; right: auto !important; width: auto !important; transform: none !important; display: flex; gap: 8px; line-height: 0; } .carrusel-portada .swiper-pagination .swiper-pagination-bullet { margin: 0 !important; } /* -------------------------------------------------------------------------- 3. COMPONENTES · tarjetas, fichas con foto, sellos y franja de métricas Clases: .tarjeta .tarjeta--enlace .ficha-foto .cta-flecha .dueto-media .franja-metricas .tarjeta-sector .carrusel-sectores -------------------------------------------------------------------------- */ .tarjeta, .ficha-foto, .tarjeta-sector { transition: transform .35s var(--eb-ease), box-shadow .35s var(--eb-ease), background-color .3s, border-color .3s; } a.e-con.tarjeta, a.e-con.ficha-foto { color: inherit; text-decoration: none; } /* Texto «Conocer más →» con flecha que se desplaza */ .cta-flecha span { display: inline-flex; align-items: center; gap: .5rem; transition: gap .25s var(--eb-ease), border-color .25s; } .cta-flecha span::after { content: "→"; font-weight: 700; } .tarjeta--enlace:hover .cta-flecha span, .ficha-foto:hover .cta-flecha span { gap: .8rem; } .cta-flecha--subrayado span { padding-bottom: .25rem; border-bottom: 1.5px solid rgba(255,255,255,.45); } .ficha-foto:hover .cta-flecha--subrayado span { border-color: #fff; } /* La fotografía de las fichas se acerca un poco al pasar el puntero */ .ficha-foto { isolation: isolate; background-size: cover; transition: transform .4s var(--eb-ease), box-shadow .4s var(--eb-ease), background-size .8s var(--eb-ease); } /* Vídeo institucional: círculo blanco con el triángulo azul y velo sobre la portada (como en la maqueta) */ .video-institucional .elementor-custom-embed-image-overlay::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,26,64,.35), rgba(0,26,64,.08)); } .video-institucional .elementor-custom-embed-play { z-index: 2; width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px); display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 10px 40px rgba(0,26,64,.35); transition: transform .25s var(--eb-ease), background-color .25s var(--eb-ease); } .video-institucional .elementor-custom-embed-play i, .video-institucional .elementor-custom-embed-play svg { margin-left: .12em; opacity: 1; text-shadow: none; filter: none; } .video-institucional .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; } /* Los sellos («1977», «+50») se posicionan sobre la foto */ .dueto-media { position: relative; } /* Franja de métricas: el signo + va más pequeño y en naranja */ .franja-metricas .elementor-counter-number-prefix { color: var(--e-global-color-accent); font-size: .62em; align-self: center; margin-right: .04em; } .franja-metricas .elementor-counter-number-suffix { font-size: .5em; font-weight: 700; align-self: flex-start; margin-left: .08em; } /* Carrusel de sectores: aire para que no se recorte la sombra al pasar el puntero */ .carrusel-sectores .swiper { padding-top: 8px; } .carrusel-sectores .swiper-pagination-bullet-active { width: 24px; border-radius: 100px; background: var(--e-global-color-accent); } /* Flechas debajo de las tarjetas, a los lados de los puntos (como en la maqueta) */ .carrusel-sectores .elementor-swiper-button { top: auto !important; bottom: -12px; transform: none !important; } .carrusel-sectores .elementor-swiper-button-prev { left: calc(50% - 150px) !important; right: auto !important; } .carrusel-sectores .elementor-swiper-button-next { right: calc(50% - 150px) !important; left: auto !important; } .carrusel-sectores .e-n-carousel { margin-bottom: 0; } /* -------------------------------------------------------------------------- 4. COBERTURA · mapa de Centroamérica, lista de países y mapa de agencias Clases: .mapa-centroamerica .lista-paises .pais (atributo data-pais) .mapa-agencias (plantilla del mapa de LocateAndFilter) .agencia-item .agencia-tooltip -------------------------------------------------------------------------- */ .mapa-centroamerica { position: relative; } .mapa-centroamerica svg { display: block; width: 100%; height: auto; } .mapa-centroamerica .cv-neutral path { fill: rgba(255,255,255,.09); stroke: rgba(255,255,255,.17); stroke-width: 1.1; } .mapa-centroamerica .cv-active path { fill: var(--e-global-color-secondary); stroke: #fff; stroke-width: 1.4; transition: fill .3s var(--eb-ease); filter: drop-shadow(0 6px 18px rgba(5,170,216,.45)); } .mapa-centroamerica .cv-active path#cv-GTM { fill: #fff; filter: drop-shadow(0 8px 22px rgba(255,255,255,.3)); } .mapa-centroamerica .cv-active path.is-activo { fill: var(--e-global-color-accent); } .mapa-etiqueta { position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,43,99,.85); border: 1px solid rgba(255,255,255,.26); padding: .28rem .6rem; border-radius: 100px; } .mapa-etiqueta--gt { left: 19%; top: 29%; } .mapa-etiqueta--sv { left: 31%; top: 47%; } .mapa-etiqueta--hn { left: 47%; top: 32%; } .mapa-etiqueta--ni { left: 51%; top: 54%; } .mapa-etiqueta--pa { left: 72%; top: 88%; } @media (max-width: 900px) { .mapa-etiqueta { font-size: 11px; padding: .2rem .5rem; } } /* Móvil: las etiquetas se separan para que no se monten entre sí */ @media (max-width: 767px) { .mapa-etiqueta--gt { left: 17%; } .mapa-etiqueta--hn { left: 54%; } .mapa-etiqueta--sv { left: 24%; top: 50%; } .mapa-etiqueta--ni { left: 58%; top: 60%; } } .lista-paises .e-con.pais { transition: background-color .25s var(--eb-ease), transform .25s var(--eb-ease); cursor: default; } .lista-paises .e-con.pais:hover, .lista-paises .e-con.pais.is-activo { background-color: rgba(5,170,216,.18); transform: translateX(4px); } @media (max-width: 767px) { .lista-paises .e-con.pais:hover, .lista-paises .e-con.pais.is-activo { transform: none; } } /* Mapa de agencias · plugin LocateAndFilter (página Cobertura, sección «Nuestras agencias»). La plantilla del mapa (LocateAndFilter › «Agencias El Ébano») arma tres zonas: .mapa-agencias__filtros · .mapa-agencias__lista · .mapa-agencias__mapa */ .mapa-agencias .LA_filters { margin: 0 0 1.4rem; } .mapa-agencias .category-filters-container { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; margin: 0; padding: 0; list-style: none; } .mapa-agencias .category-filters-container > li { display: flex; flex-direction: column; gap: .45rem; flex: 1 1 15rem; max-width: 22rem; margin: 0; } .mapa-agencias .category-filters-container label { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--e-global-color-tinta60); } .mapa-agencias .category-filters-container select { width: 100%; height: auto; padding: .95rem 2.6rem .95rem 1.1rem; font: inherit; font-size: 14.4px; font-weight: 600; color: var(--e-global-color-azul900); background-color: #fff; cursor: pointer; border: 1.5px solid var(--e-global-color-primary); border-radius: 4px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23003F91' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; } .mapa-agencias .category-filters-container select:focus { outline: none; box-shadow: 0 0 0 3px rgba(5,170,216,.28); } .mapa-agencias__cuerpo { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); background: #fff; border-radius: var(--eb-esquina); overflow: hidden; box-shadow: 0 2px 8px rgba(11,27,51,.08); } /* Listado de agencias */ .mapa-agencias__lista { display: flex; flex-direction: column; min-height: 0; max-height: 560px; border-right: 1px solid var(--e-global-color-linea); } .mapa-agencias__lista .map-nav-wrapper { display: flex; flex-direction: column; min-height: 0; height: 100%; } .mapa-agencias__lista .map-nav-results-found { flex: none; padding: 1rem 1.2rem; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--e-global-color-secondary); border-bottom: 1px solid var(--e-global-color-linea); } .mapa-agencias__lista .map-nav-lists { flex: 1; min-height: 0; overflow-y: auto; } .mapa-agencias__lista .map-nav-item { float: none; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--e-global-color-linea); box-shadow: none; cursor: pointer; } .mapa-agencias__lista .map-nav-item-wrapper { padding: 0; } .agencia-item { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1.2rem; border-left: 3px solid transparent; transition: background-color .2s var(--eb-ease), border-color .2s var(--eb-ease); } .map-nav-item:hover .agencia-item, .map-nav-item.focus .agencia-item { background: var(--e-global-color-azul050); border-left-color: var(--e-global-color-accent); } .agencia-item__nombre { font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--e-global-color-azul900); } .agencia-item__lugar { font-size: 12.5px; line-height: 1.45; color: var(--e-global-color-tinta60); } /* Mapa y ventana de cada agencia */ .mapa-agencias__mapa { min-width: 0; } .mapa-agencias__mapa .leaflet-container { width: 100%; height: 560px !important; font-family: inherit; } /* Racimos de agencias cercanas con el azul de la marca */ .mapa-agencias .marker-cluster-small, .mapa-agencias .marker-cluster-medium, .mapa-agencias .marker-cluster-large { background-color: rgba(0,63,145,.22); } .mapa-agencias .marker-cluster-small div, .mapa-agencias .marker-cluster-medium div, .mapa-agencias .marker-cluster-large div { background-color: var(--e-global-color-primary); color: #fff; font-family: Montserrat, sans-serif; font-weight: 700; } .mapa-agencias .leaflet-popup-content-wrapper { border-radius: var(--eb-esquina); box-shadow: 0 12px 30px rgba(0,43,99,.18); } .mapa-agencias .leaflet-popup-content { margin: 1rem 1.15rem; min-width: 210px; } /* Leaflet (margen de 1.3em) y el plugin (relleno de 17 px) espacian los párrafos de la ventana; su CSS carga después del tema */ .mapa-agencias .leaflet-container .leaflet-popup-content .agencia-tooltip p { margin: 0; padding: 0; } .agencia-tooltip__region { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--e-global-color-secondary); } .mapa-agencias .leaflet-container .leaflet-popup-content p.agencia-tooltip__nombre { margin-top: .3rem; font-family: Montserrat, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--e-global-color-azul900); } .mapa-agencias .leaflet-container .leaflet-popup-content p.agencia-tooltip__dir { margin-top: .5rem; font-size: 13px; line-height: 1.45; color: var(--e-global-color-tinta60); } .agencia-tooltip__lugar { font-size: 13px; line-height: 1.45; color: var(--e-global-color-tinta60); } .mapa-agencias a.agencia-tooltip__enlace { display: inline-flex; margin-top: .85rem; padding: .5rem 1rem; border-radius: 4px; text-decoration: none; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--e-global-color-primary); transition: background-color .25s; } .mapa-agencias a.agencia-tooltip__enlace:hover { background: var(--e-global-color-azul900); color: #fff; } @media (max-width: 1024px) { .mapa-agencias__cuerpo { grid-template-columns: 1fr; } .mapa-agencias__lista { order: 2; max-height: 300px; border-right: 0; border-top: 1px solid var(--e-global-color-linea); } .mapa-agencias__mapa .leaflet-container { height: 420px !important; } .mapa-agencias .category-filters-container select { font-size: 16px; } } @media (max-width: 767px) { .mapa-agencias .category-filters-container > li { max-width: none; } .mapa-agencias__mapa .leaflet-container { height: 360px !important; } } /* -------------------------------------------------------------------------- 5. FORMULARIOS · widget Form de Elementor + clase .formsw del tema Clases: .formulario-ebano .formulario-ebano--oscuro .panel-form .formsw -------------------------------------------------------------------------- */ /* Etiqueta flotante (la crea el tema desde el placeholder) con los colores de marca */ .formulario-ebano .sw-floating-label { color: var(--e-global-color-tinta40); opacity: 1; font-size: 14.4px; } .formulario-ebano .sw-floating-field.is-focused .sw-floating-label, .formulario-ebano .sw-floating-field.has-value .sw-floating-label { color: var(--e-global-color-primary); opacity: 1; } .elementor-widget.formulario-ebano--oscuro .sw-floating-field .sw-floating-label { color: rgba(255,255,255,.45); } .elementor-widget.formulario-ebano--oscuro .sw-floating-field.is-focused .sw-floating-label, .elementor-widget.formulario-ebano--oscuro .sw-floating-field.has-value .sw-floating-label { color: var(--e-global-color-secondary); } .formulario-ebano .elementor-field-textual { min-height: 50px; } .formulario-ebano textarea.elementor-field-textual { min-height: 128px; } .formulario-ebano--oscuro .elementor-field:focus { border-color: var(--e-global-color-secondary) !important; background-color: rgba(255,255,255,.13) !important; box-shadow: 0 0 0 3px rgba(5,170,216,.25); } /* Lista desplegable: la primera opción hace de etiqueta y va en gris */ .formulario-ebano select.elementor-field-textual:has(option[value=""]:checked) { color: var(--e-global-color-tinta40); } .formulario-ebano--oscuro select.elementor-field-textual { color-scheme: dark; } /* Casilla de aceptación y textos guía */ .formulario-ebano .elementor-field-type-acceptance label { font-size: 12.5px; line-height: 1.5; } .formulario-ebano .elementor-field-type-acceptance a { text-decoration: underline; text-underline-offset: 2px; } .formulario-ebano .elementor-field-option input[type="checkbox"], .formulario-ebano .elementor-field-option input[type="radio"] { accent-color: var(--e-global-color-accent); width: 16px; height: 16px; } .formulario-ebano .elementor-field-type-html { font-size: 12.5px; } .formulario-ebano .eb-guia { margin: 0; font-weight: 600; color: var(--e-global-color-azul900); font-size: 13.6px; } .formulario-ebano--oscuro .eb-guia { color: #fff; } .formulario-ebano .elementor-field-type-acceptance a, .formulario-ebano .eb-guia a { color: inherit; } /* Franja horaria (radio) como pastillas */ .formulario-ebano .elementor-field-type-radio .elementor-field-subgroup { gap: .6rem; } .formulario-ebano .elementor-field-type-radio .elementor-field-option { margin: 0 !important; } .formulario-ebano .elementor-field-type-radio .elementor-field-option label { display: inline-flex; padding: .55rem 1.1rem; font-size: 14.4px; cursor: pointer; background: #fff; border: 1px solid var(--e-global-color-linea); border-radius: 100px; transition: all .2s var(--eb-ease); } .formulario-ebano .elementor-field-type-radio input { position: absolute; opacity: 0; } .formulario-ebano .elementor-field-type-radio input:checked + label { background: var(--e-global-color-primary); color: #fff; border-color: var(--e-global-color-primary); } .formulario-ebano .elementor-field-type-radio input:focus-visible + label { outline: 3px solid var(--e-global-color-secondary); outline-offset: 2px; } /* Subida del CV */ .formulario-ebano .elementor-field-type-upload input[type="file"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 1.1rem 1.2rem; background: var(--e-global-color-azul050); cursor: pointer; border: 1.5px dashed var(--e-global-color-primary) !important; border-radius: var(--eb-esquina) !important; } .formulario-ebano .elementor-field-type-upload input[type="file"] { font-size: 13.6px; color: var(--e-global-color-tinta60); } .formulario-ebano .elementor-field-type-upload input[type="file"]::file-selector-button { margin-right: 12px; padding: 10px 16px; border: 0; border-radius: 4px; cursor: pointer; background: var(--e-global-color-primary); color: #fff; font: 600 13.6px/1.2 Inter, sans-serif; transition: background-color .2s; } .formulario-ebano .elementor-field-type-upload input[type="file"]:hover::file-selector-button { background: var(--e-global-color-azul900); } /* Área de texto: la etiqueta larga salta de renglón mientras no flota, en lugar de cortarse con «…» */ .formulario-ebano .sw-floating-field:has(textarea):not(.is-focused):not(.has-value) .sw-floating-label { white-space: normal; line-height: 1.4; } /* ESTADOS DE ERROR: borde y halo rojo en el campo, mensaje bajo el campo */ .formulario-ebano .elementor-field-textual:user-invalid, .formulario-ebano .elementor-error .elementor-field-textual, .formulario-ebano .elementor-field-textual[aria-invalid="true"] { border-color: #B3261E !important; box-shadow: 0 0 0 3px rgba(179,38,30,.12) !important; } .formulario-ebano .elementor-error .elementor-field-option label { color: #B3261E; } .formulario-ebano .elementor-message { margin-top: 14px; padding: 12px 14px; border-radius: 4px; font-weight: 600; line-height: 1.45; } .formulario-ebano .elementor-message::before { margin-right: 6px; } .formulario-ebano .elementor-message-success { background: rgba(0,63,145,.08); } .formulario-ebano .elementor-message-danger { background: rgba(179,38,30,.08); } .formulario-ebano .elementor-help-inline { display: block; margin-top: 6px; padding: 0; background: none; font-size: 12.5px; font-weight: 600; } .formulario-ebano--oscuro .elementor-message-success { background: rgba(255,255,255,.1); } .formulario-ebano--oscuro .elementor-message-danger { background: rgba(255,180,169,.12); } .formulario-ebano .elementor-button[disabled] { opacity: .7; cursor: progress; } /* Calendario de las fechas (flatpickr) con la paleta */ .flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--e-global-color-primary); border-color: var(--e-global-color-primary); } .flatpickr-day.today { border-color: var(--e-global-color-accent); } /* -------------------------------------------------------------------------- 6. PIE DE PÁGINA · plantilla «Pie de página del sitio» Clases: .pie-pagina .pie-grupo .pie-powerby .menu-pie .redes-barra-lateral -------------------------------------------------------------------------- */ .pie-pagina .grupo-sti { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; } .pie-pagina .grupo-sti:hover { color: var(--e-global-color-accent); text-decoration-color: var(--e-global-color-accent); } .pie-powerby .sw-powered-by { font-size: inherit; color: inherit; } .pie-powerby .sw-powered-by__link { color: rgba(255,255,255,.8); } .pie-powerby .sw-powered-by__link:hover { color: var(--e-global-color-secondary); } /* El menú del pie nunca se compacta: se mantiene en línea y salta de renglón si no cabe */ .menu-pie .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: wrap; row-gap: 6px; } .menu-pie .elementor-menu-toggle, .menu-pie .elementor-nav-menu--dropdown { display: none !important; } .menu-pie .elementor-nav-menu--main { display: block !important; } /* Móvil: el menú legal se alinea a la izquierda, como el resto del pie */ @media (max-width: 767px) { .menu-pie .elementor-nav-menu--main .elementor-nav-menu { justify-content: flex-start; column-gap: 22px; } .menu-pie .elementor-nav-menu--main .elementor-nav-menu > li, .menu-pie .elementor-nav-menu--main .elementor-nav-menu > li > a { margin-inline: 0 !important; } } /* Barra lateral de redes, centrada en la altura de la pantalla (como en la maqueta): cuadros blancos de 44 px con sombra y 1 px entre ellos; al pasar el puntero se pintan de azul (colores en el widget) y crecen hacia la izquierda */ .redes-barra-lateral { transform: translateY(-50%); } .redes-barra-lateral .elementor-grid { justify-items: end; } .redes-barra-lateral .elementor-grid-item { display: flex; justify-content: flex-end; } .redes-barra-lateral .elementor-social-icon { border-radius: 0 !important; box-shadow: -2px 0 12px rgba(11,27,51,.12); transition: background-color .25s var(--eb-ease), color .25s var(--eb-ease), width .25s var(--eb-ease); } .redes-barra-lateral .elementor-grid-item:first-child .elementor-social-icon { border-radius: 4px 0 0 0 !important; } .redes-barra-lateral .elementor-grid-item:last-child .elementor-social-icon { border-radius: 0 0 0 4px !important; } .redes-barra-lateral .elementor-social-icon:hover { width: 52px !important; } /* Botones flotantes del tema (WhatsApp y volver arriba) con la paleta. El kit de Elementor da estilo a todo