/** * 2PX Elementor Suite - Hero Widget Styles * BEM Methodology Used */ /* ========================================================================= Elementor Wrapper – Herencia de altura Elementor envuelve el widget en capas que por defecto no propagan la altura de la sección. Estas reglas permiten que el widget llene el 100% del alto de su columna/sección cuando ésta tiene altura definida. ========================================================================= */ .elementor-widget-2px-hero, .elementor-widget-2px-hero .elementor-widget-container { height: 100%; } /* ========================================================================= Base Layout & Grid ========================================================================= */ .twopx-hero { position: relative; width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; /* Allows stacking mechanism */ } /* Common resets inside the widget */ .twopx-hero * { box-sizing: border-box; } /* Row wrapping inside elementor handles */ .twopx-hero__media-col, .twopx-hero__content-col { width: 100%; /* Default mobile behavior: Stacked vertically */ } .twopx-hero__media-col { position: relative; display: flex; } /* ========================================================================= Media Wrapper (Optimized for LCP to act as backgrounds) ========================================================================= */ .twopx-hero__media-wrapper { position: relative; width: 100%; min-height: 300px; /* Minimal height so it doesn't collapse if no content provides height */ overflow: hidden; } /* Position image and video as background replacements */ .twopx-hero__image, .twopx-hero__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; border: none; } /* Media Overlay (Transparent layer) */ .twopx-hero__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; /* Below content, above video/image */ transition: background-color 0.3s ease; } /* ========================================================================= Content Styles ========================================================================= */ .twopx-hero__content-col { display: flex; flex-direction: column; justify-content: center; /* Vertically center content */ padding: 40px 20px; /* Native padding, user can overwrite in Advanced tab */ z-index: 2; /* Content must be above everything */ } .twopx-hero__content-wrapper { position: relative; max-width: 100%; } /* Neutraliza los estilos de h1/h2 del tema (especificidad 0,0,1 o 0,1,1). Estas reglas tienen (0,2,0): ganan al tema pero pierden ante el CSS inline que Elementor imprime al final del para los controles del usuario. */ .elementor-widget-2px-hero .twopx-hero__title { font-size: 2.5rem; font-weight: 700; line-height: 1.1; } .elementor-widget-2px-hero .twopx-hero__subtitle { font-size: 0.75rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; } /* Los spans heredan todo del h1 padre para que las partes 1-3 no reciban estilos propios del tema. Los controles por parte (especificidad 0,3,0 via Elementor) pueden sobrescribir. */ .elementor-widget-2px-hero .twopx-hero__title-part1, .elementor-widget-2px-hero .twopx-hero__title-part2, .elementor-widget-2px-hero .twopx-hero__title-part3 { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Typography base margins */ .twopx-hero__subtitle { margin: 0 0 10px 0; text-transform: uppercase; } .twopx-hero__title { margin: 0 0 20px 0; } .twopx-hero__description { margin: 0 0 30px 0; line-height: 1.6; } /* La descripción viene de un WYSIWYG y WP la envuelve en

; además algunos temas/containers añaden wrappers intermedios (.container, .hero-content, etc) con text-align propio. Forzamos a TODOS los descendientes a heredar la alineación del control. */ .twopx-hero__description, .twopx-hero__description * { text-align: inherit; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* Actions block */ .twopx-hero__actions { display: flex; flex-wrap: wrap; gap: 15px; width: 100%; /* Necesario para que justify-content tenga efecto */ justify-content: flex-start; /* Fallback: Elementor sobreescribe con el control */ } /* Buttons — solo estructura base, colores controlados desde Elementor */ .twopx-hero__btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; /* Fallback; el control "Relleno" lo sobreescribe */ text-decoration: none; transition: all 0.3s ease; cursor: pointer; font-weight: 600; } .twopx-hero__btn--primary { background-color: #000; /* Fallback */ color: #fff; /* Fallback */ } .twopx-hero__btn--secondary { background-color: transparent; /* Fallback */ color: #000; /* Fallback */ border: 1px solid #000; /* Fallback */ } /* ========================================================================= Layout Variants (Desktop / Tablet) ========================================================================= */ /* Default Stacked for Mobile (Already defined above with width: 100%) */ /* Layout 1: Background Full (Global / Mobile & Desktop) Media-col es absolutamente posicionado (fondo). El hero es flex-column: el content-col crece con flex:1 para llenar toda la altura disponible, permitiendo que justify-content funcione correctamente para la alineación vertical. */ .twopx-hero.twopx-hero--layout-background { position: relative; display: flex; flex-direction: column; min-height: 380px; /* Fallback cuando la sección no tiene altura definida */ height: 100%; /* Llena la sección cuando sí tiene altura definida */ } .twopx-hero.twopx-hero--layout-background .twopx-hero__media-col { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .twopx-hero.twopx-hero--layout-background .twopx-hero__content-col { position: relative; width: 100%; z-index: 2; flex: 1; /* Crece para llenar toda la altura del hero */ } .twopx-hero.twopx-hero--layout-background .twopx-hero__media-wrapper { position: relative; height: 100%; min-height: 0; } .twopx-hero.twopx-hero--layout-background .twopx-hero__image, .twopx-hero.twopx-hero--layout-background .twopx-hero__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Layout 4: Background Editorial Fotografía a ancho completo (idéntico al background) pero el contenido se distribuye en una rejilla editorial: - Subtitle: arriba-izquierda - Meta: arriba-derecha - Title: centro (puede expandirse) - Description: abajo-izquierda - Actions (CTAs): abajo-derecha */ .twopx-hero.twopx-hero--layout-background_editorial { position: relative; display: flex; flex-direction: column; min-height: 380px; height: 100%; } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__media-col { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__content-col { position: relative; width: 100%; z-index: 2; flex: 1; } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__media-wrapper { position: relative; height: 100%; min-height: 0; } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__image, .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Mobile: una sola columna apilada — el grid pasa a flujo vertical */ .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__content-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; gap: 16px; } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__meta { display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; } /* Tablet+: rejilla editorial. Subtitle + meta comparten la primera fila (meta queda arriba-derecha por diseño). Title, description y actions ocupan filas completas para que los controles "Alineación del texto" y "Alineación de botones" tengan ancho real donde operar. */ @media (min-width: 768px) { .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__content-wrapper { display: grid; grid-template-areas: "subtitle meta" "title title" "description description" "actions actions"; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; column-gap: 24px; row-gap: 16px; } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__subtitle { grid-area: subtitle; align-self: start; /* justify-self lo controla el usuario vía "Alineación del texto" */ margin: 0; } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__meta { grid-area: meta; align-self: start; justify-self: end; /* Por diseño editorial — sin control de usuario */ } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__title { grid-area: title; align-self: start; margin: 0; } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__description { grid-area: description; align-self: end; margin: 0; } .twopx-hero.twopx-hero--layout-background_editorial .twopx-hero__actions { grid-area: actions; align-self: end; /* Ocupa todo el ancho de la celda para que justify-content (control "Alineación de botones") tenga efecto real */ width: 100%; } } /* Tablet (768px – 1024px): lado a lado con padding reducido */ @media (min-width: 768px) { /* Layout 2: Media Right, Text Left */ /* By default the media col is first in DOM, so we must reorder */ .twopx-hero.twopx-hero--layout-media_right .twopx-hero__media-col { order: 2; width: 70%; } .twopx-hero.twopx-hero--layout-media_right .twopx-hero__content-col { order: 1; width: 30%; padding: 40px 24px; /* Más compacto en tablet */ } /* Layout 3: Media Left, Text Right */ .twopx-hero.twopx-hero--layout-media_left .twopx-hero__media-col { order: 1; width: 70%; } .twopx-hero.twopx-hero--layout-media_left .twopx-hero__content-col { order: 2; width: 30%; padding: 40px 24px; /* Más compacto en tablet */ } /* Layouts lado a lado: el media-wrapper debe llenar el 100% de la altura de su columna para que la imagen/video no quede corta */ .twopx-hero.twopx-hero--layout-media_left .twopx-hero__media-wrapper, .twopx-hero.twopx-hero--layout-media_right .twopx-hero__media-wrapper { height: 100%; min-height: 0; align-self: stretch; flex: 1; } } /* Desktop (1025px+): padding generoso en la columna de texto */ @media (min-width: 1025px) { .twopx-hero.twopx-hero--layout-media_right .twopx-hero__content-col, .twopx-hero.twopx-hero--layout-media_left .twopx-hero__content-col { padding: 60px 40px; } } /* ========================================================================= Effects & Animations ========================================================================= */ @keyframes twopxKenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } .twopx-hero--ken-burns .twopx-hero__image { animation: twopxKenBurns 12s ease-out alternate infinite; } /* ========================================================================= Layout 5: Card Selector (Fondo Completo + 3 Tarjetas de Categoría) ========================================================================= */ /* Misma base que background: el media-col ocupa todo el fondo */ .twopx-hero.twopx-hero--layout-card_selector { position: relative; display: flex; flex-direction: column; min-height: 380px; height: 100%; } .twopx-hero.twopx-hero--layout-card_selector .twopx-hero__media-col { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .twopx-hero.twopx-hero--layout-card_selector .twopx-hero__media-wrapper { position: relative; height: 100%; min-height: 0; } .twopx-hero.twopx-hero--layout-card_selector .twopx-hero__image, .twopx-hero.twopx-hero--layout-card_selector .twopx-hero__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .twopx-hero.twopx-hero--layout-card_selector .twopx-hero__content-col { position: relative; width: 100%; z-index: 2; flex: 1; } /* ── Grid de tarjetas ── */ .twopx-hero__card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; width: 100%; } /* ── Tarjeta individual ── */ .twopx-hero__card { display: flex; flex-direction: column; padding: 20px 22px; background-color: rgba(255, 255, 255, 0.92); border-radius: 8px; text-decoration: none; color: #0f1729; transition: background-color 0.25s ease, transform 0.25s ease; cursor: pointer; min-width: 0; /* Permite que grid-item encoja correctamente */ } .twopx-hero__card:hover { background-color: #ffffff; transform: translateY(-2px); } /* Fila superior: ícono + flecha */ .twopx-hero__card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } /* El contenedor del ícono tiene dimensión fija para evitar que SVGs de Font Awesome hereden el viewBox nativo (512×512) */ .twopx-hero__card-icon { display: flex; align-items: center; width: 1.5rem; height: 1.5rem; font-size: 1.25rem; line-height: 1; flex-shrink: 0; overflow: hidden; } .twopx-hero__card-icon i { font-size: 1.25rem; line-height: 1; flex-shrink: 0; display: block; } .twopx-hero__card-icon svg { width: 1.5rem !important; height: 1.5rem !important; max-width: 1.5rem !important; max-height: 1.5rem !important; display: block; flex-shrink: 0; } .twopx-hero__card-arrow { font-size: 1rem; line-height: 1; opacity: 0.7; } /* Textos de tarjeta */ .twopx-hero__card-title { display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; line-height: 1.2; } .twopx-hero__card-subtitle { display: block; font-size: 0.78rem; font-weight: 400; opacity: 0.75; line-height: 1.3; } /* ── CTA Link debajo de las tarjetas ── */ .twopx-hero__card-cta { display: inline-block; margin-top: 18px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .twopx-hero__card-cta:hover { color: #ffffff; } /* ── Responsive ── */ @media (max-width: 767px) { .twopx-hero__card-grid { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-width: 1024px) { .twopx-hero__card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }