/* ============================================================
   Sección: TWO PLATFORMS  (pieza reutilizable — ver ADR-0006)
   Contenido FIJO (mensaje de marca). Portado fiel de la v1. Namespaceado a mano.
   Panel oscuro con glow; cada card define su color de marca en --pf-* local.
   ============================================================ */

.two-platforms {
    padding-block: var(--section-y);
}

/* Panel oscuro redondeado: el fondo negro NO llega a los bordes de la pantalla,
   respeta el padding lateral global igual que el resto de la landing. */
.two-platforms__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-10), 4vw, var(--space-16)) clamp(var(--space-6), 3vw, var(--space-12));
    border-radius: var(--radius-xl);
    background: var(--color-surface-dark); /* 0F1117 */
}

/* Glow celeste difuso en la esquina superior derecha */
.two-platforms__panel::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 55%;
    height: 90%;
    background: radial-gradient(ellipse closest-side, rgba(0, 184, 230, 0.16) 0%, transparent 100%);
    pointer-events: none;
}

/* el contenido va por encima del glow */
.two-platforms__panel > * {
    position: relative;
    z-index: 1;
}

/* ---------- Encabezado ---------- */
.two-platforms__eyebrow {
    text-align: center;
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-caption);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.two-platforms__headline {
    margin-top: var(--space-4);
    text-align: center;
    font-family: var(--font-display);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: -0.02em;
    color: var(--color-white);
}

/* ---------- Grid de cards ---------- */
.two-platforms__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    /* tope de ancho: sin esto, en pantallas grandes cada card se estira y la
       descripción queda en líneas larguísimas (incómodas de leer). */
    max-width: 1080px;
    margin-top: var(--space-12);
    margin-inline: auto;
}

/* Cada variante define su color de marca acá y el resto de la card lo hereda. */
.two-platforms__card--xlp {
    --pf-color: var(--color-primary);
    --pf-tint: rgba(0, 184, 230, 0.12);
    --pf-tint-hover: rgba(0, 184, 230, 0.22);
}
.two-platforms__card--zap {
    --pf-color: var(--color-accent);
    --pf-tint: rgba(229, 0, 126, 0.14);
    --pf-tint-hover: rgba(229, 0, 126, 0.24);
}

.two-platforms__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(var(--space-6), 2vw, var(--space-8));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.025);
}

.two-platforms__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
}

.two-platforms__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--pf-tint);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: 0.625rem; /* 10px */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pf-color);
    white-space: nowrap;
}

.two-platforms__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pf-color);
}

.two-platforms__card-title {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: var(--fs-h3);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-white);
}

.two-platforms__desc {
    margin-top: var(--space-6);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-neutral-400); /* 9CA3AF */
}

.two-platforms__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--pf-tint);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    color: var(--pf-color);
    transition: background var(--transition);
}

.two-platforms__cta:hover {
    background: var(--pf-tint-hover);
}

.two-platforms__arrow {
    transition: transform var(--transition);
}

.two-platforms__cta:hover .two-platforms__arrow {
    transform: translateX(3px);
}

/* ---------- Cierre ---------- */
.two-platforms__footnote {
    margin-top: var(--space-10);
    text-align: center;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-lg);
    color: var(--color-white);
}

.two-platforms__word--xlp {
    color: var(--color-primary);
}
.two-platforms__word--zap {
    color: var(--color-accent);
}

/* ---------- Responsive ---------- */
/* Laptop (1024–1280): letra de las cards un poco más chica para que no se vean
   gigantes en notebooks. */
@media (max-width: 1280px) {
    .two-platforms__card-title {
        font-size: var(--fs-h4); /* 24px, era fs-h3 ~30px */
    }
    .two-platforms__desc {
        margin-top: var(--space-5);
        font-size: var(--fs-small);
    }
    .two-platforms__card {
        padding: var(--space-6);
    }
}

/* Abajo de 900 las dos cards no respiran: las apilamos. */
@media (max-width: 900px) {
    .two-platforms__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mobile: el panel oscuro va de lado a lado (full-bleed) pero conserva su padding
   interno, así el texto no se pega al borde. */
@media (max-width: 640px) {
    .two-platforms {
        --page-padding-x: 0;
        padding-block: 0; /* pega el panel al de arriba/abajo: sin blanco entre colores */
    }
    .two-platforms__panel {
        border-radius: 0;
    }
}

/* El badge y el título compiten por el ancho en cards angostas. */
@media (max-width: 480px) {
    .two-platforms__card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .two-platforms__badge {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .two-platforms__arrow {
        transition: none;
    }
    .two-platforms__cta:hover .two-platforms__arrow {
        transform: none;
    }
}