/* =========================================================
   T3 INICIO — Home image-first (Tanda 3 · Parte 2)
   Hero a sangre con imagen protagonista + overlay.
========================================================= */

/* ---------- HERO full-bleed ---------- */
body.t3-rd .t3-hero-rd {
    position: relative;
    min-height: clamp(420px, 60vh, 560px);
    display: flex;
    align-items: flex-end;
    border-radius: var(--t3-radius-xl);
    overflow: hidden;
    margin-top: 16px;
    background: var(--t3-dark);
    isolation: isolate;
}
body.t3-rd .t3-hero-rd img.t3-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position: var(--image-position, center);
    z-index: -2;
}
body.t3-rd .t3-hero-rd::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--t3-scrim) 6%, transparent) 0%,
            color-mix(in srgb, var(--t3-scrim) 48%, transparent) 50%,
            color-mix(in srgb, var(--t3-scrim) 90%, transparent) 100%);
}
/* Overlay configurable desde admin (media.hero.overlay). "medium" = gradiente
   por defecto de arriba (sin atributo extra que lo sobreescriba). */
body.t3-rd .t3-hero-rd[data-overlay="none"]::after { background: none; }
body.t3-rd .t3-hero-rd[data-overlay="light"]::after {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--t3-scrim) 3%, transparent) 0%,
            color-mix(in srgb, var(--t3-scrim) 22%, transparent) 50%,
            color-mix(in srgb, var(--t3-scrim) 48%, transparent) 100%);
}
body.t3-rd .t3-hero-rd[data-overlay="dark"]::after {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--t3-scrim) 18%, transparent) 0%,
            color-mix(in srgb, var(--t3-scrim) 65%, transparent) 50%,
            color-mix(in srgb, var(--t3-scrim) 96%, transparent) 100%);
}
body.t3-rd .t3-hero-rd .t3-hero-inner {
    width: 100%;
    max-width: var(--t3-maxw);
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 52px) 56px;
    color: #fff;
    text-align: center;
}
body.t3-rd .t3-hero-rd .t3-eyebrow {
    color: rgba(255,255,255,0.88);
    opacity: 1;
    letter-spacing: 0.12em;
    font-size: 11.5px;
}
body.t3-rd .t3-hero-rd h1 {
    font-size: var(--t3-fs-hero);
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 14px auto 16px;
    max-width: 20ch;
    color: #fff;
}
body.t3-rd .t3-hero-rd h1 em { font-style: normal; color: var(--t3-accent); }
body.t3-rd .t3-hero-rd p {
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.65;
    max-width: 56ch;
    color: rgba(255,255,255,0.88);
    margin: 0 auto 28px;
}
body.t3-rd .t3-hero-rd .t3-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
body.t3-rd .t3-hero-rd .t3-hero-actions .btn-t3,
body.t3-rd .t3-hero-rd .t3-hero-actions .btn { min-width: 160px; justify-content: center; }

/* ---------- Banda de propuesta ---------- */
body.t3-rd .t3-home-intro {
    text-align: center;
    padding: 64px 0 8px;
}
body.t3-rd .t3-home-intro h2 {
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: -0.015em;
    max-width: 20ch;
    margin: 12px auto 14px;
    color: var(--t3-text);
}
body.t3-rd .t3-home-intro p { max-width: 60ch; margin: 0 auto; color: var(--t3-muted); line-height: 1.75; }

/* ---------- Áreas estratégicas (commercial_blocks) image-first ---------- */
body.t3-rd .t3-areas .section-heading { text-align: center !important; }
body.t3-rd .t3-areas .section-heading h2 { text-align: center !important; margin-inline: auto; }
body.t3-rd .t3-areas .grid { gap: 26px; }
body.t3-rd .t3-areas .t3-dynamic-card {
    border-radius: var(--t3-radius-lg);
    border: 1px solid var(--t3-line);
    overflow: hidden;
    background: var(--t3-light);
    transition: transform 0.3s var(--t3-ease), box-shadow 0.3s var(--t3-ease);
}
body.t3-rd .t3-areas .t3-dynamic-card:hover { transform: translateY(-6px); box-shadow: var(--t3-shadow); }
body.t3-rd .t3-areas .t3-dynamic-image { aspect-ratio: 16 / 11; object-fit: cover; width: 100%; }
body.t3-rd .t3-areas .t3-dynamic-content { padding: 24px; text-align: center; }
body.t3-rd .t3-areas .t3-dynamic-content .btn { display: inline-block; margin-top: 14px; }
body.t3-rd .t3-areas .t3-dynamic-content h3 { font-size: 20px; margin: 0 0 8px; color: var(--t3-text); }
body.t3-rd .t3-areas .t3-dynamic-content p { color: var(--t3-muted); line-height: 1.6; }

/* ---------- Editorial abierto (imagen dominante, sin caja) ---------- */
body.t3-rd .t3-editorial-block { padding: 56px 0; }
body.t3-rd .t3-editorial-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 50px;
    align-items: center;
}
body.t3-rd .t3-editorial-copy h2 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.015em; color: var(--t3-text); }
body.t3-rd .t3-editorial-copy p { color: var(--t3-muted); line-height: 1.75; }
body.t3-rd .t3-editorial-copy .t3-inline-link a { color: var(--t3-primary); font-weight: 700; }
body.t3-rd .t3-editorial-visual img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: var(--image-fit, cover);
    object-position: var(--image-position, center);
    border-radius: var(--t3-radius-xl);
    box-shadow: var(--t3-shadow);
}

/* ---------- Banda de video ---------- */
body.t3-rd .t3-media-band {
    background: var(--t3-surface);
    border-radius: var(--t3-radius-xl);
    margin: 8px auto;
    padding: 56px 0;
}
body.t3-rd .t3-media-band .section-heading.center { text-align: center; max-width: 60ch; margin: 0 auto 28px; }
body.t3-rd .t3-media-band .section-heading h2 { font-size: clamp(24px, 3vw, 34px); color: var(--t3-text); }
body.t3-rd .t3-media-band .section-badge { color: var(--t3-primary); }
body.t3-rd .t3-video-wrapper {
    width: min(960px, calc(100% - 40px));
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--t3-radius-lg);
    overflow: hidden;
    box-shadow: var(--t3-shadow);
}
body.t3-rd .t3-video-wrapper iframe,
body.t3-rd .t3-video-wrapper video { width: 100%; height: 100%; border: 0; object-fit: cover; }

@media (max-width: 768px) {
    body.t3-rd .t3-editorial-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- CTA final oscura ---------- */
body.t3-rd .t3-home-cta {
    background: var(--t3-dark);
    color: #fff;
    border-radius: var(--t3-radius-xl);
    text-align: center;
    padding: 64px 28px;
    margin-top: 12px;
}
body.t3-rd .t3-home-cta h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); max-width: 22ch; margin: 0 auto 14px; }
body.t3-rd .t3-home-cta p { color: var(--t3-on-dark-muted); max-width: 56ch; margin: 0 auto 26px; }

@media (max-width: 768px) {
    body.t3-rd .t3-hero-rd { min-height: clamp(380px, 62vh, 460px); border-radius: var(--t3-radius-lg); }
    body.t3-rd .t3-hero-rd .t3-hero-actions .btn-t3,
    body.t3-rd .t3-hero-rd .t3-hero-actions .btn { width: 100%; }
}