/* Referencias visuales: Agencia5K (hero oscuro, centrado) y Vesta (ejemplos en tarjetas). */
:root { --cyan:#62c3ff; --dark:#14171f; --font:Arial,Helvetica,sans-serif; }
.header { background:var(--dark); border-bottom-color:#ffffff0d; }
.header-inner { min-height:88px; }
.brand-fallback { color:white; }
.brand-image { filter:brightness(0) invert(1); }
.header-caption { color:#b2bacd; }
.header .button-outline { color:#f7faff; border-color:#596479; border-radius:30px; }
.header .button-outline:hover { background:#ffffff10; }
.hero { display:flex; flex-direction:column; gap:0; width:100%; max-width:none; padding:64px max(24px,calc((100vw - 1160px)/2)) 65px; background:radial-gradient(ellipse at 50% 0%,#22375b55,transparent 62%),var(--dark); color:white; min-height:0; }
.hero-copy { text-align:center; width:100%; max-width:920px; }
.hero .eyebrow { color:var(--cyan); font-size:13px; letter-spacing:.18em; }
.hero h1 { color:#f3f7ff; font-size:clamp(52px,6vw,77px); letter-spacing:-.025em; font-weight:750; line-height:1.14; margin-bottom:27px; }
.hero h1 span { color:#f3f7ff; position:relative; display:inline-block; }
.hero h1 span:after { content:""; position:absolute; left:0; right:0; height:5px; background:var(--cyan); bottom:-8px; border-radius:6px; }
.hero-description { color:#c1c9da; font-size:19px; max-width:640px; margin:0 auto 27px; line-height:1.65; }
.hero .button-primary { border-radius:30px; background:var(--blue); border:1px solid #7390f1; padding-inline:30px; min-height:55px; }
.hero .button-primary:hover { background:#4468ed; }
.hero .microcopy { color:#a8b4ce; margin-top:13px; }
.flow-intro { text-align:center; font-weight:700; font-size:21px; letter-spacing:-.03em; margin:48px 0 24px; }
.flow-intro span { color:var(--cyan); margin-right:8px; }
.flow-panel { width:min(100%,790px); background:#1b2539; border:1px solid #43526f; padding:28px 36px; border-radius:19px; box-shadow:0 22px 70px #0003; }
.flow-heading { margin-bottom:20px; }
.flow-kicker { max-width:none; font-size:15px; }
.flow-tabs { width:100%; margin-bottom:28px; background:#26344f; }
.flow-tab { font-size:15px; padding-block:11px; }
.flow-tab[aria-selected=true] { background:#eaf1ff; }
.flow-steps { display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; }
.flow-steps li { padding-bottom:22px; align-items:start; min-height:83px; }
.flow-steps li:last-child { padding-bottom:22px; }
.flow-steps li:not(:last-child):before { display:none; }
.flow-steps strong { font-size:15px; padding-top:3px; }
.flow-steps div span { font-size:13px; }
.flow-stage { display:none; }
.flow-result { margin-top:0; padding-top:17px; }
.flow-footnote { font-size:12px; }
.trust-strip { background:#1c202b; border-color:#ffffff0a; }
.trust-inner { justify-content:center; gap:70px; padding-block:20px; }
.trust-inner p { color:#bcc6dc; font-size:13px; }
.section-heading { text-align:center; margin-inline:auto; max-width:820px; }
.section-heading>p:last-child { max-width:650px; margin-inline:auto; }
.section-heading h2 { font-size:clamp(36px,4.2vw,53px); }
.services-grid { gap:20px; grid-template-columns:repeat(3,1fr); }
.service { padding:20px 22px 27px; border-radius:18px; border-color:#e4e7ee; box-shadow:0 7px 20px #17213b05; }
.service-preview { min-height:148px; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:11px; background:#f3f5fb; padding:22px 14px; margin-bottom:24px; }
.service-number { font-size:12px; margin-bottom:14px; }
.service h3 { font-size:22px; min-height:49px; margin-bottom:16px; }
.service p { font-size:15px; }
.service .service-tools { border-top:1px solid #e9ecf3; margin-top:auto; padding-top:16px; }
.mini-route { display:flex; align-items:center; justify-content:center; width:100%; gap:10px; }
.mini-route>span:not(.route-line) { background:white; border:1px solid #dbe2f2; box-shadow:0 3px 8px #17213b05; padding:9px 12px; border-radius:6px; font-size:12px; color:#33405d; line-height:1.4; text-align:center; }
.route-line { height:2px; min-width:20px; flex:1; max-width:37px; background:#9daee9; }
.preview-caption { font-size:11px; color:#68748e; margin-top:15px; text-align:center; }
.mini-record { display:flex; flex-direction:column; background:white; border:1px solid #dfe5f2; border-radius:10px; padding:12px 18px; width:85%; box-shadow:0 5px 14px #17213b07; }
.mini-record>span { font-size:11px; color:#6981c0; }
.mini-record strong { font-size:14px; margin:4px 0; }
.mini-record small { font-size:11px; color:#68748e; }
.mini-booking { display:flex; align-items:center; gap:12px; background:white; padding:16px; border:1px solid #dfe5f2; border-radius:10px; }
.calendar-label { display:grid; place-items:center; width:40px; height:43px; background:#e7edff; border-radius:7px; color:var(--blue); font-size:10px; font-weight:700; }
.mini-booking strong,.mini-booking small { display:block; font-size:12px; }
.mini-booking small { font-size:11px; color:#68748e; margin-top:4px; }
.mini-content { display:flex; gap:6px; }
.mini-content span { font-size:12px; border:1px solid #dbe2f2; background:#fff; padding:7px 10px; border-radius:5px; }
.mini-content span:last-child { border-color:#a2b5ef; color:var(--blue); }
.service-start { background:#f7f9ff; border-color:#cbd6f6; }
.service-preview-start { background:#e5ebfd; }
.service-preview-start strong { color:var(--blue); font-size:18px; font-weight:600; letter-spacing:-.03em; }
.service-link { color:var(--blue); font-size:14px; font-weight:700; margin-top:auto; padding-top:16px; text-underline-offset:4px; }
.method-section { background:#f5f7fc; }
.method-note { background:white; border-radius:13px; }
.price-card { border-radius:18px; }
.price-highlight { background:#f5f8ff; }
.price-card .button { border-radius:28px; }
.experience-section { background:var(--dark); padding-block:80px; }
.experience-section h2 { font-size:46px; line-height:1.15; }
.experience-section .eyebrow { color:var(--cyan); }
.case-label { color:var(--cyan); }
.who-outcomes { border-color:#43506a; }
.who-cta { color:var(--cyan); }
.contact-section { background:var(--dark); color:white; }
.contact-copy .eyebrow { color:var(--cyan); }
.contact-copy>p:not(.eyebrow),.contact-detail span { color:#c1c9da; }
.contact-email { color:var(--cyan); }
.contact-form-wrap { background:#fff; color:var(--ink); border-radius:18px; }
.contact-form-wrap .button { border-radius:28px; }
.footer { background:var(--dark); border-top-color:#ffffff1a; }
.footer p { color:#aebbd3; }
.footer strong { color:white; }
@media(max-width:1040px) { .services-grid {grid-template-columns:repeat(3,1fr);gap:14px} .service {padding:17px 17px 23px} .service-preview {padding:16px 8px} .mini-route {gap:6px} .mini-route>span:not(.route-line) {padding:8px;font-size:11px} .service h3 {font-size:21px;min-height:68px} .mini-content {gap:4px} .mini-content span {font-size:11px;padding:7px} .mini-booking {padding:12px;gap:8px} .experience-section h2 {font-size:38px} }
@media(max-width:760px) { .hero {padding:44px 20px 42px} .hero .eyebrow {font-size:11px;letter-spacing:.11em;max-width:290px;margin-inline:auto} .hero h1 {font-size:clamp(37px,8.8vw,61px);letter-spacing:-.025em} .hero h1 span:after {height:3px;bottom:-6px} .hero-description {font-size:17px;margin-top:28px;max-width:520px} .hero-copy>.button {width:100%;max-width:400px} .hero .microcopy {font-size:12px} .flow-intro {font-size:18px;margin-top:38px;max-width:300px} .flow-panel {padding:23px 22px;border-radius:15px} .flow-steps {grid-template-columns:1fr;gap:0} .flow-steps li {min-height:74px;padding-bottom:24px} .flow-steps li:last-child {padding-bottom:12px} .flow-steps li:not(:last-child):before {display:block} .flow-steps strong {font-size:14px} .flow-tabs {margin-bottom:22px} .flow-tab {font-size:14px} .trust-inner {gap:6px;text-align:center} .section-heading h2 {font-size:35px} .services-grid {grid-template-columns:1fr;gap:20px} .service {padding:22px 24px 27px} .service h3 {min-height:0;font-size:24px} .service-preview {min-height:154px;padding:22px;margin-bottom:22px} .mini-route {gap:12px} .mini-route>span:not(.route-line) {padding:12px 16px;font-size:13px} .preview-caption {font-size:12px} .mini-record {max-width:270px;padding:15px 18px} .mini-record strong {font-size:15px} .mini-record>span,.mini-record small {font-size:12px} .mini-booking {padding:18px} .mini-booking strong {font-size:14px} .mini-booking small {font-size:12px} .mini-content {gap:9px} .mini-content span {font-size:13px;padding:9px 13px} .experience-section {padding-block:55px} .experience-section h2 {font-size:34px} .contact-copy h2 {font-size:34px} }
@media(max-width:380px) { .hero {padding-inline:16px} .hero h1 {font-size:35px} .flow-panel {padding:20px} .hero-description {font-size:16px} .service {padding:20px} .mini-route>span:not(.route-line) {font-size:12px;padding:9px} .mini-content span {font-size:12px;padding:9px} }