/* Viller Academy — piezas decorativas
   La página se sostiene sin fotografía: marcos, luz, brillos y transiciones. */

/* Ornamento de laurel del logotipo, en trazo dorado */
.laurel {
    position: absolute;
    width: 240px;
    aspect-ratio: 1 / 2.2;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 260' fill='none' stroke='%23c9a063' stroke-width='1.4'%3E%3Cpath d='M60 8 v244'/%3E%3Cpath d='M60 40 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3Cpath d='M60 80 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3Cpath d='M60 120 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3Cpath d='M60 160 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3Cpath d='M60 200 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3Cg transform='translate(120,0) scale(-1,1)'%3E%3Cpath d='M60 60 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3Cpath d='M60 100 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3Cpath d='M60 140 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3Cpath d='M60 180 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3Cpath d='M60 220 c-26 -4 -40 -22 -42 -40 20 -2 38 12 42 40z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .2;
    pointer-events: none;
}
.laurel--izq { left: -70px; top: 50%; transform: translateY(-50%); }
.laurel--der { right: -70px; top: 50%; transform: translateY(-50%) scaleX(-1); }

/* Portada: capas de luz en lugar de fotografía */
.portada {
    background:
        radial-gradient(120% 90% at 78% 6%, rgba(201,160,99,.28) 0%, rgba(201,160,99,0) 55%),
        radial-gradient(90% 70% at 6% 100%, rgba(201,160,99,.13) 0%, rgba(201,160,99,0) 60%),
        linear-gradient(160deg, #16203a 0%, #101829 55%, #0d1422 100%);
}
.portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201,160,99,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,160,99,.06) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(75% 75% at 25% 40%, #000 0%, transparent 78%);
    mask-image: radial-gradient(75% 75% at 25% 40%, #000 0%, transparent 78%);
    pointer-events: none;
}
.portada__texto::before {
    content: "";
    display: block;
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, var(--dorado-claro), transparent);
    margin-bottom: 26px;
}

/* ------------------------------------------------------------
   Portada con vídeo tríptico (1600x900 = 3 paneles de 533 px)
   Escritorio: los tres · Tablet: dos · Móvil: el central
   ------------------------------------------------------------ */
.portada--video {
    min-height: min(88vh, 780px);
    display: flex;
    align-items: center;
    padding-block: clamp(80px, 10vw, 120px);
}
.portada--video::before { opacity: .35; }

.portada__pelicula {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.portada__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El encuadre se desliza al cambiar de tamaño, no salta */
    object-position: 50% 50%;
    transition: object-position 1.1s cubic-bezier(.22,.7,.25,1), transform 1.1s cubic-bezier(.22,.7,.25,1);
    transform: scale(1.02);
    filter: saturate(.78) contrast(1.04) brightness(.92);
}
/* Velo de marca: el vídeo queda por debajo del navy y el texto siempre se lee */
.portada__velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13,20,34,.94) 0%, rgba(13,20,34,.78) 42%, rgba(13,20,34,.55) 100%),
        radial-gradient(120% 90% at 80% 6%, rgba(201,160,99,.22) 0%, transparent 58%);
}
.portada--video .contenedor { position: relative; z-index: 2; }
.portada--video .portada__texto { max-width: 620px; }

/* Tablet: se recorta un lateral y quedan dos paneles */
@media (max-width: 1024px) {
    .portada__video {
        object-position: 22% 50%;
        transform: scale(1.06);
    }
    .portada__velo {
        background:
            linear-gradient(180deg, rgba(13,20,34,.80) 0%, rgba(13,20,34,.90) 60%, rgba(13,20,34,.96) 100%),
            radial-gradient(120% 80% at 75% 4%, rgba(201,160,99,.2) 0%, transparent 60%);
    }
}

/* Móvil: un único panel, el central */
@media (max-width: 620px) {
    .portada--video { min-height: 74vh; }
    .portada__video {
        object-position: 50% 46%;
        transform: scale(1.12);
    }
    .portada__velo {
        background:
            linear-gradient(180deg, rgba(13,20,34,.72) 0%, rgba(13,20,34,.90) 55%, rgba(13,20,34,.97) 100%);
    }
}

/* Medallón de marca: sustituye a la fotografía de bloque */
.medallon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 4 / 5;
    padding: 40px 32px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(201,160,99,.16), transparent 60%),
        linear-gradient(160deg, #16203a, #0f1727);
    border: 1px solid rgba(201,160,99,.42);
    border-radius: var(--radio);
    overflow: hidden;
}
.medallon::before {
    content: "";
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(201,160,99,.26);
    border-radius: var(--radio);
}
.medallon > * { position: relative; z-index: 1; }
.medallon__va {
    font-family: var(--serif);
    font-size: clamp(4.5rem, 11vw, 7rem);
    line-height: .9;
    letter-spacing: .04em;
    background: linear-gradient(150deg, #e8cfa4 0%, #b08542 45%, #f2e0bd 58%, #a97f3c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.medallon__nombre {
    font-family: var(--serif);
    font-size: 1.7rem;
    letter-spacing: .22em;
    color: var(--blanco);
    text-transform: uppercase;
    margin-top: 16px;
}
.medallon__sub {
    font-size: .64rem;
    letter-spacing: .4em;
    color: var(--dorado-claro);
    text-transform: uppercase;
    margin-top: 9px;
}
.medallon__claim {
    font-size: .64rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-top: 28px;
}
.medallon__brillo {
    position: absolute;
    top: -60%;
    left: -35%;
    width: 55%;
    height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent);
    transform: rotate(12deg);
    animation: pasada 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes pasada {
    0%, 70% { left: -35%; }
    100% { left: 120%; }
}

/* Banda de claims con separadores */
.banda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    overflow: hidden;
}
.banda > div {
    padding: 34px 26px;
    text-align: center;
    border-right: 1px solid var(--linea);
}
.banda > div:last-child { border-right: 0; }
.banda__cifra {
    font-family: var(--serif);
    font-size: 1.9rem;
    color: var(--dorado);
    line-height: 1.15;
}
.banda__texto {
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-top: 8px;
}

/* Cita destacada */
.cita {
    position: relative;
    padding: 40px 20px 40px 66px;
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2.6vw, 1.95rem);
    line-height: 1.35;
    color: var(--navy);
}
.cita::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: 2px;
    font-family: var(--serif);
    font-size: 6rem;
    line-height: 1;
    color: var(--dorado-suave);
}
.cita cite {
    display: block;
    margin-top: 18px;
    font-family: var(--sans);
    font-style: normal;
    font-size: .74rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

/* Separador ornamental */
.rombo {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    margin-block: 6px 34px;
}
.rombo::before, .rombo::after {
    content: "";
    height: 1px;
    width: min(140px, 22vw);
    background: linear-gradient(90deg, transparent, var(--dorado-suave));
}
.rombo::after { background: linear-gradient(90deg, var(--dorado-suave), transparent); }
.rombo i {
    width: 7px;
    height: 7px;
    background: var(--dorado);
    transform: rotate(45deg);
}

/* Tarjeta numerada */
.paso {
    position: relative;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 32px 30px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
}
.paso::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--dorado), transparent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s ease;
}
.paso:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(19,28,51,.10);
    border-color: var(--dorado-suave);
}
.paso:hover::before { transform: scaleY(1); }
.paso__num {
    font-family: var(--serif);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--dorado-suave);
    margin-bottom: 10px;
}
.paso h3 { margin-bottom: .4em; }
.paso p { color: var(--texto-suave); font-size: .95rem; margin: 0; }

/* Panel oscuro con marco (para bloques destacados) */
.panel-oscuro {
    position: relative;
    background: linear-gradient(160deg, #16203a, #0f1727);
    color: rgba(255,255,255,.82);
    border: 1px solid rgba(201,160,99,.35);
    border-radius: var(--radio);
    padding: clamp(34px, 5vw, 56px);
    overflow: hidden;
}
.panel-oscuro h2, .panel-oscuro h3 { color: var(--blanco); }
.panel-oscuro .antetitulo { color: var(--dorado-claro); }
.panel-oscuro::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(201,160,99,.2);
    border-radius: var(--radio);
    pointer-events: none;
}
.panel-oscuro > * { position: relative; }

/* Hueco reservado para la fotografía que llegue */
.hueco-foto {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background:
        repeating-linear-gradient(135deg, rgba(201,160,99,.05) 0 12px, transparent 12px 24px),
        var(--crema);
}
.hueco-foto::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(201,160,99,.3);
    border-radius: var(--radio);
}

/* Cabecera de tarjeta de curso sin fotografía */
.curso__imagen--marca {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(120% 110% at 50% 0%, rgba(201,160,99,.18), transparent 62%),
        linear-gradient(160deg, #16203a, #0f1727);
    overflow: hidden;
}
.curso__imagen--marca::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(201,160,99,.28);
    border-radius: var(--radio);
}
.curso__imagen--marca span {
    font-family: var(--serif);
    font-size: 3.2rem;
    letter-spacing: .06em;
    background: linear-gradient(150deg, #e8cfa4, #b08542 50%, #f2e0bd 62%, #a97f3c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Reseñas de Google en la página */
#google-resenas[hidden] { display: none; }
.gr__resumen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding: 22px 28px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}
.gr__nota {
    font-family: var(--serif);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--navy);
}
.gr__total {
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.gr__estrellas { color: var(--dorado); font-size: 1.1rem; letter-spacing: .16em; }

.gr__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}
.gr__ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 26px 24px;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
}
.gr__ficha:hover {
    transform: translateY(-4px);
    border-color: var(--dorado-suave);
    box-shadow: 0 18px 40px rgba(19,28,51,.09);
}
.gr__ficha::after {
    content: "\201C";
    position: absolute;
    top: 6px;
    right: 18px;
    font-family: var(--serif);
    font-size: 3.4rem;
    line-height: 1;
    color: var(--dorado-suave);
    opacity: .5;
}
.gr__cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gr__cabeza img,
.gr__inicial {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.gr__inicial {
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #16203a, #0f1727);
    color: var(--dorado-claro);
    font-family: var(--serif);
    font-size: 1.2rem;
}
.gr__autor { font-weight: 500; color: var(--navy); font-size: .96rem; line-height: 1.2; }
.gr__fecha { font-size: .74rem; color: var(--texto-suave); margin-top: 2px; }
.gr__texto {
    font-size: .93rem;
    line-height: 1.6;
    color: var(--texto-suave);
    margin: 10px 0 0;
    white-space: pre-wrap;
}
.gr__mas {
    align-self: flex-start;
    margin-top: 10px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dorado);
}
.gr__mas:hover { color: var(--navy); }
.gr__fuente {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.gr__fuente svg { color: var(--navy); }

/* Pestaña de reseñas de Google, lateral izquierdo */
.resena {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(calc(-100% + 52px));
    z-index: 78;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 14px 14px;
    background: linear-gradient(160deg, #16203a, #0f1727);
    color: var(--dorado-claro);
    border: 1px solid var(--dorado);
    border-left: 0;
    border-radius: 0 var(--radio) var(--radio) 0;
    box-shadow: 0 0 0 2px rgba(201,160,99,.18), 0 12px 30px rgba(19,28,51,.32);
    text-decoration: none;
    transition: transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s, border-color .45s;
}
.resena:hover, .resena:focus-visible {
    transform: translateY(-50%) translateX(0);
    color: var(--dorado-claro);
    border-color: var(--dorado-claro);
    box-shadow: 0 0 0 3px rgba(201,160,99,.32), 0 16px 40px rgba(19,28,51,.42);
}
.resena__g {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--crema);
    color: var(--navy);
    box-shadow: inset 0 2px 5px rgba(19,28,51,.2);
}
.resena__cuerpo { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.resena__nota {
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--blanco);
}
.resena__estrellas { font-size: .82rem; letter-spacing: .12em; color: var(--dorado); }
.resena__pie {
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    margin-top: 4px;
}

@media (max-width: 900px) {
    .resena {
        top: auto;
        bottom: 22px;
        transform: translateX(calc(-100% + 46px));
        padding: 10px 14px 10px 10px;
    }
    .resena:hover, .resena:focus-visible { transform: translateX(0); }
    .resena__nota { font-size: 1.2rem; }
}
@media (max-width: 620px) {
    .resena { bottom: 16px; }
}

/* Captación (opt-in) que sube desde abajo a los 15 s */
.optin {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 85;
    width: min(420px, calc(100vw - 44px));
    background: linear-gradient(160deg, #16203a, #0f1727);
    color: rgba(255,255,255,.82);
    border: 1px solid rgba(201,160,99,.45);
    border-radius: var(--radio);
    box-shadow: 0 20px 50px rgba(19,28,51,.42);
    overflow: hidden;
    transform: translateY(140%);
    opacity: 0;
    transition: transform .7s cubic-bezier(.2,.8,.25,1), opacity .5s ease;
}
.optin[hidden] { display: none; }
.optin.visible { transform: none; opacity: 1; }
.optin::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(201,160,99,.2);
    border-radius: var(--radio);
    pointer-events: none;
}
.optin__cuerpo { position: relative; padding: 30px 28px 26px; }
.optin h3 {
    color: var(--blanco);
    font-size: 1.35rem;
    margin-bottom: .5em;
}
.optin__texto { font-size: .9rem; margin-bottom: 18px; }
.optin__form { display: flex; gap: 8px; flex-wrap: wrap; }
.optin__form input[type="email"] {
    flex: 1 1 190px;
    min-width: 0;
    font: inherit;
    font-size: .95rem;
    padding: 13px 14px;
    color: var(--blanco);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(201,160,99,.35);
    border-radius: var(--radio);
}
.optin__form input[type="email"]::placeholder { color: rgba(255,255,255,.42); }
.optin__form input[type="email"]:focus {
    outline: none;
    border-color: var(--dorado-claro);
    background: rgba(255,255,255,.1);
}
.optin__form .boton { flex: 0 0 auto; padding-inline: 24px; }
.optin__casilla {
    margin-top: 14px;
    font-size: .78rem;
    color: rgba(255,255,255,.6);
}
.optin__casilla a { color: var(--dorado-claro); }
.optin__aviso {
    margin: 12px 0 0;
    font-size: .85rem;
    color: var(--dorado-claro);
    min-height: 1.2em;
}
.optin__cerrar {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    background: none;
    border: 0;
    color: rgba(255,255,255,.5);
    font-size: 1.5rem;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
}
.optin__cerrar:hover { color: var(--dorado-claro); }
.optin .laurel { opacity: .12; width: 180px; right: -50px; }

@media (max-width: 620px) {
    .optin { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .optin__cuerpo { padding: 26px 22px 22px; }
    .optin .laurel { display: none; }
}

/* Aparición al hacer scroll */
.aparece {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .aparece { opacity: 1; transform: none; transition: none; }
    .medallon__brillo { animation: none; }
}
@media (max-width: 780px) {
    .laurel { display: none; }
    .banda > div { border-right: 0; border-bottom: 1px solid var(--linea); }
    .banda > div:last-child { border-bottom: 0; }
}

/* Diploma / certificado */
.diploma {
    position: relative;
    background: linear-gradient(160deg, #fbf8f3, #f6f0e7);
    border: 2px solid var(--dorado);
    border-radius: var(--radio);
    padding: clamp(34px, 5vw, 60px);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(19, 28, 51, .10);
}
.diploma__marco {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(176, 133, 66, .45);
    border-radius: var(--radio);
    pointer-events: none;
}
.diploma .laurel { opacity: .16; width: 200px; }
.diploma__cuerpo { position: relative; text-align: center; }
.diploma__marca { margin-bottom: 26px; }
.diploma__va {
    display: block;
    font-family: var(--serif);
    font-size: 3.4rem;
    line-height: 1;
    background: linear-gradient(150deg, #c9a063, #8f6a2f 55%, #d8b67c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.diploma__nombre {
    display: block;
    font-family: var(--serif);
    font-size: 1.5rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--navy);
    margin-top: 8px;
}
.diploma__sub {
    display: block;
    font-size: .62rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--dorado);
    margin-top: 6px;
}
.diploma__intro { color: var(--texto-suave); font-size: .92rem; margin: 0; }
.diploma__alumno {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--navy);
    margin: .3em 0 .5em;
}
.diploma__curso {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    color: var(--dorado);
    margin: .3em 0 .6em;
}
.diploma__datos { font-size: .88rem; color: var(--texto-suave); }
.diploma__firma {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--navy);
    margin-bottom: 26px;
}
.diploma__firma span {
    display: block;
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-top: 6px;
}
.diploma__codigo {
    font-size: .74rem;
    letter-spacing: .1em;
    color: var(--texto-suave);
    margin: 0;
}

@media print {
    .cabecera, .pie, .wasap, .resena, .optin, .cookies, .no-imprimir, .migas { display: none !important; }
    body { background: #fff; }
    .seccion { padding-block: 0; }
    .diploma { box-shadow: none; break-inside: avoid; }
}

/* Ficha de curso: lema y valores */
.curso__lema {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-style: italic;
    color: var(--dorado);
    max-width: 34ch;
    margin-top: .8em;
}
.valores {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.valores li {
    position: relative;
    padding: 16px 10px 16px 20px;
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--navy);
    border-left: 1px solid var(--dorado);
    margin: 0;
}

/* ------------------------------------------------------------
   Aviso de cookies. Los tres botones al mismo nivel: mismo
   tamaño, mismo peso y misma prominencia (criterio de la AEPD).
   ------------------------------------------------------------ */
.ck {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 95;
    padding: 16px;
    background: rgba(13, 20, 34, .55);
    backdrop-filter: blur(3px);
    animation: ck-entra .45s ease both;
}
.ck[hidden] { display: none; }
@keyframes ck-entra { from { opacity: 0; } to { opacity: 1; } }

.ck__caja {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(160deg, #16203a, #0f1727);
    color: rgba(255, 255, 255, .82);
    border: 1px solid rgba(201, 160, 99, .45);
    border-radius: var(--radio);
    box-shadow: 0 24px 60px rgba(19, 28, 51, .5);
    padding: 26px 28px 22px;
    animation: ck-sube .5s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes ck-sube { from { transform: translateY(30px); } to { transform: none; } }

.ck__titulo {
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--blanco);
    margin: 0 0 .5em;
}
.ck__texto p { font-size: .88rem; line-height: 1.6; margin: 0 0 .7em; }
.ck__texto a { color: var(--dorado-claro); text-decoration: underline; }

.ck__opciones {
    display: grid;
    gap: 12px;
    margin: 18px 0 4px;
    padding: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(201, 160, 99, .22);
    border-radius: var(--radio);
}
.ck__opciones[hidden] { display: none; }
.ck__opcion {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .84rem;
    line-height: 1.5;
    cursor: pointer;
}
.ck__opcion input { margin-top: 4px; accent-color: var(--dorado); width: 17px; height: 17px; }
.ck__opcion input:disabled { opacity: .6; cursor: not-allowed; }
.ck__opcion strong { color: var(--blanco); }

/* Los cuatro botones, idénticos en tamaño y peso */
.ck__botones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.ck__boton {
    flex: 1 1 0;
    min-width: 150px;
    font-family: var(--sans);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 14px 18px;
    background: transparent;
    color: var(--blanco);
    border: 1px solid var(--dorado);
    border-radius: var(--radio);
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
}
.ck__boton:hover, .ck__boton:focus-visible {
    background: var(--dorado);
    color: var(--navy);
}
/* «Aceptar todas» va relleno, pero del mismo tamaño y peso que los demás */
.ck__boton--si { background: var(--dorado); color: var(--navy); }
.ck__boton--si:hover, .ck__boton--si:focus-visible { background: var(--dorado-claro); border-color: var(--dorado-claro); }
.ck__boton[hidden] { display: none; }

/* Hueco de un vídeo bloqueado por falta de consentimiento */
.ck-bloqueado {
    display: grid;
    place-items: center;
    gap: 14px;
    text-align: center;
    aspect-ratio: 16 / 9;
    padding: 24px;
    margin-top: 12px;
    background:
        repeating-linear-gradient(135deg, rgba(201,160,99,.05) 0 12px, transparent 12px 24px),
        var(--crema);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}
.ck-bloqueado p { margin: 0; font-size: .88rem; color: var(--texto-suave); max-width: 46ch; }
.ck-bloqueado .boton { padding: 11px 22px; font-size: .74rem; }

@media (max-width: 620px) {
    .ck { padding: 10px; }
    .ck__caja { padding: 22px 20px 18px; max-height: 82vh; overflow-y: auto; }
    .ck__boton { flex: 1 1 100%; }
}

/* Cabecera de curso con fotografía fundida por la derecha */
.interior--foto {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
}
.interior--foto .contenedor { position: relative; z-index: 2; }
.interior--foto .migas,
.interior--foto .antetitulo,
.interior--foto h1,
.interior--foto > .contenedor > p { max-width: 58%; }

.interior__foto {
    position: absolute;
    inset: 0 0 0 auto;
    width: 62%;
    background-size: cover;
    background-position: center 32%;
    /* Se funde con el crema del fondo por la izquierda y por abajo */
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 62%),
        linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 62%),
        linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    opacity: .95;
}
/* Velo del color de la sección, para que el texto siempre se lea */
.interior--foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--crema) 0%, var(--crema) 30%, rgba(246,240,231,.55) 52%, rgba(246,240,231,0) 78%);
    pointer-events: none;
}

@media (max-width: 900px) {
    .interior--foto { min-height: 0; padding-bottom: 200px; }
    .interior--foto .migas,
    .interior--foto .antetitulo,
    .interior--foto h1,
    .interior--foto > .contenedor > p { max-width: none; }
    .interior__foto {
        width: 100%;
        inset: auto 0 0 0;
        height: 300px;
        background-position: center 28%;
        transition: background-position-y .15s linear;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }
    .interior--foto::after {
        background: linear-gradient(180deg, var(--crema) 0%, var(--crema) 45%, rgba(246,240,231,0) 75%);
    }
}