/*
Theme Name: Hello Elementor Child
Author: Agencia OH WOW!
Author URI: https://agencia.ohwow.es/
Template: hello-elementor
Version: 1.1.14
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.htmlmaterial-relacionado__grid
Text Domain: hello-elementor-child
*/
/*=================================================================
GUÍA DE ESTILOS Y ARQUITECTURA CSS
=================================================================*/
/*
1. ARQUITECTURA DE ARCHIVOS
=================================================================
El sistema de estilos se carga en el siguiente orden a través de `functions.php`:
- `fonts.css`: Contiene únicamente las declaraciones @font-face para las tipografías del proyecto.
- `root.css`: Define todas las variables CSS globales (Custom Properties) para colores, tipografías, espaciados, etc.
- `style.css`: (Este archivo) Contiene todos los estilos de componentes, layout y utilidades que consumen las variables de `root.css`.
2. FILOSOFÍA DE TRABAJO (CSS + ELEMENTOR)
=================================================================
Este proyecto utiliza un enfoque híbrido para combinar la potencia de un sistema de diseño en CSS con la flexibilidad de Elementor.
- El CSS (este archivo y `root.css`) actúa como el "Sistema de Diseño". Su objetivo es garantizar la CONSISTENCIA VISUAL. Se debe usar para:
- Definir colores, tipografías y espaciados globales (variables).
- Estilizar componentes reutilizables (`.btn`, `.card`, etc.).
- Aplicar temas visuales a secciones (`.section--light`, `.section--dark`).
- ELEMENTOR se utiliza para:
- Construir la estructura y el layout principal de las páginas (crear secciones, contenedores y columnas).
- Realizar ajustes de layout específicos (alineación, orden) que no necesitan ser reutilizables.
- Aplicar estilos puntuales o únicos a un elemento que no forma parte del sistema de diseño global.
En resumen: Usa las CLASES de este CSS para mantener la consistencia. Usa los CONTROLES de Elementor para la estructura y los ajustes específicos.
3. METODOLOGÍA Y PRINCIPIOS
=================================================================
Este proyecto combina varias metodologías para crear un sistema robusto y escalable:
- SMACSS (Arquitectura): Se utiliza para la organización general del CSS.
Ejemplo: La clase `.section--light` actúa como un "Tema".
Documentación: http://smacss.com/
- BEM (Nomenclatura): Se aplica para nombrar los componentes y sus partes.
Ejemplo: `.card` (Bloque), `.card__title` (Elemento) y `.btn--xl` (Modificador).
Documentación: https://getbem.com/
- OOCSS (Filosofía): Principio de separar la estructura de la apariencia ("skin").
Ejemplo: La clase base `.btn` define la estructura, mientras que
`.btn__solid--primary` define el "skin" (colores, fondo).
Documentación: https://github.com/stubbornella/oocss/wiki
- FLUID DESIGN (con clamp()): Se utiliza `clamp()` para la tipografía y los
espaciados, permitiendo que los elementos se adapten fluidamente al
tamaño de la pantalla y reduciendo la necesidad de múltiples media queries.
Documentación: https://developer.mozilla.org/es/docs/Web/CSS/clamp
4. USO DE COLORES Y OPACIDAD
=================================================================
Los colores se definen en `root.css` en dos formatos para mayor flexibilidad:
- Formato descriptivo: Para uso directo y con sus tonalidades (opacidades) correspondientes.
Ejemplo: `var(--color-primary-1000)`
- Formato semático: Para uso según el tipo de elemento y función.
Ejemplo: `var(--color-text-on-dark)`, `var(--color-bg-dark)`
*/
/*=================================================================
BLOQUE: ESTILOS DE WORDPRESS
=================================================================*/
#wpadminbar * {
font-size: 13px !important;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 2.46153846;
color: white !important;
}
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item {
color: black !important;
}
#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon:before {
content: "\f120";
top: 2px;
font-size: 20px;
}
#wpadminbar .ab-icon::before {
font-size: 20px;
}
/*=================================================================
BLOQUE: ESTILOS GENÉRICOS
=================================================================*/
html {
scroll-padding-top: 75px !important;
}
/** Cuerpo **/
body {
margin: var(--margin-none);
font-family: var(--font-primary);
}
p, li, ul, ol {
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
}
p {
margin-top: var(--margin-none);
margin-bottom: var(--margin-l);
line-height: var(--lh-text-l) !important;
}
li, ul, ol {
margin-bottom: var(--margin-xs);
margin-top: var(--margin-l);
line-height: var(--lh-text-m) !important;
}
p.elementor-heading-title {
line-height: var(--lh-text-l) !important;
}
/* Texto de párrafo para Custom fields */
.text--custom-field .elementor-widget-container, .text--custom-field p.elementor-heading-title {
font-size: var(--text-l);
line-height: var(--lh-text-l);
}
/** Enlaces **/
a > strong {
font-weight: var(--font-weight-semi-bold);
}
a {
font-weight: var(--font-weight-semi-bold);
/* Animación */
display: inline-block;
will-change: transform, color;
transition: transform 0.2s linear, color 0.2s linear;
/* Transición suave para movimiento y color */
}
a:hover {
/* Animación */
transform: translateY(-2px);
/*Mueve el enlace hacia arriba */
}
.link--no-animation a:hover, #link--no-animation a:hover {
/* Usar para desactivar animaciones en enlaces */
transform: none;
}
/** Títulos **/
h1 {
font-family: var(--font-primary) !important;
font-size: var(--h1-parent) !important;
font-weight: var(--font-weight-medium) !important;
line-height: var(--lh-text-h1-parent) !important;
}
h2 {
font-family: var(--font-primary) !important;
font-size: var(--h2) !important;
font-weight: var(--font-weight-medium) !important;
line-height: var(--lh-text-h2) !important;
margin-bottom: var(--margin-l) !important;
}
h3 {
font-family: var(--font-primary) !important;
font-size: var(--h3) !important;
font-weight: var(--font-weight-medium) !important;
line-height: var(--lh-text-h3) !important;
}
h4 {
font-family: var(--font-primary) !important;
font-size: var(--h4) !important;
font-weight: var(--font-weight-semi-bold) !important;
line-height: var(--lh-text-h4) !important;
}
h5 {
font-family: var(--font-primary) !important;
font-size: var(--h5) !important;
font-weight: var(--font-weight-semi-bold) !important;
line-height: var(--lh-text-h5) !important;
}
h6 {
font-family: var(--font-primary) !important;
font-size: var(--h6) !important;
font-weight: var(--font-weight-semi-bold) !important;
line-height: var(--lh-text-h6) !important;
}
/** Imágenes **/
.elementor-element img, img {
border-radius: var(--radius-m) !important;
width: var(--percent-100);
max-width: var(--percent-100) !important;
}
/** Mapas **/
.elementor-widget-google_maps iframe {
border-radius: var(--radius-m) !important;
width: var(--percent-100);
max-width: var(--percent-100) !important;
}
/*=================================================================
BLOQUE: CONTENEDORES DE TEMPLATES (.template)
=================================================================*/
div.template, .template {
/*Aplicar en todas las secciones principales que se quieran construir manualmente, a excepción de los widgets de template, ya que tendrá esta clase añadida*/
padding: var(--padding-none);
margin: var(--margin-none);
gap: var(--gap-none);
}
/*=================================================================
BLOQUE: SECCIONES (.section)
=================================================================*/
.section {
/*Aplicar en todas las secciones principales que se quieran construir manualmente, a excepción de los widgets de template, ya que tendrá esta clase añadida*/
padding: var(--section-padding-y) var(--section-padding-x);
margin-bottom: var(--margin-none);
gap: var(--gap-xl);
}
.section-lp {
/*Aplicar en todas las secciones principales que se quieran construir manualmente, a excepción de los widgets de template, ya que tendrá esta clase añadida*/
padding: var(--section-padding-lp-y) var(--section-padding-lp-x);
}
.section > div {
gap: var(--gap-xl);
}
/*** ELEMENTO: Container ***/
.section__container {
padding: var(--padding-none);
gap: var(--gap-l);
}
/** MODIFICADOR: Sección sin header **/
.section__no-header {
padding: var(--space-7xl) var(--section-padding-x);
margin-bottom: var(--margin-none);
gap: var(--gap-xl);
}
/** MODIFICADOR: Container interno **/
.section__container--inner, .section__container--inner .e-con-inner, .section__container--inner .elementor-widget-loop-grid .elementor-grid {
padding: var(--padding-none) !important;
gap: var(--gap-l) !important;
grid-column-gap: var(--gap-l) !important;
grid-row-gap: var(--gap-l) !important;
}
/** MODIFICADOR: Widths **/
.section__container--70 {
width: var(--width-70) !important;
}
.section__container--60 {
width: var(--width-60) !important;
}
.section__container--50 {
width: var(--width-50) !important;
}
.section__container--40 {
width: var(--width-40) !important;
}
.section__container--30 {
width: var(--width-30) !important;
}
/** MODIFICADOR: Widths **/
.section__container--padding-none {
padding: var(--padding-none) !important;
}
/** MODIFICADOR: Tamaño de Iconos **/
.section__container--icon .elementor-icon-list-icon svg, .section__container--icon .elementor-icon-list-icon svg {
width: var(--icon-m) !important;
height: var(--icon-m) !important;
}
/** MODIFICADOR: Sección con Media (img, mapa y video) **/
.section__container--img .elementor-widget-image,
.section__container--map .elementor-widget-google_maps {
width: var(--percent-100);
position: relative;
overflow: hidden;
}
.section__container--img {
position: relative;
flex-shrink: 0;
align-self: flex-start;
}
.section__container--img img,
.section__container--map iframe {
width: var(--percent-100);
height: var(--percent-100);
display: block;
object-fit: cover;
}
/* Aplicar alturas al widget de imagen y mapas - FORZAR CON !IMPORTANT */
/* XXS */
.section__container--img.xxs .elementor-widget-image,
.section__container--map.xxs .elementor-widget-google_maps,
.section__container--img.xxs img,
.section__container--map.xxs iframe {
height: var(--media-height-xxs) !important;
min-height: var(--media-height-xxs) !important;
}
/* XS */
.section__container--img.xs .elementor-widget-image,
.section__container--map.xs .elementor-widget-google_maps,
.section__container--img.xs img,
.section__container--map.xs iframe {
height: var(--media-height-xs) !important;
min-height: var(--media-height-xs) !important;
}
/* SM */
.section__container--img.sm .elementor-widget-image,
.section__container--map.sm .elementor-widget-google_maps,
.section__container--img.sm img,
.section__container--map.sm iframe {
height: var(--media-height-s) !important;
min-height: var(--media-height-s) !important;
}
/* MD */
.section__container--img.md .elementor-widget-image,
.section__container--map.md .elementor-widget-google_maps,
.section__container--img.md img,
.section__container--map.md iframe {
height: var(--media-height-m) !important;
min-height: var(--media-height-m) !important;
}
/* LG */
.section__container--img.lg .elementor-widget-image,
.section__container--map.lg .elementor-widget-google_maps,
.section__container--img.lg img,
.section__container--map.lg iframe {
height: var(--media-height-l) !important;
min-height: var(--media-height-l) !important;
}
/* XL */
.section__container--img.xl .elementor-widget-image,
.section__container--map.xl .elementor-widget-google_maps,
.section__container--img.xl img,
.section__container--map.xl iframe {
height: var(--media-height-xl) !important;
min-height: var(--media-height-xl) !important;
}
/* MODIFICADOR: OVERLAY CON GRADIENTE SOBRE IMAGEN */
.section__container--img.gradient {
position: relative;
display: inline-block;
border-radius: var(--radius-m);
}
/* Alturas del contenedor cuando tiene gradient */
.section__container--img.gradient.xxs { height: var(--media-height-xxs); }
.section__container--img.gradient.xs { height: var(--media-height-xs); }
.section__container--img.gradient.sm { height: var(--media-height-s); }
.section__container--img.gradient.md { height: var(--media-height-m); }
.section__container--img.gradient.lg { height: var(--media-height-l); }
.section__container--img.gradient.xl { height: var(--media-height-xl); }
.section__container--img.gradient .elementor-widget-image {
height: 100%;
border-radius: var(--radius-m);
overflow: hidden;
}
.section__container--img.gradient::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-black-bottom-hard);
pointer-events: none;
z-index: 1;
border-radius: var(--radius-m);
}
.section__container--img.gradient img {
display: block;
width: var(--percent-100);
height: 100%;
object-fit: cover;
}
/* MODIFICADOR: Fit, Cover, Contain */
.section__container--img.is-fill .elementor-widget-image,
.section__container--img.is-cover .elementor-widget-image,
.section__container--img.is-contain .elementor-widget-image {
width: 100%;
height: 100%;
position: relative;
}
.section__container--img.is-fill img {
width: 100%;
height: 100%;
display: block;
object-fit: fill !important;
object-position: center;
}
.section__container--img.is-cover img {
width: 100%;
height: 100%;
display: block;
object-fit: cover !important;
object-position: center;
}
.section__container--img.is-contain img {
width: 100%;
height: 100%;
display: block;
object-fit: contain !important;
object-position: center;
}
/*=================================================================
TEXTO FLOTANTE SOBRE GRADIENTE
=================================================================*/
/* Clases de ayuda para posicionar texto sobre el gradiente */
.section__container--img.gradient .gradient--text {
position: absolute !important;
z-index: 3 !important;
color: var(--color-text-on-dark) !important;
}
/* Posiciones predefinidas */
.section__container--img.gradient .gradient--text.bottom-left {
bottom: var(--padding-xl);
left: var(--padding-xl);
}
.section__container--img.gradient .gradient--text.bottom-center {
bottom: var(--padding-xl);
left: 50%;
transform: translateX(-50%);
}
.section__container--img.gradient .gradient--text.bottom-right {
bottom: var(--padding-xl);
right: var(--padding-xl);
}
.section__container--img.gradient .gradient--text.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.section__container--img.gradient .gradient--text.top-left {
top: var(--padding-xl);
left: var(--padding-xl);
}
.section__container--img.gradient .gradient--text.top-right {
top: var(--padding-xl);
right: var(--padding-xl);
}
/* Asegurar que los títulos dentro tengan el color correcto */
.section__container--img.gradient .gradient--text h1,
.section__container--img.gradient .gradient--text h2,
.section__container--img.gradient .gradient--text h3,
.section__container--img.gradient .gradient--text h4,
.section__container--img.gradient .gradient--text h5,
.section__container--img.gradient .gradient--text h6,
.section__container--img.gradient .gradient--text p {
color: var(--color-text-on-dark) !important;
margin: var(--margin-none) !important;
padding: var(--padding-none) !important;
}
/** Vídeos **/
.section__container--video .elementor-widget-video {
width: var(--percent-100);
}
.section__container--video .elementor-widget-video {
border-radius: var(--radius-m);
width: var(--percent-100);
max-width: var(--percent-100) !important;
overflow: hidden;
}
.section__container--video iframe {
border-radius: var(--radius-m);
}
.section__container--video .elementor-widget-video {
object-fit: cover;
}
.section__container--video.xs .elementor-widget-video {
height: var(--media-height-xxs);
}
.section__container--video.xs .elementor-widget-video {
height: var(--media-height-xs);
}
.section__container--video.sm .elementor-widget-video {
height: var(--media-height-s);
}
.section__container--video.md .elementor-widget-video {
height: var(--media-height-m);
}
.section__container--video.lg .elementor-widget-video {
height: var(--media-height-l);
}
.section__container--video.xl .elementor-widget-video {
height: var(--media-height-xl);
}
/** ICONO DE PLAY **/
/* Tamaño */
.section__container--video .elementor-custom-embed-play,
.section__container--video .elementor-custom-embed-play svg {
width: var(--icon-4xl);
height: var(--icon-4xl);
}
.section__container--video .elementor-custom-embed-play i {
font-size: var(--icon-4xl);
}
/* Efectos */
.section__container--video .elementor-custom-embed-play i,
.section__container--video .elementor-custom-embed-play svg {
opacity: var(--opacity-100) !important;
filter: none !important;
text-shadow: none !important;
}
/* Color */
.section__container--video.color--primary .elementor-custom-embed-play i,
.section__container--video.color--primary .elementor-custom-embed-play svg{
color: var(--color-icon-on-primary);
fill: var(--color-icon-on-primary);
}
.section__container--video.color--secondary i,
.section__container--video.color--tertiary i,
.section__container--video.color--secondary svg,
.section__container--video.color--tertiary svg {
color: var(--color-icon-on-dark);
fill: var(--color-icon-on-dark);
}
/*** VARIANTE: Sección con Textos destacados ***/
/** MODIFICADOR: General y Barra de datos de cursos **/
.section__container--highlight {
border-radius: var(--radius-m);
padding: var(--padding-xl);
gap: var(--gap-s);
height: var(--highlight-height);
flex-direction: column !important;
flex-wrap: nowrap;
}
.section-lp .section__container--highlight {
height: none;
}
.section__container--highlight.box-margin-top {
margin-top: var(--box-margin);
}
.section__container--highlight.box-margin-bottom {
margin-bottom: var(--box-margin);
}
.section__container--highlight p, .section__container--highlight span.elementor-heading-title {
margin: var(--margin-none) !important;
margin-bottom: var(--margin-none) !important;
padding: var(--padding-none) !important;
line-height: var(--lh-text-m) !important;
}
.section__container--highlight-data span, .section__container--highlight span.elementor-heading-title {
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
}
.section__container--highlight-data-long p, .section__container--highlight-data-long p.elementor-heading-title,
.section__container--highlight-data-long span, .section__container--highlight-data-long span.elementor-heading-title {
font-size: var(--text-l);
font-weight: var(--font-weight-medium) !important;
}
.section__container--highlight-data-long,
.section__container--highlight-data-long.e-con.e-flex {
flex-direction: column !important;
flex-wrap: nowrap !important;
}
.section__container--highlight-data p, .section__container--highlight-data span.elementor-heading-title {
font-size: var(--text-data);
margin: var(--margin-none) !important;
margin-bottom: calc(var(--gap-s) * -1) !important;
font-weight: var(--font-weight-semi-bold);
line-height: var(--lh-text-m) !important;
}
/** MODIFICADOR: Sección con datos destacados **/
.section__container--highlight.highlight-section .elementor-widget-container,
.section__container--highlight.highlight-section p,
.section__container--highlight.highlight-section span.elementor-heading-title {
text-align: center !important;
}
.section__container--highlight-data.highlight-section p, .section__container--highlight-data.highlight-section span.elementor-heading-title {
font-size: var(--text-data) !important;
}
/*** VARIANTE: Sección con Logos ***/
.section__container--logo--xxs img {
width: auto;
border-radius: var(--radius-none) !important;
height: var(--media-height-xxs);
}
.section__container--logo--xs img {
width: auto;
border-radius: var(--radius-none) !important;
height: var(--media-height-xs);
}
.section__container--logo--sm img {
width: auto;
border-radius: var(--radius-none) !important;
height: var(--media-height-s);
}
.section__container--logo--md img {
width: auto;
border-radius: var(--radius-none) !important;
height: var(--media-height-m);
}
.section__container--logo--lg img {
width: auto;
border-radius: var(--radius-none) !important;
height: var(--media-height-l);
}
/** VARIANTE: Sección de CTA **/
.section__container--cta {
padding: var(--padding-6xl);
border: var(--border-none);
border-radius: var(--radius-m);
}
/* Todos los títulos dentro del CTA deben ser semibold */
.section__container--cta h1,
.section__container--cta h2,
.section__container--cta h3,
.section__container--cta h4,
.section__container--cta h5,
.section__container--cta h6 {
font-weight: var(--font-weight-medium) !important;
}
/* Forzar que todos los contenedores hijos de section__container--cta tengan padding none y gap l */
.section__container--cta .e-con,
.section__container--cta .e-con-inner,
.section__container--cta .elementor-container,
.section__container--cta .elementor-column,
.section__container--cta .elementor-widget-wrap {
padding: var(--padding-none) !important;
gap: var(--gap-l) !important;
}
/** VARIANTE: Sección destacada de Cursos **/
.section__container--featured {
padding: var(--padding-xl);
border: var(--border-none);
border-radius: var(--radius-m);
}
/** VARIANTE: Sección de bucle **/
.section__container--loop .elementor-loop-container.elementor-grid {
grid-gap: var(--gap-l) !important;
gap: var(--gap-l) !important;
}
.section__container--loop .e-loop__load-more.elementor-button-wrapper {
margin-top: var(--margin-l) !important;
}
/** VARIANTE: Sección de Claim - Main Container **/
.section__container--claim {
padding: var(--padding-6xl);
border: var(--border-none);
border-radius: var(--radius-m);
}
/* Texto del claim */
.section__container--claim--text p {
font-family: var(--font-primary);
font-size: var(--text-claim);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-l);
margin: var(--margin-none);
}
.section__container--claim--sub-text p {
font-family: var(--font-primary);
font-size: var(--sub-text-claim);
font-weight: var(--font-weight-semi-bold);
line-height: var(--lh-text-m);
margin: var(--margin-none);
}
/** VARIANTE: Sección de tabla **/
.section__container--table table th {
font-size: var(--text-l) !important;
font-weight: var(--font-weight-semi-bold) !important;
padding: var(--padding-l) !important;
}
.section__container--table table td {
font-size: var(--text-m) !important;
color: var(--text-color-on-light) !important;
padding: var(--padding-l) !important;
border: var(--color-border-lighter-gray) solid var(--border-m) !important;
}
/* Forzar que todos los contenedores hijos de section__container--claim tengan padding none y gap l */
.section__container--claim .e-con,
.section__container--claim .e-con-inner,
.section__container--claim .elementor-container,
.section__container--claim .elementor-column,
.section__container--claim .elementor-widget-wrap {
padding: var(--padding-none) !important;
gap: var(--gap-l) !important;
}
/** VARIANTE: Sección de bucle **/
.section__container--loop .elementor-loop-container.elementor-grid {
grid-gap: var(--gap-l) !important;
gap: var(--gap-l) !important;
}
.section__container--loop .e-loop__load-more.elementor-button-wrapper {
margin-top: var(--margin-l) !important;
}
/*=================================================================
BLOQUE: FONDOS (.bg)
=================================================================*/
/* Además del fondo, modifica automáticamente el colores de los títulos, textos y enlaces (con su interacción) */
/*** MODIFICADOR: LIGHT ***/
/** Fondo blanco (Principal e interno) **/
.bg--light, div.bg--light.elementor-element, .bg--inner--light, div.bg--inner--light.elementor-element {
background-color: var(--color-bg-light);
color: var(--color-text-on-light);
}
.bg--light.forced, div.bg--light.elementor-element.forced, .bg--inner--light.forced, div.bg--inner--light.elementor-element.forced {
background-color: var(--color-bg-light) !important;
color: var(--color-text-on-light) !important;
}
/** Fondo blanco alternativo (Principal e interno) **/
.bg--light-alt, div.bg--light-alt.elementor-element, .bg--inner--light-alt, div.bg--inner--light-alt.elementor-element {
background-color: var(--color-bg-light-alt);
color: var(--color-text-on-light);
}
/** Fondo gris claro **/
.bg--light-gray, div.bg--light-gray.elementor-element, .bg--inner--light-gray, div.bg--inner--light-gray.elementor-element {
background-color: var(--color-bg-light-gray);
color: var(--color-text-on-light);
}
/** Fondo gris más claro **/
.bg--lighter-gray, div.bg--lighter-gray.elementor-element, .bg--inner--lighter-gray, div.bg--inner--lighter-gray.elementor-element {
background-color: var(--color-bg-lighter-gray);
color: var(--color-text-on-light);
}
/** Fondo azul claro **/
.bg--light-blue, div.bg--light-blue.elementor-element, .bg--inner--light-blue, div.bg--inner--light-blue.elementor-element {
background-color: var(--color-bg-light-blue);
color: var(--color-text-on-light);
}
/** Enlaces en fondos claros **/
.bg--light a, .bg--light-alt a, .bg--light-gray a, .bg--lighter-gray a, .bg--light-blue a {
color: var(--color-accent-on-light);
text-decoration: underline;
}
.bg--light a:hover, .bg--light-alt a:hover, .bg--light-gray a:hover, .bg--lighter-gray a:hover, .bg--light-blue a:hover {
color: var(--color-accent-on-light-hover);
}
.bg--inner--light a, .bg--inner--light-alt a, .bg--inner--light-gray a, .bg--inner--lighter-gray a, .bg--inner--light-blue a {
color: var(--color-accent-on-light) !important;
text-decoration: underline;
}
.bg--inner--light a:hover, .bg--inner--light-alt a:hover, .bg--inner--light-gray a:hover, .bg--inner--lighter-gray a:hover, .bg--inner--light-blue a:hover {
color: var(--color-accent-on-light-hover) !important;
}
/*** MODIFICADOR: DARK ***/
/** Fondo negro puro (Principal e interno) **/
.bg--dark, div.bg--dark.elementor-element, .bg--inner--dark, div.bg--inner--dark.elementor-element {
background-color: var(--color-bg-dark);
color: var(--color-text-on-dark);
}
.bg--dark h1, div.bg--dark.elementor-element h1, .bg--inner--dark h1, div.bg--inner--dark.elementor-element h1,
.bg--dark h2, div.bg--dark.elementor-element h2, .bg--inner--dark h2, div.bg--inner--dark.elementor-element h2 {
color: var(--color-text-on-dark);
}
/** Fondo negro lavado (Principal e interno) **/
.bg--dark-alt, div.bg--dark-alt.elementor-element, .bg--inner--dark-alt, div.bg--inner--dark-alt.elementor-element {
background-color: var(--color-bg-dark-alt);
color: var(--color-text-on-dark);
}
.bg--dark-alt h1, div.bg--dark-alt.elementor-element h1, .bg--inner--dark-alt h1, div.bg--inner--dark-alt.elementor-element h1,
.bg--dark-alt h2, div.bg--dark-alt.elementor-element h2, .bg--inner--dark-alt h2, div.bg--inner--dark-alt.elementor-element h2 {
color: var(--color-text-on-dark);
}
/** Fondo gris (Principal e interno) **/
.bg--gray, div.bg--gray.elementor-element, .bg--inner--gray, div.bg--inner--gray.elementor-element {
background-color: var(--color-bg-gray);
color: var(--color-text-on-dark);
}
/** Enlaces en fondos oscuros **/
.bg--dark a, .bg--dark-alt a, .bg--gray a {
color: var(--color-accent-on-dark);
text-decoration: underline;
}
.bg--dark a:hover, .bg--dark-alt a:hover, .bg--gray a:hover {
color: var(--color-accent-on-dark-hover);
}
.bg--inner--dark a, .bg--inner--dark-alt a, .bg--inner--gray a {
color: var(--color-accent-on-dark) !important;
text-decoration: underline;
}
.bg--inner--dark a:hover, .bg--inner--dark-alt a:hover, .bg--inner--gray a:hover {
color: var(--color-accent-on-dark-hover) !important;
}
/*** MODIFICADOR: COLORS ***/
/** Fondo primario (Principal e interno) **/
.bg--primary, div.bg--primary.elementor-element, .bg--inner--primary, div.bg--inner--primary.elementor-element {
background-color: var(--color-bg-primary);
color: var(--color-text-on-primary);
}
/** Fondo secundario (Principal e interno) **/
.bg--secondary, div.bg--secondary.elementor-element, .bg--inner--secondary, div.bg--inner--secondary.elementor-element {
background-color: var(--color-bg-secondary);
color: var(--color-text-on-secondary);
}
/** Fondo terciario (Principal e interno) **/
.bg--tertiary, div.bg--tertiary.elementor-element, .bg--inner--tertiary, div.bg--inner--tertiary.elementor-element {
background-color: var(--color-bg-tertiary);
color: var(--color-text-on-tertiary);
}
/** Enlaces en fondos de marca **/
.bg--primary a {
color: var(--color-accent-on-primary);
text-decoration: underline;
}
.bg--primary a:hover {
color: var(--color-accent-on-primary-hover);
}
.bg--inner--primary a {
color: var(--color-accent-on-primary) !important;
text-decoration: underline;
}
.bg--inner--primary a:hover {
color: var(--color-accent-on-primary-hover) !important;
}
.bg--secondary a {
color: var(--color-accent-on-secondary);
text-decoration: underline;
}
.bg--secondary a:hover {
color: var(--color-accent-on-secondary-hover);
}
.bg--inner--secondary a {
color: var(--color-accent-on-secondary) !important;
text-decoration: underline;
}
.bg--inner--secondary a:hover {
color: var(--color-accent-on-secondary-hover) !important;
}
.bg--tertiary a {
color: var(--color-accent-on-tertiary);
text-decoration: underline;
}
.bg--tertiary a:hover {
color: var(--color-accent-on-tertiary-hover);
}
.bg--inner--tertiary a {
color: var(--color-accent-on-tertiary) !important;
text-decoration: underline;
}
.bg--inner--tertiary a:hover {
color: var(--color-accent-on-tertiary-hover) !important;
}
/*=================================================================
UTILIDAD: COLORES DE TEXTO - FORZAR
=================================================================*/
/** Texto para fondos claros **/
.text--on-light h1, .text--on-light h2, .text--on-light h3, .text--on-light h4, .text--on-light h5, .text--on-light h6,
.text--on-light p, .text--on-light span,
h1.text--on-light, h2.text--on-light, h3.text--on-light, h4.text--on-light, h5.text--on-light, h6.text--on-light,
p.text--on-light, span.text--on-light {
color: var(--color-text-on-light) !important;
}
/** Texto para fondos oscuros **/
.text--on-dark h1, .text--on-dark h2, .text--on-dark h3, .text--on-dark h4, .text--on-dark h5, .text--on-dark h6,
.text--on-dark p, .text--on-dark span,
h1.text--on-dark, h2.text--on-dark, h3.text--on-dark, h4.text--on-dark, h5.text--on-dark, h6.text--on-dark,
p.text--on-dark, span.text--on-dark {
color: var(--color-text-on-dark) !important;
}
/*=================================================================
BLOQUE: MENU (.menu)
=================================================================*/
.menu {
padding: var(--menu-padding-y) var(--menu-padding-x);
}
.e-con.elementor-sticky--active {
z-index: 999;
}
/*** ELEMENTO: Contenedor ***/
.menu__container {
padding: var(--space-l) var(--space-4xl);
box-shadow: var(--shadow-section);
border-radius: var(--full-radius);
border: solid var(--border-s) var(--color-black-1000);
}
/*** MODIFICADOR: Enlaces ***/
.menu__container--links a, .menu__container--links a span {
text-decoration: none;
color: var(--color-text-on-light) !important;
font-size: var(--text-l) !important;
font-family: var(--font-primary);
font-weight: var(--font-weight-regular) !important;
cursor: pointer;
}
.menu__container--links a:hover, .menu__container--links a:active, .menu__container--links a:visited, .menu__container--links a:focus {
text-decoration: none !important;
}
.menu__container--links span.e-n-menu-title-text {
font-size: var(--text-m) !important;
font-weight: var(--font-weight-regular) !important;
color: var(--color-text-on-light) !important;
}
.menu__container--links .e-n-menu-title.e-current a {
position: relative;
font-weight: var(--font-weight-regular) !important;
color: var(--color-text-on-light);
}
.menu__container--links .e-n-menu-title.e-current a::after {
content: "";
position: absolute;
left: var(--none);
bottom: -4px;
width: var(--percent-100);
height: var(--border-s);
background-color: var(--color-text-on-light);
transition: all 0.3s ease;
}
/* Iconos de enlaces */
.menu__container--links i.iconphosphor-arrow- { /* Icono dropdown */
margin-top: 3px;
font-size: var(--icon-m) !important;
}
.menu__container--links i.iconphosphor-edu- { /* Icono campus virtual menú hamburguesa */
font-size: var(--icon-m) !important;
}
/*** ELEMENTO: Contenedor de botones ***/
.menu .menu__content--buttons {
padding: var(--padding-none);
gap: var(--gap-s);
width: auto !important;
}
/*** ELEMENTO: Logo ***/
.menu__logo {
text-align: left !important;
}
.menu__logo img, .menu__logo img.attachment-full.size-full {
width: var(--logo-width-brand-menu) !important;
min-width: var(--logo-width-brand-menu) !important;
height: var(--logo-height-brand-menu) !important;
min-height: var(--logo-height-brand-menu) !important;
}
/*=================================================================
BLOQUE: MEGA MENU (.mega-menu)
=================================================================*/
.mega-menu .e-n-menu-content.e-active {
display: flex;
align-items: center;
}
.mega-menu {
padding: var(--padding-none) var(--menu-padding-x) !important;
}
.mega-menu.e-child {
background-color: var(--color-bg-light);
}
.mega-menu .mega-menu__container {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transform: translateZ(0);
-webkit-transform: translateZ(0);
border-radius: var(--radius-xl) !important;
border: var(--border-s) solid var(--color-border-dark);
padding: var(--padding-l);
gap: var(--gap-l);
box-shadow: var(--shadow-section);
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.mega-menu .mega-menu__card {
min-height: 125px;
padding: var(--space-2xl);
border-radius: var(--radius-m) !important;
overflow: hidden;
}
.mega-menu .mega-menu__title p {
color: var(--color-text-on-dark);
font-family: var(--font-primary);
font-size: var(--text-3xl);
font-weight: var(--font-weight-regular) !important;
line-height: var(--lh-text-s);
}
.mega-menu .mega-menu__title p {
margin-bottom: var(--margin-none) !important;
}
.mega-menu .mega-menu__card:hover .mega-menu__title {
transform: translateY(-3px);
-webkit-transform: translateY(-3px);
}
.e-n-menu-title-1428 i.iconphosphor-edu- {
color: var(--color-icon-on-dark);
}
/* Fix para parpadeo del menú en iOS durante scroll */
@supports (-webkit-touch-callout: none) {
/* Forzar aceleración de hardware en el menú */
.elementor-widget-n-menu,
.menu,
.menu__container,
.mega-menu {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
/* Si el menú es position: fixed o sticky, cambiar a absolute en iOS */
.elementor-location-header,
.elementor-widget-n-menu {
position: relative !important;
}
/* Desactivar el backdrop-filter que causa repintados */
.mega-menu .mega-menu__container {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(255, 255, 255, 0.98) !important;
}
/* Prevenir el scroll bounce de iOS */
body {
overscroll-behavior-y: none;
-webkit-overflow-scrolling: auto;
}
}
/*=================================================================
BLOQUE: HEADER - HERO BANNER (.header)
=================================================================*/
#cabecero-50 {
display: flex;
flex-direction: column-reverse;
}
/*** ELEMENTO: Contenedor principal ***/
.header {
margin-top: -150px;
padding: var(--padding-none) !important;
gap: var(--gap-none);
min-height: var(--media-height-hero);
height: var(--media-height-hero);
max-height: var(--media-height-hero);
width: var(--percent-100);
position: relative;
overflow: hidden;
}
.header.header-form{
height: auto;
max-height: none;
}
/*** ELEMENTO: Widget de imagen con cover ***/
.header .header__img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: var(--percent-100) !important;
height: var(--percent-100) !important;
z-index: 1;
}
/* Contenedor del widget de imagen */
.header .header__img .elementor-widget-container {
width: var(--percent-100) !important;
height: var(--percent-100) !important;
}
/* La imagen dentro del widget */
.header .header__img img {
width: var(--percent-100) !important;
height: var(--vh-100) !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: var(--radius-none) !important;
}
/* La imagen dentro del widget
.header.header-form .header__img img {
height: var(--percent-100) !important;
} */
/* Responsive de imágenes para cabecero */
.img--desktop {
display: none;
}
.img--mobile {
display: block;
}
/*** MODIFICADORES: Header página hija ***/
.header.header--landing h1, .header--landing h1 {
font-size: var(--h1-child) !important;
line-height: var(--lh-text-h1-child) !important;
}
/*** MODIFICADORES: Posición de la imagen ***/
/* Posiciones verticales */
.header .header__img.img--top img {
object-position: center top !important;
}
.header .header__img.img--bottom img {
object-position: center bottom !important;
}
/* Posiciones horizontales */
.header .header__img.img--left img {
object-position: left center !important;
}
.header .header__img.img--right img {
object-position: right center !important;
}
/* Posiciones combinadas */
.header .header__img.img--top-left img {
object-position: left top !important;
}
.header .header__img.img--top-right img {
object-position: right top !important;
}
.header .header__img.img--bottom-left img {
object-position: left bottom !important;
}
.header .header__img.img--bottom-right img {
object-position: right bottom !important;
}
/** MODIFICADOR: Carrousel para diapositivas (.carrousel) **/
.carrousel .carrousel__slide {
min-height: var(--media-height-hero);
}
.carrousel .carrousel__slide-h1 p {
font-family: var(--font-primary) !important;
font-size: var(--h1-child) !important;
font-weight: var(--font-weight-medium) !important;
line-height: var(--lh-text-h1-child) !important;
}
.carrousel .carrousel__slide, .carrousel .carrousel__slide--container {
padding: var(--padding-none);
gap: var(--gap-none);
min-height: var(--media-height-hero);
}
.carrousel .carrousel__slide--content {
padding: var(--content-padding-y) var(--content-padding-x);
gap: var(--gap-l);
}
.carrousel__slide--content {
position: absolute !important;
bottom: 16% !important;
left: 0 !important;
right: 0 !important;
z-index: 10 !important;
}
.carrousel .carrousel__slide--buttons {
padding: var(--padding-none);
}
/* Forzar imagen a ocupar todo el alto en mobile */
.carrousel .img--mobile {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1;
}
.carrousel .img--mobile .elementor-widget-container {
width: 100% !important;
height: 100% !important;
}
.carrousel .img--mobile img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: var(--radius-none) !important;
}
/** BOTONES SLIDE EN CARROUSEL - MOBILE FIRST (Horizontal) **/
.carrousel .carrousel__slide--buttons-container {
padding: var(--padding-none) !important;
}
.carrousel .carrousel__slide--buttons .btn__bar--light,
.carrousel .carrousel__slide--buttons .btn__bar--dark {
background: transparent !important;
border: none !important;
padding: var(--btn-padding-bar) !important;
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
display: flex;
flex-direction: row; /* Horizontal en móvil */
align-items: center;
justify-content: flex-start;
gap: var(--gap-s);
}
/* Enlaces sin padding */
.carrousel .carrousel__slide--buttons .btn__bar--light a,
.carrousel .carrousel__slide--buttons .btn__bar--dark a {
background: transparent !important;
padding: var(--padding-none);
text-decoration: none;
display: flex;
align-items: center;
gap: var(--gap-s);
}
/* Contenedor del texto */
.carrousel .carrousel__slide--buttons .btn__bar--light .elementor-widget-container,
.carrousel .carrousel__slide--buttons .btn__bar--dark .elementor-widget-container {
writing-mode: initial;
transform: none;
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* TEXTO - Sin animación */
.carrousel .carrousel__slide--buttons .btn__bar--light h2,
.carrousel .carrousel__slide--buttons .btn__bar--light h3,
.carrousel .carrousel__slide--buttons .btn__bar--light p,
.carrousel .carrousel__slide--buttons .btn__bar--light span,
.carrousel .carrousel__slide--buttons .btn__bar--dark h2,
.carrousel .carrousel__slide--buttons .btn__bar--dark h3,
.carrousel .carrousel__slide--buttons .btn__bar--dark p,
.carrousel .carrousel__slide--buttons .btn__bar--dark span {
color: var(--color-text-on-dark) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-btn-bar) !important;
font-weight: var(--font-weight-regular) !important;
margin: var(--margin-none) !important;
padding: var(--padding-none) !important;
text-align: center;
transition: none; /* Sin transición para el texto */
}
/* ICONO - Con animación */
.carrousel .carrousel__slide--buttons .btn__bar--light .elementor-icon,
.carrousel .carrousel__slide--buttons .btn__bar--dark .elementor-icon {
position: relative !important;
font-size: var(--icon-m) !important;
margin-left: var(--margin-s) !important;
display: inline-block;
color: var(--color-icon-on-dark) !important;
transition: transform 0.3s ease;
}
/* ANIMACIÓN DEL ICONO cuando se hace hover en el CONTENEDOR de botones */
.carrousel .carrousel__slide--buttons:hover .btn__bar--light .elementor-icon,
.carrousel .carrousel__slide--buttons:hover .btn__bar--dark .elementor-icon {
animation: bounce-horizontal 2s ease-in-out infinite;
}
/* Color específico para btn__bar--dark */
.carrousel .carrousel__slide--buttons .btn__bar--dark h2,
.carrousel .carrousel__slide--buttons .btn__bar--dark h3,
.carrousel .carrousel__slide--buttons .btn__bar--dark p,
.carrousel .carrousel__slide--buttons .btn__bar--dark span {
color: var(--color-text-on-light) !important;
}
.carrousel .carrousel__slide--buttons .btn__bar--dark .elementor-icon {
color: var(--color-icon-dark) !important;
}
/* ANIMACIONES */
@keyframes bounce-horizontal {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(8px);
}
}
@keyframes bounce-vertical {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/** MODIFICADORES: Overlay con gradiente **/
.header .header__img.gradient-black::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-black-bottom-header);
pointer-events: none;
z-index: 2;
}
.carrousel .header__img.img--desktop.overlay-black::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-black-bottom-hard);
pointer-events: none;
z-index: 2;
}
.carrousel .header__img.img--desktop.gradient-primary::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-primary-top-black-bottom-slide);
pointer-events: none;
z-index: 2;
}
.carrousel .header__img.img--desktop.gradient-secondary::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-secondary-top-black-bottom-slide);
pointer-events: none;
z-index: 2;
}
.carrousel .header__img.img--desktop.gradient-tertiary::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-tertiary-top-black-bottom-slide);
pointer-events: none;
z-index: 2;
}
.carrousel .elementor-widget-image.img--mobile {
position: relative;
}
.carrousel .elementor-widget-image.img--mobile.overlay-black::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-black-bottom-hard);
pointer-events: none;
z-index: 2;
}
.carrousel .elementor-widget-image.img--mobile.gradient-primary::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-primary-top-black-bottom-slide);
pointer-events: none;
z-index: 1;
}
.carrousel .elementor-widget-image.img--mobile.gradient-secondary::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-secondary-top-black-bottom-slide);
pointer-events: none;
z-index: 1;
}
.carrousel .elementor-widget-image.img--mobile.gradient-tertiary::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-tertiary-top-black-bottom-slide);
pointer-events: none;
z-index: 1;
}
.header .header__img.gradient-white::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--gradient-white-bottom-header);
pointer-events: none;
z-index: 2;
}
/** MODIFICADOR: Carrousel de imágenes (.carrousel-img) **/
.carrousel-img, .carrousel-img div {
border-radius: var(--radius-l);
}
/*** ELEMENTO: Contenedor de info ***/
.header .header__content {
padding: var(--none) var(--content-padding-x) var(--content-padding-y-lg) var(--content-padding-x);
gap: var(--gap-xl);
width: var(--width-100);
min-height: 57vh !important;
}
.header.header-form .header__content {
padding: var(--none) 1rem var(--content-padding-y-lg) 1rem;
}
.header-form .form{
padding: var(--padding-xl);
border-radius: var(--radius-m);
}
/*** MODIFICADOR: Contenedor de botones ***/
.header .header__content--buttons {
padding: var(--padding-none);
gap: var(--gap-l);
justify-content: flex-start;
}
/*=================================================================
BLOQUE: HERO BANNER (.hero y .hero__responsive)
=================================================================*/
/** MODIFICADOR: RESPONSIVE HERO BANNER (.responsive-hero) **/
/* Componente hero responsivo que muestra diferentes imágenes según el breakpoint, siguiendo metodología Mobile First */
.hero__responsive {
position: relative;
width: var(--percent-100);
display: block;
}
.hero__responsive img {
width: var(--percent-100);
height: auto;
object-fit: cover;
}
.header .header__img img.hero__responsive--mobile, .header .header__img--mobile img {
height: var(--vh-50) !important;
}
/** MOBILE FIRST: Por defecto mostramos la imagen móvil **/
.hero__responsive--mobile {
display: block;
}
.hero__responsive--desktop {
display: none;
}
/*=================================================================
BLOQUE: BOTONES (.btn)
=================================================================*/
/** Base Visual y Estructura **/
/* Estructura Base */
.btn a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center;
text-decoration: none;
font-weight: var(--font-weight-regular);
border-width: var(--border-s);
border-style: solid;
border-radius: var(--full-radius) !important;
box-sizing: border-box;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
fill 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
}
/* Contenido Interno (texto + icono) */
.btn a > span {
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-s);
}
.btn a > span > span {
display: flex;
align-items: center;
}
/** Icono **/
/* Corrección vertical del pseudo-elemento */
.btn i:before {
vertical-align: middle;
line-height: 2px !important;
}
.btn i.iconphosphor-arrow-, button i.iconphosphor-arrow- {
transform: translateY(0px);
display: inline-block;
}
/** Animación **/
/* Preparación de texto e icono para animación */
.btn a > span > span:first-child, .btn a > span > span:last-child {
display: inline-block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/** Estados Interactivos **/
/* Hover General */
.btn a:hover, #btn a:hover {
box-shadow: var(--button-shadow-hover);
transform: none;
/* Deja el enlace en su sitio */
}
/* Active */
.btn a:active, #btn a:active {
box-shadow: var(--button-shadow-pressed);
}
/* Hover del Icono */
.btn a:hover > span > span:first-child {
animation: slide-x 1.2s ease-in-out infinite;
}
/* Presionado */
.btn a:active > span > span:first-child {
transform: none;
}
/* Cancelar animación donde se necesite */
.btn--no-animation a > span > span {
transform: none !important;
transition: none !important;
}
/*** MODIFICADOR: Tamaños de botones ***/
/** Botón XL **/
/* Usar únicamente en headers */
.btn--xl a {
width: var(--percent-100);
max-width: 430px;
min-height: 56px;
padding: var(--btn-padding-y-xl) var(--btn-padding-x-xl);
font-size: var(--text-l);
}
/* Icono XL */
.btn--xl i:before {
font-size: var(--icon-l);
}
/** Botón L **/
/* Usar para todos los CTAs, secciones y formularios */
.btn--l {
width: 100%;
}
.btn--l a {
width: 100%;
min-width: 250px;
max-width: 480px;
min-height: 56px;
padding: var(--btn-padding-y-l) var(--btn-padding-x-l);
font-size: var(--text-l);
}
/* Icono L */
.btn--l i:before {
font-size: var(--icon-l);
}
/** Botón M **/
/* Usar para las tarjetas de curso y footer */
.btn--m a {
padding: var(--btn-padding-y-m) var(--btn-padding-x-m);
font-size: var(--text-l);
min-height: 48px;
min-width: 72px;
}
/* Icono M */
.btn--m i:before {
font-size: var(--icon-l);
}
/** Botón S **/
/* Usar para las categorías de post de blog */
.btn--s a {
padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
font-size: var(--text-s);
text-align: left;
}
/* Icono S */
.btn--s i:before {
font-size: var(--icon-m);
}
/** Botón XS **/
/* Usar para los filtros y categorías */
.btn--xs a {
padding: var(--btn-padding-y-s) var(--btn-padding-x-xs) var(--btn-padding-y-xs) var(--btn-padding-x-xs);
font-size: var(--text-xs);
}
/* Icono XS */
.btn--xs i:before {
font-size: var(--icon-s);
}
/*** MODIFICADOR: Estilos de botones ***/
/** VARIANTE: Sólido **/
/* Primario: para fondos claros y oscuros */
.btn__solid--primary a {
background-color: var(--color-bg-primary);
color: var(--color-text-on-primary) !important;
fill: var(--color-icon-on-primary) !important;
}
/* Secundario: para fondos claros y oscuros */
.btn__solid--secondary a {
background-color: var(--color-bg-secondary);
color: var(--color-text-on-secondary) !important;
fill: var(--color-icon-on-secondary) !important;
}
/* Tertiary: para fondos claros y oscuros */
.btn__solid--tertiary a {
background-color: var(--color-bg-tertiary);
color: var(--color-text-on-tertiary) !important;
fill: var(--color-icon-on-tertiary) !important;
}
/* Borde unificado para todos los solid de colores */
.btn__solid--primary a,
.btn__solid--secondary a,
.btn__solid--tertiary a {
border-color: var(--color-border-dark);
}
/* Hover unificado para todos los solid de colores */
.btn__solid--primary a:hover,
.btn__solid--secondary a:hover,
.btn__solid--tertiary a:hover {
background-color: var(--color-bg-light) !important;
color: var(--color-text-on-light) !important;
fill: var(--color-icon-on-light) !important;
}
/* Negro: para fondos claros */
.btn__solid--dark a {
background-color: var(--color-bg-dark-alt);
color: var(--color-text-on-dark) !important;
fill: var(--color-icon-on-dark) !important;
border-color: var(--color-border-dark);
}
.btn__solid--dark a:hover {
background-color: var(--color-bg-dark-hover);
}
/* Blanco: para fondos oscuros */
.btn__solid--light a {
background-color: var(--color-bg-light);
color: var(--color-text-on-light) !important;
fill: var(--color-icon-on-light) !important;
border-color: var(--color-border-dark);
}
.btn__solid--light a:hover {
background-color: var(--color-bg-light-hover);
}
/** Borde - light **/
.btn__solid--primary.border-light a,
.btn__solid--secondary.border-light a,
.btn__solid--tertiary.border-light a,
.btn__solid--dark.border-light a,
.btn__solid--light.border-light a{
border-color: var(--color-border-light) !important;
}
/** VARIANTE: Outline **/
/* Outline: Primary, Secondary, Tertiary and Dark (para fondos claros) */
.btn__outline--primary a, .btn__outline--secondary a, .btn__outline--tertiary a, .btn__outline--dark a {
background-color: var(--color-bg-transparent) !important;
border-color: var(--color-border-dark);
}
.btn__outline--primary a, .btn__outline--secondary a, .btn__outline--tertiary a, .btn__outline--dark a,
.btn__outline--primary i, .btn__outline--secondary i, .btn__outline--tertiary i, .btn__outline--dark i,
.btn__outline--primary svg, .btn__outline--secondary svg, .btn__outline--tertiary svg, .btn__outline--dark svg {
color: var(--color-text-on-light) !important;
fill: var(--color-icon-on-light) !important;
}
/* Hover Outline: Primary */
.btn__outline--primary a:hover {
background-color: var(--color-bg-primary) !important;
}
/* Hover Outline: Secondary */
.btn__outline--secondary a:hover {
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-on-secondary) !important;
}
.btn__outline--secondary a:hover i,
.btn__outline--secondary a:hover svg {
color: var(--color-text-on-secondary) !important;
fill: var(--color-icon-on-secondary) !important;
}
/* Hover Outline: Tertiary */
.btn__outline--tertiary a:hover {
background-color: var(--color-bg-tertiary) !important;
color: var(--color-text-on-tertiary) !important;
}
.btn__outline--tertiary a:hover i,
.btn__outline--tertiary a:hover svg {
color: var(--color-text-on-tertiary) !important;
fill: var(--color-icon-on-tertiary) !important;
}
/* Hover Outline: Dark (para fondos claros) */
.btn__outline--dark a:hover {
background-color: var(--color-bg-light-hover) !important;
}
/* Blanco: para fondos oscuros */
.btn__outline--light a {
background-color: var(--color-bg-transparent);
border-color: var(--color-border-light);
}
.btn__outline--light a, .btn__outline--light i, .btn__outline--light svg {
color: var(--color-text-on-dark) !important;
fill: var(--color-icon-on-dark) !important;
}
.btn__outline--light a:hover {
background-color: var(--color-bg-on-dark-hover) !important;
}
/* Animación */
.btn a:active > span > span:first-child {
transform: translate(6px, 0px);
}
.btn__solid--primary a:active>span>span:first-child,
.btn__solid--secondary a:active>span>span:first-child,
.btn__solid--dark a:active>span>span:first-child,
.btn__solid--light a:active>span>span:first-child,
.btn__outline--dark a:active>span>span:first-child,
.btn__outline--light a:active>span>span:first-child {
transform: none;
transition: none;
}
/** VARIANTE: Ghost **/
/* Negro: para fondos claros */
.btn__ghost--dark a {
background-color: var(--color-bg-transparent);
color: var(--color-text-on-light) !important;
fill: var(--color-icon-on-light) !important;
border: none;
padding-left: var(--padding-none);
padding-right: var(--padding-none);
padding-bottom: var(--space-xxs);
position: relative;
transition: color 0.3s ease;
}
.btn__ghost--dark a::after {
content: '';
position: absolute;
left: var(--none);
bottom: -2px;
width: var(--percent-100);
height: 1px;
background-color: var(--color-bg-secondary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.btn__ghost--dark a:hover {
color: var(--color-text-secondary) !important;
fill: var(--color-icon-secondary) !important;
box-shadow: none;
}
.btn__ghost--dark a:hover::after {
transform: scaleX(1);
}
/* Blanco: para fondos oscuros */
.btn__ghost--light a {
background-color: var(--color-transparent);
color: var(--color-text-on-dark) !important;
fill: var(--color-icon-on-dark) !important;
border: none;
padding-left: var(--padding-none);
padding-right: var(--padding-none);
padding-bottom: var(--space-xxs);
position: relative;
transition: color 0.3s ease;
}
.btn__ghost--light a::after {
content: '';
position: absolute;
left: var(--none);
bottom: -2px;
width: var(--percent-100);
height: 1px;
background-color: var(--color-bg-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.btn__ghost--light a:hover {
color: var(--color-text-primary) !important;
fill: var(--color-icon-primary) !important;
box-shadow: none;
}
.btn__ghost--light a:hover::after {
transform: scaleX(1);
}
/* --Ghost: Estado Active-- */
/* Movimiento del texto al presionar */
/* ICONO - Cancelar movimiento al presionar */
.btn__ghost--dark a:active>span>span:first-child,
.btn__ghost--light a:active>span>span:first-child {
/*Igual que en el hover*/
animation: slide-x 1.2s ease-in-out infinite;
}
.btn__ghost--dark a>span>span:first-child:active,
.btn__ghost--light a>span>span:first-child:active,
.btn__ghost--dark a>span>span:last-child:active,
.btn__ghost--light a>span>span:last-child:active {
transform: translateY(-2px);
transition: transform 0.1s ease;
}
/* UTILIDAD: Cancelar todos los hovers del botón */
.btn--no-hover a {
cursor: default !important;
}
.btn--no-hover a:hover,
.btn--no-hover a:hover > span > span:first-child {
transform: none !important;
box-shadow: none !important;
animation: none !important;
transition: none !important;
}
/* Mantener colores originales en hover */
.btn--no-hover.btn__solid--primary a:hover {
background-color: var(--color-bg-primary) !important;
color: var(--color-text-on-primary) !important;
}
.btn--no-hover.btn__solid--secondary a:hover {
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-on-secondary) !important;
}
.btn--no-hover.btn__solid--tertiary a:hover {
background-color: var(--color-bg-tertiary) !important;
color: var(--color-text-on-tertiary) !important;
}
.btn--no-hover.btn__solid--dark a:hover {
background-color: var(--color-bg-dark-alt) !important;
color: var(--color-text-on-dark) !important;
}
.btn--no-hover.btn__solid--light a:hover {
background-color: var(--color-bg-light) !important;
color: var(--color-text-on-light) !important;
}
/* Para outline buttons */
.btn--no-hover.btn__outline--primary a:hover,
.btn--no-hover.btn__outline--secondary a:hover,
.btn--no-hover.btn__outline--tertiary a:hover,
.btn--no-hover.btn__outline--dark a:hover,
.btn--no-hover.btn__outline--light a:hover {
background-color: var(--color-bg-transparent) !important;
}
/** VARIANTE: Botón Loop y Form – ID #btn--load, #btn--form **/
/* Estilos en común */
a#btn--load, #btn--form, #btn--form-footer {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
font-weight: var(--font-weight-regular);
box-sizing: border-box;
cursor: pointer;
border-radius: var(--full-radius);
font-size: var(--text-l) !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
fill 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
}
a#btn--load, #btn--form {
min-height: 56px;
padding: var(--btn-padding-y-l) var(--btn-padding-x-l);
}
#btn--form-footer {
min-height: 44px;
padding: var(--btn-padding-y-m) var(--btn-padding-x-m);
}
a#btn--load > span, #btn--form > span, #btn--form-footer > span {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
a#btn--load > span > span, #btn--form > span > span, #btn--form-footer > span > span {
display: flex;
align-items: center;
}
a#btn--load i:before, #btn--form i:before, #btn--form-footer i:before {
vertical-align: middle;
/*line-height: 2px !important;*/
font-size: var(--icon-l);
}
a#btn--load > span > span:first-child, a#btn--load > span > span:last-child,
#btn--form > span > span:first-child, #btn--form > span > span:last-child,
#btn--form-footer > span > span:first-child, #btn--form-footer > span > span:last-child {
display: inline-block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Botón Load */
a#btn--load {
border: var(--border-s) solid var(--color-border-dark);
background-color: var(--color-bg-transparent) !important;
color: var(--color-text-on-light) !important;
fill: var(--color-icon-on-light) !important;
}
a:hover#btn--load {
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-on-secondary) !important;
fill: var(--color-icon-on-secondary) !important;
box-shadow: var(--button-shadow-hover);
transform: none;
}
a:active#btn--load {
box-shadow: var(--button-shadow-pressed);
}
@keyframes spin-smooth {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
a#btn--load .elementor-button-icon i {
display: inline-block;
transform-origin: center;
height: auto; /* Quitar la altura fija de 14px */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover#btn--load .elementor-button-icon i {
animation: slide-x 1.2s ease-in-out infinite;
}
a:active#btn--load .elementor-button-icon i {
transform: none;
}
/* Botón Form */
#btn--form, #btn--form-footer {
border: var(--border-s) solid var(--color-border-light);
background-color: var(--color-bg-primary) !important;
color: var(--color-text-on-primary) !important;
fill: var(--color-icon-on-primary) !important;
}
#btn--form:hover, #btn--form-footer:hover {
border: var(--border-s) solid var(--color-border-light);
background-color: var(--color-bg-light) !important;
color: var(--color-text-on-light) !important;
fill: var(--color-icon-on-light) !important;
box-shadow: var(--button-shadow-hover);
transform: none;
}
#btn--form:active, #btn--form-footer:active {
box-shadow: var(--button-shadow-pressed);
}
#btn--form:hover > span > span:first-child, #btn--form-footer:hover > span > span:first-child {
animation: slide-x 1.2s ease-in-out infinite;
}
#btn--form:active > span > span:first-child, #btn--form-footer:active > span > span:first-child {
transform: none;
transition: none;
}
@keyframes slide-x {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(3px);
}
100% {
transform: translateX(0px);
}
}
/*=================================================================
MODIFICADOR DE COLOR PARA BTN--LOAD
Variaciones: .color--primary, .color--secondary, .color--tertiary
Fallback con ID para mayor especificidad
=================================================================*/
/** VARIACIÓN: Color Primary (Verde) **/
.color--primary a#btn--load,
#color--primary a#btn--load {
border-color: var(--color-border-primary);
background-color: var(--color-bg-primary) !important;
color: var(--color-text-on-primary) !important;
fill: var(--color-icon-on-primary) !important;
}
.color--primary a:hover#btn--load,
#color--primary a:hover#btn--load {
background-color: var(--color-bg-primary-hover) !important;
color: var(--color-text-on-primary) !important;
fill: var(--color-icon-on-primary) !important;
border-color: var(--color-border-primary);
}
.color--primary a:active#btn--load,
#color--primary a:active#btn--load {
background-color: var(--color-primary-900) !important;
}
/** VARIACIÓN: Color Secondary (Azul) **/
.color--secondary a#btn--load,
#color--secondary a#btn--load {
border-color: var(--color-border-secondary);
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-on-secondary) !important;
fill: var(--color-icon-on-secondary) !important;
}
.color--secondary a:hover#btn--load,
#color--secondary a:hover#btn--load {
background-color: var(--color-bg-secondary-hover) !important;
color: var(--color-text-on-secondary) !important;
fill: var(--color-icon-on-secondary) !important;
border-color: var(--color-border-secondary);
}
.color--secondary a:active#btn--load,
#color--secondary a:active#btn--load {
background-color: var(--color-secondary-900) !important;
}
/** VARIACIÓN: Color Tertiary (Naranja) **/
.color--tertiary a#btn--load,
#color--tertiary a#btn--load {
border-color: var(--color-border-tertiary);
background-color: var(--color-bg-tertiary) !important;
color: var(--color-text-on-tertiary) !important;
fill: var(--color-icon-on-tertiary) !important;
}
.color--tertiary a:hover#btn--load,
#color--tertiary a:hover#btn--load {
background-color: var(--color-bg-tertiary-hover) !important;
color: var(--color-text-on-tertiary) !important;
fill: var(--color-icon-on-tertiary) !important;
border-color: var(--color-border-tertiary);
}
.color--tertiary a:active#btn--load,
#color--tertiary a:active#btn--load {
background-color: var(--color-tertiary-900) !important;
}
/** ESTADOS FOCUS para todas las variaciones **/
.color--primary a:focus#btn--load,
#color--primary a:focus#btn--load,
.color--primary a:focus-visible#btn--load,
#color--primary a:focus-visible#btn--load {
outline: var(--border-m) solid var(--color-primary-600);
outline-offset: 2px;
}
.color--secondary a:focus#btn--load,
#color--secondary a:focus#btn--load,
.color--secondary a:focus-visible#btn--load,
#color--secondary a:focus-visible#btn--load {
outline: var(--border-m) solid var(--color-secondary-600);
outline-offset: 2px;
}
.color--tertiary a:focus#btn--load,
#color--tertiary a:focus#btn--load,
.color--tertiary a:focus-visible#btn--load,
#color--tertiary a:focus-visible#btn--load {
outline: var(--border-m) solid var(--color-tertiary-600);
outline-offset: 2px;
}
/** UTILIDAD: Versión outline del btn--load con colores **/
.color--primary.btn--load-outline a#btn--load,
#color--primary.btn--load-outline a#btn--load {
background-color: var(--color-bg-transparent) !important;
border: var(--border-m) solid var(--color-border-primary);
color: var(--color-text-primary) !important;
fill: var(--color-icon-primary) !important;
}
.color--primary.btn--load-outline a:hover#btn--load,
#color--primary.btn--load-outline a:hover#btn--load {
background-color: var(--color-primary-100) !important;
border-color: var(--color-border-primary);
}
.color--secondary.btn--load-outline a#btn--load,
#color--secondary.btn--load-outline a#btn--load {
background-color: var(--color-bg-transparent) !important;
border: var(--border-m) solid var(--color-border-secondary);
color: var(--color-text-secondary) !important;
fill: var(--color-icon-secondary) !important;
}
.color--secondary.btn--load-outline a:hover#btn--load,
#color--secondary.btn--load-outline a:hover#btn--load {
background-color: var(--color-secondary-100) !important;
border-color: var(--color-border-secondary);
}
.color--tertiary.btn--load-outline a#btn--load,
#color--tertiary.btn--load-outline a#btn--load {
background-color: var(--color-bg-transparent) !important;
border: var(--border-m) solid var(--color-border-tertiary);
color: var(--color-text-tertiary) !important;
fill: var(--color-icon-tertiary) !important;
}
.color--tertiary.btn--load-outline a:hover#btn--load,
#color--tertiary.btn--load-outline a:hover#btn--load {
background-color: var(--color-tertiary-100) !important;
border-color: var(--color-border-tertiary);
}
/*=================================================================
BLOQUE: BOTONES FLOTANTES (.btn--float)
=================================================================*/
/* Ocultar completamente los botones al inicio */
.btn--float {
display: none !important;
}
/* Mostrar cuando estén listos */
/*.btn--float.loaded {
display: block;
}*/
/* Estilos */
.btn--float i.iconphosphor-comm-.icon-phosphor-comm-chatcentereddots-regular {
height: 35px;
}
.btn--float p, .btn--float a, .btn--float span {
font-family: var(--font-text) !important;
font-size: var(--text-l) !important;
color: var(--color-text-on-secondary);
}
.btn--float span {
font-weight: var(--font-weight-regular);
}
.btn--float a.e-contact-buttons__contact-icon-link {
background: var(--color-bg-secondary);
}
.btn--float svg.e-font-icon-svg {
fill: var(--color-icon-on-secondary);
width: var(--icon-l) !important;
height: var(--icon-l) !important;
}
/* Cambio de color para el footer (dinámico en js) */
/* Transiciones para el cambio de color */
.btn--float span {
transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn--float a.e-contact-buttons__contact-icon-link {
transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn--float svg {
transition: fill 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Estilos cuando está sobre el footer negro */
.btn--float.in-footer span {
color: var(--color-text-on-primary) !important;
}
.btn--float.in-footer a.e-contact-buttons__contact-icon-link {
background: var(--color-bg-primary) !important;
}
.btn--float.in-footer svg {
fill: var(--color-icon-on-primary) !important;
}
/* Compensación del icono de flecha y correo para "más información" de los formularios de algunas oposiciones */
.btn--float i.iconphosphor-arrow-.icon-phosphor-arrow-arrowright-bold {
margin-top: 7px;
}
.e-contact-buttons a[aria-label="Email" i] svg {
margin-top: -3px !important;
}
/*=================================================================
BLOQUE: FILTROS HORIZONTALES TIPO PILL (.filter--horizontal)
=================================================================*/
/** ELEMENTO: Formulario de Cursos **/
form#filtro-cursos-form {
width: var(--percent-100);
display: flex;
justify-content: center;
}
/* ELEMENTO: Mensaje de "Cargando cursos" */
.courses-results__loading, .courses-results__loading p {
color: var(--color-text-on-light) !important;
color: black !important;
}
/** ELEMENTO: Contenedor principal horizontal **/
.filter__container.filter--horizontal {
padding: var(--padding-none);
gap: var(--gap-none);
margin-bottom: var(--margin-l);
display: flex;
justify-content: center;
}
/** ELEMENTO: Formulario horizontal - Mobile First Base **/
.filter__form--horizontal {
display: flex;
align-items: center;
gap: var(--gap-m);
padding: var(--padding-none);
flex-wrap: wrap;
justify-content: center;
}
/** ELEMENTO: Contenedor de cada pill **/
.filter__pill {
position: relative;
display: inline-block;
width: var(--percent-100);
}
/** ELEMENTO: Select estilo pill - Mobile First Base **/
.filter__select--pill {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Estructura - padding 8px 16px-24px */
display: inline-flex;
align-items: center;
justify-content: space-between;
min-width: 100px;
padding: var(--btn-padding-y-s) var(--btn-padding-x-m);
/* Tipografía */
font-family: var(--font-primary);
font-size: var(--text-s);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-s);
/* Apariencia base - estado OFF (fondo blanco) */
background-color: var(--color-bg-light);
color: var(--color-text-on-light);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
/* Icono dropdown gris - Mobile */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
padding-right: 36px;
/* Interacciones */
cursor: pointer;
transition: all 0.3s ease;
box-sizing: border-box;
}
/** MODIFICADOR: Estado hover **/
.filter__select--pill:hover {
background-color: var(--color-bg-light-alt) !important;
color: var(--color-text-on-light) !important;
border-color: var(--color-border-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-container-s);
}
/** MODIFICADOR: Estado focus **/
.filter__select--pill:focus {
outline: none !important;
box-shadow: 0 0 0 var(--border-m) var(--color-border-dark);
}
/** MODIFICADOR: Estado activo base - NEUTRO (cuando tiene valor seleccionado) **/
.filter__select--pill.filter__select--active,
.filter__select--pill:not([value=""]):not([value="0"]) {
background-color: var(--color-bg-light);
color: var(--color-text-on-light);
border-color: var(--color-border-dark);
font-weight: var(--font-weight-medium);
/* Icono negro para el estado activo */
background-image: url("data:image/svg+xml;utf8,");
}
.filter__select--pill.filter__select--active:hover {
border-color: var(--color-border-gray) !important;
color: var(--color-text-on-light) !important;
transform: translateY(-1px);
}
/** MODIFICADORES DE COLOR: Primary **/
.color--primary .filter__select--pill.filter__select--active:hover,
.color--primary .filter__select--pill:not([value=""]):not([value="0"]):hover {
border-color: var(--color-border-primary) !important;
color: var(--color-text-on-light) !important;
}
.color--primary .filter__select--pill:focus {
box-shadow: 0 0 0 var(--border-m) var(--color-border-primary) !important;
}
/** MODIFICADORES DE COLOR: Secondary **/
.color--secondary .filter__select--pill.filter__select--active:hover,
.color--secondary .filter__select--pill:not([value=""]):not([value="0"]):hover, .filter__select--pill:hover {
border-color: var(--color-border-secondary) !important;
color: var(--color-text-on-light) !important;
}
.color--secondary .filter__select--pill:focus {
box-shadow: 0 0 0 var(--border-m) var(--color-border-secondary) !important;
}
/** MODIFICADORES DE COLOR: Tertiary **/
.color--tertiary .filter__select--pill.filter__select--active:hover,
.color--tertiary .filter__select--pill:not([value=""]):not([value="0"]):hover {
border-color: var(--color-border-tertiary) !important;
color: var(--color-text-on-light) !important;
}
.color--tertiary .filter__select--pill:focus {
box-shadow: 0 0 0 var(--border-m) var(--color-border-tertiary) !important;
}
/* Ocultar select cuando solo tiene una opción */
.filter__select--pill:has(option:only-child) {
display: none;
}
/** ELEMENTO: Botón Reset tipo pill - Mobile First Base **/
.filter__reset--pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 75px;
width: var(--percent-100);
padding: var(--btn-padding-y-s) var(--btn-padding-x-m);
/* Tipografía */
font-family: var(--font-primary);
font-size: var(--text-s);
font-weight: var(--font-weight-medium);
line-height: var(--lh-text-s);
/* Apariencia */
background-color: var(--color-bg-dark-alt) !important;
color: var(--color-text-on-dark);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
/* Interacciones */
cursor: pointer;
transition: all 0.3s ease;
text-transform: none;
}
.filter__reset--pill:hover {
background-color: var(--color-bg-dark-alt-hover) !important;
transform: translateY(-1px);
box-shadow: var(--shadow-container-s);
}
.filter__reset--pill:active {
transform: translateY(0);
box-shadow: var(--button-shadow-pressed);
}
/** ELEMENTO: Contenedor del Input de búsqueda **/
.filter__pill.filter__pill--search {
width: var(--percent-100);
}
/** ELEMENTO: Input de búsqueda estilo pill - Mobile First Base **/
.filter__input--pill {
appearance: none;
display: inline-flex;
align-items: center;
min-width: 150px;
padding: var(--btn-padding-y-s) var(--btn-padding-x-m);
/* Tipografía */
font-family: var(--font-primary);
font-size: var(--text-s) !important;
font-weight: var(--font-weight-regular) !important;
background-color: var(--color-bg-light) !important;
color: var(--color-text-on-light) !important;
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius) !important;
cursor: text;
transition: all 0.3s ease;
box-sizing: border-box !important;
/* Icono de búsqueda con encoding mejorado */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23383838' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right var(--padding-l) center !important;
background-size: var(--icon-m) !important;
padding-right: var(--padding-l) !important;
}
.filter__input--pill::placeholder {
color: var(--color-black-alt-500);
}
/** MODIFICADOR: Estado focus base - NEUTRO **/
.filter__input--pill:focus {
outline: none !important;
box-shadow: 0 0 0 var(--border-m) var(--color-border-dark) !important;
}
/** MODIFICADORES DE COLOR PARA INPUT FOCUS: Primary **/
.color--primary .filter__input--pill:focus {
box-shadow: 0 0 0 var(--border-m) var(--color-border-primary) !important;
}
/** MODIFICADORES DE COLOR PARA INPUT FOCUS: Secondary **/
.color--secondary .filter__input--pill:focus {
box-shadow: 0 0 0 var(--border-m) var(--color-border-secondary) !important;
}
/** MODIFICADORES DE COLOR PARA INPUT FOCUS: Tertiary **/
.color--tertiary .filter__input--pill:focus {
box-shadow: 0 0 0 var(--border-m) var(--color-border-tertiary) !important;
}
/*=================================================================
BLOQUE: RESULTADOS DE CURSOS (.courses-results)
=================================================================*/
/** ELEMENTO: Contenedor principal **/
.courses-results {
display: flex;
flex-direction: column;
gap: var(--gap-2xl);
padding: var(--padding-none);
}
/** ELEMENTO: Grid de cursos **/
.courses-results__grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--gap-l);
padding: var(--padding-none);
}
/** ELEMENTO: Mensaje vacío **/
.courses-results__empty {
text-align: center;
padding: var(--padding-4xl);
background-color: var(--color-bg-light-alt);
border-radius: var(--radius-m);
border: var(--border-s) solid var(--color-border-light-gray);
}
.courses-results__empty p {
font-size: var(--text-l);
color: var(--color-text-gray);
margin: var(--margin-none);
}
/** ELEMENTO: Estados de carga y error **/
.courses-results__loading,
.courses-results__error {
text-align: center;
padding: var(--padding-4xl);
background-color: var(--color-bg-light-alt);
border-radius: var(--radius-m);
border: var(--border-s) solid var(--color-border-light-gray);
margin: var(--margin-2xl) 0;
}
.courses-results__loading p {
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
margin: var(--margin-none);
}
.courses-results__error p {
color: var(--color-tertiary-1000);
font-weight: var(--font-weight-medium);
margin: var(--margin-none);
}
/*=================================================================
BLOQUE: PAGINACIÓN (.pagination)
=================================================================*/
/** ELEMENTO: Contenedor principal **/
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-s);
flex-wrap: wrap;
padding: var(--padding-l) var(--padding-none);
}
/** ELEMENTO: Botón de página **/
.pagination__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
font-size: var(--text-m);
line-height: var(--lh-text-m);
font-weight: var(--font-weight-regular);
font-family: var(--font-primary);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
background-color: var(--color-bg-transparent);
color: var(--color-text-on-light);
cursor: pointer;
text-decoration: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
}
/** Estados hover base **/
.pagination__btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-container-s);
}
.pagination__btn:active {
transform: translateY(0);
box-shadow: var(--button-shadow-pressed);
}
.pagination__btn:focus,
.pagination__btn:focus-visible {
outline: none;
background-color: var(--color-bg-light-alt) !important;
color: var(--color-text-on-light) !important;
border-color: var(--color-border-dark) !important;
box-shadow: var(--shadow-container-s) !important;
}
/** MODIFICADOR: Botón activo **/
.pagination__btn--active {
font-weight: var(--font-weight-semi-bold);
}
/** Estados hover y active - PRIMARY **/
.color--primary .pagination__btn:hover {
background-color: var(--color-bg-primary-hover);
color: var(--color-text-on-primary);
}
.color--primary .pagination__btn--active {
background-color: var(--color-bg-primary);
color: var(--color-text-on-primary);
}
.color--primary .pagination__btn--active:hover {
background-color: var(--color-bg-primary-hover);
transform: none;
}
/** Estados hover y active - SECONDARY **/
.color--secondary .pagination__btn:hover {
background-color: var(--color-bg-secondary-hover);
color: var(--color-text-on-secondary);
}
.color--secondary .pagination__btn--active {
background-color: var(--color-bg-secondary);
color: var(--color-text-on-secondary);
}
.color--secondary .pagination__btn--active:hover {
background-color: var(--color-bg-secondary-hover);
transform: none;
}
/** Estados hover y active - TERTIARY **/
.color--tertiary .pagination__btn:hover {
background-color: var(--color-bg-tertiary-hover);
color: var(--color-text-on-tertiary);
}
.color--tertiary .pagination__btn--active {
background-color: var(--color-bg-tertiary);
color: var(--color-text-on-tertiary);
}
.color--tertiary .pagination__btn--active:hover {
background-color: var(--color-bg-tertiary-hover);
transform: none;
}
/** MODIFICADOR: Botones anterior/siguiente **/
.pagination__btn--prev,
.pagination__btn--next {
min-width: 75px;
padding: var(--btn-padding-y-s) var(--btn-padding-x-m);
font-weight: var(--font-weight-medium);
}
/** ELEMENTO: Puntos suspensivos **/
.pagination__dots {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 75px;
height: 44px;
font-size: var(--text-m);
line-height: var(--lh-text-s);
color: var(--color-text-gray);
user-select: none;
}
/** MODIFICADOR: Botón deshabilitado **/
.pagination__btn:disabled {
background-color: var(--color-bg-lighter-gray);
color: var(--color-text-light-gray);
border-color: var(--color-border-lighter-gray);
cursor: not-allowed;
opacity: var(--opacity-50);
transform: none;
}
.pagination__btn:disabled:hover {
background-color: var(--color-bg-lighter-gray);
color: var(--color-text-light-gray);
border-color: var(--color-border-lighter-gray);
transform: none;
box-shadow: none;
}
/*=================================================================
UTILIDADES: JavaScript helpers
=================================================================*/
/* Clase para mostrar el botón reset cuando hay filtros activos */
.filter__form--horizontal.has-active-filters .filter__reset--pill {
display: inline-flex !important;
}
/* Animación suave para cuando aparece/desaparece el botón reset */
.filter__reset--pill {
transform: scale(0.8);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.filter__form--horizontal.has-active-filters .filter__reset--pill {
opacity: 1;
transform: scale(1);
}
/*=================================================================
BLOQUE: TARJETAS (.card)
=================================================================*/
/* Base Visual y Estructura */
.card {
/* Estructura responsive con clamp */
overflow: hidden;
flex-direction: column;
flex-wrap: nowrap;
width: 100% !important;
max-width: 100%;
min-height: 420px;
/* Estilos base */
padding: var(--padding-l);
gap: var(--gap-l);
background-color: var(--color-bg-light-alt);
border-radius: var(--radius-m);
height: var(--percent-100);
/* Transición para hover */
transition: box-shadow 0.3s ease;
}
.card.card-lp{
background-color: var(--color-bg-light) !important;
gap: var(--gap-m);
}
/*** VARIANTE: Card Hover ***/
.card--hover:hover {
box-shadow: var(--shadow-container-s);
}
/*** ELEMENTO: Imagen (genérica) ***/
.card .card__image {
padding: var(--padding-none);
width: var(--percent-100);
}
.card .card__image img {
width: var(--percent-100);
height: var(--media-height-card);
object-fit: cover;
object-position: center 40%;
border-radius: var(--radius-m);
/* 12px consistente */
}
/*** VARIANTE: Card Course - Compartiendo Clases con la tarjeta de Editorial y TopoTest ***/
.card.card--course .elementor-widget-container a,
.card.card--course-lp .elementor-widget-container a,
.card.card--woo .elementor-widget-container a,
.card.card--topotest .elementor-widget-container a {
text-decoration: none !important;
}
.card--course,
.card--course-lp,
.card--woo,
.card--topotest {
/* Propiedades específicas para tarjetas de curso */
justify-content: space-between !important;
/* Distribuye espacio entre contenido y botón */
min-height: var(--percent-100);
}
/* Forzar que todos los contenedores hijos de card--course, card--woo y card--topotest tengan padding none */
.card--course .e-con,
.card--course-lp .e-con,
.card--woo .e-con,
.card--topotest .e-con,
.card--course .e-con-inner,
.card--course-lp .e-con-inner,
.card--woo .e-con-inner,
.card--topotest .e-con-inner,
.card--course .elementor-container,
.card--course-lp .elementor-container,
.card--woo .elementor-container,
.card--topotest .elementor-container,
.card--course .elementor-column,
.card--course-lp .elementor-column,
.card--woo .elementor-column,
.card--topotest .elementor-column,
.card--course .elementor-widget-wrap,
.card--course-lp .elementor-widget-wrap,
.card--woo .elementor-widget-wrap,
.card--topotest .elementor-widget-wrap {
padding: var(--padding-none) !important;
gap: var(--gap-l) !important;
}
/* Gradiente de las imágenes */
/* Aplicar position: relative al contenedor */
.card--course .card__image {
position: relative;
}
/* Aplicar el gradiente al contenedor de la imagen */
.card--course .card__image::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent !important;
background-image: var(--gradient-white-bottom-hard) !important;
border-radius: var(--radius-m);
pointer-events: none;
z-index: 1;
}
/*** ELEMENTO: Contenedor de categorías ***/
.card--course .card__categories,
.card--course-lp .card__categories,
.card--woo .card__categories,
.card--topotest .card__categories {
display: flex;
gap: var(--gap-s) !important;
padding: var(--padding-m) !important;
flex-direction: row;
/* Siempre horizontal */
}
/* Posicionamiento de categorías para los grids de shortcode */
.card--course .card__categories.e-flex.e-con.e-child {
position: absolute;
bottom: 8px;
z-index: 2;
}
/*** ELEMENTO: Categoría individual ***/
.card--course .card__category,
.card--course-lp .card__category,
.card--woo .card__category,
.card--topotest .card__category {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: var(--font-weight-semi-bold);
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius);
box-sizing: border-box;
/* Tamaños - padding aumentado */
padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
/* Autoajuste de ancho */
width: fit-content;
align-self: flex-start;
}
/* Texto dentro de la categoría */
.card--course .card__category p,
.card--course-lp .card__category p,
.card--woo .card__category p,
.card--topotest .card__category p {
margin-bottom: var(--margin-none) !important;
line-height: var(--none) !important;
}
/* Control de tipografía hacia el span */
.card--course .card__category span,
.card--course-lp .card__category span,
.card--woo .card__category span,
.card--topotest .card__category span,
.card--course .card__category p span,
.card--course-lp .card__category p span,
.card--woo .card__category p span,
.card--topotest .card__category p span {
font-size: var(--text-xs) !important;
line-height: var(--none) !important;
font-weight: var(--font-weight-semi-bold) !important;
}
/** PRIMERA ETIQUETA: Siempre solid con colores del sistema **/
.card--course .card__category:first-child,
.card--course-lp .card__category:first-child,
.card--woo .card__category:first-child,
.card--topotest .card__category:first-child {
/* Base por defecto */
background-color: var(--color-bg-primary);
color: var(--color-text-on-primary);
}
/** MODIFICADORES DE COLOR PARA PRIMERA ETIQUETA **/
.color--primary .card--course .card__category:first-child,
.color--primary .card--course-lp .card__category:first-child,
.color--primary .card--woo .card__category:first-child,
.color--primary .card--topotest .card__category:first-child,
.color--primary.card--course .card__category:first-child,
.color--primary.card--course-lp .card__category:first-child,
.color--primary.card--woo .card__category:first-child,
.color--primary.card--topotest .card__category:first-child {
background-color: var(--color-bg-primary);
color: var(--color-text-on-primary);
}
.color--secondary .card--course .card__category:first-child,
.color--secondary .card--course-lp .card__category:first-child,
.color--secondary .card--woo .card__category:first-child,
.color--secondary .card--topotest .card__category:first-child,
.color--secondary.card--course .card__category:first-child,
.color--secondary.card--course-lp .card__category:first-child,
.color--secondary.card--woo .card__category:first-child,
.color--secondary.card--topotest .card__category:first-child {
background-color: var(--color-bg-secondary);
color: var(--color-text-on-secondary);
}
.color--tertiary .card--course .card__category:first-child,
.color--tertiary .card--course-lp .card__category:first-child,
.color--tertiary .card--woo .card__category:first-child,
.color--tertiary .card--topotest .card__category:first-child,
.color--tertiary.card--course .card__category:first-child,
.color--tertiary.card--course-lp .card__category:first-child,
.color--tertiary.card--woo .card__category:first-child,
.color--tertiary.card--topotest .card__category:first-child {
background-color: var(--color-bg-tertiary);
color: var(--color-text-on-tertiary);
}
.color--dark .card--course .card__category:first-child,
.color--dark .card--course-lp .card__category:first-child,
.color--dark .card--woo .card__category:first-child,
.color--dark .card--topotest .card__category:first-child,
.color--dark.card--course .card__category:first-child,
.color--dark.card--course-lp .card__category:first-child,
.color--dark.card--woo .card__category:first-child,
.color--dark.card--topotest .card__category:first-child {
background-color: var(--color-bg-dark-alt);
color: var(--color-text-on-dark);
}
.color--light .card--course .card__category:first-child,
.color--light .card--course-lp .card__category:first-child,
.color--light .card--woo .card__category:first-child,
.color--light .card--topotest .card__category:first-child,
.color--light.card--course .card__category:first-child,
.color--light.card--course-lp .card__category:first-child,
.color--light.card--woo .card__category:first-child,
.color--light.card--topotest .card__category:first-child {
background-color: var(--color-bg-light);
color: var(--color-text-on-light);
}
/** SEGUNDA ETIQUETA: Siempre outline sin hover **/
.card--course .card__category:nth-child(2),
.card--course-lp .card__category:nth-child(2),
.card--woo .card__category:nth-child(2),
.card--topotest .card__category:nth-child(2) {
background-color: var(--color-bg-transparent) !important;
color: var(--color-text-on-light) !important;
border-color: var(--color-border-dark) !important;
}
/* Eliminar hover de la segunda etiqueta */
.card--course .card__category:nth-child(2):hover,
.card--course-lp .card__category:nth-child(2):hover,
.card--woo .card__category:nth-child(2):hover,
.card--topotest .card__category:nth-child(2):hover {
background-color: var(--color-bg-transparent) !important;
color: var(--color-text-on-light) !important;
border-color: var(--color-border-dark) !important;
transform: none !important;
}
/*** ELEMENTO: Contenido principal (course, woo y topotest) ***/
.card--course .card__content,
.card--course-lp .card__content,
.card--woo .card__content,
.card--topotest .card__content {
padding: var(--padding-none);
display: flex;
flex-direction: column;
height: var(--percent-100);
/* Ocupa todo el espacio disponible */
justify-content: space-between !important;
/* Distribuye espacio entre elementos */
}
/* Contenedor específico para título y descripción */
.card--course .card__content .elementor-container,
.card--course-lp .card__content .elementor-container,
.card--woo .card__content .elementor-container,
.card--topotest .card__content .elementor-container,
.card--course .card__content .elementor-column,
.card--course-lp .card__content .elementor-column,
.card--woo .card__content .elementor-column,
.card--topotest .card__content .elementor-column,
.card--course .card__content .elementor-widget-wrap,
.card--course-lp .card__content .elementor-widget-wrap,
.card--woo .card__content .elementor-widget-wrap,
.card--topotest .card__content .elementor-widget-wrap {
padding: var(--padding-none) !important;
margin: var(--padding-none) !important;
gap: var(--gap-l) !important;
}
.elementor-element.card__title.elementor-widget.elementor-widget-theme-post-title.elementor-page-title.elementor-widget-heading {
display: block;
}
/*** ELEMENTO: Título h3 (course, woo, topotest) ***/
.card--course .card__title h3,
.card--course-lp .card__title h3,
.card--woo .card__title h3,
.card--topotest .card__title h3 {
color: var(--color-text-on-light);
font-family: var(--font-primary);
font-size: var(--text-l) !important;
font-weight: var(--font-weight-semi-bold) !important;
line-height: var(--lh-text-m) !important;
margin: var(--margin-none);
border-radius: var(--radius-none);
}
/*** ELEMENTO: Texto descriptivo (course, woo, topotest) ***/
.card--course .card__description p,
.card--course-lp .card__description p,
.card--course-lp .card__description ul li,
.card--course .card__description,
.card--course-lp .card__description,
.card--woo .card__description p,
.card--woo .card__description,
.card--topotest .card__description p,
.card--topotest .card__description {
font-size: var(--text-m) !important;
font-weight: var(--font-weight-regular) !important;
line-height: var(--lh-text-m) !important;
color: var(--color-text-on-light);
margin: var(--margin-none);
}
/*** ELEMENTO: Datos del curso (modalidad, duración) ***/
.card--course .card__data,
.card--course-lp .card__data,
.card--woo .card__data,
.card--topotest .card__data {
display: flex;
gap: var(--gap-l);
padding: var(--padding-none);
/* Mobile: vertical, Desktop: horizontal */
flex-direction: column;
}
.card--course .card__data-item,
.card--course-lp .card__data-item,
.card--woo .card__data-item,
.card--topotest .card__data-item {
display: flex;
align-items: center;
gap: var(--gap-s);
}
.card--course .card__data-label,
.card--course-lp .card__data-label,
.card--woo .card__data-label,
.card--topotest .card__data-label {
font-size: var(--text-xs) !important;
font-weight: var(--font-weight-bold) !important;
line-height: var(--lh-text-xs) !important;
color: var(--color-text-on-light);
text-transform: uppercase;
margin: var(--margin-none);
}
.card--course .card__data-value,
.card--course-lp .card__data-value,
.card--woo .card__data-value,
.card--topotest .card__data-value {
font-size: var(--text-xs) !important;
font-weight: var(--font-weight-regular) !important;
line-height: var(--lh-text-xs) !important;
color: var(--color-text-on-light);
margin: var(--margin-none);
}
/*** ELEMENTO: Botón principal (simulado con widget de texto) ***/
.card--course .card__button,
.card--course-lp .card__button,
.card--woo .card__button,
.card--topotest .card__button {
align-self: flex-start;
margin-top: auto;
/* Empuja el botón hacia abajo */
/* Estilos de botón simulado - btn--m */
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: var(--font-weight-regular);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
box-sizing: border-box;
cursor: pointer;
gap: var(--gap-m);
/* Tamaños exactos btn--m */
padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
font-size: var(--text-l) !important;
line-height: var(--lh-text-s) !important;
height: auto !important;
/* Estilos base outline */
background-color: var(--color-bg-transparent);
color: var(--color-text-on-light);
/* Transiciones exactas de btn */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
fill 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
}
/* Icono de flecha (lado izquierdo del texto) para CURSO */
.card--course .card__button::before,
.card--course-lp .card__button::before {
font-family: 'phosphor-arrows';
content: '\7a';
font-size: var(--icon-l);
/* Tamaño exacto btn--m */
line-height: var(--lh-text-s) !important;
height: auto !important;
vertical-align: middle;
display: inline-block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 0px;
}
/* CARD Editorial: quitar cualquier text decoration */
a.card--woo {
text-decoration: none;
}
/* Icono de carrito para EDITORIAL */
.card--woo .card__button::before {
font-family: 'phosphor-ecommerce';
content: '\6c';
font-size: var(--icon-l);
/* Tamaño exacto btn--m */
line-height: var(--lh-text-s) !important;
height: auto !important;
vertical-align: middle;
display: inline-block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Icono de campana para TOPOTEST */
.card--topotest .card__button::before {
font-family: 'phosphor-system-devices';
content: '\62';
/* Reemplaza con el unicode del carrito */
font-size: var(--icon-l);
/* Tamaño exacto btn--m */
line-height: var(--lh-text-s) !important;
height: auto !important;
vertical-align: middle;
display: inline-block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Imagen Card Woo y TopoTEst */
.card.card--woo .card__image img,
.card.card--topotest .card__image img {
object-position: center center;
}
/* Precio Tarjeta */
.card.card--woo bdi {
color: var(--color-text-on-light) !important;
font-weight: var(--font-weight-semi-bold);
}
/* Precio Descuento Tarjeta */
.card.card--woo ins {
text-decoration: none !important;
font-weight: var(--font-weight-semi-bold);
}
/* Precio Real Tarjeta */
.card.card--woo del {
text-decoration-color: var(--color-border-dark);
}
.card.card--woo del bdi {
font-weight: var(--font-weight-regular);
}
/* Loop Grid de las tarjetas */
.swiper.elementor-loop-container.elementor-grid {
width: 100%;
}
/* Elementor widget container fix */
.card--course .card__button .elementor-widget-container,
.card--course-lp .card__button .elementor-widget-container,
.card--woo .card__button .elementor-widget-container,
.card--topotest .card__button .elementor-widget-container {
height: auto !important;
}
/** Estados hover activados por TARJETA y active exactos de btn **/
.card--hover:hover .card--course .card__button,
.card--hover:hover .card--course-lp .card__button,
.card--hover:hover .card--woo .card__button,
.card--hover:hover .card--topotest .card__button,
.card--bounce:hover .card--course .card__button,
.card--bounce:hover .card--course-lp .card__button,
.card--bounce:hover .card--woo .card__button,
.card--bounce:hover .card--topotest .card__button,
.card--bounce-subtle:hover .card--course .card__button,
.card--bounce-subtle:hover .card--course-lp .card__button,
.card--bounce-subtle:hover .card--woo .card__button,
.card--bounce-subtle:hover .card--topotest .card__button,
.card--bounce-intense:hover .card--course .card__button,
.card--bounce-intense:hover .card--course-lp .card__button,
.card--bounce-intense:hover .card--woo .card__button,
.card--bounce-intense:hover .card--topotest .card__button {
transform: none;
}
.card--course .card__button:active,
.card--course-lp .card__button:active,
.card--woo .card__button:active,
.card--topotest .card__button:active {
box-shadow: var(--button-shadow-pressed);
}
/* Keyframe para animación del icono */
@keyframes card-slide-x {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(3px);
}
100% {
transform: translateX(0px);
}
}
/* Animación del icono cuando hay hover en tarjeta bounce */
.card--hover:hover .card--course .card__button::before,
.card--hover:hover .card--course-lp .card__button::before,
.card--hover:hover .card--woo .card__button::before,
.card--hover:hover .card--topotest .card__button::before,
.card--bounce:hover .card--course .card__button::before,
.card--bounce:hover .card--course-lp .card__button::before,
.card--bounce:hover .card--woo .card__button::before,
.card--bounce:hover .card--topotest .card__button::before,
.card--bounce-subtle:hover .card--course .card__button::before,
.card--bounce-subtle:hover .card--course-lp .card__button::before,
.card--bounce-subtle:hover .card--woo .card__button::before,
.card--bounce-subtle:hover .card--topotest .card__button::before,
.card--bounce-intense:hover .card--course .card__button::before,
.card--bounce-intense:hover .card--course-lp .card__button::before,
.card--bounce-intense:hover .card--woo .card__button::before,
.card--bounce-intense:hover .card--topotest .card__button::before,
.card--hover:hover.card--course .card__button::before,
.card--hover:hover.card--course-lp .card__button::before,
.card--hover:hover.card--woo .card__button::before,
.card--hover:hover.card--topotest .card__button::before,
.card--bounce:hover.card--course .card__button::before,
.card--bounce:hover.card--course-lp .card__button::before,
.card--bounce:hover.card--woo .card__button::before,
.card--bounce:hover.card--topotest .card__button::before,
.card--bounce-subtle:hover.card--course .card__button::before,
.card--bounce-subtle:hover.card--course-lp .card__button::before,
.card--bounce-subtle:hover.card--woo .card__button::before,
.card--bounce-subtle:hover.card--topotest .card__button::before,
.card--bounce-intense:hover.card--course .card__button::before,
.card--bounce-intense:hover.card--course-lp .card__button::before,
.card--bounce-intense:hover.card--woo .card__button::before,
.card--bounce-intense:hover.card--topotest .card__button::before {
animation: card-slide-x 1.2s ease-in-out infinite !important;
}
/* Parar animación en active del BOTÓN */
.card--course .card__button:active::before,
.card--course-lp .card__button:active::before,
.card--woo .card__button:active::before,
.card--topotest .card__button:active::before {
transform: none;
}
/* Texto dentro del botón (widget de texto) */
.card--course .card__button p,
.card--course-lp .card__button p,
.card--woo .card__button p,
.card--topotest .card__button p {
margin-bottom: var(--margin-none) !important;
font-size: var(--text-l) !important;
line-height: var(--lh-text-s) !important;
height: auto !important;
}
/** MODIFICADOR: Botón Primary **/
.color--primary .card--course:hover .card__button,
.color--primary .card--course-lp:hover .card__button,
.color--primary .card--woo:hover .card__button,
.color--primary .card--topotest:hover .card__button,
.color--primary.card--course:hover .card__button,
.color--primary.card--course-lp:hover .card__button,
.color--primary.card--woo:hover .card__button,
.color--primary.card--topotest:hover .card__button {
background-color: var(--color-bg-primary);
color: var(--color-text-on-primary);
border-color: var(--color-border-dark);
}
/** MODIFICADOR: Botón Secondary **/
.color--secondary .card--course:hover .card__button,
.color--secondary .card--course-lp:hover .card__button,
.color--secondary .card--woo:hover .card__button,
.color--secondary .card--topotest:hover .card__button,
.color--secondary.card--course:hover .card__button,
.color--secondary.card--course-lp:hover .card__button,
.color--secondary.card--woo:hover .card__button,
.color--secondary.card--topotest:hover .card__button {
background-color: var(--color-bg-secondary);
color: var(--color-text-on-secondary);
border-color: var(--color-border-dark);
}
/** MODIFICADOR: Botón Tertiary **/
.color--tertiary .card--course:hover .card__button,
.color--tertiary .card--course-lp:hover .card__button,
.color--tertiary .card--woo:hover .card__button,
.color--tertiary .card--topotest:hover .card__button,
.color--tertiary.card--course:hover .card__button,
.color--tertiary.card--course-lp:hover .card__button,
.color--tertiary.card--woo:hover .card__button,
.color--tertiary.card--topotest:hover .card__button {
background-color: var(--color-bg-tertiary);
color: var(--color-text-on-tertiary);
border-color: var(--color-border-dark);
}
/*** VARIANTE: Card Instructor ***/
.card.card--instructor {
max-width: clamp(28%, 100%, 370px) !important;
background: var(--color-transparent);
gap: var(--gap-l);
display: flex;
flex-direction: column;
justify-content: space-between !important;
min-height: var(--percent-100);
padding: var(--padding-none) !important;
}
.card--instructor .card__top-container {
padding: var(--padding-none) !important;
gap: var(--gap-m) !important;
}
/*** ELEMENTO: Título h3 (solo docente) ***/
.card--instructor .card__title h3 {
color: var(--color-text-on-light);
font-family: var(--font-primary);
font-size: var(--text-l) !important;
font-weight: var(--font-weight-semi-bold) !important;
line-height: var(--lh-text-m) !important;
margin: var(--margin-none);
border-radius: var(--radius-none);
}
/*** ELEMENTO: Toggle (solo para docente) ***/
.card--instructor .card__toggle {
/* Propiedades para el contenedor toggle */
padding: var(--padding-none) !important;
}
.card--instructor .card__toggle p.e-n-accordion-item-title-text {
/* Propiedades para el contenedor toggle */
color: var(--color-text-on-light);
font-family: var(--font-primary);
font-size: var(--text-l) !important;
font-weight: var(--font-weight-semi-bold) !important;
line-height: var(--lh-text-m) !important;
}
/*** ELEMENTO: Imagen (solo para docente) ***/
/* Overlay de gradiente para imagen en tarjeta de instructor */
.card--instructor .elementor-widget-image {
position: relative;
}
.card--instructor .elementor-widget-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent !important;
/* Anula el color sólido de Elementor */
background-image: var(--gradient-black-bottom-medium);
border-radius: var(--radius-m);
pointer-events: none;
z-index: 1;
}
/* Plantilla simple de instructor */
.elementor-element.elementor-element-4aef623.e-con-full.card__image--faculty.e-flex.e-con.e-child {
width: auto;
}
/*=================================================================
BLOQUE: ANIMACIÓN DE TARJETAS (.card--bounce)
=================================================================*/
/* Preparación específica para tarjetas con bounce */
.card--bounce,
.card--bounce-subtle,
.card--bounce-intense {
transform: translateY(0);
transition: transform 1.8s ease, box-shadow 1.8s ease;
animation-play-state: paused;
}
/* Keyframes para diferentes tipos de rebote */
@keyframes card-bounce-y {
0% {
transform: translateY(-3px);
}
50% {
transform: translateY(-1px);
}
100% {
transform: translateY(-3px);
}
}
/* Rebote Suave */
@keyframes card-bounce-subtle {
0% {
transform: translateY(-2px);
}
50% {
transform: translateY(-1px);
}
100% {
transform: translateY(-2px);
}
}
/* Rebote Intenso */
@keyframes card-bounce-intense {
0% {
transform: translateY(-3px);
}
25% {
transform: translateY(-8px);
}
60% {
transform: translateY(0px);
}
100% {
transform: translateY(-3px);
}
}
/* CLASE PRINCIPAL: Rebote estándar */
.card--bounce:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-container-m) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
animation: card-bounce-y 1.5s ease-in-out infinite;
animation-delay: 0.2s;
animation-play-state: running;
}
/* VARIANTE: Rebote sutil */
.card--bounce-subtle:hover {
box-shadow: var(--shadow-container-m) !important;
animation: card-bounce-subtle 1.0s ease-in-out infinite;
animation-delay: 0.15s;
}
/* VARIANTE: Rebote intenso */
.card--bounce-intense:hover {
box-shadow: var(--shadow-container-m) !important;
animation: card-bounce-intense 1.8s ease-in-out infinite;
animation-delay: 0.25s;
}
.card--bounce:hover,
.card--bounce-subtle:hover,
.card--bounce-intense:hover {
animation-play-state: running;
transition: box-shadow 200ms ease-in; /* Mantener transición suave para sombra */
}
/*=================================================================
BLOQUE: FLIP CARD (.flip--card)
=================================================================*/
/* General */
.flip--card {
border-radius: var(--radius-m);
overflow: hidden;
}
.flip--card .elementor-flip-box {
height: var(--media-height-flip);
gap: var(--gap-l);
}
.flip--card .elementor-flip-box__layer__overlay {
padding: var(--padding-2xl);
}
/* Parte de Adelante */
.flip--card h2, .flip--card h3 {
padding: var(--padding-none);
margin: var(--margin-none);
}
.flip--card .elementor-flip-box .elementor-icon-wrapper {
margin-bottom: var(--margin-none);
}
.flip--card .elementor-flip-box .elementor-icon-wrapper .elementor-icon {
font-size: var(--icon-xl);
position: absolute;
top: var(--padding-xl);
right: var(--padding-xl);
}
.flip--card .elementor-flip-box__front .elementor-flip-box__layer__overlay {
background-color: transparent !important; /* Anula el color sólido de Elementor */
background-image: var(--gradient-black-bottom-hard);
}
/* Parte de Atrás */
.flip--card .elementor-flip-box__back .elementor-flip-box__layer__overlay {
background-color: var(--color-bg-light-alt);
}
.flip--card .elementor-flip-box__back .elementor-flip-box__layer__description {
font-size: var(--text-l);
line-height: var(--lh-text-l);
color: var(--color-text-on-light);
}
/* Botón del flip-box con tamaño y colores de las tarjetas */
.flip--card .elementor-flip-box__button.elementor-button {
padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
font-size: var(--text-l);
font-weight: var(--font-weight-medium);
line-height: var(--lh-text-s);
background-color: var(--color-bg-primary);
color: var(--color-text-on-primary);
border: var(--border-s) solid var(--color-border-primary);
border-radius: var(--full-radius);
text-decoration: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
box-sizing: border-box;
gap: var(--gap-m);
}
/* Icono de flecha (lado izquierdo del texto) */
.flip--card .elementor-flip-box__button.elementor-button::before {
font-family: 'phosphor-arrows';
content: '\007A';
font-size: var(--icon-l);
line-height: var(--lh-text-s);
vertical-align: middle;
display: inline-block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Estado hover del botón */
.flip--card .elementor-flip-box__button.elementor-button:hover {
background-color: var(--color-bg-primary-hover);
border-color: var(--color-border-primary);
color: var(--color-text-on-primary);
transform: none;
}
/* Animación del icono en hover del botón */
.flip--card .elementor-flip-box__button.elementor-button:hover::before {
animation: card-slide-x 1.2s ease-in-out infinite;
}
/* Keyframe para animación del icono */
@keyframes card-slide-x {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(3px);
}
100% {
transform: translateX(0px);
}
}
/* Estado active (cuando se presiona) */
.flip--card .elementor-flip-box__button.elementor-button:active {
box-shadow: var(--button-shadow-pressed);
transform: none;
}
/* Parar animación en active del botón */
.flip--card .elementor-flip-box__button.elementor-button:active::before {
transform: none;
}
/*=================================================================
BLOQUE: FORMULARIOS (.form)
=================================================================*/
/* Ocultar heading y mensaje de "señala los campos obligatorios" de Gravity Forms */
.gform_heading, .gform_required_legend {
display: none;
}
/* Reset y estilos base del wrapper */
.form .gform_wrapper.gravity-theme {
margin: var(--margin-none);
padding: var(--padding-none);
font-family: var(--font-text) !important;
font-size: var(--text-m);
color: var(--color-text-on-light);
line-height: var(--lh-text-l);
display: block !important;
}
/* Mantener el grid por defecto de Gravity Forms */
.form .gform_wrapper .gform_body {
padding: var(--padding-none);
margin: var(--margin-none);
}
/*** ELEMENTO: Heading del formulario ***/
.form .gform_wrapper .gform_heading {
margin-bottom: var(--margin-3xl);
}
/* Título del formulario */
.form .gform_wrapper .gform_title {
font-family: var(--font-title);
font-size: var(--h3);
font-weight: var(--font-weight-semi-bold);
line-height: var(--lh-text-h3);
color: var(--color-text-on-light);
margin-bottom: var(--margin-m);
}
/* Leyenda de campos requeridos */
.form .gform_wrapper .gform_required_legend {
font-size: var(--text-s);
color: var(--color-gray-600);
font-weight: var(--font-weight-regular);
margin: var(--margin-none);
}
/*** ELEMENTO: Grid de campos - Mantener display grid nativo ***/
.form .gform_wrapper .gform_fields {
/* Gravity Forms ya aplica display: grid */
gap: var(--gap-xl);
margin: var(--margin-none);
padding: var(--padding-none);
list-style: none;
}
/* Campo individual */
.form .gform_wrapper .gfield {
margin: var(--margin-none) !important;
padding: var(--padding-none);
width: 100%; /* Siempre 100% del espacio asignado por el grid */
}
/* Labels */
.form .gform_wrapper .gfield_label {
display: block;
font-family: var(--font-text);
font-size: var(--text-m);
font-weight: var(--font-weight-medium);
color: var(--color-text-on-light);
margin-bottom: var(--margin-m);
line-height: var(--lh-text-m);
}
/* Campo Honeypot - Ocultar */
.form .gform_wrapper .gform_validation_container,
.form .gform_wrapper .gfield--type-honeypot {
display: none !important;
}
/*** ELEMENTO: Inputs de texto ***/
.form .gform_wrapper input[type="text"],
.form .gform_wrapper input[type="email"],
.form .gform_wrapper input[type="tel"],
.form .gform_wrapper input[type="number"],
.form .gform_wrapper input[type="url"] {
/* Reset y estructura */
display: block;
width: 100%;
box-sizing: border-box;
/* Dimensiones */
min-height: 48px;
padding: var(--padding-l) var(--padding-xl);
/* Tipografía */
font-family: var(--font-text);
font-size: var(--text-m);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-m);
color: var(--color-text-on-light);
/* Estilo visual */
background-color: var(--color-bg-light);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
/* Interacciones */
transition: all 0.3s ease;
-webkit-appearance: none;
appearance: none;
}
/* Textarea con estilos específicos */
.form .gform_wrapper textarea {
/* Reset y estructura */
display: block;
width: 100%;
box-sizing: border-box;
/* Dimensiones específicas de textarea */
min-height: 120px;
resize: vertical;
padding: var(--padding-xl);
/* Tipografía */
font-family: var(--font-text);
font-size: var(--text-m);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-m);
color: var(--color-text-on-light);
/* Estilo visual */
background-color: var(--color-bg-light);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--radius-l);
/* Interacciones */
transition: all 0.3s ease;
-webkit-appearance: none;
appearance: none;
}
.form .ginput_container.ginput_container_textarea textarea {
padding: var(--padding-l);
}
/* Máxima especificidad para placeholder */
body .form .gform_wrapper .ginput_container input::placeholder,
body .form .gform_wrapper .ginput_container textarea::placeholder {
color: var(--color-placeholder-on-light) !important;
opacity: var(--opacity-placeholder) !important;
-webkit-text-fill-color: var(--color-placeholder-on-light) !important;
}
/* Compatibilidad con prefijos de navegadores antiguos */
body .form .gform_wrapper .ginput_container input::-webkit-input-placeholder {
color: var(--color-placeholder-on-light) !important;
opacity: var(--opacity-placeholder) !important;
-webkit-text-fill-color: var(--color-placeholder-on-light) !important;
}
body .form .gform_wrapper .ginput_container input::-moz-placeholder {
color: var(--color-placeholder-on-light) !important;
opacity: var(--opacity-placeholder) !important;
}
body .form .gform_wrapper .ginput_container input:-ms-input-placeholder {
color: var(--color-placeholder-on-light) !important;
opacity: var(--opacity-placeholder) !important;
}
body .form .gform_wrapper .ginput_container textarea::-webkit-input-placeholder {
color: var(--color-placeholder-on-light) !important;
opacity: var(--opacity-placeholder) !important;
-webkit-text-fill-color: var(--color-placeholder-on-light) !important;
}
/* Select dropdown */
.form .gform_wrapper select.gfield_select {
display: block;
width: 100%;
box-sizing: border-box;
min-height: 48px;
padding: var(--padding-l) var(--padding-xl);
font-family: var(--font-text);
font-size: var(--text-m);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-m);
color: var(--color-text-on-light);
background-color: var(--color-bg-light);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
cursor: pointer;
transition: all 0.3s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23383838' viewBox='0 0 256 256'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: calc(100% - 20px) center;
background-size: var(--icon-m);
}
/* Placeholder */
.form .gform_wrapper input::placeholder,
.form .gform_wrapper textarea::placeholder {
color: var(--color-gray-500);
font-weight: var(--font-weight-regular);
opacity: 1;
}
/* Placeholder option select */
.form .gform_wrapper select.gfield_select option.gf_placeholder {
color: var(--color-gray-500);
}
/* Estados Hover */
.form .gform_wrapper input[type="text"]:hover,
.form .gform_wrapper input[type="email"]:hover,
.form .gform_wrapper input[type="tel"]:hover,
.form .gform_wrapper input[type="number"]:hover,
.form .gform_wrapper input[type="url"]:hover,
.form .gform_wrapper textarea:hover,
.form .gform_wrapper select.gfield_select:hover {
border-color: var(--color-border-dark);
}
/* Estados Focus */
.form .gform_wrapper input[type="text"]:focus,
.form .gform_wrapper input[type="email"]:focus,
.form .gform_wrapper input[type="tel"]:focus,
.form .gform_wrapper input[type="number"]:focus,
.form .gform_wrapper input[type="url"]:focus,
.form .gform_wrapper textarea:focus,
.form .gform_wrapper select.gfield_select:focus {
outline: none;
border-color: var(--color-border-dark);
background-color: var(--color-bg-light);
box-shadow: 0 0 0 3px rgba(var(--color-black-alt-rgb), var(--opacity-10));
}
/*** ELEMENTO: Campo de consentimiento (checkbox) ***/
.form .gform_wrapper .gfield--type-consent .ginput_container_consent {
display: grid;
grid-template-columns: 20px 1fr;
gap: var(--gap-m);
align-items: flex-start;
}
/* Checkbox personalizado */
.form .gform_wrapper input[type="checkbox"] {
/* Reset apariencia nativa */
-webkit-appearance: none;
appearance: none;
/* Dimensiones */
width: 20px;
height: 20px;
margin: var(--margin-none);
margin-top: 1px;
/* Estilo visual */
background-color: var(--color-bg-light);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--radius-xs);
/* Interacciones */
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
/* Checkbox hover */
.form .gform_wrapper input[type="checkbox"]:hover {
border-color: var(--color-border-dark);
background-color: var(--color-bg-lighter-gray);
}
/* Checkbox checked */
.form .gform_wrapper input[type="checkbox"]:checked {
background-color: var(--color-bg-dark-alt);
border-color: var(--color-border-dark);
}
/* Check mark */
.form .gform_wrapper input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 3px;
left: 6px;
width: 6px;
height: 10px;
border-right: 2px solid var(--color-white-1000);
border-bottom: 2px solid var(--color-white-1000);
transform: rotate(45deg);
}
/* Label del checkbox */
.form .gform_wrapper .gfield_consent_label {
font-size: var(--text-s);
line-height: 1.9 !important;
color: var(--color-text-on-light);
display: inline-block;
width: 100%;
}
/* Link dentro del checkbox */
.form .gform_wrapper .gfield_consent_label a {
color: var(--color-text-secondary);
text-decoration: underline;
transition: color 0.3s ease;
}
.form .gform_wrapper .gfield_consent_label a:hover {
color: var(--color-secondary-600);
text-decoration: none;
}
/* Evitar que el enlace rompa el flujo del texto */
.form .gform_wrapper .gfield_consent_label a {
color: var(--color-text-secondary);
text-decoration: underline;
transition: color 0.3s ease;
display: inline;
white-space: normal;
}
/* Ajustar con flexbox en lugar de grid para mejor control */
.form .gform_wrapper .gfield--type-consent .ginput_container_consent {
display: flex;
gap: var(--gap-m);
align-items: flex-start;
}
/* Checkbox no debe encogerse */
.form .gform_wrapper .gfield--type-consent input[type="checkbox"] {
flex-shrink: 0;
margin-top: 2px;
}
/* Label toma todo el espacio disponible */
.form .gform_wrapper .gfield--type-consent .gfield_consent_label {
flex: 1;
min-width: 0;
}
/*** ELEMENTO: Footer del formulario y botón de envío ***/
.form .gform_wrapper .gform_footer {
margin-top: var(--margin-l);
padding: var(--padding-none);
}
/* Botón de envío - Estilo btn__solid--dark btn--l sin icono */
.form .gform_wrapper input[type="submit"].gform_button {
/* Reset y estructura */
display: inline-block;
text-align: center;
/* Dimensiones btn--l */
width: 100%;
min-width: 100%;
max-width: 430px;
min-height: 56px;
padding: var(--btn-padding-y-l) var(--btn-padding-x-l);
/* Tipografía */
font-family: var(--font-primary);
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
line-height: calc(56px - (var(--btn-padding-y-l) * 2));
/* Estilo solid dark */
background-color: var(--color-bg-dark-alt);
color: var(--color-text-on-dark);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
/* Interacciones */
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/* Hover del botón */
.form .gform_wrapper input[type="submit"].gform_button:hover {
background-color: var(--color-bg-dark-hover);
box-shadow: var(--button-shadow-hover);
transform: translateY(-2px);
}
/* Active del botón */
.form .gform_wrapper input[type="submit"].gform_button:active {
box-shadow: var(--button-shadow-pressed);
transform: translateY(0);
}
/* Botón deshabilitado */
.form .gform_wrapper input[type="submit"].gform_button:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.form .gform_wrapper.gravity-theme #field_submit, .gform_wrapper.gravity-theme .gform_footer {
display: flex;
justify-content: center;
}
/*** ELEMENTO: Mensajes de validación y errores ***/
/* Mensaje de error general en el top del formulario */
.form .gform_wrapper .gform_validation_errors {
margin-bottom: var(--margin-xl);
padding: var(--padding-none);
background: transparent;
border: none;
}
/* Título h2 del mensaje de error - tamaño h4 */
.form .gform_wrapper .gform_validation_errors h2.gform_submission_error {
font-size: var(--h4) !important;
font-weight: var(--font-weight-medium) !important;
line-height: var(--lh-text-h4) !important;
color: #c30000;
margin: var(--margin-none);
}
/* Arreglar el icono del mensaje de error para que no se sobreponga al texto */
.form .gform_wrapper .gform_validation_errors span.gform-icon {
display: inline-block;
margin-right: var(--margin-s);
vertical-align: middle;
}
.form .gform_wrapper.gravity-theme .gform_validation_errors>h2 .gform-icon {
position: static;
}
/* Quitar el focus/outline rojo del contenedor de errores */
.form .gform_wrapper .gform_validation_errors {
outline: none !important;
box-shadow: none !important;
}
.form .gform_wrapper .gform_validation_errors:focus {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
/* Mensaje de validación individual por campo */
.form .gform_wrapper .validation_message,
.form .gform_wrapper .gfield_description.validation_message {
font-size: var(--text-s);
color: #c30000; /* Color rojo por defecto de Gravity Forms */
margin-top: var(--margin-s);
margin-bottom: var(--margin-none);
padding: var(--padding-none);
background: transparent;
border: none;
border-radius: var(--radius-none);
line-height: var(--lh-text-l);
}
/* Campo con error - mantener borde negro, no cambiar colores */
.form .gform_wrapper .gfield_error input[type="text"],
.form .gform_wrapper .gfield_error input[type="email"],
.form .gform_wrapper .gfield_error input[type="tel"],
.form .gform_wrapper .gfield_error input[type="number"],
.form .gform_wrapper .gfield_error input[type="url"],
.form .gform_wrapper .gfield_error textarea,
.form .gform_wrapper .gfield_error select.gfield_select {
border-color: var(--color-border-dark);
background-color: var(--color-bg-light);
}
/* Label con error - mantener color normal */
.form .gform_wrapper .gfield_error .gfield_label {
color: var(--color-text-on-light) !important;
}
.form label.gform-field-label.gform-field-label--type-inline.gfield_consent_label {
color: var(--color-text-on-light) !important;
}
/*** ELEMENTO: Mensajes de confirmación ***/
.form .gform_wrapper .gform_confirmation_message {
padding: var(--padding-xl);
background-color: rgba(var(--color-primary-rgb), var(--opacity-10));
border: var(--border-s) solid var(--color-border-primary);
border-radius: var(--radius-m);
color: var(--color-text-on-light);
font-size: var(--text-l);
text-align: center;
}
/* Ajuste para descripción de campo (si se usa) */
.form .gform_wrapper .gfield_description:not(.validation_message) {
font-size: var(--text-s);
color: var(--color-gray-600);
margin-top: var(--margin-s);
line-height: var(--lh-text-l);
}
/*=================================================================
BLOQUE: TABLAS (Política de cookies) - Por limpiar
=================================================================*/
.table__container {
overflow-x: auto;
padding: var(--padding-none);
}
.table__content {
width: var(--percent-100);
border-collapse: collapse;
font-family: var(--font-text);
font-size: var(--text-m);
color: var(--color-text-on-light);
line-height: var(--lh-text-m);
}
.table__content th, .table__content td {
padding: var(--padding-s);
border: var(--border-s) solid var(--color-black-alt-300);
text-align: left;
vertical-align: top;
}
.table__content th {
font-weight: var(--font-weight-bold);
text-transform: uppercase;
background-color: var(--color-bg-light-alt);
}
.table__content td {
font-weight: var(--font-weight-regular);
}
/*=================================================================
BLOQUE: TABS (.tab) - Por limpiar
=================================================================*/
/** ELEMENTO: Contenedor padre **/
.tab__container {
padding: var(--padding-none) !important;
gap: var(--gap-l) !important;
}
/* Espacio entre todas las tabs y el contenido */
.tab__container .e-n-tabs, .tab__container .elementor.elementor .elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs {
gap: var(--gap-l) !important;
}
.tab__container button.e-n-tab-title { /* Mobile - dirección vertical */
margin-bottom: var(--margin-none) !important;
}
/* Espacio entre todas las tabs */
.tab__container .e-n-tabs-heading {
gap: var(--gap-m) !important;
}
/** ELEMENTO: Contenedor de los tabs **/
.tab__item {
padding: var(--padding-none) !important;
gap: var(--gap-l) !important;
background-color: transparent !important;
border: none !important;
border-radius: var(--radius-none) !important;
box-shadow: none !important;
}
/* Forzar que todos los contenedores hijos de tab__item tengan padding none y gap l */
.tab__item .e-con,
.tab__item .e-con-inner,
.tab__item .elementor-container,
.tab__item .elementor-column,
.tab__item .elementor-widget-wrap {
padding: var(--padding-none) !important;
gap: var(--gap-l) !important;
}
/** ELEMENTO: Tabs - Estilo Base Ghost **/
.tab__container .e-n-tab-title {
padding: var(--btn-padding-y-l) var(--btn-padding-x-l);
background-color: var(--color-bg-transparent) !important;
border-radius: var(--full-radius) !important;
border-width: var(--border-s);
border-style: solid !important;
border-color: var(--color-border-dark) !important;
cursor: pointer;
/* Transición súper suave */
transition: background-color 0.3s ease,
border-color 0.3s ease,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab__container .e-n-tab-title:hover {
transform: none;
box-shadow: var(--button-shadow-hover);
}
/** ELEMENTO: Texto de las Tabs **/
.tab__container .e-n-tab-title-text {
font-size: var(--text-l) !important;
font-weight: var(--font-weight-regular);
color: var(--color-text-on-light);
/* Transición súper suave para color */
transition: color 0.3s ease;
}
/** MODIFICADOR: TEMA PRIMARY (.tab--primary) **/
/* Tabs inactivas - mantienen borde dark por defecto */
.tab__container.tab--primary .e-n-tab-title {
background-color: var(--color-bg-transparent) !important;
border-color: var(--color-border-dark) !important;
}
.tab__container.tab--primary .e-n-tab-title .e-n-tab-title-text {
color: var(--color-text-on-light);
}
/* Hover en tabs inactivas */
.tab__container.tab--primary .e-n-tab-title:hover {
background-color: var(--color-bg-primary) !important;
border-color: var(--color-border-dark) !important;
}
.tab__container.tab--primary .e-n-tab-title:hover .e-n-tab-title-text {
color: var(--color-text-on-primary);
}
/* Tabs activas */
.tab__container.tab--primary .e-n-tab-title[aria-selected="true"] {
background-color: var(--color-bg-primary) !important;
border-color: var(--color-border-dark) !important;
box-shadow: none !important;
}
.tab__container.tab--primary .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
color: var(--color-text-on-primary);
font-weight: var(--font-weight-semi-bold);
}
/** MODIFICADOR: TEMA SECONDARY (.tab--secondary) **/
/* Tabs inactivas - mantienen borde dark por defecto */
.tab__container.tab--secondary .e-n-tab-title {
background-color: var(--color-bg-transparent) !important;
border-color: var(--color-border-dark) !important;
}
.tab__container.tab--secondary .e-n-tab-title .e-n-tab-title-text {
color: var(--color-text-on-light);
}
/* Hover en tabs inactivas */
.tab__container.tab--secondary .e-n-tab-title:hover {
background-color: var(--color-bg-secondary) !important;
border-color: var(--color-border-dark) !important;
}
.tab__container.tab--secondary .e-n-tab-title:hover .e-n-tab-title-text {
color: var(--color-text-on-secondary);
}
/* Tabs activas */
.tab__container.tab--secondary .e-n-tab-title[aria-selected="true"] {
background-color: var(--color-bg-secondary) !important;
border-color: var(--color-border-dark) !important;
box-shadow: none !important;
}
.tab__container.tab--secondary .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
color: var(--color-text-on-secondary);
font-weight: var(--font-weight-semi-bold);
}
/*=================================================================
BLOQUE: ACORDEÓN (.toggle)
=================================================================*/
/** ELEMENTO: Contenedor padre **/
.toggle__container summary.e-n-accordion-item-title {
padding: var(--padding-l) var(--padding-xl);
border: var(--border-s) solid var(--color-border-light-gray) !important;
border-radius: var(--radius-s);
background: var(--color-bg-light-alt);
}
.toggle__container.toggle--white summary.e-n-accordion-item-title {
background: var(--color-bg-light);
border: var(--border-s) solid var(--color-border-gray) !important;
}
.toggle__container summary.e-n-accordion-item-title:hover {
box-shadow: var(--shadow-container-s);
}
/** ELEMENTO: Contenedor de los toggle **/
.toggle__container .toggle__item {
padding: var(--padding-l) var(--padding-2xl);
border: none !important;
}
/* Margen inferior */
html body .elementor .toggle__container .e-n-accordion-item:not(:last-child) {
margin-block-end: var(--margin-l) !important;
}
/* Título h3 */
.toggle__container h3.e-n-accordion-item-title-text {
color: var(--color-text-gray);
font-size: var(--title-toggle) !important;
font-weight: var(--font-weight-semi-bold) !important;
font-family: var(--font-primary);
line-height: var(--lh-text-m);
margin: var(--margin-none);
}
/* Icono principal */
.toggle__container i {
font-size: var(--icon-l) !important;
color: var(--color-icon-dark-alt) !important;
}
/* Compensación vertical del icono (cuando es estilo "caret" */
.toggle__container span.e-n-accordion-item-title-icon {
margin-top: -10px;
}
/** MODIFICADOR: TEMA PRIMARY (.toggle--primary) **/
.toggle--primary details[open] summary.e-n-accordion-item-title {
background: var(--color-primary-300) !important;
border: var(--border-s) solid var(--color-border-primary) !important;
border-bottom: var(--border-s) solid var(--color-border-primary) !important;
border-radius: var(--radius-s) var(--radius-s) 0 0 !important;
margin-bottom: 0 !important;
}
.toggle--primary details[open] h3.e-n-accordion-item-title-text {
color: var(--color-text-on-primary) !important;
}
.toggle--primary details[open] .toggle__item {
background: var(--color-primary-100) !important;
border: var(--border-s) solid var(--color-border-primary) !important;
border-top: none !important;
border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
margin-top: 0 !important;
padding: var(--padding-l) var(--padding-xl) !important;
color: var(--color-text-on-primary) !important;
}
.toggle--primary details[open] .toggle__item p,
.toggle--primary details[open] .toggle__item div,
.toggle--primary details[open] .toggle__item span {
color: var(--color-text-on-primary) !important;
}
/** MODIFICADOR: TEMA SECONDARY (.toggle--secondary) **/
.toggle--secondary details[open] summary.e-n-accordion-item-title {
background: var(--color-secondary-300) !important;
border: var(--border-s) solid var(--color-border-secondary) !important;
border-bottom: var(--border-s) solid var(--color-border-secondary) !important;
border-radius: var(--radius-s) var(--radius-s) 0 0 !important;
margin-bottom: 0 !important;
}
.toggle--secondary details[open] h3.e-n-accordion-item-title-text {
color: var(--color-text-on-light) !important;
}
.toggle--secondary details[open] .toggle__item {
background: var(--color-secondary-100) !important;
border: var(--border-s) solid var(--color-border-secondary) !important;
border-top: none !important;
border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
margin-top: 0 !important;
padding: var(--padding-l) var(--padding-xl) !important;
color: var(--color-text-on-light) !important;
}
.toggle--secondary details[open] .toggle__item p,
.toggle--secondary details[open] .toggle__item div,
.toggle--secondary details[open] .toggle__item span {
color: var(--color-text-on-light) !important;
}
/** MODIFICADOR: TEMA TERTIARY (.toggle--tertiary) **/
.toggle--tertiary details[open] summary.e-n-accordion-item-title {
background: var(--color-tertiary-300) !important;
border: var(--border-s) solid var(--color-border-tertiary) !important;
border-bottom: var(--border-s) solid var(--color-border-tertiary) !important;
border-radius: var(--radius-s) var(--radius-s) 0 0 !important;
margin-bottom: 0 !important;
}
.toggle--tertiary details[open] h3.e-n-accordion-item-title-text {
color: var(--color-text-on-light) !important;
}
.toggle--tertiary details[open] .toggle__item {
background: var(--color-tertiary-100) !important;
border: var(--border-s) solid var(--color-border-tertiary) !important;
border-top: none !important;
border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
margin-top: 0 !important;
padding: var(--padding-l) var(--padding-xl) !important;
color: var(--color-text-on-light) !important;
}
.toggle--tertiary details[open] .toggle__item p,
.toggle--tertiary details[open] .toggle__item div,
.toggle--tertiary details[open] .toggle__item span {
color: var(--color-text-on-light) !important;
}
/** MODIFICADOR: CAMBIO DE ICONO PARA CADA TEMA **/
.toggle--primary.icon--star details[open] summary.e-n-accordion-item-title::before {
color: var(--color-primary-1000);
}
.toggle--secondary.icon--star details[open] summary.e-n-accordion-item-title::before {
color: var(--color-secondary-1000);
}
.toggle--tertiary.icon--star details[open] summary.e-n-accordion-item-title::before {
color: var(--color-tertiary-1000);
}
/*=================================================================
BLOQUE: FOOTER (.footer)
=================================================================*/
.footer {
padding: var(--section-padding-y) var(--section-padding-x) var(--section-padding-x) !important;
gap: var(--gap-4xl) var(--gap-l) !important;
}
/*** ELEMENTO: Container ***/
.footer__container {
padding: var(--padding-xl) !important;
gap: var(--gap-l) !important;
border-radius: var(--radius-m) !important;
}
.footer__container .e-con-inner {
gap: var(--gap-2xl) !important;
}
/** MODIFICADOR: Logo Brand **/
.footer__logo img.attachment-full.size-full {
width: var(--logo-width-brand-footer) !important;
min-width: var(--logo-width-brand-footer) !important;
height: var(--logo-height-brand-footer) !important;
min-height: var(--logo-height-brand-footer) !important;
}
/** MODIFICADOR: Interno **/
.footer__container--inner, .footer__container--columns {
padding: var(--padding-none);
gap: var(--gap-xl);
}
/** MODIFICADOR: Borde - Dark **/
.footer__container--border--dark {
border: solid var(--border-s) var(--color-border-dark);
}
.footer__container--border--light {
border: solid var(--border-s) var(--color-border-light);
}
/** MODIFICADOR: Créditos **/
.footer__credits {
padding: var(--padding-xl) var(--section-padding-x) 75px var(--section-padding-x) !important;
}
/** MODIFICADOR: Botones Flotantes **/
/* Contenedor */
.footer__btn--float { /* Versión mobile únicamente, para editar los botones flotantes de los demás dispositivos, ir a "Elementos flotantes" de Elementor */
padding: var(--padding-m) var(--section-padding-x) !important;
gap: var(--gap-s) !important;
}
/* Forzar a width 100% en mobile */
.footer__btn--float.e-con-full {
flex-wrap: nowrap !important;
flex-direction: row !important;
}
/* Mobile - Cada botón ocupa 50% */
.footer__btn--float .btn {
flex: 1 1 50% !important;
max-width: 50% !important;
}
.footer__btn--float .btn .elementor-widget-container,
.footer__btn--float .btn .elementor-button-wrapper {
width: 100% !important;
}
.footer__btn--float .btn a.elementor-button {
width: 100% !important;
display: inline-flex !important;
justify-content: center !important;
}
/* Estilos para botones secondary con border-light dentro de footer__btn--float cuando están en footer (cambiado dinámicamente con js */
.footer__btn--float .btn__solid--secondary.border-light.in-footer a {
background: var(--color-bg-primary) !important;
color: var(--color-text-on-primary) !important;
}
.footer__btn--float .btn__solid--secondary.border-light.in-footer p {
color: var(--color-text-on-primary) !important;
}
.footer__btn--float .btn__solid--secondary.border-light.in-footer i {
color: var(--color-icon-on-primary) !important;
}
/*** ESTILO: Texto y Títulos ***/
.footer p {
margin: var(--margin-none);
}
/*** ELEMENTOR: Títulos de cajas de enlaces ***/
.footer .footer__title p {
font-size: var(--text-l);
font-weight: var(--font-weight-semi-bold);
}
/*** ELEMENTO: Texto general ***/
.footer .footer__text p,
.footer .footer__text.elementor-widget-text-editor {
font-size: var(--text-m);
}
/*** ELEMENTO: Claim (H2) ***/
.footer .footer__claim h2,
.footer .footer__claim.elementor-heading-title .elementor-size-default {
font-size: var(--text-claim-footer) !important;
line-height: var(--lh-text-m) !important;
font-weight: var(--font-weight-medium) !important;
}
/*** ELEMENTO: Formulario de suscripción ***/
.footer .footer__form .elementor-form-fields-wrapper {
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
width: var(--percent-100);
}
.footer .footer__form .elementor-field-group {
max-width: var(--percent-100) !important;
gap: var(--gap-m) !important;
}
.footer .footer__form .elementor-field-group.elementor-field-type-submit {
max-width: var(--percent-100) !important;
}
.footer input.elementor-field {
background: var(--color-bg-transparent) !important;
border-radius: var(--full-radius) !important;
border: var(--border-s) solid var(--color-border-on-dark) !important;
color: var(--color-placeholder-on-dark) !important;
min-height: 44px;
padding: var(--btn-padding-y-m) var(--btn-padding-x-m) !important;
}
.footer input.elementor-field:focus {
border: var(--border-s) solid var(--color-border-primary) !important;
}
/*** ESTILO: Otros textos ***/
.footer a, .footer ul, .footer li {
font-size: var(--text-m);
}
/*** ESTILO: Enlaces ***/
.footer a {
text-decoration: none;
font-weight: var(--font-weight-regular);
}
/** MODIFICADOR: Lista de iconos con enlaces **/
/*** ESTILO: Enlaces dentro de la lista ***/
.footer .footer__icon-list a {
color: var(--color-text-on-dark) !important;
}
/*** ESTILO: Lista con icono ***/
.footer .footer__icon-list ul {
font-size: var(--text-m);
font-weight: var(--font-weight-regular);
color: var(--color-text-on-dark) !important;
}
/* Elemento de lista */
.footer .footer__icon-list ul li {
margin-bottom: var(--margin-m) !important;
}
.footer .footer__icon-list i, .footer .footer__icon-list .elementor-widget .elementor-icon-list-icon {
font-size: var(--icon-m) !important;
color: var(--color-icon-on-dark) !important;
}
.footer .footer__icon-list .elementor-widget .elementor-icon-list-icon i::before {
vertical-align: middle;
}
.footer .footer__icon-list .elementor-icon-list-text {
padding-inline-start: var(--padding-none) !important;
}
/* Compensación de Iconos */
.footer .elementor-icon-list-icon i {
margin-top: 5px;
}
/** MODIFICADOR: Iconos de redes sociales **/
.footer .footer__rrss .elementor-icon.elementor-social-icon {
height: auto !important;
width: auto !important;
background: var(--color-bg-transparent) !important;
border-radius: var(--radius-none) !important;
}
.footer .footer__rrss .elementor-icon.elementor-social-icon, .footer .elementor-icon.elementor-social-icon i {
font-size: var(--icon-2xl) !important;
line-height: var(--lh-text-s) !important;
}
/** MODIFICADOR: Tab **/
.footer__tab {
padding: var(--padding-none) !important;
border-radius: var(--radius-none) !important;
}
/* Contenedor del Título Tab */
.footer__tab summary.e-n-accordion-item-title {
padding: var(--padding-none) !important;
gap: var(--gap-m) !important;
border-color: var(--color-transparent) !important;
}
/* Título e icono Tab */
.footer__tab .e-n-accordion-item-title-text {
font-size: var(--text-l) !important;
font-weight: var(--font-weight-semi-bold) !important;
color: white;
border-color: var(--color-transparent) !important;
}
.footer__tab i::before {
font-size: var(--icon-m) !important;
color: white;
}
/* Caja interna del tab */
.footer__tab .elementor-element.e-con-full.e-flex.e-con.e-child {
border-color: var(--color-transparent) !important;
}
/* Enlace del tab (open) */
.footer__tab .elementor-widget-n-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title * {
color: var(--color-text-on-light) !important;
}
/* Iconos de menú */
.footer__tab .elementor-icon-list-icon i {
width: 1rem;
}
/**** ELEMENTO: Botón Ir arriba (Go to top) ****/
.footer .footer__btn--to-top .elementor-icon i,
.footer .footer__btn--to-top .elementor-icon svg {
width: 2.5rem !important;
height: 2.5rem !important;
}
.footer .footer__btn--to-top .elementor-icon-box-icon {
margin-bottom: -1.5rem !important;
}
.footer .footer__btn--to-top i.iconphosphor-arrow-::before {
font-size: var(--icon-3xl) !important;
color: var(--color-icon-on-dark);
display: inline-block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
animation: bounce-y 1.2s ease-in-out infinite;
animation-play-state: paused;
}
.footer .footer__btn--to-top:hover {
cursor: pointer;
}
.footer .footer__btn--to-top:hover i.iconphosphor-arrow-::before {
animation-play-state: running;
}
/**** ANIMACIÓN: Rebote vertical del icono ****/
@keyframes bounce-y {
0% {
transform: translate(-50%, -6px);
}
50% {
transform: translate(-50%, -2px);
}
100% {
transform: translate(-50%, -6px);
}
}
/*=================================================================
BLOQUE: PLANTILLA DE CURSO
=================================================================*/
/** Sección Data Box **/
.content-data-box {
background-color: var(--color-bg-light-gray) !important;
border-radius: var(--radius-l) !important;
justify-content: center !important;
gap: var(--gap-s) !important;
padding: var(--padding-s) !important;
}
.content-data-box .content-data-box--title * {
font-family: var(--font-title) !important;
font-weight: var(--font-weight-regular) !important;
color: var(--color-text-dark) !important;
margin: 0 !important;
text-align: center !important;
}
.content-data-box .content-data-box--text * {
font-family: var(--font-text) !important;
font-weight: var(--font-weight-semi-bold) !important;
font-size: var(--h3) !important;
color: var(--color-text-dark) !important;
margin: 0 !important;
text-align: center !important;
}
/*=================================================================
BLOQUE: PLANTILLA DE CURSO PRODIS
=================================================================*/
.cursos--prodis .filter__pill.filter__pill--search {
display: none;
}
/*=================================================================
BLOQUE: PLANTILLA DE MASTER (.master)
=================================================================*/
/* Logo de "ULA" de la caja InfoData */
.master img.attachment-large.size-large.wp-image-2175 {
height: var(--media-height-3xs);
}
/*=================================================================
BLOQUE: PLANTILLA DE LOGOS
=================================================================*/
/* Para logos específicos */
.swiper-slide .elementor-carousel-image[aria-label*="UANE"],
.swiper-slide .elementor-carousel-image[aria-label*="ULA"] {
max-height: var(--media-height-4xs) !important;
width: auto !important;
object-fit: contain !important;
margin-top: 10px;
}
/*=================================================================
BLOQUE: METODOLOGÍA SKR (.methodology)
=================================================================*/
.methodology__container--image {
min-height: 43vh !important;
}
.methodology__container--image div#spaces--none {
max-width: 550px;
}
/*=================================================================
BLOQUE: TESTIMONIALES (.testimonial)
=================================================================*/
/* ELEMENTO: Icono + autor */
.testimonial .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper {
flex-direction: row !important;
gap: var(--gap-m) !important;
}
/*=================================================================
BLOQUE: WOOCOMMERCE (.woocommerce y .product)
=================================================================*/
/** ELEMENTO: SECCION CABECERO **/
.section__woo {
padding-top: var(--section-padding-y);
padding-bottom: var(--section-padding-y);
margin-bottom: var(--margin-none);
gap: var(--gap-xl);
}
.section__woo--left {
padding-left: var(--section-padding-x);
padding-right: var(--padding-l);
}
.section__woo--right {
padding-left: var(--padding-l);
padding-right: var(--section-padding-x);
}
/** ELEMENTO: PRODUCTO **/
/* MODIFICADOR: Padding del cabecero */
.woo__product.header--landing {
padding: var(--padding-none);
}
/* MODIFICADOR: Ocultar el hover y lightbox de la imagen del producto de woocommerce */
.woo__product img.zoomImg {
display: none !important;
}
div#elementor-lightbox-slideshow-single-img {
display: none !important;
}
/* MODIFICADOR: Precio rebajado de la tarjeta */
.woocommerce ul.products li.product .price ins {
text-decoration: none !important;
}
/* MODIFICADOR: Icono de search, de la imagen de woocommerce */
.woo__product .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
z-index: 2 !important;
}
/* MODIFICADOR: Mensaje de Paypal de la página de producto */
.woo__product .ppcp-messages {
margin-top: var(--margin-l);
}
/* MODIFICADOR: Precio de página de producto */
.woo__product .product__price p, .woo__product .product__price bdi {
color: var(--text-on-light) !important;
}
/** PRECIO: Simple y variable **/
.woo__product .product__price bdi {
margin: var(--margin-none);
font-size: var(--text-4xl);
font-weight: var(--font-weight-semi-bold);
}
/** PRECIO REAL: Precio tachado (del) **/
.woo__product .product__price del,
.woo__product .product__price del bdi {
font-size: var(--text-2xl);
font-weight: var(--font-weight-regular) !important;
}
/** PRECIO CON OFERTA: Precio actual (ins) **/
.woo__product .product__price ins,
.woo__product .product__price ins bdi {
margin: var(--margin-none);
font-size: var(--text-4xl);
font-weight: var(--font-weight-semi-bold);
}
/* MODIFICADOR: Precio de página de producto */
.woo__product .product__sku p, .woo__product .product__sku .elementor-widget-container {
color: var(--text-on-light);
margin: var(--margin-none);
margin-bottom: -15px;
font-size: var(--text-2xl);
font-weight: var(--font-weight-regular);
}
.woo__product .woocommerce-variation-price {
margin: var(--margin-l) var(--margin-none);
}
.woo__product span.price {
color: var(--color-text-on-light) !important;
font-weight: var(--font-weight-semi-bold) !important;
font-size: var(--text-2xl) !important;
}
/* Ocultar elementos del producto embebido vía shortcode */
/*.product.type-product {
display: grid;
grid-template-columns: 1fr;
}*/
/* MODIFICADOR: Añadir producto */
.woo__add-product label {
font-weight: var(--font-weight-medium) !important;
font-size: var(--text-s);
margin-bottom: var(--margin-m);
}
.woocommerce div.product form.cart .variations {
margin-bottom: var(--margin-m) !important;
}
.woo__add-product .product .product_title,
.woo__add-product .product .woocommerce-product-gallery,
.woo__add-product .product .product_meta,
.woo__add-product .product .woocommerce-product-details__short-description,
.woo__add-product .product .product_meta,
.woo__add-product .product .woocommerce-tabs,
.woo__add-product .product .related.products{
display: none !important;
}
.woo__add-product p.price span.woocommerce-Price-amount.amount {
font-size: var(--text-2xl);
font-weight: var(--font-weight-semi-bold) !important;
}
.woo__add-product span.price span.woocommerce-Price-amount.amount {
margin: var(--margin-l) var(--margin-none);
font-size: var(--text-l);
font-weight: var(--font-weight-semi-bold) !important;
}
.woocommerce div.product div.summary {
margin: var(--margin-none) !important;
}
.woocommerce div.product form.cart {
margin: var(--margin-none) !important;
}
/** ELEMENTO: Contenedor de variaciones (Para Headers) **/
.woo__add-product {
width: var(--percent-100);
}
.woo__add-product .variations {
margin-bottom: var(--margin-xl);
}
/** ELEMENTO: Tabla de variaciones - Mobile First **/
.woo__add-product .variations_form .variations {
display: block;
width: var(--percent-100);
}
/** ELEMENTO: Fila de variación **/
.woo__add-product .variations tr {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
margin-bottom: var(--margin-m);
}
/** ELEMENTO: Label de variación **/
.woo__add-product .variations .label,
.woo__add-product .variations th.label {
padding: var(--padding-none);
background: transparent !important;
text-align: left;
/* Tipografía consistente con el sistema */
font-family: var(--font-primary);
font-size: var(--text-s);
font-weight: var(--font-weight-medium);
line-height: var(--lh-text-s) !important;
color: var(--color-text-on-light);
}
/** ELEMENTO: Contenedor del valor **/
.woo__add-product .variations .value,
.woo__add-product .variations td.value {
padding: var(--padding-none);
background: transparent !important;
height: auto;
}
.woo__add-product .variations td.value {
display: flex;
flex-direction: row;
}
/** ELEMENTO: Select de variación - Estilo pill consistente con filtros **/
.woo__add-product .variations select {
/* Reset y estructura base */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Dimensiones Mobile First */
display: inline-flex;
align-items: center;
width: var(--percent-100) !important;
max-width: var(--percent-100) !important;
min-width: var(--percent-75) !important;
min-height: 44px;
/* Padding consistente con filter__select--pill */
padding: var(--btn-padding-y-s) var(--btn-padding-x-m);
padding-right: 44px; /* Espacio para el icono */
margin-right: var(--margin-s) !important;
/* Tipografía */
font-family: var(--font-primary);
font-size: var(--text-s);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-l);
/* Apariencia consistente con filtros */
background-color: var(--color-bg-light);
color: var(--color-text-on-light);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
/* Icono dropdown consistente con filtros */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
/* Interacciones */
cursor: pointer;
transition: all 0.3s ease;
box-sizing: border-box;
}
/** MODIFICADOR: Select hover **/
.woo__add-product .variations select:hover {
background-color: var(--color-bg-light-alt) !important;
color: var(--color-text-on-light) !important;
border-color: var(--color-border-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-container-s);
transform: none;
}
/** MODIFICADOR: Select focus **/
.woo__add-product .variations select:focus {
outline: none !important;
box-shadow: 0 0 0 var(--border-m) var(--color-border-dark);
}
/** MODIFICADOR: Select con valor seleccionado **/
.woo__add-product .variations select:not([value=""]):not([value="0"]) {
font-weight: var(--font-weight-medium);
}
/** ELEMENTO: Botón reset variaciones - Estilo btn--s outline con hover negro **/
.woo__add-product .reset_variations {
/* Reset estilos por defecto */
background: transparent;
/* Estructura base btn--s */
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
/* Dimensiones btn--s */
padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
min-height: 36px;
/* Tipografía btn--s */
font-family: var(--font-primary);
font-size: var(--text-s);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-s);
/* Estilo outline dark */
background-color: var(--color-bg-transparent) !important;
color: var(--color-text-on-light) !important;
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
/* Interacciones */
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
/* Espaciado */
margin-top: var(--margin-l);
}
/** MODIFICADOR: Reset hover - Negro como btn__outline--dark **/
.woo__add-product .reset_variations:hover {
background-color: var(--color-bg-dark-alt) !important;
color: var(--color-text-on-dark) !important;
border-color: var(--color-border-dark);
box-shadow: var(--button-shadow-hover);
transform: none !important;
}
/** MODIFICADOR: Reset active **/
.woo__add-product .reset_variations:active {
box-shadow: var(--button-shadow-pressed);
transform: none;
}
/** MODIFICADOR: Reset focus **/
.woo__add-product .reset_variations:focus,
.woo__add-product .reset_variations:focus-visible {
outline: none;
background-color: var(--color-bg-light-alt) !important;
color: var(--color-text-on-light) !important;
border-color: var(--color-border-dark) !important;
box-shadow: var(--shadow-container-s) !important;
}
/*** FIX: ALTURA DEL TBODY EN TABLA DE VARIACIONES ***/
/* Reset agresivo de alturas para tbody */
.woo__add-product table.variations {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.woo__add-product table.variations tbody {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
line-height: normal !important;
}
/* Eliminar pseudo-elementos que puedan causar altura */
.woo__add-product table.variations::before,
.woo__add-product table.variations::after,
.woo__add-product table.variations tbody::before,
.woo__add-product table.variations tbody::after {
content: none !important;
display: none !important;
height: 0 !important;
}
/* Asegurar que no hay padding o margin ocultos */
.woo__add-product table.variations tbody {
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* Si hay contenido invisible causando altura */
.woo__add-product table.variations tbody > *:empty {
display: none !important;
}
/** ELEMENTO: CANTIDAD Y BOTÓN AÑADIR AL CARRITO **/
/** MODIFICADOR: Caja **/
.woo__add-product .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled,
.woo__add-product .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled {
display: inline-flex;
}
/* Forzar flex row en el contenedor de cantidad y botón */
.woo__add-product .single_variation_wrap .woocommerce-variation-add-to-cart,
.woo__add-product .single_variation_wrap .variations_button {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
}
/* Asegurar que quantity no tenga float */
.woo__add-product .single_variation_wrap .quantity {
float: none !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
/* Ajustar el botón para que crezca si es necesario */
.woo__add-product .single_variation_wrap .single_add_to_cart_button {
flex: 0 1 auto !important;
}
/** MODIFICADOR: Contenedor de cantidad **/
.woo__add-product .woocommerce div.product form.cart div.quantity {
float: left;
margin: var(--margin-none) var(--margin-s) var(--margin-none) var(--margin-none);
}
/* Forzar el formulario a ocupar todo el ancho disponible */
/* Para productos VARIABLES - mantener column */
.woo__add-product .variations_form .woocommerce div.product form.cart {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch;
justify-content: flex-start;
}
/* Para productos SIMPLES (sin variaciones) - usar row */
.woo__add-product form.cart:not(.variations_form) {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
flex-direction: row !important; /* Row para productos simples */
flex-wrap: nowrap !important;
align-items: center;
justify-content: flex-start;
}
/* El contenedor de variaciones siempre en row */
.woo__add-product .woocommerce-variation-add-to-cart,
.woo__add-product .variations_button {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
}
/* Quitar cualquier restricción de ancho en el summary */
.woo__add-product .woocommerce div.product div.summary {
width: 100% !important;
max-width: 100% !important;
}
/* Ajustar la cantidad sin márgenes */
.woocommerce div.product form.cart div.quantity {
float: none !important;
margin: var(--margin-none) var(--margin-none) var(--margin-none) var(--margin-none) !important;
margin-right: var(--margin-none) !important;
flex-shrink: 0;
}
/* Botón con ancho automático */
.woo__add-product button.single_add_to_cart_button.button.alt {
flex: 0 1 auto !important; /* No crecer, puede encogerse, ancho automático */
width: auto !important;
min-width: 190px !important; /* Mantener el mínimo original */
max-width: 430px !important; /* Mantener el máximo original */
margin-inline-start: var(--margin-m) !important;
}
/** MODIFICADOR: Input de cantidad **/
.woo__add-product .woocommerce .quantity .qty,
.woo__add-product input.qty,
.woo__add-product input.input-text.qty,
.woo__add-product input.input-text.qty.text {
/* Estructura */
min-width: 4.5em;
min-height: 56px;
text-align: center;
/* Apariencia consistente con inputs del sistema */
padding: var(--btn-padding-y-l) var(--btn-padding-x-l);
font-family: var(--font-primary);
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-s);
/* Estilo visual */
background-color: var(--color-bg-light);
color: var(--color-text-on-light);
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
/* Interacciones */
transition: all 0.3s ease;
}
/** MODIFICADOR: Input cantidad hover **/
.woo__add-product .woocommerce .quantity .qty:hover,
.woo__add-product input.qty:hover,
.woo__add-product input.input-text.qty:hover,
.woo__add-product input.input-text.qty.text:hover {
background-color: var(--color-bg-light-alt);
border-color: var(--color-border-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-container-s);
transform: none;
}
/** MODIFICADOR: Input cantidad focus **/
.woo__add-product .woocommerce .quantity .qty:focus,
.woo__add-product input.qty:focus,
.woo__add-product input.input-text.qty:focus,
.woo__add-product input.input-text.qty.text:focus {
outline: none;
box-shadow: 0 0 0 var(--border-m) var(--color-border-dark);
}
/*** ELEMENTO: BOTÓN AÑADIR AL CARRITO ***/
/** Base del botón - Estilo solid por defecto **/
.woo__add-product button.single_add_to_cart_button.button.alt {
/* Reset y estructura base */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gap-s);
text-align: center;
text-decoration: none;
position: relative;
/* Dimensiones btn--l */
min-width: 190px;
max-width: 430px;
min-height: 56px;
padding: var(--btn-padding-y-l) var(--btn-padding-x-l);
padding-left: calc(var(--btn-padding-x-l) + var(--icon-l) + var(--gap-s));
/* Tipografía */
font-family: var(--font-primary);
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-s);
/* Estilo solid neutro por defecto */
background-color: var(--color-bg-dark-alt);
color: var(--color-text-on-dark) !important;
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
/* Interacciones */
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.quantity input {
margin: 0px !important;
}
/** Icono del carrito - Pseudo elemento del botón **/
.woo__add-product button.single_add_to_cart_button.button.alt::before {
content: '';
position: absolute;
left: var(--btn-padding-x-l);
top: 50%;
transform: translateY(-50%);
width: var(--icon-l);
height: var(--icon-l);
/* Usamos el SVG como máscara */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M239.71,74.14l-25.64,92.28A24.06,24.06,0,0,1,191,184H92.16A24.06,24.06,0,0,1,69,166.42L33.92,40H16a8,8,0,0,1,0-16H40a8,8,0,0,1,7.71,5.86L57.19,64H232a8,8,0,0,1,7.71,10.14ZM88,200a16,16,0,1,0,16,16A16,16,0,0,0,88,200Zm104,0a16,16,0,1,0,16,16A16,16,0,0,0,192,200Z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M239.71,74.14l-25.64,92.28A24.06,24.06,0,0,1,191,184H92.16A24.06,24.06,0,0,1,69,166.42L33.92,40H16a8,8,0,0,1,0-16H40a8,8,0,0,1,7.71,5.86L57.19,64H232a8,8,0,0,1,7.71,10.14ZM88,200a16,16,0,1,0,16,16A16,16,0,0,0,88,200Zm104,0a16,16,0,1,0,16,16A16,16,0,0,0,192,200Z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
/* Aquí decides el color */
background-color: var(--color-icon-on-dark);
transition: background-color 0.3s ease;
}
/** MODIFICADOR: Hover base **/
.woo__add-product button.single_add_to_cart_button.button.alt:hover {
background-color: var(--color-bg-dark-hover);
color: var(--color-text-on-light);
box-shadow: var(--button-shadow-hover);
transform: none;
}
.woo__add-product button.single_add_to_cart_button.button.alt:hover::before {
background-color: var(--color-icon-on-light);
}
/** MODIFICADOR: Active **/
.woo__add-product button.single_add_to_cart_button.button.alt:active {
box-shadow: var(--button-shadow-pressed);
transform: none;
}
/** MODIFICADOR: Focus **/
.woo__add-product button.single_add_to_cart_button.button.alt:focus,
.woo__add-product button.single_add_to_cart_button.button.alt:focus-visible {
outline: none;
box-shadow: var(--shadow-container-s);
}
/** MODIFICADOR: ESTADO DEL BOTÓN DESACTIVADO **/
.woo__add-product button.single_add_to_cart_button.button.alt.disabled,
.woo__add-product button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed,
.woo__add-product button.single_add_to_cart_button.button.alt:disabled {
/* Estilo disabled */
background-color: var(--color-bg-light-gray) !important;
color: var(--color-text-gray) !important;
border-color: var(--color-border-light-gray) !important;
cursor: not-allowed;
opacity: var(--opacity-60);
}
/* Estilo disabled icono */
.woo__add-product button.single_add_to_cart_button.button.alt.disabled::before,
.woo__add-product button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed::before,
.woo__add-product button.single_add_to_cart_button.button.alt:disabled::before {
background-color: var(--color-icon-gray) !important; /* icono gris */
}
/* Hover deshabilitado - sin efecto */
.woo__add-product button.single_add_to_cart_button.button.alt.disabled:hover,
.woo__add-product button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed:hover,
.woo__add-product button.single_add_to_cart_button.button.alt:disabled:hover {
background-color: var(--color-bg-light-gray) !important;
color: var(--color-text-on-light) !important;
border-color: var(--color-border-light-gray) !important;
box-shadow: none;
transform: none;
}
/* Hover deshabilitado - Icono sin efecto */
.woo__add-product button.single_add_to_cart_button.button.alt.disabled:hover::before,
.woo__add-product button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed:hover::before,
.woo__add-product button.single_add_to_cart_button.button.alt:disabled:hover::before {
background-color: var(--color-text-on-light) !important; /* mismo color que disabled */
}
/** MODIFICADOR: COLORES **/
/** COLOR PRIMARY **/
.color--primary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled) {
background-color: var(--color-bg-primary);
color: var(--color-text-on-primary) !important;
border-color: var(--color-border-dark);
}
.color--primary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled):hover {
background-color: var(--color-bg-primary-hover) !important;
color: var(--color-text-on-primary) !important;
}
/** ICON COLOR PRIMARY **/
.color--primary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled)::before {
background-color: var(--color-icon-on-primary) !important;
}
.color--primary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled):hover::before {
background-color: var(--color-icon-on-primary) !important;
}
/** COLOR SECONDARY **/
.color--secondary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled) {
background-color: var(--color-bg-secondary);
color: var(--color-text-on-secondary) !important;
border-color: var(--color-border-dark);
}
.color--secondary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled):hover {
background-color: var(--color-bg-secondary-hover) !important;
color: var(--color-text-on-secondary) !important;
}
/** ICON COLOR SECONDARY **/
.color--secondary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled)::before {
background-color: var(--color-icon-on-secondary) !important;
}
.color--secondary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled):hover::before {
background-color: var(--color-icon-on-secondary) !important;
}
/** COLOR TERTIARY **/
.color--tertiary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled) {
background-color: var(--color-bg-tertiary);
color: var(--color-text-on-tertiary) !important;
border-color: var(--color-border-dark);
}
.color--tertiary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled):hover {
background-color: var(--color-bg-tertiary-hover) !important;
color: var(--color-text-on-tertiary) !important;
}
/** ICON COLOR TERTIARY **/
.color--tertiary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled)::before {
background-color: var(--color-icon-on-tertiary) !important;
}
.color--tertiary .woo__add-product button.single_add_to_cart_button.button.alt:not(:disabled):not(.disabled):hover::before {
background-color: var(--color-icon-on-tertiary) !important;
}
/** Focus para colores **/
.color--primary .woo__add-product .woocommerce .quantity .qty:focus {
box-shadow: 0 0 0 var(--border-m) var(--color-border-primary);
}
.color--secondary .woo__add-product .woocommerce .quantity .qty:focus {
box-shadow: 0 0 0 var(--border-m) var(--color-border-secondary);
}
.color--tertiary .woo__add-product .woocommerce .quantity .qty:focus {
box-shadow: 0 0 0 var(--border-m) var(--color-border-tertiary);
}
/* Caja de mensajes WooCommerce */
.woocommerce-message {
padding: var(--padding-m) var(--padding-xl) var(--padding-m) calc(var(--padding-xl) * 2);
margin: 0 0 var(--margin-l);
position: relative;
background-color: var(--color-bg-light-alt);
color: var(--color-text-on-light);
border-top: var(--border-l) solid var(--color-border-primary);
border-top-color: var(--color-border-primary) !important;
border-radius: var(--radius-s);
font-family: var(--font-primary);
font-size: var(--text-l);
}
/* Botón dentro del mensaje */
.woocommerce-message a.button.wc-forward {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: var(--margin-l);
min-height: 44px;
min-width: 72px;
padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
border-radius: var(--full-radius);
border: var(--border-s) solid var(--color-border-dark);
background-color: var(--color-bg-dark-alt);
color: var(--color-text-on-dark) !important;
font-family: var(--font-primary);
font-weight: var(--font-weight-regular);
font-size: var(--text-m);
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Hover del botón */
.woocommerce-message a.button.wc-forward:hover {
background-color: var(--color-bg-dark-hover);
color: var(--color-text-on-dark) !important;
border-color: var(--color-border-dark);
transform: none;
}
/**** MATERIAL RELACIONADO (.material-relacionado) ****/
.material-relacionado {
width: var(--percent-100);
}
.material-relacionado__grid {
display: grid;
gap: var(--gap-l);
grid-template-columns: 3fr;
}
/*=================================================================
BLOQUE: WOOCOMMERCE CROSS-SELL PRODUCT GRID (.woo__cross-sell)
=================================================================*/
/** BASE: Reset de lista **/
.woo__cross-sell ul.products {
list-style: none;
padding: var(--padding-none);
margin: var(--margin-none);
}
/** ELEMENTO: Tarjeta de producto individual con efecto bounce **/
.woo__cross-sell ul.products li.product {
position: relative;
display: flex !important;
flex-direction: column !important;
justify-content: space-around !important;
background-color: var(--color-bg-light-alt);
border-radius: var(--radius-m);
padding: var(--padding-none);
box-shadow: var(--shadow-container-s);
transform: translateY(0);
transition: transform 1.8s ease,
box-shadow 1.8s ease;
overflow: hidden;
}
/** MODIFICADOR: Hover bounce en tarjeta **/
.woo__cross-sell ul.products li.product:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-container-m) !important;
}
/** ELEMENTO: Link contenedor del producto **/
.woo__cross-sell ul.products li.product > a.woocommerce-LoopProduct-link {
display: flex;
flex-direction: column;
padding: var(--padding-l);
text-decoration: none;
color: inherit;
}
/** ELEMENTO: Imagen del producto **/
.woo__cross-sell ul.products li.product img {
width: var(--percent-100);
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center center;
margin-bottom: var(--margin-l);
border-radius: var(--radius-s);
}
/** ELEMENTO: Título del producto (h3) **/
.woo__cross-sell h3 {
color: var(--color-text-on-light);
font-family: var(--font-primary);
font-size: var(--text-l) !important;
font-weight: var(--font-weight-semi-bold) !important;
line-height: var(--lh-text-m) !important;
margin: var(--margin-none) var(--margin-none) var(--margin-s);
min-height: calc(var(--lh-text-l) * 2);
}
/** ELEMENTO: Precio del producto **/
.woo__cross-sell ul.products li.product .price {
font-family: var(--font-primary);
font-size: var(--text-m);
font-weight: var(--font-weight-semi-bold);
line-height: var(--lh-text-m);
color: var(--color-text-on-light);
margin-bottom: var(--margin-l);
}
/** ELEMENTO: Precio con rango **/
.woo__cross-sell ul.products li.product .price .woocommerce-Price-amount {
color: var(--color-text-on-light);
}
/** ELEMENTO: Precio tachado **/
.woo__cross-sell ul.products li.product .price del .woocommerce-Price-amount {
font-weight: var(--font-weight-regular) !important;
}
/*=================================================================
BOTÓN PRODUCTOS SIMPLES - "Añadir al carrito" con icono
=================================================================*/
/** BOTÓN SIMPLE: Outline dark con icono de carrito - btn--l **/
.woo__cross-sell ul.products li.product .button.product_type_simple.add_to_cart_button {
/* Reset y estructura */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gap-s);
width: auto;
position: relative;
text-decoration: none;
/* Dimensiones btn--l */
min-width: 190px;
max-width: max-content;
min-height: 56px;
padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
padding-left: calc(var(--btn-padding-x-s) + var(--icon-l) + var(--gap-s));
/* Tipografía */
font-family: var(--font-primary);
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-s);
/* Estilo OUTLINE DARK */
background-color: var(--color-bg-transparent);
color: var(--color-text-on-light) !important;
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
/* Transiciones */
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/** ICONO: Carrito para productos simples - POSICIÓN FIJA **/
.woo__cross-sell ul.products li.product .button.product_type_simple.add_to_cart_button::before {
font-family: 'phosphor-ecommerce';
content: '\6c';
position: absolute;
left: var(--btn-padding-x-s);
top: 50%;
transform: translateY(-50%); /* Este transform NO debe cambiar */
font-size: var(--icon-l);
line-height: var(--lh-text-s) !important;
color: var(--color-icon-on-light);
transition: color 0.3s ease; /* Solo transición de color, no de transform */
}
/** HOVER: Tertiary para productos simples **/
.woo__cross-sell ul.products li.product .button.product_type_simple.add_to_cart_button:hover {
background-color: var(--color-bg-tertiary);
color: var(--color-text-on-tertiary) !important;
border-color: var(--color-border-dark);
box-shadow: var(--button-shadow-hover);
transform: none;
}
.woo__cross-sell ul.products li.product .button.product_type_simple.add_to_cart_button:hover::before {
color: var(--color-icon-on-tertiary);
transform: translateY(-50%); /* Mantener posición fija */
}
/** ANIMACIÓN: Icono cuando hay hover en la tarjeta **/
@keyframes card-slide-x-icon {
0% { transform: translateY(-50%) translateX(0px); }
50% { transform: translateY(-50%) translateX(3px); }
100% { transform: translateY(-50%) translateX(0px); }
}
.woo__cross-sell ul.products li.product:hover .button.product_type_simple.add_to_cart_button::before {
animation: card-slide-x-icon 1.2s ease-in-out infinite !important;
}
/** ACTIVE: Productos simples **/
.woo__cross-sell ul.products li.product .button.product_type_simple.add_to_cart_button:active {
box-shadow: var(--button-shadow-pressed);
transform: none;
}
/*=================================================================
BOTÓN PRODUCTOS VARIABLES - "Seleccionar opciones" simple underline
=================================================================*/
/** BOTÓN VARIABLE: Solo underline **/
.woo__cross-sell ul.products li.product .button.product_type_variable.add_to_cart_button {
/* Reset y estructura */
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: max-content;
position: relative;
/* Sin padding ni altura mínima - más simple */
padding: var(--padding-none);
min-height: 32px;
/* Tipografía */
font-family: var(--font-primary);
font-size: var(--text-m);
font-weight: var(--font-weight-medium);
line-height: var(--lh-text-s);
/* Solo underline */
background-color: transparent;
color: var(--color-text-on-light) !important;
border: none;
border-bottom: var(--border-s) solid var(--color-border-dark);
border-radius: 0;
text-decoration: none;
/* Sin transiciones ni hover */
cursor: pointer;
}
/** NO HOVER para productos variables **/
.woo__cross-sell ul.products li.product .button.product_type_variable.add_to_cart_button:hover {
background-color: transparent;
color: var(--color-text-on-light) !important;
border-bottom: var(--border-s) solid var(--color-border-dark);
}
/** Posición absoluta para ambos tipos de botón **/
.woo__cross-sell ul.products li.product .button.add_to_cart_button {
position: absolute;
bottom: var(--padding-l);
left: var(--padding-l);
right: var(--padding-l);
width: calc(var(--percent-100) - (var(--padding-l) * 2));
}
/** Ocultar span de accesibilidad **/
.woo__cross-sell span[id^="woocommerce_loop_add_to_cart_link_describedby"] {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
/** Ocultar "Ver carrito" después de añadir **/
.woo__cross-sell .added_to_cart.wc-forward {
display: none;
}
/** Carrito de compras, ajustes finos **/
.is-medium table.wc-block-cart-items .wc-block-cart-items__row, .is-mobile table.wc-block-cart-items .wc-block-cart-items__row, .is-small table.wc-block-cart-items .wc-block-cart-items__row {
display: flex !important;
}
.woocommerce-mini-cart .elementor-menu-cart__product.woocommerce-cart-form__cart-item.cart_item {
display: flex !important;
flex-direction: column;
}
.woocommerce-mini-cart .elementor-menu-cart__product-image.product-thumbnail {
max-width: 150px !important;
}
/*=================================================================
BLOQUE: RESULTADOS DE PRODUCTOS (.products-results)
Reutiliza la estructura de .courses-results pero para WooCommerce
=================================================================*/
/* ELEMENTO: Contenedor principal de resultados de productos */
.products-results {
width: var(--percent-100);
margin-top: var(--margin-xl);
}
/* ELEMENTO: Grid de productos - Mobile First Base */
.products-results__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap-xl);
width: var(--percent-100);
}
/* ELEMENTO: Mensaje de estado vacío */
.products-results__empty {
width: var(--percent-100);
padding: var(--padding-xxl) var(--padding-l);
text-align: center;
}
.products-results__empty p {
font-size: var(--text-l);
color: var(--color-text-on-light);
margin: var(--margin-none);
}
/* ELEMENTO: Mensaje de carga */
.products-results__loading {
width: var(--percent-100);
padding: var(--padding-xxl) var(--padding-l);
text-align: center;
}
.products-results__loading p {
font-size: var(--text-l);
color: var(--color-text-on-light);
font-weight: var(--font-weight-medium);
}
/*=================================================================
WOOCOMMERCE - Páginas de flujo de compra
=================================================================*/
/** Sección de páginas de Woocommerce - post-43: carrito - post-44: finalizar compra - post-45: mi cuenta **/
.site-main.post-43,
.site-main.post-44,
.site-main.post-45 {
padding: var(--section-padding-y) var(--section-padding-x);
margin: auto !important;
/*display: flex;
justify-content: center;
align-content: center;
flex-direction: column;*/
}
.site-main.post-43 h2,
.site-main.post-44 h2,
.site-main.post-45 h2 {
font-size: var(--text-2xl) !important;
font-weight: var(--font-weight-semi-bold) !important;
line-height: var(--lh-text-s) !important;
margin-bottom: var(--margin-l) !important;
}
/** POST-43: MI CARRITO **/
/* Estilo base btn solid tertiary L */
.wc-block-components-button:not(.is-link) {
/* Base btn L */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--gap-m);
min-height: 56px;
max-height: 56px;
padding: var(--btn-padding-y-l) var(--btn-padding-x-l) !important;
font-family: var(--font-primary);
font-size: var(--text-l) !important;
font-weight: var(--font-weight-regular) !important;
text-align: center;
text-decoration: none;
cursor: pointer;
/* Full width */
width: 100% !important;
/* Transiciones */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
/* Solid Tertiary */
background-color: var(--color-bg-tertiary) !important;
color: var(--color-text-on-tertiary) !important;
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius) !important;
}
/* Añadir ícono Phosphor a la IZQUIERDA */
.wc-block-components-button:not(.is-link)::before {
content: '\67';
font-family: 'phosphor-ecommerce';
font-size: var(--icon-l);
color: var(--color-icon-on-tertiary);
transition: transform 0.3s ease;
}
/* Hover */
.wc-block-components-button:not(.is-link):hover {
background-color: var(--color-bg-tertiary-hover) !important;
color: var(--color-text-on-tertiary) !important;
transform: translateY(-2px);
box-shadow: var(--button-shadow-hover);
}
/* Animar ícono en hover */
.wc-block-components-button:not(.is-link):hover::before {
animation: slide-x 1.2s ease-in-out infinite;
}
/* Active */
.wc-block-components-button:not(.is-link):active {
transform: translateY(0);
box-shadow: var(--button-shadow-pressed);
}
/* Active - detener animación del ícono */
.wc-block-components-button:not(.is-link):active::before {
transform: none;
}
/* Focus */
.wc-block-components-button:not(.is-link):focus-visible {
outline: 2px solid var(--color-border-tertiary);
outline-offset: 2px;
}
/* Disabled */
.wc-block-components-button:not(.is-link):disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Carrito vacío */
/* Ocultar h2 que está dentro de empty-cart-block */
.wp-block-woocommerce-empty-cart-block h2 {
display: none !important;
}
/* Pero mostrar el h2 que SÍ tiene esas clases */
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading.has-text-align-center.with-empty-cart-icon.wc-block-cart__empty-cart__title {
display: block !important;
}
/* Desaparece el separador y el grid de productos */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.has-alpha-channel-opacity.is-style-dots,
.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-product-new.wp-block-woocommerce-product-new.wc-block-product-new {
display: none !important;
}
/* Columna izquierda */
.wp-block-woocommerce-cart.alignwide {
margin-inline: 0px;
}
/* Cabecero (mostrar la palabra "detalles") */
table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-product {
visibility: visible !important;
}
/* Ocultar la columna de "total" en mobile, porque es repetitiva */
td.wc-block-cart-item__total {
display: none;
}
/* Enlaces */
a.wc-block-components-product-name {
color: var(--color-accent-on-light) !important;
}
/* Botón eliminar artículo */
button.wc-block-cart-item__remove-link {
font-size: var(--text-xs) !important;
color: var(--color-accent-on-light) !important;
font-weight: var(--font-weight-semi-bold) !important;
}
/* Tags de "Ahorra" */
.wc-block-components-product-badge {
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius) !important;
font-size: var(--text-xxs) !important;
font-weight: var(--font-weight-semi-bold) !important;
padding: var(--padding-s) var(--padding-l) !important;
background: var(--color-bg-dark-alt);
color: var(--color-text-on-dark);
}
/* Botonera de cantidad de productos */
.wc-block-components-quantity-selector:after {
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius) !important;
}
.wc-block-components-quantity-selector {
border-radius: var(--full-radius) !important;
border: var(--border-s) solid var(--color-border-dark) !important;
}
.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--plus {
border-radius: 0 999px 999px 0 !important;
}
.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--minus {
border-radius: 999px 0 0 999px !important;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
color: var(--color-icon-dark) !important;
font-weight: var(--font-weight-bold) !important;
}
/* Botón del cupón */
.wc-block-components-totals-coupon__button {
/* Base btn L */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 52px;
padding: var(--btn-padding-y-l) var(--btn-padding-x-l) !important;
font-family: var(--font-primary);
font-size: var(--text-l);
font-weight: var(--font-weight-regular) !important;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
/* Solid Dark-Alt */
background-color: var(--color-bg-dark-alt) !important;
color: var(--color-text-on-dark) !important;
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius) !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input {
flex: 3 1 0px !important;
}
/* Hover */
.wc-block-components-totals-coupon__button:hover:not(:disabled) {
background-color: var(--color-bg-dark-hover) !important;
transform: translateY(-2px);
}
/* Active */
.wc-block-components-totals-coupon__button:active:not(:disabled) {
transform: translateY(1px);
}
/* Estado deshabilitado */
.wc-block-components-totals-coupon__button:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Ajustes del formulario para alineación */
.wc-block-components-totals-coupon__form {
display: flex;
gap: var(--gap-m);
align-items: stretch;
}
/* Input del cupón para que coincida altura */
.wc-block-components-totals-coupon__input {
flex: 1;
}
button.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained {
min-height: 42px !important;
height: 53px;
}
/* Botón de volver al carrito */
a.wc-block-components-checkout-return-to-cart-button {
width: 100%;
display: flex;
justify-content: center;
color: var(--color-text-on-light);
}
.wc-block-components-checkout-return-to-cart-button svg {
left: 70px !important;
}
/** POST-44: FINALIZAR COMPRA **/
/* Enlaces */
.wc-block-components-checkbox__label a {
color: var(--color-accent-on-light);
}
/* Inputs */
.wc-block-components-address-form label {
padding-left: calc(var(--padding-xl) - 2px) !important;
}
.wc-block-components-address-form__email label {
padding-left: calc(var(--padding-xl) + 2px) !important;
}
.wc-block-components-address-form__email input#email {
border-radius: var(--full-radius);
padding: var(--padding-m) calc(var(--padding-xl) + 4px) !important;
margin-top: 2px !important;
}
label.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked.wc-block-components-radio-control__option--checked-option-highlighted {
border-radius: var(--full-radius);
padding: var(--padding-l) var(--padding-xl) var(--padding-l) 50px !important;
}
.wc-block-components-radio-control .wc-block-components-radio-control__input {
top: 47% !important;
}
.wc-block-components-radio-control--highlight-checked:after {
border: 0px solid hsla(0, 0%, 0%, 0) !important;
border: none !important;
}
/* Caja de dirección */
.wc-block-components-address-card,
textarea.wc-block-components-textarea,
.wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
border-radius: var(--radius-m) !important;
}
span.wc-block-components-checkbox__label {
font-size: var(--text-m);
}
.wc-block-components-address-card [type=button] {
border-radius: var(--full-radius);
text-decoration: underline;
color: var(--color-accent-on-light);
font-weight: var(--font-weight-semi-bold);
}
.wc-block-components-address-card [type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
background-color: var(--color-bg-dark-alt);
color: var(--color-text-on-dark);
text-decoration: none !important;
border-radius: var(--full-radius);
}
/* Columna de total */
.wp-block-woocommerce-checkout-order-summary-block {
border-radius: var(--radius-m) !important;
margin-bottom: var(--margin-m);
}
.wc-block-components-order-summary-item__description {
width: 100%;
}
.wc-block-components-order-summary-item__total-price {
display: none;
}
h3.wc-block-components-product-name {
font-size: var(--text-l) !important;
}
.wc-block-components-product-metadata__description p {
font-size: var(--text-m) !important;
}
/* IVA */
p.wc-block-components-totals-footer-item-tax {
font-size: var(--text-m) !important;
}
p.wc-block-components-checkout-step__description {
font-size: var(--text-m) !important;
}
/** POST-45: MI CUENTA **/
.woocommerce-MyAccount-content address {
font-size: var(--text-m) !important;
}
.woocommerce-account .addresses .title .edit {
float: left;
font-size: var(--text-l) !important;
margin-bottom: var(--margin-s) !important;
}
.site-main.post-45 .woocommerce {
padding: var(--padding-6xl);
border: var(--border-none);
border-radius: var(--radius-m);
background-color: var(--color-bg-light-alt);
margin: var(--margin-none);
}
.site-main.post-45 .woocommerce-info {
padding: var(--padding-none);
}
.woocommerce form.login {
padding: var(--padding-none);
border: var(--border-none);
border-radius: var(--radius-none);
margin: var(--margin-none);
}
/* Labels - TEXTO NEGRO */
.woocommerce-form-row label, .form-row label {
color: var(--color-text-on-light);
font-weight: var(--font-weight-medium);
line-height: var(--lh-text-m) !important;
margin-bottom: var(--margin-s);
}
/* INPUTS y SELECTS */
.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
width: 100% !Important;
}
.woocommerce-MyAccount-content fieldset {
margin: var(--margin-l) var(--margin-none) !important;
padding: var(--padding-2xl) !important;
border-radius: var(--radius-m) !important;
background: var(--color-bg-light) !important;
}
/* Icono de mostrar/ocultar password */
.woocommerce form .show-password-input::before, .woocommerce-page form .show-password-input::before {
margin-top: -8px !important;
}
p.form-row {
display: flex !important;
flex-direction: column !important;
}
.woocommerce form .form-row .input-text, .woocommerce form .form-row select,
.woocommerce-address-fields .selection .select2-selection__rendered,
.wc-block-components-address-address-wrapper input,
.wc-block-components-address-address-wrapper select,
input#wc-block-components-totals-coupon__input-coupon {
padding: var(--padding-l) var(--padding-xl) !important;
margin-top: 2px;
}
.wc-block-components-text-input.wc-block-components-totals-coupon__input label {
padding-left: var(--padding-xl) !important;
margin-top: 2px !important;
}
.wc-block-components-text-input.wc-block-components-totals-coupon__input.is-active label {
margin-top: 0px !important;
}
.woocommerce-Input--text, .input-text, .woocommerce-address-fields .selection .select2-selection,
.wc-block-components-address-address-wrapper input,
.wc-block-components-address-address-wrapper select,
input#wc-block-components-totals-coupon__input-coupon,
.woo__checkout .select2-selection.select2-selection--single {
min-height: 52px;
font-family: var(--font-primary) !important;
font-size: var(--text-m) !important;
color: var(--color-text-on-light) !important;
background-color: var(--color-bg-light) !important;
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius) !important;
transition: var(--transition-fast) !important;
margin-bottom: var(--margin-s) !important;
}
.woo__checkout .select2-selection.select2-selection--single {
padding: var(--btn-padding-y-s) var(--btn-padding-x-m);
}
span#account_display_name_description em {
font-size: var(--text-m) !important;
}
/* Flecha del select */
.select2-container .select2-selection--single .select2-selection__arrow b {
border: none;
display: block;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23383838' viewBox='0 0 256 256'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
background-size: 16px;
width: 16px;
height: 16px;
position: absolute;
margin: -6px 0 0 !important;
}
/* Placeholder del select */
/* Contenedor principal del select2 */
.select2-container--default .select2-selection--single {
display: flex;
align-items: center;
min-height: 48px; /* Ajusta según tu necesidad */
}
/* Texto renderizado */
.select2-container--default .select2-selection--single .select2-selection__rendered {
display: flex;
align-items: center;
padding: 0 var(--padding-l);
line-height: normal;
}
/* Flecha */
.select2-container--default .select2-selection--single .select2-selection__arrow {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
top: 0;
right: var(--padding-l);
}
/* Ajustar el b dentro de arrow */
.select2-container .select2-selection--single .select2-selection__arrow b {
position: static;
margin: 0;
transform: none;
}
/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
display: flex;
align-items: center;
}
.woocommerce-Input--text:focus,
.input-text:focus {
outline: none;
border-color: var(--color-border-dark);
box-shadow: none;
}
/* Botón mostrar contraseña */
.show-password-input {
background: none;
border: none;
color: var(--color-text-gray);
cursor: pointer;
transition: var(--transition-fast);
}
.show-password-input:hover {
color: var(--color-text-on-light);
}
/* Checkbox recuérdame */
.woocommerce-form-login__rememberme {
color: var(--color-text-on-light);
font-weight: var(--font-weight-regular);
cursor: pointer;
}
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
font-size: var(--text-m);
}
.woocommerce-form__input-checkbox {
accent-color: var(--color-black-1000);
cursor: pointer;
}
/* Caja de dashboard */
.woocommerce-info, .woocommerce-message, .woocommerce-error {
display: flex;
flex-direction: column;
gap: var(--gap-m);
}
.woocommerce-info, .woocommerce-message, .woocommerce-error {
padding-top: var(--padding-l) !important;
padding: var(--padding-l) !important;
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--radius-m);
font-size: var(--text-l);
line-height: var(--lh-text-m)
}
.woocommerce-error {
border-top: solid var(--border-xl) var(--color-error);
border: var(--border-s) solid var(--color-border-dark) !important;
background: var(--color-bg-light) !important;
}
.woocommerce-error li {
padding: var(--padding-none) !important;
margin-bottom: var(--margin-none) !important;
}
.woocommerce-info, .woocommerce-message {
border: var(--border-s) solid var(--color-border-dark) !important;
border-top: solid var(--border-2xl) var(--color-border-dark) !important;
background: var(--color-bg-light) !important;
}
.color--primary .woocommerce-info, .color--primary .woocommerce-message {
border-top: solid var(--border-2xl) var(--color-border-primary) !important;
}
.color--secondary .woocommerce-info, .color--secondary .woocommerce-message {
border-top: solid var(--border-2xl) var(--color-border-secondary) !important;
}
.color--tertiary .woocommerce-info, .color--tertiary .woocommerce-message {
border-top: solid var(--border-2xl) var(--color-border-tertiary) !important;
}
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before {
display: none;
}
/* Botones dashbaord - BTN L SOLID DARK-ALT */
.woocommerce-button,
.woocommerce-form-login__submit,
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content button.woocommerce-Button,
.woocommerce-address-fields button {
/* Base btn L */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 52px;
padding: var(--btn-padding-y-l) var(--btn-padding-x-l) !important;
font-family: var(--font-primary);
font-size: var(--text-l);
font-weight: var(--font-weight-regular) !important;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
width: var(--percent-100);
max-width: var(--percent-100); /* Mobile full width */
/* Solid Dark-Alt */
background-color: var(--color-bg-dark-alt) !important;
color: var(--color-text-on-dark) !important;
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius) !important;
}
/* HOVER */
.woocommerce-button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content button.woocommerce-Button:hover,
.woocommerce-address-fields button:hover {
background-color: var(--color-bg-dark-hover) !important;
color: var(--color-text-on-dark) !important;
box-shadow: var(--button-shadow-hover) !important;
transform: none !important;
}
/* ACTIVE */
.woocommerce-button:active,
.woocommerce-form-login__submit:active,
.woocommerce-MyAccount-content a.button:active,
.woocommerce-MyAccount-content button.woocommerce-Button:active,
.woocommerce-address-fields button:active {
box-shadow: var(--button-shadow-pressed) !important;
transform: none !important;
}
/* FOCUS */
.woocommerce-button:focus,
.woocommerce-form-login__submit:focus,
.woocommerce-button:focus-visible,
.woocommerce-form-login__submit:focus-visible,
.woocommerce-MyAccount-content a.button:focus,
.woocommerce-MyAccount-content a.button:focus-visible,
.woocommerce-MyAccount-content button.woocommerce-Button:focus,
.woocommerce-MyAccount-content button.woocommerce-Button:focus-visible,
.woocommerce-address-fields button:focus,
.woocommerce-address-fields button:focus-visible {
outline: none;
box-shadow: var(--shadow-container-s);
}
/* Añadir flecha phosphor ANTES del texto */
.woocommerce-form-login__submit::before,
.woocommerce-MyAccount-content a.button::before,
.woocommerce-MyAccount-content button.woocommerce-Button::before,
.woocommerce-address-fields button::before {
font-family: 'phosphor-arrows';
content: '\7a';
font-size: var(--icon-l);
margin-right: var(--gap-s);
display: inline-block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Animación del icono en hover */
.woocommerce-form-login__submit:hover::before,
.woocommerce-MyAccount-content a.button:hover::before,
.woocommerce-MyAccount-content button.woocommerce-Button:hover::before,
.woocommerce-address-fields button:hover::before {
animation: slide-x 1.2s ease-in-out infinite;
}
/* LINK CONTRASEÑA OLVIDADA */
.woocommerce-LostPassword a {
color: var(--color-accent-on-light) !important;
}
.woocommerce-LostPassword a:hover {
color: var(--color-accent-on-light-hover) !important;
}
/* Screen reader text - Ocultar */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* MI CUENTA: Dashboard */
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding-left: 0;
}
/* Enlaces del dashboard */
.woocommerce-MyAccount-content a {
color: var(--color-accent-on-light) !important;
}
.woocommerce-MyAccount-content a:hover {
color: var(--color-accent-on-light-hover) !important;
}
/* Resetear bullets por defecto */
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding-left: 0;
}
/* Enlaces del dashboard */
.woocommerce-MyAccount-content a {
color: var(--color-accent-on-light) !important;
}
.woocommerce-MyAccount-content a:hover {
color: var(--color-accent-on-light-hover) !important;
}
/* Enlaces navegación y botón explorar - Estilo btn__ghost--dark */
.woocommerce-MyAccount-navigation-link a {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--gap-s);
background-color: var(--color-bg-transparent);
color: var(--color-text-on-light) !important;
fill: var(--color-icon-on-light) !important;
border: none;
padding-left: var(--padding-none);
padding-right: var(--padding-none);
padding-bottom: var(--space-xxs);
text-decoration: none;
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
transition: color 0.3s ease;
}
/* Flecha Phosphor */
.woocommerce-MyAccount-navigation-link a::before {
font-family: 'phosphor-arrows';
content: '\7a';
font-size: var(--icon-l);
color: var(--color-text-on-light);
display: inline-block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Línea ghost dark */
.woocommerce-MyAccount-navigation-link a::after {
content: '';
position: absolute;
left: var(--none);
bottom: -2px;
width: var(--percent-100);
height: 1px;
background-color: var(--color-bg-secondary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
/* Hover - igual que btn__ghost--dark */
.woocommerce-MyAccount-navigation-link a:hover {
color: var(--color-text-secondary) !important;
fill: var(--color-icon-secondary) !important;
box-shadow: none;
transform: none !important;
}
.woocommerce-MyAccount-navigation-link a:hover::before {
color: var(--color-text-secondary);
animation: slide-x 1.2s ease-in-out infinite;
}
.woocommerce-MyAccount-navigation-link a:hover::after {
transform: scaleX(1);
}
/* Link activo */
.woocommerce-MyAccount-navigation-link.is-active a {
color: var(--color-text-secondary) !important;
}
.woocommerce-MyAccount-navigation-link.is-active a::before {
color: var(--color-text-secondary);
}
.woocommerce-MyAccount-navigation-link.is-active a::after {
transform: scaleX(1);
background-color: var(--color-bg-secondary);
}
/* Espaciado entre items */
.woocommerce-MyAccount-navigation-link {
margin-bottom: var(--space-l);
}
/* Texto de los labels para cambiar contraseña */
label[for="password_current"],
label[for="password_1"],
label[for="password_2"] {
font-size: 0; /* Oculta el texto original */
}
label[for="password_current"]::before {
content: "Contraseña actual ";
font-size: var(--text-l); /* Restaura el tamaño */
}
label[for="password_current"]::after {
content: "(solo si quieres cambiarla)";
font-size: var(--text-m);
color: var(--color-text-on-light);
}
label[for="password_1"]::before {
content: "Nueva contraseña";
font-size: var(--text-l); /* Restaura el tamaño */
}
label[for="password_2"]::before {
content: "Confirmar nueva contraseña";
font-size: var(--text-l); /* Restaura el tamaño */
}
/* WOOCOMMERCE: Mini-Cart */
.woo__mini-cart .elementor-menu-cart__subtotal {
font-size: var(--text-xl) !important;
}
.woo__mini-cart .elementor-menu-cart__subtotal strong {
font-weight: var(--font-weight-semi-bold);
}
.woo__mini-cart span.quantity, .woo__mini-cart .elementor-menu-cart__product-remove {
color: var(--color-text-on-light) !important;
}
.woo__mini-cart .elementor-menu-cart__product-remove {
border: var(--border-s) solid var(--color-border-gray);
}
.woo__mini-cart .elementor-menu-cart__product-remove::before,
.woo__mini-cart .elementor-menu-cart__product-remove::after {
background: var(--color-bg-gray);
}
.woo__mini-cart .elementor-menu-cart__main {
width: 350px;
z-index: 999 !important;
}
.woo__mini-cart .elementor-menu-cart__product-image.product-thumbnail img {
border: var(--border-s) solid var(--color-border-light-gray);
border-radius: var(--radius-m);
}
.woo__mini-cart .elementor-menu-cart__product-name.product-name a,
.woo__mini-cart .elementor-menu-cart__product-image.product-thumbnail a {
color: var(--color-text-on-light) !important;
border: none !important;
border-radius: var(--radius-none) !important;
background: transparent !important;
padding: var(--padding-none) !important;
cursor: default !important;
}
.woo__mini-cart .elementor-menu-cart__product-name.product-name a:hover,
.woo__mini-cart .elementor-menu-cart__product-image.product-thumbnail a:hover {
border: none !important;
border-radius: var(--radius-none) !important;
background: transparent !important;
cursor: default !important;
box-shadow: none !important;
transform: none;
}
/* Botones - Ver Carrito */
.woo__mini-cart .elementor-menu-cart__footer-buttons a:first-child {
gap: var(--gap-s);
}
.woo__mini-cart .elementor-menu-cart__footer-buttons a:first-child::before {
font-family: 'phosphor-ecommerce';
content: '\6c';
font-size: var(--icon-l);
transition: transform 0.3s ease;
}
.woo__mini-cart .elementor-menu-cart__footer-buttons a:first-child:hover {
background: var(--color-bg-tertiary) !important;
}
.woo__mini-cart .elementor-menu-cart__footer-buttons a:first-child:hover::before {
animation: slide-x 1.2s ease-in-out infinite;
}
.added_to_cart.wc-forward {
background: var(--color-bg-dark-alt) !important;
color: var(--color-text-on-dark) !important;
}
/* Text area de notas */
textarea#order_comments {
border-radius: var(--radius-m) !important;
}
/* Botones - Finalizar compra */
.woo__mini-cart .elementor-menu-cart__footer-buttons a:last-child {
gap: var(--gap-s);
color: var(--color-icon-on-tertiary) !important;
}
.woo__mini-cart .elementor-menu-cart__footer-buttons a:last-child::before {
font-family: 'phosphor-ecommerce';
content: '\67';
font-size: var(--icon-l);
transition: transform 0.3s ease;
}
.woo__mini-cart .elementor-menu-cart__footer-buttons a:last-child {
background: var(--color-bg-tertiary) !important;
}
.woo__mini-cart .elementor-menu-cart__footer-buttons a:last-child .elementor-button-text {
color: var(--color-text-on-tertiary) !important;
}
.woo__mini-cart .elementor-menu-cart__footer-buttons a:last-child:hover::before {
animation: slide-x 1.2s ease-in-out infinite;
}
.woo__mini-cart .elementor-menu-cart__footer-buttons a:last-child:hover {
background: var(--color-bg-tertiary-hover) !important;
}
/* Tamaño de imagen de Redsys */
div#radio-control-wc-payment-method-options-redsys__content img,
.payment_box.payment_method_redsys img{
width: 120px;
}
/** WOOCOMMERCE: Segunda tabla de checkout **/
.woo__checkout th {
color: var(--color-text-on-light) !important;
}
.woo__checkout label {
font-size: var(--text-m);
color: var(--color-text-on-light) !important;
}
.woo__checkout span#select2-shipping_country-container,
.woo__checkout span#select2-shipping_state-container,
.woo__checkout span#select2-billing_state-container,
.woo__checkout span#select2-billing_country-container {
padding: var(--padding-none);
}
.woo__checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 7px !important;
}
.woo__checkout .e-checkout__order_review,
.woo__checkout .col-1,
.woo__checkout .shipping_address,
.woo__checkout .woocommerce-additional-fields,
.woo__checkout .e-coupon-box,
.woo__checkout .woocommerce-checkout-payment {
border-radius: var(--radius-m) !important;
}
.woo__checkout .elementor-widget-woocommerce-checkout-page a {
color: var(--color-accent-on-light);
text-decoration: underline !important;
}
.woo__checkout a.e-show-coupon-form {
font-size: var(--text-l);
}
.woo__checkout .woocommerce-terms-and-conditions-checkbox-text,
.woo__checkout .woocommerce-privacy-policy-text p,
.woo__checkout .message__messaging {
font-size: var(--text-s) !important;
}
/* Estilo base btn solid tertiary L */
.woo__checkout button#place_order {
/* Base btn L */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--gap-m);
min-height: 56px;
max-height: 56px;
padding: var(--btn-padding-y-l) var(--btn-padding-x-l) !important;
font-family: var(--font-primary);
font-size: var(--text-l) !important;
font-weight: var(--font-weight-regular) !important;
text-align: center;
text-decoration: none;
cursor: pointer;
/* Full width */
width: 100% !important;
/* Transiciones */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
/* Solid Tertiary */
background-color: var(--color-bg-tertiary) !important;
color: var(--color-text-on-tertiary) !important;
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius) !important;
}
/* Añadir ícono Phosphor a la IZQUIERDA */
.woo__checkout button#place_order::before {
content: '\67';
font-family: 'phosphor-ecommerce';
font-size: var(--icon-l);
color: var(--color-icon-on-tertiary);
transition: transform 0.3s ease;
}
/* Hover */
.woo__checkout button#place_order:hover {
background-color: var(--color-bg-tertiary-hover) !important;
color: var(--color-text-on-tertiary) !important;
transform: translateY(-2px);
box-shadow: var(--button-shadow-hover);
}
/* Animar ícono en hover */
.woo__checkout button#place_order:hover::before {
animation: slide-x 1.2s ease-in-out infinite;
}
/* Active */
.woo__checkout button#place_order:active {
transform: translateY(0);
box-shadow: var(--button-shadow-pressed);
}
/* Active - detener animación del ícono */
.woo__checkout button#place_order:active::before {
transform: none;
}
/* Focus */
.woo__checkout button#place_order:focus-visible {
outline: 2px solid var(--color-border-tertiary);
outline-offset: 2px;
}
/* Disabled */
.woo__checkout button#place_order:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Botón cupón */
.woo__checkout button.woocommerce-button.button.e-apply-coupon {
width: 100% !important;
font-size: var(--text-m) !important;
}
.woo__checkout .elementor-widget-woocommerce-checkout-page .woocommerce .coupon-container-grid {
gap: var(--gap-m) !important;
}
/*=================================================================
COMPONENTE: CALENDLY EMBED
=================================================================*/
/**
* Componente para embeber iframes de Calendly de forma responsive.
*
* Uso:
*
*
*
*/
/* Bloque: Contenedor del iframe */
.calendly-embed {
position: relative;
width: 100%;
/* Altura mínima fluida para móvil */
min-height: clamp(500px, 80vh, 700px);
overflow: hidden;
/* Espaciado usando variables del sistema (ajusta según tus variables) */
margin-block: var(--space-400, 2rem);
/* Border radius sutil */
border-radius: var(--radius-200, 8px);
/* Sombra opcional para dar profundidad */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
/* Elemento: El iframe en sí */
.calendly-embed__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* MODIFICADOR: Versión de ancho completo sin restricciones */
.calendly-embed--full-width {
max-width: none;
margin-inline: 0;
}
/* MODIFICADOR: Versión compacta (para sidebars o espacios reducidos) */
.calendly-embed--compact {
min-height: clamp(400px, 70vh, 600px);
margin-block: var(--space-300, 1.5rem);
}
/* LOADING STATE: Opcional - Indicador de carga */
.calendly-embed--loading {
background-color: var(--color-neutral-100, #f5f5f5);
background-image:
linear-gradient(
90deg,
rgba(var(--color-neutral-rgb, 200, 200, 200), 0) 0%,
rgba(var(--color-neutral-rgb, 200, 200, 200), 0.2) 50%,
rgba(var(--color-neutral-rgb, 200, 200, 200), 0) 100%
);
background-size: 200% 100%;
animation: loading-shimmer 1.5s infinite;
}
@keyframes loading-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/*=================================================================
COMPONENTE: CALENDLY ERROR MESSAGE
=================================================================*/
/* Mensaje de error cuando no hay URL configurada */
.calendly-error {
padding: var(--space-400, 1.5rem);
background-color: var(--color-primary-50, #f0f4f8);
border-radius: var(--radius-300, 12px);
margin-block: var(--space-400, 2rem);
text-align: center;
}
.calendly-error p {
margin: 0;
color: var(--color-text, #333);
font-size: var(--font-size-400, 1rem);
line-height: 1.6;
}
.calendly-error a {
color: var(--color-primary, #0066cc);
text-decoration: underline;
transition: color 0.2s ease;
}
.calendly-error a:hover {
color: var(--color-primary-700, #0052a3);
}
/*=================================================================
COMPONENTE: Modal Calendly (BEM + Mobile First)
=================================================================*/
/* Bloque: Overlay del modal */
.modal-calendly {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-m, 1rem);
}
/* Modificador: Modal activo */
.modal-calendly--active {
display: flex;
}
/* Elemento: Contenedor del modal */
.modal-calendly__container {
position: relative;
width: 100%;
max-width: 500px;
height: 90vh;
max-height: 700px;
background-color: var(--color-bg-light, #fff);
border-radius: var(--radius-m, 8px);
overflow: hidden;
box-shadow: var(--shadow-container-m, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
}
/* Elemento: Botón cerrar */
.modal-calendly__close {
position: absolute;
top: var(--space-s, 0.75rem);
right: var(--space-s, 0.75rem);
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.6);
color: var(--color-text-on-dark, #fff);
border: none;
border-radius: 50%;
cursor: pointer;
font-size: var(--text-xl, 1.5rem);
line-height: 1;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
.modal-calendly__close:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.modal-calendly__close:focus {
outline: 2px solid var(--color-bg-primary, #007bff);
outline-offset: 2px;
}
/* Elemento: Iframe dentro del modal */
.modal-calendly_container .calendly-embed_iframe {
width: 100%;
height: 100%;
border: none;
}
/*=================================================================
BLOQUE: BLOG
=================================================================*/
/*** ELEMENTO: General **/
/** Categorías y Filtros **/
.blog__category .elementor-post-info__terms-list {
font-size: 0 !important; /* Oculta todo el texto suelto (las comas) */
}
.blog__category .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text span {
display: flex;
gap: var(--gap-xs) var(--gap-xs)!important;
flex-direction: row;
flex-wrap: wrap;
}
.blog__category .elementor-post-info__terms-list a,
.blog__category .elementor-post-info__terms-list span,
.blog__category.blog__filter button.e-filter-item {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
cursor: pointer;
text-decoration: none !important;
/* Tamaño XS (basado en .btn--xs) */
padding: var(--btn-padding-y-xs) var(--btn-padding-x-s);
font-size: var(--text-xs) !important;
font-weight: var(--font-weight-regular) !important;
border-radius: var(--full-radius);
transition: transform .3s cubic-bezier(0.4,0,0.2,1), color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.blog__post .blog__category .elementor-post-info__terms-list a {
font-size: var(--text-s) !important;
}
/* Categorías (solid secondary) para Header de Blog */
.blog__category .elementor-post-info__terms-list a,
.blog__category .elementor-post-info__terms-list span {
border: var(--border-s) solid var(--color-border-dark);
background-color: var(--color-bg-light);
color: var(--color-text-on-light);
}
.blog__category .elementor-post-info__terms-list a:hover,
.blog__category .elementor-post-info__terms-list span:hover {
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-on-secondary) !important;
box-shadow: var(--button-shadow-hover);
}
.blog__category .elementor-post-info__terms-list a:active,
.blog__category .elementor-post-info__terms-list span:active {
box-shadow: var(--button-shadow-pressed);
}
.blog__category .elementor-post-info__terms-list a:focus-visible,
.blog__category .elementor-post-info__terms-list span:focus-visible {
outline: 2px solid var(--color-secondary-500);
outline-offset: 2px;
}
/* Filtros (outline por defecto, solid en activo) para los filtros del Blog */
.blog__category.blog__filter search.e-filter {
gap: var(--gap-s);
}
.blog__category.blog__filter button.e-filter-item {
border: var(--border-s) solid var(--color-border-dark);
background-color: var(--color-bg-light);
color: var(--color-text-on-light);
}
.blog__category.blog__filter button.e-filter-item:hover {
background-color: var(--color-bg-secondary);
color: var(--color-text-on-secondary);
box-shadow: var(--button-shadow-hover);
}
.blog__category.blog__filter button.e-filter-item.e-filter-active {
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-on-secondary) !important;
border-color: var(--color-border-dark) !important;
box-shadow: var(--button-shadow-hover);
}
.blog__category.blog__filter button.e-filter-item:active {
box-shadow: var(--button-shadow-pressed);
}
.blog__category.blog__filter button.e-filter-item:focus-visible {
outline: 2px solid var(--color-secondary-500);
outline-offset: 2px;
}
.blog__category.blog__filter button.e-filter-item i:before {
font-size: var(--icon-s);
}
.blog__category.blog__filter button.e-filter-item.e-filter-active,
.blog__category.blog__filter button.e-filter-item[aria-pressed="true"]{
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-on-secondary) !important;
border-color: var(--color-border-dark) !important;
box-shadow: var(--button-shadow-hover);
}
/*** ELEMENTO: Blog Post **/
/** MODIFICADOR: Imagen header **/
.blog__post .wp-post-image,
.blog__post img {
width: 100%;
height: 50vh;
object-fit: cover;
object-position: center center;
display: block;
}
/* Imágenes del contenido de blog */
.blog__post--content .elementor-element img, img {
max-width: max-content !important;
min-width: 150px !important;
}
.blog__post span.elementor-post-info__item-prefix,
.blog__post--content span.elementor-post-info__item-prefix {
font-weight: var(--font-weight-medium);
}
.blog__post span.elementor-icon-list-text.elementor-post-info__item.elementor-post-info__item--type-date,
.blog__post span.elementor-icon-list-text.elementor-post-info__item.elementor-post-info__item--type-author,
.blog__post--content span.elementor-icon-list-text.elementor-post-info__item.elementor-post-info__item--type-date,
.blog__post--content span.elementor-icon-list-text.elementor-post-info__item.elementor-post-info__item--type-author {
border-top: 4px solid var(--color-border-dark);
padding: var(--padding-m) var(--padding-l);
background: var(--color-bg-light-alt);
border-radius: var(--radius-s);
}
/** MODIFICADOR: Contenido Blockquote **/
.blog__post--content blockquote {
position: relative;
padding: 20px 20px 20px 50px;
margin: 30px 0;
background: var(--color-bg-light-alt);
border-left: 6px solid var(--color-border-on-light);
border-radius: var(--radius-m);
font-style: italic !important;
font-size: var(--text-l);
line-height: 1.6;
color: var(--color-text-on-light);
quotes: none;
}
.blog__post--content blockquote::before {
content: '"';
position: absolute;
left: 12px;
top: 5px;
font-size: 4em;
color: var(--color-icon-dark);
opacity: 0.3;
}
/** MODIFICADOR: Tabla de contenidos **/
/* Tab */
.blog__post--content .elementor-toc__header {
border-bottom: var(--border-s) solid var(--color-border-dark) !important;
}
/* Viñetas */
.blog__post--content .elementor-toc__list-item-text-wrapper svg {
display: none !important;
}
.blog__post--content .elementor-toc__list-item-text-wrapper::before {
content: "";
display: inline-block;
width: 8px !important;
min-width: 8px !important;
height: 8px !important;
border-radius: var(--full-radius) !important;
background-color: currentColor;
margin-right: 10px;
vertical-align: middle;
}
/* Cambio de texto "Dejar comentario" */
.blog__post--content .elementor-toc__list-item-text[href="#reply-title"] {
color: transparent !important;
position: relative;
}
.blog__post--content .elementor-toc__list-item-text[href="#reply-title"]::after {
content: "Deja un comentario" !important;
color: var(--color-text-on-light) !important;
position: absolute;
left: 0;
top: 0;
}
.blog__post--content .elementor-toc__list-item-text[href="#reply-title"]:hover::after {
content: "Deja un comentario" !important;
color: var(--color-text-on-light) !important;
text-decoration-line: underline !important;
}
.blog__post--content .elementor-widget-table-of-contents .elementor-widget-container{
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--radius-m);
}
/** MODIFICADOR: Caja de comentarios **/
.blog__post--content input#author,
.blog__post--content input#email,
.blog__post--content input#url {
box-sizing: border-box;
/* Dimensiones */
min-height: 48px;
padding: var(--padding-l) var(--padding-xl);
/* Tipografía */
font-family: var(--font-text);
font-size: var(--text-m);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-m);
color: var(--color-text-on-light);
/* Estilo visual */
background-color: var(--color-bg-light);
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius);
/* Interacciones */
transition: all 0.3s ease;
-webkit-appearance: none;
appearance: none;
}
.blog__post--content textarea {
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--radius-m);
}
.blog__post--content label {
font-size: var(--text-m);
}
/* Estilos base del botón submit - MOBILE FIRST */
.blog__post--content .form-submit input#submit {
/* Reset estilos nativos */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Layout y dimensiones (btn--l) - móvil primero */
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 56px;
padding: var(--btn-padding-y-l) var(--btn-padding-x-l);
/* Tipografía */
font-family: var(--font-text);
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
text-align: center;
text-decoration: none;
/* Estilo visual (btn__solid--dark) */
background-color: var(--color-bg-dark-alt);
color: var(--color-text-on-dark) !important;
border: var(--border-s) solid var(--color-border-dark);
border-radius: var(--full-radius);
box-sizing: border-box;
cursor: pointer;
/* Transiciones */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s ease,
box-shadow 0.3s ease;
}
/* Estado hover */
.blog__post--content .form-submit input#submit:hover {
background-color: var(--color-bg-dark-hover);
box-shadow: var(--button-shadow-hover);
transform: translateY(-3px);
}
/* Estado active (presionado) */
.blog__post--content .form-submit input#submit:active {
transform: translateY(-1px);
box-shadow: var(--button-shadow-pressed);
}
/* Estado focus para accesibilidad */
.blog__post--content .form-submit input#submit:focus {
outline: none;
}
.blog__post--content .form-submit input#submit:focus-visible {
outline: none;
}
/*=================================================================
ESTILOS CARD--BENTO-BLOG
=================================================================*/
/* CARD--BENTO-BLOG */
.card.card--bento,
.card.card--bento-blog {
max-width: 100% !important;
}
.card--bento-blog {
border: solid var(--border-s) var(--color-border-dark);
height: 100% !important;
padding: var(--padding-l) !important;
}
.card--bento-blog::before, .card--bento-blog:before {
border-radius: var(--radius-m) !important;
}
.card--bento-blog.landscape {
border: solid var(--border-s) var(--color-border-light);
padding: var(--padding-l);
background: var(--color-bg-light);
}
.card--bento-blog, .card--bento-blog.landscape {
gap: var(--gap-l);
height: 100%;
display: flex;
min-height: 325px;
}
.card--bento-blog .card__content, .card--bento-blog.landscape .card__content,
.card--bento-blog .card__image, .card--bento-blog.landscape .card__image {
height: 100% !important;
min-height: inherit !important;
display: flex !important;
}
.card--bento-blog .e-con-inner {
padding: var(--padding-none) !important;
}
.card--bento-blog .card__content {
padding: var(--padding-l) !important;
gap: var(--gap-l) !important;
}
.card--bento-blog.landscape .card__content {
padding: var(--padding-none) !important;
}
.card--bento-blog.landscape .card__image {
border-radius: var(--radius-m);
}
.card--bento-blog .card__title h3,
.card--bento-blog.landscape .card__title h3 {
color: var(--color-text-on-dark);
font-size: var(--text-l) !important;
}
.card--bento-blog .card__title h3 {
font-family: var(--font-primary);
font-size: var(--title-card-course);
font-weight: var(--font-weight-semi-bold);
line-height: var(--lh-text-m) !important;
border-radius: var(--none);
}
.card--bento-blog .card__content .btn--s a {
padding: var(--padding-none) var(--padding-none) !important;
}
.card--bento-blog .card__button .elementor-icon-box-wrapper,
.card--bento-blog-landscape .card__button .elementor-icon-box-wrapper {
padding: var(--padding-none);
font-size: var(--text-s);
background-color: var(--color-bg-transparent);
color: var(--color-text-on-light) !important;
position: relative;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--gap-s);
transition: color 0.3s ease;
}
.card--bento-blog .card__button .elementor-icon-box-wrapper::after,
.card--bento-blog-landscape .card__button .elementor-icon-box-wrapper::after {
content: '';
position: absolute;
left: 0;
bottom: -4px !important;
width: 100%;
height: 1px;
background-color: var(--color-bg-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.card--bento-blog .card__button .elementor-icon-box-description,
.card--bento-blog-landscape .card__button .elementor-icon-box-description {
margin: 0 !important;
color: inherit !important;
font-size: var(--text-s) !important;
font-weight: var(--font-weight-medium);
}
.card--bento-blog .card__button .elementor-icon-box-icon,
.card--bento-blog-landscape .card__button .elementor-icon-box-icon {
margin: 0 !important;
}
.card--bento-blog .card__button i,
.card--bento-blog-landscape .card__button i {
font-size: var(--icon-m) !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--color-icon-on-light) !important;
}
.card--bento-blog:hover .card__button .elementor-icon-box-wrapper,
.card--bento-blog-landscape:hover .card__button .elementor-icon-box-wrapper {
color: var(--color-text-primary) !important;
}
.card--bento-blog:hover .card__button i,
.card--bento-blog-landscape:hover .card__button i {
animation: slide-x 1.2s ease-in-out infinite;
color: var(--color-icon-primary) !important;
}
.card--bento-blog:hover .card__button .elementor-icon-box-wrapper::after,
.card--bento-blog-landscape:hover .card__button .elementor-icon-box-wrapper::after {
transform: scaleX(1);
}
.card--bento-blog.button--light .card__button .elementor-icon-box-wrapper,
.card--bento-blog-landscape.button--light .card__button .elementor-icon-box-wrapper {
color: var(--color-text-on-dark) !important;
}
.card--bento-blog.button--light .card__button i,
.card--bento-blog-landscape.button--light .card__button i {
color: var(--color-icon-light) !important;
}
.card--bento-blog.button--light .card__button .elementor-icon-box-wrapper::after,
.card--bento-blog-landscape.button--light .card__button .elementor-icon-box-wrapper::after {
background-color: var(--color-bg-light);
}
.card--bento-blog.button--light:hover .card__button .elementor-icon-box-wrapper,
.card--bento-blog-landscape.button--light:hover .card__button .elementor-icon-box-wrapper {
color: var(--color-text-on-dark) !important;
}
.card--bento-blog.button--light:hover .card__button i,
.card--bento-blog-landscape.button--light:hover .card__button i {
animation: slide-x 1.2s ease-in-out infinite;
color: var(--color-icon-light) !important;
}
.card--bento-blog .blog__category .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text span {
display: flex;
gap: var(--gap-xxs) !important;
flex-direction: row;
flex-wrap: wrap;
}
.card--bento-blog .blog__category .elementor-post-info__terms-list span, .card--bento-blog .blog__category .elementor-post-info__terms-list a {
padding: var(--btn-padding-y-xxs) var(--btn-padding-x-xxs);
font-size: var(--text-xs) !important;
}
.card--bento-blog .blog__category .elementor-post-info__terms-list span:hover, .card--bento-blog .blog__category .elementor-post-info__terms-list a:hover {
background: var(--color-bg-light) !important;
color: var(--color-text-on-light) !important;
transform: none !important;
}
/* CARD--BENTO */
.card--bento {
padding: var(--padding-xl);
gap: var(--gap-m);
border-radius: var(--radius-m);
}
.card--bento.card__text--s h3 {
color: var(--color-text-on-light);
font-family: var(--font-primary);
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-s) !important;
margin: 0;
}
.card--bento.card__text--m h3 {
color: var(--color-text-on-light);
font-family: var(--font-primary);
font-size: var(--text-xl);
font-weight: var(--font-weight-regular);
line-height: var(--lh-text-s) !important;
margin: 0;
}
.card--bento.card__icon span.elementor-icon {
font-size: var(--icon-3xl);
color: var(--color-icon-dark);
}
.card--bento.card__icon .elementor-icon-box-icon {
margin-right: var(--margin-m) !important;
margin-bottom: var(--margin-none) !important;
display: flex;
align-items: center;
}
.card--bento.card__icon .elementor-icon-box-content {
display: flex;
align-items: center;
}
/*=================================================================
BLOQUE: MEDIA QUERY
=================================================================*/
@media screen and (min-width:375px) {
/* SECTION METHODOLOGY */
.methodology__container--image {
min-height: 46vh !important;
}
}
@media screen and (min-width:480px) {
html {
scroll-padding-top: 150px !important;
}
/* GENERAL: Botones */
.btn--l {
width: auto;
}
.btn--xl a, .btn--l a {
width: auto;
min-height: 0px;
}
.btn--l a {
min-width: auto;
}
/* Icono de botón (flechas) */
.btn i.iconphosphor-arrow-, button i.iconphosphor-arrow- {
transform: translateY(2px);
}
/* HEADER: Padding */
.header__hero {
min-height: 700px;
max-height: 750px;
}
/* HEADER: Sección de Datos */
.section__container--highlight.highlight-section .elementor-widget-container,
.section__container--highlight.highlight-section p,
.section__container--highlight.highlight-section span.elementor-heading-title{
text-align: left;
}
/* HEADER: Carrousel de Slider */
.img--desktop {
display: block;
}
.img--mobile {
display: none;
}
.carrousel__slide--content {
position: static !important;
}
.header .header__img--mobile img {
height: var(--vh-100) !important;
}
/* CARROUSEL: Botones slide verticales */
.carrousel .carrousel__slide--buttons .btn__bar--light,
.carrousel .carrousel__slide--buttons .btn__bar--dark {
flex-direction: column; /* Vertical desde 480px */
}
.carrousel .carrousel__slide--buttons .btn__bar--light .elementor-widget-container,
.carrousel .carrousel__slide--buttons .btn__bar--dark .elementor-widget-container {
writing-mode: vertical-rl; /* Texto vertical */
transform: rotate(180deg);
height: 100%;
width: auto;
display: block;
}
/* ICONO en vertical - ajuste de posición y animación */
.carrousel .carrousel__slide--buttons .btn__bar--light .elementor-icon,
.carrousel .carrousel__slide--buttons .btn__bar--dark .elementor-icon {
font-size: var(--icon-btn-bar) !important;
margin-left: 0 !important;
}
/* Cambiar la animación a vertical en tablet/desktop */
.carrousel .carrousel__slide--buttons:hover .btn__bar--light .elementor-icon,
.carrousel .carrousel__slide--buttons:hover .btn__bar--dark .elementor-icon {
animation: bounce-vertical 2s ease-in-out infinite;
}
/* RESULTADOS: Grid tablet */
.courses-results__grid {
grid-template-columns: repeat(2, 1fr);
}
/* FILTRO: Altura de categoría */
.filter__container select.facetwp-dropdown {
height: auto !important;
}
/* CARD */
.card {
max-width: 370px !important;
}
.card.card--bento,
.card.card--bento-blog {
max-width: 100% !important;
}
.card .card__image img {
object-position: center center;
}
.card--course .card__button::before {
margin-top: 3px;
}
/* WOOCOMMERCE: Mi Carrito */
td.wc-block-cart-item__total {
display: block;
}
a.wc-block-components-checkout-return-to-cart-button {
width: 100%;
justify-content: flex-start;
}
.wc-block-components-checkout-return-to-cart-button svg {
left: 0 !important;
}
/* FOOTER: Iconos de caja de contacto */
i.iconphosphor-map-.icon-phosphor-map-house-regular {
margin-top: -3px;
}
i.iconphosphor-comm-.icon-phosphor-comm-phone-regular {
margin-top: var(--margin-none);
}
i.iconphosphor-comm-.icon-phosphor-comm-envelopesimple-regular {
margin-top: -2px;
}
i.iconphosphor-time-.icon-phosphor-time-clock-regular {
margin-top: -1px;
}
/* WOOCOMMERCE: Sticky del Resumen de pedido */
.wc-block-checkout__sidebar {
top: 150px !important;
}
/* FORMULARIO: Botón */
/* Botón de envío - Estilo btn__solid--dark btn--l sin icono */
.form .gform_wrapper input[type="submit"].gform_button {
width: auto;
min-width: 325px;
}
/** BLOG POST: Imagen header **/
.blog__post .wp-post-image,
.blog__post img {
height: 100vh;
}
/* FOOTER: Iconos de brand de botones de Redes Sociales */
.footer__icons--margin span::after {
margin-bottom: -1px !important;
}
/* FOOTER: Ancho de inputs y botón */
.footer .footer__form .elementor-field-group {
max-width: 275px !important;
}
.footer .footer__form .elementor-field-group.elementor-field-type-submit {
max-width: 185px !important;
}
}
@media screen and (min-width:768px) {
.header {
margin-top: -120px;
}
/* MEGA-MENU: Tarjeta */
.mega-menu .mega-menu__card {
min-height: 280px;
}
.mega-menu .mega-menu__card:hover {
transform: translatey(-10px);
}
/* MEGA-MENU: Botón */
div.btn--menu,
div#e-n-menu-title-1428 {
display: none !important;
}
/* RESPONSIVE HERO BANNER: Para que pueda aparecer el correcto en desktop y mobile */
.hero__responsive--mobile {
display: none;
}
.hero__responsive--desktop {
display: block;
}
.header.header-form .header__content.section__container--50 {
padding-top: 10%;
}
.header.header-form .header__img img {
height: var(--percent-100) !important;
}
/* INFO-BOX: Items */
.info-box {
gap: var(--gap-none) !important;
}
.info-box__item:not(:last-child) {
border-right: var(--border-s) solid var(--color-gray-200);
}
/* CARDS: Items */
.card .card__categories {
flex-direction: row;
flex-wrap: wrap;
}
.card .card__data {
flex-direction: row;
align-items: center;
}
/* FILTERS: Items */
/* RESULTADOS: Grid tablet */
.courses-results__grid {
grid-template-columns: repeat(3, 1fr);
}
/* PAGINACIÓN: Estilos tablet */
.pagination__btn, .pagination__dots {
min-width: 75px;
}
/* FILTROS: Estilos tablet */
.filter__form--horizontal {
justify-content: flex-start;
}
.filter__pill {
max-width: 200px;
}
.filter__select--pill {
min-width: 110px;
padding-right: 44px;
background-size: 16px;
background-position: right 16px center;
}
.filter__reset--pill {
min-width: 125px;
width: auto;
}
.filter__input--pill {
min-width: 200px;
}
/** MODIFICADOR: Créditos **/
.footer__credits {
padding: var(--padding-xl) var(--section-padding-x) !important;
}
/** WOOCOMMERCE: Input de cantidad **/
.woo__add-product .woocommerce .quantity .qty,
.woo__add-product input.qty,
.woo__add-product input.input-text.qty,
.woo__add-product input.input-text.qty.text {
min-width: 5.5em;
}
/** WOOCOMMERCE: Material relacionado **/
.material-relacionado__grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/** WOOCOMMERCE: Resultados **/
.products-results__grid {
grid-template-columns: repeat(2, 1fr);
}
/** WOOCOMMERCE - Mi cuenta **/
.page-header .entry-title {
max-width: 2400px;
}
.site-main.post-43,
.site-main.post-44,
.site-main.post-45 {
max-width: 1600px !important;
}
.woocommerce-button,
.woocommerce-form-login__submit {
width: auto !important;
max-width: 200px !important;
min-width: 180px;
}
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content button.woocommerce-Button,
.woocommerce-address-fields button {
width: auto !important;
max-width: max-content !important;
min-width: 180px;
}
.woo__cross-sell ul.products li.product .button.add_to_cart_button {
width: auto;
right: auto;
}
/** CALENDLY **/
.calendly-embed {
/* Aumenta la altura mínima en pantallas más grandes */
min-height: clamp(600px, 85vh, 800px);
/* Puede aumentar el espaciado en tablets */
margin-block: var(--space-500, 2.5rem);
}
.modal-calendly__container {
max-width: 70vw;
}
/** BLOG POST: Botón de caja de comentarios **/
.blog__post--content .form-submit input#submit {
width: auto;
min-width: 280px;
max-width: 480px;
}
}
@media screen and (min-width: 1024px) {
.header {
margin-top: -130px;
}
.header.header-form .header__content {
padding: var(--none) 1rem var(--content-padding-y-lg) 3rem;
}
/* MEGA-MENU: Container */
.mega-menu.e-child {
background: transparent;
background-color: transparent;
}
/* HEADER */
#cabecero-50 {
flex-direction: row;
align-items: end;
}
/* RESULTADOS: Grid desktop */
.courses-results__grid {
grid-template-columns: repeat(4, 1fr);
}
/* FILTROS: Estilos desktop */
.filter__select--pill {
min-width: 140px;
}
form#filtro-cursos-form {
flex-wrap: nowrap;
}
/** WOOCOMMERCE: Mini carrito **/
.woocommerce-mini-cart .elementor-menu-cart__product.woocommerce-cart-form__cart-item.cart_item {
flex-direction: row;
}
/** WOOCOMMERCE: Material relacionado **/
.material-relacionado__grid {
grid-template-columns: repeat(3, 1fr);
}
/** WOOCOMMERCE: Resultados **/
.products-results__grid {
grid-template-columns: repeat(3, 1fr);
}
/** WOOCOMMERCE - Mi cuenta **/
.woocommerce-button,
.woocommerce-form-login__submit {
max-width: 250px !important;
min-width: 200px;
}
/* WOOCOMMERCE: Sticky del Resumen de pedido */
.wc-block-checkout__sidebar {
top: 140px !important;
}
/* Columna de total */
.wc-block-components-order-summary-item__total-price {
display: block;
}
.wc-block-components-order-summary-item__description {
width: 70%;
}
/* WOOCOMERCE: Mini Cart */
.woo__mini-cart .elementor-menu-cart__main {
width: 500px;
}
/** CALENDLY **/
.calendly-embed {
/* Altura óptima para desktop */
min-height: clamp(650px, 90vh, 900px);
/* Espaciado mayor en desktop */
margin-block: var(--space-600, 3rem);
/* Puede limitar el ancho máximo para mejor legibilidad */
max-width: 1200px;
margin-inline: auto;
}
.modal-calendly__container {
max-width: 70vw;
}
}
@media screen and (max-width: 1024px) {
/* Menú en Mobile, para que encaje con el Mega menú y corregir estilos */
.menu div#menubar-161 {
margin-top: 1.5rem;
padding: var(--padding-none) var(--menu-padding-x) !important;
}
.menu .elementor-widget-n-menu .e-n-menu-heading {
flex-direction: column;
border-radius: var(--radius-m) !important;
border: var(--border-s) solid var(--color-border-dark);
background: var(--color-bg-light);
}
.menu li.e-n-menu-item, .e-n-menu-item,
.menu .e-n-menu-content.e-active {
width: var(--percent-100) !important;
}
/* Primer botón del menú */
div#e-n-menu-title-1611 {
border-radius: var(--radius-m) var(--radius-m) var(--radius-none) var(--radius-none) !important;
}
/* Último botón del menú */
div#e-n-menu-title-1617 {
border-radius: var(--radius-none) var(--radius-none) var(--radius-m) var(--radius-m) !important;
}
}
@media screen and (min-width: 1280px) {
.header {
margin-top: -175px;
}
/* RESULTADOS: Grid desktop */
.courses-results__grid {
grid-template-columns: repeat(5, 1fr);
}
/** WOOCOMMERCE: Resultados **/
.products-results__grid {
grid-template-columns: repeat(5, 1fr);
}
/* WOOCOMMERCE: Sticky del Resumen de pedido */
.wc-block-checkout__sidebar {
top: 200px !important;
}
}
@media screen and (min-width: 1334px) {
.header {
margin-top: -140px;
}
/* FOOTER: Botón Ir arriba (Go to top) */
.footer .footer__btn--to-top .elementor-icon-box-icon {
margin-bottom: -1rem !important;
}
/* FILTROS */
.filter__pill {
width: auto;
max-width: var(--percent-100);
}
}
@media screen and (min-width: 1920px) {
.header {
margin-top: -150px;
}
}
/*=================================================================
BLOQUE: RESETS
=================================================================*/
#radius--none *, .radius--none * {
border-radius: var(--radius-none) !important;
}
#padding--none *, .padding--none * {
padding: var(--padding-none) !important;
}
#margin--none *, .margin--none * {
margin: var(--margin-none) !important;
}
#gap--none *, .gap--none * {
gap: var(--gap-none) !important;
}
#spaces--none *, .spaces--none * {
border-radius: var(--radius-none) !important;
padding: var(--padding-none) !important;
margin: var(--margin-none) !important;
gap: var(--gap-none) !important;
}
#display-none *, .display-none *,
#display-none, .display-none {
display: none !important;
}
.text-decoration-none a, #text-decoration-none a, .text-decoration-none *, #text-decoration-none * {
text-decoration: none !important;
}
.pointer--none a, #pointer--none a, .pointer--none *, #pointer--none * {
cursor: default !important;
pointer-events: none !important;
}
.pointer--none a:hover, #pointer--none a:hover, .pointer--none *, #pointer--none * {
all: unset;
}
#CookiebotWidget{
bottom: 65px !important;
}
p.form-row.input_dni_form{
display: none !important;
}
/* Actualización 07/11/2025 00:23 */
.header-form .gform_wrapper.gravity-theme .gfield.gfield--width-half{
grid-column: 1 / -1 !important;
}
.pretitle{
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: var(--font-weight-semi-bold);
border: var(--border-s) solid var(--color-border-dark) !important;
border-radius: var(--full-radius);
box-sizing: border-box;
/* Tamaños - padding aumentado */
padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
/* Autoajuste de ancho */
width: fit-content;
align-self: flex-start;
background-color: var(--color-accent-on-dark);
color: var(--color-accent-on-primary);
}
.pretitle p{
margin: 0 !important;
}
.dialog-message.dialog-lightbox-message{
border-radius: var(--radius-m);
}
/* Mostrar #envios_peninsula-baleares solo en productos de la categoría Editorial */
/* Oculta la sección por defecto en plantilla */
#envios_peninsula-baleares{
display: none !important;
}
/* Muéstrala solo si el wrapper del template tiene la categoría Editorial */
.elementor.product_cat-editorial #envios_peninsula-baleares{
display: block !important;
}
/* ===== SKR Cart Icon (badge estilo burbuja) ===== */
a.skr-cart-icon{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-decoration: none;
}
/* Icono (font icon) */
a.skr-cart-icon i{
font-size: 20px;
line-height: 1;
}
/* Badge (burbuja) */
a.skr-cart-icon .skr-cart-icon__count{
position: absolute;
top: -6px;
right: -8px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: #D9534F;
color: #fff !important;
font-size: 11px;
font-weight: 700;
line-height: 16px;
text-align: center;
border: 2px solid #fff;
box-sizing: border-box;
}
/* Solo móvil */
@media (min-width: 768px){
.skr-cart-icon,
a.skr-cart-icon{
display: none !important;
}
}
.table{
gap: var(--gap-none)
}
.table-row-title{
padding: var(--padding-l)
}