/* ═══════════════════════════════════════════════
   YANGUAS — COTIZADOR  |  Design System
   Fonts: Barlow Condensed (display) · Figtree (UI)
   ═══════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --forest:     #0f2d09;
    --emerald:    #1b4d10;
    --pine:       #2d6b1e;
    --leaf:       #4e9a2a;
    --lime:       #7dc242;
    --mint:       #b8e87a;
    --cream:      #f5f3ee;
    --smoke:      #eceae3;
    --stone:      #9a9690;
    --ink:        #1a1a17;
    --ink-soft:   #3d3d38;
    --white:      #ffffff;
    --gold:       #e8a020;
    --red-err:    #d92b2b;

    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  28px;

    --shadow-card: 0 24px 80px rgba(15,45,9,.16), 0 4px 16px rgba(15,45,9,.08);
    --shadow-input: 0 1px 3px rgba(0,0,0,.06);
    --shadow-btn:   0 8px 32px rgba(27,77,16,.40);

    --transition: .2s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Figtree', sans-serif;
    background: var(--cream);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ════════════════════════════════════════
   HEADER
   ════════════════════════════════════════ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: 0;
    transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
}

.site-header.scrolled {
    background: rgba(15, 45, 9, .96);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0,0,0,.25);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-diamond {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 8px;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    flex-shrink: 0;
    transition: transform var(--transition);
}
.logo-diamond svg { transform: rotate(-45deg); }
.logo-diamond--sm {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: rgba(255,255,255,.15);
}
.logo:hover .logo-diamond { transform: rotate(45deg) scale(1.08); }

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.logo-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: white;
    letter-spacing: 1.5px;
    text-transform: lowercase;
}
.logo-sub {
    font-size: .68rem;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.header-nav {
    display: flex;
    gap: 32px;
    align-items: center;
}
.header-nav a {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    letter-spacing: .5px;
    transition: color var(--transition);
    position: relative;
}
.header-nav a::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0; right: 0;
    height: 1.5px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
.header-nav a:hover { color: white; }
.header-nav a:hover::after { transform: scaleX(1); }

.nav-toggle { display: none; }


/* ════════════════════════════════════════
   HERO
   ════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 540px;
    background: linear-gradient(155deg, var(--forest) 0%, var(--emerald) 45%, var(--pine) 100%);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 72px; /* header height */
}

/* Topographic SVG */
.hero-topo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.road-dot {
    animation: roadPulse 2.4s ease-in-out infinite;
}
@keyframes roadPulse {
    0%, 100% { opacity: .4; r: 7; }
    50%       { opacity: 1;  r: 10; }
}

/* Dot grid pattern */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 80px 0 120px;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    animation: heroReveal .8s cubic-bezier(.4,0,.2,1) both;
}
@keyframes heroReveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(125,194,66,.15);
    border: 1px solid rgba(125,194,66,.35);
    color: var(--mint);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    margin: 0 auto 20px;
}
.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(125,194,66,.5); }
    50%       { box-shadow: 0 0 0 6px rgba(125,194,66,0); }
}

.hero-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: .95;
    color: white;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 18px;
}
.hero-title em {
    font-style: normal;
    color: var(--lime);
    display: block;
}

.hero-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,.75);
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 36px;
}

.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stat strong {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
    line-height: 1;
}
.stat span {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.2);
}


/* ════════════════════════════════════════
   FORM SECTION
   ════════════════════════════════════════ */
.form-section {
    flex: 1;
    padding: 0 0 72px;
    margin-top: -72px; /* overlap hero */
    position: relative;
    z-index: 10;
    animation: cardReveal .9s .2s cubic-bezier(.4,0,.2,1) both;
}
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.quote-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.card-accent-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--forest) 0%, var(--leaf) 50%, var(--lime) 100%);
}

.quote-card__header {
    padding: 28px 40px 0;
    border-bottom: 1px solid var(--smoke);
    padding-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.header-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pine);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.header-label svg { color: var(--leaf); }

.header-hint {
    font-size: .82rem;
    color: var(--stone);
    font-weight: 500;
}

form { padding: 32px 40px 40px; }


/* ── Form blocks ── */
.form-block {
    margin-bottom: 32px;
}
.form-block--contact {
    background: var(--cream);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-left: -4px;
    margin-right: -4px;
}

.block-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--stone);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.optional-tag {
    font-family: 'Figtree', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--smoke);
    color: var(--stone);
    padding: 2px 8px;
    border-radius: 100px;
}


/* ── Trip type radio cards ── */
.trip-type-group {
    display: flex;
    gap: 12px;
}

.radio-card { cursor: pointer; flex: 1; }
.radio-card input[type="radio"] { display: none; }

.radio-card__box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1.5px solid var(--smoke);
    border-radius: var(--radius-md);
    background: var(--cream);
    transition: all var(--transition);
    user-select: none;
}
.radio-card__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--smoke);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stone);
    flex-shrink: 0;
    transition: all var(--transition);
}
.radio-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.radio-card__text strong {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink-soft);
    line-height: 1;
    transition: color var(--transition);
}
.radio-card__text small {
    font-size: .72rem;
    color: var(--stone);
    font-weight: 500;
    transition: color var(--transition);
}

.radio-card:hover .radio-card__box {
    border-color: var(--leaf);
    background: #f0f7e8;
}
.radio-card:hover .radio-card__icon { background: rgba(78,154,42,.12); color: var(--leaf); }

.radio-card input:checked + .radio-card__box {
    border-color: var(--pine);
    background: var(--emerald);
}
.radio-card input:checked + .radio-card__box .radio-card__icon {
    background: rgba(255,255,255,.2);
    color: white;
}
.radio-card input:checked + .radio-card__box .radio-card__text strong { color: white; }
.radio-card input:checked + .radio-card__box .radio-card__text small  { color: rgba(255,255,255,.65); }


/* ════════════════════════════════════════
   ROUTE BUILDER
   ════════════════════════════════════════ */
.route-builder {
    background: var(--cream);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--smoke);
    padding: 8px 0;
    overflow: hidden;
}

.route-row,
.stop-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 4px 20px 4px 0;
    animation: rowSlide .22s cubic-bezier(.4,0,.2,1) both;
}
@keyframes rowSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Timeline column */
.route-timeline {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 28px; /* align with label */
}

.route-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.route-dot--start {
    background: var(--pine);
    box-shadow: 0 0 0 3px rgba(45,107,30,.2);
}
.route-dot--end {
    background: var(--lime);
    box-shadow: 0 0 0 3px rgba(125,194,66,.25);
}
.route-dot--stop {
    background: white;
    border: 2px solid var(--leaf);
    box-shadow: 0 0 0 3px rgba(78,154,42,.12);
}

/* Pulse ring on start dot */
.dot-pulse {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--pine);
    animation: dotPulse 2.2s ease-out infinite;
}
@keyframes dotPulse {
    0%   { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Vertical dashed connector */
.route-line {
    flex: 1;
    width: 2px;
    min-height: 24px;
    background: repeating-linear-gradient(
        to bottom,
        var(--leaf) 0, var(--leaf) 5px,
        transparent 5px, transparent 11px
    );
    margin-top: 4px;
    opacity: .5;
}

.route-row .form-group,
.stop-row .form-group { flex: 1; padding: 10px 0; }

/* Stop row specific */
.stop-row {
    border-top: 1px solid var(--smoke);
}
.stop-row .route-timeline {
    padding-top: 22px;
}
.btn-remove-stop {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    align-self: center;
    margin-top: 16px;
    background: none;
    border: 1.5px solid #fca5a5;
    border-radius: 50%;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all var(--transition);
    line-height: 1;
}
.btn-remove-stop:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
    transform: scale(1.1);
}

/* Add stop button */
.add-stop-row {
    padding: 10px 20px 6px 52px;
    border-top: 1px dashed var(--smoke);
}
.btn-add-stop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1.5px dashed var(--leaf);
    color: var(--pine);
    border-radius: 100px;
    padding: 6px 14px;
    font-family: 'Figtree', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    letter-spacing: .2px;
}
.btn-add-stop:hover {
    background: rgba(78,154,42,.08);
    border-color: var(--pine);
    border-style: solid;
    gap: 9px;
}
.add-stop-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--leaf);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition);
}
.btn-add-stop:hover .add-stop-icon { transform: rotate(90deg); }


/* ── Swap button ── */
.swap-btn {
    display: none; /* no se usa en el nuevo route-builder vertical */
}


/* ════════════════════════════════════════
   FORM INPUTS
   ════════════════════════════════════════ */
.form-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.form-row--three .form-group { flex: 1 1 160px; }
.form-group {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group--sm { flex: 0 1 155px; }

label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--pine);
    display: block;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.input-icon {
    position: absolute;
    left: 12px;
    color: var(--stone);
    pointer-events: none;
    flex-shrink: 0;
    z-index: 1;
    transition: color var(--transition);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="number"] {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border: 1.5px solid var(--smoke);
    border-radius: var(--radius-sm);
    font-size: .92rem;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    color: var(--ink);
    background: var(--white);
    box-shadow: var(--shadow-input);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    -webkit-appearance: none;
}
input:focus {
    border-color: var(--leaf);
    box-shadow: 0 0 0 3px rgba(78,154,42,.15), var(--shadow-input);
}
input:focus + .input-icon,
.input-wrap:focus-within .input-icon { color: var(--leaf); }
input::placeholder { color: #c4c0b8; }

/* Datetime-local — ocultar el ícono nativo del browser y estilizar */
input[type="datetime-local"] {
    padding-left: 38px;
    color-scheme: light;
    cursor: pointer;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    filter: invert(35%) sepia(60%) saturate(400%) hue-rotate(80deg);
}
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="datetime-local"]::-webkit-datetime-edit { font-family: 'Figtree', sans-serif; }

/* Number input (pasajeros) */
.number-input {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--smoke);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-input);
    background: var(--white);
}
.number-input input[type="number"] {
    border: none;
    border-radius: 0;
    padding: 11px 4px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: none;
    width: 56px;
    background: transparent;
}
.num-btn {
    background: var(--cream);
    border: none;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--pine);
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}
.num-btn:hover { background: var(--pine); color: white; }

/* Error messages */
.error-msg {
    font-size: .75rem;
    font-weight: 600;
    color: var(--red-err);
    min-height: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Section divider (legacy, hidden now) */
.section-divider { display: none; }


/* ── Submit button ── */
.btn-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 17px 28px;
    margin-top: 8px;
    background: linear-gradient(110deg, var(--forest) 0%, var(--pine) 50%, var(--leaf) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--shadow-btn);
    transition: transform var(--transition), box-shadow var(--transition);
}
.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 44px rgba(27,77,16,.5);
}
.btn-submit:active { transform: translateY(0); }

.btn-submit__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition);
}
.btn-submit:hover .btn-submit__arrow { transform: translateX(4px); }

/* Shimmer sweep */
.btn-submit__shimmer {
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: skewX(-20deg);
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
    0%   { left: -100%; }
    60%, 100% { left: 160%; }
}


/* ════════════════════════════════════════
   GOOGLE AUTOCOMPLETE DROPDOWN
   ════════════════════════════════════════ */
.pac-container {
    border: 1.5px solid var(--smoke);
    border-radius: var(--radius-md) !important;
    box-shadow: 0 12px 40px rgba(15,45,9,.18) !important;
    font-family: 'Figtree', sans-serif;
    margin-top: 4px;
    overflow: hidden;
    padding: 4px 0;
}
.pac-item {
    padding: 10px 16px;
    font-size: .88rem;
    color: var(--ink-soft);
    cursor: pointer;
    border-top: none !important;
    line-height: 1.4;
}
.pac-item:hover, .pac-item-selected { background: #f0f7e8; }
.pac-item-query { font-weight: 700; color: var(--pine); }
.pac-icon { margin-top: 2px; }
.pac-logo::after { display: none !important; }


/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.site-footer {
    background: var(--forest);
    padding: 24px 0;
    margin-top: auto;
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.8);
    text-transform: lowercase;
}
.footer-copy {
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    font-weight: 500;
}
.footer-links {
    display: flex;
    gap: 20px;
}
.footer-links a {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--lime); }


/* ════════════════════════════════════════
   SCROLLED HEADER (JS class)
   ════════════════════════════════════════ */


/* ════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 768px)
   ════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Container */
    .container { padding: 0 16px; }

    /* Header */
    .header-inner { height: 60px; }
    .logo-name    { font-size: 1.3rem; }
    .logo-sub     { display: none; }
    .logo-diamond { width: 34px; height: 34px; }

    /* Hero */
    .hero         { min-height: auto; padding-top: 60px; }
    .hero-content { padding: 48px 0 96px; }
    .hero-title   { font-size: clamp(2.4rem, 9vw, 3.6rem); }
    .hero-sub     { font-size: .95rem; }
    .hero-stats   { gap: 10px 20px; flex-wrap: wrap; justify-content: center; }
    .stat strong  { font-size: 1.3rem; }
    .stat span    { font-size: .68rem; }
    .stat-divider { display: none; }

    /* Form section overlap */
    .form-section   { margin-top: -56px; padding-bottom: 48px; }

    /* Card */
    .quote-card            { border-radius: var(--radius-lg); }
    .quote-card__header    { padding: 18px 20px 16px; flex-direction: column; align-items: flex-start; gap: 4px; }
    form                   { padding: 20px 20px 28px; }

    /* Form blocks */
    .form-block            { margin-bottom: 24px; }
    .form-block--contact   { padding: 16px; }

    /* Trip type */
    .trip-type-group       { gap: 10px; }
    .radio-card__box       { padding: 12px 14px; gap: 10px; }
    .radio-card__icon      { width: 34px; height: 34px; }
    .radio-card__text small { display: none; }

    /* Route builder */
    .route-builder         { }
    .route-row,
    .stop-row              { padding-right: 14px; }
    .route-timeline        { width: 44px; }
    .add-stop-row          { padding-left: 44px; }

    /* Form rows — stack todos */
    .form-row              { flex-direction: column; gap: 14px; }
    .form-group            { flex: unset; width: 100%; }
    .form-group--sm        { width: 100%; }
    .form-row--three .form-group { flex: unset; width: 100%; }

    /* Number input — full width */
    .number-input          { width: 100%; }
    .number-input input[type="number"] { flex: 1; width: auto; }

    /* Inputs — touch friendly */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="number"] { padding: 13px 14px 13px 38px; font-size: 1rem; }

    /* Submit */
    .btn-submit            { padding: 16px 20px; font-size: 1.1rem; }

    /* Footer */
    .footer-inner          { flex-direction: column; text-align: center; gap: 10px; }
    .footer-links          { justify-content: center; }
}


/* ════════════════════════════════════════
   RESPONSIVE — Móvil (≤ 480px)
   ════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Hero */
    .hero-content { padding: 40px 0 88px; }
    .hero-title   { font-size: clamp(2rem, 11vw, 2.8rem); letter-spacing: -0.5px; }
    .hero-badge   { font-size: .7rem; padding: 5px 12px; }
    .hero-sub     { font-size: .88rem; margin-bottom: 24px; }
    .hero-stats   { gap: 8px 16px; }
    .stat strong  { font-size: 1.2rem; }

    /* Form section */
    .form-section   { margin-top: -48px; }

    /* Card — sin border-radius lateral en pantallas muy pequeñas */
    .quote-card     { border-radius: 16px; }
    form            { padding: 16px 16px 24px; }
    .quote-card__header { padding: 16px 16px 14px; }

    /* Trip type — apilar verticalmente */
    .trip-type-group     { flex-direction: column; }
    .radio-card__box     { justify-content: flex-start; }

    /* Route builder */
    .route-timeline { width: 36px; padding-top: 24px; }
    .stop-row .route-timeline { padding-top: 20px; }
    .route-dot      { width: 12px; height: 12px; }
    .add-stop-row   { padding-left: 36px; padding-right: 10px; }
    .route-row,
    .stop-row       { padding-right: 10px; }
    .btn-add-stop   { font-size: .76rem; padding: 5px 12px; }

    /* Inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="number"] { font-size: .95rem; }

    /* Submit */
    .btn-submit            { font-size: 1rem; padding: 15px 16px; letter-spacing: 1px; }
    .btn-submit__arrow     { width: 30px; height: 30px; }

    /* Remove stop button — más grande para touch */
    .btn-remove-stop { width: 36px; height: 36px; font-size: 1.2rem; }

    /* Form block contact */
    .form-block--contact { padding: 14px 12px; margin-left: 0; margin-right: 0; }

    /* Footer */
    .footer-copy { font-size: .72rem; }
}


/* ════════════════════════════════════════
   RESPONSIVE — Móvil pequeño (≤ 360px)
   ════════════════════════════════════════ */
@media (max-width: 360px) {
    .container       { padding: 0 12px; }
    .hero-title      { font-size: 1.9rem; }
    .hero-badge      { font-size: .65rem; }
    form             { padding: 14px 12px 20px; }
    .route-timeline  { width: 32px; }
    .add-stop-row    { padding-left: 32px; }
}