/* Alcatel — «un toque de color».
   El One Touch Easy de 1998 era sencillo y de colores: la portada es un campo de color que se cambia
   con un toque en la paleta (radio + :has, sin JavaScript). --al-c es el color; --al-ink, el texto sobre él. */

.cv--alcatel {
    --al-c: #00a9e0;
    --al-ink: #04202c;
    --al-key: #ffffff;
    --al-key-ink: #06212e;
    --cv-bg: var(--al-c);
    --cv-ink: var(--al-ink);
    --cv-muted: color-mix(in srgb, var(--al-ink) 74%, var(--al-c));
    --cv-hint: var(--cv-muted);
    --cv-font-display: 'Rubik', system-ui, sans-serif;
    --cv-font-body: 'Rubik', system-ui, sans-serif;
    color: var(--al-ink);
    background: var(--al-c);
    transition: background-color 0.6s var(--cv-ease), color 0.6s var(--cv-ease);
}

/* Paleta: cada color con su tinta legible (contraste ≥ 4,5:1 sobre el color) */
.cv--alcatel:has(#cv-al-c-lima:checked) { --al-c: #b5e61d; --al-ink: #1d2600; }
.cv--alcatel:has(#cv-al-c-mandarina:checked) { --al-c: #ff8a1f; --al-ink: #2b1400; }
.cv--alcatel:has(#cv-al-c-frambuesa:checked) { --al-c: #ff3d7f; --al-ink: #2b0011; }
.cv--alcatel:has(#cv-al-c-violeta:checked) { --al-c: #8f6bff; --al-ink: #120533; }

.cv--alcatel ::selection {
    color: var(--al-c);
    background: var(--al-ink);
}

/* —— Fondo: plástico brillante, como una carcasa —— */
.cv-al-gloss {
    inset: 0;
    background:
        radial-gradient(60% 50% at 18% 12%, rgba(255, 255, 255, 0.42), transparent 70%),
        radial-gradient(50% 60% at 92% 96%, rgba(0, 0, 0, 0.14), transparent 70%);
}

.cv-al-grain {
    inset: 0;
    opacity: 0.18;
    background-image: radial-gradient(rgba(255, 255, 255, 0.5) 0.7px, transparent 1px);
    background-size: 5px 5px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
    mask-image: linear-gradient(180deg, #000, transparent 75%);
}

/* —— Composición de cartel, alineada a la izquierda —— */
.cv--al-poster .cv__stage {
    justify-items: stretch;
    text-align: left;
}

.cv--al-poster .cv__copy {
    align-items: stretch;
    width: 100%;
}

.cv-al-word {
    margin-left: -0.05em;
    font-size: clamp(4.4rem, min(19vw, 30vh), 17rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.045em;
    color: var(--al-ink);
    transform: translateX(calc(var(--p) * -3vw));
}

.cv--alcatel .cv-ch {
    animation: cv-al-drop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc((var(--d) + var(--i) * var(--step)) * 1ms);
}

@keyframes cv-al-drop {
    from {
        opacity: 0;
        transform: translate3d(0, -0.35em, 0) scale(0.92);
    }
}

.cv-al-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: end;
    margin-top: clamp(18px, 4vh, 40px);
}

.cv--alcatel .cv__lead {
    max-width: 26ch;
    margin: 0;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--al-ink);
}

/* —— La paleta —— */
.cv-al-picker {
    margin: clamp(18px, 3vh, 28px) 0 0;
    padding: 0;
    border: 0;
}

.cv-al-picker legend {
    max-width: 38ch;
    margin-bottom: 12px;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--cv-muted);
}

.cv-al-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cv-al-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cv-al-swatch {
    --sw: #00a9e0;
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--sw);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.55),
        0 2px 0 rgba(0, 0, 0, 0.16),
        0 8px 16px -8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: cv-pop 0.7s var(--cv-ease) both;
    animation-delay: calc(1000ms + var(--i) * 70ms);
}

.cv-al-swatch--lima { --sw: #b5e61d; }
.cv-al-swatch--mandarina { --sw: #ff8a1f; }
.cv-al-swatch--frambuesa { --sw: #ff3d7f; }
.cv-al-swatch--violeta { --sw: #8f6bff; }

.cv-al-swatch:hover {
    transform: translateY(-3px);
}

.cv-al-radio:checked + .cv-al-swatch {
    box-shadow:
        0 0 0 3px var(--al-c),
        0 0 0 6px var(--al-ink),
        0 8px 16px -8px rgba(0, 0, 0, 0.4);
    transform: scale(1.06);
}

.cv-al-radio:focus-visible + .cv-al-swatch {
    outline: 3px dashed var(--al-ink);
    outline-offset: 6px;
}

/* —— Las teclas de la serie V3 —— */
.cv-al-keypad {
    pointer-events: auto;
    transform: translateY(calc(var(--p) * -2vh));
}

.cv-al-keypad ol {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-al-key {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name go"
        "sub go";
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
    padding: clamp(12px, 1.8vh, 18px) clamp(18px, 2vw, 26px);
    color: var(--al-key-ink);
    text-decoration: none;
    background: var(--al-key);
    border-radius: 20px;
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.18),
        0 14px 28px -16px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    animation: cv-rise 0.8s var(--cv-ease) both;
    animation-delay: calc(1100ms + var(--i) * 90ms);
}

.cv-al-key__name {
    grid-area: name;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cv-al-key__sub {
    grid-area: sub;
    font-size: 0.92rem;
    font-weight: 500;
    color: #3d5763;
}

.cv-al-key__go {
    grid-area: go;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-weight: 700;
    color: var(--al-ink);
    background: var(--al-c);
    transition: background-color 0.6s var(--cv-ease), transform 0.3s var(--cv-ease);
}

.cv-al-key:hover {
    transform: translateY(-2px);
    box-shadow:
        0 5px 0 rgba(0, 0, 0, 0.18),
        0 18px 32px -16px rgba(0, 0, 0, 0.5);
}

.cv-al-key:hover .cv-al-key__go {
    transform: translateX(3px);
}

/* Pulsada: baja como una tecla de verdad */
.cv-al-key:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.2),
        0 6px 14px -10px rgba(0, 0, 0, 0.4);
}

.cv-al-key:focus-visible {
    outline: 3px solid var(--al-ink);
    outline-offset: 3px;
}

/* —— Pie —— */
.cv-al-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 22px;
    margin-top: clamp(16px, 3.4vh, 32px);
    padding-top: 14px;
    border-top: 2px solid color-mix(in srgb, var(--al-ink) 22%, transparent);
}

.cv--alcatel .cv__meta {
    margin: 0;
    color: var(--cv-muted);
}

.cv--alcatel .cv__stats {
    margin: 0;
    color: var(--cv-muted);
}

.cv--alcatel .cv__stats strong,
.cv--alcatel .cv__stat--latest strong {
    color: var(--al-ink);
}

@media (max-width: 900px) {
    .cv--al-poster .cv__stage {
        text-align: left;
        justify-items: stretch;
    }

    .cv-al-word {
        font-size: clamp(4rem, 23vw, 8rem);
    }

    .cv-al-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .cv-al-swatches {
        gap: 10px;
    }

    .cv-al-swatch {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-al-word,
    .cv-al-keypad {
        transform: none;
    }

    .cv--alcatel {
        transition: none;
    }
}