/* ════════════════════════════════════════════════════════════════
 * MAS · Hero · PORTADA 2026-06-11 [CLIENTE]
 * Foto de fondo full-bleed + velo degradado negro translúcido +
 * texto blanco + "Lo último" anclado abajo. Toque de portada.
 * ════════════════════════════════════════════════════════════════ */

.mas-hero--cover {
    position: relative;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--color-bg-navy, #0A3161); /* respaldo mientras carga la foto */
    color: #FFFFFF;
}

/* ─── capa de fondo ─── */
.mas-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.mas-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 16%; /* el rostro queda visible en el recorte panorámico */
    display: block;
    filter: saturate(0.82) contrast(1.04);
}
/* Velo degradado: oscuro abajo-izquierda (donde vive el texto), aire arriba-derecha */
.mas-hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(8, 10, 14, 0.86) 0%, rgba(8, 10, 14, 0.42) 46%, rgba(8, 12, 20, 0.22) 100%),
        linear-gradient(100deg, rgba(8, 10, 14, 0.62) 0%, rgba(8, 10, 14, 0.18) 58%, rgba(8, 10, 14, 0) 100%);
}
.mas-hero__grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.5;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ─── contenido ─── */
.mas-hero__text {
    position: relative;
    z-index: 1;
    max-width: var(--content-max, 1280px);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-24, 96px) var(--space-6, 24px) var(--space-16, 64px);
}

.mas-hero__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-xs, 11px);
    letter-spacing: var(--tr-wider, 0.15em);
    text-transform: uppercase;
    font-weight: var(--fw-semibold, 600);
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 var(--space-5, 20px);
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    opacity: 0;
    animation: mas-hero-fade-up 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mas-hero__eyebrow::before {
    content: '';
    width: 36px;
    height: 1px;
    background: var(--color-accent, #B31942); /* la rayita roja: el acento */
}

.mas-hero__name {
    font-family: var(--font-serif);
    font-weight: var(--fw-regular, 400);
    font-size: clamp(56px, 9vw, var(--fs-6xl, 84px));
    line-height: var(--lh-tight, 1);
    letter-spacing: var(--tr-display, -0.025em);
    margin: 0 0 var(--space-6, 24px);
    color: #FFFFFF;
    opacity: 0;
    animation: mas-hero-fade-up 1s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    max-width: 12ch;
}
.mas-hero__name em {
    font-style: italic;
    color: #C9D9EE; /* azul muy claro sobre el velo — la marca respira */
    font-weight: var(--fw-medium, 500);
}

.mas-hero__role {
    font-family: var(--font-sans);
    font-size: var(--fs-sm, 13px);
    line-height: var(--lh-relaxed, 1.55);
    letter-spacing: var(--tr-wide, 0.05em);
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 var(--space-8, 32px);
    max-width: 520px;
    opacity: 0;
    animation: mas-hero-fade-up 1s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mas-hero__quote {
    font-family: var(--font-serif);
    font-size: clamp(var(--fs-lg, 18px), 2.4vw, var(--fs-2xl, 28px));
    font-style: italic;
    line-height: var(--lh-relaxed, 1.45);
    color: rgba(255, 255, 255, 0.92);
    border-left: 2px solid var(--color-accent, #B31942);
    padding-left: var(--space-6, 24px);
    margin: 0 0 var(--space-3, 12px);
    max-width: 640px;
    opacity: 0;
    animation: mas-hero-fade-up 1s 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mas-hero__quote-attr {
    font-family: var(--font-sans);
    font-size: var(--fs-xs, 11px);
    letter-spacing: var(--tr-wide, 0.05em);
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 var(--space-8, 32px);
    padding-left: calc(var(--space-6, 24px) + 2px);
    opacity: 0;
    animation: mas-hero-fade-up 1s 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── CTAs: invitan a tocar, sin gritar ─── */
.mas-hero__ctas {
    display: flex;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
    opacity: 0;
    animation: mas-hero-fade-up 1s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mas-hero__cta {
    font-family: var(--font-sans);
    font-size: var(--fs-xs, 11px);
    font-weight: var(--fw-semibold, 600);
    letter-spacing: var(--tr-wider, 0.15em);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--space-4, 16px) var(--space-7, 28px);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 48px;
    transition: background var(--t-fast, 150ms), color var(--t-fast, 150ms),
                border-color var(--t-fast, 150ms), transform var(--t-fast, 150ms);
}
.mas-hero__cta--primary {
    background: #FFFFFF;
    color: var(--color-text, #1A1A1A);
    border: 1px solid #FFFFFF;
}
.mas-hero__cta--primary:hover {
    background: var(--color-accent, #B31942);
    border-color: var(--color-accent, #B31942);
    color: #FFFFFF;
    transform: translateY(-1px);
}
.mas-hero__cta--ghost {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.45);
}
.mas-hero__cta--ghost:hover {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}
.mas-hero__arr { transition: transform var(--t-fast, 150ms); }
.mas-hero__cta:hover .mas-hero__arr { transform: translateX(3px); }

/* ─── "Lo último" anclado abajo ─── */
.mas-hero__latest {
    position: relative;
    z-index: 1;
    max-width: var(--content-max, 1280px);
    width: calc(100% - var(--space-6, 24px) * 2);
    margin: 0 auto;
    display: flex;
    align-items: baseline;
    gap: var(--space-4, 16px);
    padding: var(--space-5, 20px) 0 var(--space-8, 32px);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: mas-hero-fade-up 1s 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mas-hero__latest-lbl {
    font-family: var(--font-sans);
    font-size: var(--fs-2xs, 10px);
    font-weight: var(--fw-semibold, 600);
    letter-spacing: var(--tr-wider, 0.15em);
    text-transform: uppercase;
    color: #E8AFC0; /* rojo aclarado sobre oscuro — acento legible */
    white-space: nowrap;
}
.mas-hero__latest-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg, 18px);
    font-style: italic;
    line-height: var(--lh-snug, 1.25);
    color: #FFFFFF;
    transition: color var(--t-fast, 150ms);
}
.mas-hero__latest-arr {
    color: rgba(255, 255, 255, 0.6);
    transition: transform var(--t-fast, 150ms), color var(--t-fast, 150ms);
}
.mas-hero__latest:hover .mas-hero__latest-title { color: #C9D9EE; }
.mas-hero__latest:hover .mas-hero__latest-arr { transform: translateX(4px); color: #FFFFFF; }

/* ─── caption discreta ─── */
.mas-hero__caption {
    position: absolute;
    right: var(--space-5, 20px);
    bottom: var(--space-3, 12px);
    z-index: 1;
    font-family: var(--font-sans);
    font-size: var(--fs-2xs, 10px);
    letter-spacing: var(--tr-wide, 0.05em);
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* ─── animación de entrada ─── */
@keyframes mas-hero-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mas-hero--cover [class*="mas-hero__"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ─── responsive ─── */
@media (max-width: 768px) {
    .mas-hero--cover { min-height: 88vh; }
    .mas-hero__img { object-position: 60% 10%; }
    .mas-hero__text { padding: var(--space-20, 80px) var(--space-5, 20px) var(--space-10, 40px); }
    .mas-hero__name { font-size: clamp(44px, 13vw, 64px); }
    .mas-hero__quote { font-size: var(--fs-lg, 18px); }
    .mas-hero__latest { flex-wrap: wrap; gap: var(--space-2, 8px); }
}