/* ================================================================ DVA Web — assets/css/styles.css Non-critical styles (loaded at end of ) Critical styles are inlined in of index.html ================================================================ */ /* ── TYPOGRAPHY HELPERS ──────────────────────────────────────── */ .eyebrow { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); background: rgba(255, 92, 0, 0.08); border: 1px solid rgba(255, 92, 0, 0.28); border-radius: 100px; padding: 6px 20px; margin-bottom: 20px; } .section-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; color: var(--white); margin-bottom: 20px; } .section-title em { font-style: normal; color: var(--accent); } .section-header { text-align: center; margin-bottom: clamp(48px, 8vw, 80px); max-width: 720px; margin-left: auto; margin-right: auto; } .section-header p { font-size: 1.0625rem; color: var(--gray-400); max-width: 520px; margin-left: auto; margin-right: auto; } /* ── LAYOUT UTILITIES ────────────────────────────────────────── */ .section-pad { padding-top: clamp(64px, 10vw, 120px); padding-bottom: clamp(64px, 10vw, 120px); } .section-divider { height: 1px; background: -webkit-linear-gradient(left, transparent, var(--border) 20%, var(--border) 80%, transparent); background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent); margin: 0 clamp(20px, 8vw, 80px); } /* ── BUTTON VARIANTS (non-critical) ─────────────────────────── */ .btn--outline { background: transparent; color: var(--white); border: 2px solid var(--border); } .btn--outline:hover { border-color: var(--gray-600); background: rgba(255, 255, 255, 0.04); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .btn--full { width: 100%; } .btn--lg { min-height: 64px; font-size: 1.0625rem; padding: 0 48px; min-width: 300px; } /* ── SECCIÓN 2: PROBLEMA ─────────────────────────────────────── */ .problem { background-color: var(--bg); } .problem__flow { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 0; max-width: 700px; margin: 0 auto clamp(48px, 8vw, 72px); } .problem__step { display: -webkit-flex; display: flex; gap: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(24px, 5vw, 36px); } .problem__step--fatal { border-color: rgba(255, 92, 0, 0.3); background: rgba(255, 92, 0, 0.04); } .problem__step-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--border); line-height: 1; min-width: 44px; padding-top: 2px; -webkit-flex-shrink: 0; flex-shrink: 0; } .problem__step-num--fatal { color: var(--accent); opacity: 0.55; } .problem__step-body h3 { font-family: var(--font-display); font-size: clamp(1rem, 2.5vw, 1.125rem); font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.3; } .problem__step-body h3 em { font-style: normal; color: var(--accent); } .problem__step-body p { font-size: 0.9375rem; color: var(--gray-400); line-height: 1.65; } .problem__arrow { display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: center; align-items: center; padding: 10px 0 10px calc(44px + 24px); color: var(--gray-600); } .problem__closing { text-align: center; padding: clamp(28px, 5vw, 40px) 32px; border: 1px solid var(--border-accent); border-radius: var(--r-md); background: rgba(255, 92, 0, 0.04); max-width: 700px; margin: 0 auto; } .closing-text { font-family: var(--font-display); font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 700; color: var(--white); } .closing-text strong { color: var(--accent); } /* ── SECCIÓN 3: SOLUCIÓN ─────────────────────────────────────── */ .solution { background: var(--bg-card-alt); } .solution__list { list-style: none; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 4px; max-width: 740px; margin: 0 auto; } .solution__item { display: -webkit-flex; display: flex; gap: 20px; -webkit-align-items: flex-start; align-items: flex-start; padding: 24px 28px; border-radius: var(--r-md); -webkit-transition: background 0.2s ease; transition: background 0.2s ease; } .solution__item:hover { background: rgba(255, 255, 255, 0.03); } .solution__icon { min-width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 92, 0, 0.12); color: var(--accent); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-shrink: 0; flex-shrink: 0; } .solution__text h3 { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.0625rem); font-weight: 700; color: var(--white); margin-bottom: 8px; line-height: 1.35; } .solution__text p { font-size: 0.9rem; color: var(--gray-400); line-height: 1.65; } /* ── SECCIÓN 4: PRUEBA SOCIAL ────────────────────────────────── */ .social-proof { background: var(--bg); } .testimonials { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 20px; margin-bottom: clamp(48px, 8vw, 72px); } @media (min-width: 768px) { .testimonials { -webkit-flex-direction: row; flex-direction: row; } } .testimonial { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 36px); -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 20px; -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .testimonial:hover { border-color: rgba(255, 92, 0, 0.2); } .testimonial__stars { color: #F59E0B; font-size: 1rem; letter-spacing: 3px; } .testimonial__quote { font-style: normal; font-size: 0.9375rem; line-height: 1.72; color: var(--gray-100); -webkit-flex: 1; flex: 1; } .testimonial__quote strong { color: var(--white); font-weight: 600; } .testimonial__footer { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 14px; border-top: 1px solid var(--border); padding-top: 20px; } .testimonial__avatar { display: block; width: 52px; height: 52px; min-width: 52px; min-height: 52px; border-radius: 50%; object-fit: cover; object-position: center top; overflow: hidden; background: var(--border); -webkit-flex-shrink: 0; flex-shrink: 0; } .testimonial__name { font-weight: 600; font-size: 0.9375rem; color: var(--white); margin-bottom: 3px; } .testimonial__role { font-size: 0.8125rem; color: var(--gray-400); } /* Estadística de impacto */ .impact-stat { text-align: center; padding: clamp(36px, 6vw, 60px) clamp(24px, 5vw, 48px); border: 1px solid var(--border-accent); border-radius: var(--r-xl); background: rgba(255, 92, 0, 0.04); max-width: 640px; margin: 0 auto; } .impact-stat__number { font-family: var(--font-display); font-size: clamp(4.5rem, 14vw, 8rem); font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 16px; letter-spacing: -0.03em; } .impact-stat__text { font-size: clamp(0.9375rem, 2vw, 1.0625rem); color: var(--gray-400); line-height: 1.65; } /* ── SECCIÓN 5: AUTORIDAD ────────────────────────────────────── */ .authority { background: var(--bg-card-alt); } .authority__inner { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: clamp(40px, 6vw, 64px); } @media (min-width: 860px) { .authority__inner { -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; gap: 80px; } } .authority__text { -webkit-flex: 1; flex: 1; } .authority__text p { color: var(--gray-400); line-height: 1.72; margin-bottom: 16px; font-size: 1rem; } .authority__text p:last-child { margin-bottom: 0; } .authority__side { -webkit-flex-shrink: 0; flex-shrink: 0; } .authority__badges-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 20px; } .authority__logos { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 12px; } .authority__logo-item { background: #FFFFFF; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-sm); padding: 16px 28px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; min-height: 64px; min-width: 220px; } .authority__logo-item img { max-height: 32px; width: auto; object-fit: contain; } /* ── SECCIÓN 6: OFERTA ───────────────────────────────────────── */ .offer { background: var(--bg); } .offer__anchor { font-size: 1rem; color: var(--gray-400); margin-top: 10px; } .offer__anchor strong { color: var(--white); } .offer__cards { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 20px; margin-bottom: 36px; -webkit-align-items: stretch; align-items: stretch; } @media (min-width: 780px) { .offer__cards { -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } } /* Base card */ .offer-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(32px, 5vw, 48px); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 24px; position: relative; -webkit-flex: 1; flex: 1; } /* Card destacada */ .offer-card--featured { border-color: var(--accent); background: #0F0800; box-shadow: 0 0 0 1px var(--accent), 0 32px 72px rgba(255, 92, 0, 0.18); -webkit-flex: 1.25; flex: 1.25; } /* Badge "MÁS POPULAR" */ .offer-card__badge { position: absolute; top: -15px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: var(--accent); color: var(--white); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 22px; border-radius: 100px; white-space: nowrap; } .offer-card__header { text-align: center; } .offer-card__title { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 20px; } .offer-card--featured .offer-card__title { color: var(--accent); } .offer-card__pricing { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; -webkit-justify-content: center; justify-content: center; gap: 14px; margin-bottom: 10px; } .offer-card__was { font-size: 0.9375rem; color: var(--gray-600); text-decoration: line-through; } .offer-card__price { font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: 700; color: var(--white); line-height: 1; } .offer-card__price small { font-size: 1rem; font-weight: 400; color: var(--gray-400); margin-left: 2px; } .offer-card__price--sm { font-size: clamp(2rem, 5vw, 2.75rem); } .offer-card__delivery { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--gray-400); } .offer-card__list { list-style: none; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 12px; -webkit-flex: 1; flex: 1; } .offer-card__list li { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; gap: 12px; font-size: 0.9375rem; color: var(--gray-100); line-height: 1.5; } .offer-card__check { color: var(--accent); font-weight: 700; font-size: 1rem; line-height: 1.5; -webkit-flex-shrink: 0; flex-shrink: 0; } .offer-card__pdf-title { font-size: 0.875rem; color: var(--gray-400); font-style: italic; line-height: 1.55; border-left: 2px solid rgba(255, 92, 0, 0.3); padding-left: 14px; } .offer-card__secure { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 6px; font-size: 0.8rem; color: var(--gray-600); } /* Escasez */ .scarcity { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 10px; padding: 16px 24px; border: 1px solid var(--border); border-radius: var(--r-md); max-width: 580px; margin: 0 auto; font-size: 0.9rem; color: var(--gray-400); } .scarcity svg { color: var(--accent); -webkit-flex-shrink: 0; flex-shrink: 0; } .scarcity strong { color: var(--white); } /* ── SECCIÓN 7: CTA FINAL ────────────────────────────────────── */ .final-cta { background: var(--bg-card-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .final-cta__inner { text-align: center; max-width: 660px; margin: 0 auto; } .final-cta__title { font-family: var(--font-display); font-size: clamp(2rem, 5.5vw, 3.375rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: var(--white); margin-bottom: 20px; } .final-cta__sub { font-size: clamp(1rem, 2vw, 1.1875rem); color: var(--gray-400); line-height: 1.65; margin-bottom: 40px; } .final-cta__note { margin-top: 18px; font-size: 0.875rem; color: var(--gray-600); } @media (max-width: 600px) { .btn--lg { min-width: auto; width: 100%; max-width: 360px; } } /* ── FOOTER ──────────────────────────────────────────────────── */ .footer { background: #050505; border-top: 1px solid var(--border); padding: 52px 0 32px; text-align: center; } /* Botón volver arriba */ .back-to-top { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 8px; color: var(--gray-400); text-decoration: none; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; border: 1px solid var(--border); border-radius: 100px; padding: 10px 24px; min-height: 48px; margin-bottom: 40px; -webkit-transition: color 0.2s ease, border-color 0.2s ease; transition: color 0.2s ease, border-color 0.2s ease; } .back-to-top:hover { color: var(--white); border-color: var(--gray-600); } .back-to-top svg { -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; } .back-to-top:hover svg { -webkit-transform: translateY(-3px); transform: translateY(-3px); } .footer__inner { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; gap: 20px; margin-bottom: 36px; } .footer__logo { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-bottom: 8px; } .footer__logo img { height: 44px; width: auto; } .footer__tagline { font-size: 0.875rem; color: var(--gray-400); } .footer__links { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 4px 24px; } .footer__link { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 8px; color: var(--gray-400); text-decoration: none; font-size: 0.9375rem; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; min-height: 48px; } .footer__link:hover { color: var(--white); } .footer__link--wa:hover { color: #25D366; } .footer__bottom { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border); } .footer__copy { font-size: 0.8125rem; color: var(--gray-600); } .footer__legal { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; gap: 24px; } .footer__legal-link { font-size: 0.8125rem; color: var(--gray-600); text-decoration: none; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .footer__legal-link:hover { color: var(--gray-400); } /* ── ANIMACIONES DE SCROLL REVEAL ────────────────────────────── */ /* Respetar preferencias de movimiento reducido */ @media (prefers-reduced-motion: reduce) { .reveal, .stagger > * { opacity: 1 !important; -webkit-transform: none !important; transform: none !important; -webkit-transition: none !important; transition: none !important; } } .reveal { opacity: 0; -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-transition: opacity 0.65s ease, -webkit-transform 0.65s ease; transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* Los hijos del stagger se revelan secuencialmente vía JS (setTimeout) */ .stagger > * { opacity: 0; -webkit-transform: translateY(22px); transform: translateY(22px); -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease; transition: opacity 0.6s ease, transform 0.6s ease; } .stagger > *.visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }