:root {
        --navy: #081632;
        --navy-2: #0d285a;
        --blue: #102e74;
        --cyan: #11b9e6;
        --cyan-soft: #e7f9fe;
        --gold: #f5c94f;
        --paper: #ffffff;
        --mist: #f5f8fc;
        --line: #dfe7f1;
        --ink: #111827;
        --muted: #647084;
        --shadow: 0 28px 70px rgba(8, 22, 50, .18);
        --soft-shadow: 0 14px 34px rgba(8, 22, 50, .10);
        --image-shadow: 0 34px 90px rgba(8, 22, 50, .26), 0 8px 24px rgba(17, 185, 230, .10);
        --glow: radial-gradient(circle, rgba(17,185,230,.22), rgba(245,201,79,.10) 36%, transparent 68%);
        --radius: 10px;
        --radius-lg: 22px;
        --max: 1200px;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background:
          linear-gradient(180deg, #fff 0%, #f8fbff 42%, #fff 100%);
        color: var(--ink);
        font-family: Inter, Arial, sans-serif;
        overflow-x: hidden;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(circle at 5% 24%, rgba(17,185,230,.08), transparent 22%),
          radial-gradient(circle at 94% 58%, rgba(245,201,79,.10), transparent 18%);
      }

      a { color: inherit; text-decoration: none; }
      img { display: block; max-width: 100%; }
      button, input, select, textarea { font: inherit; }
      .container { width: min(100% - 40px, var(--max)); margin: 0 auto; }

      .btn {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: var(--radius);
        padding: 13px 20px;
        font-weight: 850;
        line-height: 1;
        transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
      }
      .btn:hover { transform: translateY(-2px); }
      .btn-primary { background: linear-gradient(180deg, #174fa9 0%, #0b347c 100%); color: #fff; box-shadow: 0 16px 30px rgba(16, 46, 116, .22); }
      .btn-gold { background: var(--gold); color: #151515; box-shadow: 0 16px 30px rgba(245, 201, 79, .26); }
      .btn-light { background: #fff; color: var(--blue); border-color: var(--line); }
      .btn-ghost { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.08); }
      .hero {
        position: relative;
        height: calc(100svh - 76px);
        min-height: 680px;
        display: grid;
        align-items: center;
        overflow: hidden;
        background:
          linear-gradient(90deg, rgba(8,22,50,.96) 0%, rgba(8,22,50,.82) 34%, rgba(8,22,50,.30) 67%, rgba(8,22,50,.06) 100%),
          radial-gradient(circle at 82% 18%, rgba(17,185,230,.18), transparent 28%),
          url("/assets/home/final/hero.webp") center right / cover no-repeat,
          linear-gradient(115deg, #07142e 0%, #081632 44%, #0c2a5e 100%);
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0 0 0 46%;
        background:
          linear-gradient(90deg, rgba(8,22,50,.30), rgba(8,22,50,0)),
          linear-gradient(180deg, rgba(17,185,230,.10), rgba(245,201,79,.06));
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
        opacity: .72;
        transform: translate3d(calc(var(--scroll-ratio, 0) * 18px), 0, 0) scale(calc(1 + var(--scroll-ratio, 0) * .018));
        transition: transform .18s linear;
      }

      .hero::after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        left: -220px;
        bottom: -210px;
        border-radius: 50%;
        background: rgba(17,185,230,.13);
        filter: blur(6px);
      }

      .hero-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 650px) minmax(320px, 1fr);
        gap: 48px;
        align-items: center;
        padding: 38px 0 70px;
      }

      .kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        background: rgba(255,255,255,.08);
        color: #d9f8ff;
        padding: 8px 13px;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .09em;
        text-transform: uppercase;
      }
      .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 6px rgba(17,185,230,.14); }

      h1, h2, h3 { margin: 0; font-family: Montserrat, Arial, sans-serif; line-height: 1.05; letter-spacing: 0; }
      p { margin: 0; }

      .hero h1 {
        margin: 18px 0 20px;
        color: #fff;
        font-size: clamp(50px, 5.4vw, 80px);
        max-width: 700px;
      }
      .hero h1 span { color: var(--cyan); }
      .hero-copy > p { max-width: 620px; color: rgba(255,255,255,.78); font-size: 19px; line-height: 1.6; }
      .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

      .hero-panel {
        justify-self: end;
        width: min(100%, 410px);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: var(--radius-lg);
        background: rgba(255,255,255,.11);
        backdrop-filter: blur(22px);
        box-shadow: 0 34px 90px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255,255,255,.16);
        padding: 26px;
        color: #fff;
      }
      .hero-panel b { display: block; font-family: Montserrat, Arial, sans-serif; font-size: 22px; line-height: 1.18; }
      .hero-panel p { margin-top: 12px; color: rgba(255,255,255,.75); }
      .mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
      .mini-metrics span { display: grid; gap: 4px; border-radius: 12px; background: rgba(255,255,255,.12); padding: 14px; color: #cceff8; font-size: 12px; }
      .mini-metrics strong { color: #fff; font-size: 18px; }

      .floating-nav {
        position: relative;
        z-index: 4;
        margin-top: -64px;
      }
      .route-grid {
        display: grid;
        grid-template-columns: 1.1fr 1fr 1fr 1fr;
        gap: 18px;
      }
      .route-card {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        padding: 24px;
        box-shadow: var(--shadow);
        isolation: isolate;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        transition: transform .35s ease, box-shadow .35s ease;
      }
      .route-card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(8,22,50,.17); }
      .route-card::after {
        content: "";
        position: absolute;
        inset: auto -40px -70px auto;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(17,185,230,.12);
        z-index: -1;
      }
      .route-card h3 { color: var(--blue); font-size: 21px; margin-bottom: 9px; }
      .route-card p { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
      .route-icon { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 18px; border-radius: 12px; background: var(--cyan-soft); color: var(--blue); font-weight: 900; }
      .route-thumb {
        height: 118px;
        margin: -24px -24px 20px;
        background: var(--image) center/cover;
        transition: transform .6s ease, filter .6s ease;
      }
      .route-card:hover .route-thumb { transform: scale(1.06); filter: saturate(1.08); }
      .route-card.featured { background: var(--blue); color: #fff; }
      .route-card.featured h3, .route-card.featured p { color: #fff; }
      .route-card.featured .route-icon { background: rgba(255,255,255,.14); color: #fff; }
      .route-card.featured .card-cta-page { background: #fff; color: var(--blue); }
      .route-card.featured:hover .card-cta-page { background: var(--gold); color: #101827; }

      .french-ribbon {
        position: relative;
        overflow: hidden;
        z-index: 3;
        margin: 44px auto -34px;
        border-top: 1px solid rgba(16,46,116,.10);
        border-bottom: 1px solid rgba(16,46,116,.10);
        background:
          linear-gradient(90deg, rgba(16,46,116,.06), rgba(255,255,255,.88), rgba(17,185,230,.08));
      }
      .french-ribbon-track {
        display: flex;
        width: max-content;
        gap: 56px;
        padding: 14px 0;
        color: rgba(16,46,116,.42);
        font-family: Montserrat, Arial, sans-serif;
        font-size: clamp(15px, 2vw, 26px);
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        animation: ribbonMove 36s linear infinite;
      }
      .french-ribbon b { color: rgba(17,185,230,.74); }

      .section {
        position: relative;
        isolation: isolate;
        padding: 122px 0;
      }
      .section > .container { position: relative; z-index: 2; }
      .section::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: min(82vw, 940px);
        height: 1px;
        transform: translateX(-50%);
        background: linear-gradient(90deg, transparent, rgba(17,185,230,.34), rgba(245,201,79,.30), transparent);
      }
      .section::after {
        content: "";
        position: absolute;
        inset: 22px auto auto 50%;
        width: 360px;
        height: 120px;
        transform: translateX(-50%);
        background: var(--glow);
        filter: blur(16px);
        opacity: .55;
        pointer-events: none;
        z-index: 0;
      }
      .section-soft {
        background:
          linear-gradient(180deg, #f7fbff 0%, var(--mist) 52%, #fff 100%);
      }
      .section-head {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(320px, .65fr);
        gap: 48px;
        align-items: end;
        margin-bottom: 46px;
      }
      .eyebrow {
        display: inline-flex;
        width: fit-content;
        border-radius: 999px;
        background: var(--cyan-soft);
        color: #007c9a;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      .section-head h2, .center h2 { margin-top: 15px; color: var(--blue); font-size: clamp(38px, 4.7vw, 62px); }
      .section-head p, .center p { color: var(--muted); font-size: 18px; line-height: 1.7; }
      .center { max-width: 780px; margin: 0 auto 50px; text-align: center; }

      .story-grid {
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        gap: 28px;
        align-items: stretch;
      }
      .story-copy {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-lg);
        background:
          radial-gradient(circle at 88% 12%, rgba(17,185,230,.22), transparent 24%),
          linear-gradient(135deg, #102e74, #071632);
        color: #fff;
        padding: 48px;
        min-height: 520px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 34px 86px rgba(8,22,50,.22);
        transition: transform .45s ease, box-shadow .45s ease;
      }
      .story-copy::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        border: 1px solid rgba(120,224,249,.2);
        border-radius: inherit;
        pointer-events: none;
      }
      .story-copy::after {
        content: "fran\00E7ais";
        position: absolute;
        right: -34px;
        bottom: 22px;
        z-index: 0;
        color: rgba(255,255,255,.035);
        font-family: Georgia, serif;
        font-size: 112px;
        font-style: italic;
        line-height: 1;
        pointer-events: none;
        transform: translateX(0);
        transition: transform .8s cubic-bezier(.2,.8,.2,1), color .8s ease;
      }
      .story-copy > * { position: relative; z-index: 1; }
      .story-copy:hover {
        transform: translateY(-5px);
        box-shadow: 0 42px 96px rgba(8,22,50,.28);
      }
      .story-copy.reveal.is-visible:hover { transform: translateY(-5px); }
      .story-copy:hover::after {
        color: rgba(255,255,255,.055);
        transform: translateX(-18px);
      }
      .story-copy h2 {
        max-width: 650px;
        margin-top: 14px;
        font-size: clamp(36px, 3vw, 48px);
        line-height: 1.06;
      }
      .story-copy p {
        max-width: 610px;
        margin-top: 22px;
        color: rgba(255,255,255,.82);
        font-size: 17px;
        line-height: 1.72;
      }
      .story-copy .pill-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        max-width: 520px;
        margin-top: 28px;
      }
      .story-copy .pill {
        position: relative;
        min-width: 0;
        border: 1px solid rgba(159,228,245,.2);
        border-radius: 10px;
        background: rgba(255,255,255,.07);
        padding: 12px 14px 12px 34px;
        color: #f4fcff;
        line-height: 1.2;
        transition: transform .25s ease, background .25s ease, border-color .25s ease;
      }
      .story-copy .pill::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 14px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 0 5px rgba(17,185,230,.12);
        transform: translateY(-50%);
      }
      .story-copy .pill:hover {
        transform: translateY(-2px);
        border-color: rgba(159,228,245,.42);
        background: rgba(255,255,255,.12);
      }
      .story-copy > .btn {
        align-self: flex-start;
        min-width: 230px;
        margin-top: 30px;
      }
      .story-copy > .btn::after {
        content: "\2192";
        margin-left: 10px;
        transition: transform .25s ease;
      }
      .story-copy > .btn:hover::after { transform: translateX(4px); }
      .story-image {
        position: relative;
        min-height: 520px;
        border-radius: var(--radius-lg);
        background: url("/assets/home/final/particulares.webp") center/cover;
        box-shadow: var(--image-shadow);
        transform: translateY(calc(var(--scroll-ratio, 0) * -8px));
      }
      .image-frame {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-lg);
        min-height: 520px;
        background: var(--image) center/cover;
        box-shadow: var(--image-shadow);
        transform: translateY(calc(var(--scroll-ratio, 0) * -7px));
      }
      .image-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 38%, rgba(8,22,50,.58));
      }
      .image-caption {
        position: absolute;
        left: 28px;
        right: 28px;
        bottom: 28px;
        z-index: 1;
        border: 1px solid rgba(255,255,255,.20);
        border-radius: 16px;
        background: rgba(255,255,255,.88);
        backdrop-filter: blur(16px);
        padding: 20px;
      }
      .image-caption strong { display: block; color: var(--blue); font-family: Montserrat, Arial, sans-serif; font-size: 20px; }
      .image-caption span { display: block; margin-top: 7px; color: var(--muted); line-height: 1.55; }
      .pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
      .pill { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 9px 12px; color: #e9fbff; font-size: 13px; font-weight: 800; }

      .value-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }
      .value-card {
        position: relative;
        overflow: hidden;
        min-height: 330px;
        border-radius: 18px;
        background: var(--image) center/cover;
        box-shadow: 0 20px 50px rgba(8,22,50,.13);
        display: flex;
        align-items: end;
        transition: transform .35s ease, box-shadow .35s ease;
      }
      .value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
      .value-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(8,22,50,.08), rgba(8,22,50,.76));
      }
      .value-card div { position: relative; z-index: 1; padding: 24px; color: #fff; }
      .value-card h3 { font-size: 23px; margin-bottom: 10px; }
      .value-card p { color: rgba(255,255,255,.78); line-height: 1.6; }

      .course-showcase {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .course-card {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 18px 44px rgba(8,22,50,.10);
        display: flex;
        flex-direction: column;
        transition: transform .35s ease, box-shadow .35s ease;
      }
      .course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
      .course-img { height: 250px; background: var(--image) center/cover; transition: transform .7s ease, filter .7s ease; }
      .course-card:hover .course-img { transform: scale(1.045); filter: saturate(1.08) contrast(1.02); }
      .course-body { padding: 28px; display: flex; flex: 1; flex-direction: column; }
      .course-meta { color: #0084a1; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
      .course-body h3 { margin: 10px 0 12px; color: var(--blue); font-size: 28px; }
      .course-body p { min-height: 82px; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }

      .card-choice {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-height: 48px;
        margin-top: auto;
        overflow: hidden;
        border: 1px solid #123f8c;
        border-radius: 10px;
        background: linear-gradient(180deg, #174fa9 0%, #0b347c 100%);
        box-shadow: 0 14px 28px rgba(8,22,50,.14);
      }
      .card-choice a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 0;
        padding: 12px 10px;
        color: #fff;
        font-size: 14px;
        font-weight: 900;
        line-height: 1;
        transition: background .25s ease, color .25s ease;
      }
      .card-choice a + a { border-left: 1px solid rgba(255,255,255,.28); }
      .card-choice a::after {
        content: "\2192";
        font-size: 15px;
        transition: transform .25s ease;
      }
      .card-choice a:hover,
      .card-choice a:focus-visible {
        background: var(--gold);
        color: #101827;
        outline: none;
      }
      .card-choice a:hover::after,
      .card-choice a:focus-visible::after { transform: translateX(3px); }

      .modality-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
      }
      .modality-card {
        grid-column: span 2;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 18px 44px rgba(8,22,50,.10);
        display: flex;
        flex-direction: column;
        transition: transform .35s ease, box-shadow .35s ease;
      }
      .modality-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
      .modality-card.wide { grid-column: span 3; }
      .modality-image { height: 210px; background: var(--image) center/cover; transition: transform .7s ease, filter .7s ease; }
      .modality-card:hover .modality-image { transform: scale(1.045); filter: saturate(1.08); }
      .modality-body { padding: 24px; display: flex; flex: 1; flex-direction: column; }
      .modality-body h3 { color: var(--blue); font-size: 24px; margin-bottom: 10px; }
      .modality-body p { color: var(--muted); line-height: 1.65; margin-bottom: 22px; }

      .card-cta {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: fit-content;
        min-height: 44px;
        margin-top: auto;
        border-radius: 10px;
        padding: 13px 18px;
        font-size: 14px;
        font-weight: 900;
        line-height: 1;
        border: 1px solid transparent;
        box-shadow: 0 14px 28px rgba(8,22,50,.10);
        transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
      }
      .card-cta::after {
        content: "\2192";
        font-size: 16px;
        line-height: 1;
        transform: translateX(0);
        transition: transform .25s ease;
      }
      .card-cta-page {
        background: linear-gradient(180deg, #174fa9 0%, #0b347c 100%);
        color: #fff;
      }
      .card-cta-contact {
        background: #e7f9fe;
        color: #073a6b;
        border-color: rgba(17,185,230,.28);
      }
      .course-card:hover .card-cta,
      .modality-card:hover .card-cta,
      .route-card:hover .card-cta {
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(8,22,50,.18);
      }
      .course-card:hover .card-cta::after,
      .modality-card:hover .card-cta::after,
      .route-card:hover .card-cta::after {
        transform: translateX(4px);
      }
      .course-card:hover .card-cta-page,
      .modality-card:hover .card-cta-page {
        background: var(--gold);
        color: #101827;
      }
      .course-card:hover .card-cta-contact,
      .modality-card:hover .card-cta-contact,
      .route-card:hover .card-cta-contact {
        background: linear-gradient(180deg, #12bde9, #0797c5);
        color: #fff;
        border-color: transparent;
      }

      .method-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .method-card {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        padding: 0 32px 32px;
        box-shadow: 0 18px 44px rgba(8,22,50,.10);
        transition: transform .35s ease, box-shadow .35s ease;
      }
      .method-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
      .method-photo { height: 170px; margin: 0 -32px 28px; background: var(--image) center/cover; transition: transform .7s ease; }
      .method-card:hover .method-photo { transform: scale(1.045); }
      .method-card span { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 22px; border-radius: 16px; background: var(--cyan-soft); color: var(--blue); font-weight: 900; }
      .method-card h3 { color: var(--blue); font-size: 24px; margin-bottom: 12px; }
      .method-card p { color: var(--muted); line-height: 1.7; }

      .split-grid {
        display: grid;
        grid-template-columns: 1.02fr .98fr;
        gap: 34px;
        align-items: stretch;
      }
      .split-copy {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-lg);
        background: #fff;
        border: 1px solid var(--line);
        padding: 44px;
        box-shadow: 0 20px 54px rgba(8,22,50,.10);
      }
      .split-copy::after {
        content: "";
        position: absolute;
        right: -56px;
        bottom: -56px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        border: 1px solid rgba(17,185,230,.24);
        box-shadow: inset 0 0 0 28px rgba(17,185,230,.035);
      }
      .section-soft .split-copy { background: rgba(255,255,255,.82); }
      .split-copy h2 { color: var(--blue); font-size: clamp(34px, 4.4vw, 58px); margin: 14px 0 18px; }
      .split-copy p { color: var(--muted); font-size: 18px; line-height: 1.75; }
      .check-list {
        display: grid;
        gap: 13px;
        margin: 28px 0 0;
        padding: 0;
        list-style: none;
      }
      .check-list li {
        position: relative;
        padding-left: 34px;
        color: #26364f;
        line-height: 1.55;
        font-weight: 750;
      }
      .check-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 0 6px rgba(17,185,230,.12);
      }

      .local-band {
        position: relative;
        overflow: hidden;
        border-radius: 26px;
        background:
          linear-gradient(90deg, rgba(8,22,50,.94), rgba(8,22,50,.60), rgba(8,22,50,.12)),
          url("/assets/home/final/madrid.webp") center/cover;
        min-height: 520px;
        display: grid;
        align-items: end;
        padding: 48px;
        box-shadow: var(--image-shadow);
      }
      .local-band::before {
        content: "Madrid \00B7 Fran\00E7ais \00B7 Madrid \00B7 Fran\00E7ais";
        position: absolute;
        left: 34px;
        right: 34px;
        top: 28px;
        color: rgba(255,255,255,.18);
        font-family: Montserrat, Arial, sans-serif;
        font-size: clamp(13px, 2vw, 22px);
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .local-content { max-width: 710px; color: #fff; }
      .local-content h2 { font-size: clamp(36px, 5vw, 64px); margin: 14px 0 18px; }
      .local-content p { color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.75; }

      .faq-grid {
        display: grid;
        grid-template-columns: .82fr 1.18fr;
        gap: 34px;
        align-items: start;
      }
      .faq-image {
        position: sticky;
        top: 104px;
        min-height: 560px;
        border-radius: var(--radius-lg);
        background: url("/assets/home/final/grupales.webp") center/cover;
        box-shadow: var(--image-shadow);
      }
      .faq-list { display: grid; gap: 14px; }
      .faq-list details {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 16px 42px rgba(8,22,50,.09);
        overflow: hidden;
      }
      .faq-list summary {
        position: relative;
        cursor: pointer;
        padding: 22px 58px 22px 24px;
        color: var(--blue);
        font-family: Montserrat, Arial, sans-serif;
        font-weight: 850;
        list-style: none;
      }
      .faq-list summary::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 20px;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--cyan-soft);
        color: var(--blue);
        transform: translateY(-50%);
        transition: transform .25s ease, background .25s ease, color .25s ease;
      }
      .faq-list details[open] summary::after {
        content: "\2212";
        background: var(--blue);
        color: #fff;
        transform: translateY(-50%) rotate(180deg);
      }
      .faq-list summary:focus-visible { outline: 3px solid rgba(17,185,230,.34); outline-offset: -3px; }
      .faq-list summary::-webkit-details-marker { display: none; }
      .faq-list details p { padding: 0 24px 24px; color: var(--muted); line-height: 1.7; }

      .final-cta {
        position: relative;
        overflow: hidden;
        background:
          linear-gradient(105deg, rgba(8,22,50,.96), rgba(13,40,90,.88), rgba(17,185,230,.22)),
          url("/assets/home/final/contacto.webp") center/cover;
        color: #fff;
      }
      .final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(0,35,149,.18), transparent 28%, transparent 72%, rgba(237,41,57,.12)),
          radial-gradient(circle at 78% 18%, rgba(245,201,79,.24), transparent 18%);
        pointer-events: none;
      }
      .final-cta-inner {
        min-height: 470px;
        display: grid;
        grid-template-columns: minmax(0, 700px) auto;
        gap: 30px;
        align-items: center;
      }
      .final-cta h2 { font-size: clamp(40px, 5vw, 72px); }
      .final-cta p { margin-top: 18px; color: rgba(255,255,255,.78); font-size: 19px; line-height: 1.7; }
      .final-cta .hero-actions { justify-content: end; margin-top: 0; }

      .lead-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 430px;
        gap: 42px;
        align-items: start;
      }
      .lead-copy {
        border-radius: var(--radius-lg);
        min-height: 520px;
        background: linear-gradient(180deg, rgba(8,22,50,.08), rgba(8,22,50,.02)), url("/assets/home/final/contacto.webp") center/cover;
        padding: 38px;
        display: flex;
        align-items: end;
        box-shadow: var(--image-shadow);
      }
      .lead-copy-inner { max-width: 600px; border-radius: 18px; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); padding: 28px; }
      .lead-copy-inner h2 { color: var(--blue); font-size: clamp(32px, 4vw, 52px); }
      .lead-copy-inner p { margin-top: 14px; color: var(--muted); line-height: 1.7; }

      .form-card {
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: #fff;
        padding: 32px;
        box-shadow: var(--shadow);
      }
      .form-card h2 { color: var(--blue); font-size: 32px; margin-bottom: 10px; }
      .form-card > p { color: var(--muted); margin-bottom: 22px; }
      .field { display: grid; gap: 8px; margin-bottom: 15px; }
      .field label { color: #344054; font-size: 13px; font-weight: 900; }
      .field input, .field select, .field textarea {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #f8fafc;
        padding: 13px 14px;
        color: var(--ink);
      }
      .field textarea { min-height: 116px; resize: vertical; }
      .checkbox { display: flex; gap: 10px; margin: 10px 0 18px; color: var(--muted); font-size: 13px; }

      .footer {
        background: radial-gradient(circle at 94% 100%, rgba(17,185,230,.18), transparent 19%), var(--navy);
        color: #fff;
        padding: 64px 0 28px;
      }
      .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 44px; }
      .footer img { width: 170px; filter: brightness(0) invert(1); }
      .footer h3 { margin: 0 0 16px; font-family: Montserrat, Arial, sans-serif; font-size: 15px; text-transform: uppercase; }
      .footer p, .footer a, .footer li { color: rgba(255,255,255,.72); font-size: 14px; }
      .footer ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
      .footer-claim { margin-top: 24px; color: var(--cyan) !important; font-family: Montserrat, Arial, sans-serif; font-size: 30px !important; font-weight: 900; line-height: 1.08; }
      .footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-top: 44px;
        padding-top: 22px;
        border-top: 1px solid rgba(255,255,255,.12);
        color: rgba(255,255,255,.52);
        font-size: 12px;
      }
      .studio-credit {
        position: relative;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        border: 1px solid rgba(245,201,79,.24);
        border-radius: 999px;
        background:
          linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
          rgba(255,255,255,.04);
        padding: 7px 18px 7px 8px;
        color: #f5c94f !important;
        font-size: 13px !important;
        font-weight: 800;
        overflow: hidden;
        box-shadow: 0 18px 36px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.12);
        transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease;
      }
      .studio-credit::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(110deg, transparent 0%, rgba(17,185,230,.18) 38%, rgba(245,201,79,.22) 50%, transparent 64%);
        transform: translateX(-115%);
        transition: transform .65s ease;
      }
      .studio-credit-mark {
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border-radius: 50%;
        background: rgba(245,201,79,.13);
        color: var(--gold);
        font-size: 13px;
        box-shadow: inset 0 0 0 1px rgba(245,201,79,.22), 0 0 0 6px rgba(245,201,79,.04);
        transition: transform .28s ease, background .28s ease, color .28s ease;
      }
      .studio-credit strong { color: #fff; font-weight: 950; }
      .studio-credit:hover {
        transform: translateY(-3px);
        border-color: rgba(17,185,230,.55);
        color: #fff !important;
        box-shadow: 0 24px 46px rgba(17,185,230,.18), 0 16px 36px rgba(0,0,0,.24);
      }
      .studio-credit:hover::before { transform: translateX(115%); }
      .studio-credit:hover .studio-credit-mark {
        transform: rotate(-10deg) scale(1.06);
        background: var(--cyan);
        color: #fff;
      }

      .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
      .reveal.is-visible { opacity: 1; transform: translateY(0); }
      .reveal.pop { transform: translateY(28px) scale(.97); }
      .reveal.pop.is-visible { transform: translateY(0) scale(1); }
      .delay-1 { transition-delay: .08s; }
      .delay-2 { transition-delay: .16s; }
      .delay-3 { transition-delay: .24s; }

      @keyframes ribbonMove {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: .001ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: .001ms !important;
        }
      }

      @media (max-width: 980px) {
        .hero::before { inset: 0; clip-path: none; opacity: .36; }
        .hero-grid, .route-grid, .story-grid, .course-showcase, .method-grid, .lead-grid, .footer-grid, .section-head, .value-grid, .split-grid, .faq-grid, .final-cta-inner { grid-template-columns: 1fr; }
        .hero { height: auto; min-height: calc(100svh - 70px); }
        .hero-grid { padding: 64px 0 112px; }
        .hero-panel { justify-self: start; }
        .floating-nav { margin-top: -42px; }
        .section { padding: 86px 0; }
        .french-ribbon { margin-bottom: -24px; }
        .story-copy, .story-image, .lead-copy, .image-frame, .local-band, .faq-image { min-height: 430px; }
        .modality-card, .modality-card.wide { grid-column: span 6; }
        .faq-image { position: relative; top: auto; }
        .final-cta .hero-actions { justify-content: start; }
        .footer-bottom { align-items: flex-start; flex-direction: column; }
      }

      @media (max-width: 640px) {
        .container { width: min(100% - 28px, var(--max)); }
        .hero h1 { font-size: clamp(42px, 13vw, 60px); }
        .hero-copy > p, .section-head p, .center p, .split-copy p, .local-content p, .final-cta p { font-size: 16px; }
        .story-copy, .split-copy, .form-card, .local-band { padding: 28px; }
        .story-copy h2 { font-size: clamp(34px, 11vw, 46px); }
        .story-copy .pill-list { grid-template-columns: 1fr; }
        .story-copy > .btn { width: 100%; min-width: 0; }
        .section::after { width: 240px; }
        .story-copy::after { font-size: 82px; }
        .mini-metrics { grid-template-columns: 1fr; }
        .modality-grid { grid-template-columns: 1fr; }
        .modality-card, .modality-card.wide { grid-column: auto; }
      }