/* AURA Transporte - Estilos principales | secciones separadas para edición */

:root {
    --navy:#10275c;
    --deep:#091a38;
    --ink:#172c4b;
    --muted:#66778e;
    --line:#e6edf5;
    --blue:#418ce9;
    --teal:#00cfa9;
    --aqua:#088fa2;
    --paper:#fff;
    --tint:#f5f9fc;
    --radius:22px;
    --shadow:0 24px 65px rgba(15,36,81,.12)}

* {
    box-sizing:border-box}

html {
    scroll-behavior:smooth;
    scroll-padding-top:100px}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    font-size:16px;
    line-height:1.65}

a {
    text-decoration:none;
    color:inherit}

button {
    font:inherit}

svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0}

img {
    max-width:100%;
    display:block}

.svg-defs {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden}

.container {
    width:min(1210px,calc(100% - 64px));
    margin:0 auto}

.skip-link {
    position:absolute;
    top:-60px;
    left:15px;
    z-index:100;
    padding:8px;
    background:white;
    color:black}

.skip-link:focus {
    top:10px}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid #3c90eb;
    outline-offset:4px}

.site-header {
    position:sticky;
    top:0;
    z-index:80;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(230,237,245,.7);
    transition:box-shadow .2s}

.site-header.scrolled {
    box-shadow:0 10px 30px rgba(14,31,60,.07)}

.header-inner {
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px}

.brand {
    display:inline-flex;
    gap:7px;
    align-items:center;
    min-width:max-content}

.brand>img {
    width:53px;
    height:53px;
    object-fit:contain}

.brand-word {
    display:flex;
    flex-direction:column;
    line-height:1;
    gap:3px}

.brand-word strong {
    font-size:33px;
    letter-spacing:-2.4px;
    font-weight:650;
    color:var(--navy)}

.brand-word small {
    font-size:9px;
    letter-spacing:4.7px;
    font-weight:700;
    color:var(--aqua)}

.main-nav {
    display:flex;
    align-items:center;
    gap:30px}

.main-nav a {
    font-size:13px;
    font-weight:650;
    color:#52637b;
    transition:color .2s}

.main-nav a:hover {
    color:var(--aqua)}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-radius:10px;
    font-weight:740;
    font-size:14px;
    white-space:nowrap;
    padding:16px 22px;
    transition:transform .2s,box-shadow .2s,background .2s;
    border:1px solid transparent;
    line-height:1.2}

.btn:hover {
    transform:translateY(-2px)}

.btn svg {
    width:17px;
    height:17px}

.btn-sm {
    padding:13px 17px;
    font-size:12px;
    border-radius:9px}

.btn-dark {
    background:var(--navy);
    color:#fff}

.btn-dark:hover {
    background:#183777;
    box-shadow:0 10px 24px rgba(14,39,90,.18)}

.btn-primary {
    color:#05263a;
    background:linear-gradient(110deg,#26d8c4,#00cba7);
    box-shadow:0 12px 30px rgba(0,210,176,.22)}

.btn-primary:hover {
    box-shadow:0 16px 36px rgba(0,210,176,.3)}

.btn-ghost {
    color:white;
    border-color:rgba(255,255,255,.24)}

.btn-ghost:hover {
    background:rgba(255,255,255,.07)}

.menu-toggle {
    display:none;
    background:transparent;
    border:0;
    padding:10px;
    color:var(--navy);
    cursor:pointer}

.menu-toggle .close-icon {
    display:none}

.hero {
    background:radial-gradient(ellipse at 78% 27%,#153b71 0%,#0c2349 42%,#07172f 100%);
    position:relative;
    overflow:hidden;
    color:#fff}

.hero-light {
    position:absolute;
    pointer-events:none;
    border-radius:50%;
    filter:blur(2px)}

.hero-light-a {
    width:660px;
    height:660px;
    right:-250px;
    top:-380px;
    border:110px solid rgba(9,210,191,.1)}

.hero-light-b {
    width:540px;
    height:540px;
    left:-380px;
    bottom:-240px;
    border:120px solid rgba(85,118,244,.07)}

.hero-grid {
    display:grid;
    grid-template-columns:1fr 1.04fr;
    gap:55px;
    align-items:center;
    min-height:660px;
    padding-top:82px;
    padding-bottom:85px;
    position:relative;
    z-index:1}

.hero-copy {
    max-width:590px}

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:9px 13px;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.12);
    color:#c2d9e9;
    border-radius:80px;
    font-size:10px;
    letter-spacing:2px;
    font-weight:800}

.eyebrow-dot,.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 0 4px rgba(0,207,169,.15)}

.hero h1 {
    font-size:clamp(46px,5.6vw,78px);
    line-height:1.055;
    letter-spacing:-3.8px;
    font-weight:760;
    margin:27px 0 24px}

.hero h1 span {
    display:block;
    background:linear-gradient(100deg,#52a8f0 2%,#06d8b4 90%);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent}

.hero-lead {
    color:#b7cadc;
    line-height:1.83;
    font-size:16px;
    max-width:530px;
    margin:0 0 30px}

.hero-actions {
    display:flex;
    gap:11px;
    flex-wrap:wrap}

.hero-foot {
    display:flex;
    align-items:center;
    gap:13px;
    color:#b0c2d5;
    font-size:12px;
    line-height:1.5;
    margin-top:47px}

.hero-foot strong {
    color:#e8f2fa;
    font-weight:650}

.avatar-mark {
    width:39px;
    height:39px;
    border:1px solid rgba(32,206,182,.35);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--teal);
    background:rgba(0,207,169,.09)}

.hero-visual {
    min-width:0;
    position:relative;
    display:grid;
    place-items:center;
    min-height:530px}

.visual-halo {
    position:absolute;
    width:510px;
    height:510px;
    max-width:100%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(23,181,196,.13),rgba(35,136,210,.05) 55%,transparent 72%)}

.route-card {
    position:relative;
    z-index:2;
    width:min(435px,88%);
    border-radius:23px;
    background:white;
    color:#1e3352;
    padding:22px;
    box-shadow:0 40px 95px rgba(0,0,0,.3);
    transform:rotate(-2.3deg)}

.route-top {
    display:flex;
    align-items:center;
    justify-content:space-between}

.pill-light {
    font-size:9px;
    letter-spacing:1.1px;
    color:#098e88;
    font-weight:800;
    background:#effcf9;
    border-radius:30px;
    padding:8px 11px;
    display:flex;
    align-items:center;
    gap:9px}

.pill-light .status-dot {
    height:6px;
    width:6px}

.route-dots {
    letter-spacing:4px;
    color:#9fb1c5;
    font-size:19px}

.route-lines {
    padding:21px 4px 17px;
    position:relative}

.route-lines:before {
    content:'';
    position:absolute;
    width:1.5px;
    height:38px;
    left:12px;
    top:42px;
    background:repeating-linear-gradient(to bottom,#b8cdd8 0 3px,transparent 3px 7px)}

.route-line {
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:13px}

.route-line:last-child {
    margin:0}

.point {
    height:16px;
    width:16px;
    border:4px solid #318ce5;
    border-radius:50%;
    flex-shrink:0}

.point-end {
    border-color:#01caa7}

.route-line div {
    display:flex;
    flex-direction:column;
    line-height:1.35}

.route-line small {
    font-size:9px;
    font-weight:750;
    color:#96a5b7;
    letter-spacing:1.5px}

.route-line strong {
    font-size:13px;
    color:#203957}

.map-art {
    height:220px;
    border-radius:13px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#e7f2f5,#f2f7fa 65%,#e9f5ef)}

.map-art:before,.map-art:after {
    content:'';
    position:absolute;
    background:#d0e9dc;
    border-radius:50%;
    width:145px;
    height:100px;
    transform:rotate(25deg)}

.map-art:before {
    right:-40px;
    bottom:-20px}

.map-art:after {
    left:80px;
    top:-65px}

.road {
    position:absolute;
    height:14px;
    width:150%;
    background:white;
    box-shadow:0 0 0 2px #dfebef;
    transform-origin:50% 50%}

.road-a {
    top:25%;
    left:-10%;
    transform:rotate(25deg)}

.road-b {
    top:64%;
    left:-30%;
    transform:rotate(-33deg)}

.road-c {
    top:83%;
    left:-15%;
    transform:rotate(10deg)}

.road-d {
    top:-4%;
    left:20%;
    transform:rotate(72deg)}

.route-path {
    position:absolute;
    inset:0}

.route-path svg {
    width:100%;
    height:100%;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none}

.route-shadow {
    stroke:#fff;
    stroke-width:10}

.route-stroke {
    stroke:#129ba7;
    stroke-width:5;
    stroke-dasharray:9 7}

.map-pin {
    position:absolute;
    z-index:3;
    width:29px;
    height:29px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:white;
    box-shadow:0 6px 12px rgba(10,70,99,.22)}

.map-pin svg {
    width:17px;
    height:17px}

.pin-start {
    left:12%;
    top:65%;
    background:#377fdf}

.pin-end {
    right:13%;
    top:13%;
    background:#0cbf9f}

.car-marker {
    position:absolute;
    left:48%;
    top:32%;
    width:38px;
    height:38px;
    border-radius:11px;
    background:#103569;
    color:#fff;
    display:grid;
    place-items:center;
    box-shadow:0 8px 18px #172e5b42;
    transform:rotate(12deg)}

.car-marker svg {
    width:25px;
    height:25px}

.route-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    font-weight:750;
    padding:17px 4px 0}

.route-bottom span:first-child {
    display:flex;
    align-items:center;
    gap:8px}

.route-bottom span:first-child svg {
    width:17px;
    color:var(--aqua)}

.mini-arrow {
    background:#eaf9f6;
    color:#06b394;
    width:31px;
    height:31px;
    border-radius:9px;
    display:grid;
    place-items:center}

.mini-arrow svg {
    width:17px}

.float-note {
    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    gap:11px;
    background:white;
    color:#213450;
    padding:13px 16px;
    border-radius:12px;
    box-shadow:0 17px 30px rgba(0,0,0,.18);
    min-width:220px}

.float-note span:last-child {
    display:flex;
    flex-direction:column;
    line-height:1.35}

.float-note strong {
    font-size:11px}

.float-note small {
    font-size:10px;
    color:#8b9baf}

.note-top {
    top:44px;
    right:-12px;
    transform:rotate(4deg)}

.note-bottom {
    bottom:18px;
    left:-10px;
    transform:rotate(4deg)}

.float-icon {
    width:35px;
    height:35px;
    border-radius:10px;
    display:grid;
    place-items:center}

.float-icon svg {
    width:19px}

.float-icon.blue {
    background:#eef4ff;
    color:#367de5}

.float-icon.mint {
    background:#e5fbf4;
    color:#04ac8c}

.hero-bottom {
    display:flex;
    align-items:center;
    gap:23px;
    color:#829bb9;
    font-size:9px;
    letter-spacing:2.5px;
    font-weight:800;
    padding-bottom:22px;
    position:relative;
    z-index:1}

.hero-bottom div {
    height:1px;
    flex:1;
    background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.035))}

.section {
    padding:116px 0}

.section-kicker {
    display:inline-block;
    color:#079f9c;
    font-weight:820;
    letter-spacing:2.4px;
    font-size:11px;
    margin-bottom:16px}

.section-heading {
    max-width:700px;
    margin-bottom:43px}

.heading-centered {
    text-align:center;
    margin-inline:auto}

.section-heading h2,.journey h2,.faq h2,.statement h2 {
    font-size:clamp(32px,3.7vw,52px);
    line-height:1.16;
    letter-spacing:-1.9px;
    color:var(--deep);
    margin:0 0 17px;
    font-weight:770}

.section-heading p,.journey-copy>p,.faq-grid>div>p {
    color:var(--muted);
    font-size:15px;
    margin:0;
    line-height:1.8}

.features-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:19px}

.feature-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:31px 26px 28px;
    position:relative;
    min-height:290px;
    overflow:hidden;
    transition:transform .2s,box-shadow .2s,border-color .2s}

.feature-card:hover {
    transform:translateY(-6px);
    box-shadow:0 20px 40px #12396a10;
    border-color:#cee2ed}

.feature-icon {
    height:51px;
    width:51px;
    border-radius:14px;
    display:grid;
    place-items:center;
    margin-bottom:24px}

.feature-icon svg {
    width:24px;
    height:24px}

.fi-blue {
    background:#eaf2fe;
    color:#4c85da}

.fi-teal {
    background:#e8faf6;
    color:#0aac94}

.fi-purple {
    background:#f0ecff;
    color:#8165ca}

.fi-green {
    background:#eaf8f3;
    color:#158973}

.feature-card h3 {
    font-size:17px;
    line-height:1.3;
    letter-spacing:-.3px;
    color:#172d4e;
    margin:0 0 12px}

.feature-card p {
    font-size:13px;
    line-height:1.8;
    color:#718197;
    margin:0;
    position:relative;
    z-index:1}

.feature-index {
    position:absolute;
    bottom:-20px;
    right:18px;
    font-size:80px;
    color:#eff4f9;
    font-weight:850;
    line-height:1}

.journey {
    background:#f5f9fc}

.journey-grid {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:90px;
    align-items:center}

.journey-copy {
    max-width:450px}

.journey-copy>p {
    margin:0 0 25px}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#1288a6;
    font-weight:770;
    font-size:14px}

.text-link svg {
    width:17px;
    transition:transform .2s}

.text-link:hover svg {
    transform:translateX(4px)}

.journey-copy .micro-note {
    font-size:11px;
    line-height:1.6;
    color:#8b98aa;
    margin:15px 0 0}

.journey-steps {
    display:grid;
    gap:13px}

.step {
    display:grid;
    grid-template-columns:62px 1fr;
    gap:20px;
    align-items:center;
    border-radius:16px;
    background:white;
    border:1px solid #e8eef5;
    padding:21px 24px;
    transition:transform .2s}

.step:hover {
    transform:translateX(5px)}

.step>span {
    width:53px;
    height:53px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(135deg,#eaf1ff,#e9faf6);
    color:#1676aa;
    font-weight:820;
    font-size:16px}

.step h3 {
    font-size:16px;
    letter-spacing:-.2px;
    line-height:1.3;
    margin:0 0 5px}

.step p {
    font-size:13px;
    color:#75859b;
    line-height:1.7;
    margin:0}

.audiences .section-heading h2 span {
    color:#338fe0}

.audience-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px}

.audience-card {
    min-height:370px;
    border-radius:21px;
    padding:30px 29px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column}

.audience-user {
    background:linear-gradient(140deg,#eaf7fb,#e7f2ff)}

.audience-driver {
    background:linear-gradient(140deg,#e9fbf6,#edf7f1)}

.audience-partner {
    background:linear-gradient(140deg,#f0f1ff,#e9f3fc)}

.audience-top {
    display:flex;
    justify-content:space-between;
    align-items:start;
    gap:8px;
    margin-bottom:auto}

.audience-icon {
    width:63px;
    height:63px;
    border-radius:18px;
    background:rgba(255,255,255,.76);
    color:#197fbd;
    display:grid;
    place-items:center;
    box-shadow:0 8px 30px #142c4a0c}

.audience-icon svg {
    height:29px;
    width:29px}

.audience-driver .audience-icon {
    color:#0d9c8d}

.audience-partner .audience-icon {
    color:#6a71cd}

.audience-num {
    font-size:9px;
    font-weight:800;
    letter-spacing:1.3px;
    color:#8496aa;
    margin-top:7px}

.audience-card h3 {
    font-size:24px;
    letter-spacing:-.7px;
    line-height:1.25;
    margin:35px 0 12px;
    max-width:290px;
    color:#122b4e}

.audience-card p {
    font-size:13px;
    line-height:1.8;
    color:#627990;
    margin:0 0 24px}

.audience-card a {
    font-size:13px;
    font-weight:780;
    color:#177d9f;
    display:inline-flex;
    align-items:center;
    gap:8px}

.audience-card a svg {
    width:16px}

.statement {
    background:#0c244a;
    color:white;
    padding:74px 0;
    overflow:hidden;
    position:relative}

.statement:before {
    content:'';
    position:absolute;
    width:570px;
    height:570px;
    right:-160px;
    top:-260px;
    border-radius:50%;
    border:90px solid rgba(0,207,169,.055)}

.statement-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center;
    position:relative}

.statement .section-kicker {
    color:#29d7b8}

.statement h2 {
    color:white;
    margin:0;
    max-width:530px}

.statement-grid>div:nth-child(2)>p {
    color:#bccbdd;
    line-height:1.85;
    font-size:15px;
    margin:0 0 25px}

.statement-chips {
    display:flex;
    flex-wrap:wrap;
    gap:9px}

.statement-chips span {
    display:flex;
    gap:8px;
    align-items:center;
    color:#d6e4f0;
    background:rgba(255,255,255,.065);
    border:1px solid #ffffff15;
    border-radius:30px;
    padding:8px 12px;
    font-size:11px;
    font-weight:750}

.statement-chips svg {
    color:#21d9b7;
    width:15px;
    height:15px}

.faq-grid {
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:95px}

.faq-grid>div>p {
    max-width:340px}

.faq-list {
    border-top:1px solid #e1e9f2}

.faq-list details {
    border-bottom:1px solid #e1e9f2;
    padding:18px 0}

.faq-list summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    font-weight:760;
    color:#193456;
    font-size:15px}

.faq-list summary::-webkit-details-marker {
    display:none}

.faq-list summary svg {
    width:18px;
    color:#199bab;
    transition:transform .2s}

.faq-list details[open] summary svg {
    transform:rotate(180deg)}

.faq-list details p {
    margin:13px 34px 4px 0;
    color:#728399;
    font-size:13px;
    line-height:1.85}

.cta {
    padding:0 0 95px}

.cta-panel {
    background:linear-gradient(115deg,#093064,#0d4b78 60%,#078f90);
    min-height:375px;
    border-radius:26px;
    color:#fff;
    padding:67px 69px;
    display:flex;
    align-items:center;
    overflow:hidden;
    position:relative}

.cta-decoration {
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent 44%,rgba(3,226,191,.12));
    pointer-events:none}

.cta-content {
    max-width:675px;
    position:relative;
    z-index:3}

.cta-tag {
    font-size:10px;
    color:#52eacf;
    font-weight:820;
    letter-spacing:2.2px}

.cta h2 {
    font-size:clamp(33px,4vw,54px);
    line-height:1.12;
    letter-spacing:-2px;
    margin:18px 0;
    font-weight:760}

.cta p {
    max-width:530px;
    color:#c1d8e5;
    font-size:14px;
    line-height:1.85;
    margin:0 0 25px}

.cta-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap}

.btn-white {
    background:white;
    color:#0d3973}

.btn-white:hover {
    background:#f0fafb}

.btn-outline-white {
    color:#fff;
    border-color:#ffffff55}

.btn-outline-white:hover {
    background:#ffffff13}

.cta-art {
    position:absolute;
    right:-6px;
    top:0;
    height:100%;
    width:38%;
    display:grid;
    place-items:center;
    opacity:.18;
    filter:brightness(0) invert(1)}

.cta-art img {
    width:360px;
    height:360px;
    object-fit:contain}

.circle {
    position:absolute;
    border:2px solid white;
    border-radius:50%;
    width:380px;
    height:380px}

.circle-2 {
    width:550px;
    height:550px}

.site-footer {
    background:#f6f9fc;
    border-top:1px solid #e8eef3}

.footer-top {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    padding:65px 0 57px}

.footer-brand {
    max-width:350px}

.footer-brand p {
    font-size:13px;
    color:#8190a2;
    line-height:1.8;
    margin:20px 0 0}

.footer-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px}

.footer-links>div {
    display:flex;
    flex-direction:column;
    align-items:start;
    gap:10px}

.footer-links strong {
    font-size:13px;
    color:#0a2b4b;
    margin-bottom:7px}

.footer-links a {
    font-size:13px;
    color:#74879e;
    transition:color .2s;
    overflow-wrap:anywhere}

.footer-links a:hover {
    color:#038f9a}

.footer-bottom {
    border-top:1px solid #e7edf2;
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#8796a7;
    font-size:11px;
    padding:19px 0 25px}


@media(max-width:1120px) {
    .main-nav {
    gap:17px}

.main-nav a {
    font-size:12px}

.hero-grid {
    gap:28px}

.hero h1 {
    font-size:61px}

.float-note.note-top {
    right:-3px}

.float-note.note-bottom {
    left:0}

.features-grid {
    grid-template-columns:repeat(2,1fr)}

.feature-card {
    min-height:245px}

.journey-grid,.faq-grid {
    gap:45px}

}

@media(max-width:880px) {
    .container {
    width:min(100% - 42px,680px)}

.header-inner {
    min-height:73px}

.header-cta {
    margin-left:auto}

.menu-toggle {
    display:block}

.menu-toggle[aria-expanded=true] .menu-icon {
    display:none}

.menu-toggle[aria-expanded=true] .close-icon {
    display:block}

.main-nav {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:18px 22px 26px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:white;
    box-shadow:0 20px 40px #0a234529}

.main-nav.is-open {
    display:flex}

.main-nav a {
    padding:13px 4px;
    border-bottom:1px solid #edf2f5;
    font-size:14px}

.hero-grid {
    min-height:0;
    grid-template-columns:1fr;
    gap:20px;
    padding:80px 0 42px}

.hero-copy {
    max-width:650px}

.hero h1 {
    font-size:clamp(48px,8.2vw,76px)}

.hero-visual {
    min-height:460px}

.hero-bottom {
    padding-bottom:23px}

.journey-grid,.faq-grid,.statement-grid {
    grid-template-columns:1fr;
    gap:38px}

.journey-copy {
    max-width:650px}

.audience-grid {
    grid-template-columns:1fr 1fr}

.audience-card {
    min-height:340px}

.audience-card:last-child {
    grid-column:1/-1;
    min-height:290px}

.section {
    padding:83px 0}

.cta-panel {
    padding:55px 40px}

.cta-art {
    opacity:.09;
    width:60%}

.footer-top {
    gap:35px}

}

@media(max-width:600px) {
    .container {
    width:calc(100% - 34px)}

.header-inner {
    min-height:68px;
    gap:9px}

.brand>img {
    width:45px;
    height:45px}

.brand-word strong {
    font-size:27px}

.brand-word small {
    font-size:7px;
    letter-spacing:3.8px}

.header-cta {
    padding:10px 11px;
    font-size:10px}

.header-cta svg {
    display:none}

.hero-grid {
    padding:57px 0 21px;
    gap:6px}

.hero h1 {
    font-size:clamp(43px,11vw,62px);
    letter-spacing:-2.8px;
    margin:24px 0 20px}

.hero-lead {
    font-size:14px;
    line-height:1.8}

.eyebrow {
    font-size:8px;
    letter-spacing:1.4px}

.hero-actions {
    align-items:stretch;
    flex-direction:column}

.hero-actions a {
    width:100%}

.hero-foot {
    margin-top:30px}

.hero-visual {
    min-height:420px}

.route-card {
    width:90%;
    padding:16px;
    transform:rotate(-1deg)}

.map-art {
    height:185px}

.float-note {
    min-width:0;
    padding:10px}

.float-note strong {
    font-size:9px}

.float-note small {
    font-size:8px}

.float-icon {
    height:30px;
    width:30px}

.note-top {
    right:0;
    top:16px}

.note-bottom {
    bottom:7px;
    left:0}

.hero-bottom span {
    font-size:7px;
    letter-spacing:1px}

.hero-bottom {
    gap:8px}

.section {
    padding:70px 0}

.section-heading {
    margin-bottom:30px}

.section-heading h2,.journey h2,.faq h2,.statement h2 {
    font-size:35px;
    letter-spacing:-1.3px}

.features-grid,.audience-grid {
    grid-template-columns:1fr;
    gap:13px}

.feature-card {
    min-height:0;
    padding:24px}

.feature-icon {
    margin-bottom:17px}

.audience-card,.audience-card:last-child {
    grid-column:auto;
    min-height:310px}

.journey-grid,.faq-grid {
    gap:28px}

.step {
    grid-template-columns:48px 1fr;
    gap:13px;
    padding:17px 14px}

.step>span {
    width:47px;
    height:47px;
    font-size:14px}

.step h3 {
    font-size:14px}

.step p {
    font-size:12px}

.statement {
    padding:61px 0}

.statement-grid {
    gap:22px}

.cta {
    padding-bottom:50px}

.cta-panel {
    padding:43px 23px;
    border-radius:17px;
    min-height:0}

.cta h2 {
    font-size:37px;
    letter-spacing:-1.3px}

.cta-actions {
    flex-direction:column}

.cta-actions .btn {
    width:100%}

.cta-art {
    display:none}

.footer-top {
    grid-template-columns:1fr;
    padding:44px 0;
    gap:35px}

.footer-links {
    gap:18px}

.footer-bottom {
    flex-direction:column;
    gap:6px}

.faq-list summary {
    font-size:13px}

.faq-list details p {
    font-size:12px}

.brand-word {
    gap:2px}

}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important}

}




/* =============================================================
   CONTACTO — Formulario de solicitudes
   ============================================================= */
.contact-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.35fr);
    gap: 48px;
    padding: clamp(28px, 5vw, 64px);
    margin-top: 32px;
    margin-bottom: 44px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 24px 72px rgba(12, 38, 73, .07);
}
.contact-intro h3 { color: var(--deep); font-size: clamp(26px, 3vw, 40px); line-height: 1.18; margin: 12px 0 18px; }
.contact-intro p { color: var(--muted); }
.contact-email a { color: var(--aqua); font-weight: 750; overflow-wrap: anywhere; }
.contact-form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-field label { color: var(--deep); font-size: 13px; font-weight: 750; }
.form-field input, .form-field textarea, .form-field select {
    font: inherit;
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #cedbe9;
    border-radius: 11px;
    background: #f9fcff;
    color: var(--deep);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field :is(input, textarea, select):focus { outline: 2px solid var(--aqua); outline-offset: 1px; border-color: var(--aqua); }
.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.form-consent input { margin-top: 4px; accent-color: #078f9f; }
.btn-contact { width: fit-content; cursor: pointer; background: var(--navy); color: white; }
.btn-contact:hover { background: #173c82; }
.form-small { color: var(--muted); font-size: 12px; margin: 0; }
.form-notice { padding: 14px 16px; border-radius: 10px; font-size: 14px; }
.form-success { background: #e8faf4; color: #075b42; }
.form-error { background: #fff1ee; color: #8e3324; }
.honey-field { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; }
@media (max-width: 850px) {
    .contact-panel { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 520px) {
    .form-row { grid-template-columns: 1fr; }
    .contact-panel { padding: 24px 20px; }
    .btn-contact { width: 100%; }
}