/*
 * La pantalla principal del socio (rediseño del 5 nov 2026, docs/diseno.md, «La portada del socio»).
 *
 * Arriba, las fotos de su asociación a todo lo ancho, el saludo muy grande, su próxima cita y el carnet como un
 * objeto; debajo, sin cajas: el aire y unas líneas finas ordenan, y la caja se reserva a lo que es un objeto de
 * verdad (el carnet, un cartel). El color sale siempre de lo que ha elegido la asociación.
 *
 * Solo la carga plantillas/socio/mi-carnet.php.
 */

/* #region Las medidas de la pantalla */
.app-socio--portada {
    --ancho-pagina: min(1520px, 100% - clamp(32px, 7vw, 160px));
}

.contenido-socio--mi-carnet {
    width: auto;
    gap: 0;
    padding: 0;
    /* Los carteles llegan hasta el borde; con barra de desplazamiento, 100vw se pasa un poco. */
    overflow-x: clip;
    /* Su color sale al momento: lo que espera a sus datos es lo de dentro (región siguiente). */
    opacity: 1;
    animation: none;
}

.contenido-socio--mi-carnet > .carnet-sin-socio {
    margin-top: var(--espacio-8);
}
/* #endregion */

/* #region Al abrir: lo de dentro, junto y en su sitio, nunca a trozos (mi-carnet.js) */
.portada-socio__dentro,
.inicio {
    transition: opacity 0.25s ease-out;
}

/* Si el JS fallase, aparece igual a los 4 s (como en base.css). */
.portada-socio:not(.portada-socio--lista) .portada-socio__dentro,
.inicio:not(.inicio--listo) {
    opacity: 0;
    animation: pantalla-aparece 0.2s ease-out 4s forwards;
}

/* La tarjeta entra al salir, no mientras nadie la ve. */
.portada-socio:not(.portada-socio--lista) .carnet-tarjeta {
    animation: none;
}
/* #endregion */

/* #region La portada: sus fotos */
.portada-socio {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: min(80vh, 900px);
    overflow: hidden;
    /* Mientras llega la foto, su tono oscuro: el fondo de «sin fotos», solo cuando se sabe que no hay ninguna. */
    background: var(--portada-tinta);
    color: #FFFFFF;
}

.portada-socio--sin-foto {
    background:
        repeating-radial-gradient(circle at 78% 60%, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 14px),
        radial-gradient(70rem 50rem at 72% 30%, oklch(from var(--marca-principal) 0.42 0.15 h), transparent 70%),
        linear-gradient(140deg, oklch(from var(--marca-principal) 0.24 0.09 h), var(--portada-tinta));
}

.portada-socio__fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Sin ninguna foto: su escudo en grande, como una marca de agua. */
.portada-socio__escudo img {
    position: absolute;
    top: -14%;
    right: -6%;
    width: 64%;
    max-width: 1000px;
    opacity: 0.14;
    filter: saturate(0.6);
    mix-blend-mode: screen;
}

.portada-socio:not(.portada-socio--sin-foto) .portada-socio__escudo {
    display: none;
}

.portada-socio__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    transition: opacity 1400ms ease;
}

.portada-socio__foto--activa {
    opacity: 1;
}

/* La primera, enseguida: el fundido largo es para cuando cambian. */
.portada-socio__foto--primera {
    transition-duration: 350ms;
}

/* El texto se lee sobre cualquier foto; y abajo, se funde con la página en oscuro. */
.portada-socio__velo {
    position: absolute;
    inset: 0;
}

.portada-socio--con-foto .portada-socio__velo {
    background:
        linear-gradient(90deg, oklch(from var(--portada-tinta) l c h / 0.94), oklch(from var(--portada-tinta) l c h / 0.62) 46%, oklch(from var(--portada-tinta) l c h / 0.16) 78%),
        linear-gradient(180deg, rgb(0 0 0 / 0.5), transparent 24%, transparent 58%, oklch(from var(--portada-tinta) l c h / 0.9));
}

:root:not([data-theme="light"]) .portada-socio::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 150px;
    background: linear-gradient(180deg, transparent, var(--rs-fondo));
}
/* #endregion */

/* #region La portada: el saludo y su cita */
.portada-socio__dentro {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 620px);
    align-items: end;
    gap: 72px;
    width: var(--ancho-pagina);
    margin-inline: auto;
    padding-block: calc(var(--alto-superior) + var(--espacio-8)) 84px;
}

.portada-socio__texto {
    container-type: inline-size;
    min-width: 0;
}

/* Se mide con su columna, no con la pantalla: un nombre largo nunca se mete debajo del carnet. */
.portada-socio__saludo {
    margin: 0 0 0 -0.05em;
    overflow-wrap: break-word;
    color: inherit;
    font-family: var(--fuente-display);
    font-size: clamp(3rem, 15.5cqi, 9rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgb(0 0 0 / 0.35);
}

.portada-socio__cita {
    margin-top: clamp(28px, 3vw, 52px);
}

.portada-socio__cita p {
    margin: 0;
}

.portada-socio__cuando {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Siempre sobre la foto oscura: claro también en el tema claro. */
    color: oklch(from var(--tono-2) 0.86 min(c, 0.14) h);
    font-size: 15px;
    font-weight: 600;
}

.portada-socio__cuando::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

/* Ya ha empezado: el punto verde de lo que está en directo. */
.portada-socio__cuando--ahora::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rs-exito);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rs-exito) 28%, transparent);
}

.portada-socio__cita .portada-socio__titulo {
    margin-top: 12px;
    font-family: var(--fuente-display);
    font-size: clamp(1.6rem, 2.5vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.portada-socio__cita .portada-socio__detalle {
    margin-top: 10px;
    color: rgb(255 255 255 / 0.86);
    font-size: clamp(0.95rem, 1.05vw, 1.15rem);
}

.portada-socio__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3) 26px;
    margin-top: 28px;
}

.boton-portada {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 28px;
    border-radius: var(--radio-pildora);
    background: #FFFFFF;
    color: var(--portada-tinta);
    font-size: 16px;
    font-weight: 650;
    text-decoration: none;
    transition: transform var(--duracion-hover) var(--curva);
}

.boton-portada:hover {
    color: var(--portada-tinta);
    text-decoration: none;
    transform: translateY(-2px);
}

.boton-portada:focus-visible,
.portada-socio__enlace:focus-visible,
.portada-socio__puerta:focus-visible,
.portada-familia__persona:focus-visible,
.portada-socio__marca:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.portada-socio__enlace {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.92;
}

.portada-socio__enlace:hover {
    color: #FFFFFF;
    text-decoration: none;
    opacity: 1;
}
/* #endregion */

/* #region La portada: el carnet, encima, con su peso */
.portada-socio__carnet {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    min-width: 0;
}

.portada-socio .carnet-tarjeta {
    max-width: none;
}

.portada-socio__bajo-carnet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-top: var(--espacio-3);
}

.portada-socio__puerta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: var(--espacio-2) 0;
    border: 0;
    background: none;
    color: #FFFFFF;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.portada-socio__puerta:hover {
    opacity: 0.85;
}

/* Sin código no hay nada que enseñar. */
.portada-socio__carnet:has(#carnet-qr-tarjeta[hidden]) .portada-socio__puerta {
    display: none;
}

.portada-familia {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-left: auto;
}

.portada-familia__persona {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 40px;
    padding: 4px 16px 4px 4px;
    border: 0;
    border-radius: var(--radio-pildora);
    background: rgb(255 255 255 / 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

.portada-familia__persona:hover {
    background: rgb(255 255 255 / 0.24);
}

.portada-familia__persona[aria-pressed="true"] {
    background: #FFFFFF;
    color: var(--portada-tinta);
}

/* Su cara (en la puerta se reconoce a cada uno por ella); sin foto, la foto se quita y quedan sus iniciales. */
.portada-familia__cara {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    background: oklch(from var(--marca-principal) 0.4 0.13 h);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
}

.portada-familia__cara img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portada-socio .carnet-viendo {
    background: var(--rs-aviso);
    color: #17120A;
}

.portada-socio .carnet-ayuda-estado p {
    color: #FFFFFF;
}
/* #endregion */

/* #region La portada: qué foto va y su pie */
.portada-socio__indicador {
    position: absolute;
    bottom: 24px;
    left: calc((100% - var(--ancho-pagina)) / 2);
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
}

/* Siempre guarda su sitio: las fotos llegan después y no pueden empujar lo de abajo. */
.portada-socio__indicador:empty {
    visibility: hidden;
}

.portada-socio__marcas {
    display: flex;
    gap: 6px;
}

.portada-socio__marca {
    position: relative;
    width: 38px;
    height: 3px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.3);
    cursor: pointer;
}

/* Más fácil de acertar que la rayita. */
.portada-socio__marca::before {
    content: "";
    position: absolute;
    inset: -12px 0;
}

.portada-socio__marca::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    background: #FFFFFF;
}

.portada-socio__marca--hecha::after {
    width: 100%;
}

.portada-socio__marca--activa::after {
    animation: portada-llena 6s linear both;
}

@keyframes portada-llena {
    to {
        width: 100%;
    }
}

.portada-socio__pie {
    margin: 0;
    color: rgb(255 255 255 / 0.78);
    font-size: 13px;
    font-weight: 500;
}
/* #endregion */

/* #region Lo de debajo: secciones sin cajas */
.inicio {
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 3.6vw, 64px);
    width: var(--ancho-pagina);
    margin-inline: auto;
    padding-block: var(--espacio-5) var(--espacio-16);
}

.inicio > [hidden] {
    display: none;
}

.inicio__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-4);
    margin-bottom: clamp(20px, 2vw, 32px);
}

.inicio__titulo {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.7rem, 2.4vw, 2.75rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.inicio__bloque > .inicio__titulo {
    margin-bottom: clamp(20px, 2vw, 32px);
}

.inicio__enlace {
    flex: none;
    color: var(--rs-texto-secundario);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.inicio__enlace:hover {
    color: var(--rs-texto);
    text-decoration: none;
}
/* #endregion */

/* #region Sus puestos y su foto */
.inicio__atajos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3) var(--espacio-8);
    padding-bottom: var(--espacio-5);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.inicio__atajos:not(:has(> :not([hidden]))) {
    display: none;
}

.atajos-puestos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-6);
}

.atajos-puestos__titulo {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 500;
}

.atajos-puestos__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-6);
}

.atajos-puestos__puesto {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 32px;
    color: var(--rs-texto);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--duracion-hover) var(--curva);
}

.atajos-puestos__puesto:hover {
    color: var(--marca-acento);
    text-decoration: none;
}

.atajos-puestos__puesto .icono {
    width: 19px;
    height: 19px;
}

/* Premio por venir (migración 0370): una franja por cena con premio, como lo que avisa un puesto. */
.carnet-premios {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--espacio-2);
}

/* Lo que avisa un puesto (el encargado: «Cena del viernes: 14 personas · Ver la lista»): una franja de un toque. */
.atajos-puestos__aviso {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 44px;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    color: var(--rs-texto);
    font-weight: 600;
    text-decoration: none;
}

.atajos-puestos__aviso--aviso {
    background: var(--rs-aviso-suave);
    color: var(--rs-aviso-texto);
}

.atajos-puestos__aviso:hover {
    color: var(--marca-acento);
    text-decoration: none;
}

.atajos-puestos__aviso .icono {
    flex: none;
    width: 19px;
    height: 19px;
}

/* «Pon tu foto»: una línea, sin caja, con su botón. */
.inicio__atajos .foto-propuesta {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    margin-left: auto;
}

.inicio__atajos .foto-propuesta__textos h2 {
    font-size: var(--texto-base);
}

.inicio__atajos .foto-propuesta__textos p {
    font-size: var(--texto-etiqueta);
}
/* #endregion */

/* #region Lo de hoy, debajo de la portada */
.inicio .carnet-grupo:not(:has(> .carnet-grupo__contenido > :not([hidden]))) {
    display: none;
}
/* #endregion */

/* #region Te falta: lo más urgente, en una frase y con su botón */
.te-falta__urgente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-4) clamp(18px, 2vw, 28px);
    padding: clamp(22px, 2.4vw, 36px) clamp(22px, 3vw, 44px);
    border-radius: var(--radio-xl);
    /* Lo que corre prisa, de su color; lo que va mal, en rojo. Oscuros, para que el blanco se lea con cualquier color. */
    background: linear-gradient(100deg, oklch(from var(--marca-principal) 0.42 min(c, 0.14) h), oklch(from var(--marca-principal) 0.27 min(c, 0.09) h));
    color: #FFFFFF;
}

.te-falta--peligro .te-falta__urgente {
    background: linear-gradient(100deg, oklch(from var(--rs-peligro-solido) 0.42 0.14 h), oklch(from var(--rs-peligro-solido) 0.27 0.09 h));
}

.te-falta__textos {
    display: grid;
    flex: 1 1 26rem;
    gap: var(--espacio-1);
    min-width: 0;
}

.te-falta__de,
.te-falta__detalle {
    margin: 0;
    color: rgb(255 255 255 / 0.82);
    font-size: 15px;
    font-weight: 500;
}

.te-falta__frase {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.5rem, 2.4vw, 2.5rem);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.12;
    text-wrap: balance;
}

.te-falta__ir {
    flex: none;
}

.te-falta__mas {
    flex: none;
    padding: var(--espacio-2) 0;
    border: 0;
    background: none;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.te-falta__mas:hover {
    color: rgb(255 255 255 / 0.8);
}

.te-falta__mas[hidden] {
    display: none;
}

.te-falta__mas:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* Las otras, debajo: el primer verbo manda y el resto, en pequeño. */
.te-falta__otras {
    margin: var(--espacio-2) 0 0;
    padding: 0;
    list-style: none;
}

.te-falta__otras[hidden] {
    display: none;
}

.te-falta__cosa {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-4);
    padding: var(--espacio-4) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
    color: var(--rs-texto);
    text-decoration: none;
}

.te-falta__cosa:hover {
    color: var(--marca-acento);
    text-decoration: none;
}

.te-falta__valor {
    font-family: var(--fuente-display);
    font-size: clamp(1.15rem, 1.5vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.te-falta__cosa--peligro .te-falta__valor {
    color: var(--rs-peligro-texto);
}

.te-falta__detalle-otra {
    color: var(--rs-texto-secundario);
    font-size: 15px;
}

.te-falta__cosa .icono {
    width: 20px;
    height: 20px;
    color: var(--rs-texto-secundario);
}

@media (max-width: 767px) {
    .te-falta__ir {
        flex: 1 1 100%;
        justify-content: center;
    }

    .te-falta__mas {
        flex: 1 1 100%;
    }

    .te-falta__cosa {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .te-falta__detalle-otra {
        grid-column: 1;
        grid-row: 2;
    }

    .te-falta__cosa .icono {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}
/* #endregion */

/* #region Lo último de la asociación: fotos, sin marco */
.inicio-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--espacio-6) clamp(18px, 2vw, 32px);
}

.inicio-foto {
    display: grid;
    align-content: start;
    gap: var(--espacio-1);
    color: var(--rs-texto);
    text-decoration: none;
}

.inicio-foto:hover {
    color: var(--rs-texto);
    text-decoration: none;
}

.inicio-foto__imagen {
    display: block;
    margin-bottom: var(--espacio-2);
    overflow: hidden;
    border-radius: var(--radio-lg);
    aspect-ratio: 1.42;
    background: var(--rs-superficie-2);
}

.inicio-foto__imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms var(--curva);
}

.inicio-foto:hover .inicio-foto__imagen img {
    transform: scale(1.02);
}

.inicio-foto__de {
    color: var(--rs-texto-secundario);
    font-size: 13px;
    font-weight: 500;
}

.inicio-foto__titulo {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.28;
}
/* #endregion */

/* #region Su asistencia */
.inicio .historial-grupos {
    gap: var(--espacio-6) clamp(24px, 3vw, 56px);
}

.inicio .historial-grupo__cabecera {
    display: block;
    margin: 0 0 var(--espacio-3);
    padding: 0;
    border: 0;
}

.inicio .historial-grupo__cabecera strong {
    display: block;
    color: var(--rs-texto);
    font-size: clamp(3.2rem, 6.4vw, 7.5rem);
    font-weight: 700;
    letter-spacing: -0.06em;
}

.inicio .historial-grupo__cabecera span {
    display: block;
    font-size: 17px;
    font-weight: 500;
}

.inicio .historial-grupo__cabecera small {
    color: var(--rs-texto-secundario);
    font-size: 14px;
}
/* #endregion */

/* #region Móvil: el carnet primero, al alcance del pulgar */
@media (max-width: 900px) {
    .app-socio--portada {
        --ancho-pagina: calc(100% - 32px);
    }

    /* Llena la primera pantalla, sin contar la barra de abajo: lo de debajo no asoma, y nada lo empuja al llegar. */
    .portada-socio {
        min-height: calc(100svh - 61px - env(safe-area-inset-bottom));
    }

    .portada-socio--con-foto .portada-socio__velo {
        background: linear-gradient(180deg, rgb(0 0 0 / 0.66), oklch(from var(--portada-tinta) l c h / 0.58) 32%, oklch(from var(--portada-tinta) l c h / 0.92));
    }

    :root:not([data-theme="light"]) .portada-socio::after {
        display: none;
    }

    /* El saludo, el carnet, su botón y, debajo, la cita. */
    .portada-socio__dentro {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--espacio-5);
        padding-block: calc(var(--alto-superior) + var(--espacio-2)) var(--espacio-6);
    }

    .portada-socio__texto {
        display: contents;
        container-type: normal;
    }

    .portada-socio__saludo {
        order: 1;
        font-size: clamp(2.75rem, 14vw, 4.5rem);
    }

    .portada-socio__carnet {
        order: 2;
    }

    .portada-socio__cita {
        order: 3;
        margin-top: 0;
    }

    .portada-socio__acciones {
        margin-top: var(--espacio-4);
    }

    .boton-portada {
        min-height: 46px;
        padding: 0 22px;
        font-size: 15px;
    }

    .portada-socio__bajo-carnet {
        flex-direction: column;
        align-items: stretch;
    }

    /* «Enseñar en la puerta»: a lo ancho. */
    .portada-socio__puerta {
        justify-content: center;
        min-height: 56px;
        border-radius: var(--radio-lg);
        background: #FFFFFF;
        color: var(--portada-tinta);
        font-size: 16px;
        font-weight: 650;
    }

    .portada-socio__puerta:hover {
        opacity: 1;
    }

    .portada-familia {
        justify-content: center;
        margin-left: 0;
    }

    .portada-socio__indicador {
        position: static;
        justify-content: center;
        width: var(--ancho-pagina);
        min-height: 4px;
        margin: 0 auto var(--espacio-4);
    }

    .portada-socio__pie {
        display: none;
    }

    .inicio {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .cartel {
        width: 72vw;
        max-width: 300px;
    }

    .cartel__dia {
        font-size: 8rem;
    }

    .inicio-fotos {
        display: flex;
        margin-inline: -16px;
        padding-inline: 16px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .inicio-foto {
        flex: none;
        width: 74vw;
        scroll-snap-align: center;
    }

    .inicio__atajos {
        flex-direction: column;
        align-items: flex-start;
    }

    .inicio__atajos .foto-propuesta {
        margin-left: 0;
    }
}
/* #endregion */

/* #region Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .portada-socio__foto {
        transition: none;
    }
}
/* #endregion */