html body .hero-title {
            font-size: 42px; /* Reducido a 42px en desktop para perfecta legibilidad */
            line-height: 1.15;
            color: var(--navy);
            margin-bottom: 20px;
            letter-spacing: -1px;
            font-weight: 900;
        }
html body .hero-ctas {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
@media (max-width: 768px) {html body .hero-title {
                font-size: 32px !important; /* Reducido progresivamente a 32px en tablet */
            }
}
@media (max-width: 640px) {html body .hero-title {
                font-size: 26px !important; /* Reducido progresivamente a 26px en móvil */
            }
}
html body .hero-lifeline {
            position: relative;
            overflow: hidden;
            background: #ffffff;
            padding: 140px 0 90px; /* Top amplio para librar el header fijo */
        }
html body .hero-lifeline .container {
            position: relative;
            z-index: 2;
            max-width: 1280px; /* Más ancho que el resto del sitio: la línea es protagonista */
        }
html body .hero-title-center {
            text-align: center;
            font-size: 44px;
            line-height: 1.15;
            letter-spacing: -1px;
            margin: 0 auto 16px;
        }
html body .hero-ctas-center {
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 46px;
        }
html body .hero-link {
            display: inline-flex;
            align-items: center;
            color: #9D5E8E;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 15px;
            text-decoration: none;
            transition: color .2s ease;
        }
html body .hero-link:hover { color: #1F3286; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 768px) {html body .hero-lifeline { padding: 120px 0 70px; }
html body .hero-title-center { font-size: 30px; }
}
html body .lifeline-section {
            background: linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%);
            padding: 90px 0 100px;
            overflow: hidden;
        }
html body .lifeline-header {
            text-align: center;
            max-width: 860px;
            margin: 0 auto 70px;
        }
html body .lifeline-eyebrow {
            display: inline-block;
            color: var(--rose);
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 14px;
        }
html body .lifeline-title {
            font-size: 34px;
            line-height: 1.25;
            letter-spacing: -0.5px;
            margin-bottom: 16px;
        }
html body .lifeline-intro {
            font-size: 18px;
            color: #5b6472;
            line-height: 1.7;
        }
html body .lifeline-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--rose);
            margin: 0 0 26px;
        }
html body .lifeline-hint::after {
            content: "↓";
            font-size: 14px;
            animation: hintBounce 1.6s ease-in-out infinite;
        }
@keyframes hintBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(4px); }
        }
html body .lifeline {
            position: relative;
            max-width: 1160px;
            margin: 0 auto;
        }
html body .lifeline-track {
            position: absolute;
            top: 45px;
            left: 12.5%;
            right: 12.5%;
            height: 7px;
            background: #E4DCEC;
            border-radius: 4px;
            overflow: hidden;
            z-index: 0;
        }
html body .lifeline-progress {
            height: 100%;
            width: 0;
            border-radius: 4px;
            background: linear-gradient(90deg, #5FAD41 0%, #BD7CAC 45%, #9D5E8E 70%, #1F3286 100%);
            transition: width 2s cubic-bezier(0.45, 0, 0.2, 1);
        }
html body .lifeline-inflection {
            position: absolute;
            top: 41px;
            left: 50%;
            width: 25%;
            height: 14px;
            border-radius: 14px;
            background: linear-gradient(90deg, rgba(157,94,142,0) 0%, rgba(157,94,142,0.55) 50%, rgba(157,94,142,0) 100%);
            filter: blur(2px);
            opacity: 0;
            z-index: 0;
            pointer-events: none;
        }
html body .lifeline.drawn .lifeline-inflection {
            animation: inflectionIn 0.8s ease 1.4s forwards,
                       inflectionPulse 3.2s ease-in-out 2.4s infinite;
        }
@keyframes inflectionIn { to { opacity: 0.8; } }
@keyframes inflectionPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 0.9; }
        }
html body .lifeline-traveler {
            position: absolute;
            top: 40px;
            left: 12.5%;
            width: 18px;
            height: 18px;
            margin-left: -9px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 25%, rgba(255,255,255,0) 70%);
            box-shadow: 0 0 16px 6px rgba(189, 124, 172, 0.7);
            opacity: 0;
            z-index: 3;
            pointer-events: none;
        }
html body .lifeline.drawn .lifeline-traveler {
            animation: travel 2s cubic-bezier(0.45, 0, 0.2, 1) forwards;
        }
@keyframes travel {
            0%   { left: 12.5%; opacity: 0; }
            10%  { opacity: 1; }
            90%  { opacity: 1; }
            100% { left: 87.5%; opacity: 0; }
        }
html body .lifeline-stages {
            display: flex;
            position: relative;
            z-index: 1;
        }
html body .lifeline-stage {
            flex: 1;
            background: none;
            border: none;
            cursor: pointer;
            text-align: center;
            padding: 33px 6px 0;
            font-family: 'Inter', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.3s ease;
        }
html body .lifeline-dot {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #ffffff;
            border: 4px solid #D9D2E4;
            box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
            transition: background 0.5s ease, border-color 0.5s ease, transform 0.15s ease, box-shadow 0.15s ease;
        }
html body .lifeline-stage-name {
            font-family: 'Montserrat', sans-serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--navy);
            margin-top: 22px;
            transition: color 0.3s ease;
        }
html body .lifeline-stage-age {
            font-family: 'Montserrat', sans-serif;
            font-size: 15px;
            font-weight: 600;
            color: #8b93a3;
            margin-top: 4px;
        }
html body .lifeline-stage-phase {
            font-size: 11px;
            font-style: italic;
            color: #a9aebb;
            margin-top: 2px;
        }
html body .lifeline.drawn .stage-1 .lifeline-dot { border-color: #5FAD41; background: #5FAD41; transition: background 0.5s ease 0.25s, border-color 0.5s ease 0.25s, transform 0.15s ease, box-shadow 0.15s ease; }
html body .lifeline.drawn .stage-2 .lifeline-dot { border-color: #BD7CAC; background: #BD7CAC; transition: background 0.5s ease 0.75s, border-color 0.5s ease 0.75s, transform 0.15s ease, box-shadow 0.15s ease; }
html body .lifeline.drawn .stage-3 .lifeline-dot { border-color: #9D5E8E; background: #9D5E8E; transition: background 0.5s ease 1.25s, border-color 0.5s ease 1.25s, transform 0.15s ease, box-shadow 0.15s ease; }
html body .lifeline.drawn .stage-4 .lifeline-dot { border-color: #1F3286; background: #1F3286; transition: background 0.5s ease 1.75s, border-color 0.5s ease 1.75s, transform 0.15s ease, box-shadow 0.15s ease; }
html body .lifeline-stage:hover .lifeline-dot { transform: scale(1.25); }
html body .lifeline-stage.active .lifeline-dot { transform: scale(1.45); box-shadow: 0 0 0 7px rgba(189, 124, 172, 0.18); }
html body .lifeline-stage.active .lifeline-stage-name { color: var(--rose); }
html body .lifeline-stage:hover { transform: translateY(-2px); }
html body .lifeline-panel {
            max-width: 840px;
            margin: 44px auto 0;
            background: var(--panel-bg, #F5FAF0);
            border-radius: var(--radius-lg);
            border-left: 5px solid var(--accent, #5FAD41);
            box-shadow: var(--shadow-sm);
            min-height: 300px;
            position: relative;
            overflow: hidden;
            transition: background 0.45s ease, border-color 0.45s ease;
        }
html body .lifeline-panel-inner {
            box-sizing: border-box;
            width: 100%;
            min-height: 300px;
            padding: 26px 32px;
            display: flex;
            gap: 30px;
            align-items: center;
            opacity: 1;
            transition: opacity 0.4s ease;
        }
html body .lifeline-panel-inner.is-entering { opacity: 0; }
html body .lifeline-panel-inner.is-leaving {
            opacity: 0;
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
html body .lifeline-panel-body { flex: 1; min-width: 0; }
html body .lifeline-panel-figure {
            position: relative;
            flex-shrink: 0;
            width: 210px;
            align-self: stretch;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
html body .lifeline-panel-figure::before {
            content: "";
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            width: 170px;
            height: 170px;
            border-radius: 50%;
            background: var(--accent, #5FAD41);
            opacity: 0.10;
        }
html body .lifeline-panel-figure img {
            position: relative;
            z-index: 1;
            width: 100%;
            max-height: 250px;
            object-fit: contain;
            display: block;
        }
html body .lifeline-panel-head {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }
html body .lifeline-panel-icon {
            width: 50px;
            height: 50px;
            flex-shrink: 0;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--accent, #5FAD41);
        }
html body .lifeline-panel-icon svg { width: 27px; height: 27px; }
html body .lifeline-panel-heading { min-width: 0; }
html body .lifeline-panel-tag {
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            color: var(--accent, #5FAD41);
            margin-bottom: 10px;
        }
html body .lifeline-panel-title {
            font-size: 20px;
            margin-bottom: 8px;
            line-height: 1.25;
        }
html body .lifeline-panel-desc {
            font-size: 14px;
            color: #4b5563;
            line-height: 1.65;
            margin-bottom: 16px;
        }
html body .lifeline-panel-list-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            color: #9aa1ae;
            margin-bottom: 12px;
        }
html body .lifeline-panel-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 7px 22px;
            margin-bottom: 20px;
        }
html body .lifeline-panel-list li {
            position: relative;
            padding-left: 24px;
            font-size: 14px;
            color: var(--text-dark);
        }
html body .lifeline-panel-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--accent, #5FAD41);
            font-weight: 700;
        }
html body .lifeline-panel-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0;
            background: none;
            color: var(--accent, #5FAD41);
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            transition: gap 0.2s ease;
        }
html body .lifeline-panel-btn:hover {
            gap: 9px;
            text-decoration: underline;
            text-underline-offset: 4px;
        }