/* ============================================================
   HERO ANIMADO · Accidentes de tráfico
   Todas las clases van prefijadas con .tfh- para no colisionar
   con el CSS global del sitio. Se carga solo en esta página.
   ============================================================ */

.tfh-hero {
    position: relative;
    min-height: clamp(560px, 78vh, 780px);
    overflow: hidden;
    isolation: isolate;
    background: #eef3f5;
    z-index: 0;
}

.tfh-image-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tfh-image-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    filter: saturate(.96) contrast(1.02);
}

.tfh-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 28%, rgba(255,255,255,.27) 54%, rgba(7,20,38,.10) 100%),
        linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 48%, rgba(7,20,38,.06));
}

/* En tema oscuro el overlay se invierte para mantener legibilidad */
:root[data-theme="dark"] .tfh-overlay {
    background:
        linear-gradient(90deg, rgba(5,8,11,.97) 0%, rgba(5,8,11,.86) 28%, rgba(5,8,11,.30) 54%, rgba(5,8,11,.06) 100%),
        linear-gradient(180deg, rgba(5,8,11,.20), rgba(5,8,11,0) 48%, rgba(5,8,11,.10));
}

/* Copy */
.tfh-content {
    position: relative;
    z-index: 8;
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: calc(var(--header-h) + clamp(40px, 8vh, 96px) - 75px) clamp(20px, 5vw, 64px) 60px;
}

.tfh-copy {
    max-width: 720px;
}

.tfh-eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 22px;
    color: #0b9386;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 12px;
    font-weight: 900;
}

.tfh-eyebrow::before {
    content: "";
    display: inline-block;
    width: 46px;
    height: 1px;
    margin-right: 16px;
    background: currentColor;
    opacity: .55;
}

.tfh-copy h1 {
    margin: 0;
    max-width: 760px;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(50px, 5.6vw, 96px);
    line-height: .96;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--ref-ink, #071426);
}

.tfh-copy h1 strong {
    color: var(--ref-blue, #16aa9c);
    font-weight: 500;
}

:root[data-theme="dark"] .tfh-copy h1 {
    color: #f4f7fb;
}

.tfh-copy h1::after {
    content: "";
    display: block;
    width: 92px;
    height: 2px;
    margin-top: 28px;
    background: #35d1bd;
}

.tfh-copy p:not(.tfh-eyebrow) {
    margin: 26px 0 0;
    max-width: 620px;
    color: var(--muted, #203047);
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.65;
}

.tfh-actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.tfh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 850;
    font-size: 15px;
}

.tfh-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #078e82, #16aa9c);
    box-shadow: 0 20px 50px rgba(6, 149, 135, .22);
}

.tfh-btn-link {
    color: var(--ref-ink, #071426);
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(9,32,63,.12);
    backdrop-filter: blur(10px);
}

:root[data-theme="dark"] .tfh-btn-link {
    color: #f4f7fb;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
}

/* ===== Capa de animación ===== */
.tfh-anim {
    position: absolute;
    z-index: 7;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    transform: scale(.62);
    transform-origin: bottom right;
}

.tfh-road {
    position: absolute;
    left: 36%;
    right: 2%;
    bottom: -7%;
    height: 42%;
    transform: perspective(900px) rotateX(63deg);
    transform-origin: bottom;
    background:
        linear-gradient(to top, rgba(7,20,38,.20), transparent 80%),
        repeating-linear-gradient(90deg, transparent 0 120px, rgba(255,255,255,.36) 120px 123px);
    opacity: .72;
}

.tfh-lane {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.70) 0 70px, transparent 70px 128px);
}

.tfh-lane-a { top: 28%; }
.tfh-lane-b { top: 56%; }

.tfh-road-glow {
    position: absolute;
    inset: auto 0 0;
    height: 60%;
    background: radial-gradient(ellipse at 50% 50%, rgba(53,209,189,.20), transparent 68%);
}

.tfh-arc,
.tfh-trajectory {
    position: absolute;
    overflow: visible;
    opacity: .64;
}

.tfh-arc {
    width: 54vw;
    height: 54vw;
    right: 18%;
    top: 7%;
}

.tfh-arc circle,
.tfh-arc path,
.tfh-trajectory path {
    fill: none;
    stroke: rgba(53,209,189,.46);
    stroke-width: 1.3;
    stroke-dasharray: 8 10;
}

.tfh-trajectory {
    width: 48vw;
    right: 12%;
    top: 29%;
}

.tfh-trajectory circle {
    fill: #35d1bd;
}

.tfh-car {
    position: absolute;
    width: 260px;
    height: 118px;
    filter: drop-shadow(0 22px 32px rgba(5,14,28,.22));
    transform-origin: center;
}

.tfh-car-dark { left: 43%; top: 52%; }
.tfh-car-white { left: 59%; top: 50%; }

.tfh-car-body {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 22px;
    height: 58px;
    border-radius: 36px 48px 17px 17px;
    overflow: hidden;
}

.tfh-car-dark .tfh-car-body {
    background:
        radial-gradient(circle at 88% 45%, rgba(255,255,255,.34), transparent 20%),
        linear-gradient(180deg, #22344c, #061321);
}

.tfh-car-white .tfh-car-body {
    background:
        radial-gradient(circle at 14% 44%, rgba(9,32,63,.22), transparent 20%),
        linear-gradient(180deg, #fefefa, #cbd5dc);
}

.tfh-car-top {
    position: absolute;
    left: 88px;
    top: 20px;
    width: 112px;
    height: 50px;
    border-radius: 62px 62px 10px 10px;
    transform: skewX(-18deg);
    background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(84,112,138,.22));
    border: 1px solid rgba(255,255,255,.62);
    z-index: 2;
}

.tfh-glass {
    position: absolute;
    top: 8px;
    height: 26px;
    border-radius: 8px;
    background: rgba(214,232,242,.45);
}

.tfh-glass-a { left: 74px; width: 42px; }
.tfh-glass-b { left: 122px; width: 48px; }

.tfh-headlight {
    position: absolute;
    top: 25px;
    width: 18px;
    height: 7px;
    border-radius: 999px;
}

.tfh-car-dark .tfh-front { right: 8px; background: #eefcff; box-shadow: 0 0 16px rgba(255,255,255,.72); }
.tfh-car-dark .tfh-rear { left: 8px; background: #d44550; }
.tfh-car-white .tfh-front { left: 8px; background: #eefcff; box-shadow: 0 0 16px rgba(255,255,255,.72); }
.tfh-car-white .tfh-rear { right: 8px; background: #d44550; }

.tfh-damage {
    position: absolute;
    top: 20px;
    width: 34px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.22);
}

.tfh-car-dark .tfh-damage { right: 18px; }
.tfh-car-white .tfh-damage { left: 18px; }

.tfh-wheel {
    position: absolute;
    bottom: 4px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: radial-gradient(circle, #e9eef3 0 5px, #24344a 6px 14px, #071220 15px);
}

.tfh-wheel-a { left: 58px; }
.tfh-wheel-b { right: 58px; }

.tfh-car-shadow {
    position: absolute;
    left: 38px;
    right: 38px;
    bottom: -4px;
    height: 18px;
    border-radius: 50%;
    background: rgba(4,11,20,.28);
    filter: blur(13px);
}

.tfh-impact {
    position: absolute;
    left: 56.8%;
    top: 56%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
}

.tfh-ring,
.tfh-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.tfh-ring {
    border: 2px solid rgba(53,209,189,.64);
    border-radius: 50%;
}

.tfh-flash {
    width: 58px;
    height: 58px;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,.96), rgba(53,209,189,.62), transparent 72%);
    filter: blur(2px);
}

.tfh-debris {
    position: absolute;
    left: 56%;
    top: 58%;
    width: 240px;
    height: 140px;
    transform: translate(-50%, -50%);
}

.tfh-debris i {
    position: absolute;
    width: 7px;
    height: 4px;
    background: rgba(9,32,63,.44);
    border-radius: 1px;
    opacity: 0;
}

.tfh-debris i:nth-child(1){ left: 24%; top: 40%; }
.tfh-debris i:nth-child(2){ left: 42%; top: 54%; }
.tfh-debris i:nth-child(3){ left: 58%; top: 42%; }
.tfh-debris i:nth-child(4){ left: 34%; top: 68%; }
.tfh-debris i:nth-child(5){ left: 72%; top: 64%; }
.tfh-debris i:nth-child(6){ left: 50%; top: 78%; }
.tfh-debris i:nth-child(7){ left: 64%; top: 24%; }
.tfh-debris i:nth-child(8){ left: 40%; top: 18%; }

.tfh-smoke {
    position: absolute;
    left: 57%;
    top: 55%;
    width: 250px;
    height: 130px;
    transform: translate(-50%, -50%);
}

.tfh-smoke i {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220,228,232,.78), rgba(196,206,212,.18) 60%, transparent 74%);
    filter: blur(7px);
    opacity: 0;
}

.tfh-smoke i:nth-child(1){ width: 74px; height: 52px; left: 28px; top: 40px; }
.tfh-smoke i:nth-child(2){ width: 98px; height: 66px; left: 84px; top: 22px; }
.tfh-smoke i:nth-child(3){ width: 66px; height: 48px; left: 144px; top: 48px; }

.tfh-metric {
    position: absolute;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    color: #fff;
    border-radius: 6px;
    background: rgba(7,20,38,.64);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(5,14,28,.16);
    opacity: 0;
}

.tfh-metric small {
    color: #d5f9f0;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.tfh-metric strong {
    font-size: 14px;
    font-weight: 600;
}

.tfh-metric-speed { left: 51%; top: 41%; }
.tfh-metric-time { left: 58%; top: 68%; }

.tfh-cards {
    position: absolute;
    right: 8%;
    top: 22%;
    display: grid;
    gap: 12px;
}

.tfh-cards article {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 250px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.56);
    border-radius: 10px;
    background: rgba(255,255,255,.34);
    backdrop-filter: blur(13px);
    box-shadow: 0 18px 44px rgba(5,14,28,.10);
    opacity: 0;
}

.tfh-card-icon {
    width: 34px;
    height: 34px;
    position: relative;
    flex: 0 0 auto;
}

.tfh-icon-analysis::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 2px dashed #09203f;
    border-radius: 50%;
}

.tfh-icon-crash::before {
    content: "↯";
    position: absolute;
    left: 8px;
    top: 1px;
    color: #09203f;
    font-size: 25px;
}

.tfh-icon-body::before {
    content: "✚";
    position: absolute;
    left: 7px;
    top: 4px;
    color: #09203f;
    font-size: 22px;
}

.tfh-cards strong {
    display: block;
    color: #071426;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.tfh-cards p {
    margin: 5px 0 0;
    color: #45566b;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .tfh-image-layer img { object-position: 62% center; }

    .tfh-overlay {
        background:
            linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 44%, rgba(255,255,255,.18) 100%);
    }

    :root[data-theme="dark"] .tfh-overlay {
        background:
            linear-gradient(180deg, rgba(5,8,11,.96) 0%, rgba(5,8,11,.78) 44%, rgba(5,8,11,.30) 100%);
    }

    .tfh-anim {
        transform: scale(.88);
        transform-origin: bottom right;
    }

    .tfh-cards { display: none; }
}

@media (max-width: 720px) {
    .tfh-copy h1 { font-size: clamp(40px, 11vw, 64px); }
    .tfh-anim {
        transform: scale(.68);
        transform-origin: bottom right;
    }
    .tfh-car { width: 230px; }
    .tfh-metric { display: none; }
    .tfh-actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .tfh-car,
    .tfh-trajectory,
    .tfh-arc,
    .tfh-metric,
    .tfh-cards article {
        animation: none !important;
    }
}