/* ==================================================================
   Machala GPS — Planes
   Tres tarjetas claymorphism con conmutador anual/mensual (cambia el
   TEXTO del recuadro de pago, nunca precios). La tarjeta destacada
   (Guard Pro) va en navy con CTA amarillo.
   ================================================================== */

.plans {
    background-color: var(--c-bg);
    padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem);
}

/* ---------- Cabecera ---------- */

.plans__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.plans__intro {
    margin-inline: auto;
}

/* ---------- Conmutador anual/mensual ---------- */

.billing-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1.75rem;
    padding: 5px;
    border-radius: var(--radius-pill);
    background-color: #dfe8f6;
    box-shadow:
        inset 0 2px 5px rgba(16, 42, 102, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}

/* Pulgar deslizante: blanco clay, se mueve con transform (GPU) */
.billing-toggle::before {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc(50% - 10px);
    border-radius: var(--radius-pill);
    background-color: var(--c-surface);
    box-shadow:
        0 2px 6px rgba(16, 42, 102, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: transform var(--dur-base) var(--ease-out);
}

.plans[data-billing="mensual"] .billing-toggle::before {
    transform: translateX(calc(100% + 10px));
}

.billing-toggle__option {
    position: relative;
    padding: 0.6rem 1.6rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--c-text-soft);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-base) ease;
}

.billing-toggle__option[aria-pressed="true"] {
    color: var(--c-navy);
}

.billing-toggle__option:active {
    transform: scale(0.97);
}

/* ---------- Tarjetas: carrusel en móvil, rejilla en escritorio ---------- */

.plans__carousel {
    position: relative;
}

/* Móvil: deslizamiento horizontal manual con snap; las tarjetas
   asoman por el borde para insinuar que hay más contenido */
.plans__grid {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin-inline: calc(var(--container-pad) * -1);
    padding: 1.1rem var(--container-pad) 1.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.plans__grid::-webkit-scrollbar {
    display: none;
}

.plan-card {
    flex: 0 0 min(86%, 21rem);
    scroll-snap-align: center;
}

@media (min-width: 900px) {
    .plans__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.5rem, 3vw, 2rem);
        /* stretch: las 3 tarjetas comparten la misma altura de fila,
           para que queden del mismo tamaño y bien alineadas */
        align-items: stretch;
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }

    .plan-card {
        flex: none;
    }
}

/* ---------- Pista de desplazamiento (solo móvil) ---------- */

.plans__hint {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--c-blue-600);
    box-shadow: var(--shadow-clay-sm);
    pointer-events: none;
    transform: translateY(-50%);
    animation: plans-nudge 1.6s ease-in-out infinite alternate;
    transition: opacity var(--dur-slow) ease;
}

/* Invita a deslizar con un empujón sutil hacia la derecha */
@keyframes plans-nudge {
    from {
        transform: translate(0, -50%);
    }

    to {
        transform: translate(5px, -50%);
    }
}

/* Desaparece con el primer desplazamiento (JS) */
.plans__hint.is-oculto {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .plans__hint {
        animation: none;
    }
}

@media (min-width: 900px) {
    .plans__hint {
        display: none;
    }
}

/* ---------- Tarjeta de plan ---------- */

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 3vw, 2.25rem);
    border-radius: var(--radius-lg);
    background-color: var(--c-surface);
    box-shadow: var(--shadow-clay);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .plan-card:hover {
        transform: translateY(-4px);
        box-shadow:
            0 6px 14px rgba(16, 42, 102, 0.09),
            0 24px 48px rgba(16, 42, 102, 0.16),
            inset 0 2px 0 rgba(255, 255, 255, 0.95),
            inset 0 -3px 6px rgba(16, 42, 102, 0.05);
    }
}

.plan-card__name {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.plan-card__tier {
    margin-top: 0.15rem;
    color: var(--c-text-soft);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* ---------- Insignia "Más popular" ---------- */

.plan-card__badge {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.35rem 1.1rem;
    border-radius: var(--radius-pill);
    background-color: var(--c-yellow-400);
    color: var(--c-navy);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--shadow-clay-yellow);
}

/* ---------- Cómo funciona el pago (SIN precios) ----------
   El cliente pidió no mostrar cifras: el conmutador ya no cambia un
   monto, cambia la EXPLICACIÓN de cada modalidad (anual/mensual). En
   vez de superponer dos paneles de altura fija (no se adaptaba al
   largo del texto), hay un único recuadro cuyo contenido se
   reemplaza por JS al cambiar de modalidad: el recuadro conserva
   altura automática (crece con el texto de cada tarjeta) y el
   cambio se disimula con la técnica de Emil Kowalski "blur enmascara
   transiciones imperfectas" (fade + blur de salida, se reemplaza el
   texto, fade + blur de entrada). Fleet Control no participa del
   conmutador: su recuadro no lleva data-label-*/
data-text-*. */ .plan-card__value {
    margin-top: 1.9rem;
}

.plan-card__value-content {
    transition:
        opacity var(--dur-base) var(--ease-out),
        filter var(--dur-base) var(--ease-out);
}

.plan-card__value-content.is-swapping {
    opacity: 0;
    filter: blur(4px);
}

.plan-card__value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--c-surface);
    color: var(--c-blue-600);
    box-shadow: 0 2px 5px rgba(16, 42, 102, 0.1);
}

.plan-card__value-label {
    display: block;
    margin-top: 0.65rem;
    color: var(--c-blue-600);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plan-card__value-text {
    margin-top: 0.35rem;
    color: var(--c-navy);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ---------- CTA ---------- */

.plan-card__cta {
    margin-top: 1.5rem;
    width: 100%;
}

/* ---------- Lista de funciones ---------- */

.plan-card__lead {
    margin-top: 1.75rem;
    color: var(--c-navy);
    font-size: 0.9375rem;
    font-weight: 700;
}

.plan-card__features {
    margin-top: 0.9rem;
    /* empuja la nota final (.plan-card__extra) hacia el fondo de la
       tarjeta: al estirarse las 3 tarjetas a la misma altura (grid
       align-items: stretch), las notas quedan alineadas entre sí */
    margin-bottom: auto;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.plan-card__features li {
    position: relative;
    padding-left: 1.9rem;
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* Marca de verificación en azul corporativo */
.plan-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.14rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background-color: var(--c-blue-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4 7 11.2l4.8-6' fill='none' stroke='%231e4fcc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 0.72rem;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---------- Beneficio adicional ---------- */

.plan-card__extra {
    margin-top: 1.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background-color: #fff7e2;
    color: #6b5312;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ---------- Tarjeta destacada (Guard Pro) ---------- */

.plan-card--destacado {
    background-color: var(--c-navy);
    box-shadow: var(--shadow-clay-dark);
}

@media (min-width: 900px) {

    /* Sobresale ligeramente del resto, como en Slack */
    .plan-card--destacado {
        margin-top: -0.9rem;
        padding-top: clamp(2.35rem, 3.5vw, 2.85rem);
    }
}

@media (hover: hover) and (pointer: fine) {
    .plan-card--destacado:hover {
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.09),
            inset 0 -4px 10px rgba(0, 0, 0, 0.25),
            0 20px 44px rgba(4, 10, 26, 0.45);
    }
}

.plan-card--destacado .plan-card__name {
    color: #ffffff;
}

.plan-card--destacado .plan-card__tier {
    color: #a9b8da;
}

/* .plan-card--destacado .plan-card__value — recuadro eliminado */

.plan-card--destacado .plan-card__value-icon {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--c-yellow-400);
}

.plan-card--destacado .plan-card__value-label {
    color: var(--c-yellow-400);
}

.plan-card--destacado .plan-card__value-text,
.plan-card--destacado .plan-card__features li {
    color: #c6d2ec;
}

.plan-card--destacado .plan-card__lead {
    color: #ffffff;
}

.plan-card--destacado .plan-card__features li::before {
    background-color: rgba(255, 197, 61, 0.16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4 7 11.2l4.8-6' fill='none' stroke='%23ffc53d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.plan-card--destacado .plan-card__extra {
    background-color: #12224b;
    color: #ffd166;
}

/* ---------- Línea de ayuda ---------- */

.plans__help {
    /* margin-inline auto: los <p> tienen max-width 70ch (base.css) */
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    margin-inline: auto;
    text-align: center;
    font-size: 0.9375rem;
}

.plans__help a {
    color: var(--c-blue-600);
    font-weight: 700;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}