/*
 * La portada de Comunidad (socio/comunidad.js; rediseño del 5 nov 2026, rehecha el 11 nov 2026): sobre la foto de
 * arriba, cuántos días faltan y el tiempo; debajo, la revista de la asociación: una pieza por apartado, de distinto
 * tamaño, con su fotografía y su letra de revista, y el estilo de su local en la silueta de la foto principal, la trama
 * y el adorno del título. Rafa: «premium de verdad, con estilo y que no se salga de la plataforma».
 */

/* #region Sobre la foto: cuántos días faltan y el tiempo */
.comunidad-arriba {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espacio-3) var(--espacio-8);
}

.comunidad-arriba[hidden] {
    display: none;
}

.comunidad-cuenta,
.comunidad-tiempo {
    color: #FFFFFF;
    text-decoration: none;
}

.comunidad-cuenta:hover,
.comunidad-tiempo:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.comunidad-cuenta:focus-visible,
.comunidad-tiempo:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.comunidad-cuenta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--espacio-5);
    min-width: 0;
}

.comunidad-cuenta__antes {
    grid-column: 1;
    color: rgb(255 255 255 / 0.85);
    font-size: 15px;
}

.comunidad-cuenta__dias {
    grid-row: 2 / span 2;
    grid-column: 1;
    font-family: var(--fuente-display);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.95;
}

.comunidad-cuenta__dias small {
    font-size: 0.36em;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Debajo de los días, las horas y los minutos (13 nov 2026), como en Actualidad. */
.comunidad-cuenta__resto {
    display: block;
    margin-top: 0.12em;
    font-size: 0.42em;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.comunidad-cuenta__resto small {
    font-size: 0.6em;
}

.comunidad-cuenta__ya {
    grid-row: 2 / span 2;
    grid-column: 1;
    font-family: var(--fuente-display);
    font-size: clamp(1.75rem, 3vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.comunidad-cuenta strong {
    grid-row: 2;
    grid-column: 2;
    align-self: end;
    font-family: var(--fuente-display);
    font-size: clamp(1.15rem, 1.7vw, 1.7rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.15;
    word-spacing: 0.08em;
}

.comunidad-cuenta > small {
    grid-row: 3;
    grid-column: 2;
    color: rgb(255 255 255 / 0.85);
    font-size: 15px;
}

.comunidad-tiempo {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.comunidad-tiempo .icono {
    width: 40px;
    height: 40px;
    color: #FFD27A;
    stroke-width: 1.5;
}

.comunidad-tiempo strong {
    display: block;
    font-family: var(--fuente-display);
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.comunidad-tiempo small {
    display: block;
    margin-top: 4px;
    color: rgb(255 255 255 / 0.85);
}
/* #endregion */

/* #region La revista: el título, la rejilla y la trama del local */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/assets/fuentes/cormorant-garamond.woff2") format("woff2");
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fuentes/cormorant-garamond-cursiva.woff2") format("woff2");
}

.revista {
    --revista-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --revista-aviso: #D2272F;
    --revista-oro: #E9CB78;
    --revista-adorno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cpath d='M0 7h28M44 7h28' stroke='black' stroke-width='1'/%3E%3Cpath d='M36 2l5 5-5 5-5-5z' fill='black'/%3E%3C/svg%3E");
    position: relative;
    isolation: isolate;
    display: block;
    margin-top: var(--espacio-6, 2rem);
}

.revista-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 0 22px;
    color: var(--rs-texto);
    font-family: var(--revista-serif);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-align: center;
}

.revista-adorno {
    flex: none;
    width: 72px;
    height: 14px;
    background: var(--marca-acento, var(--rs-texto-secundario));
    -webkit-mask: var(--revista-adorno) center / contain no-repeat;
    mask: var(--revista-adorno) center / contain no-repeat;
}

.revista-rejilla {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: minmax(220px, auto);
    gap: 20px;
}
/* #endregion */

/* #region Cada pieza: tarjeta con profundidad */
.tesela {
    --giro-x: 0deg;
    --giro-y: 0deg;
    --tesela-texto: var(--rs-texto);
    --tesela-texto-2: var(--rs-texto-secundario);
    --tesela-antetitulo: var(--marca-acento, var(--rs-texto-secundario));
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--rs-borde-sutil);
    border-radius: 26px;
    background: var(--rs-superficie-1);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 1px 2px rgb(16 20 26 / 0.06), 0 24px 48px -26px rgb(16 20 26 / 0.38);
    color: var(--tesela-texto);
    text-decoration: none;
    transform: perspective(1000px) rotateX(var(--giro-x)) rotateY(var(--giro-y));
    transition: transform 260ms var(--curva, ease), box-shadow 260ms var(--curva, ease);
}

.tesela:hover {
    color: var(--tesela-texto);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 2px 4px rgb(16 20 26 / 0.08), 0 34px 60px -28px rgb(16 20 26 / 0.5);
}

/* El brillo que sigue al ratón. */
.tesela::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(420px circle at var(--brillo-x, 50%) var(--brillo-y, 0%), rgb(255 255 255 / 0.14), transparent 60%);
    opacity: 0;
    transition: opacity 260ms var(--curva, ease);
    pointer-events: none;
}

.tesela:hover::after {
    opacity: 1;
}

.tesela:focus-visible {
    outline: 2px solid var(--marca-acento, currentColor);
    outline-offset: 3px;
}

.tesela__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tesela__antetitulo {
    color: var(--tesela-antetitulo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tesela__aviso {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--revista-aviso);
    box-shadow: 0 4px 10px rgb(210 39 47 / 0.35);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tesela__titular {
    font-family: var(--revista-serif);
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.12;
}

.tesela__fecha {
    color: var(--tesela-texto-2);
    font-size: 14px;
}

.tesela--portada { grid-column: span 8; grid-row: span 2; }
.tesela--fotos { grid-column: span 4; grid-row: span 2; }
.tesela--grupos,
.tesela--marcador,
.tesela--museo { grid-column: span 4; }
.tesela--negocios { grid-column: span 4; }
.tesela--redes { grid-column: span 4; }
/* #endregion */

/* #region Actualidad: la noticia del momento, con su foto en la silueta del arco del local */
.tesela--portada {
    display: grid;
    grid-template-columns: clamp(220px, 24vw, 330px) minmax(0, 1fr);
    gap: 0;
    padding: 0;
}

.tesela--portada:not(:has(.portal)) {
    grid-template-columns: minmax(0, 1fr);
}

.tesela--portada .tesela__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: clamp(24px, 3vw, 40px);
}

.tesela--portada .tesela__titular {
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.04;
}

.tesela__lista {
    display: grid;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--rs-borde-sutil);
    color: var(--tesela-texto);
    font-size: 15px;
    line-height: 1.35;
}

.tesela__lista span {
    display: grid;
    gap: 2px;
}

.tesela__lista small {
    color: var(--tesela-antetitulo);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/*
 * El portal del local (socio/portal-local.js): la foto vista a través de la arquitectura de su local, en dos capas.
 * La foto se mueve al revés que el arco con --px y --py (el ratón, o el desplazamiento en el móvil): profundidad.
 */
.portal {
    position: relative;
    display: block;
    align-self: center;
    margin: 18px 0 18px 18px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 12px;
    background: var(--rs-superficie-3);
    box-shadow: 0 2px 4px rgb(16 20 26 / 0.12), 0 22px 40px -18px rgb(16 20 26 / 0.55);
}

.portal--sede {
    border-radius: 22px;
}

.portal__capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.portal__foto {
    transform: translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -18px)) scale(1.12);
    transform-box: view-box;
    transform-origin: 150px 200px;
    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.portal__foto--color {
    fill: var(--marca-principal);
}

.portal__capa--marco {
    transform: translate(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 6px)) scale(1.04);
    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Las bombillas del arco de luces de la falla titilan, unas después de otras. */
.portal__luz--1 {
    animation: portal-titilar 3.2s ease-in-out infinite;
}

.portal__luz--2 {
    animation: portal-titilar 3.2s ease-in-out 1.6s infinite;
}

@keyframes portal-titilar {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
/* #endregion */

/* #region Fotos: el mosaico con su pie de cristal */
.tesela--fotos {
    padding: 0;
    background: #0E1116;
}

.tesela__mosaico {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 3px;
}

.tesela__mosaico--2,
.tesela__mosaico--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.6fr 1fr;
}

.tesela__foto {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    transition: transform 900ms var(--curva, ease);
}

.tesela__mosaico--2 .tesela__foto--0,
.tesela__mosaico--3 .tesela__foto--0 {
    grid-column: 1 / -1;
}

.tesela__mosaico--2 .tesela__foto--1 {
    grid-column: 1 / -1;
}

.tesela--fotos:hover .tesela__foto {
    transform: scale(1.04);
}

.tesela__pie-cristal {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 6px;
    margin: auto 14px 14px;
    padding: 14px 16px 16px;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 18px;
    background: rgb(14 17 22 / 0.42);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    color: #FFFFFF;
}

.tesela__pie-cristal .tesela__antetitulo {
    color: rgb(255 255 255 / 0.78);
}

.tesela__pie-cristal strong {
    font-family: var(--revista-serif);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.1;
}
/* #endregion */

/* #region Grupos y museo: sobre el color de la asociación */
.tesela--grupos,
.tesela--museo {
    --tesela-texto: #FFFFFF;
    --tesela-texto-2: rgb(255 255 255 / 0.72);
    --tesela-antetitulo: rgb(255 255 255 / 0.72);
    border-color: transparent;
    background:
        radial-gradient(130% 110% at 0% 0%, oklch(from var(--marca-principal) 0.5 min(c, 0.16) h), transparent 60%),
        linear-gradient(160deg, oklch(from var(--marca-principal) 0.34 min(c, 0.12) h), oklch(from var(--marca-principal) 0.2 min(c, 0.07) h));
}

.tesela__cita {
    position: relative;
    display: -webkit-box;
    overflow: hidden;
    padding-top: 18px;
    font-family: var(--revista-serif);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.tesela__cita::before {
    content: "“";
    position: absolute;
    top: -14px;
    left: -2px;
    color: rgb(255 255 255 / 0.28);
    font-size: 4.2rem;
    font-style: normal;
    line-height: 1;
}

.tesela__firma {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    color: var(--tesela-texto-2);
    font-size: 14px;
    font-weight: 600;
}

.tesela__caras {
    display: flex;
}

.tesela__caras span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: -8px;
    border: 2px solid oklch(from var(--marca-principal) 0.26 min(c, 0.08) h);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
}

.tesela__caras span:first-child {
    margin-left: 0;
}

/* El museo: su fachada de noche, la misma de la entrada del museo, llenando la pieza. */
.tesela--museo {
    grid-row: span 2;
    padding: 0;
    background: #0B1020;
}

.tesela--museo {
    justify-content: center;
}

.tesela--museo .museo-fachada3d {
    padding-bottom: 54px;
}

.tesela__salas {
    position: absolute;
    bottom: 14px;
    left: 50%;
    z-index: 2;
    padding: 6px 14px;
    transform: translateX(-50%);
    border: 1px solid rgb(233 203 120 / 0.4);
    border-radius: 999px;
    background: rgb(11 16 32 / 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--revista-oro);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
/* #endregion */

/* #region Competiciones: como un marcador deportivo */
.tesela--marcador {
    --tesela-texto: #FFFFFF;
    --tesela-texto-2: rgb(255 255 255 / 0.66);
    --tesela-antetitulo: #FFC84A;
    border-color: transparent;
    background:
        radial-gradient(120% 90% at 100% 0%, rgb(255 200 74 / 0.12), transparent 55%),
        linear-gradient(160deg, #161B23, #07090C);
}

.tesela__trofeo {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 64px;
    height: 64px;
    color: #FFC84A;
    opacity: 0.22;
}

.tesela--marcador .tesela__titular {
    max-width: calc(100% - 64px);
    font-family: var(--fuente-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tesela__valor {
    margin-top: auto;
    color: #FFC84A;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.tesela__valor--cifra {
    font-family: var(--fuente-display);
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
    text-shadow: 0 0 28px rgb(255 200 74 / 0.35);
}
/* #endregion */

/* #region Negocios y redes */
.tesela__logos {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: auto;
}

.tesela__logo {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 76px;
}

.tesela__logo img,
.tesela__logo b {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    padding: 8px;
    border: 1px solid var(--rs-borde-sutil);
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 8px 18px -10px rgb(16 20 26 / 0.45);
    object-fit: contain;
}

.tesela__logo b {
    padding: 0;
    background: var(--marca-boton);
    color: var(--marca-sobre-boton, #FFFFFF);
    font-family: var(--fuente-display);
    font-size: 18px;
}

.tesela__logo small {
    width: 100%;
    overflow: hidden;
    color: var(--tesela-texto-2);
    font-size: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tesela__redes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.tesela__red {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--rs-borde-sutil);
    border-radius: 999px;
    background: color-mix(in srgb, var(--marca-principal) 8%, var(--rs-superficie-1));
    font-size: 14px;
    font-weight: 600;
}

.tesela__red .icono {
    width: 18px;
    height: 18px;
    color: var(--marca-acento, currentColor);
}
/* #endregion */

/* #region El estilo de cada local: la silueta de la foto, la trama y el adorno */
/* Una filà o comparsa mora: arco de herradura, lazo de ocho puntas y su estrella. */
.revista--moro {
    --revista-adorno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cpath d='M0 7h26M46 7h26' stroke='black' stroke-width='1'/%3E%3Crect x='31' y='2' width='10' height='10' fill='black'/%3E%3Crect x='31' y='2' width='10' height='10' fill='black' transform='rotate(45 36 7)'/%3E%3C/svg%3E");
}


/* Una filà cristiana: arco apuntado, celosía de rombos y su cruz. */
.revista--cristiano {
    --revista-adorno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cpath d='M0 7h27M45 7h27' stroke='black' stroke-width='1'/%3E%3Cpath d='M34 0h4l-1 5 5-1v4l-5-1 1 5h-4l1-5-5 1V4l5 1z' fill='black' transform='translate(0 1)'/%3E%3C/svg%3E");
}


/* Una falla u hoguera: arco de luces de medio punto, azulejo valenciano y su flor. */
.revista--falla {
    --revista-adorno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cpath d='M0 7h27M45 7h27' stroke='black' stroke-width='1'/%3E%3Ccircle cx='36' cy='7' r='2' fill='black'/%3E%3Cpath d='M36 0c2 2 2 3 0 4.5-2-1.5-2-2.5 0-4.5zM36 14c2-2 2-3 0-4.5-2 1.5-2 2.5 0 4.5zM29 7c2-2 3-2 4.5 0-1.5 2-2.5 2-4.5 0zM43 7c-2-2-3-2-4.5 0 1.5 2 2.5 2 4.5 0z' fill='black'/%3E%3C/svg%3E");
}


/* #endregion */

/* #region En la tableta y en el móvil */
@media (max-width: 1100px) {
    .revista-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tesela--portada,
    .tesela--negocios {
        grid-column: span 2;
    }

    .tesela--portada {
        grid-row: span 2;
    }

    .tesela--fotos,
    .tesela--grupos,
    .tesela--marcador,
    .tesela--museo,
    .tesela--redes {
        grid-column: span 1;
        grid-row: span 1;
    }

    .tesela--fotos {
        min-height: 320px;
    }
}

@media (max-width: 640px) {
    .revista-rejilla {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 16px;
    }

    .tesela--portada,
    .tesela--fotos,
    .tesela--grupos,
    .tesela--marcador,
    .tesela--museo,
    .tesela--negocios,
    .tesela--redes {
        grid-column: auto;
        grid-row: auto;
    }

    .tesela {
        padding: 20px;
        border-radius: 22px;
    }

    .tesela--portada {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    .portal {
        order: -1;
        justify-self: center;
        width: min(80%, 300px);
        margin: 18px 0 0;
    }

    .tesela--portada .tesela__cuerpo {
        padding: 20px 20px 22px;
    }

    .tesela--portada .tesela__titular {
        font-size: 1.9rem;
    }

    .tesela--fotos {
        min-height: 340px;
        padding: 0;
    }

    .tesela--grupos,
    .tesela--marcador {
        min-height: 200px;
    }

    .tesela--museo {
        min-height: 380px;
    }

    .revista-adorno {
        width: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tesela,
    .tesela::after,
    .portal__foto,
    .portal__capa--marco,
    .portal__luz--1,
    .portal__luz--2,
    .tesela__foto {
        transition: none;
        animation: none;
    }
}
/* #endregion */