/* ==========================================================================
Estilo nuevo (propuesta del 03/10) — EN PRUEBA, solo con ?estilo=nuevo
Cálido, simple y vivo: mismo verde de siempre, más aire, Bricolage Grotesque + Figtree,
tarjetas redondeadas y movimiento suave. Todo va dentro de .di-estilo-nuevo.
========================================================================== */
.di-estilo-nuevo {
--dn-bosque: #17312A;
--dn-verde: #007468;
--dn-verde-hover: #00594F;
--dn-agua: #00AC97;
--dn-menta: #DDEFE9;
--dn-durazno: #F2C9A6;
--dn-fondo: #F4F6F2;
--dn-texto: #4E5B56;
--dn-radio: 24px;
--dn-sombra: 0 18px 40px rgba(23, 49, 42, .10);
--dn-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
--dn-cuerpo: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* --- Tipografía y fondo --- */
body.di-estilo-nuevo,
.di-estilo-nuevo .site-content,
.di-estilo-nuevo .ast-separate-container {
background-color: var(--dn-fondo) !important;
}
.di-estilo-nuevo,
.di-estilo-nuevo p,
.di-estilo-nuevo li,
.di-estilo-nuevo .elementor-widget-text-editor,
.di-estilo-nuevo .elementor-image-box-description,
.di-estilo-nuevo .elementor-icon-box-description,
.di-estilo-nuevo .elementor-testimonial-content,
.di-estilo-nuevo input:not(.adminbar-input),
.di-estilo-nuevo textarea,
.di-estilo-nuevo select,
.di-estilo-nuevo .menu-link {
font-family: var(--dn-cuerpo) !important;
}
.di-estilo-nuevo p,
.di-estilo-nuevo .elementor-widget-text-editor,
.di-estilo-nuevo .elementor-image-box-description,
.di-estilo-nuevo .elementor-icon-box-description {
line-height: 1.65;
}
.di-estilo-nuevo h1, .di-estilo-nuevo h2, .di-estilo-nuevo h3,
.di-estilo-nuevo h4, .di-estilo-nuevo h5, .di-estilo-nuevo h6,
.di-estilo-nuevo .elementor-heading-title,
.di-estilo-nuevo .elementor-image-box-title,
.di-estilo-nuevo .elementor-icon-box-title,
.di-estilo-nuevo .woocommerce-loop-product__title,
.di-estilo-nuevo .product_title,
.di-estilo-nuevo .entry-title,
.di-estilo-nuevo .ld-item-name,
.di-estilo-nuevo .elementor-testimonial-name {
font-family: var(--dn-display) !important;
letter-spacing: -0.02em;
}
.di-estilo-nuevo .elementor-heading-title { line-height: 1.08 !important; }
/* --- Encabezado: se queda con su verde de siempre (el logo es blanco); solo cambia la letra del menú --- */
.di-estilo-nuevo .main-header-menu > .menu-item > .menu-link {
font-weight: 500 !important;
font-size: 16px !important;
}
/* --- Botones: pastilla, verde hondo, sube al pasar el mouse --- */
.di-estilo-nuevo .elementor-button,
.di-estilo-nuevo .wp-block-button__link,
.di-estilo-nuevo .ast-button,
.di-estilo-nuevo .woocommerce a.button:not(.show-password-input),
.di-estilo-nuevo .woocommerce button.button:not(.show-password-input),
.di-estilo-nuevo .woocommerce .single_add_to_cart_button,
.di-estilo-nuevo .woocommerce-form-login__submit,
.di-estilo-nuevo .woocommerce-form-register__submit,
.di-estilo-nuevo .wpforms-submit,
.di-estilo-nuevo .wpcf7-submit,
.di-estilo-nuevo .ld-button {
background-color: var(--dn-verde) !important;
border: 0 !important;
border-radius: 999px !important;
color: #FFFFFF !important;
font-family: var(--dn-cuerpo) !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
padding: 14px 28px !important;
min-height: 46px;
transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.di-estilo-nuevo .elementor-button:hover,
.di-estilo-nuevo .wp-block-button__link:hover,
.di-estilo-nuevo .ast-button:hover,
.di-estilo-nuevo .woocommerce a.button:not(.show-password-input):hover,
.di-estilo-nuevo .woocommerce button.button:not(.show-password-input):hover,
.di-estilo-nuevo .woocommerce .single_add_to_cart_button:hover,
.di-estilo-nuevo .woocommerce-form-login__submit:hover,
.di-estilo-nuevo .wpforms-submit:hover,
.di-estilo-nuevo .ld-button:hover {
background-color: var(--dn-verde-hover) !important;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0, 116, 104, .22);
}
/* --- Tarjetas: cajas con imagen, con ícono, testimonios y productos --- */
/* Ojo: en su página varias "cajas con imagen" SIN imagen son títulos de sección (la portada "Educar con amor",
"Nuestros cursos…", "Testimonios"): esas no se tocan. Solo se vuelven tarjeta las que tienen imagen o ícono. */
.di-estilo-nuevo .elementor-widget-image-box:has(.elementor-image-box-img) > .elementor-widget-container,
.di-estilo-nuevo .elementor-widget-icon-box > .elementor-widget-container,
.di-estilo-nuevo .elementor-widget-testimonial > .elementor-widget-container {
background: #FFFFFF;
border-radius: var(--dn-radio);
padding: 28px 26px;
height: 100%;
box-sizing: border-box;
transition: transform .35s ease, box-shadow .35s ease;
}
.di-estilo-nuevo .elementor-widget-image-box:has(.elementor-image-box-img) > .elementor-widget-container:hover,
.di-estilo-nuevo .elementor-widget-icon-box > .elementor-widget-container:hover,
.di-estilo-nuevo .elementor-widget-testimonial > .elementor-widget-container:hover {
transform: translateY(-4px);
box-shadow: var(--dn-sombra);
}
.di-estilo-nuevo .elementor-image-box-img img {
border-radius: 18px;
}
.di-estilo-nuevo .elementor-icon-box-icon .elementor-icon {
color: var(--dn-verde) !important;
fill: var(--dn-verde) !important;
}
.di-estilo-nuevo .elementor-testimonial-content {
font-size: 17px !important;
color: var(--dn-bosque) !important;
}
.di-estilo-nuevo .elementor-testimonial-image img {
border-radius: 50% !important;
}
.di-estilo-nuevo ul.products li.product {
background: #FFFFFF;
border-radius: var(--dn-radio);
overflow: hidden;
padding-bottom: 18px !important;
transition: transform .35s ease, box-shadow .35s ease;
}
.di-estilo-nuevo ul.products li.product:hover {
transform: translateY(-4px);
box-shadow: var(--dn-sombra);
}
.di-estilo-nuevo ul.products li.product img {
border-radius: 0 !important;
margin-bottom: 14px !important;
}
.di-estilo-nuevo ul.products li.product .woocommerce-loop-product__title,
.di-estilo-nuevo ul.products li.product .ast-woo-product-category,
.di-estilo-nuevo ul.products li.product .price,
.di-estilo-nuevo ul.products li.product .button {
margin-left: 18px !important;
margin-right: 18px !important;
}
.di-estilo-nuevo ul.products li.product .woocommerce-loop-product__title {
font-size: 19px !important;
font-weight: 600 !important;
color: var(--dn-bosque) !important;
line-height: 1.25 !important;
}
.di-estilo-nuevo ul.products li.product .ast-woo-product-category {
font-size: 12px !important;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--dn-verde) !important;
}
/* --- Ficha de producto y cursos --- */
.di-estilo-nuevo .woocommerce div.product div.images img,
.di-estilo-nuevo .woocommerce-product-gallery img {
border-radius: 28px;
}
.di-estilo-nuevo .woocommerce div.product .product_title {
font-size: clamp(32px, 4vw, 48px) !important;
line-height: 1.05 !important;
color: var(--dn-bosque) !important;
}
.di-estilo-nuevo .woocommerce div.product p.price,
.di-estilo-nuevo .woocommerce div.product span.price {
color: var(--dn-bosque) !important;
font-weight: 600;
}
.di-estilo-nuevo .ld-item-list .ld-item-list-item {
border-radius: 18px !important;
overflow: hidden;
border-color: rgba(23, 49, 42, .08) !important;
}
/* --- Formularios: campos redondeados y cómodos --- */
/* (no tocar el buscador de la barra de WordPress: .adminbar-input) */
.di-estilo-nuevo input[type="text"]:not(.adminbar-input), .di-estilo-nuevo input[type="email"],
.di-estilo-nuevo input[type="password"], .di-estilo-nuevo input[type="tel"],
.di-estilo-nuevo input[type="number"], .di-estilo-nuevo textarea, .di-estilo-nuevo select {
border-radius: 14px !important;
border: 1.5px solid #CFDAD5 !important;
background-color: #FFFFFF !important;
min-height: 46px;
}
.di-estilo-nuevo input:not(.adminbar-input):focus, .di-estilo-nuevo textarea:focus, .di-estilo-nuevo select:focus {
border-color: var(--dn-verde) !important;
outline: 3px solid rgba(0, 116, 104, .18) !important;
outline-offset: 0;
}
/* --- Links --- */
.di-estilo-nuevo .entry-content a:not(.elementor-button):not(.button),
.di-estilo-nuevo .elementor-widget-text-editor a {
color: var(--dn-verde);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
/* --- Pie de página: bosque --- */
.di-estilo-nuevo .site-footer,
.di-estilo-nuevo .site-primary-footer-wrap,
.di-estilo-nuevo .site-below-footer-wrap,
.di-estilo-nuevo .site-above-footer-wrap {
background-color: var(--dn-bosque) !important;
color: #C9D8D2 !important;
}
.di-estilo-nuevo .site-footer a,
.di-estilo-nuevo .site-footer .ast-footer-copyright {
color: #C9D8D2 !important;
}
/* --- Movimiento: aparecen subiendo suave (el JS pone .di-reveal / .di-visible) --- */
.di-js-reveal .di-estilo-nuevo .di-reveal,
html.di-js-reveal body.di-estilo-nuevo .di-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
html.di-js-reveal body.di-estilo-nuevo .di-reveal.di-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.di-js-reveal body.di-estilo-nuevo .di-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.di-estilo-nuevo * { transition: none !important; animation: none !important; }
}
@media print {
html.di-js-reveal body.di-estilo-nuevo .di-reveal { opacity: 1 !important; transform: none !important; }
}
/* --- Aviso de que es una prueba --- */
.di-estilo-aviso {
position: fixed;
right: 16px;
top: 16px;
z-index: 100000;
background: var(--dn-bosque);
color: #FFFFFF !important;
font: 600 13px/1.2 var(--dn-cuerpo);
padding: 10px 16px;
border-radius: 999px;
text-decoration: none !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.admin-bar .di-estilo-aviso { top: 48px; }
@media (max-width: 600px) {
.di-estilo-aviso { top: auto; bottom: 64px; right: 12px; left: 12px; text-align: center; }
}
/* --- Celular: dos columnas de cursos → títulos más chicos para que no corten palabras --- */
@media (max-width: 600px) {
.di-estilo-nuevo ul.products li.product .woocommerce-loop-product__title {
font-size: 15px !important;
hyphens: auto;
overflow-wrap: break-word;
}
.di-estilo-nuevo ul.products li.product .woocommerce-loop-product__title,
.di-estilo-nuevo ul.products li.product .ast-woo-product-category,
.di-estilo-nuevo ul.products li.product .price,
.di-estilo-nuevo ul.products li.product .button {
margin-left: 12px !important;
margin-right: 12px !important;
}
}
/* ==========================================================================
v2 (03/10, tarde): más carácter, como la propuesta. Portada, fondos alternados,
títulos grandes, formas orgánicas. Selectores por data-id del inicio (los mismos en el sitio real).
========================================================================== */
/* Paleta global del tema: el celeste pasa a verde hondo / bosque en todo el sitio */
body.di-estilo-nuevo {
--ast-global-color-0: #007468;
--ast-global-color-1: #00594F;
--ast-global-color-2: #17312A;
--ast-global-color-3: #4E5B56;
--ast-global-color-4: #F4F6F2;
--e-global-color-astglobalcolor0: #007468;
--e-global-color-astglobalcolor1: #00594F;
--e-global-color-astglobalcolor2: #17312A;
--e-global-color-astglobalcolor3: #4E5B56;
--e-global-color-astglobalcolor4: #F4F6F2;
--e-global-color-primary: #007468;
--e-global-color-accent: #00AC97;
color: var(--dn-texto);
}
.di-estilo-nuevo .entry-title,
.di-estilo-nuevo .woocommerce-products-header__title,
.di-estilo-nuevo h1.page-title {
color: var(--dn-bosque) !important;
font-size: clamp(36px, 5vw, 60px) !important;
font-weight: 700 !important;
line-height: 1.02 !important;
}
/* Ondas decorativas de Elementor: fuera, look más limpio */
.di-estilo-nuevo .elementor-shape { display: none !important; }
/* Títulos de sección (cajas con imagen SIN imagen): grandes y con presencia */
.di-estilo-nuevo .elementor-widget-image-box:not(:has(.elementor-image-box-img)) .elementor-image-box-title {
font-size: clamp(36px, 4.6vw, 58px) !important;
font-weight: 700 !important;
line-height: 1.02 !important;
letter-spacing: -0.03em !important;
color: var(--dn-bosque) !important;
}
.di-estilo-nuevo .elementor-widget-image-box:not(:has(.elementor-image-box-img)) .elementor-image-box-description {
font-size: 18px !important;
color: var(--dn-texto) !important;
max-width: 40em;
margin-left: auto;
margin-right: auto;
}
/* --- PORTADA --- */
.di-estilo-nuevo .elementor-element-53d02b5a {
min-height: 86vh;
display: flex;
align-items: center;
overflow: hidden;
}
.di-estilo-nuevo .elementor-element-53d02b5a > .elementor-background-overlay {
background: linear-gradient(100deg, rgba(23, 49, 42, .88) 0%, rgba(23, 49, 42, .62) 42%, rgba(23, 49, 42, .10) 78%) !important;
opacity: 1 !important;
}
.di-estilo-nuevo .elementor-element-53d02b5a > .elementor-container {
max-width: 1240px !important;
width: 100%;
}
.di-estilo-nuevo .elementor-element-53d02b5a .elementor-image-box-content {
text-align: left !important;
max-width: 640px;
}
body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-title {
font-size: clamp(56px, 8vw, 112px) !important;
line-height: .92 !important;
color: #FFFFFF !important;
letter-spacing: -0.04em !important;
margin-bottom: 22px !important;
}
body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-title::before {
content: "Escuela online de crianza";
display: block;
width: max-content;
font: 600 13px/1 var(--dn-cuerpo);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dn-bosque);
background: var(--dn-menta);
padding: 8px 14px;
border-radius: 999px;
margin-bottom: 22px;
}
body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-description {
font-size: clamp(18px, 1.6vw, 21px) !important;
color: rgba(255, 255, 255, .92) !important;
max-width: 30em;
margin: 0 !important;
}
.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-button,
.di-estilo-nuevo .elementor-element-53d02b5a .elementor-button-wrapper { text-align: left !important; }
.di-estilo-nuevo .elementor-element-53d02b5a .elementor-button {
background-color: var(--dn-durazno) !important;
color: var(--dn-bosque) !important;
font-size: 17px !important;
padding: 18px 34px !important;
}
.di-estilo-nuevo .elementor-element-53d02b5a .elementor-button:hover {
background-color: #FFFFFF !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}
.di-estilo-nuevo .elementor-element-53d02b5a::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -70px;
bottom: -60px;
border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
background: var(--dn-durazno);
opacity: .45;
pointer-events: none;
animation: dn-flotar 10s ease-in-out infinite;
}
@keyframes dn-flotar {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(14px, -18px) rotate(8deg); }
}
/* --- PILARES: ícono en círculo menta --- */
.di-estilo-nuevo .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
background: var(--dn-menta);
border-radius: 50%;
width: 76px;
height: 76px;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 34px !important;
}
.di-estilo-nuevo .elementor-widget-icon-box .elementor-icon-box-title,
.di-estilo-nuevo .elementor-widget-icon-box .elementor-icon-box-title a {
font-size: 24px !important;
font-weight: 700 !important;
color: var(--dn-bosque) !important;
}
/* --- QUIÉN ES ANA LUCÍA: fondo menta, foto con forma orgánica --- */
.di-estilo-nuevo .elementor-element-56fc06bb {
background-color: var(--dn-menta) !important;
padding-top: 72px !important;
padding-bottom: 72px !important;
}
body.di-estilo-nuevo .elementor-element-56fc06bb .elementor-widget-image img {
border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; /* sin !important: si no, la animación "respirar" no puede cambiarla */
box-shadow: 0 24px 50px rgba(23, 49, 42, .16);
}
.di-estilo-nuevo .elementor-accordion .elementor-accordion-item {
background: #FFFFFF;
border: 0 !important;
border-radius: 18px;
margin-bottom: 10px;
overflow: hidden;
}
.di-estilo-nuevo .elementor-accordion .elementor-tab-title,
.di-estilo-nuevo .elementor-accordion .elementor-tab-title a {
font-family: var(--dn-display) !important;
font-weight: 600 !important;
font-size: 18px !important;
color: var(--dn-bosque) !important;
border: 0 !important;
}
.di-estilo-nuevo .elementor-accordion .elementor-tab-content { border: 0 !important; }
/* --- TESTIMONIOS: fondo bosque, tarjetas con comilla grande --- */
.di-estilo-nuevo .elementor-element-14f241ad {
background-color: var(--dn-bosque) !important;
padding-top: 80px !important;
padding-bottom: 80px !important;
}
body.di-estilo-nuevo .elementor-element-14f241ad .elementor-widget-image-box .elementor-image-box-title { color: #FFFFFF !important; }
.di-estilo-nuevo .elementor-widget-testimonial > .elementor-widget-container {
position: relative;
padding-top: 52px !important;
}
.di-estilo-nuevo .elementor-widget-testimonial > .elementor-widget-container::before {
content: "\201C";
position: absolute;
left: 24px;
top: -6px;
font: 700 92px/1 var(--dn-display);
color: var(--dn-durazno);
}
/* --- Cursos del inicio: aire --- */
.di-estilo-nuevo .elementor-element-7bda790,
.di-estilo-nuevo .elementor-element-b924233 { padding-top: 40px !important; }
/* --- Pie: llamada final grande --- */
.di-estilo-nuevo .site-footer h1, .di-estilo-nuevo .site-footer h2,
.di-estilo-nuevo .site-footer h3, .di-estilo-nuevo .site-footer .widget-title {
font-family: var(--dn-display) !important;
color: #FFFFFF !important;
font-size: clamp(28px, 3.4vw, 42px) !important;
letter-spacing: -0.02em;
}
@media (max-width: 767px) {
.di-estilo-nuevo .elementor-element-53d02b5a { min-height: 78vh; }
.di-estilo-nuevo .elementor-element-53d02b5a > .elementor-background-overlay {
background: linear-gradient(180deg, rgba(23, 49, 42, .55) 0%, rgba(23, 49, 42, .85) 70%) !important;
}
.di-estilo-nuevo .elementor-element-53d02b5a::after { width: 120px; height: 120px; right: -20px; bottom: 6%; }
}
@media (prefers-reduced-motion: reduce) {
.di-estilo-nuevo .elementor-element-53d02b5a::after { animation: none; }
}
/* ==========================================================================
v3 (03/10, noche): toque premium + Mi cuenta + cursos (LearnDash).
Movimiento suave, vidrio, sombras en capas, brillos. Liviano: sin librerías.
========================================================================== */
html { scroll-behavior: smooth; }
.di-estilo-nuevo ::selection { background: var(--dn-durazno); color: var(--dn-bosque); }
.di-estilo-nuevo {
--dn-sombra-1: 0 1px 2px rgba(23, 49, 42, .04), 0 6px 18px rgba(23, 49, 42, .06);
--dn-sombra-2: 0 2px 4px rgba(23, 49, 42, .05), 0 22px 48px rgba(23, 49, 42, .14);
--dn-curva: cubic-bezier(.2, .7, .2, 1);
}
/* --- Barra de progreso de lectura --- */
#dn-progreso {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 100001;
transform-origin: 0 50%;
transform: scaleX(0);
background: linear-gradient(90deg, var(--dn-agua), var(--dn-durazno));
pointer-events: none;
}
.admin-bar #dn-progreso { top: 32px; }
@media (max-width: 782px) { .admin-bar #dn-progreso { top: 46px; } }
/* --- Encabezado de vidrio al bajar --- */
.di-estilo-nuevo:not(.ast-theme-transparent-header) #masthead {
position: sticky;
top: 0;
z-index: 999;
}
.admin-bar.di-estilo-nuevo:not(.ast-theme-transparent-header) #masthead { top: 32px; }
.di-estilo-nuevo.dn-scrolled #masthead .main-header-bar,
.di-estilo-nuevo.dn-scrolled #masthead .ast-primary-header-bar {
transition: background-color .35s ease, box-shadow .35s ease;
}
.di-estilo-nuevo.dn-scrolled:not(.ast-theme-transparent-header) #masthead .main-header-bar,
.di-estilo-nuevo.dn-scrolled:not(.ast-theme-transparent-header) #masthead .ast-primary-header-bar {
background-color: rgba(0, 116, 104, .88) !important;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
box-shadow: 0 10px 30px rgba(23, 49, 42, .14);
}
.di-estilo-nuevo.ast-theme-transparent-header.dn-scrolled #masthead {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: rgba(23, 49, 42, .74);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
box-shadow: 0 12px 34px rgba(0, 0, 0, .20);
animation: dn-bajar .45s var(--dn-curva);
}
.admin-bar.di-estilo-nuevo.ast-theme-transparent-header.dn-scrolled #masthead { top: 32px; }
@media (max-width: 782px) {
.admin-bar.di-estilo-nuevo.ast-theme-transparent-header.dn-scrolled #masthead,
.admin-bar.di-estilo-nuevo:not(.ast-theme-transparent-header) #masthead { top: 46px; }
}
.di-estilo-nuevo.ast-theme-transparent-header.dn-scrolled #masthead .main-header-bar,
.di-estilo-nuevo.ast-theme-transparent-header.dn-scrolled #masthead .ast-primary-header-bar {
background: transparent !important;
border: 0 !important;
}
@keyframes dn-bajar { from { transform: translateY(-100%); } to { transform: none; } }
.di-estilo-nuevo .main-header-menu > .menu-item > .menu-link { transition: opacity .25s ease; }
.di-estilo-nuevo .main-header-menu:hover > .menu-item > .menu-link { opacity: .7; }
.di-estilo-nuevo .main-header-menu:hover > .menu-item > .menu-link:hover { opacity: 1; }
/* --- Portada: entrada en cascada + paneo lento de la foto --- */
.di-estilo-nuevo .elementor-element-53d02b5a {
animation: dn-paneo 26s ease-in-out infinite alternate;
}
@keyframes dn-paneo {
from { background-position: 50% 42%; }
to { background-position: 57% 30%; }
}
html.dn-js body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-title,
html.dn-js body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-description,
html.dn-js body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-button {
opacity: 0;
transform: translateY(26px);
filter: blur(6px);
}
html.dn-js body.di-estilo-nuevo.dn-listo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-title,
html.dn-js body.di-estilo-nuevo.dn-listo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-description,
html.dn-js body.di-estilo-nuevo.dn-listo .elementor-element-53d02b5a .elementor-widget-button {
opacity: 1;
transform: none;
filter: none;
transition: opacity 1s var(--dn-curva), transform 1s var(--dn-curva), filter 1s var(--dn-curva);
}
html.dn-js body.di-estilo-nuevo.dn-listo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-description { transition-delay: .18s; }
html.dn-js body.di-estilo-nuevo.dn-listo .elementor-element-53d02b5a .elementor-widget-button { transition-delay: .34s; }
/* --- Pilares: vidrio sobre la portada --- */
body.di-estilo-nuevo .elementor-element-1e537621 .elementor-widget-icon-box > .elementor-widget-container {
background: rgba(255, 255, 255, .84);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255, 255, 255, .7);
box-shadow: var(--dn-sombra-2);
}
.di-estilo-nuevo .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
transition: transform .5s var(--dn-curva), background-color .3s ease;
}
.di-estilo-nuevo .elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon {
transform: rotate(-8deg) scale(1.08);
background: var(--dn-durazno);
}
/* --- Tarjetas: sombras en capas y zoom suave de la imagen --- */
.di-estilo-nuevo .elementor-widget-image-box:has(.elementor-image-box-img) > .elementor-widget-container,
.di-estilo-nuevo .elementor-widget-testimonial > .elementor-widget-container,
.di-estilo-nuevo ul.products li.product {
box-shadow: var(--dn-sombra-1);
transition: transform .45s var(--dn-curva), box-shadow .45s var(--dn-curva) !important;
}
.di-estilo-nuevo .elementor-widget-image-box:has(.elementor-image-box-img) > .elementor-widget-container:hover,
.di-estilo-nuevo .elementor-widget-testimonial > .elementor-widget-container:hover,
.di-estilo-nuevo ul.products li.product:hover {
transform: translateY(-6px);
box-shadow: var(--dn-sombra-2);
}
.di-estilo-nuevo ul.products li.product a img {
transition: transform .9s var(--dn-curva) !important;
}
.di-estilo-nuevo ul.products li.product:hover a img { transform: scale(1.05); }
/* --- Botones de Elementor: brillo que cruza al pasar el mouse --- */
.di-estilo-nuevo .elementor-button { position: relative; overflow: hidden; }
.di-estilo-nuevo .elementor-button::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .8s var(--dn-curva);
pointer-events: none;
}
.di-estilo-nuevo .elementor-button:hover::after { transform: translateX(120%); }
/* --- Títulos de sección: rayita durazno debajo --- */
.di-estilo-nuevo .elementor-widget-image-box:not(:has(.elementor-image-box-img)) .elementor-image-box-title::after {
content: "";
display: block;
width: 56px;
height: 6px;
border-radius: 999px;
background: var(--dn-durazno);
margin: 18px auto 0;
}
body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-title::after { display: none; }
/* --- Testimonios: vidrio oscuro sobre bosque --- */
body.di-estilo-nuevo .elementor-element-14f241ad .elementor-widget-testimonial > .elementor-widget-container {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: none;
backdrop-filter: blur(6px);
}
body.di-estilo-nuevo .elementor-element-14f241ad .elementor-widget-testimonial > .elementor-widget-container:hover {
background: rgba(255, 255, 255, .10);
box-shadow: 0 22px 48px rgba(0, 0, 0, .28);
}
/* Las columnas de los testimonios traen fondo blanco desde Elementor: con texto blanco quedaban ilegibles */
body.di-estilo-nuevo .elementor-element-14f241ad .elementor-column > .elementor-widget-wrap {
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
body.di-estilo-nuevo .elementor-element-14f241ad .elementor-testimonial-content { color: rgba(255, 255, 255, .9) !important; }
body.di-estilo-nuevo .elementor-element-14f241ad .elementor-testimonial-name { color: #FFFFFF !important; }
body.di-estilo-nuevo .elementor-element-14f241ad .elementor-testimonial-job { color: #9FE3D6 !important; }
/* ==========================================================================
MI CUENTA
========================================================================== */
.di-estilo-nuevo.woocommerce-account .entry-content > .woocommerce,
.di-estilo-nuevo.woocommerce-account .woocommerce { max-width: 1100px; margin: 0 auto; }
.di-estilo-nuevo .woocommerce .col2-set.u-columns {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 28px;
}
.di-estilo-nuevo .woocommerce .col2-set.u-columns::before,
.di-estilo-nuevo .woocommerce .col2-set.u-columns::after { display: none !important; }
.di-estilo-nuevo .woocommerce .u-columns .u-column1,
.di-estilo-nuevo .woocommerce .u-columns .u-column2 {
width: auto !important;
float: none !important;
margin: 0 !important;
background: #FFFFFF;
border-radius: 28px;
padding: 36px 34px !important;
box-shadow: var(--dn-sombra-1);
}
.di-estilo-nuevo .woocommerce .u-columns .u-column1 { border-top: 6px solid var(--dn-verde); }
.di-estilo-nuevo .woocommerce .u-columns .u-column2 { border-top: 6px solid var(--dn-durazno); }
.di-estilo-nuevo .woocommerce .u-columns h2 {
font-size: 32px !important;
font-weight: 700 !important;
color: var(--dn-bosque) !important;
margin-bottom: 18px !important;
}
.di-estilo-nuevo .woocommerce form.login,
.di-estilo-nuevo .woocommerce form.register {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
.di-estilo-nuevo .woocommerce form .form-row label {
font-weight: 600;
color: var(--dn-bosque);
font-size: 15px;
}
.di-estilo-nuevo .woocommerce-form-login__submit,
.di-estilo-nuevo .woocommerce-form-register__submit { width: 100%; margin-top: 8px !important; }
.di-estilo-nuevo .woocommerce .lost_password a { color: var(--dn-verde) !important; font-weight: 600; }
/* con sesión iniciada */
.di-estilo-nuevo .woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 10px;
background: #FFFFFF;
border-radius: 24px;
box-shadow: var(--dn-sombra-1);
}
.di-estilo-nuevo .woocommerce-MyAccount-navigation li { border: 0 !important; margin: 0 !important; }
.di-estilo-nuevo .woocommerce-MyAccount-navigation li a {
display: block;
padding: 12px 18px !important;
border-radius: 14px;
color: var(--dn-bosque) !important;
font-weight: 500;
transition: background-color .25s ease;
}
.di-estilo-nuevo .woocommerce-MyAccount-navigation li a:hover { background: var(--dn-menta); }
.di-estilo-nuevo .woocommerce-MyAccount-navigation li.is-active a {
background: var(--dn-verde);
color: #FFFFFF !important;
}
.di-estilo-nuevo .woocommerce-MyAccount-content {
background: #FFFFFF;
border-radius: 24px;
padding: 32px !important;
box-shadow: var(--dn-sombra-1);
}
/* ==========================================================================
CURSOS (LearnDash) — su celeste (#53b0b0) viene con !important: hace falta más prioridad
========================================================================== */
body.di-estilo-nuevo .learndash-wrapper .ld-primary-background,
body.di-estilo-nuevo .learndash-wrapper .ld-expand-button.ld-button-alternate .ld-icon,
body.di-estilo-nuevo .learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active::after {
background-color: var(--dn-verde) !important;
background: var(--dn-verde) !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-primary-color,
body.di-estilo-nuevo .learndash-wrapper .ld-primary-color-hover:hover,
body.di-estilo-nuevo .learndash-wrapper .ld-expand-button.ld-button-alternate {
color: var(--dn-verde) !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-course-status {
background: #FFFFFF !important;
border: 0 !important;
border-radius: 24px !important;
box-shadow: var(--dn-sombra-1);
padding: 22px 26px !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-course-status-label {
font-family: var(--dn-cuerpo) !important;
font-size: 12px !important;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--dn-texto) !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-status {
border-radius: 999px !important;
font-family: var(--dn-cuerpo) !important;
font-weight: 600 !important;
padding: 6px 14px !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-status-waiting,
body.di-estilo-nuevo .learndash-wrapper .ld-tertiary-background {
background: var(--dn-durazno) !important;
color: var(--dn-bosque) !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-course-status-price {
font-family: var(--dn-display) !important;
font-size: 28px !important;
color: var(--dn-bosque) !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-button,
body.di-estilo-nuevo .learndash-wrapper .learndash-button-closed,
body.di-estilo-nuevo .learndash-wrapper .ld-course-status-action a,
body.di-estilo-nuevo .learndash-wrapper .ld-course-status-action .btn-join {
background-color: var(--dn-verde) !important;
border-radius: 999px !important;
color: #FFFFFF !important;
font-family: var(--dn-cuerpo) !important;
font-weight: 600 !important;
padding: 12px 24px !important;
border: 0 !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab {
font-family: var(--dn-cuerpo) !important;
font-weight: 600 !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-item-list .ld-section-heading h2 {
font-family: var(--dn-display) !important;
font-size: 28px !important;
color: var(--dn-bosque) !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-item-list .ld-item-list-item {
background: #FFFFFF !important;
border: 0 !important;
border-radius: 18px !important;
box-shadow: var(--dn-sombra-1);
margin-bottom: 12px !important;
transition: transform .4s var(--dn-curva), box-shadow .4s var(--dn-curva);
}
body.di-estilo-nuevo .learndash-wrapper .ld-item-list .ld-item-list-item:hover {
transform: translateY(-3px);
box-shadow: var(--dn-sombra-2);
}
body.di-estilo-nuevo .learndash-wrapper .ld-item-list .ld-item-name {
font-size: 18px !important;
font-weight: 600 !important;
color: var(--dn-bosque) !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-table-list .ld-table-list-item { border-color: rgba(23, 49, 42, .06) !important; }
body.di-estilo-nuevo .learndash-wrapper .ld-progress .ld-progress-bar {
background: #E4ECE8 !important;
border-radius: 999px !important;
height: 10px !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
background: linear-gradient(90deg, var(--dn-verde), var(--dn-agua)) !important;
border-radius: 999px !important;
}
/* lecciones en modo foco */
body.di-estilo-nuevo .learndash-wrapper .ld-focus .ld-focus-header {
background: rgba(255, 255, 255, .86) !important;
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(23, 49, 42, .06) !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-focus .ld-focus-sidebar { background: #FFFFFF !important; }
body.di-estilo-nuevo .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading,
body.di-estilo-nuevo .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger {
background: var(--dn-bosque) !important;
}
body.di-estilo-nuevo .learndash-wrapper .ld-focus .ld-focus-content h1 {
font-family: var(--dn-display) !important;
color: var(--dn-bosque) !important;
}
@media (prefers-reduced-motion: reduce) {
.di-estilo-nuevo .elementor-element-53d02b5a { animation: none !important; }
html.dn-js body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-title,
html.dn-js body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-image-box .elementor-image-box-description,
html.dn-js body.di-estilo-nuevo .elementor-element-53d02b5a .elementor-widget-button { opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* --- Ajustes v3.1: encabezado interno verde hondo con menú blanco (contraste), y el botón "Apuntarme" de LearnDash --- */
body.di-estilo-nuevo:not(.ast-theme-transparent-header) .ast-primary-header-bar,
body.di-estilo-nuevo:not(.ast-theme-transparent-header) .main-header-bar,
body.di-estilo-nuevo:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .ast-primary-header-bar,
body.di-estilo-nuevo:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .main-header-bar {
background-color: var(--dn-verde) !important;
}
body.di-estilo-nuevo:not(.ast-theme-transparent-header) .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link,
body.di-estilo-nuevo:not(.ast-theme-transparent-header) .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link:hover,
body.di-estilo-nuevo:not(.ast-theme-transparent-header) .ast-primary-header-bar .main-header-menu > .current-menu-item > .menu-link {
color: #FFFFFF !important;
text-decoration-color: var(--dn-durazno) !important;
}
body.di-estilo-nuevo .ast-mobile-menu-trigger-minimal,
body.di-estilo-nuevo .ast-mobile-menu-trigger-minimal svg { color: #FFFFFF !important; fill: #FFFFFF !important; }
body.di-estilo-nuevo .learndash-wrapper #btn-join,
body.di-estilo-nuevo .learndash-wrapper .btn-join {
background-color: var(--dn-verde) !important;
border-radius: 999px !important;
color: #FFFFFF !important;
font-family: var(--dn-cuerpo) !important;
font-weight: 600 !important;
padding: 12px 24px !important;
border: 0 !important;
transition: background-color .25s ease, transform .25s ease !important;
}
body.di-estilo-nuevo .learndash-wrapper #btn-join:hover { background-color: var(--dn-verde-hover) !important; transform: translateY(-2px); }
/* ==========================================================================
v4 (04/10, madrugada): ilustraciones de línea hechas con IA (Gemini) + grano de papel.
Cada dibujo es una MÁSCARA (ilustraciones/*.webp, solo transparencia): el color lo pone el CSS,
así se pueden recolorear sin volver a generarlos. Los originales están en demo/ilustraciones-ia/.
========================================================================== */
.di-estilo-nuevo {
--dn-grano: url("ilustraciones/papel.webp");
}
/* Base común de los adornos: no se pueden tocar ni tapan el contenido */
.di-estilo-nuevo .elementor-element-1e537621,
.di-estilo-nuevo .elementor-element-7bda790,
.di-estilo-nuevo .elementor-element-56fc06bb,
.di-estilo-nuevo .elementor-element-14f241ad { overflow: hidden; }
.di-estilo-nuevo .elementor-element-1e537621 > .elementor-container,
.di-estilo-nuevo .elementor-element-7bda790 > .elementor-container,
.di-estilo-nuevo .elementor-element-56fc06bb > .elementor-container,
.di-estilo-nuevo .elementor-element-14f241ad > .elementor-container { position: relative; z-index: 1; }
.di-estilo-nuevo .elementor-element-1e537621::after,
.di-estilo-nuevo .elementor-element-7bda790::before,
.di-estilo-nuevo .elementor-element-56fc06bb::after,
.di-estilo-nuevo .elementor-element-14f241ad::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
/* Grano de papel en las secciones claras (calidez, que no se vea "plano de pantalla") */
.di-estilo-nuevo .elementor-element-1e537621,
.di-estilo-nuevo .elementor-element-7bda790,
.di-estilo-nuevo .elementor-element-b924233,
.di-estilo-nuevo .elementor-element-56fc06bb {
background-image: var(--dn-grano) !important;
background-size: 200px 200px !important;
background-repeat: repeat !important;
}
/* Pilares: un brote grande que se mece, arriba a la derecha */
.di-estilo-nuevo .elementor-element-1e537621::after {
width: clamp(150px, 20vw, 290px);
aspect-ratio: 560 / 579;
top: 28px;
right: clamp(-30px, 2vw, 40px);
background-color: var(--dn-verde, #007468);
opacity: .16;
-webkit-mask-image: url("ilustraciones/brote.webp"); mask-image: url("ilustraciones/brote.webp");
transform-origin: 50% 100%;
animation: dn-mecer 7s ease-in-out infinite;
}
@keyframes dn-mecer {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
/* Cursos: una rama durazno como remate arriba del título */
.di-estilo-nuevo .elementor-element-7bda790 { padding-top: 96px !important; }
.di-estilo-nuevo .elementor-element-7bda790::before {
width: clamp(170px, 18vw, 240px);
aspect-ratio: 1100 / 361;
top: 30px;
left: 50%;
transform: translateX(-50%);
background-color: #E0976A; /* durazno más hondo: sobre fondo claro el de la marca se pierde */
-webkit-mask-image: url("ilustraciones/rama.webp"); mask-image: url("ilustraciones/rama.webp");
}
/* Quién es Ana Lucía: dos manos (adulta y de niño) con un brote, grandes y suaves, abajo a la derecha */
.di-estilo-nuevo .elementor-element-56fc06bb::after {
width: clamp(220px, 30vw, 440px);
aspect-ratio: 820 / 978;
bottom: -40px;
right: -40px;
background-color: var(--dn-bosque, #17312A);
opacity: .09;
-webkit-mask-image: url("ilustraciones/manos.webp"); mask-image: url("ilustraciones/manos.webp");
}
/* Testimonios: hojas que flotan por todo el fondo bosque */
.di-estilo-nuevo .elementor-element-14f241ad::after {
inset: 0;
background-color: #FFFFFF;
opacity: .07;
-webkit-mask-image: url("ilustraciones/hojas.webp"); mask-image: url("ilustraciones/hojas.webp");
-webkit-mask-repeat: repeat; mask-repeat: repeat;
-webkit-mask-size: 520px auto; mask-size: 520px auto;
-webkit-mask-position: 0 0; mask-position: 0 0;
animation: dn-hojas 60s linear infinite;
}
@keyframes dn-hojas {
from { -webkit-mask-position: 0 0; mask-position: 0 0; }
to { -webkit-mask-position: 520px 543px; mask-position: 520px 543px; }
}
/* Mi cuenta sin sesión (pantalla de ingreso): la madre con su hijo, en menta */
.di-estilo-nuevo.woocommerce-account:not(.logged-in) .site-content { position: relative; overflow: hidden; }
.di-estilo-nuevo.woocommerce-account:not(.logged-in) .site-content::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
width: clamp(200px, 26vw, 380px);
aspect-ratio: 720 / 1049;
right: 3vw;
bottom: 40px;
background-color: var(--dn-verde, #007468);
opacity: .14;
-webkit-mask: url("ilustraciones/madre.webp") center / contain no-repeat;
mask: url("ilustraciones/madre.webp") center / contain no-repeat;
}
.di-estilo-nuevo.woocommerce-account:not(.logged-in) .site-content > * { position: relative; z-index: 1; }
@media (max-width: 767px) {
.di-estilo-nuevo .elementor-element-1e537621::after { width: 120px; top: 10px; right: -24px; opacity: .12; }
.di-estilo-nuevo .elementor-element-7bda790 { padding-top: 76px !important; }
.di-estilo-nuevo .elementor-element-7bda790::before { width: 150px; top: 24px; }
.di-estilo-nuevo .elementor-element-56fc06bb::after { width: 200px; bottom: -30px; right: -50px; }
.di-estilo-nuevo .elementor-element-14f241ad::after { -webkit-mask-size: 340px auto; mask-size: 340px auto; }
.di-estilo-nuevo.woocommerce-account:not(.logged-in) .site-content::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.di-estilo-nuevo .elementor-element-1e537621::after,
.di-estilo-nuevo .elementor-element-14f241ad::after { animation: none; }
}
/* v4.1 — "Nuestro equipo" es una copia del inicio (misma portada 53d02b5a): ahí la portada va más contenida,
sin la etiqueta "Escuela online de crianza" ni el título gigante. */
body.di-estilo-nuevo:not(.home) .elementor-element-53d02b5a { min-height: 62vh; }
body.di-estilo-nuevo:not(.home) .elementor-element-53d02b5a .elementor-image-box-title {
font-size: clamp(40px, 5vw, 68px) !important;
line-height: 1 !important;
}
body.di-estilo-nuevo:not(.home) .elementor-element-53d02b5a .elementor-image-box-title::before { content: none !important; }
body.di-estilo-nuevo:not(.home) .elementor-element-53d02b5a::after { display: none; }
/* Categoría del producto ("Cursos"): venía en el celeste viejo, casi invisible sobre el fondo claro */
.di-estilo-nuevo .single-product-category a,
.di-estilo-nuevo .product_meta a,
.di-estilo-nuevo .woocommerce-breadcrumb a {
color: var(--dn-verde) !important;
font-weight: 600;
}
/* ==========================================================================
v5 (04/10, mañana) — lo que vio Ramiro al probar: tarjetas cortadas, equipo escalonado,
contacto sin enlaces, encabezados oscuros ilegibles, logo, buscador y animaciones al bajar.
========================================================================== */
/* --- Tarjeta "premium" común: se eleva y la cruza un brillo, como los botones --- */
.di-estilo-nuevo .elementor-element-5b4952c1 .elementor-widget-icon-box > .elementor-widget-container,
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-column > .elementor-widget-wrap,
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-section {
position: relative;
overflow: hidden;
transition: transform .5s var(--dn-curva), box-shadow .5s var(--dn-curva) !important;
}
.di-estilo-nuevo .elementor-element-5b4952c1 .elementor-widget-icon-box > .elementor-widget-container::before,
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-column > .elementor-widget-wrap::before,
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .9s var(--dn-curva);
pointer-events: none;
}
.di-estilo-nuevo .elementor-element-5b4952c1 .elementor-widget-icon-box > .elementor-widget-container:hover,
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-column > .elementor-widget-wrap:hover,
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-section:hover {
transform: translateY(-8px);
box-shadow: 0 28px 56px rgba(23, 49, 42, .16) !important;
}
.di-estilo-nuevo .elementor-element-5b4952c1 .elementor-widget-icon-box > .elementor-widget-container:hover::before,
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-column > .elementor-widget-wrap:hover::before,
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-section:hover::before {
transform: translateX(120%);
}
/* --- 1. Inicio, pilares: las tarjetas suben 80px sobre la foto. El recorte de anoche (por el brote) las cortaba:
ahora solo se recorta a los costados. Sin el cuadro blanco de Elementor detrás, sin escalón y de igual alto. --- */
body.di-estilo-nuevo .elementor-element-1e537621 { overflow: visible !important; overflow-x: clip !important; }
body.di-estilo-nuevo .elementor-element-5b4952c1 > .elementor-container { align-items: stretch; }
body.di-estilo-nuevo .elementor-element-5b4952c1 .elementor-inner-column > .elementor-widget-wrap {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
margin-top: 0 !important;
display: flex;
flex-direction: column;
height: 100%;
}
body.di-estilo-nuevo .elementor-element-5b4952c1 .elementor-widget-icon-box { flex: 1; display: flex; }
body.di-estilo-nuevo .elementor-element-5b4952c1 .elementor-widget-icon-box > .elementor-widget-container { flex: 1; }
.di-estilo-nuevo .elementor-element-5b4952c1 .elementor-icon { transition: transform .6s var(--dn-curva), background-color .4s ease; }
.di-estilo-nuevo .elementor-element-5b4952c1 .elementor-widget-container:hover .elementor-icon { transform: scale(1.1) rotate(-8deg); }
/* --- 2. Nuestro equipo: tarjetas redondeadas, parejas de igual alto (el JS iguala cada fila), foto que llena
la tarjeta y se acerca al pasar el mouse --- */
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-section {
border-radius: 26px !important;
background: #FFFFFF !important;
border: 1px solid rgba(23, 49, 42, .06) !important;
box-shadow: 0 12px 34px rgba(23, 49, 42, .08) !important;
display: flex;
flex-direction: column;
}
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-section > .elementor-container { flex: 1; align-items: stretch; }
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-section img {
transition: transform 1s var(--dn-curva);
}
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-section:hover img { transform: scale(1.06); }
@media (min-width: 768px) {
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-column:first-child > .elementor-widget-wrap {
height: 100%;
padding: 0 !important;
overflow: hidden;
}
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-column:first-child .elementor-widget-image,
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-column:first-child .elementor-widget-image > .elementor-widget-container {
height: 100%;
margin: 0 !important;
}
.di-estilo-nuevo :is(.elementor-element-7c06f1d, .elementor-element-00784f1, .elementor-element-fb161c1) .elementor-inner-column:first-child img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
border-radius: 0 !important;
}
}
/* --- 3. Contacto: las dos tarjetas enteras se pueden tocar (WhatsApp con mensaje listo / correo) --- */
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-column > .elementor-widget-wrap {
border-radius: 28px !important;
cursor: pointer;
padding-bottom: 56px !important;
}
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-widget { position: static; }
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-heading-title a { color: inherit !important; }
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-heading-title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
}
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-column > .elementor-widget-wrap::after {
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
font: 600 14px/1 var(--dn-cuerpo);
color: var(--dn-verde);
background: var(--dn-menta);
padding: 9px 16px;
border-radius: 999px;
white-space: nowrap;
transition: background-color .3s ease, color .3s ease;
}
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-column:first-child > .elementor-widget-wrap::after { content: "Abrir WhatsApp →"; }
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-column:last-child > .elementor-widget-wrap::after { content: "Escribir un correo →"; }
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-column > .elementor-widget-wrap:hover::after { background: var(--dn-verde); color: #FFFFFF; }
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-icon { transition: transform .6s var(--dn-curva), background-color .3s ease, color .3s ease; }
.di-estilo-nuevo .elementor-element-7748ec6b .elementor-widget-wrap:hover .elementor-icon { transform: scale(1.12) rotate(-8deg); }
/* --- 4. Encabezados con el degradé turquesa→negro viejo (Contacto, Mi cuenta, All Courses):
el texto oscuro del estilo nuevo no se leía. Ahora bosque profundo, texto blanco y hojas. --- */
body.di-estilo-nuevo :is(.elementor-element-1e510346, .elementor-element-65ddfad3, .elementor-element-32cc8b1e) {
background-image: radial-gradient(circle at 82% 18%, rgba(242, 201, 166, .20), transparent 42%),
linear-gradient(120deg, #00594F 0%, #17312A 72%) !important;
position: relative;
overflow: hidden;
}
body.di-estilo-nuevo :is(.elementor-element-1e510346, .elementor-element-65ddfad3, .elementor-element-32cc8b1e) > .elementor-container { position: relative; z-index: 1; }
body.di-estilo-nuevo :is(.elementor-element-1e510346, .elementor-element-65ddfad3, .elementor-element-32cc8b1e) :is(.elementor-image-box-title, .elementor-heading-title) { color: #FFFFFF !important; }
body.di-estilo-nuevo :is(.elementor-element-1e510346, .elementor-element-65ddfad3, .elementor-element-32cc8b1e) :is(.elementor-image-box-description, p) { color: rgba(255, 255, 255, .88) !important; }
body.di-estilo-nuevo :is(.elementor-element-1e510346, .elementor-element-65ddfad3, .elementor-element-32cc8b1e)::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-color: #FFFFFF;
opacity: .06;
-webkit-mask: url("ilustraciones/hojas.webp") 0 0 / 460px auto repeat;
mask: url("ilustraciones/hojas.webp") 0 0 / 460px auto repeat;
}
/* --- 5. Logo: estaba roto desde el sitio viejo (Astra apuntaba a una carpeta /di/ que no existe) --- */
.di-estilo-nuevo .site-branding .custom-logo-link img {
max-width: 168px !important;
height: auto;
filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .28));
transition: transform .6s var(--dn-curva), max-width .4s var(--dn-curva);
}
.di-estilo-nuevo .site-branding .custom-logo-link:hover img { transform: scale(1.06) rotate(-2deg); }
.di-estilo-nuevo.dn-scrolled .site-branding .custom-logo-link img { max-width: 128px !important; }
@media (max-width: 921px) {
.di-estilo-nuevo .site-branding .custom-logo-link img { max-width: 110px !important; }
}
/* --- 6. Buscador de cursos: lupa en el menú + panel con resultados al instante --- */
.di-estilo-nuevo .di-buscar-item .di-buscar-abrir {
background: none;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
color: inherit;
font: inherit;
padding: 0 0 0 1em;
}
.di-estilo-nuevo .di-buscar-abrir svg { width: 20px; height: 20px; transition: transform .4s var(--dn-curva); }
.di-estilo-nuevo .di-buscar-abrir:hover svg { transform: scale(1.15) rotate(-10deg); }
.di-estilo-nuevo .di-buscar-texto { display: none; }
.ast-header-break-point.di-estilo-nuevo .di-buscar-texto { display: inline; }
.ast-header-break-point.di-estilo-nuevo .di-buscar-item .di-buscar-abrir { padding: 0 20px; min-height: 48px; width: 100%; }
.di-buscador {
position: fixed;
inset: 0;
z-index: 100001;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 12vh 16px 16px;
background: rgba(23, 49, 42, .55);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity .3s ease;
}
.di-buscador[hidden] { display: none; }
.di-buscador.dn-abierto { opacity: 1; }
.di-buscador__caja {
width: min(680px, 100%);
background: #FFFFFF;
border-radius: 26px;
box-shadow: 0 40px 80px rgba(0, 0, 0, .3);
padding: 18px;
transform: translateY(-16px) scale(.98);
transition: transform .45s var(--dn-curva);
max-height: 76vh;
overflow: auto;
}
.di-buscador.dn-abierto .di-buscador__caja { transform: none; }
.di-buscador__form {
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid #E3ECE8;
padding: 4px 6px 14px;
}
.di-buscador__form svg { width: 22px; height: 22px; color: var(--dn-verde); flex: none; }
.di-buscador input[type="search"] {
flex: 1;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
font: 500 20px/1.3 var(--dn-cuerpo);
color: var(--dn-bosque);
padding: 6px 0 !important;
min-width: 0;
}
.di-buscador__cerrar {
border: 1px solid #DCE6E2;
background: #F4F6F2;
color: var(--dn-texto);
border-radius: 10px;
font: 600 12px/1 var(--dn-cuerpo);
padding: 8px 10px;
cursor: pointer;
}
.di-buscador__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 6px 4px; }
.di-buscador__chips span { font: 500 13px/1 var(--dn-cuerpo); color: var(--dn-texto); align-self: center; margin-right: 4px; }
.di-buscador__chips button {
border: 0;
background: var(--dn-menta);
color: var(--dn-bosque);
font: 600 13px/1 var(--dn-cuerpo);
padding: 9px 14px;
border-radius: 999px;
cursor: pointer;
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.di-buscador__chips button:hover { background: var(--dn-verde); color: #FFFFFF; transform: translateY(-2px); }
.di-buscador__resultados { list-style: none; margin: 8px 0 0; padding: 0; }
.di-buscador__resultados li { opacity: 0; transform: translateY(8px); animation: dn-aparecer .4s var(--dn-curva) forwards; }
@keyframes dn-aparecer { to { opacity: 1; transform: none; } }
.di-buscador__resultados a {
display: flex;
align-items: center;
gap: 14px;
padding: 10px;
border-radius: 16px;
color: var(--dn-bosque) !important;
text-decoration: none !important;
transition: background-color .2s ease;
}
.di-buscador__resultados a:hover, .di-buscador__resultados a:focus { background: #EEF5F2; outline: 0; }
.di-buscador__resultados img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: #EEF3F1; }
.di-buscador__resultados strong { font: 600 16px/1.3 var(--dn-display); }
.di-buscador__vacio { padding: 18px 8px 8px; color: var(--dn-texto); font-size: 15px; }
/* ==========================================================================
Animaciones al bajar (scroll). Sin JS todo se ve normal; con JS, cada sección se "activa" al entrar.
========================================================================== */
/* Portada del inicio: profundidad. La foto pasa a una capa propia que baja más lento y se acerca;
el texto sube y se desvanece; el JS escribe --dn-p (0 arriba → 1 cuando la portada salió). */
body.home.di-estilo-nuevo .elementor-element-53d02b5a { --dn-p: 0; }
body.home.di-estilo-nuevo .elementor-element-53d02b5a::before {
content: "";
position: absolute;
inset: -2% 0 -2% 0;
background: inherit;
transform: translate3d(0, calc(var(--dn-p) * 28%), 0) scale(calc(1.02 + var(--dn-p) * .14));
filter: brightness(calc(1 - var(--dn-p) * .35));
will-change: transform;
pointer-events: none;
}
body.home.di-estilo-nuevo .elementor-element-53d02b5a > .elementor-container {
transform: translate3d(0, calc(var(--dn-p) * -140px), 0);
opacity: calc(1 - var(--dn-p) * 1.4);
will-change: transform, opacity;
}
body.home.di-estilo-nuevo .elementor-element-53d02b5a::after { translate: 0 calc(var(--dn-p) * -260px); }
.dn-deslizar {
position: absolute;
left: 50%;
bottom: 28px;
z-index: 3;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .85);
font: 600 11px/1 var(--dn-cuerpo);
letter-spacing: .18em;
text-transform: uppercase;
opacity: calc(1 - var(--dn-p) * 6);
pointer-events: none;
}
.dn-deslizar i {
width: 24px;
height: 38px;
border: 2px solid rgba(255, 255, 255, .7);
border-radius: 14px;
position: relative;
}
.dn-deslizar i::after {
content: "";
position: absolute;
left: 50%;
top: 7px;
width: 4px;
height: 8px;
margin-left: -2px;
border-radius: 2px;
background: #FFFFFF;
animation: dn-rueda 1.8s ease-in-out infinite;
}
@keyframes dn-rueda {
0% { transform: translateY(0); opacity: 1; }
70% { transform: translateY(12px); opacity: 0; }
100% { transform: translateY(0); opacity: 0; }
}
/* Pilares: el brote crece desde la tierra al aparecer */
html.dn-js .di-estilo-nuevo .elementor-element-1e537621::after { scale: .25; opacity: 0; }
html.dn-js .di-estilo-nuevo .elementor-element-1e537621.dn-en-vista::after {
scale: 1;
opacity: .16;
transition: scale 1.8s var(--dn-curva) .2s, opacity 1.2s ease .2s;
}
/* Cursos: la rama se dibuja de izquierda a derecha */
html.dn-js .di-estilo-nuevo .elementor-element-7bda790::before { clip-path: inset(0 100% 0 0); }
html.dn-js .di-estilo-nuevo .elementor-element-7bda790.dn-en-vista::before {
clip-path: inset(0 0 0 0);
transition: clip-path 1.6s var(--dn-curva) .15s;
}
/* Ana Lucía: las manos suben suave */
html.dn-js .di-estilo-nuevo .elementor-element-56fc06bb::after { translate: 0 80px; opacity: 0; }
html.dn-js .di-estilo-nuevo .elementor-element-56fc06bb.dn-en-vista::after {
translate: 0 0;
opacity: .09;
transition: translate 1.6s var(--dn-curva) .3s, opacity 1.2s ease .3s;
}
/* La rayita durazno de los títulos se estira al aparecer */
html.dn-js .di-estilo-nuevo .elementor-widget-image-box:not(:has(.elementor-image-box-img)) .elementor-image-box-title::after {
transform: scaleX(0);
transition: transform 1s var(--dn-curva) .35s;
}
html.dn-js .di-estilo-nuevo .dn-en-vista .elementor-widget-image-box:not(:has(.elementor-image-box-img)) .elementor-image-box-title::after { transform: scaleX(1); }
/* Foto de Ana Lucía: forma orgánica que respira, aro durazno detrás, se mueve con el scroll (--dn-v, JS)
y se acerca al pasar el mouse */
.di-estilo-nuevo .elementor-element-56fc06bb { --dn-v: .5; }
.di-estilo-nuevo .elementor-element-56fc06bb .elementor-widget-image > .elementor-widget-container {
position: relative;
isolation: isolate;
transform: translate3d(0, calc((var(--dn-v) - .5) * -70px), 0) rotate(calc((var(--dn-v) - .5) * 5deg));
will-change: transform;
}
.di-estilo-nuevo .elementor-element-56fc06bb .elementor-widget-image > .elementor-widget-container::before {
content: "";
position: absolute;
z-index: -1;
width: min(92%, 460px);
aspect-ratio: 1;
left: 50%;
top: 50%;
translate: -46% -48%;
border: 2px solid var(--dn-durazno);
border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
animation: dn-respirar 14s ease-in-out infinite reverse, dn-girar 40s linear infinite;
pointer-events: none;
}
.di-estilo-nuevo .elementor-element-56fc06bb .elementor-widget-image img {
animation: dn-respirar 14s ease-in-out infinite;
transition: transform .9s var(--dn-curva), box-shadow .9s var(--dn-curva);
}
.di-estilo-nuevo .elementor-element-56fc06bb .elementor-widget-image:hover img {
transform: scale(1.04) rotate(-1.5deg);
box-shadow: 0 34px 70px rgba(23, 49, 42, .22);
}
@keyframes dn-respirar {
0%, 100% { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
33% { border-radius: 58% 42% 52% 48% / 44% 56% 44% 56%; }
66% { border-radius: 42% 58% 60% 40% / 56% 48% 52% 44%; }
}
@keyframes dn-girar { to { rotate: 360deg; } }
/* Testimonios: en navegadores que lo permiten, las hojas acompañan el scroll en vez de flotar solas */
@supports (animation-timeline: view()) {
.di-estilo-nuevo .elementor-element-14f241ad::after {
animation: dn-hojas-scroll linear both;
animation-timeline: view();
}
@keyframes dn-hojas-scroll {
from { -webkit-mask-position: 0 0; mask-position: 0 0; }
to { -webkit-mask-position: 120px -420px; mask-position: 120px -420px; }
}
}
@media (prefers-reduced-motion: reduce) {
body.home.di-estilo-nuevo .elementor-element-53d02b5a::before,
body.home.di-estilo-nuevo .elementor-element-53d02b5a > .elementor-container,
.di-estilo-nuevo .elementor-element-56fc06bb .elementor-widget-image > .elementor-widget-container { transform: none !important; }
.di-estilo-nuevo .elementor-element-56fc06bb .elementor-widget-image img,
.di-estilo-nuevo .elementor-element-56fc06bb .elementor-widget-image > .elementor-widget-container::before { animation: none; }
}
/* Títulos de sección: las palabras suben desde abajo, una tras otra (el JS las envuelve; sin JS, texto normal) */
.dn-palabra {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding-bottom: .1em;
margin-bottom: -.1em;
}
.dn-palabra > span {
display: inline-block;
transform: translateY(108%);
transition: transform 1.1s var(--dn-curva);
transition-delay: calc(var(--i, 0) * 75ms + .1s);
}
.dn-en-vista .dn-palabra > span { transform: none; }
/* Tarjetas de cursos: se inclinan en 3D siguiendo el mouse, con un reflejo de luz (solo con mouse) */
@media (hover: hover) and (pointer: fine) {
.di-estilo-nuevo ul.products li.product { will-change: transform; }
.di-estilo-nuevo ul.products li.product.dn-inclinada { transition: transform .12s linear, box-shadow .4s ease !important; }
.di-estilo-nuevo ul.products li.product .dn-reflejo {
position: absolute;
inset: 0;
z-index: 5;
border-radius: inherit;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 55%);
transition: opacity .4s ease;
}
.di-estilo-nuevo ul.products li.product.dn-inclinada .dn-reflejo { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.dn-palabra > span { transform: none !important; transition: none !important; }
}
/* --- v5.1 Menú (pedido de Ramiro): más grande, legible sobre la foto, y al pasar el mouse el botón elegido
se vuelve una píldora blanca que crece mientras los demás se apagan. La página actual queda marcada. --- */
@media (min-width: 922px) {
.di-estilo-nuevo .main-header-menu { gap: 4px; }
.di-estilo-nuevo .main-header-menu > .menu-item > .menu-link {
font-size: 16.5px !important;
font-weight: 600 !important;
letter-spacing: .01em;
padding: 11px 18px !important;
line-height: 1.2 !important;
border-radius: 999px;
text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
transition: background-color .35s var(--dn-curva), color .35s var(--dn-curva), transform .35s var(--dn-curva),
opacity .35s ease, filter .35s ease, box-shadow .35s var(--dn-curva), text-shadow .35s ease !important;
}
/* los otros se apagan… */
.di-estilo-nuevo .main-header-menu:hover > .menu-item > .menu-link {
opacity: .5 !important;
filter: blur(.4px);
}
/* …y el elegido se enciende */
.di-estilo-nuevo .main-header-menu > .menu-item > .menu-link:hover,
.di-estilo-nuevo .main-header-menu > .menu-item > .menu-link:focus-visible {
opacity: 1 !important;
filter: none;
background-color: rgba(255, 255, 255, .96) !important;
color: var(--dn-bosque) !important;
text-shadow: none;
transform: scale(1.08);
box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
outline: 0;
}
.di-estilo-nuevo .main-header-menu > .menu-item > .menu-link:active { transform: scale(.97); }
/* página actual: aro sutil para saber dónde estás */
.di-estilo-nuevo .main-header-menu > .current-menu-item > .menu-link {
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.di-estilo-nuevo .main-header-menu > .current-menu-item > .menu-link:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
/* la lupa, redonda */
.di-estilo-nuevo .main-header-menu > .di-buscar-item > .di-buscar-abrir { padding: 11px 13px !important; margin-left: 6px; }
}
/* v5.2 — Encabezados oscuros: la regla de los títulos de sección (bosque) les ganaba; con más peso, blancos */
html body.di-estilo-nuevo.di-estilo-nuevo :is(.elementor-element-1e510346, .elementor-element-65ddfad3, .elementor-element-32cc8b1e) .elementor-widget-image-box .elementor-image-box-title,
html body.di-estilo-nuevo.di-estilo-nuevo :is(.elementor-element-1e510346, .elementor-element-65ddfad3, .elementor-element-32cc8b1e) .elementor-widget-heading .elementor-heading-title { color: #FFFFFF !important; }
html body.di-estilo-nuevo.di-estilo-nuevo :is(.elementor-element-1e510346, .elementor-element-65ddfad3, .elementor-element-32cc8b1e) .elementor-widget-image-box .elementor-image-box-description { color: rgba(255, 255, 255, .88) !important; }
/* v5.2 — Logo en la esquina superior izquierda (pedido de Ramiro): el encabezado usa todo el ancho en computadora */
@media (min-width: 922px) {
.di-estilo-nuevo #masthead .site-primary-header-wrap,
.di-estilo-nuevo #masthead .ast-primary-header-bar .ast-container {
max-width: none !important;
width: 100% !important;
padding-left: clamp(20px, 2.4vw, 44px) !important;
padding-right: clamp(20px, 2.4vw, 44px) !important;
}
}
/* v5.3 — Portada de "Quién es Ana Lucía" y de las 6 páginas de cada profesional (misma sección 9690a79):
el velo celeste viejo + texto oscuro no se leía. Velo bosque como el inicio y texto blanco. */
html body.di-estilo-nuevo .elementor-element-9690a79 > .elementor-background-overlay {
background-image: linear-gradient(100deg, rgba(23, 49, 42, .9) 0%, rgba(23, 49, 42, .72) 45%, rgba(0, 89, 79, .35) 100%) !important;
opacity: 1 !important;
}
html body.di-estilo-nuevo .elementor-element-9690a79:not(:has(> .elementor-background-overlay)) {
background-image: linear-gradient(120deg, #00594F 0%, #17312A 72%) !important;
}
html body.di-estilo-nuevo.di-estilo-nuevo .elementor-element-9690a79 .elementor-widget-image-box .elementor-image-box-title,
html body.di-estilo-nuevo.di-estilo-nuevo .elementor-element-9690a79 .elementor-widget-heading .elementor-heading-title { color: #FFFFFF !important; }
html body.di-estilo-nuevo.di-estilo-nuevo .elementor-element-9690a79 .elementor-widget-image-box .elementor-image-box-description,
html body.di-estilo-nuevo.di-estilo-nuevo .elementor-element-9690a79 p { color: rgba(255, 255, 255, .9) !important; }
/* v5.4 — "Deslizá" por encima de las tarjetas de pilares, que suben 80px sobre la portada */
.dn-deslizar { bottom: 112px; }
/* v5.5 — Menú en páginas internas: la regla del encabezado verde forzaba texto blanco también en la píldora
blanca (no se leía). Con más peso: texto bosque y sin la rayita. */
@media (min-width: 922px) {
html body.di-estilo-nuevo.di-estilo-nuevo .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link:hover,
html body.di-estilo-nuevo.di-estilo-nuevo .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link:focus-visible {
color: var(--dn-bosque) !important;
text-decoration-color: transparent !important;
}
}
/* v5.5 — Etiqueta "¡Oferta!": colgante en 3D que sobresale de la tarjeta, con brillo que la recorre y vaivén.
La tarjeta deja de recortar (si no, la etiqueta no puede salir); el redondeo pasa a la imagen. */
.di-estilo-nuevo ul.products li.product { overflow: visible !important; }
.di-estilo-nuevo ul.products li.product .astra-shop-thumbnail-wrap {
display: block;
overflow: hidden;
border-radius: 24px 24px 0 0;
}
.di-estilo-nuevo span.onsale {
position: absolute !important;
top: 18px !important;
right: -18px !important;
left: auto !important;
z-index: 7 !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 11px 18px 11px 30px !important;
border-radius: 0 !important;
background: none !important;
color: #FFFFFF !important;
font: 800 14px/1 var(--dn-display) !important;
letter-spacing: .07em;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(120, 30, 10, .35);
isolation: isolate;
transform-origin: 14px 50%;
filter: drop-shadow(0 8px 10px rgba(200, 70, 40, .35)) drop-shadow(0 2px 2px rgba(0, 0, 0, .18));
animation: dn-columpio 3.4s ease-in-out infinite;
pointer-events: none;
}
/* la forma de etiqueta (punta a la izquierda) con su relieve y el brillo que pasa */
.di-estilo-nuevo span.onsale::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: 4px 10px 10px 4px;
clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
background:
linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 45%),
linear-gradient(135deg, #FF9F6E 0%, #EE6B43 60%, #D9532F 100%);
animation: dn-brillo-etiqueta 3.4s ease-in-out infinite;
}
/* el agujerito del hilo */
.di-estilo-nuevo span.onsale::after {
content: "";
position: absolute;
left: 13px;
top: 50%;
width: 7px;
height: 7px;
margin-top: -3.5px;
border-radius: 50%;
background: #FFF6EF;
box-shadow: inset 0 1px 2px rgba(120, 30, 10, .45);
}
@keyframes dn-columpio {
0%, 100% { transform: rotate(7deg); }
50% { transform: rotate(-3deg); }
}
@keyframes dn-brillo-etiqueta {
0%, 55% { background-position: -150% 0, 0 0, 0 0; }
100% { background-position: 150% 0, 0 0, 0 0; }
}
.di-estilo-nuevo ul.products li.product:hover span.onsale { animation-duration: 1.2s; }
@media (prefers-reduced-motion: reduce) {
.di-estilo-nuevo span.onsale, .di-estilo-nuevo span.onsale::before { animation: none; }
}
/* v5.5 — "Quién es Ana Lucía": la foto (1366px) quedaba pegada a la izquierda y el texto le tapaba la cara.
En computadora: texto a la izquierda sobre verde bosque y la foto a la derecha, fundiéndose. */
@media (min-width: 1025px) {
body.page-id-158.di-estilo-nuevo .elementor-element-9690a79 {
background-size: auto 125% !important;
background-position: right 35% !important;
background-repeat: no-repeat !important;
background-color: #17312A !important;
}
html body.page-id-158.di-estilo-nuevo .elementor-element-9690a79 > .elementor-background-overlay {
background-image: linear-gradient(90deg, #17312A 0%, #17312A 30%, rgba(23, 49, 42, .82) 44%, rgba(23, 49, 42, .2) 66%, rgba(23, 49, 42, 0) 100%) !important;
opacity: 1 !important;
}
body.page-id-158.di-estilo-nuevo .elementor-element-9690a79 > .elementor-container { max-width: 1240px !important; }
body.page-id-158.di-estilo-nuevo .elementor-element-9690a79 .elementor-widget-image-box {
max-width: 600px;
margin-right: auto;
}
html body.page-id-158.di-estilo-nuevo .elementor-element-9690a79 .elementor-image-box-content { text-align: left !important; }
html body.page-id-158.di-estilo-nuevo .elementor-element-9690a79 .elementor-image-box-title::after { margin-left: 0 !important; margin-right: auto !important; }
}
/* ==========================================================================
v6 (04/10) — La portada como "escena" + dibujos que flotan + fondo que cambia de color.
Todo lo arma el JS (sin JS la portada se ve como antes). Dibujos nuevos: palmas (el juego de manos de la foto),
corazón de manos, ritmo (notas y estrellas), arcoíris, mariposa y sol.
========================================================================== */
.dn-st-palmas { aspect-ratio: 640 / 444; --m: url("ilustraciones/palmas.webp"); }
.dn-st-corazon { aspect-ratio: 640 / 355; --m: url("ilustraciones/corazon.webp"); }
.dn-st-ritmo { aspect-ratio: 820 / 818; --m: url("ilustraciones/ritmo.webp"); }
.dn-st-arcoiris { aspect-ratio: 560 / 372; --m: url("ilustraciones/arcoiris.webp"); }
.dn-st-mariposa { aspect-ratio: 520 / 398; --m: url("ilustraciones/mariposa.webp"); }
.dn-st-sol { aspect-ratio: 520 / 518; --m: url("ilustraciones/sol.webp"); }
.dn-st-brote { aspect-ratio: 560 / 579; --m: url("ilustraciones/brote.webp"); }
.dn-st-hojas { aspect-ratio: 900 / 940; --m: url("ilustraciones/hojas.webp"); }
.dn-capa { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.dn-sticker {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
width: calc(var(--w) * clamp(.42px, .0695vw, 1px));
will-change: transform, opacity;
}
.dn-sticker > i {
display: block;
width: 100%;
height: 100%;
background-color: var(--col);
opacity: var(--op, 1);
-webkit-mask: var(--m) center / contain no-repeat;
mask: var(--m) center / contain no-repeat;
animation: dn-flotar-suave var(--t, 7s) ease-in-out infinite;
animation-delay: var(--dl, 0s);
}
@keyframes dn-flotar-suave {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(7px, -14px) rotate(4deg); }
}
/* --- La escena: la portada queda fija dentro de su "pista" mientras pasa todo --- */
.dn-pista { position: relative; }
body.home.di-estilo-nuevo .elementor-element-53d02b5a.dn-escena {
position: sticky;
top: 0;
background-image: none !important;
background-color: #17312A !important;
animation: none;
}
body.home.di-estilo-nuevo .elementor-element-53d02b5a.dn-escena::before {
background: var(--dn-foto) center / cover no-repeat;
animation: dn-paneo-capa 26s ease-in-out infinite alternate;
opacity: calc(1 - var(--dn-p) * .82);
transform: scale(calc(1.03 + var(--dn-p) * .1));
filter: saturate(calc(1 - var(--dn-p) * .4));
}
@keyframes dn-paneo-capa {
from { background-position: 50% 42%; }
to { background-position: 57% 30%; }
}
body.home.di-estilo-nuevo .elementor-element-53d02b5a.dn-escena > .elementor-container {
position: relative;
z-index: 2;
transform: translate3d(0, calc(var(--dn-p) * -110px), 0);
opacity: calc(1 - var(--dn-p) * 2.2);
}
.dn-escena .dn-capa-escena { z-index: 1; }
.dn-escena .dn-sticker {
opacity: clamp(0, calc(var(--dn-p) * 2.4 - var(--ap, 0)), 1);
transform: translate3d(0, calc((1 - var(--dn-p)) * var(--d) * 200px), 0)
rotate(calc(var(--r) * 1deg + (1 - var(--dn-p)) * var(--d) * 28deg))
scale(calc(.6 + var(--dn-p) * .4));
}
.dn-frase {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
width: min(92%, 980px);
text-align: center;
color: #FFFFFF;
font: 700 clamp(40px, 7.4vw, 112px) / .95 var(--dn-display);
letter-spacing: -0.04em;
text-shadow: 0 6px 40px rgba(0, 0, 0, .25);
opacity: clamp(0, calc((var(--dn-p) - .5) * 3.2), 1);
transform: translate(-50%, calc(-50% + (1 - var(--dn-p)) * 70px)) scale(calc(.92 + var(--dn-p) * .08));
pointer-events: none;
}
.dn-frase em {
display: block;
font-style: normal;
color: var(--dn-durazno);
}
.dn-escena .dn-deslizar { opacity: calc(1 - var(--dn-p) * 6); }
/* --- Dibujos en los márgenes de otras secciones: suben y bajan con el scroll a distintas velocidades --- */
.dn-con-stickers { position: relative; }
.di-estilo-nuevo .elementor-element-b924233.dn-con-stickers { overflow-x: clip; }
.dn-con-stickers > .elementor-container { position: relative; z-index: 1; }
.dn-capa-seccion .dn-sticker {
transform: translate3d(0, calc((var(--dn-s, .5) - .5) * var(--d) * -240px), 0)
rotate(calc(var(--r) * 1deg + (var(--dn-s, .5) - .5) * var(--d) * 24deg));
opacity: 0;
transition: opacity 1.2s ease;
}
.dn-en-vista > .dn-capa-seccion .dn-sticker { opacity: 1; }
/* --- Fondo que cambia de color según la sección (el JS escribe --dn-fondo en el body) --- */
body.dn-fondo-vivo.di-estilo-nuevo :is(.elementor-element-1e537621, .elementor-element-7bda790, .elementor-element-b924233) {
background-color: var(--dn-fondo, #F4F6F2) !important;
transition: background-color 1s ease;
}
@media (prefers-reduced-motion: reduce) {
.dn-sticker > i { animation: none; }
}
/* v6.1 — La mancha durazno de la portada se va mientras entra la escena (en el celular quedaba en el medio) */
body.home.di-estilo-nuevo .elementor-element-53d02b5a.dn-escena::after {
opacity: calc(.55 - var(--dn-p) * 1.4);
}
/* ==========================================================================
v7 (04/10, noche) — pedido de Ramiro: que la portada invite a bajar (más baja, con ola y las tarjetas
asomando), olas "tipo mar" en los cambios de color, tres flechitas, y las tarjetas de cursos redondeadas.
La escena ya no queda fija: va "por dentro" de la portada (--dn-y = cuánto subió) y lo de abajo la tapa.
========================================================================== */
/* --- Portada: más baja para que asomen las tarjetas, sin "pista" --- */
body.home.di-estilo-nuevo .elementor-element-53d02b5a { min-height: 80vh !important; }
body.home.di-estilo-nuevo .elementor-element-53d02b5a.dn-escena { position: relative; }
/* foto, dibujos y frase quietos mientras la portada sube */
body.home.di-estilo-nuevo .elementor-element-53d02b5a.dn-escena::before {
transform: translate3d(0, var(--dn-y, 0px), 0) scale(calc(1.03 + var(--dn-p) * .08));
}
.dn-escena .dn-capa-escena { transform: translate3d(0, var(--dn-y, 0px), 0); }
.dn-frase {
top: 42%;
transform: translate(-50%, calc(-50% + var(--dn-y, 0px) + (1 - var(--dn-p)) * 60px)) scale(calc(.92 + var(--dn-p) * .08));
opacity: clamp(0, calc((var(--dn-p) - .25) * 2.6), 1);
}
.dn-escena .dn-sticker { opacity: clamp(0, calc(var(--dn-p) * 2.6 - var(--ap, 0)), 1); }
/* el texto de abajo del título, en una sola línea */
@media (min-width: 1100px) {
body.home.di-estilo-nuevo .elementor-element-53d02b5a .elementor-image-box-description {
max-width: none !important;
white-space: nowrap;
}
}
/* --- Ola: dos capas que se mueven como el mar, del color de la sección que sigue --- */
.dn-ola {
--c: var(--dn-fondo, #F4F6F2);
--tile: 1440px;
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: clamp(44px, 6.5vw, 96px);
z-index: 2;
pointer-events: none;
}
.dn-ola::before,
.dn-ola::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--c);
-webkit-mask: url("data:image/svg+xml;utf8,") 0 100% / var(--tile) 100% repeat-x;
mask: url("data:image/svg+xml;utf8,") 0 100% / var(--tile) 100% repeat-x;
animation: dn-ola 22s linear infinite;
transition: background-color 1s ease;
}
.dn-ola::before {
opacity: .45;
bottom: 18%;
top: -18%;
animation-duration: 31s;
animation-direction: reverse;
}
@keyframes dn-ola {
from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
to { -webkit-mask-position: var(--tile) 100%; mask-position: var(--tile) 100%; }
}
@media (max-width: 767px) { .dn-ola { --tile: 760px; } }
/* las secciones con ola al pie dejan lugar para que no tape el contenido */
.dn-con-ola { position: relative; padding-bottom: calc(clamp(44px, 6.5vw, 96px) + 24px) !important; }
/* una bruma suave sobre la foto, justo antes de la ola */
.dn-escena::after { z-index: 1; }
.dn-escena > .dn-ola { z-index: 2; }
.dn-escena .dn-capa-escena::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 26%;
background: linear-gradient(180deg, rgba(244, 246, 242, 0) 0%, rgba(244, 246, 242, .18) 100%);
}
/* --- Tres flechitas que invitan a bajar --- */
body.home .dn-escena button.dn-deslizar {
all: unset;
position: absolute;
left: 50%;
bottom: calc(clamp(44px, 6.5vw, 96px) + 110px);
z-index: 3;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
padding: 10px 14px;
cursor: pointer;
opacity: calc(1 - var(--dn-p) * 5);
}
body.home .dn-escena .dn-deslizar i {
border: 0;
display: block;
width: 16px;
height: 16px;
margin-top: -6px;
border-right: 3px solid #FFFFFF;
border-bottom: 3px solid #FFFFFF;
border-radius: 2px;
transform: rotate(45deg);
opacity: 0;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
animation: dn-flechas 1.8s ease-in-out infinite;
}
body.home .dn-escena .dn-deslizar i:nth-child(2) { animation-delay: .2s; }
body.home .dn-escena .dn-deslizar i:nth-child(3) { animation-delay: .4s; }
.dn-deslizar:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; border-radius: 12px; }
@keyframes dn-flechas {
0% { opacity: 0; transform: translateY(-6px) rotate(45deg); }
40% { opacity: 1; }
80%, 100% { opacity: 0; transform: translateY(8px) rotate(45deg); }
}
@media (max-width: 767px) { body.home .dn-escena button.dn-deslizar { bottom: calc(44px + 96px); } }
body.home .dn-escena .dn-deslizar i::after { content: none; }
/* --- Tarjetas de cursos (inicio y tienda): la tarjeta blanca redondeada como las demás, la imagen acompaña --- */
.di-estilo-nuevo ul.products li.product {
border-radius: 24px !important;
background: #FFFFFF !important;
box-shadow: 0 12px 30px rgba(23, 49, 42, .08) !important;
}
.di-estilo-nuevo ul.products li.product .astra-shop-thumbnail-wrap,
.di-estilo-nuevo ul.products li.product a.woocommerce-LoopProduct-link > img:first-child {
border-radius: 24px 24px 0 0 !important;
overflow: hidden;
}
.di-estilo-nuevo ul.products li.product img { border-radius: 0 !important; }
@media (prefers-reduced-motion: reduce) {
.dn-ola::before, .dn-ola::after, .dn-deslizar i { animation: none; }
.dn-deslizar i { opacity: 1; }
}
/* v7.1 — La portada traía 250px de relleno arriba y abajo desde Elementor: ocupaba toda la pantalla y no
asomaban las tarjetas. Y la sección de las tarjetas va por encima de la escena (si no, la ola y la frase
quedaban sobre las tarjetas al bajar). */
@media (min-width: 1025px) {
body.home.di-estilo-nuevo .elementor-element-53d02b5a {
padding-top: clamp(130px, 17vh, 170px) !important;
padding-bottom: clamp(150px, 19vh, 190px) !important;
min-height: 0 !important;
}
}
body.home.di-estilo-nuevo .elementor-element-1e537621 { position: relative; z-index: 5; }
/* v7.2 — "Reducir animaciones" (Windows: Configuración → Accesibilidad → Efectos visuales → Efectos de animación).
Antes se apagaba la escena entera y quien lo tenía activo (Ramiro) no veía ni la ola ni las flechitas.
Ahora se ve todo: la foto se funde, aparecen los dibujos y la frase, pero sin giros, balanceos ni desplazamientos. */
@media (prefers-reduced-motion: reduce) {
body.home.di-estilo-nuevo .elementor-element-53d02b5a.dn-escena::before { transform: none !important; animation: none !important; }
body.home.di-estilo-nuevo .elementor-element-53d02b5a.dn-escena > .elementor-container { transform: none !important; }
.dn-escena .dn-capa-escena { transform: translate3d(0, var(--dn-y, 0px), 0) !important; }
html body .dn-escena .dn-sticker,
html body .dn-capa-seccion .dn-sticker { transform: none !important; }
.dn-frase { transform: translate(-50%, calc(-50% + var(--dn-y, 0px))) !important; }
html body.home .dn-escena .dn-deslizar i { animation: none !important; opacity: 1 !important; transform: rotate(45deg) !important; }
.dn-ola::before, .dn-ola::after { animation: none !important; }
}
/* v7.3 — la frase un poco más arriba: a media bajada quedaba medio tapada por las tarjetas */
.dn-escena .dn-frase { top: 34%; }
/* ==========================================================================
v8 (04/10) — tarjetas de cursos que se elevan, "Quién es Ana Lucía" con la foto fundida en el verde,
y las portadas de las páginas internas con ola y dibujos como el inicio.
========================================================================== */
/* Tarjetas de cursos: se elevan con sombra al pasar el mouse (la sombra fija de v7 lo había tapado) */
.di-estilo-nuevo ul.products li.product {
transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s cubic-bezier(.2, .7, .2, 1) !important;
}
.di-estilo-nuevo ul.products li.product:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(23, 49, 42, .2) !important;
}
@media (prefers-reduced-motion: reduce) {
.di-estilo-nuevo ul.products li.product:hover { transform: translateY(-3px); }
}
/* "Quién es Ana Lucía": la foto entra desde la derecha y se funde en el verde (sin el corte), texto a la izquierda */
@media (min-width: 1025px) {
html body.page-id-158.di-estilo-nuevo .elementor-element-9690a79 {
background-image: none !important;
background-color: #17312A !important;
position: relative;
overflow: hidden;
}
html body.page-id-158.di-estilo-nuevo .elementor-element-9690a79::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 64%;
z-index: 0;
background: url("/wp-content/uploads/2023/04/lucia.jpg") 55% 26% / cover no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 50%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 50%);
}
html body.page-id-158.di-estilo-nuevo .elementor-element-9690a79 > .elementor-background-overlay {
background-image: linear-gradient(90deg, rgba(23, 49, 42, .5) 0%, rgba(23, 49, 42, 0) 55%) !important;
opacity: 1 !important;
z-index: 0;
}
html body.page-id-158.di-estilo-nuevo .elementor-element-9690a79 > .elementor-container { position: relative; z-index: 2; }
}
/* Portadas internas: lugar para la ola, dibujos detrás del texto */
.dn-portada-interna { position: relative; overflow: hidden; padding-bottom: calc(clamp(44px, 6.5vw, 96px) + 30px) !important; }
.dn-portada-interna > .elementor-container { position: relative; z-index: 2; }
.dn-portada-interna > .dn-capa-interna { z-index: 1; }
.dn-portada-interna > .dn-ola { z-index: 3; }
/* v8.1 — Encabezado transparente (sobre fotos claras, como la de Ana Lucía): un velo verde arriba para que el menú se lea */
@media (min-width: 922px) {
body.di-estilo-nuevo.ast-theme-transparent-header:not(.dn-scrolled) #masthead .ast-primary-header-bar,
body.di-estilo-nuevo.ast-theme-transparent-header:not(.dn-scrolled) #masthead .main-header-bar {
background: linear-gradient(180deg, rgba(23, 49, 42, .62) 0%, rgba(23, 49, 42, .28) 70%, rgba(23, 49, 42, 0) 100%) !important;
}
}