/*
* Portada del Inicio: carrusel de 4 escenas a pantalla completa.
*
* Contenedor exterior → home-hero
* Contenedor por escena → home-hero__slide (la primera lleva además home-hero__slide--on)
* Imagen de fondo → home-hero__bg (cambiar la foto: clic en el widget → Elegir imagen)
* Contenedor de textos → home-hero__copy
* Editor de texto → home-hero__eyebrow eyebrow eyebrow--plain eyebrow--light
* Título (H1) → home-hero__title (el punto rojo final va en .)
* Editor de texto → home-hero__sub
* Contenedor de botones → home-hero__ctas
* Botones → home-hero__btn btn btn--light | btn--ghost
*
* Las flechas las inyecta assets/js/blocks/home-hero.js (home-hero__arrow).
* Los selectores "escena activa → elemento" usan el estado que pone el JS (--on); es la única
* excepción al "una clase por selector", igual que los :hover de las tarjetas.
*/
.home-hero {
position: relative;
display: grid;
gap: 0;
overflow: hidden;
isolation: isolate;
background: #1D1513;
color: #fff;
}
.home-hero__slide {
grid-area: 1 / 1;
position: relative;
z-index: 0;
display: flex;
justify-content: flex-end; /* móvil: texto abajo */
gap: 0;
min-width: 0;
min-height: 600px;
overflow: hidden;
isolation: isolate;
opacity: 0;
visibility: hidden;
transition: opacity 1.3s ease, visibility 0s 1.3s;
}
.home-hero__slide--on {
z-index: 1;
opacity: 1;
visibility: visible;
transition: opacity 1.3s ease, visibility 0s;
}
/* Posición de la foto por escena (el punto de interés cambia en cada una). */
.home-hero__slide--1 { --hero-x: 62%; }
.home-hero__slide--2 { --hero-x: 72%; }
.home-hero__slide--3 { --hero-x: 64%; }
.home-hero__slide--4 { --hero-x: 66%; }
/* Foto de fondo: widget Imagen a pantalla completa de la escena. */
.home-hero__bg {
position: absolute !important; /* Elementor da position: relative a sus widgets */
inset: 0;
z-index: 0;
margin: 0 !important;
}
/* Apunta al ![]()
interno del widget. */
.home-hero__bg img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: var(--hero-x, 65%) center;
}
.home-hero__slide--on .home-hero__bg img { animation: home-hero-kenburns 9s ease-out both; }
/* Velo oscuro para leer el texto */
.home-hero__slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(0deg, rgba(24, 15, 12, .92) 0%, rgba(24, 15, 12, .7) 52%, rgba(24, 15, 12, .15) 100%);
}
.home-hero__copy {
position: relative;
z-index: 2;
gap: 0;
align-items: flex-start;
width: 100%;
padding: 48px var(--wrap-gutter) 56px;
}
.home-hero__eyebrow { margin: 0; }
/* Espacio con padding: Elementor anula el margin de los widgets. */
.home-hero__title { padding: 18px 0 22px; }
.home-hero__title .elementor-heading-title {
max-width: 9.5em;
margin: 0;
font-size: clamp(38px, 11vw, 52px);
font-weight: 800;
line-height: .96;
letter-spacing: -.055em;
color: #fff;
text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
/* El punto final rojo va en un dentro del texto del título. */
.home-hero__title span { color: var(--color-brand-red); }
.home-hero__sub { padding: 0 0 28px; }
.home-hero__sub p {
max-width: 30em;
margin: 0;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.55;
color: rgba(255, 255, 255, .9);
}
.home-hero__ctas {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
width: 100%;
}
/* Móvil: botones a todo el ancho. Apunta al interno del widget Botón. */
.home-hero__btn .elementor-button {
display: flex;
justify-content: center;
width: 100%;
}
/* Flechas (inyectadas por JS) */
.home-hero__arrow {
position: absolute;
top: 15%;
z-index: 4;
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin: -17px 0 0;
padding: 0;
border: 1.5px solid rgba(255, 255, 255, .7);
border-radius: 50%;
background: rgba(24, 15, 12, .28);
color: #fff;
cursor: pointer;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
transition: background .3s, color .3s, border-color .3s;
}
.home-hero__arrow:hover { background: #fff; color: var(--color-ink); border-color: #fff; }
.home-hero__arrow svg { width: 18px; height: 18px; }
.home-hero__arrow--prev { left: 8px; }
.home-hero__arrow--next { right: 8px; }
/* Escena que entra: sus textos suben uno tras otro. */
.home-hero__slide--on .home-hero__eyebrow,
.home-hero__slide--on .home-hero__title,
.home-hero__slide--on .home-hero__sub,
.home-hero__slide--on .home-hero__ctas { animation: home-hero-rise .9s var(--ease-out) both; }
.home-hero__slide--on .home-hero__title { animation-delay: .12s; }
.home-hero__slide--on .home-hero__sub { animation-delay: .24s; }
.home-hero__slide--on .home-hero__ctas { animation-delay: .36s; }
/* Editor de Elementor: el JS marca las escenas como estáticas y se ven todas, una bajo otra. */
.home-hero__slide--static {
grid-area: auto;
opacity: 1;
visibility: visible;
transition: none;
}
@keyframes home-hero-kenburns {
from { transform: scale(1.1); }
to { transform: scale(1.02); }
}
@keyframes home-hero-rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@media (min-width: 768px) {
.home-hero__slide {
justify-content: center;
min-height: clamp(540px, 46vw, 680px);
}
.home-hero__slide::after {
background:
linear-gradient(90deg, rgba(29, 21, 19, .88) 0%, rgba(29, 21, 19, .7) 24%, rgba(29, 21, 19, .42) 40%, rgba(29, 21, 19, .1) 58%, rgba(29, 21, 19, 0) 70%),
linear-gradient(0deg, rgba(24, 15, 12, .55) 0%, rgba(24, 15, 12, 0) 30%);
}
.home-hero__copy { padding: 56px var(--wrap-gutter) 84px; }
.home-hero__title .elementor-heading-title { font-size: clamp(40px, 6vw, 92px); }
.home-hero__ctas {
grid-template-columns: none;
grid-auto-flow: column;
justify-content: start;
}
.home-hero__btn .elementor-button { width: auto; }
.home-hero__arrow { top: 50%; width: 42px; height: 42px; margin-top: -21px; }
.home-hero__arrow--prev { left: 14px; }
.home-hero__arrow--next { right: 14px; }
}
/* Tablet: más aire a los lados para que las flechas no tapen el texto. */
@media (min-width: 768px) and (max-width: 1100px) {
.home-hero__copy { padding-inline: max(var(--wrap-gutter), 64px); }
}
@media (prefers-reduced-motion: reduce) {
.home-hero__slide--on .home-hero__bg img,
.home-hero__slide--on .home-hero__eyebrow,
.home-hero__slide--on .home-hero__title,
.home-hero__slide--on .home-hero__sub,
.home-hero__slide--on .home-hero__ctas { animation: none; }
}