/* ==========================================================================
   TurisFleet — Vista de promoción
   Misma colorimetría y tipografía que el sistema real (public/css/styles.css):
   #0284c7 primario · #0369a1 hover · #0f172a texto · #f8fafc fondo alterno
   · #e2e8f0 bordes · Inter 300-800.
   Fondo claro en toda la vista: se alterna blanco con blanco roto para separar
   las secciones, y la marca se apoya en el azul, no en bloques oscuros.
   ========================================================================== */

:root {
    /* Marca — idénticas a las del sistema */
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --primary-deep: #075985;
    --primary-soft: #f0f9ff;
    --primary-tint: rgba(2, 132, 199, .08);
    --dark: #0f172a;
    --light-bg: #f8fafc;
    --border: #e2e8f0;

    /* Azul de la marca "TurisFleet": en el sistema real el icono y la sílaba
       "Fleet" llevan la utilidad text-primary de Bootstrap, que resuelve a
       #0d6efd (no a --primary-color). Se replica tal cual para que la marca se
       vea idéntica a la del sistema original. */
    --fleet-blue: #0d6efd;

    /* Texto */
    --ink: #0f172a;
    --body: #334155;
    --muted: #64748b;
    --subtle: #475569;

    /* Retícula */
    --wrap: 1180px;
    --nav-h: 74px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--body);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* El salto de un ancla no debe quedar bajo la barra fija del logo */
section[id],
#contenido {
    scroll-margin-top: calc(var(--nav-h) + 14px);
}

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

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

/* Sin viñetas ni marcadores: cada lista dibuja su propio indicador
   (icono, guion, precio) y así ninguna se ve "por fuera" de su tarjeta. */
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

dl,
dd {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4 {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--ink);
    letter-spacing: -.025em;
    line-height: 1.18;
    margin: 0;
    font-weight: 700;
}

p {
    margin: 0;
}

strong {
    color: var(--ink);
    font-weight: 600;
}

.text-brand {
    color: var(--primary);
}

.fw-bold {
    font-weight: 700;
}

::selection {
    background: var(--primary);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    background: var(--dark);
    color: #fff;
    padding: .7rem 1.1rem;
    border-radius: 0 0 var(--r-sm) 0;
    font-size: .9rem;
}

.skip-link:focus {
    left: 0;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Etiqueta de sección: sustituye a la numeración, aporta orden sin inventar
   índices. El azul oscuro garantiza contraste sobre blanco y blanco roto. */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    color: var(--primary-hover);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
}

.kicker--center {
    justify-content: center;
}

/* Caja de icono: misma idea que .icon-box del sistema, un punto mayor */
.ico-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--r-md);
    background-color: var(--primary-tint);
    color: var(--primary);
    font-size: 1rem;
}

.ico-box--lg {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 1.15rem;
}

.ico-box--warn {
    background-color: #fff7ed;
    color: #c2410c;
}

.ico-box--ok {
    background-color: #ecfdf5;
    color: #15803d;
}

/* -------------------------------------------------------------------------- */
/* Barra fija con la marca (sin navegación)                                   */
/* -------------------------------------------------------------------------- */
.topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Sólo al desplazarse aparece la superficie: arriba se ve limpia */
.topbar.is-stuck {
    background-color: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: var(--border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.topbar__inner {
    display: flex;
    align-items: center;
    height: var(--nav-h);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--dark);
}

/* "Turis" siempre en negro: no hereda ningún cambio al pasar el cursor.
   Sólo "Fleet" es azul (ver --fleet-blue). */
.navbar-brand .fw-bold {
    color: var(--dark);
}

.navbar-brand .brand-ico {
    margin-right: .5rem;
    color: var(--fleet-blue);
    font-size: 1.4em;
    line-height: 1;
    transition: transform .25s var(--ease);
}

/* Icono + "Fleet": mismo azul que el sistema real (ver --fleet-blue).
   Sólo en la marca: .text-brand fuera de ella sigue usando --primary. */
.navbar-brand .text-brand,
.footer__title .text-brand {
    color: var(--fleet-blue);
}

.navbar-brand:hover .brand-ico {
    transform: translateY(-2px);
}

/* -------------------------------------------------------------------------- */
/* Botones — mismo criterio que .btn-tf-primary, con un acabado más actual    */
/* -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .74rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease,
        transform .2s var(--ease);
}

.btn i {
    font-size: .82em;
    transition: transform .22s var(--ease);
}

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

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(15, 23, 42, .06),
        0 10px 20px -12px rgba(2, 132, 199, .8);
}

.btn--primary:hover {
    background-color: var(--primary-deep);
    border-color: var(--primary-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(15, 23, 42, .08),
        0 16px 28px -14px rgba(2, 132, 199, .9);
}

.btn--primary:hover i {
    transform: translateX(3px);
}

/* Variante clara: mismo lenguaje, sin competir con el botón principal */
.btn--soft {
    background-color: var(--primary-soft);
    border-color: rgba(2, 132, 199, .3);
    color: var(--primary-deep);
}

.btn--soft:hover {
    background-color: #e0f2fe;
    border-color: var(--primary);
    color: var(--primary-deep);
}

.btn--lg {
    padding: .95rem 1.9rem;
    font-size: 1rem;
}

.btn--block {
    display: flex;
    width: 100%;
    margin-top: auto;
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
    padding-bottom: clamp(3.25rem, 7vw, 5.5rem);
    background:
        radial-gradient(78% 62% at 92% 4%, var(--primary-soft) 0%, rgba(240, 249, 255, 0) 62%),
        linear-gradient(180deg, #fff 0%, var(--light-bg) 100%);
    overflow: hidden;
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(2rem, 4.5vw, 3.75rem);
    align-items: center;
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .95rem .45rem .8rem;
    border: 1px solid rgba(2, 132, 199, .24);
    border-radius: 100px;
    background-color: #fff;
    color: var(--primary-deep);
    font-size: .82rem;
    font-weight: 500;
}

.badge-soft i {
    color: #15803d;
    font-size: .78rem;
}

.hero__title {
    margin-top: 1.4rem;
    font-size: clamp(2.15rem, 4.6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.hero__lead {
    margin-top: 1.3rem;
    max-width: 35em;
    font-size: 1.03rem;
    line-height: 1.75;
    color: var(--subtle);
}

/* Resumen del sistema: lista de datos, sin botones ni cifras */
.summary {
    margin-top: 2rem;
    border-top: 1px solid var(--border);
}

.summary__row {
    display: grid;
    grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
    gap: .5rem 1.25rem;
    padding-block: 1.05rem;
    border-bottom: 1px solid var(--border);
}

.summary__row dt {
    display: flex;
    align-items: center;
    gap: .85rem;
    font-size: .96rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.01em;
}

.summary__row dd {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--muted);
}

/* Composición de fotografías */
.hero__media {
    position: relative;
    padding-bottom: 3rem;
}

.hero__shot {
    margin: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    background-color: var(--light-bg);
    border: 1px solid var(--border);
    box-shadow: 0 34px 60px -38px rgba(15, 23, 42, .5);
}

.hero__shot img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.hero__shot--alt {
    position: absolute;
    left: -9%;
    bottom: 0;
    width: 45%;
    border: 6px solid #fff;
    box-shadow: 0 26px 48px -28px rgba(15, 23, 42, .45);
}

.hero__shot--alt img {
    aspect-ratio: 3 / 2;
}

/* -------------------------------------------------------------------------- */
/* Secciones                                                                  */
/* -------------------------------------------------------------------------- */
.section {
    padding-block: clamp(3.75rem, 7.5vw, 6rem);
}

.section--tint {
    background-color: var(--light-bg);
    border-block: 1px solid var(--border);
}

.head {
    max-width: 47em;
    margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.head__title {
    font-size: clamp(1.75rem, 3.3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.head__lead {
    margin-top: 1.05rem;
    max-width: 46em;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--subtle);
}

/* -------------------------------------------------------------------------- */
/* Origen                                                                     */
/* -------------------------------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
}

/* Nota de contraste: los textos blancos sobre azul usan --primary-hover
   (#0369a1, 5.3:1) y no --primary (#0284c7, 3.9:1). El azul de marca queda
   para iconos, bordes, degradados y titulares grandes. */

.shot {
    margin: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 26px 50px -40px rgba(15, 23, 42, .5);
}

.shot img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.shot figcaption {
    padding: 1.1rem 1.25rem;
    border-top: 1px solid var(--border);
    background-color: #fff;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--muted);
}

.compare {
    display: grid;
    gap: 1rem;
}

.compare__card {
    padding: clamp(1.35rem, 2.6vw, 1.85rem);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background-color: #fff;
    transition: border-color .2s ease, box-shadow .25s ease;
}

.compare__card h3 {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.15rem;
    font-size: 1.08rem;
    font-weight: 700;
}

.compare__card ul {
    display: grid;
    gap: .65rem;
}

.compare__card li {
    position: relative;
    padding-left: 1.7rem;
    font-size: .93rem;
    line-height: 1.6;
}

.compare__card li::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.25rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.9;
}

.compare__card:not(.compare__card--after) li::before {
    content: "\f00d";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #c2410c;
}

.compare__card--after li::before {
    content: "\f058";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #15803d;
}

.compare__card--after {
    border-color: rgba(2, 132, 199, .38);
    box-shadow: 0 20px 40px -32px rgba(2, 132, 199, .55);
}

/* -------------------------------------------------------------------------- */
/* Propósito                                                                  */
/* -------------------------------------------------------------------------- */
.statement {
    max-width: 41em;
    font-size: clamp(1.2rem, 2.3vw, 1.65rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: pretty;
}

.pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.pillar {
    padding: 1.6rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background-color: var(--light-bg);
    transition: transform .22s ease, box-shadow .25s ease, border-color .22s ease, background-color .22s ease;
}

.pillar:hover {
    transform: translateY(-4px);
    background-color: #fff;
    border-color: rgba(2, 132, 199, .35);
    box-shadow: 0 16px 32px -28px rgba(15, 23, 42, .5);
}

.pillar h3 {
    margin: 1.1rem 0 .45rem;
    font-size: 1.05rem;
}

.pillar p {
    font-size: .89rem;
    line-height: 1.65;
    color: var(--muted);
}

/* -------------------------------------------------------------------------- */
/* Cómo funciona                                                              */
/* -------------------------------------------------------------------------- */
.flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

.flow__step {
    position: relative;
    padding: 1.6rem 1.4rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background-color: #fff;
    transition: transform .22s ease, box-shadow .25s ease, border-color .22s ease;
}

.flow__step:hover {
    transform: translateY(-4px);
    border-color: rgba(2, 132, 199, .35);
    box-shadow: 0 16px 30px -26px rgba(15, 23, 42, .5);
}

.flow__n {
    display: block;
    margin-bottom: .9rem;
    color: var(--primary-hover);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.flow__step h3 {
    margin-bottom: .4rem;
    font-size: 1.05rem;
}

.flow__step p {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--muted);
}

.mosaic {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.1rem;
    margin-top: 1.1rem;
}

.mosaic__item {
    position: relative;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background-color: #fff;
}

.mosaic__item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .55s var(--ease);
}

.mosaic__item:hover img {
    transform: scale(1.04);
}

.mosaic__item figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: .34rem .8rem;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, .94);
    border: 1px solid var(--border);
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink);
}

/* -------------------------------------------------------------------------- */
/* Funcionalidades                                                            */
/* -------------------------------------------------------------------------- */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.85rem;
}

.filter {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background-color: #fff;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--subtle);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease;
}

.filter i {
    font-size: .82rem;
    color: var(--muted);
    transition: color .18s ease;
}

.filter:hover {
    border-color: rgba(2, 132, 199, .5);
    color: var(--primary-hover);
}

.filter:hover i {
    color: var(--primary);
}

.filter.is-active {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: 0 10px 20px -14px rgba(2, 132, 199, .9);
}

.filter.is-active i {
    color: #fff;
}

.filter__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: .3rem;
    border-radius: 100px;
    background-color: var(--light-bg);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    transition: background-color .18s ease, color .18s ease;
}

.filter.is-active .filter__n {
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
}

/* Flexbox: la última fila siempre se completa, sin huecos sueltos */
.bento {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 2.4vw, 1.8rem);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: transform .22s ease, box-shadow .25s ease, border-color .22s ease;
}

.card:hover {
    transform: translateY(-4px);
    border-color: rgba(2, 132, 199, .35);
    box-shadow: 0 18px 34px -28px rgba(15, 23, 42, .5);
}

.card.is-hidden {
    display: none;
}

.card.is-entering {
    animation: cardIn .4s var(--ease) both;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

.card__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .9rem;
}

.card__head h3 {
    font-size: 1.08rem;
    line-height: 1.3;
}

.card p {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--muted);
}

/* Tarjeta ancha: ocupa la fila completa y marca el bloque de seguridad */
.card--wide {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 1.75rem;
    align-items: center;
    border-left: 3px solid var(--primary);
    background: linear-gradient(115deg, var(--primary-soft) 0%, #fff 58%);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1.25rem;
}

.tags li {
    padding: .3rem .68rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--light-bg);
    font-size: .775rem;
    color: var(--subtle);
}

.card--wide .tags {
    margin-top: 0;
}

/* -------------------------------------------------------------------------- */
/* Planes                                                                     */
/* -------------------------------------------------------------------------- */
.tabs {
    display: inline-flex;
    gap: .25rem;
    padding: .3rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background-color: #f1f5f9;
}

.tab {
    position: relative;
    padding: .6rem 1.15rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: .89rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.tab:hover {
    color: var(--primary-hover);
}

.tab.is-active {
    background-color: #fff;
    color: var(--primary-hover);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.tab.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -.3rem;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
    transform: translateX(-50%);
}

.panel[hidden] {
    display: none;
}

.plans {
    display: grid;
    gap: 1.1rem;
}

.plans--3 {
    grid-template-columns: repeat(3, 1fr);
}

.plans--4 {
    grid-template-columns: repeat(4, 1fr);
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.65rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: transform .22s ease, box-shadow .25s ease, border-color .22s ease;
}

.plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -30px rgba(15, 23, 42, .5);
}

.plan--pop {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 22px 44px -32px rgba(2, 132, 199, .6);
}

.badge {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    padding: .28rem .68rem;
    border-radius: 100px;
    background-color: var(--primary-hover);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}

.badge--trial {
    position: static;
    align-self: flex-start;
    margin-bottom: .9rem;
    background-color: var(--primary-soft);
    border: 1px solid rgba(2, 132, 199, .3);
    color: var(--primary-deep);
}

.plan__name {
    font-size: 1.28rem;
    font-weight: 700;
}

.plan__lema {
    margin-top: .4rem;
    min-height: 2.9em;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--muted);
}

.plan__price {
    margin: 1.15rem 0 1.3rem;
    padding: .95rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background-color: var(--light-bg);
}

.plan--pop .plan__price {
    background-color: var(--primary-soft);
    border-color: rgba(2, 132, 199, .3);
}

.plan__amount {
    display: block;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.2vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.plan__period {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--subtle);
}

.plan__equiv {
    display: block;
    margin-top: .25rem;
    color: var(--primary-hover);
    font-size: .8rem;
    font-weight: 600;
}

.plan__list {
    display: grid;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.plan__list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .86rem;
    line-height: 1.6;
}

.plan__list li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: .08rem;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .78rem;
    color: #15803d;
}

/* -------------------------------------------------------------------------- */
/* Equipo                                                                     */
/* -------------------------------------------------------------------------- */
.team {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
}

.person {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: clamp(1.4rem, 2.8vw, 1.9rem);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: transform .22s ease, box-shadow .25s ease, border-color .22s ease;
}

.person:hover {
    transform: translateY(-4px);
    border-color: rgba(2, 132, 199, .35);
    box-shadow: 0 18px 34px -28px rgba(15, 23, 42, .5);
}

/* Marco punteado mientras no haya fotografía real. El JS añade .is-photo al
   detectar la carga y el marco pasa a limpio. */
.person__photo {
    position: relative;
    width: 108px;
    height: 108px;
    flex: none;
    padding: 5px;
    border: 1.5px dashed rgba(2, 132, 199, .5);
    border-radius: 50%;
    background-color: var(--light-bg);
    transition: border-color .25s ease, padding .25s ease;
}

.person__photo:hover {
    border-color: var(--primary);
}

.person__photo.is-photo {
    padding: 0;
    border-style: solid;
    border-color: var(--border);
}

.person__photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.person__body {
    min-width: 0;
}

.person h3 {
    font-size: 1.16rem;
    line-height: 1.3;
}

.person__role {
    margin-top: .3rem;
    color: var(--primary-hover);
    font-size: .88rem;
    font-weight: 600;
}

.person__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.person__meta li {
    padding: .28rem .65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--light-bg);
    font-size: .775rem;
    color: var(--subtle);
}

.sena {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.1rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid rgba(2, 132, 199, .3);
    border-radius: var(--r-lg);
    background: linear-gradient(120deg, var(--primary-soft) 0%, #fff 70%);
}

.sena h3 {
    margin-bottom: .5rem;
    font-size: 1.14rem;
}

.sena p {
    max-width: 46em;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--subtle);
}

.sena__seal {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .15rem;
    width: 108px;
    height: 108px;
    flex: none;
    border: 1.5px solid rgba(2, 132, 199, .35);
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
}

.sena__seal img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

/* -------------------------------------------------------------------------- */
/* CTA final                                                                  */
/* -------------------------------------------------------------------------- */
.cta {
    position: relative;
    padding: clamp(2.75rem, 6vw, 4.25rem) clamp(1.5rem, 4vw, 3.5rem);
    border: 1px solid rgba(2, 132, 199, .3);
    border-radius: var(--r-xl);
    background:
        radial-gradient(70% 110% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(155deg, var(--primary-soft) 0%, #e0f2fe 100%);
    text-align: center;
    overflow: hidden;
}

/* Retícula decorativa muy tenue, sólo dentro del panel */
.cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(2, 132, 199, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 132, 199, .08) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 100%, #000 12%, transparent 76%);
    mask-image: radial-gradient(70% 70% at 50% 100%, #000 12%, transparent 76%);
    pointer-events: none;
}

.cta>* {
    position: relative;
    z-index: 1;
}

.cta__title {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.cta__lead {
    max-width: 34em;
    margin: 1rem auto 2rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--subtle);
}

/* -------------------------------------------------------------------------- */
/* Footer — mismo color y estructura del sistema real: fondo #0f172a, borde   */
/* superior azul de 4px, titulos en azul y texto al 50% de blanco.            */
/* -------------------------------------------------------------------------- */
.footer {
    padding-top: clamp(2.5rem, 4.5vw, 3.25rem);
    padding-bottom: 1.75rem;
    background-color: var(--dark);
    border-top: 4px solid var(--primary);
    color: rgba(255, 255, 255, .5);
}

/* Rejilla 5 / 3 / 4, igual que las columnas del footer original */
.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.footer__title {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.footer__title i {
    color: var(--fleet-blue);
    font-size: 1.3em;
}

.footer__brand p {
    max-width: 34em;
    margin-top: 1rem;
    padding-right: 2rem;
    color: rgba(255, 255, 255, .5);
    font-size: .84rem;
    line-height: 1.7;
}

.footer__col h4 {
    margin-bottom: 1.1rem;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer__col ul {
    display: grid;
    gap: .55rem;
}

.footer__col a {
    color: rgba(255, 255, 255, .5);
    font-size: .84rem;
    transition: color .18s ease;
}

.footer__col a:hover {
    color: #fff;
}

.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .84rem;
    line-height: 1.6;
}

.footer__contact i {
    margin-top: .32rem;
    flex: none;
    color: var(--primary);
    font-size: .82rem;
}

.footer__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.6rem;
    padding: .6rem 1.05rem;
    border: 1px solid var(--primary);
    border-radius: var(--r-sm);
    background-color: var(--primary-hover);
    color: #fff !important;
    font-size: .85rem;
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.footer__cta:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, .28);
    color: rgba(255, 255, 255, .5);
    font-size: .8rem;
}

.footer__authors {
    color: rgba(255, 255, 255, .72);
}

/* -------------------------------------------------------------------------- */
/* Aparición al hacer scroll                                                  */
/* -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .plans--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1000px) {
    .hero__inner,
    .split {
        grid-template-columns: 1fr;
    }

    .hero__media {
        max-width: 34rem;
    }

    .hero__shot--alt {
        display: none;
    }

    .hero__media {
        padding-bottom: 0;
    }

    .shot {
        max-width: 34rem;
    }

    .pillars,
    .flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .card--wide {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .plans--3 {
        grid-template-columns: 1fr;
        max-width: 32rem;
    }

    .footer__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2rem;
    }

    .footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    :root {
        --nav-h: 68px;
    }

    .wrap {
        padding-inline: 20px;
    }

    .summary__row {
        grid-template-columns: 1fr;
    }

    .team {
        grid-template-columns: 1fr;
    }

    .plans--4,
    .plans--3 {
        grid-template-columns: 1fr;
        max-width: 32rem;
    }

    .mosaic {
        grid-template-columns: 1fr;
    }

    .tabs {
        display: flex;
        width: 100%;
    }

    .tab {
        flex: 1;
        padding-inline: .5rem;
        font-size: .82rem;
    }

    .sena {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .filters {
        gap: .4rem;
    }

    .filter {
        font-size: .82rem;
        padding: .55rem .8rem;
    }

    .filter i {
        display: none;
    }
}

@media (max-width: 560px) {
    .pillars,
    .flow,
    .footer__grid {
        grid-template-columns: 1fr;
    }

    .card {
        flex-basis: 100%;
    }

    .person {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Impresión                                                                  */
/* -------------------------------------------------------------------------- */
@media print {

    .topbar,
    .filters,
    .reveal {
        display: none !important;
    }

    body {
        color: #000;
    }
}


/* -------------------------------------------------------------------------- */
/* Botón "Volver al inicio" (regresa al portafolio con todos los proyectos)   */
/* -------------------------------------------------------------------------- */
.topbar__inner { justify-content: space-between; gap: 16px; }

.back-home {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--primary-deep);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.back-home:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateX(-2px);
}