/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
Description: DG TEC PERÚ — estados, composiciones y ajustes que ningún widget de Elementor da. El contenido y los colores viven en Elementor (Global Colors / Global Fonts).
*/

/* ==========================================================================
   Base
   ========================================================================== */
:root {
  --rojo: var(--e-global-color-primario, #dd042b);
  --rojo-menu: var(--e-global-color-rojomenu, #ff0305);
  --dur: 250ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html { overflow-x: clip; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
.e-con > .e-con, .e-con-inner > .e-con, .e-con > .elementor-widget, .e-con-inner > .elementor-widget { min-width: 0; }
a.e-con, a.e-con:hover { text-decoration: none; }
.elementor-icon svg { fill: currentColor; }
.e-con.e-flex { --flex-wrap-mobile: var(--flex-wrap, nowrap) !important; }
.elementor-widget__width-auto .elementor-button { width: auto; }
.elementor-button .elementor-button-text { flex: 0 0 auto; }
.elementor-button-content-wrapper { align-items: center; }
.encabezado.centrado > .elementor-widget { width: 100%; }
.measure-banner { max-width: 820px; margin-inline: auto; }
/* Medida de lectura de los parrafos: 68 caracteres; separacion entre parrafos 1em */
.medida, .e-con > .medida, .e-con-inner > .medida { max-width: 68ch !important; }
.medida.centrada { margin-inline: auto; }
.elementor-widget-text-editor p + p { margin-top: 1em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-heading-title { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #fff; }

/* Rotulo con pildora roja */
.eyebrow { width: auto !important; }
.eyebrow .pildora { flex: 0 0 32px; }
.eyebrow .elementor-widget-heading { width: auto; }

/* Imagenes con proporcion */
.frame .elementor-widget-container { overflow: hidden; }
.frame img, .frame .elementor-widget-container img { width: 100%; object-fit: cover; }
.frame-1x1 img { aspect-ratio: 1 / 1; object-fit: contain; }
/* Imagen del curso completa, sin recorte: caja 16:10 con la foto contenida */
.frame-curso img { aspect-ratio: 16 / 10; object-fit: contain; background: #fff; padding: 10px; }
.frame-auto img { aspect-ratio: auto; width: auto; max-width: 100%; }
.frame-auto .elementor-widget-container { overflow: visible; }
.frame .elementor-widget-container a { display: block; }

/* Botones */
.elementor-button { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.elementor-button .elementor-button-icon { display: inline-flex; align-items: center; }
.elementor-button .elementor-button-icon svg { width: 25px; height: 25px; fill: currentColor; }
.btn-pill-gris .elementor-button-icon svg, .btn-pill-rojo .elementor-button-icon svg { width: 19px; height: 18px; }
.btn-pill-rojo-lg .elementor-button-icon svg { width: 20px; height: 20px; }
.btn-tarjeta-rojo .elementor-button, .btn-tarjeta-negro .elementor-button, .btn-tarjeta-blanco .elementor-button { width: 100%; }
.btn-rojo .elementor-button, .btn-blanco .elementor-button, .btn-negro .elementor-button { min-width: 209px; }
.elementor-widget-button.btn-aula .elementor-button { border-radius: 0; }

/* Listas con la «garrapata» real del Figma */
.lista-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-check li { position: relative; padding-left: 30px; line-height: 1.5; font-size: 15px; }
.lista-check li::before { content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background-color: #000; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path d='M12.5 0C5.61 0 0 5.61 0 12.5S5.61 25 12.5 25 25 19.39 25 12.5 19.39 0 12.5 0Zm7.18 10.39-7.86 7.85a1.77 1.77 0 0 1-2.5 0l-4-4a1.77 1.77 0 1 1 2.5-2.5l2.75 2.75 6.61-6.6a1.77 1.77 0 1 1 2.5 2.5Z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path d='M12.5 0C5.61 0 0 5.61 0 12.5S5.61 25 12.5 25 25 19.39 25 12.5 19.39 0 12.5 0Zm7.18 10.39-7.86 7.85a1.77 1.77 0 0 1-2.5 0l-4-4a1.77 1.77 0 1 1 2.5-2.5l2.75 2.75 6.61-6.6a1.77 1.77 0 1 1 2.5 2.5Z'/></svg>") no-repeat center / contain; }
/* Viñetas rojas del bloque «¿Por qué confiar en nosotros?»: linea roja a la izquierda + check rojo */
.lista-vinetas ul { list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 3px solid var(--e-global-color-rojoicono, #e41e2f); display: grid; gap: 14px; }
.lista-vinetas li { position: relative; padding-left: 30px; }
.lista-vinetas li::before { content: ''; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; background-color: var(--e-global-color-rojoicono, #e41e2f); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path d='M12.5 0C5.61 0 0 5.61 0 12.5S5.61 25 12.5 25 25 19.39 25 12.5 19.39 0 12.5 0Zm7.18 10.39-7.86 7.85a1.77 1.77 0 0 1-2.5 0l-4-4a1.77 1.77 0 1 1 2.5-2.5l2.75 2.75 6.61-6.6a1.77 1.77 0 1 1 2.5 2.5Z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path d='M12.5 0C5.61 0 0 5.61 0 12.5S5.61 25 12.5 25 25 19.39 25 12.5 19.39 0 12.5 0Zm7.18 10.39-7.86 7.85a1.77 1.77 0 0 1-2.5 0l-4-4a1.77 1.77 0 1 1 2.5-2.5l2.75 2.75 6.61-6.6a1.77 1.77 0 1 1 2.5 2.5Z'/></svg>") no-repeat center / contain; }

/* ==========================================================================
   Cabecera (componente MENU)
   ========================================================================== */
.header-barra { border-bottom: 0; }
.cabecera-icono .elementor-icon svg { width: 30px; height: 30px; }
.cabecera-dato p { margin: 0; }
.cabecera-dato a { color: inherit; }
.cabecera-dato a:hover { color: var(--rojo); }
.logo-enlace { width: auto !important; flex: 0 0 auto !important; }
.header-nav { position: relative; }
.header-menu-fila { min-width: 0; }
/* Boton AULA VIRTUAL: sobresale 10px por debajo de la barra negra, como en el Figma */
.btn-aula .elementor-button { height: 77px; margin-bottom: -10px; position: relative; z-index: 2; }
@media (max-width: 1024px) { .btn-aula .elementor-button { height: 56px; margin-bottom: 0; padding: 16px 28px !important; } }
/* Chevron real del Figma (22x14) en CURSOS; rota al abrir */
.nav-principal .menu-item-has-children > a::after { 
    content: ''; 
    display: inline-block; 
    position: static !important; 
    inset: auto !important; 
    opacity: 1 !important; 
    width: 15px !important; 
    height: 10px !important; 
    margin-left: 10px; 
    background-color: currentColor; 
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'><path d='M2 2l9 9 9-9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain; 
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'><path d='M2 2l9 9 9-9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain; 
    transition: transform var(--dur, 0.3s) var(--ease, ease); 
}
.nav-principal .elementor-nav-menu--main .menu-item-has-children:hover > a::after, 
.nav-principal .elementor-nav-menu--main .menu-item-has-children > a.highlighted::after { 
    transform: rotate(180deg); 
}
.nav-principal .elementor-nav-menu--main .elementor-item::before { 
    display: none; 
}
.nav-principal .elementor-nav-menu--main .elementor-item { 
    display: inline-flex; 
    align-items: center; 
}

/* === NUEVO DISEÑO DEL DESPLEGABLE (Dark Mode) === */

/* Contenedor principal del submenu */
.nav-principal .elementor-nav-menu--main .elementor-nav-menu--dropdown { 
    margin-top: 16px !important; 
    padding: 12px 0 !important; 
    min-width: 230px !important; 
    border-radius: 8px !important; 
    background-color: #0A0A0A !important; /* Fondo negro elegante */
    border: 1px solid #222222 !important; /* Borde oscuro sutil */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.8) !important; /* Sombra para resaltar sobre la imagen */
}

/* Limpieza de bordes por defecto */
.nav-principal .elementor-nav-menu--main .elementor-nav-menu--dropdown li { 
    border: 0 !important; 
}

/* Estilos de los enlaces (Marcas) */
.nav-principal .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    color: #E0E0E0 !important; /* Texto blanco/gris claro */
    padding: 12px 24px !important;
    font-weight: 500;
    transition: all 0.3s ease; 
}

/* Hover general del enlace */
.nav-principal .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.nav-principal .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
    color: var(--rojo, #FF0000) !important; /* El texto se vuelve rojo */
    background-color: rgba(255, 255, 255, 0.03) !important; /* Ligero brillo de fondo al pasar el mouse */
}

/* Diseño de la casilla (Estado normal) */
.nav-principal .elementor-nav-menu--dropdown a.elementor-sub-item::before { 
    content: ''; 
    flex: 0 0 14px; 
    width: 14px; 
    height: 14px; 
    border: 2px solid #555555; /* Borde gris oscuro */
    border-radius: 3px; 
    background: transparent; 
    transition: all 0.3s ease; 
}

/* Diseño de la casilla (Estado Hover/Activo) */
.nav-principal .elementor-nav-menu--dropdown a.elementor-sub-item:hover::before, 
.nav-principal .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active::before { 
    background: var(--rojo, #FF0000); 
    border-color: var(--rojo, #FF0000); 
    box-shadow: inset 0 0 0 3px #0A0A0A; /* Crea un efecto visual de check/punto cuadrado */
}
.header-carrito .elementor-menu-cart__toggle .elementor-button { padding: 0 !important; background: transparent !important; border: 0 !important; }
.header-carrito .elementor-menu-cart__toggle .elementor-button-icon svg { width: 25px; height: 25px; }
.header-carrito .elementor-menu-cart__toggle_button { background: transparent !important; }
/* Menu movil: panel bajo la cabecera */
@media (max-width: 1024px) {
  .nav-principal .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; top: var(--alto-cabecera, 151px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-height: none !important; overflow-y: auto; background: #000 !important; padding: 24px 24px 48px !important; box-shadow: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
  .nav-principal .elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="true"] { display: none !important; }
  .nav-principal .elementor-nav-menu__container > ul > li { border-bottom: 1px solid rgba(255,255,255,0.15) !important; }
  .nav-principal .elementor-nav-menu__container > ul > li > a { display: flex !important; align-items: center; min-height: 56px; font-family: Lato, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; padding: 0 !important; color: #fff !important; background: transparent !important; }
  .nav-principal .elementor-nav-menu__container > ul > li > a.elementor-item-active, .nav-principal .elementor-nav-menu__container > ul > li > a:hover { color: var(--rojo) !important; }
  .nav-principal .elementor-nav-menu__container > ul > li.menu-item-has-children > a::after { margin-left: auto; }
  .nav-principal .elementor-nav-menu__container > ul > li > a.highlighted::after { transform: rotate(180deg); }
  .nav-principal .elementor-nav-menu__container .sub-menu { position: static !important; padding: 0 0 16px 12px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; width: 100% !important; margin: 0 !important; }
  .nav-principal .elementor-nav-menu__container .sub-menu a { display: flex !important; align-items: center; gap: 9px; min-height: 44px; font-family: Inter, sans-serif !important; font-size: 16px !important; font-weight: 500 !important; color: rgba(255,255,255,0.85) !important; padding: 0 !important; background: transparent !important; }
  .nav-principal .elementor-nav-menu__container .sub-menu li { border: 0; }
  .nav-principal .elementor-menu-toggle { width: 44px; height: 44px; margin: 0; }
  .nav-principal .elementor-menu-toggle svg, .nav-principal .elementor-menu-toggle i { color: #fff; }
  /* AULA VIRTUAL en el panel (item solo movil) */
  .nav-principal .elementor-nav-menu__container > ul > li.menu-cta { border: 0 !important; margin-top: 32px; }
  .nav-principal .elementor-nav-menu__container > ul > li.menu-cta > a { min-height: 56px; justify-content: center; background: var(--rojo-menu) !important; color: #fff !important; padding: 0 20px !important; }
}
@media (min-width: 1025px) { .nav-principal .menu-solo-movil { display: none !important; } }

/* ==========================================================================
   Hero de Inicio
   ========================================================================== */
.hero { position: relative; }
.hero-carrusel .swiper-slide { height: auto; }
.hero-carrusel .swiper-slide > .e-loop-item, .hero-carrusel .swiper-slide > .e-loop-item > .e-con { height: 100%; }
.hero-slide { position: relative; }
/* Altura del hero proporcional al lienzo del Figma (803 de 1920 = 41.8 vw) */
.hero-slide { min-height: min(803px, 41.8vw) !important; }
/* La persona: 780 de 803 de alto (Figma), anclada abajo a la derecha del contenedor, por encima del fondo y bajo el texto */
.hero-persona-col { position: absolute !important; right: 0 !important; bottom: 0 !important; left: auto !important; top: auto !important; height: 100%; width: auto !important; justify-content: flex-end; z-index: 1; }
.hero-persona, .hero-persona img { height: 100%; }
.hero-persona img { width: auto; max-width: none; max-height: 97%; margin-top: auto; }
.hero-texto { position: relative; z-index: 2; }
@media (max-width: 1024px) { .hero-persona-col { position: relative !important; height: auto; width: 100% !important; margin-top: 24px; } .hero-persona img { height: auto; max-height: 420px; margin-inline: auto; } .hero-slide { min-height: 0 !important; padding-top: 40px !important; } }
.hero-titulo h1, .hero-titulo span { text-transform: uppercase; }
.hero-lead p { max-width: 849px; }
/* Puntos del hero visibles sobre la foto, abajo y centrados */
.hero-carrusel .swiper-pagination { position: absolute !important; bottom: 24px !important; left: 0 !important; right: 0 !important; z-index: 4 !important; margin: 0 !important; }
/* Sin flechas en el hero: solo puntos */
.hero-carrusel .elementor-swiper-button { display: none !important; }
/* Puntos: activo rojo alargado (50×10), inactivos blancos (25×10) */
.carrusel .swiper-pagination { position: static !important; transform: none !important; width: 100% !important; display: flex; gap: 20px; justify-content: center; align-items: center; margin-top: 40px; }
.carrusel .swiper-pagination-bullet { width: 25px !important; height: 10px !important; border-radius: 5px; background: var(--e-global-color-grisclaro, #d9d9d9) !important; opacity: 1 !important; margin: 0 !important; transition: all var(--dur) var(--ease); }
.carrusel .swiper-pagination-bullet-active { width: 50px !important; background: var(--rojo) !important; }
.hero-carrusel .swiper-pagination { position: absolute !important; bottom: 32px !important; left: 0; margin: 0; z-index: 3; }
.hero-carrusel .swiper-pagination-bullet { background: #fff !important; }
.hero-carrusel .swiper-pagination-bullet-active { background: var(--rojo) !important; }
/* Redes flotantes a la derecha */
/* Redes flotantes: fijas en toda la pagina, abajo a la derecha (Figma: columna en x=1797, 50 px con 20 de separacion) */
.redes-flotantes { position: fixed !important; left: auto !important; right: max(24px, 3.8vw) !important; bottom: 32px !important; top: auto !important; margin: 0 !important; z-index: 90; gap: 8px !important; }
.red-flotante, .red-flotante .elementor-icon, .red-flotante .elementor-widget-container { line-height: 0; }
.red-flotante .elementor-icon { display: inline-flex; width: 50px; height: 50px; }
.red-flotante .elementor-icon svg { width: 50px; height: 50px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); transition: transform var(--dur) var(--ease); }
.red-flotante .elementor-icon:hover svg { transform: scale(1.08); }
@media (max-width: 767px) { .redes-flotantes { right: 12px !important; bottom: 16px !important; gap: 12px !important; } .red-flotante .elementor-icon, .red-flotante .elementor-icon svg { width: 42px; height: 42px; } }
/* Titulo del hero: dos lineas (roja + blanca) en cualquier ancho; 40px a 1920 */
.hero-titulo .elementor-heading-title { font-size: clamp(26px, 2.1vw, 40px) !important; line-height: 1.175 !important; }
.hero-lead p { font-size: clamp(16px, 1.05vw, 20px); line-height: 1.5; }
.hero-texto .eyebrow { margin-bottom: 0; }
@media (max-width: 1024px) { .hero-titulo .elementor-heading-title { font-size: clamp(24px, 3.4vw, 34px) !important; } }
.hero-red .elementor-icon { display: inline-flex; width: 50px; height: 50px; }
.hero-red .elementor-icon svg { width: 50px; height: 50px; transition: transform var(--dur) var(--ease); }
.hero-red .elementor-icon:hover svg { transform: scale(1.08); }
@media (max-width: 1024px) { .hero-redes { display: none !important; } }

/* ==========================================================================
   ¿Por qué DG TEC? — collage
   ========================================================================== */
.porque-collage { width: 100%; max-width: 719px; }
.porque-foto-2 { position: absolute !important; left: 16.5%; top: 8.5%; width: 55.6% !important; }
.porque-foto-2 img { aspect-ratio: 400 / 504; object-fit: cover; }
.porque-flecha { position: absolute !important; left: 72%; top: 8.5%; width: auto !important; }
.porque-flecha .elementor-icon svg { width: 107px; height: 216px; }
.porque-foto-3 { position: absolute !important; left: 44%; top: 66%; width: 56% !important; }
.porque-foto-3 img { aspect-ratio: 404 / 186; object-fit: cover; }
.porque-persona { position: absolute !important; left: 0; top: 0; width: 61% !important; z-index: 2; }
@media (max-width: 1024px) {
  .porque-collage { min-height: 0 !important; aspect-ratio: 719 / 550; }
  .porque-flecha .elementor-icon svg { width: 60px; height: 121px; }
}

/* ==========================================================================
   Tarjetas de curso y de producto
   ========================================================================== */
.card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.elementor-loop-container.elementor-grid .e-loop-item { display: flex; flex-direction: column; }
.elementor-loop-container.elementor-grid .e-loop-item > .e-con { flex: 1 1 auto; }
.carrusel .swiper-slide { height: auto; }
.carrusel .swiper-slide > .e-loop-item, .carrusel .swiper-slide > .e-loop-item > .e-con { height: 100%; }
/* Curso: en hover la tarjeta pasa a negra (variante del componente) */
.curso-card .curso-titulo a { transition: color var(--dur) var(--ease); }
.curso-card:hover .curso-titulo h3, .curso-card:hover .curso-titulo h2, .curso-card:hover .curso-titulo a, .curso-card:hover .elementor-heading-title { color: #fff !important; }
.curso-card:hover .btn-tarjeta-negro .elementor-button { background: #fff !important; color: #000 !important; }
.curso-card-fija:hover { background-color: #fff !important; }
.curso-card-fija:hover .elementor-heading-title { color: inherit !important; }
.curso-card-fija:hover .curso-titulo h2 { color: var(--rojo) !important; }
.curso-card-fija:hover .btn-tarjeta-negro .elementor-button { background: #000 !important; color: #fff !important; }
/* Producto */
.producto-card { transition: border-color var(--dur) var(--ease); }
.producto-card:hover { border-color: var(--rojo) !important; }
.producto-iconos { right: 22px; top: 20px; opacity: 0; transition: opacity var(--dur) var(--ease); }
.producto-card:hover .producto-iconos { opacity: 1; }
.producto-iconos .elementor-icon svg { width: 13px; height: 13px; }
.producto-img .elementor-widget-container { margin-inline: auto; }
.producto-puntos .elementor-icon svg { width: 23px; height: 4px; }
.producto-nombre a { transition: color var(--dur) var(--ease); }
.producto-nombre a:hover { color: var(--rojo); }
.producto-precio .price { display: inline-flex; align-items: baseline; gap: 16px; }
.producto-precio .price del { text-decoration: line-through; }
.producto-descuento { display: inline-block; }
.producto-descuento .elementor-heading-title { background: var(--e-global-color-rojooferta, #e00000); border-radius: 2px; padding: 4px 4px 3px; line-height: 1; }
.producto-descuento .elementor-heading-title:empty { display: none; }
.producto-card:hover .btn-pill-gris .elementor-button { background: var(--rojo) !important; color: #fff !important; }
.producto-card .btn-pill-gris { margin-top: auto !important; }

/* ==========================================================================
   Banda «Aprende y comienza a crecer» — mecanico con circulo rojo
   ========================================================================== */
.banda-persona-col { align-self: flex-end; }
.banda-persona { position: relative; z-index: 1; }
.banda-persona img { width: auto; max-height: 560px; margin-left: auto; margin-top: -60px; }
.banda-persona-col::before { content: ''; position: absolute; right: 12%; top: 50%; width: 340px; height: 340px; border-radius: 50%; background: var(--e-global-color-rojoicono, #e41e2f); transform: translateY(-40%); z-index: 0; }
@media (max-width: 1024px) { .banda-persona img { max-height: 420px; margin: 0 auto; } .banda-persona-col::before { width: 280px; height: 280px; right: 50%; transform: translate(50%, -40%); } }

/* Convenios: logotipos */
.convenio-logo img { max-height: 72px; width: auto; object-fit: contain; }

/* Testimonios */
.testimonio-marco .frame img { aspect-ratio: 1 / 1; object-fit: cover; }
.testimonio-cita p { margin: 0; }
@media (max-width: 767px) { .testimonio-izq { padding-top: 0 !important; } }

/* ==========================================================================
   Contacto (Inicio)
   ========================================================================== */
.seccion-contacto { position: relative; }
.contacto-caja { margin-top: 0; }
.contacto-caja-2 .elementor-heading-title { margin-top: -6px; }
.contacto-dato .elementor-widget-heading { width: auto; }
.contacto-dato a { color: inherit; }
.contacto-dato .elementor-icon svg { width: 20px; height: 20px; }
.contacto-datos { background: rgba(255,255,255,0.92); padding: 16px 20px !important; border-radius: 10px; }
.form-card { margin-top: 120px; }
@media (max-width: 1024px) { .form-card { margin-top: 32px; } }
.form-contacto .elementor-field-group { margin-bottom: 0; }
.form-contacto .elementor-field { min-height: 50px; }
.form-contacto textarea.elementor-field { min-height: 221px; resize: vertical; }
.form-contacto .elementor-field::placeholder { color: var(--e-global-color-grisform, #747474); opacity: 1; }
.form-contacto .elementor-button { width: 100%; height: 50px; border-radius: 10px !important; }
.form-contacto .elementor-message { font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   Pie
   ========================================================================== */
.footer-enlaces .elementor-nav-menu--layout-vertical .elementor-nav-menu > li > a { padding: 2px 0; position: relative; width: max-content; line-height: 1.5; }
.footer-enlaces .elementor-nav-menu a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur) var(--ease); }
.footer-enlaces .elementor-nav-menu a:hover::after { transform: scaleX(1); }
.footer-contacto .elementor-icon-list-icon { width: 13px; box-sizing: content-box; flex: 0 0 auto; margin-top: 3px; }
.footer-contacto .elementor-icon-list-text { line-height: 1.5; }
.footer-contacto .elementor-icon-list-icon svg { width: 13px !important; height: 13px !important; fill: currentColor; }
.footer-contacto .elementor-icon-list-item { align-items: flex-start; }
.footer-contacto a { color: inherit; }
.footer-copy p { margin: 0; font-size: 13px; }

/* ==========================================================================
   Catalogo (EQUIPO DE DIAGNOSTICO)
   ========================================================================== */
.banner { position: relative; }
.buscador-productos .elementor-search-form__container { min-height: 58px; border: 0 !important; box-shadow: none !important; }
.buscador-productos .elementor-search-form__input { padding-left: 23px !important; }
.buscador-productos .elementor-search-form__input::placeholder { color: #000; opacity: 1; }
.buscador-productos .elementor-search-form__submit { background: transparent !important; padding: 0 20px !important; }
.buscador-productos .elementor-search-form__submit svg { width: 36px; height: 36px; fill: currentColor; }
.buscador-productos .elementor-search-form__container:focus-within { box-shadow: none !important; }
.loop-categorias .elementor-loop-container { display: grid !important; grid-template-columns: 1fr; gap: 0; }
.loop-categorias .e-loop-item { display: block; }
.categoria-fila { transition: color var(--dur) var(--ease); }
.categoria-fila:hover .elementor-heading-title, .categoria-fila.is-activa .elementor-heading-title { color: var(--rojo) !important; }
.categoria-fila.is-activa .categoria-circulo { background: var(--rojo); border-color: var(--rojo); }
.categoria-fila .elementor-icon svg { width: 5px; height: 9px; }
.loop-categorias .e-loop-item:last-child .categoria-fila { border-bottom: 0 !important; }
/* Filtro por material como casillas con conteo */
.filtro-material .e-filter, .filtro-casillas .e-filter { gap: 18px; flex-direction: column; align-items: flex-start; }
.filtro-material .e-filter-item, .filtro-casillas .e-filter-item { display: flex; align-items: center; gap: 9px; width: 100%; border: 0 !important; padding: 0 !important; background: transparent !important; text-align: left; }
.filtro-material .e-filter-item::before, .filtro-casillas .e-filter-item::before { content: ''; flex: 0 0 17px; width: 17px; height: 18px; border: 1px solid var(--e-global-color-grismedio, #707070); border-radius: 5px; background: #fff; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.filtro-material .e-filter-item[aria-pressed="true"]::before, .filtro-casillas .e-filter-item[aria-pressed="true"]::before { background: var(--rojo); border-color: var(--rojo); }
.filtro-material .material-conteo { margin-left: auto; }

/* ==========================================================================
   Ficha de producto
   ========================================================================== */
.producto-galeria .woocommerce-product-gallery { display: flex; gap: 25px; flex-direction: row-reverse; }
.producto-galeria .woocommerce-product-gallery__wrapper { flex: 1 1 auto; }
.producto-galeria .flex-viewport { border: 1px solid #000; border-radius: 30px; overflow: hidden; }
.producto-galeria .woocommerce-product-gallery__image img { object-fit: contain; aspect-ratio: 786 / 692; background: #fff; }
.producto-galeria .flex-control-thumbs { display: flex; flex-direction: column; gap: 25px; margin: 0 !important; flex: 0 0 154px; }
.producto-galeria .flex-control-thumbs li { width: 154px !important; margin: 0 !important; }
.producto-galeria .flex-control-thumbs img { border: 1px solid #000; border-radius: 24px; aspect-ratio: 1 / 1; object-fit: cover; opacity: 1; }
.producto-galeria .flex-control-thumbs img.flex-active { box-shadow: 0 0 0 2px var(--rojo); }
@media (max-width: 767px) { .producto-galeria .woocommerce-product-gallery { flex-direction: column; } .producto-galeria .flex-control-thumbs { flex-direction: row; flex: 0 0 auto; } .producto-galeria .flex-control-thumbs li { width: 80px !important; } }
.producto-precio .price del .amount { color: var(--e-global-color-grismedio, #707070); }
.producto-rating .star-rating { color: var(--e-global-color-amarillo, #ffc30a); }
.producto-ficha ul { list-style: none; margin: 0; padding: 0; }
.producto-stock .stock { margin: 0; }
.producto-compra .elementor-add-to-cart form.cart { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.producto-compra .quantity { display: inline-flex; align-items: center; border: 1px solid var(--e-global-color-grismedio, #707070); border-radius: 5px; height: 53px; padding: 0 16px; }
.producto-compra .quantity .qty { border: 0; width: 60px; text-align: center; font-family: Inter, sans-serif; font-weight: 500; font-size: 17px; background: transparent; }
.producto-compra .single_add_to_cart_button { flex: 1 1 auto; height: 53px; border-radius: 5px !important; display: inline-flex; align-items: center; justify-content: center; font-family: Inter, sans-serif !important; font-weight: 500 !important; font-size: 16px !important; background: #fff !important; color: #000 !important; border: 1px solid var(--e-global-color-grismedio, #707070) !important; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.producto-compra .single_add_to_cart_button:hover { background: #000 !important; color: #fff !important; }
.producto-compra .added_to_cart { display: none; }
.btn-pill-rojo-lg .elementor-button { height: 53px; }
/* Pestañas de la ficha: subrayado rojo en la activa (Rectangle 45227) */
.producto-tabs .e-n-tabs-heading { border-bottom: 1px solid var(--e-global-color-grisclaro, #d9d9d9); padding-inline: 32px; }
.producto-tabs .e-n-tab-title { position: relative; }
.producto-tabs .e-n-tab-title[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; background: var(--rojo); border-radius: 3px 3px 0 0; }
.producto-descripcion p + p { margin-top: 20px; }
.producto-descripcion p { text-align: left; }
.producto-desc-img img { border-radius: 10px; }
/* Pestañas del curso: TEMARIO (roja) / CERTIFICADO (gris) */
.curso-tabs .e-n-tabs-heading { gap: 0; }
.curso-tabs .e-n-tab-title { min-width: 200px; justify-content: center; }
.curso-tabs .e-n-tab-title:not([aria-selected="true"]) { background: var(--e-global-color-grisoscuro, #3d3d3d) !important; }
.curso-tabs .e-n-tab-title:nth-child(n+2):not([aria-selected="true"]) { filter: brightness(1.25); }
@media (max-width: 767px) { .curso-tabs .e-n-tab-title { min-width: 0; flex: 1 1 50%; } }
.curso-tabs .e-n-tab-title[aria-selected="true"] { background: var(--rojo) !important; }
.curso-tabs .e-n-tabs-content { border-top: 1px solid var(--e-global-color-grisclaro, #d9d9d9); }

/* ==========================================================================
   Paginas de WooCommerce (carrito, finalizar compra, mi cuenta, pedido recibido)
   ========================================================================== */
.woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-account .site-main { font-family: Inter, sans-serif; }
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .woocommerce-account .woocommerce, .woocommerce-order-received .woocommerce, .wc-block-components-notices { max-width: 1140px; margin-inline: auto; padding-inline: 20px; padding-top: 48px; padding-bottom: 96px; }
@media (max-width: 767px) { .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .woocommerce-account .woocommerce, .woocommerce-order-received .woocommerce { padding-inline: 24px; } }
.wc-block-components-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .woocommerce button.button, .woocommerce a.button, .woocommerce .button { background: var(--rojo) !important; color: #fff !important; border-radius: 5px !important; font-family: Inter, sans-serif !important; font-weight: 700 !important; font-size: 16px !important; }
.wc-block-components-button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover { background: var(--rojo-menu) !important; }
.wc-block-components-product-name, .wc-block-components-totals-item__label, .wc-block-components-title, .wc-block-components-checkout-step__title, .woocommerce h2, .woocommerce h3, .entry-title { font-family: 'Reddit Sans', sans-serif; color: #19232b; }
.wc-block-components-text-input input, .wc-block-components-textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border-radius: 10px; border-color: var(--e-global-color-grisbordeform, #e0e0e0); font-family: Roboto, sans-serif; }
.wc-block-components-text-input.is-active input, .wc-block-components-text-input input:focus { border-color: var(--rojo); box-shadow: none; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation .is-active a { color: var(--rojo); font-weight: 600; }
.woocommerce-info, .woocommerce-message, .woocommerce-error { border-top-color: var(--rojo); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--rojo); }
.woocommerce a { color: var(--rojo); }
.woocommerce-order-received .woocommerce-thankyou-order-received { font-family: 'Reddit Sans', sans-serif; font-weight: 700; font-size: 22px; color: #19232b; }
/* Enlace «Saltar al contenido» del tema */
.skip-link { left: 24px; top: -100px; z-index: 100; background: #fff; color: #000; padding: 12px 20px; border-radius: 5px; font-weight: 600; transition: top var(--dur) var(--ease); }
.skip-link:focus-visible { top: 24px; }

/* Ajustes que no tienen control en el widget */
.contacto-caja { min-width: 360px; }
@media (max-width: 767px) { .contacto-caja { min-width: 0; } }
.form-contacto .elementor-field { padding: 13px !important; }
.producto-rating .woocommerce-review-link { display: none; }
.producto-adicional table { font-family: Inter, sans-serif; font-size: 18px; color: var(--e-global-color-gristexto, #404040); }
.producto-adicional th, .producto-adicional td { padding: 8px 0; }

/* Precio: tachado + vigente en una linea */
.producto-precio .price, .elementor-widget-woocommerce-product-price .price { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: nowrap; }
.producto-precio .price del, .elementor-widget-woocommerce-product-price .price del { text-decoration: line-through; opacity: 1; }

/* Con menos tarjetas que columnas, cada slide conserva el ancho de tarjeta del Figma */
.carrusel-cursos .swiper-slide { max-width: 275px; }
.carrusel-productos .swiper-slide { max-width: 270px; }
.carrusel-testimonios .swiper-slide { max-width: 560px; }
@media (max-width: 767px) { .carrusel-cursos .swiper-slide, .carrusel-productos .swiper-slide, .carrusel-testimonios .swiper-slide { max-width: none; } }

/* Menu movil: el chevron de CURSOS a la derecha del item, no sobre el texto */
@media (max-width: 1024px) {
  .nav-principal .elementor-nav-menu__container > ul > li.menu-item-has-children > a { position: relative; padding-right: 32px !important; }
  .nav-principal .elementor-nav-menu__container > ul > li.menu-item-has-children > a::after { position: absolute; right: 4px; top: 50%; margin: 0; transform: translateY(-50%); }
  .nav-principal .elementor-nav-menu__container > ul > li.menu-item-has-children > a.highlighted::after { transform: translateY(-50%) rotate(180deg); }
}

/* Temario por modulos: encabezado de modulo + lista con checks */
.lista-check h4 { font-family: 'Reddit Sans', sans-serif; font-weight: 700; font-size: 16px; margin: 18px 0 8px; color: var(--e-global-color-tinta, #19232b); }
.lista-check h4:first-child { margin-top: 0; }
.lista-check ul + h4 { margin-top: 20px; }
/* Descripcion del curso: encabezados de bloque */
.curso-descripcion h3 { font-family: 'Reddit Sans', sans-serif; font-weight: 700; font-size: 20px; margin: 24px 0 8px; color: var(--rojo); }
.curso-descripcion h3:first-child { margin-top: 0; }
.curso-descripcion ul { padding-left: 20px; display: grid; gap: 8px; }
/* Datos opcionales de la tarjeta de curso: si el campo esta vacio solo queda la etiqueta, se oculta */
.dato-opcional .elementor-heading-title:is(:empty) { display: none; }

/* Tarjeta de curso compacta: el cuerpo estira y los botones quedan pegados abajo */
.curso-card > .curso-cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; }
.curso-card .curso-botones { margin-top: auto !important; padding-top: 16px; }
.curso-card .curso-botones .elementor-button { font-size: 14px !important; }
.curso-card .curso-botones .elementor-button-icon svg { width: 18px; height: 18px; }
.curso-card .curso-dato .elementor-heading-title { line-height: 1.4; }
/* Filtros: opciones alineadas a la izquierda */
.filtro-casillas .e-filter { align-items: stretch; }
.filtro-casillas .e-filter-item { justify-content: flex-start; text-align: left; }

/* «Otros productos»: la seccion se oculta cuando no hay otros equipos que mostrar */
.producto-otros:not(:has(.e-loop-item)) { display: none; }

/* Pestañas del curso: contenido pegado a las pestañas */
.curso-tabs .e-n-tabs-content > .e-con { padding-top: 22px !important; }
.curso-descripcion h3 { font-size: 18px; margin: 18px 0 6px; }
.curso-descripcion p, .curso-descripcion li { font-size: 15px; }

/* Iconos de contacto del pie en blanco (los SVG llevan fill=currentColor y el widget les pone su propio color) */
.footer-contacto .elementor-icon-list-icon svg, .footer-contacto .elementor-icon-list-icon svg * { fill: #fff !important; color: #fff !important; }