/*
Theme Name: Divi Child
Theme URI: https://www.mindual.com
Description: Child theme de Divi para Mindual. Toda la personalización (CSS, funciones, overrides de plantillas) vive aquí para sobrevivir a las actualizaciones del tema padre.
Author: Mindual
Template: Divi
Version: 1.2.8
Text Domain: divi-child
*/
/* Añade aquí tu CSS personalizado. No toques los ficheros del tema Divi (padre). */
/* =============================================================================
Rediseño de cabecera — inspirado en la estructura de Bold Themes "Industrial"
(barra de utilidad + barra de navegación), adaptado a colores Mindual.
El LinkedIn vive en el "Secondary Menu" nativo de Divi (#et-secondary-menu,
ya alineado a la derecha por defecto) — ver "Menu Secundario" en WP-CLI.
El CTA de contacto es el propio ítem "Contacto" del menú principal
(clase mindual-nav-cta, ver más abajo).
============================================================================= */
/* =============================================================================
PALETA Y TOKENS GLOBALES — única fuente de verdad para colores/tipos de
todo el sitio. Todo estilo general (colores, tipografías, espaciados
reutilizables) vive AQUÍ, nunca hardcodeado inline en el contenido de
las páginas — los scripts de importación (docker/scripts/*.php) deben
usar estas clases en vez de repetir style="color:#FF9C0A..." etc.
============================================================================= */
:root{
--mindual-ink:#1A1A1A;
--mindual-accent:#FF9C0A;
--mindual-light:#F7F7F5;
--mindual-white:#FFFFFF;
--mindual-border:#ECECEC;
--mindual-text:#444444;
--mindual-text-muted:#666666;
--mindual-text-faint:#999999;
--mindual-font-display:'Raleway', sans-serif;
--mindual-font-body:'Open Sans', sans-serif;
}
/* --- Tipografía reutilizable (usar estas clases en vez de estilos inline) --- */
/* Antes se quedaba corto frente al H2 gigante que va justo debajo (13px,
peso 700) — apenas se notaba como "MÁS ÁREAS DE NEGOCIO" encima de un
título mucho más grande. Se sube tamaño/peso y se añade una barra de
acento delante a modo de ancla visual — mismo lenguaje de marca que las
demás barritas/acentos naranjas del sitio. */
.mindual-eyebrow{
font-family:var(--mindual-font-body);
letter-spacing:2.5px;
font-weight:800;
font-size:14px;
color:var(--mindual-accent);
margin:0 0 14px;
text-transform:uppercase;
display:inline-flex;
align-items:center;
gap:10px;
}
.mindual-eyebrow::before{
content:"";
display:inline-block;
width:26px;
height:3px;
border-radius:2px;
background:var(--mindual-accent);
flex:none;
}
.mindual-eyebrow--onlight{ color:var(--mindual-accent); }
/* Variante centrada: en mindual.com el equivalente a este "kicker" iba
enmarcado con esquinas tipo corchete en naranja (ver .cornered-heading
en su CSS original) — más protagonismo que una simple etiqueta. Aquí se
adapta esa idea con barras de acento simétricas a ambos lados en vez de
solo a la izquierda (que quedaba descuadrado al estar centrado), algo
más grandes y con más espaciado para que pese más visualmente. */
.mindual-eyebrow--center{
justify-content:center;
font-size:15px;
letter-spacing:3.5px;
margin-bottom:0;
}
/* Dentro de .mindual-section-heading (ver más abajo) la barra ya no hace
falta — el propio marco de esquinas es el que da protagonismo. */
.mindual-section-heading-inner .mindual-eyebrow--center::before{
display:none;
}
/* --- Título de sección con marco de esquinas -------------------------------
mindual.com enmarcaba estos títulos (kicker + H2) con dos esquinas tipo
corchete en naranja (".cornered-heading" en su CSS original) — mucho más
protagonismo que una etiqueta suelta. Se recupera esa idea: envolver el
eyebrow + h2 en .mindual-section-heading > .mindual-section-heading-inner.
El exterior centra el bloque (text-align:center, como hacía su
".text-center" en el HTML original); el interior se encoge al ancho real
del contenido (display:inline-block) para que las esquinas queden pegadas
al texto y no a todo el ancho de la columna. */
.mindual-section-heading{
text-align:center;
margin:0 0 22px;
}
.mindual-section-heading-inner{
position:relative;
display:inline-block;
max-width:100%;
padding:28px 40px;
}
.mindual-section-heading-inner::before,
.mindual-section-heading-inner::after{
content:"";
position:absolute;
width:34px;
height:34px;
border:3px solid var(--mindual-accent);
}
.mindual-section-heading-inner::before{
top:0;
left:0;
border-width:3px 0 0 3px;
}
.mindual-section-heading-inner::after{
bottom:0;
right:0;
border-width:0 3px 3px 0;
}
.mindual-section-heading-inner .mindual-eyebrow{
margin-bottom:14px;
}
.mindual-section-heading-inner h2{
margin:0 !important;
}
@media (max-width:640px){
.mindual-section-heading-inner{ padding:22px 24px; }
.mindual-section-heading-inner::before,
.mindual-section-heading-inner::after{ width:24px; height:24px; }
}
.mindual-h1{
font-family:var(--mindual-font-display);
font-weight:800;
font-size:36px;
color:var(--mindual-white);
margin:0;
}
.mindual-h2{
font-family:var(--mindual-font-display);
font-weight:800;
font-size:28px;
color:var(--mindual-ink);
margin:0 0 16px;
}
.mindual-h3{
font-family:var(--mindual-font-display);
font-weight:800;
font-size:22px;
color:var(--mindual-ink);
margin:36px 0 16px;
}
.mindual-h4{
font-family:var(--mindual-font-body);
font-weight:700;
font-size:15.5px;
color:var(--mindual-ink);
margin:26px 0 8px;
}
.mindual-p{
font-family:var(--mindual-font-body);
font-size:16px;
color:var(--mindual-text);
line-height:1.8;
margin:0 0 20px;
}
.mindual-p--sm{
font-family:var(--mindual-font-body);
font-size:15px;
color:var(--mindual-text-muted);
line-height:1.75;
margin:0 0 16px;
}
.mindual-list{
font-family:var(--mindual-font-body);
font-size:15.5px;
color:var(--mindual-text);
line-height:1.9;
padding-left:20px;
}
/* --- Imágenes que no deben deformarse nunca -------------------------------
El atributo object_fit="cover" de Divi no siempre genera CSS real en
esta versión del builder — se fuerza aquí explícitamente. Aplicar esta
clase (module_class) a cualquier et_pb_image con altura fija/recortada.
OJO: height:100% en el ![]()
solo recorta de verdad si su cadena de
contenedores (.mindual-cover-img → .et_pb_image_wrap → img) tiene una
altura EXPLÍCITA en algún punto — si no, "100%" se resuelve contra un
contenedor de alto automático y equivale a no poner nada: la imagen sale
a su alto natural (a veces demasiado alta si el texto de al lado es
largo, porque nada limita su recorte). Por eso .mindual-cover-img fija
aquí una altura real en píxeles — es la que de verdad "respeta el
tamaño de la sección" en vez de depender de la longitud del texto. */
.mindual-cover-img{
height:420px;
}
.mindual-cover-img .et_pb_image_wrap{
height:100%;
display:block;
}
.mindual-cover-img img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}
@media (max-width:980px){
.mindual-cover-img{ height:280px; }
}
.mindual-contain-img img{
object-fit:contain;
}
/* Bloques destacados a toda anchura imagen+texto de la Home (CPD,
Mecanizados): aquí la imagen SÍ debe estirarse hasta igualar la altura
real de la columna de texto (que varía según cuánto copy tenga cada
bloque), al contrario que las fichas RSE/Servicios de arriba — si se les
aplica la misma altura fija de 420px, la imagen se queda corta en
cuanto el texto es largo y deja una franja de fondo oscuro debajo
(justo lo que pasaba en CPD). Se fuerza la fila a flex+stretch para que
ambas columnas midan siempre lo mismo, y la imagen a height:100% de esa
columna ya real (sobrescribe el 420px fijo solo dentro de este
contexto, sin tocar el resto de usos de .mindual-cover-img). */
.mindual-hero-split-row.et_pb_row{
display:flex !important;
align-items:stretch !important;
flex-wrap:wrap;
}
.mindual-hero-split-row .mindual-cover-img{
height:100% !important;
}
@media (max-width:980px){
.mindual-hero-split-row .mindual-cover-img{ height:320px !important; }
}
/* Mismo problema, otro síntoma: la columna ya se estira bien (flex arriba),
pero un et_pb_text de Divi no hereda esa altura — se queda en el alto
natural de su contenido (aquí el div con el patrón diagonal, con solo
min-height:340px), y además mete un .et_pb_text_inner intermedio que
tampoco la hereda. Sin esto, el div interno con height:100% se calcula
sobre ese módulo corto, no sobre la columna real, y deja hueco de fondo
debajo (mismo bug que la imagen de CPD, pero un nivel más adentro).
Aplicar module_class="mindual-hero-split-fill" al et_pb_text que deba
ocupar el 100% de su columna en este contexto. */
.mindual-hero-split-row .mindual-hero-split-fill,
.mindual-hero-split-row .mindual-hero-split-fill .et_pb_text_inner{
height:100%;
}
/* Imagen de cabecera de ficha de proyecto: Divi no la estira a ancho
completo por defecto (se queda en su tamaño natural, pegada a la
izquierda con hueco a la derecha — se percibía como "ladeada"/
descentrada). Ancho completo + alto automático = nunca se recorta ni
se deforma, conserva su proporción real. */
.mindual-project-hero-img,
.mindual-project-hero-img .et_pb_image_wrap,
.mindual-project-hero-img img{
width:100% !important;
height:auto !important;
display:block;
}
/* --- Color de enlaces por defecto ------------------------------------------
Divi trae un azul de acento genérico para cualquier sin estilo
propio. Sustituido por la marca; los enlaces que ya llevan su color
explícito (nav, botones, tarjetas) no se ven afectados por especificidad. */
a{ color:var(--mindual-accent); }
a:hover{ color:var(--mindual-ink); }
/* Solo los enlaces de texto dentro de contenido (no botones, no tarjetas
con su propio estilo — esas ya tienen su color explícito y ganan por
especificidad) llevan subrayado, para distinguirlos como texto clicable. */
.et_pb_text a:not(.et_pb_button){
color:var(--mindual-accent);
text-decoration:underline;
}
.et_pb_text a:not(.et_pb_button):hover{
color:var(--mindual-ink);
}
/* Barra de utilidad superior (teléfono / email) */
#top-header{
background:var(--mindual-ink) !important;
border:none !important;
}
#top-header #et-info{
font-family:'Open Sans',sans-serif;
font-size:12.5px;
letter-spacing:.02em;
}
#top-header #et-info span,
#top-header #et-info a{
color:#CFCFCF !important;
}
/* Divi trae icono nativo para el email (fuente ETmodules) pero no para el
teléfono — se añade a mano con un SVG enmascarado (mismo tamaño/color). */
#top-header #et-info-phone{
display:inline-flex;
align-items:center;
}
#top-header #et-info-phone::before{
content:"";
display:inline-block;
width:11px;
height:11px;
margin-right:6px;
background-color:#CFCFCF;
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
flex:none;
/* El glifo fa-phone "clásico" queda con el auricular mirando a la
izquierda (se percibe como "al revés" frente al icono de teléfono
habitual en la mayoría de webs, que lo tiene espejado). Se invierte
horizontalmente en vez de cambiar de SVG. */
transform:scaleX(-1);
}
/* Icono de LinkedIn — vive en el "Secondary Menu" nativo de Divi
(#et-secondary-menu), que ya se alinea a la derecha del todo por
defecto. El texto "LinkedIn" del enlace se oculta visualmente y se
sustituye por un icono enmascarado; el texto sigue disponible para
lectores de pantalla. */
#et-secondary-menu{
display:flex;
align-items:center;
}
#et-secondary-nav{
display:flex;
align-items:center;
}
.mindual-linkedin-icon > a{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:16px;
height:16px;
margin-right:2px;
overflow:hidden;
white-space:nowrap;
position:relative;
/* text-indent no oculta el texto "LinkedIn" del enlace aquí: en un
contenedor flex (display:inline-flex de arriba) text-indent no
tiene efecto (solo aplica a contenedores de bloque), así que el
texto real se veía asomando detrás del icono. font-size:0 lo oculta
de verdad sin depender del modo de layout; sigue disponible para
lectores de pantalla porque el texto no se elimina, solo no se
renderiza visualmente. */
font-size:0;
color:transparent;
}
.mindual-linkedin-icon > a::before{
content:"";
position:absolute;
inset:0;
background-color:#CFCFCF;
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
transition:background-color .15s ease;
}
.mindual-linkedin-icon > a:hover::before{
background-color:var(--mindual-accent);
}
/* Barra principal (logo + menú) */
#main-header{
background:#FFFFFF !important;
box-shadow:0 1px 0 rgba(0,0,0,.06);
}
#top-menu-nav li a{
font-family:'Open Sans',sans-serif;
font-weight:600;
font-size:14px;
color:var(--mindual-ink) !important;
}
#top-menu-nav li a:hover{ color:var(--mindual-accent) !important; }
#top-menu > li.current-menu-item > a,
#top-menu > li.current_page_item > a{
color:var(--mindual-accent) !important;
box-shadow:inset 0 -2px 0 var(--mindual-accent);
}
#top-menu ul.sub-menu{ border-top:2px solid var(--mindual-accent) !important; }
/* El ítem de menú "Contacto" hace de CTA (sustituye al antiguo botón
"Solicitar presupuesto" + icono LinkedIn, retirados del header). Se le
añade la clase "mindual-nav-cta" vía WP-CLI (wp menu item update
--classes) sobre el propio del menú — ver README de comandos. */
#top-menu-nav li.mindual-nav-cta{
margin-left:14px;
}
#top-menu-nav li.mindual-nav-cta > a{
background:var(--mindual-accent);
color:var(--mindual-ink) !important;
padding:10px 22px !important;
border-radius:3px;
font-weight:700 !important;
box-shadow:none !important;
transition:filter .15s ease;
}
#top-menu-nav li.mindual-nav-cta > a:hover{
filter:brightness(0.94);
color:var(--mindual-ink) !important;
}
#top-menu-nav li.mindual-nav-cta.current-menu-item > a,
#top-menu-nav li.mindual-nav-cta.current_page_item > a{
box-shadow:none !important;
}
/* El icono de menú móvil de Divi usa su color de acento por defecto (azul) */
.mobile_menu_bar:before,
#et_top_search #et_search_icon:before{
color:var(--mindual-ink) !important;
}
/* El panel del menú móvil también trae ese azul como borde superior */
.et_mobile_menu{
border-top-color:var(--mindual-accent) !important;
}
.et_mobile_menu li.current-menu-item > a,
.et_mobile_menu li.current_page_item > a{
color:var(--mindual-accent) !important;
}
/* Borde del desplegable de búsqueda (mismo azul de acento por defecto) */
.et-search-form{
border-color:var(--mindual-accent) !important;
}
/* =============================================================================
Componentes reutilizables en el contenido (tarjetas de servicio, mosaico de
proyectos, sedes) — pensados para usarse dentro de módulos et_pb_text.
============================================================================= */
/* Tarjeta de servicio sin foto (cuando no hay material fotográfico propio) */
.mindual-tile{
position:relative;
border-left:3px solid var(--mindual-accent);
background:var(--mindual-light);
padding:30px 26px;
height:100%;
font-family:'Open Sans',sans-serif;
}
.mindual-tile h3{
font-family:'Raleway',sans-serif;
font-weight:800;
font-size:18px;
color:var(--mindual-ink);
margin:0 0 10px;
}
.mindual-tile p{
font-size:14px;
color:#666;
line-height:1.6;
margin:0 0 14px;
}
.mindual-tile a{
color:var(--mindual-accent);
font-weight:700;
font-size:12.5px;
letter-spacing:.03em;
text-decoration:none;
}
/* Tarjeta de sede (mini location card) */
.mindual-office-card{
background:#FFFFFF;
border:1px solid #ECECEC;
border-radius:6px;
padding:26px 24px;
font-family:'Open Sans',sans-serif;
height:100%;
}
.mindual-office-card .city{
font-family:'Raleway',sans-serif;
font-weight:800;
font-size:17px;
color:var(--mindual-ink);
margin:0 0 4px;
}
.mindual-office-card .tag{
font-size:11px;
letter-spacing:.12em;
color:var(--mindual-accent);
font-weight:700;
margin:0 0 12px;
display:block;
}
.mindual-office-card p{
font-size:13.5px;
color:#666;
line-height:1.6;
margin:0 0 12px;
}
.mindual-office-card a{
display:block;
font-size:13px;
color:var(--mindual-ink);
text-decoration:none;
margin-top:4px;
}
.mindual-office-card a:hover{ color:var(--mindual-accent); }
.mindual-office-card--stacked{ margin-bottom:16px; }
/* Fila "sangrada" a todo el ancho del viewport, aunque esté dentro de una
sección/fila normal de Divi con max-width propio (usar como module_class
en el et_pb_row). Truco estándar de full-bleed sin tocar el layout padre. */
.mindual-full-bleed{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
left:auto !important;
right:auto !important;
}
/* Sección partida imagen+texto (mindual_split() en import-pages.php,
y los bloques CPD/Mecanizados de la Home) */
.mindual-split-text{ padding:64px 60px !important; }
@media (max-width:980px){ .mindual-split-text{ padding:48px 30px !important; } }
/* Botón dentro de un bloque partido imagen+texto: mismo sangrado que el
texto de al lado (custom_margin de Divi no siempre aplica de verdad). */
.mindual-cta-btn.et_pb_button{
margin:10px 0 0 60px !important;
}
@media (max-width:980px){ .mindual-cta-btn.et_pb_button{ margin-left:30px !important; } }
/* Franja de estadísticas naranja (mindual_stat_strip()).
Las 4 tarjetas viven en columnas 1_4 independientes: si la fila no se
fuerza a flex con alineación superior, y la etiqueta de abajo no tiene
una altura reservada, un número queda más arriba que otro en cuanto una
etiqueta se envuelve a 2 líneas y las de al lado se quedan en 1 (varía
según el ancho de pantalla) — mismo tipo de atributo-de-Divi-que-no-
genera-CSS-real de siempre, aquí ni siquiera hay atributo, así que se
fuerza directamente. */
.mindual-stat-row.et_pb_row{
display:flex !important;
flex-wrap:wrap;
align-items:flex-start !important;
}
.mindual-stat{ text-align:center; font-family:var(--mindual-font-body); }
.mindual-stat .num{
display:block;
font-family:var(--mindual-font-display);
font-weight:800;
font-size:36px;
color:var(--mindual-ink);
}
.mindual-stat .label{
display:block;
min-height:32px; /* espacio reservado para 1 o 2 líneas: el número
de al lado nunca se desplaza por esto */
margin-top:4px;
font-size:12.5px;
letter-spacing:1px;
color:var(--mindual-ink);
font-weight:600;
}
/* Tarjeta de insignia/certificado (mindual_badge_card()) */
.mindual-badge-card{
background:var(--mindual-white);
border:1px solid var(--mindual-border);
border-radius:6px;
padding:24px 20px;
text-align:center;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:14px;
}
.mindual-badge-card img{
max-width:100%;
max-height:70px;
object-fit:contain;
}
.mindual-badge-card .dot{
display:inline-block;
width:38px;
height:38px;
border-radius:50%;
background:var(--mindual-accent);
}
.mindual-badge-card .caption{
font-family:var(--mindual-font-body);
font-size:12.5px;
color:var(--mindual-text-muted);
line-height:1.5;
}
/* Ficha técnica lateral de un proyecto (ubicación/cliente/categoría),
junto al texto del caso de estudio en la plantilla de proyecto. */
.mindual-meta-card{
background:var(--mindual-light);
border-left:3px solid var(--mindual-accent);
border-radius:0 6px 6px 0;
padding:28px 26px;
font-family:var(--mindual-font-body);
}
.mindual-meta-card .row + .row{
margin-top:20px;
padding-top:20px;
border-top:1px solid var(--mindual-border);
}
.mindual-meta-card .label{
display:block;
font-size:11px;
letter-spacing:1px;
color:var(--mindual-text-faint);
font-weight:700;
margin-bottom:5px;
text-transform:uppercase;
}
.mindual-meta-card .value{
font-size:16px;
color:var(--mindual-ink);
font-weight:700;
}
/* Tira de miniaturas de proyecto (filmstrip) */
.mindual-filmstrip{
display:flex;
gap:2px;
}
.mindual-filmstrip figure{
margin:0;
flex:1;
position:relative;
overflow:hidden;
aspect-ratio:4/3;
}
.mindual-filmstrip img{
width:100%; height:100%; object-fit:cover; display:block;
}
.mindual-filmstrip figcaption{
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.03em;
padding:20px 12px 10px;
}
/* --- Aviso de cookies (plugin Cookie Notice) ------------------------------
El plugin aplica el mismo color de botón (colors.button, en su ajustes)
a "Aceptar", "Rechazar" y al enlace "Política de cookies" por igual. Los
dos primeros deben tener el mismo peso visual entre sí (así lo exige la
AEPD: rechazar igual de fácil que aceptar) — pero el enlace a la política
no es una decisión, así que se distingue como enlace secundario en vez de
un tercer botón sólido idéntico. */
#cookie-notice #cn-more-info{
background-color:transparent !important;
text-decoration:underline;
padding-left:4px;
padding-right:4px;
}
#cookie-notice #cn-more-info:hover{
background-color:transparent !important;
opacity:.8;
}
/* --- Slider del Hero (Home) ------------------------------------------------
El sitio original (mindual.com) tenía un slider de 3 fotos reales en el
hero (slide01, slide02, slide04 — no existía slide03 en origen, se omite
a propósito), cada una con su propio título/descripción/CTA y controles
para cambiar de diapositiva a mano. Se replica ese mismo comportamiento
(antes solo cambiaba la foto de fondo, con un único texto fijo encima).
OJO: el propio et_pb_code de Divi trae "position:relative" por defecto
(para sus efectos internos), igual que su wrapper interno
.et_pb_code_inner — eso los convierte en el contenedor de referencia de
los elementos position:absolute de aquí dentro en vez de la sección, y
como esos módulos solo tienen contenido absoluto/vacío, colapsan a altura
0 y se llevan el slider entero con ellos (el fondo "desaparecía"). Se
fuerza aquí a position:static, solo dentro de esta sección, para que el
slider se ancle contra .mindual-hero-section (que sí tiene la altura
real). */
.mindual-hero-section{
position:relative;
overflow:hidden;
}
.mindual-hero-section > .et_pb_code,
.mindual-hero-section > .et_pb_code .et_pb_code_inner{
position:static;
}
.mindual-hero-slider{
position:absolute;
inset:0;
z-index:0;
}
.mindual-hero-slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
transition:opacity 1s ease;
}
.mindual-hero-slide.is-active{ opacity:1; }
/* Antes se oscurecía toda la foto con background-blend-mode:multiply +
fondo #1A1A1A — se veía "demasiado oscuro". Se sustituye por un degradado
más suave, más cargado a la izquierda (donde va el texto, para que siga
siendo legible) y bastante más claro hacia la derecha, dejando ver mucho
más la foto real. */
.mindual-hero-overlay{
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.32) 100%);
}
/* La franja de estadísticas se solapa a propósito 70px sobre el hero
(custom_margin negativo) — con un fondo plano detrás quedaba bien, pero
al darle position:relative a .mindual-hero-section (necesario para
anclar el slider) esa sección entera pasa a pintarse POR ENCIMA de
cualquier hermano posterior en flujo normal (aunque venga antes en el
HTML), así que la foto/overlay del slider se veía montada encima de la
franja naranja en la zona de solape. Se le da aquí a la franja un
z-index explícito más alto para que gane el pintado. */
.mindual-stats-section{
position:relative;
z-index:1;
}
.mindual-hero-content{
position:relative;
z-index:2;
width:90%;
max-width:1250px;
margin:0 auto;
}
.mindual-hero-caption{ display:none; }
.mindual-hero-caption.is-active{
display:block;
animation:mindualHeroCaptionIn .6s ease;
}
@keyframes mindualHeroCaptionIn{
from{ opacity:0; transform:translateY(14px); }
to{ opacity:1; transform:translateY(0); }
}
.mindual-hero-eyebrow{
letter-spacing:3px;
color:#FF9C0A;
font-weight:700;
font-size:14px;
margin:0 0 18px;
font-family:'Open Sans',sans-serif;
}
.mindual-hero-title{
font-family:'Raleway',sans-serif;
font-weight:800;
font-size:clamp(32px,6vw,58px);
line-height:1.15;
color:#FFFFFF;
margin:0 0 26px;
max-width:760px;
}
.mindual-hero-title span{ color:#FF9C0A; }
.mindual-hero-desc{
font-family:'Open Sans',sans-serif;
font-size:19px;
font-weight:300;
color:#E8E8E8;
max-width:600px;
line-height:1.6;
margin:0;
}
.mindual-hero-btn{
display:inline-block;
margin-top:36px;
background:#FF9C0A;
color:#1A1A1A;
font-family:'Open Sans',sans-serif;
font-weight:600;
font-size:16px;
padding:16px 34px;
border-radius:3px;
text-decoration:none;
transition:opacity .2s ease;
}
.mindual-hero-btn:hover{ opacity:.85; color:#1A1A1A; }
/* Controles para cambiar de diapositiva a mano */
.mindual-hero-dots{
display:flex;
gap:10px;
margin-top:56px;
}
.mindual-hero-dot{
width:11px;
height:11px;
border-radius:50%;
background:rgba(255,255,255,.35);
border:2px solid transparent;
padding:0;
cursor:pointer;
transition:background .2s ease, transform .2s ease;
}
.mindual-hero-dot.is-active{
background:#FF9C0A;
transform:scale(1.15);
}
.mindual-hero-dot:hover{ background:rgba(255,156,10,.75); }
.mindual-hero-dot:focus-visible{ border-color:#FFFFFF; outline:none; }
@media (max-width:640px){
.mindual-hero-dots{ margin-top:40px; }
}
@media (prefers-reduced-motion: reduce){
.mindual-hero-slide{ transition:none; }
.mindual-hero-caption.is-active{ animation:none; }
}
/* --- Plantilla de detalle de Noticia ---------------------------------------
No es contenido del Builder: es la plantilla nativa de "single post" de
Divi (título + meta + imagen destacada), compartida por las 41 noticias
sin necesidad de tocar cada una. La imagen se mostraba a su tamaño
natural (hasta 1080px) a todo el ancho de la columna — demasiado grande,
y cuanto más grande se muestra una foto de baja calidad/resolución más
se notan sus defectos. Se contiene a una altura fija con object-fit:cover
(mismo patrón que .mindual-cover-img en el resto del sitio) y se
rediseña la cabecera con la tipografía de marca en vez de la genérica
de Divi. */
.et_post_meta_wrapper{
max-width:900px;
margin:0 auto;
padding:70px 5% 0;
}
.et_post_meta_wrapper .entry-title{
font-family:'Raleway',sans-serif;
font-weight:800;
font-size:clamp(26px,4vw,38px);
line-height:1.3;
color:#1A1A1A;
margin:0 0 16px;
}
.et_post_meta_wrapper .post-meta{
font-family:'Open Sans',sans-serif;
font-size:12.5px;
letter-spacing:1px;
text-transform:uppercase;
font-weight:600;
color:#999;
margin:0 0 32px;
}
.et_post_meta_wrapper .post-meta a{
color:#FF9C0A;
}
/* El sitio no tiene sistema de comentarios (decisión ya tomada en el resto
de la migración) — no tiene sentido mostrar "0 Comentarios". */
.et_post_meta_wrapper .post-meta .comments-number{
display:none;
}
.et_post_meta_wrapper > img{
display:block;
width:100%;
height:380px;
object-fit:cover;
object-position:center;
border-radius:6px;
margin:0;
}
@media (max-width:768px){
.et_post_meta_wrapper > img{ height:230px; }
}