/*
Theme Name: Skating Blob
Theme URI: https://patinajeguadalajara.com/
Author: Club Patinaje Guadalajara
Author URI: https://patinajeguadalajara.com/
Description: Tema de bloques para clubes deportivos, nacido de la landing «Plum Curve» del Club Patinaje Guadalajara. Cada sección es un bloque independiente y configurable (textos, colores, tipografías, imágenes y animaciones): once para la portada y diez formatos de feed para páginas de noticias, alimentados por el loop de WordPress. La portada y la página de noticias vienen incluidas como patrones listos para insertar. Conserva intactos los efectos del diseño: blobs morfantes, hero 3D interactivo, parallax SVG recortado con la cola corporativa, reel escénico de siluetas, carruseles con scroll-snap y mapa cronológico de programas de Grupos-Show.
Version: 2.7.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skating-blob
Tags: one-column, block-patterns, custom-logo, custom-menu, featured-images, translation-ready, sports
*/

/* ==========================================================================
   1. CSS original de la landing (Landing_A4.html)
   Se conserva literalmente para no alterar ninguna animación ni efecto.
   Único cambio: las rutas de las fuentes apuntan a assets/brand/.
   ========================================================================== */

body {
    background-color: #F7F7F5;
    overflow-x: hidden;
}

html {
    scroll-padding-top: 7.5rem;
}

:focus-visible {
    outline: 3px solid #D7FF3F;
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    transform: translateY(-160%);
    background: #ffffff;
    color: #481650;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    font-weight: 700;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Utilidades para mantener la fluidez de curvas extremas requerida por el manual UX */
.curved-bottom {
    border-bottom-left-radius: 50% var(--skb-curve, 8vw);
    border-bottom-right-radius: 50% var(--skb-curve, 8vw);
}
.curved-top {
    border-top-left-radius: 50% var(--skb-curve, 8vw);
    border-top-right-radius: 50% var(--skb-curve, 8vw);
}

/* Ocultar scrollbar de navegadores pero mantener funcionalidad para el carrusel de sedes */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Elemento dinámico interactivo con el scroll del usuario */

.site-shell {
    width: min(100% - 2rem, 80rem);
    margin-inline: auto;
}

.mobile-menu[aria-hidden="true"] {
    display: none;
}

.cookie-banner[hidden],
.cookie-panel[hidden] {
    display: none;
}

@media (min-width: 1024px) {
    .mobile-menu {
        display: none !important;
    }
}

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

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@font-face {
    font-family: 'CPG Inter';
    src: url('assets/brand/Inter-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CPG Poppins';
    src: url('assets/brand/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'CPG Inter', 'Segoe UI', Arial, sans-serif;
}

h1, h2, h3,
nav a, nav button,
button, label,
[class*="uppercase"] {
    font-family: 'CPG Poppins', 'Century Gothic', Arial, sans-serif;
    font-weight: 600;
}

/* Nueva composición Plum Curve: misma estructura, más ritmo y contraste */
.cpg-hero {
    background: linear-gradient(180deg, #ECE8EA 0%, #F7F7F5 72%);
    color: #481650;
    padding-bottom: clamp(7rem, 9vw, 9.5rem);
}

.cpg-hero-stage {
    position: relative;
    background: #481650;
}

.cpg-hero .hero-kicker {
    background: var(--skb-primary, #481650);
    border-color: var(--skb-primary, #481650);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(72, 22, 80, .16);
}

.cpg-hero .hero-copy {
    position: relative;
    z-index: 2;
}

.cpg-hero h1 {
    color: var(--skb-heading-color, #481650) !important;
}

.cpg-hero h1 span {
    color: var(--skb-heading-color, #481650) !important;
    display: inline;
    padding-inline: .06em;
    background: linear-gradient(transparent 62%, var(--skb-accent, #D7FF3F) 62%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.cpg-hero .hero-body-copy {
    color: var(--skb-text-color, #2B2B2B);
}

.cpg-hero .cpg-primary-action {
    box-shadow: 0 12px 30px rgba(72, 22, 80, .18);
}

.cpg-hero .cpg-secondary-action {
    background: #ffffff;
    border-color: #A878B5;
    color: #481650;
    box-shadow: 0 10px 24px rgba(168, 120, 181, .14);
}

.cpg-hero .cpg-secondary-action:hover {
    background: #ECE8EA;
}

.cpg-hero-media {
    isolation: isolate;
}

.cpg-tail {
    position: absolute;
    width: min(40rem, 44vw);
    max-width: none;
    height: auto;
    right: clamp(1rem, 2vw, 2.5rem);
    bottom: calc(-1 * clamp(.75rem, 1.25vw, 1.5rem));
    z-index: 1;
    opacity: .88;
    pointer-events: none;
    transform: none;
}

.cpg-hero-visual {
    filter: drop-shadow(0 26px 35px rgba(72, 22, 80, .22));
}

.cpg-hero-visual > .visual-backdrop {
    background: linear-gradient(135deg, #A878B5, #ECE8EA);
    transform-origin: 44% 62%;
    will-change: transform, border-radius;
    animation: hero-blob-drift calc(7.4s * var(--skb-anim-scale, 1)) ease-in-out -.55s infinite;
}

.hero-frame-layer {
    transform-origin: 50% 70%;
    will-change: transform;
    animation: hero-frame-drift calc(6.8s * var(--skb-anim-scale, 1)) ease-in-out infinite;
}

.hero-badge-layer {
    transform-origin: center;
    will-change: transform;
    animation: hero-badge-drift calc(6.1s * var(--skb-anim-scale, 1)) ease-in-out -1.15s infinite;
}

@keyframes hero-frame-drift {
    0%, 100% { transform: translate3d(0, 0, 28px) rotate(-.25deg); }
    50% { transform: translate3d(0, -11px, 28px) rotate(.45deg); }
}

@keyframes hero-blob-drift {
    0%, 100% {
        transform: translate3d(-8px, 8px, 0) scale(1.01) rotate(-1.3deg);
        border-radius: 62% 38% 58% 42% / 42% 58% 42% 58%;
    }
    50% {
        transform: translate3d(8px, -5px, 0) scale(1.035, .985) rotate(1deg);
        border-radius: 43% 57% 38% 62% / 56% 42% 58% 44%;
    }
}

@keyframes hero-badge-drift {
    0%, 100% { transform: translate3d(0, 0, 60px) rotate(10deg); }
    50% { transform: translate3d(-4px, -15px, 72px) rotate(13deg); }
}

.skb-modalidades .skb-fit > div,
.skb-seguridad .bg-white,
.skb-extraescolares .shadow-md,
.skb-actualidad article,
.skb-actualidad .bg-white,
.skb-patrocinadores article {
    border-color: rgba(168, 120, 181, .34);
    box-shadow: 0 14px 34px rgba(72, 22, 80, .09);
}

.skb-modalidades .skb-fit > div:nth-child(even) {
    background: linear-gradient(180deg, #ffffff, #ECE8EA);
}

.skb-seguridad {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(180deg, #ECE8EA, #F7F7F5);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.skb-seguridad.skb-has-cutout::after {
    content: '';
    position: absolute;
    z-index: 2;
    left: -5%;
    bottom: -1px;
    width: 110%;
    height: var(--skb-cutout, clamp(3.25rem, 6vw, 5.75rem));
    background: var(--skb-primary, #481650);
    clip-path: ellipse(58% 66% at 50% 100%);
    pointer-events: none;
}

.skb-extraescolares {
    background: #ffffff;
}

.skb-sedes {
    background: linear-gradient(135deg, #481650, #2E0E34);
}

.skb-actualidad {
    background: #F7F7F5;
}

.skb-contacto {
    background: linear-gradient(135deg, #481650, #2E0E34);
}

.skb-contacto form {
    box-shadow: 0 24px 55px rgba(46, 14, 52, .3);
}

@media (max-width: 1023px) {
    .cpg-tail {
        right: clamp(1rem, 2vw, 2.5rem);
        bottom: -1rem;
        width: min(36rem, 62vw);
        transform: none;
        opacity: .8;
    }
}

@media (max-width: 640px) {
    .cpg-tail {
        right: 1rem;
        bottom: -.75rem;
        width: min(28rem, 96vw);
        transform: none;
        opacity: .72;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpg-hero-visual > .visual-backdrop,
    .hero-frame-layer,
    .hero-badge-layer {
        animation: none !important;
    }

    .hero-frame-layer {
        transform: translateZ(28px);
    }

    .hero-badge-layer {
        transform: translateZ(60px) rotate(12deg);
    }
}

/* El Club · manifiesto y reel de siluetas */
/* Ventana editorial: la cola acromática abre la fotografía sobre Plum */
.performance-cutout {
    --performance-pad-top: clamp(1rem, 1.75vw, 1.75rem);
    --performance-pad-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #481650;
    color: var(--skb-text-color, #ffffff);
    padding: var(--performance-pad-top) 1rem var(--performance-pad-bottom);
}

.performance-cutout::after {
    content: '';
    position: absolute;
    right: -8rem;
    bottom: -13rem;
    width: 30rem;
    aspect-ratio: 1;
    border: 1px solid rgba(215, 255, 63, .28);
    border-radius: 50%;
    pointer-events: none;
}

.performance-cutout.skb-no-ring::after {
    content: none;
}

.performance-cutout-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 7rem);
}

.performance-cutout-art {
    position: relative;
    min-height: clamp(25rem, 36vw, 32rem);
    margin-left: 0;
}

.performance-tail-svg {
    position: absolute;
    width: min(96rem, 68vw);
    aspect-ratio: 1771 / 778;
    left: -.35rem;
    right: auto;
    top: auto;
    bottom: calc(-1 * var(--performance-pad-bottom) - 1px);
    overflow: visible;
    filter: drop-shadow(0 30px 42px rgba(20, 4, 24, .5));
}

.performance-photo {
    transform: translate3d(0, var(--performance-parallax-y, 0px), 0) scale(1.08);
    transform-origin: center;
    transform-box: fill-box;
    will-change: transform;
}

.performance-copy {
    position: relative;
    z-index: 3;
    max-width: 34rem;
}

.performance-kicker {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--skb-accent, #D7FF3F);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.performance-kicker::before {
    content: '';
    width: 2.5rem;
    height: 2px;
    background: currentColor;
}

.performance-title {
    font-size: clamp(2.4rem, 4.5vw, 4.8rem);
    line-height: .98;
    letter-spacing: -.045em;
    margin-bottom: 1.75rem;
}

.performance-lead {
    max-width: 31rem;
    color: var(--skb-text-color, #ECE8EA);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.72;
}

.performance-principles {
    /* Rejilla centrada: ver la sección 7. */
    --skb-fit-cols: 3;
    --skb-fit-gap: 1rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(236, 232, 234, .25);
}

.performance-principles strong {
    display: block;
    color: var(--skb-accent, #D7FF3F);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.performance-principles span {
    display: block;
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
    line-height: 1.45;
}

@media (max-width: 1023px) {
    .performance-cutout-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .performance-cutout-art {
        min-height: clamp(20rem, 55vw, 31rem);
        margin-left: 0;
    }

    .performance-tail-svg {
        width: min(87rem, 128vw);
        left: -.35rem;
        right: auto;
        bottom: 0;
    }

    .performance-copy {
        max-width: 44rem;
    }
}

@media (max-width: 640px) {
    .performance-cutout {
        --performance-pad-top: 1.5rem;
        --performance-pad-bottom: 2.5rem;
        padding: var(--performance-pad-top) 1rem var(--performance-pad-bottom);
    }

    .performance-cutout-art {
        min-height: 17rem;
        margin-left: 0;
    }

    .performance-tail-svg {
        width: 125vw;
        left: -.35rem;
        right: auto;
        top: auto;
        bottom: 0;
    }

    .performance-principles {
        --skb-fit-cols: 1;
        --skb-fit-gap: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .performance-photo {
        transform: scale(1.08);
        will-change: auto;
    }
}

.club-story {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    z-index: 2;
    background: linear-gradient(180deg, #481650 0%, #481650 12%, #2E0E34 100%);
    color: #ffffff;
    padding: 4.5rem 0 5rem;
}

.club-story::before {
    content: none;
}

.club-story-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 4rem;
    align-items: end;
    position: relative;
    z-index: 3;
}

.club-story-label {
    display: block;
    color: var(--skb-accent, #D7FF3F);
    font-family: 'CPG Poppins', 'Century Gothic', Arial, sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.club-story-title {
    max-width: 12ch;
    color: var(--skb-heading-color, #ffffff);
    font-size: clamp(2.75rem, 5.3vw, 5rem);
    line-height: .99;
    letter-spacing: -.045em;
    margin: 0 0 2rem;
}

.club-story-lead {
    max-width: 45rem;
    color: var(--skb-text-color, #ECE8EA);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.65;
    margin: 0;
}

.club-story-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.5rem;
}

.club-story-value {
    border-top: 2px solid rgba(168, 120, 181, .56);
    padding-top: 1.5rem;
}

.club-story-value:first-child {
    border-color: var(--skb-accent, #D7FF3F);
}

.club-story-value:last-child {
    grid-column: 1 / -1;
}

.club-story-value h3 {
    color: var(--skb-heading-color, #ffffff);
    font-size: 1.35rem;
    line-height: 1.35;
    margin: 0 0 .75rem;
}

.club-story-value p {
    color: var(--skb-text-color, #C9C6C8);
    font-size: .98rem;
    line-height: 1.6;
    margin: 0;
}

.club-reel-shell {
    position: relative;
    z-index: 2;
    width: min(100% - 2rem, 92rem);
    min-height: 31rem;
    margin: 4rem auto 0;
    display: flex;
    align-items: flex-end;
}

.club-story-blob {
    position: absolute;
    width: min(58rem, 72vw);
    height: 27rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%);
    border-radius: 68% 32% 43% 57% / 48% 63% 37% 52%;
    background: linear-gradient(135deg, var(--skb-blob-from, rgba(168, 120, 181, .92)), var(--skb-blob-to, rgba(236, 232, 234, .42)));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    animation: clubBlob calc(12s * var(--skb-anim-scale, 1)) ease-in-out infinite alternate;
}

.club-reel {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.club-reel-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: clubReel calc(46s * var(--skb-anim-scale, 1)) linear infinite;
}

.club-reel.is-paused .club-reel-track {
    animation-play-state: paused;
}

.club-reel-set {
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    padding-right: 2rem;
}

.club-reel-image {
    /* Como en la variante escénica: crece hasta el primer tope que encuentre —su
       tamaño natural, la altura máxima o el ancho máximo— y nunca se amplía. */
    width: auto;
    height: auto;
    max-height: clamp(20rem, 31vw, 29rem);
    max-width: 32rem;
    object-fit: contain;
    object-position: center bottom;
    flex: none;
    filter: drop-shadow(0 18px 18px rgba(15, 4, 17, .3));
}

.club-reel-image.is-group {
    width: auto;
    height: auto;
    max-width: min(46rem, 64vw);
    max-height: 26rem;
}

.club-reel-control {
    position: absolute;
    z-index: 4;
    right: 1rem;
    bottom: 1rem;
    min-height: 3rem;
    padding: .75rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(72, 22, 80, .88);
    color: #ffffff;
    font-family: 'CPG Poppins', 'Century Gothic', Arial, sans-serif;
    font-size: .75rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

@keyframes clubReel {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes clubBlob {
    0% { border-radius: 68% 32% 43% 57% / 48% 63% 37% 52%; transform: translate(-50%, -46%) rotate(-2deg); }
    100% { border-radius: 41% 59% 64% 36% / 62% 39% 61% 38%; transform: translate(-50%, -46%) rotate(2deg); }
}

@media (max-width: 900px) {
    .club-story { padding-top: 6rem; }
    .club-story-copy { grid-template-columns: 1fr; gap: 3rem; }
    .club-story-title { max-width: 15ch; }
    .club-reel-shell { min-height: 24rem; margin-top: 2.5rem; }
    .club-story-blob { width: 46rem; height: 21rem; }
    .club-reel-image { max-height: 22rem; }
    .club-reel-image.is-group { max-width: 39rem; max-height: 21rem; }
}

@media (max-width: 560px) {
    .club-story { padding: 5.5rem 0 3.5rem; }
    .club-story::before { height: 3rem; }
    .club-story-title { font-size: 2.65rem; }
    .club-story-lead { font-size: 1rem; line-height: 1.65; }
    .club-story-values { grid-template-columns: 1fr; gap: 1.5rem; }
    .club-story-value:last-child { grid-column: auto; }
    .club-reel-shell { width: 100%; min-height: 20rem; }
    .club-story-blob { width: 32rem; height: 18rem; }
    .club-reel-image { max-height: 18rem; }
    .club-reel-image.is-group { max-width: 32rem; max-height: 17rem; }
    .club-reel { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .club-reel-track, .club-story-blob { animation: none !important; }
    .club-reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .club-reel-set[aria-hidden="true"] { display: none; }
}

/* Reel escénico 50/50: una silueta por transición */
.club-story-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
    min-height: 48rem;
    position: relative;
    z-index: 3;
}

.club-story-content {
    min-width: 0;
}

.club-story-content .club-story-values {
    margin-top: 3.5rem;
}

.club-story-layout .club-reel-shell {
    width: 100%;
    min-height: var(--skb-stage-height, 43rem);
    margin: 0;
    overflow: visible;
}

.club-story-layout .club-story-blob {
    width: 96%;
    height: 78%;
    left: 52%;
    top: 51%;
    border-radius: 76% 24% 61% 39% / 34% 71% 29% 66%;
    background: linear-gradient(145deg, var(--skb-blob-from, #A878B5) 0%, var(--skb-blob-to, rgba(236, 232, 234, .78)) 100%);
    box-shadow: 0 36px 70px rgba(15, 4, 17, .36), inset -22px -18px 38px rgba(72, 22, 80, .2), inset 18px 14px 26px rgba(255, 255, 255, .18);
    animation: clubBlobStage calc(7s * var(--skb-anim-scale, 1)) cubic-bezier(.45, 0, .25, 1) infinite alternate;
}

.club-story-layout .club-reel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
}

.club-story-layout .club-reel-track,
.club-story-layout .club-reel-set {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    padding: 0;
    animation: none;
}

.club-story-layout .club-reel-image {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 4%;
    /*
     * Cada silueta crece hasta el primer tope que encuentre: su tamaño natural,
     * la altura máxima o el ancho máximo. Antes `height` la estiraba hasta la
     * altura pedida aunque el archivo fuera más pequeño, y una silueta de 400 px
     * se ampliaba a 560 y salía borrosa. Con `height: auto` el tamaño natural es
     * el techo, y los dos máximos solo pueden reducirla.
     */
    width: auto;
    height: auto;
    max-width: var(--skb-silhouette-max-width, 94%);
    max-height: min(
        var(--skb-silhouette-height, 38rem),
        78vh,
        var(--skb-silhouette-max-height, 92%)
    );
    object-fit: contain;
    object-position: center bottom;
    opacity: 0;
    transform: translate3d(58%, 0, 0) scale(.92) rotate(2deg);
    transition: transform .72s cubic-bezier(.2, .8, .2, 1), opacity .52s ease;
    filter: drop-shadow(0 26px 22px rgba(15, 4, 17, .5));
    pointer-events: none;
}

.club-story-layout .club-reel-image.is-active {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1) rotate(0deg);
}

.club-story-layout .club-reel-image.is-leaving {
    opacity: 0;
    transform: translate3d(-158%, 0, 0) scale(.96) rotate(-2deg);
}

.club-story-layout .club-reel-image.is-resetting {
    transition: none !important;
}

.club-story-layout .club-reel-image.is-group {
    bottom: 17%;
    /* Las apaisadas se miden por el ancho, pero también sin pasar del natural. */
    width: auto;
    height: auto;
    max-width: min(var(--skb-group-width, 100%), 100%);
    max-height: var(--skb-group-max-height, 64%);
}

@keyframes clubBlobStage {
    0% {
        border-radius: 76% 24% 61% 39% / 34% 71% 29% 66%;
        transform: translate(-50%, -50%) rotate(-4deg) scale(.96, 1.02);
    }
    48% {
        border-radius: 39% 61% 27% 73% / 67% 31% 69% 33%;
        transform: translate(-48%, -52%) rotate(1deg) scale(1.03, .96);
    }
    100% {
        border-radius: 58% 42% 78% 22% / 26% 62% 38% 74%;
        transform: translate(-52%, -48%) rotate(5deg) scale(.98, 1.04);
    }
}

@media (max-width: 960px) {
    .club-story-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .club-story-layout .club-reel-shell {
        min-height: 36rem;
    }
}

@media (max-width: 560px) {
    .club-story-layout { gap: 2.5rem; }
    .club-story-content .club-story-values { margin-top: 2.5rem; }
    .club-story-layout .club-reel-shell { min-height: 28rem; }
    .club-story-layout .club-reel-image { max-height: min(var(--skb-silhouette-height-mobile, 26rem), var(--skb-silhouette-max-height, 92%)); max-width: 96%; }
    .club-story-layout .club-story-blob { width: 112%; height: 72%; }
}

@media (prefers-reduced-motion: reduce) {
    .club-story-layout .club-reel { overflow: hidden; }
    .club-story-layout .club-reel-image { display: none; transition: none !important; }
    .club-story-layout .club-reel-image.is-active { display: block; }
    .club-reel-control { display: none; }
}

/* Coreografía cronológica · programas de Grupos-Show */
.show-chronicle {
    --show-ink: #210a26;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #ffffff;
    background: #481650;
    padding: clamp(4.5rem, 8vw, 7.5rem) 1rem clamp(4rem, 7vw, 6.5rem);
}

.show-chronicle::before,
.show-chronicle::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.show-chronicle::before {
    z-index: -1;
    width: min(54rem, 72vw);
    aspect-ratio: 1;
    left: -26rem;
    top: -31rem;
    border: clamp(4rem, 8vw, 8rem) solid rgba(168, 120, 181, .17);
    box-shadow: 0 0 0 1px rgba(215, 255, 63, .18);
}

.show-chronicle::after {
    z-index: -1;
    width: 28rem;
    aspect-ratio: 1;
    right: -13rem;
    bottom: -17rem;
    border: 1px solid rgba(215, 255, 63, .28);
}

.show-chronicle-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.show-chronicle-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    color: #D7FF3F;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.show-chronicle-eyebrow::before {
    content: '';
    width: 2.75rem;
    height: 2px;
    background: currentColor;
}

.show-chronicle-title {
    max-width: 50rem;
    margin: 0;
    font-size: clamp(2.75rem, 6vw, 6.25rem);
    line-height: .9;
    letter-spacing: -.06em;
}

.show-chronicle-title span {
    display: block;
    color: #A878B5;
}

.show-chronicle-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: .65rem;
}

.show-stat {
    min-width: 7.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.4rem 2.7rem 1.5rem 2.1rem;
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(10px);
}

.show-stat strong,
.show-stat span {
    display: block;
}

.show-stat strong {
    color: #D7FF3F;
    font-size: 1.45rem;
    line-height: 1;
}

.show-stat span {
    margin-top: .4rem;
    color: #ECE8EA;
    font-size: .7rem;
    line-height: 1.25;
}

.show-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
    min-height: clamp(29rem, 47vw, 42rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 4rem 1.8rem 5rem 2.4rem / 2.8rem 4.5rem 2.3rem 5rem;
    background: linear-gradient(130deg, rgba(255, 255, 255, .08), rgba(46, 14, 52, .72));
    box-shadow: 0 34px 80px rgba(18, 4, 21, .35);
}

.show-stage-visual {
    position: relative;
    min-height: 29rem;
    overflow: hidden;
}

.show-stage-visual::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 7% 8% 4% -8%;
    border-radius: 67% 33% 57% 43% / 42% 64% 36% 58%;
    border: 1px solid rgba(215, 255, 63, .25);
    animation: showOrbitMorph calc(10s * var(--skb-anim-scale, 1)) ease-in-out infinite alternate;
}

.show-stage-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    filter: saturate(.94) contrast(1.04);
    transition: opacity .34s ease, transform .65s cubic-bezier(.2, .78, .2, 1), filter .34s ease;
}

.show-stage-image.is-switching {
    opacity: .18;
    transform: scale(1.1) rotate(.7deg);
    filter: blur(5px) saturate(.7);
}

.show-stage-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 48%, rgba(33, 10, 38, .9) 100%), linear-gradient(0deg, rgba(33, 10, 38, .5), transparent 55%);
    pointer-events: none;
}

.show-stage-year {
    position: absolute;
    z-index: 2;
    left: clamp(1.4rem, 3vw, 3rem);
    bottom: clamp(1rem, 2vw, 2rem);
    color: rgba(255, 255, 255, .9);
    font-size: clamp(4.5rem, 11vw, 10rem);
    font-weight: 900;
    line-height: .72;
    letter-spacing: -.08em;
    text-shadow: 0 18px 30px rgba(20, 4, 24, .45);
}

.show-stage-copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem);
}

.show-stage-index {
    color: #A878B5;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.show-stage-name {
    margin: 1rem 0 1.5rem;
    font-size: clamp(2.5rem, 5vw, 5.25rem);
    line-height: .92;
    letter-spacing: -.055em;
}

.show-stage-mode {
    align-self: flex-start;
    padding: .55rem .9rem;
    border-radius: 999px;
    color: #210a26;
    background: #D7FF3F;
    font-size: .72rem;
    font-weight: 800;
}

.show-stage-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 2rem;
}

.show-stage-result {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.show-stage-result span,
.show-stage-result strong {
    display: block;
}

.show-stage-result span {
    color: #A878B5;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.show-stage-result strong {
    margin-top: .45rem;
    font-size: .95rem;
}

.show-timeline-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.show-timeline-hint {
    color: rgba(255, 255, 255, .66);
    font-size: .78rem;
}

.show-timeline-controls {
    display: flex;
    gap: .65rem;
}

.show-timeline-control {
    display: grid;
    width: 3rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 42% 58% 47% 53% / 58% 44% 56% 42%;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.show-timeline-control:hover,
.show-timeline-control:focus-visible {
    color: #210a26;
    background: #D7FF3F;
    transform: translateY(-2px) rotate(-4deg);
}

.show-timeline-viewport {
    position: relative;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
}

.show-timeline-viewport::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: -3%;
    right: -3%;
    top: 5.25rem;
    height: 7rem;
    border-top: 3px solid rgba(215, 255, 63, .5);
    border-radius: 50%;
    transform: rotate(-1.2deg);
    pointer-events: none;
}

.show-timeline-track {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 1rem max(1rem, calc(50vw - 8rem)) 2rem;
    cursor: grab;
}

.show-timeline-track:active { cursor: grabbing; }
.show-timeline-track::-webkit-scrollbar { display: none; }

.show-program-card {
    --card-tilt: -1.2deg;
    flex: 0 0 clamp(13rem, 18vw, 16rem);
    min-height: 18.5rem;
    overflow: hidden;
    scroll-snap-align: center;
    text-align: left;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 2.8rem 1.25rem 3.4rem 1.8rem / 1.6rem 3rem 1.4rem 3.2rem;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 16px 34px rgba(19, 4, 22, .22);
    transform: translateY(.5rem) rotate(var(--card-tilt));
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.show-program-card:nth-child(3n + 2) { --card-tilt: 1.3deg; transform: translateY(1.15rem) rotate(var(--card-tilt)); }
.show-program-card:nth-child(3n) { --card-tilt: -.35deg; transform: translateY(.1rem) rotate(var(--card-tilt)); }

.show-program-card:hover,
.show-program-card:focus-visible,
.show-program-card[aria-pressed="true"] {
    z-index: 2;
    border-color: #D7FF3F;
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 24px 45px rgba(19, 4, 22, .4);
    transform: translateY(-.4rem) rotate(0deg) scale(1.015);
}

.show-program-card-image {
    position: relative;
    height: 8.75rem;
    overflow: hidden;
    background: #A878B5;
}

.show-program-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.show-program-card:hover img,
.show-program-card[aria-pressed="true"] img { transform: scale(1.08); }

.show-program-card-year {
    position: absolute;
    right: .8rem;
    bottom: .6rem;
    color: #ffffff;
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 3px 12px rgba(20, 4, 24, .65);
}

.show-program-card-body { padding: 1rem 1rem 1.2rem; }

.show-program-card-title {
    display: block;
    min-height: 2.5rem;
    font-size: .94rem;
    font-weight: 800;
    line-height: 1.25;
}

.show-program-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .9rem;
    color: rgba(255, 255, 255, .7);
    font-size: .66rem;
}

.show-program-medal {
    color: #D7FF3F;
    font-weight: 800;
}

@keyframes showOrbitMorph {
    0% { border-radius: 67% 33% 57% 43% / 42% 64% 36% 58%; transform: rotate(-3deg) scale(.98); }
    100% { border-radius: 38% 62% 31% 69% / 64% 37% 63% 36%; transform: rotate(4deg) scale(1.03); }
}

@media (max-width: 900px) {
    .show-chronicle-header { grid-template-columns: 1fr; }
    .show-chronicle-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .show-stage { grid-template-columns: 1fr; }
    .show-stage-visual { min-height: 24rem; }
    .show-stage-copy { padding: 2rem; }
    .show-stage-shade { background: linear-gradient(0deg, rgba(33, 10, 38, .88), transparent 70%); }
}

@media (max-width: 560px) {
    .show-chronicle { padding-inline: 1rem; }
    .show-chronicle-stats { gap: .4rem; }
    .show-stat { min-width: 0; padding: .8rem .6rem; }
    .show-stat strong { font-size: 1.1rem; }
    .show-stage { border-radius: 2.7rem 1.2rem 3.2rem 1.5rem; }
    .show-stage-visual { min-height: 20rem; }
    .show-stage-results { grid-template-columns: 1fr; }
    .show-timeline-hint { max-width: 13rem; }
    .show-program-card { flex-basis: 12.5rem; min-height: 17.5rem; }
    .show-timeline-track { padding-inline: max(1rem, calc(50vw - 6.25rem)); }
}

@media (prefers-reduced-motion: reduce) {
    .show-stage-visual::before { animation: none; }
    .show-stage-image,
    .show-program-card,
    .show-program-card img { transition: none !important; }
}

/* ==========================================================================
   2. Integración WordPress
   Estilos que la landing estática no necesitaba: contenido del editor,
   barra de administración, accesibilidad y clases de alineación del core.
   ========================================================================== */

/* --- Barra de administración -------------------------------------------- */
/* El nav es `position: fixed` y main.js escribe `style.top` al hacer scroll,
   así que desplazamos con `transform` para no pisar ese comportamiento.
   Por debajo de 783px la barra de WP es `absolute` y se va con el scroll. */
@media screen and (min-width: 783px) {
    body.admin-bar #navbar {
        transform: translateY(32px);
    }

    body.admin-bar .site-header {
        top: calc(0.75rem + 32px);
    }
}

/* --- Accesibilidad ------------------------------------------------------- */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    z-index: 100000;
    top: 0.75rem;
    left: 0.75rem;
    width: auto;
    height: auto;
    clip: auto;
    padding: 0.75rem 1rem;
    color: #481650;
    background: #ffffff;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

/* --- Contenido del editor (entradas, páginas, aviso legal) --------------- */
.cpg-prose {
    color: #2B2B2B;
    font-size: 1rem;
    line-height: 1.75;
}

.cpg-prose > * + * {
    margin-top: 1.25em;
}

.cpg-prose h1,
.cpg-prose h2,
.cpg-prose h3,
.cpg-prose h4 {
    color: #2E0E34;
    font-family: 'CPG Poppins', 'Century Gothic', Arial, sans-serif;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.cpg-prose h2 { margin-top: 2.5em; font-size: 1.75rem; font-weight: 800; }
.cpg-prose h3 { margin-top: 2em; font-size: 1.3rem; font-weight: 800; }
.cpg-prose h4 { margin-top: 1.75em; font-size: 1.1rem; font-weight: 800; }

.cpg-prose a {
    color: #481650;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cpg-prose a:hover { color: #A878B5; }
.cpg-prose strong { color: #2E0E34; font-weight: 700; }

.cpg-prose ul,
.cpg-prose ol {
    padding-left: 1.5rem;
}

.cpg-prose ul { list-style: disc; }
.cpg-prose ol { list-style: decimal; }
.cpg-prose li + li { margin-top: 0.4em; }

.cpg-prose blockquote {
    margin-inline: 0;
    padding: 1.25rem 1.5rem;
    border-left: 8px solid #D7FF3F;
    border-radius: 0 1.5rem 1.5rem 0;
    background: #ECE8EA;
    color: #481650;
    font-style: italic;
}

.cpg-prose img,
.cpg-prose iframe,
.cpg-prose video {
    max-width: 100%;
    height: auto;
    border-radius: 1.5rem;
}

.cpg-prose figure { margin-inline: 0; }

.cpg-prose figcaption {
    margin-top: 0.6rem;
    color: #6b6470;
    font-size: 0.8rem;
    text-align: center;
}

.cpg-prose code,
.cpg-prose kbd {
    padding: 0.15em 0.4em;
    border-radius: 0.4rem;
    background: #ECE8EA;
    color: #481650;
    font-size: 0.9em;
}

.cpg-prose pre {
    overflow-x: auto;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: #2E0E34;
    color: #ECE8EA;
}

.cpg-prose pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.cpg-prose table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.cpg-prose th,
.cpg-prose td {
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(168, 120, 181, 0.34);
    text-align: left;
}

.cpg-prose th {
    background: #ECE8EA;
    color: #481650;
}

.cpg-prose hr {
    border: 0;
    border-top: 1px solid rgba(168, 120, 181, 0.34);
}

.cpg-prose dl > div + div { margin-top: 0.75rem; }
.cpg-prose dt { color: #2E0E34; font-weight: 700; }
.cpg-prose dd { margin-left: 0; }

/* --- Clases de alineación y multimedia del core -------------------------- */
.alignleft {
    float: left;
    margin: 0.5rem 1.5rem 1.5rem 0;
}

.alignright {
    float: right;
    margin: 0.5rem 0 1.5rem 1.5rem;
}

.aligncenter {
    display: block;
    margin-inline: auto;
}

.alignwide,
.alignfull {
    max-width: 100%;
}

.wp-caption { max-width: 100%; }
.wp-caption-text { margin-top: 0.6rem; font-size: 0.8rem; text-align: center; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

.gallery-item { margin: 0; }
.gallery-icon img { border-radius: 1rem; }

.sticky .cpg-card-badge { display: inline-flex; }

/* --- Paginación y navegación de entradas -------------------------------- */
.cpg-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: 0.75rem;
    border: 1px solid rgba(168, 120, 181, 0.34);
    border-radius: 999px;
    color: #481650;
    background: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.cpg-pagination .page-numbers:hover,
.cpg-pagination .page-numbers:focus-visible {
    background: #ECE8EA;
    transform: translateY(-2px);
}

.cpg-pagination .page-numbers.current {
    color: #2E0E34;
    background: #D7FF3F;
    border-color: #D7FF3F;
}

.cpg-pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
}

/* ==========================================================================
   3. Capa de bloques
   Ajustes que el editor aplica a cada sección. Se activan mediante clases
   modificadoras (.skb-has-*) que el render solo añade cuando el usuario cambia
   algo: sin ellas, ninguna de estas reglas existe y el diseño original queda
   exactamente como estaba.

   Todas tienen especificidad (0,2,0), suficiente para ganar a las utilidades de
   Tailwind (0,1,0) sin recurrir a !important.
   ========================================================================== */

/* --- Fondo --------------------------------------------------------------- */
.skb-section.skb-has-bg {
    background: var(--skb-bg);
}

.skb-section.skb-bg-none {
    background: none;
}

/* --- Colores ------------------------------------------------------------- */
.skb-section.skb-has-heading-color :is(h1, h2, h3, h4, h5, h6) {
    color: var(--skb-heading-color);
}

.skb-section.skb-has-text-color :is(p, li, dd, figcaption, blockquote) {
    color: var(--skb-text-color);
}

/* El color principal sustituye al ciruela allí donde el marcado usa las
   utilidades de marca de Tailwind. */
.skb-section.skb-has-primary .bg-brand-purple {
    background-color: var(--skb-primary);
}

.skb-section.skb-has-primary .border-brand-purple {
    border-color: var(--skb-primary);
}

/* Los encabezados quedan fuera: su color lo manda «Titulares», que si no
   perdería contra esta regla por tener menos especificidad. */
.skb-section.skb-has-primary :not(h1, h2, h3, h4, h5, h6).text-brand-purple {
    color: var(--skb-primary);
}

/* Y el de acento, al chartreuse. */
.skb-section.skb-has-accent .bg-brand-accent {
    background-color: var(--skb-accent);
}

.skb-section.skb-has-accent .border-brand-accent {
    border-color: var(--skb-accent);
}

.skb-section.skb-has-accent :not(h1, h2, h3, h4, h5, h6).text-brand-accent {
    color: var(--skb-accent);
}

/* --- Tipografía ---------------------------------------------------------- */
.skb-section.skb-has-heading-font :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--skb-heading-font);
}

.skb-section.skb-has-body-font,
.skb-section.skb-has-body-font :is(p, li, dd, span, a, label, input, textarea, select, button) {
    font-family: var(--skb-body-font);
}

/* Los tamaños del diseño son fluidos (clamp con vw) o vienen de utilidades en
   rem, así que no responden al font-size del contenedor. `zoom` es la forma
   sencilla de escalarlos sin reescribir cada regla. Firefox lo admite desde la
   versión 126; en navegadores más antiguos simplemente no se aplica la escala. */
.skb-section.skb-has-heading-scale :is(h1, h2, h3, h4, h5, h6) {
    zoom: var(--skb-heading-scale);
}

.skb-section.skb-has-body-scale :is(p, li, dd, figcaption) {
    zoom: var(--skb-body-scale);
}

/* --- Espaciado ----------------------------------------------------------- */
.skb-section.skb-has-pad-top {
    padding-top: var(--skb-pad-top);
}

.skb-section.skb-has-pad-bottom {
    padding-bottom: var(--skb-pad-bottom);
}

.skb-section.skb-has-max-width .site-shell {
    width: min(100% - 2rem, var(--skb-max-width));
}

.skb-section.skb-flat-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.skb-section.skb-flat-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* --- Animación ----------------------------------------------------------- */
.skb-section.skb-no-anim,
.skb-section.skb-no-anim *,
.skb-section.skb-no-anim *::before,
.skb-section.skb-no-anim *::after {
    animation: none !important;
}

/* Interruptores finos del hero. */
.skb-hero-no-blob-drift .visual-backdrop {
    animation: none !important;
}

.skb-hero-no-badge-drift .hero-badge-layer {
    animation: none !important;
    transform: translateZ(60px) rotate(12deg);
}

/* --- Variantes de forma de la fotografía de "Extraescolares" ------------- */
.skb-photo-rounded {
    border-radius: 2.5rem;
}

.skb-photo-circle {
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

.skb-photo-square {
    border-radius: 0;
}

/* --- Rejillas configurables ----------------------------------------------
   El número de columnas es un ajuste del bloque «Modalidades». Se declara como
   variable porque la rejilla es flex y se centra: ver la sección 7. */
.skb-cards-2,
.skb-cards-3,
.skb-cards-4 {
    --skb-fit-cols: 1;
    --skb-fit-gap: 1.5rem;
}

@media (min-width: 640px) {
    .skb-cards-2,
    .skb-cards-3,
    .skb-cards-4 {
        --skb-fit-cols: 2;
    }
}

@media (min-width: 1024px) {
    .skb-cards-2 { --skb-fit-cols: 2; }
    .skb-cards-3 { --skb-fit-cols: 3; }
    .skb-cards-4 { --skb-fit-cols: 4; }
}

/* --- Editor -------------------------------------------------------------- */
/* Dentro del lienzo del editor las secciones se recortan al ancho del bloque;
   sin esto, los adornos que se salen del marco provocan scroll horizontal. */
.block-editor-writing-flow .skb-section {
    overflow-x: clip;
}

/* --- Aviso visible solo dentro del editor -------------------------------- */
.skb-editor-notice {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid #D7FF3F;
    border-radius: 0.5rem;
    background: #ECE8EA;
    color: #481650;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ==========================================================================
   4. Pie de página
   Los colores venían de utilidades de Tailwind, que no se podían sobreescribir
   desde el Personalizador sin pelear con la especificidad. Ahora se leen de
   variables con el valor original como respaldo: sin configurar nada, el pie se
   ve exactamente igual que antes.
   ========================================================================== */

.skb-footer {
    background-color: var(--skb-footer-bg, #481650);
    color: var(--skb-footer-text, #A878B5);
}

.skb-footer .skb-footer-title,
.skb-footer .skb-footer-strong {
    color: var(--skb-footer-heading, #ffffff);
}

.skb-footer .skb-footer-tagline {
    color: var(--skb-footer-text, #A878B5);
}

.skb-footer .skb-footer-link {
    color: inherit;
}

.skb-footer .skb-footer-link:hover,
.skb-footer .skb-footer-link:focus-visible {
    color: var(--skb-footer-heading, #ffffff);
}

.skb-footer .skb-footer-accent {
    color: var(--skb-footer-accent, #D7FF3F);
}

/* Los desplegables se tiñen con blanco translúcido para que sigan legibles con
   cualquier color de fondo, no solo con el ciruela. */
.skb-footer .skb-footer-panel {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   5. Reel de testimonios
   El modo «automático» es una fila flexible: las tarjetas crecen para repartir
   el ancho disponible y, en cuanto no caben todas con su ancho mínimo, la fila
   pasa a desplazarse. No hay breakpoint: el punto en que se convierte en reel
   depende de cuántos testimonios haya y del ancho mínimo elegido, así que se
   adapta solo al añadir o quitar tarjetas.
   ========================================================================== */

.skb-testimonios-reel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.25rem;
    /* Los avatares sobresalen 2,5 rem por arriba; sin este hueco el desbordamiento
       horizontal los recortaría, porque `overflow-x: auto` también recorta en vertical. */
    padding-top: 3.5rem;
    padding-bottom: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.skb-testimonios-reel::-webkit-scrollbar {
    display: none;
}

.skb-testimonios-reel > * {
    flex: 1 0 var(--skb-testimonial-width, 20rem);
    min-width: var(--skb-testimonial-width, 20rem);
    scroll-snap-align: center;
}

/* En reel se anula el escalonado vertical del diseño en retícula: en una fila
   que se desplaza descolocaría el anclaje y dejaría huecos. */
.skb-testimonios-reel > * {
    margin-top: 0;
}

@media (min-width: 640px) {
    .skb-testimonios-reel {
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .skb-testimonios-reel > * {
        flex-basis: min(var(--skb-testimonial-width, 20rem), 82vw);
        min-width: min(var(--skb-testimonial-width, 20rem), 82vw);
    }
}

/* Flechas de navegación, compartidas con el carrusel de sedes. */
.skb-scroll-nav {
    display: flex;
    gap: 0.75rem;
}

.skb-testimonios .skb-scroll-nav {
    justify-content: center;
    margin-top: 1.5rem;
}

/* ==========================================================================
   6. Color de las transiciones curvas
   La curva redondea la esquina de la sección y por el hueco se ve lo que hay
   detrás. Este marco pinta ahí el color del vecino —arriba el del final de la
   sección anterior, abajo el del principio de la siguiente— para que la
   transición se lea como un corte limpio y no como un salto de color.

   Los dos tramos se reparten al 50 %: la curva ocupa unos 8 vw, muy por debajo
   de la mitad de cualquier sección, así que cada hueco cae siempre en su tramo.
   Ver inc/blocks/curve-colors.php.
   ========================================================================== */

.skb-curve-frame {
    background:
        linear-gradient(
            to bottom,
            var(--skb-curve-top, transparent) 0 50%,
            var(--skb-curve-bottom, transparent) 50% 100%
        );
}

/* El hero ya traía su propio marco con el ciruela escrito a fuego. Ahora el
   color lo pone el marco de fuera, así que este deja de tapar la curva. */
.cpg-hero-stage {
    background: transparent;
}

/* Bordes que dan contra una curva. La línea de 1 px de `border-t` / `border-b`
   marcaba la costura entre dos secciones planas; si al otro lado hay una curva
   no hay costura, y la línea se ve cruzando el hueco de lado a lado. Se empareja
   con .skb-section para ganar a la utilidad de Tailwind por especificidad.
   Ver inc/blocks/curve-colors.php. */

.skb-section.skb-flush-top {
    border-top-width: 0;
}

.skb-section.skb-flush-bottom {
    border-bottom-width: 0;
}

/* ==========================================================================
   7. Rejillas de contenido variable, siempre centradas
   Las secciones cuyo número de elementos cambia (modalidades, pilares,
   principios, testimonios, logotipos, tarjetas de noticias) dejaban la última
   fila pegada a la izquierda cuando no se completaba: cuatro tarjetas en tres
   columnas dejaban una huérfana a un lado y el bloque se veía descuadrado.

   CSS Grid no puede arreglarlo: su `justify-content` mueve las pistas
   completas, no el contenido de una fila, así que la fila incompleta sigue
   alineada a la izquierda. Por eso estas rejillas son flex con `flex-wrap` y
   `justify-content: center`, que sí centra cada fila por separado.

   El ancho de cada elemento se calcula a partir de dos variables, así que la
   separación es un único valor —lo usa a la vez `gap` y el cálculo— y no puede
   descuadrarse. `--skb-fit-cols` es el número de columnas, que cada sección fija
   en sus propios puntos de ruptura.
   ========================================================================== */

.skb-fit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--skb-fit-gap, 1.5rem);
}

.skb-fit > * {
    --skb-fit-span: 1;
    flex: 0 1 calc(
        (100% - (var(--skb-fit-cols, 1) - 1) * var(--skb-fit-gap, 1.5rem))
        / var(--skb-fit-cols, 1) * var(--skb-fit-span)
        + (var(--skb-fit-span) - 1) * var(--skb-fit-gap, 1.5rem)
    );
    min-width: 0;
    max-width: 100%;
}

/* Elemento que ocupa dos columnas. Con una sola columna, `max-width` lo devuelve
   al ancho disponible. */
.skb-fit > .skb-fit-wide {
    --skb-fit-span: 2;
}

/* --- Metodología y seguridad: los pilares -------------------------------- */
.skb-pillars {
    --skb-fit-cols: 1;
    --skb-fit-gap: 2.5rem;
}

@media (min-width: 768px) {
    .skb-pillars { --skb-fit-cols: 3; }
}

/* --- Testimonios en retícula --------------------------------------------- */
.skb-testimonios-grid {
    --skb-fit-cols: 1;
    --skb-fit-gap: 1.5rem;
}

@media (min-width: 640px) {
    .skb-testimonios-grid { --skb-fit-cols: 2; }
}

@media (min-width: 768px) {
    .skb-testimonios-grid { --skb-fit-gap: 2rem; }
}

@media (min-width: 1024px) {
    .skb-testimonios-grid { --skb-fit-cols: 3; }
}

/* --- Actualidad: tarjetas de las últimas entradas ------------------------ */
.skb-news-cards {
    --skb-fit-cols: 1;
    --skb-fit-gap: 1.5rem;
}

@media (min-width: 640px) {
    .skb-news-cards { --skb-fit-cols: 2; }
}

/* --- Patrocinadores: un número de columnas por tamaño de categoría ------- */
.skb-logos-grande,
.skb-logos-mediano,
.skb-logos-pequeno {
    --skb-fit-gap: 0.75rem;
}

.skb-logos-grande { --skb-fit-cols: 1; --skb-fit-gap: 1rem; }
.skb-logos-mediano { --skb-fit-cols: 2; }
.skb-logos-pequeno { --skb-fit-cols: 2; }

@media (min-width: 640px) {
    .skb-logos-grande { --skb-fit-cols: 2; --skb-fit-gap: 1.5rem; }
    .skb-logos-mediano { --skb-fit-cols: 3; --skb-fit-gap: 1.25rem; }
    .skb-logos-pequeno { --skb-fit-cols: 3; --skb-fit-gap: 1rem; }
}

@media (min-width: 1024px) {
    .skb-logos-grande { --skb-fit-cols: 3; }
    .skb-logos-mediano { --skb-fit-cols: 4; }
    .skb-logos-pequeno { --skb-fit-cols: 5; }
}

/* --- Sedes: carrusel de una sola fila ------------------------------------
   Aquí no hay fila incompleta que centrar, solo una fila que puede no llenar el
   ancho. `safe` es imprescindible: sin él, cuando el contenido desborda, el
   centrado deja las primeras tarjetas fuera del alcance del scroll. Los
   navegadores que no entiendan `safe center` descartan la declaración entera y
   se quedan con el comportamiento de siempre, alineado a la izquierda. */
[data-skb-scroll-track] {
    justify-content: safe center;
}