/* MiEventus — base estructural de micropáginas (compartida por todos los temas).
   Cada tema aporta su styles.css con fondo, tipografías y ornamentos. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.mieventus-event {
    margin: 0;
    background: var(--me-bg);
    color: var(--me-text);
    font-family: var(--me-body-font);
    font-weight: 300;
    line-height: 1.7;
    font-size: 1rem;
}

img { max-width: 100%; height: auto; display: block; }

/* Los enlaces usan el tono legible, no el decorativo: `--me-accent` puede ser
   un pastel perfecto como relleno e ilegible como texto. */
a { color: var(--me-link); }
a:visited { color: var(--me-link-visited); }

/* Anillo de foco de dos tonos: sobre cualquier superficie de la paleta al menos
   uno de los dos colores alcanza 3:1, así el foco nunca queda invisible. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--me-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--me-focus-ring-contrast);
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

/* Barra de preview */
.me-preview-bar {
    background: #4a3f78;
    color: #fff;
    text-align: center;
    padding: .45rem 1rem;
    font-size: .82rem;
    letter-spacing: .04em;
}

/* Encabezado */
.me-header { text-align: center; padding: 2.2rem 1rem 0; }

.me-hero__ornament { display: flex; justify-content: center; }

.me-hero__names {
    font-family: var(--me-heading-font);
    font-weight: 400;
    font-size: clamp(2.1rem, 7vw, 3.6rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: .6rem 0 .3rem;
}

/* Línea de arriba opcional («Mis 15 años»), Sprint 029. */
.me-hero__pre {
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .9rem;
    margin: 0 0 .5rem;
}

.me-hero__meta {
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .82rem;
    color: var(--me-muted);
    margin: 0 0 1.2rem;
}

/* «Márgenes» de la portada (Sprint 033): cada línea se corre los píxeles que
   diga quien edita, por separado en computadora y en teléfono. `translate` y
   no `margin`: mueve solo esa línea y exactamente esa cantidad, sin empujar a
   las otras ni depender de si el tema centra o alinea a la derecha. */
.me-hero-move { translate: var(--me-move-x, 0px) var(--me-move-y, 0px); }

@media (max-width: 767px) {
    .me-hero-move { translate: var(--me-move-x-m, 0px) var(--me-move-y-m, 0px); }
}

/* Capa de teléfono (Sprint 035): lo que el editor cambió en modo «Teléfono».
   Una línea con estilo propio en teléfono lleva dos `span` con el mismo texto;
   una página o sección oculta solo en teléfono se dibuja y aquí se esconde.
   `!important` porque un tema puede dar `display` a esos mismos elementos. */
@media (min-width: 768px) {
    .me-only-phone { display: none !important; }
}
@media (max-width: 767px) {
    .me-only-desktop,
    .me-hide-phone { display: none !important; }
    /* «Oscurecer la foto» del teléfono. Le gana a la opacidad en línea. */
    .me-heroarea__overlay--phone { opacity: var(--me-overlay-m, .25) !important; }
}

.me-pagehead__names a {
    font-family: var(--me-heading-font);
    font-size: 1.4rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--me-text);
}

/* Navegación */
.me-nav { position: relative; border-top: 1px solid var(--me-line, rgba(0,0,0,.08)); border-bottom: 1px solid var(--me-line, rgba(0,0,0,.08)); margin-top: 1rem; }

.me-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: 0;
    padding: .8rem 1rem;
    cursor: pointer;
}

.me-nav__toggle-bar { width: 22px; height: 2px; background: var(--me-text); }

.me-nav__list { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; }

.me-nav__list.is-open { display: flex; }

.me-nav__list a {
    display: block;
    padding: .7rem 1rem;
    text-decoration: none;
    color: var(--me-text);
    font-style: italic;
    font-family: var(--me-heading-font);
    font-size: 1.05rem;
}

.me-nav__list a.is-active { border-bottom: 2px solid var(--me-accent-text); }

@media (min-width: 768px) {
    .me-nav__toggle { display: none; }
    .me-nav__list { display: flex !important; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: .4rem; }
    .me-nav__list a { padding: .8rem .9rem; }
}

/* «Ocultar menú principal» del panel Diseño: mismo corte de 768 px que el menú */
@media (max-width: 767px) { .me-nav--hide-mobile { display: none; } }
@media (min-width: 768px) { .me-nav--hide-desktop { display: none; } }

/* ===== Selector de idioma (Fase 12) ===== */

.me-langs {
    display: flex;
    justify-content: center;
    gap: .2rem;
    padding: .5rem 0;
}

.me-langs__item {
    /* Objetivo táctil de 44 px: se elige con el pulgar, en un teléfono, casi
       siempre al llegar. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .8rem;
    text-decoration: none;
    color: var(--me-muted, var(--me-text));
    font-size: .9rem;
    letter-spacing: .04em;
}

/* El idioma activo se marca con color y subrayado, nunca con opacidad: un
   texto atenuado no dice «este es el activo», dice «este está deshabilitado». */
.me-langs__item.is-active {
    color: var(--me-accent-text);
    border-bottom: 2px solid var(--me-accent-text);
}

/* ===== Layouts del hero (grid elegible por el usuario) ===== */

.me-heroarea { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 0; }

.me-heroarea__photo img { width: 100%; object-fit: cover; border-radius: var(--me-photo-radius, 4px); }
/* El <picture> no debe crear una caja propia: los temas miden y recortan el <img> directamente. */
.me-heroarea__photo picture { display: contents; }
.me-heroarea__photo { position: relative; }

.me-heroarea__overlay { position: absolute; inset: 0; background: #000; pointer-events: none; border-radius: var(--me-photo-radius, 4px); }

.me-heroarea__info { display: flex; flex-direction: column; justify-content: center; gap: .4rem; }

.me-heroarea__date {
    font-family: var(--me-heading-font);
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.25;
    margin: 0;
}

.me-heroarea__place {
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: clamp(1rem, 2.6vw, 1.4rem);
    color: var(--me-muted);
    margin: 0;
}

.me-heroarea__extra { margin: 1.2rem 0 0; color: var(--me-muted); }

.me-heroarea__cta { margin-top: 1.4rem; }

/* clásico: foto centrada bajo el encabezado */
.me-hero-layout--classic .me-heroarea { max-width: 760px; }
.me-hero-layout--classic.me-cover--vertical .me-heroarea { max-width: 640px; }
.me-hero-layout--classic.me-cover--vertical .me-heroarea__photo img { aspect-ratio: 3 / 4; }
.me-hero-layout--classic.me-cover--horizontal .me-heroarea__photo img { aspect-ratio: 16 / 9; }
.me-hero-layout--classic .me-heroarea__info { text-align: center; padding-top: 1.5rem; }

/* foto a la derecha / izquierda (grid 2 columnas) */
.me-hero-layout--photo-right .me-heroarea,
.me-hero-layout--photo-left .me-heroarea {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 820px) {
    .me-hero-layout--photo-right .me-heroarea { grid-template-columns: 1fr 1.25fr; }
    .me-hero-layout--photo-left .me-heroarea { grid-template-columns: 1.25fr 1fr; }
    .me-hero-layout--photo-left .me-heroarea__photo { order: -1; }
}

.me-hero-layout--photo-right .me-heroarea__photo img,
.me-hero-layout--photo-left .me-heroarea__photo img { aspect-ratio: 4 / 5; }

/* foto completa: full-bleed con overlay */
/* `position: relative` ancla la información (absoluta) a la foto: sin él se
   anclaba a la página y flotaba sobre el título y el menú (Sprint 028). */
.me-hero-layout--photo-full .me-heroarea { max-width: none; padding: 0; position: relative; }
/* `figure` trae del navegador un margen de 1em 40px: la foto quedaba 80 px más
   angosta que la información, que se ancla a `.me-heroarea`, y una fecha larga
   se salía de la foto (Quince Estrellas + «Princesa», 13 de febrero, 390 px;
   Sprint 033). De borde a borde de verdad, y el texto encima de la foto. */
.me-hero-layout--photo-full .me-heroarea__photo { margin: 0; }
.me-hero-layout--photo-full .me-heroarea__photo img { aspect-ratio: 21 / 9; border-radius: 0; min-height: 320px; }
.me-hero-layout--photo-full .me-heroarea__overlay { border-radius: 0; }
.me-hero-layout--photo-full .me-heroarea__info {
    position: absolute; inset: 0;
    align-items: center; justify-content: center; text-align: center;
    color: var(--me-overlay-text); z-index: 1; padding: 1rem;
}
/* El contraste aquí lo garantiza el velo (opacidad mínima calculada en
   PaletteTokens), no la sombra: una text-shadow no cuenta como contraste para
   WCAG. La sombra queda solo como refuerzo estético. */
.me-hero-layout--photo-full .me-heroarea__date,
.me-hero-layout--photo-full .me-heroarea__place,
.me-hero-layout--photo-full .me-heroarea__extra {
    color: var(--me-overlay-text);
    text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

/* solo texto */
.me-hero-layout--text-only .me-heroarea__photo { display: none; }
.me-hero-layout--text-only .me-heroarea__info { text-align: center; padding: 1rem 0; }

/* ===== Contenido ===== */

.me-main { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* ---------- Bloques del modo una sola página ----------
 *
 * En modo varias páginas hay un único bloque y esto no cambia nada. En modo una
 * sola página, cada página visible es un bloque con su ancla.
 */

/* `scroll-margin-top` es lo que impide que el menú tape el encabezado al saltar
 * a un ancla: sin él, el navegador alinea el bloque con el borde superior de la
 * ventana y el título queda debajo de la barra. Es criterio de aceptación del
 * PRD, no un ajuste estético. */
.me-block { scroll-margin-top: 5rem; }

/* ---------- Secciones editables (solo en la vista previa) ----------
 *
 * Estas clases solo aparecen en el borrador que se ve dentro del editor: la
 * invitación publicada no las lleva.
 *
 * El contorno reutiliza el anillo de foco de dos tonos que deriva
 * `PaletteTokens`, no un color nuevo. Ese anillo está calculado justamente para
 * ser visible sobre cualquiera de las superficies de la paleta —fondo claro,
 * fondo oscuro o botón—, que es la misma exigencia que tiene una selección
 * sobre una sección cualquiera de la invitación. La etiqueta usa el par
 * botón/texto de botón, validado a AA por la suite de contraste.
 */

.me-editable { position: relative; cursor: pointer; border-radius: 4px; }

.me-editable:hover,
.me-editable:focus-visible {
    outline: 2px dashed var(--me-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--me-focus-ring-contrast);
}

.me-editable.is-me-selected {
    outline: 3px solid var(--me-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--me-focus-ring-contrast);
}

.me-editable.is-me-selected::before {
    content: attr(aria-label);
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    font-size: .7rem;
    padding: .15rem .5rem;
    border-radius: 4px 4px 0 0;
    background: var(--me-button-bg);
    color: var(--me-button-text);
    white-space: nowrap;
    z-index: 2;
}

.me-block + .me-block {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--me-line, rgba(0, 0, 0, .08));
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

.me-section { padding: 1.8rem 0; text-align: center; }

.me-section__title {
    font-family: var(--me-heading-font);
    font-weight: 400;
    font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.me-page-title {
    font-family: var(--me-heading-font);
    font-weight: 400;
    text-align: center;
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 2rem 0 .5rem;
}

.me-muted { color: var(--me-muted); }

.me-announcement p {
    font-style: italic;
    font-family: var(--me-heading-font);
    font-size: 1.25rem;
    margin: 0;
}

/* Contador */
.me-countdown__grid { display: flex; justify-content: center; gap: clamp(.8rem, 4vw, 2.2rem); }

.me-countdown__unit span {
    display: block;
    font-family: var(--me-heading-font);
    font-size: clamp(1.8rem, 6vw, 3rem);
    color: var(--me-accent-text);
}

.me-countdown__unit small {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .68rem;
    color: var(--me-muted);
}

.me-countdown.is-done .me-countdown__grid { display: none; }

/* Tarjetas */
.me-event-card, .me-hotel-card {
    background: var(--me-surface);
    border: 1px solid var(--me-line, rgba(0,0,0,.06));
    border-radius: var(--me-card-radius, 10px);
    padding: 1.6rem 1.4rem;
    margin: 1rem auto;
    max-width: 520px;
    box-shadow: var(--me-card-shadow, 0 3px 18px rgba(0,0,0,.05));
}

.me-event-card__name, .me-hotel-card h3 {
    font-family: var(--me-heading-font);
    font-weight: 500;
    font-size: 1.35rem;
    margin: 0 0 .4rem;
}

.me-event-card__date { color: var(--me-accent-text); letter-spacing: .06em; margin: .2rem 0; }
.me-event-card__venue { font-weight: 400; margin: .2rem 0; }
.me-event-card__address { color: var(--me-muted); font-size: .92rem; margin: .2rem 0; }

/* Botones */
.me-btn {
    display: inline-block;
    background: var(--me-button-bg);
    color: var(--me-button-text);
    text-decoration: none;
    padding: .65rem 1.8rem;
    border-radius: var(--me-btn-radius, 999px);
    letter-spacing: .08em;
    font-size: .9rem;
    margin: .3rem;
    transition: background-color .15s ease;
}

/* Hover y active mueven el relleno alejándose de la luminancia del texto, así
   el contraste solo puede mejorar. Los tonos los calcula PaletteTokens. */
.me-btn:hover { background: var(--me-button-bg-hover); color: var(--me-button-text); }
.me-btn:active { background: var(--me-button-bg-active); color: var(--me-button-text); }

/* Deshabilitado con un par de color propio, no con opacidad: bajar la opacidad
   destruye el contraste y deja el texto ilegible. */
.me-btn:disabled,
.me-btn[aria-disabled="true"] {
    background: var(--me-button-disabled-bg);
    color: var(--me-button-disabled-text);
    cursor: not-allowed;
}

.me-btn--outline {
    background: transparent;
    color: var(--me-accent-text);
    border: 1px solid var(--me-border);
}
.me-btn--outline:hover { background: var(--me-surface); color: var(--me-accent-text); }
.me-btn--outline:active { background: var(--me-surface); color: var(--me-accent-text); }

@media (prefers-reduced-motion: reduce) {
    .me-btn { transition: none; }
}

/* Código de vestimenta */
.me-dresscode__name { font-family: var(--me-heading-font); font-size: 1.5rem; margin: .2rem 0; }

/* FAQ */
.me-faq { text-align: left; max-width: 560px; margin: 0 auto; }
.me-faq__item { border-bottom: 1px solid var(--me-line, rgba(0,0,0,.08)); padding: .6rem 0; }
.me-faq__item summary { cursor: pointer; font-weight: 400; font-family: var(--me-heading-font); font-size: 1.08rem; }

/* Otros */
.me-divider { text-align: center; color: var(--me-accent-text); padding: .6rem 0; }
.me-spacer { height: 2.4rem; }
.me-image { margin: 0 auto; border-radius: var(--me-photo-radius, 8px); }
.me-rsvp__intro { color: var(--me-muted); font-style: italic; }

.me-rsvp-form {
    max-width: 440px;
    margin: 1rem auto 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.me-rsvp-form__hp { position: absolute; left: -9999px; height: 1px; overflow: hidden; }

.me-rsvp-form__field label, .me-rsvp-form__attendance legend {
    display: block;
    font-size: .82rem;
    letter-spacing: .06em;
    margin-bottom: .3rem;
    color: var(--me-muted);
}

.me-rsvp-form__field input, .me-rsvp-form__field select, .me-rsvp-form__field textarea {
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid var(--me-border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--me-body-font);
    background: var(--me-field-bg);
    color: var(--me-text);
    box-sizing: border-box;
}

/* El texto de sugerencia también es texto: se le exige AA como a cualquier otro. */
.me-rsvp-form__field input::placeholder,
.me-rsvp-form__field textarea::placeholder {
    color: var(--me-placeholder);
    opacity: 1; /* Firefox la baja por defecto y eso rompe el contraste. */
}

/* Campo con error: el color no es el único indicador — hay borde reforzado y
   un mensaje asociado por aria-describedby (PRD §13, "no depender solo del color"). */
.me-rsvp-form__field input[aria-invalid="true"],
.me-rsvp-form__field select[aria-invalid="true"],
.me-rsvp-form__field textarea[aria-invalid="true"] {
    border-color: var(--me-danger-border);
    border-width: 2px;
}

.me-rsvp-form__attendance { border: 1px solid var(--me-line, rgba(0,0,0,.15)); border-radius: 10px; padding: .8rem 1rem; margin: 0; }
.me-rsvp-form__attendance label { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--me-text); margin: .35rem 0; cursor: pointer; }
.me-rsvp-form__attendance input { accent-color: var(--me-button-bg); width: 18px; height: 18px; }

.me-rsvp-form__submit { border: 0; cursor: pointer; font-family: var(--me-body-font); font-size: 1rem; align-self: center; padding: .75rem 2.4rem; }
.me-rsvp-form__submit:disabled {
    background: var(--me-button-disabled-bg);
    color: var(--me-button-disabled-text);
    cursor: wait;
}

/* Alertas: color con respaldo de icono y texto, nunca color solo. */
.me-rsvp-form__error,
.me-alert--danger {
    color: var(--me-danger-text);
    background: var(--me-danger-surface);
    border-left: 4px solid var(--me-danger-border);
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .9rem;
}

.me-alert--warning {
    color: var(--me-warning-text);
    background: var(--me-warning-surface);
    border-left: 4px solid var(--me-warning-text);
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .9rem;
}

.me-alert--success {
    color: var(--me-success-text);
    background: var(--me-success-surface);
    border-left: 4px solid var(--me-success-text);
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .9rem;
}

/* Insignias */
.me-badge {
    display: inline-block;
    background: var(--me-badge-bg);
    color: var(--me-badge-text);
    border-radius: 999px;
    padding: .15rem .7rem;
    font-size: .78rem;
    letter-spacing: .04em;
}

/* Iconos interactivos: 3:1 como componente de interfaz (SC 1.4.11). */
.me-icon-button {
    color: var(--me-icon);
    background: transparent;
    border: 0;
    cursor: pointer;
    /* Objetivo táctil mínimo de 44x44 (PRD §13). */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.me-rsvp-success { max-width: 440px; margin: 1.2rem auto 0; background: var(--me-surface); border: 1px solid var(--me-line, rgba(0,0,0,.1)); border-radius: 12px; padding: 1.4rem; }
.me-rsvp-success__msg { font-family: var(--me-heading-font); font-size: 1.2rem; margin: 0 0 .4rem; }
.me-rsvp-success__code { color: var(--me-muted); letter-spacing: .06em; }

/* Pie */
.me-footer { text-align: center; padding: 2.4rem 1rem 2.8rem; border-top: 1px solid var(--me-line, rgba(0,0,0,.08)); }

.me-footer__names {
    font-family: var(--me-heading-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin: 0 0 .2rem;
}

.me-footer__date { color: var(--me-muted); font-size: .85rem; margin: 0; }
.me-footer__credit { margin: 1rem 0 0; font-size: .75rem; letter-spacing: .1em; }
.me-footer__credit a { color: var(--me-muted); text-decoration: none; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Fase 6 — Imágenes y multimedia
   ===================================================================== */

/*
 * Recorte no destructivo.
 *
 * El archivo subido nunca se toca. Las cuatro fracciones del rectángulo
 * elegido llegan como variables en el atributo `style` de cada figura, y el
 * recorte se consigue agrandando la imagen 1/w veces dentro de un marco con
 * `overflow:hidden` y desplazándola -x/w. El resultado es exactamente el
 * encuadre pedido con cualquier tamaño de archivo servido, y quitar el recorte
 * es dejar de emitir las variables.
 *
 * Todas llevan valor de reserva: sin él, una figura sin recorte dejaría la
 * división sin definir y el navegador descartaría la regla entera.
 */
.me-media { margin: 0; }

.me-media__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--me-ar, 1);
    background: var(--me-field-bg);
    border-radius: 10px;
}

.me-media__frame img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Punto focal: lo que la persona marcó se queda dentro al recortar por
       proporción. Sin él, `cover` centra y corta las caras de los extremos. */
    object-position: var(--me-fx, 50%) var(--me-fy, 50%);
}

.me-media--cropped .me-media__frame img {
    width: calc(100% / var(--me-cw, 1));
    height: calc(100% / var(--me-ch, 1));
    left: calc(var(--me-cx, 0) / var(--me-cw, 1) * -100%);
    top: calc(var(--me-cy, 0) / var(--me-ch, 1) * -100%);
    object-position: center;
}

.me-media__caption {
    margin: .5rem 0 0;
    font-size: .85rem;
    color: var(--me-muted);
    text-align: center;
}

/* El recorte de móvil, cuando lo hay. Es toda la implementación de «el preview
   móvil y escritorio puede usar crops diferentes»: ni una línea de JavaScript. */
@media (max-width: 767px) {
    .me-media--dual .me-media__frame { aspect-ratio: var(--me-ar-m, 1); }

    .me-media--dual.me-media--cropped .me-media__frame img {
        width: calc(100% / var(--me-cw-m, 1));
        height: calc(100% / var(--me-ch-m, 1));
        left: calc(var(--me-cx-m, 0) / var(--me-cw-m, 1) * -100%);
        top: calc(var(--me-cy-m, 0) / var(--me-ch-m, 1) * -100%);
    }
}

/* Galería */
.me-gallery__grid {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .me-gallery__grid { grid-template-columns: repeat(var(--me-gallery-cols, 3), 1fr); gap: .8rem; }
}

/* En la cuadrícula la proporción común manda sobre la de cada foto: sin ella
   las filas quedan escalonadas. Aquí es donde el punto focal hace su trabajo. */
.me-gallery--grid .me-gallery__item .me-media__frame { aspect-ratio: 1; }
.me-gallery--mosaic .me-gallery__item:nth-child(4n+1) { grid-column: span 2; }
.me-gallery--mosaic .me-gallery__item .me-media__frame { aspect-ratio: 4 / 3; }

.me-gallery--carousel .me-gallery__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.me-gallery--carousel .me-gallery__item {
    flex: 0 0 82%;
    scroll-snap-align: center;
}

@media (min-width: 768px) {
    .me-gallery--carousel .me-gallery__item { flex-basis: 44%; }
}

/* Foto ampliable: el enlace envuelve la figura sin cambiar cómo se ve */
.me-gallery__open {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: zoom-in;
    border-radius: inherit;
}

.me-gallery__open:focus-visible { outline: 3px solid var(--me-focus-ring); outline-offset: 3px; }

@media (hover: hover) {
    .me-gallery__open .me-media__frame img { transition: filter .2s ease; }
    .me-gallery__open:hover .me-media__frame img { filter: brightness(1.08); }
}

/* Visor de fotos: igual en todas las plantillas, la foto es la protagonista */
.me-lightbox-open { overflow: hidden; }

.me-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 3.5rem .5rem 3rem;
    border: 0;
    background: rgba(10, 10, 10, .97);
    color: #fff;
    font-family: var(--me-body-font, system-ui, sans-serif);
}

.me-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.me-lightbox::backdrop { background: transparent; }

.me-lightbox__figure {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}

.me-lightbox__stage {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.me-lightbox__stage picture { display: contents; }

.me-lightbox__stage img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.me-lightbox__caption { margin: 0; text-align: center; font-size: .95rem; line-height: 1.4; max-width: 60ch; }

.me-lightbox__count {
    position: absolute;
    left: 50%;
    bottom: .9rem;
    transform: translateX(-50%);
    margin: 0;
    font-size: .85rem;
    letter-spacing: .08em;
    opacity: .85;
}

.me-lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.me-lightbox__btn:hover { background: rgba(255, 255, 255, .28); }
.me-lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.me-lightbox__close { top: .6rem; right: .6rem; font-size: 1.8rem; }
.me-lightbox__prev,
.me-lightbox__next { top: 50%; transform: translateY(-50%); }
.me-lightbox__prev { left: .5rem; }
.me-lightbox__next { right: .5rem; }
.me-lightbox.is-single .me-lightbox__prev,
.me-lightbox.is-single .me-lightbox__next { display: none; }

@media (min-width: 768px) {
    .me-lightbox { padding: 3.5rem 4.5rem 3rem; }
    .me-lightbox__btn { width: 52px; height: 52px; }
    .me-lightbox__prev { left: 1rem; }
    .me-lightbox__next { right: 1rem; }
    .me-lightbox__close { top: 1rem; right: 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .me-lightbox[open] { animation: me-lightbox-in .2s ease-out; }
}

@keyframes me-lightbox-in { from { opacity: 0; } to { opacity: 1; } }

/* Video: marco con botón; el iframe llega al pulsar */
.me-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--me-field-bg);
    border: 1px solid var(--me-border);
}

.me-video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.me-video__play {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: var(--me-field-bg);
    color: var(--me-text);
    border: 0;
    cursor: pointer;
    font-family: var(--me-body-font);
    font-size: .95rem;
    padding: 1rem;
}

.me-video__play:hover { background: var(--me-surface); color: var(--me-accent-text); }
.me-video__play:focus-visible { outline: 3px solid var(--me-focus-ring); outline-offset: -3px; }
.me-video__icon { font-size: 2.4rem; line-height: 1; color: var(--me-accent-text); }
.me-video__caption { text-align: center; color: var(--me-muted); font-size: .9rem; margin: .6rem 0 0; }

/* Imagen con texto */
.me-imagetext { display: grid; gap: 1.2rem; }

@media (min-width: 768px) {
    .me-imagetext { grid-template-columns: 1fr 1fr; align-items: center; }
    .me-imagetext--right .me-imagetext__media { order: 2; }
}

/* Personas */
.me-people__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .me-people__grid { grid-template-columns: repeat(4, 1fr); }
}

.me-people__card { text-align: center; }
.me-people__photo .me-media__frame { aspect-ratio: 1; border-radius: 50%; }
.me-people__name { font-family: var(--me-heading-font); margin: .6rem 0 .1rem; font-size: 1rem; }
.me-people__role { color: var(--me-muted); font-size: .85rem; margin: 0; }

/* Línea de tiempo */
.me-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.4rem;
    border-left: 2px solid var(--me-border);
    text-align: left;
    max-width: 560px;
}

.me-timeline__item { position: relative; padding: 0 0 1.4rem .6rem; }

.me-timeline__item::before {
    content: "";
    position: absolute;
    left: -1.95rem;
    top: .35rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--me-accent);
}

.me-timeline__label {
    color: var(--me-accent-text);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 .2rem;
}

.me-timeline__title { font-family: var(--me-heading-font); font-size: 1.1rem; margin: 0 0 .3rem; font-weight: 400; }

/* Mapa: dirección y botón. No hay iframe de mapa a propósito (ver MapLinks). */
.me-map__card,
.me-transport__card {
    background: var(--me-surface);
    border: 1px solid var(--me-border);
    border-radius: 12px;
    padding: 1.2rem;
    margin: 0 auto .8rem;
    max-width: 520px;
}

.me-map__name { font-family: var(--me-heading-font); font-size: 1.15rem; margin: 0 0 .3rem; }
.me-map__address { margin: 0 0 .3rem; }
.me-map__notes { color: var(--me-muted); font-size: .9rem; margin: 0 0 .6rem; }

/* Transporte */
.me-transport__card { display: flex; gap: .9rem; text-align: left; }
.me-transport__icon { font-size: 1.6rem; line-height: 1.2; }
.me-transport__body h3 { font-family: var(--me-heading-font); font-size: 1.05rem; margin: 0 0 .3rem; font-weight: 400; }
.me-transport__body p { margin: 0 0 .5rem; }

/* Contactos */
.me-contacts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .me-contacts__list { grid-template-columns: repeat(2, 1fr); }
}

.me-contacts__card {
    background: var(--me-surface);
    border: 1px solid var(--me-border);
    border-radius: 12px;
    padding: 1rem;
    text-align: left;
}

.me-contacts__name { font-family: var(--me-heading-font); margin: 0 0 .1rem; font-size: 1.05rem; }
.me-contacts__role { color: var(--me-muted); font-size: .85rem; margin: 0 0 .6rem; }
.me-contacts__links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }

.me-contacts__links a {
    color: var(--me-link);
    text-decoration: none;
    border: 1px solid var(--me-border);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .85rem;
    /* Objetivo táctil mínimo (PRD §13). */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.me-contacts__links a:hover { background: var(--me-field-bg); color: var(--me-accent-text); }
.me-contacts__links a:visited { color: var(--me-link-visited); }

/* Hashtag y redes */
.me-social__tag {
    font-family: var(--me-heading-font);
    font-size: 1.8rem;
    color: var(--me-accent-text);
    margin: 0 0 .6rem;
    word-break: break-word;
}

.me-social__links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* Calendario */
.me-calendar__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Descargas */
.me-downloads__list { list-style: none; margin: 0; padding: 0; }

.me-downloads__item {
    border-bottom: 1px solid var(--me-border);
    padding: .9rem 0;
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
}

.me-downloads__link {
    color: var(--me-link);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.me-downloads__link:visited { color: var(--me-link-visited); }
.me-downloads__desc { color: var(--me-muted); font-size: .88rem; margin: .1rem 0 0; }

/* Agradecimiento */
.me-thanks__photo { max-width: 560px; margin: 0 auto 1rem; }
.me-thanks__signature { font-family: var(--me-heading-font); font-size: 1.2rem; margin: .8rem 0 0; }