/* Agenda de la casa — 'La cinta de fechas' (variante elegida el 15-09-2026).
   Componente autocontenido: la regla de días (1 marca por día), la aguja fija
   y las fichas. Desde el 15-09-2026 la regla y las fichas las genera js/agenda.js
   a partir de una hoja de Google publicada como CSV: mientras carga, o si falla,
   la sección muestra el aviso .agenda-c__estado (y sin JS, el <noscript>).
   La foto de cada ficha la decide el tipo de evento y es apaisada (3:2). */
/* ============================================================
       Variante C — La cinta de fechas.
       La agenda como la tira de un planificador físico: una regla
       horizontal con un paso por día, una aguja roja fija en el
       centro y, debajo, la ficha del día.
       Todo con tokens de reset.css; prefijos .regla y .ficha.
       ============================================================ */

    :root {
      --paso: 18px;          /* un día de la regla */
      --regla-h: 140px;      /* alto de la cinta */
      --base: 46px;          /* aire bajo la línea base (etiquetas de lunes) */
      --tick-cita: 40px;     /* alto de la marca de un día con cita */
    }

    body { background: var(--bg); }

    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    /* --- Tira de identificación de la variante --- */
    .variante {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin: 0;
      padding: 0.7rem var(--gutter);
      border-bottom: 1px solid var(--border);
    }
    .variante span:last-child { color: var(--gold); }

    /* --- Sección --- */
    .agenda-c {
      position: relative;
      isolation: isolate;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
      overflow: hidden;
      /* Mismo velo crema que Universo HOA (.family): la foto de fondo se intuye pero no estorba la lectura */
      background: rgba(243, 239, 235, 0.82);
    }
    /* grano sutil, como el backdrop de la casa */
    .agenda-c::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: 0.045;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
      background-size: 180px 180px;
    }

    /* --- Cabecera --- */
    .agenda-c__head {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 1.5rem clamp(2rem, 5vw, 5rem);
      align-items: end;
      margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
    }
    .agenda-c__head .kicker { margin-bottom: 1rem; }
    .agenda-c__title {
      font-size: clamp(2.6rem, 7vw, 5.6rem);
      letter-spacing: -0.025em;
      line-height: 0.98;
    }
    .agenda-c__lead {
      max-width: 40ch;
      color: var(--mid);
      font-size: clamp(0.98rem, 1.3vw, 1.08rem);
      padding-bottom: 0.4rem;
    }
    .agenda-c__lead b {
      font-weight: 500;
      color: var(--text);
    }

    /* --- Estados: cargando / error (la agenda viene de una hoja de Google) --- */
    .agenda-c__estado {
      display: block;
      max-width: 44ch;
      margin-inline: auto;
      padding-block: clamp(3rem, 8vw, 6rem);
      font-family: var(--font-body);
      font-size: clamp(0.98rem, 1.3vw, 1.08rem);
      line-height: 1.5;
      text-align: center;
      text-wrap: balance;
      color: var(--mid);
    }
    .agenda-c__estado a {
      color: var(--text);
      text-decoration: underline;
      text-decoration-color: var(--red);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
      transition: text-decoration-color var(--t-fast), color var(--t-fast);
    }
    @media (hover: hover) {
      .agenda-c__estado a:hover { color: var(--red); text-decoration-color: var(--text); }
    }
    .agenda-c__estado a:focus-visible { outline-offset: 3px; border-radius: var(--r-sm); }
    /* El punto rojo que late mientras carga; en error se queda quieto */
    .agenda-c__estado::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 0.7em;
      border-radius: 50%;
      background: var(--red);
      vertical-align: middle;
      position: relative;
      top: -1px;
    }
    .agenda-c.is-cargando .agenda-c__estado::before { animation: agendaLate 1.3s var(--ease) infinite; }
    @keyframes agendaLate {
      0%   { transform: scale(0.75); opacity: 0.45; }
      50%  { transform: scale(1.25); opacity: 1; }
      100% { transform: scale(0.75); opacity: 0.45; }
    }
    /* Vacío u oculto por el JS (agenda cargada): no ocupa sitio */
    .agenda-c__estado:empty,
    .agenda-c__estado[hidden] { display: none; }
    /* Sin JS solo se lee el <noscript>: el "Cargando…" del HTML no se muestra */
    html:not(.js) [data-agenda-estado] { display: none; }
    /* Mientras carga o si falla, la regla y las fichas no se ven */
    .agenda-c.is-cargando .regla__head,
    .agenda-c.is-cargando .regla,
    .agenda-c.is-cargando .fichas,
    .agenda-c.is-error .regla__head,
    .agenda-c.is-error .regla,
    .agenda-c.is-error .fichas { display: none; }

    /* --- Cabecera de la regla: mes actual + navegación --- */
    .regla__head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 0.75rem;
    }
    .regla__mes-actual {
      display: flex;
      align-items: baseline;
      gap: 0.9rem;
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .regla__mes-actual small {
      font-family: var(--font-body);
      font-style: normal;
      font-size: var(--kicker-size);
      letter-spacing: var(--tracking);
      text-transform: uppercase;
      color: var(--mid);
    }
    .regla__nav { display: none; align-items: center; gap: 0.5rem; }
    .js .regla__nav { display: flex; }
    .regla__hint {
      font-size: var(--kicker-size);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--mid);
      margin-right: 0.75rem;
    }
    .regla__btn {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid var(--accent);
      border-radius: var(--r-md);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1;
      color: var(--text);
      transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    }
    @media (hover: hover) {
      .regla__btn:hover { background: var(--accent); color: var(--text-light); transform: translateY(-2px); }
    }
    .regla__btn:active { transform: translateY(0); }

    /* --- La regla (a sangre) --- */
    .regla {
      position: relative;
      width: 100vw;
      margin-inline: calc(50% - 50vw);
    }
    /* línea base continua de borde a borde */
    .regla::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: var(--base);
      height: 1px;
      background: var(--text);
      pointer-events: none;
    }
    .regla__cinta {
      position: relative;
      display: flex;
      align-items: stretch;
      height: var(--regla-h);
      padding-inline: 50%;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      cursor: grab;
    }
    .regla__cinta::-webkit-scrollbar { display: none; }
    .regla__cinta.is-drag { cursor: grabbing; scroll-snap-type: none; }
    .regla__cinta.is-drag * { pointer-events: none; }

    /* Un día */
    .regla__dia,
    .regla__mes,
    .regla__siempre,
    .regla__fin {
      position: relative;
      flex: none;
      width: var(--paso);
      height: 100%;
    }
    .regla__tick {
      position: absolute;
      left: 50%;
      bottom: var(--base);
      width: 1px;
      height: 12px;
      background: var(--gold);
      transform: translateX(-50%);
      transition: background var(--t-fast), height var(--t-fast);
    }
    /* lunes: marca más alta y el número abajo, como en una regla */
    .regla__dia--lun .regla__tick { height: 22px; }
    .regla__sub {
      position: absolute;
      left: 50%;
      bottom: calc(var(--base) - 19px);
      transform: translateX(-50%);
      font-size: 0.6875rem;
      letter-spacing: 0.08em;
      color: var(--mid);
      line-height: 1;
      white-space: nowrap;
    }

    /* Separador de mes: línea alta y nombre del mes junto a ella */
    .regla__mes { width: max(calc(var(--paso) * 5), 92px); }
    .regla__mes .regla__tick {
      left: 0;
      height: calc(var(--tick-cita) + 26px);
      background: var(--text);
      transform: none;
    }
    .regla__mes-nombre {
      position: absolute;
      left: 7px;
      bottom: calc(var(--base) + 5px);
      font-size: 0.6875rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text);
      line-height: 1;
      white-space: nowrap;
    }
    .regla__fin { width: var(--paso); }
    .regla__fin .regla__tick { height: calc(var(--tick-cita) + 26px); background: var(--text); }

    /* Día con cita y fichas fijas: el enlace ocupa tres pasos para el dedo */
    .regla__siempre { width: max(calc(var(--paso) * 6), 104px); }
    .regla__link {
      position: absolute;
      inset: 0 calc(var(--paso) * -1);
      display: block;
      z-index: 2;
      border-radius: var(--r-sm);
      -webkit-tap-highlight-color: transparent;
    }
    .regla__link:focus-visible { outline-offset: -3px; }
    .regla__link .regla__tick {
      height: var(--tick-cita);
      background: var(--text);
    }
    .regla__punto {
      position: absolute;
      left: 50%;
      bottom: calc(var(--base) + var(--tick-cita) - 3.5px);
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
      transform: translateX(-50%);
      transition: transform var(--t-fast);
    }
    .regla__num {
      position: absolute;
      left: 50%;
      bottom: calc(var(--base) + var(--tick-cita) + 14px);
      transform: translateX(-50%);
      transform-origin: bottom center;
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2vw, 1.9rem);
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--text);
      white-space: nowrap;
      transition: transform var(--t-med), color var(--t-fast);
    }
    .regla__siempre .regla__num {
      font-style: italic;
      font-size: clamp(1.05rem, 1.6vw, 1.35rem);
      letter-spacing: -0.01em;
    }
    .regla__siempre .regla__sub {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 0.6875rem;
    }
    @media (hover: hover) {
      .regla__link:hover .regla__num { transform: translateX(-50%) scale(1.08); }
      .regla__link:hover .regla__punto { transform: translateX(-50%) scale(1.3); }
    }
    .regla__link[aria-current] .regla__num { transform: translateX(-50%) scale(1.2); }
    .regla__link[aria-current] .regla__tick { background: var(--red); }
    .regla__link[aria-current] .regla__punto { transform: translateX(-50%) scale(1.35); }

    /* La aguja: fija en el centro, apunta al número */
    .regla__aguja {
      position: absolute;
      left: 50%;
      top: calc(100% - var(--base) - var(--tick-cita) - 6px);
      bottom: calc(var(--base) - 28px);
      width: 2px;
      background: var(--red);
      transform: translateX(-50%);
      transform-origin: top center;
      z-index: 3;
      pointer-events: none;
    }
    .regla__aguja::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -7px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 7px solid var(--red);
      transform: translateX(-50%);
    }
    .regla__aguja::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--red);
      transform: translateX(-50%);
    }
    /* sin JS no hay día seleccionado: la aguja no se muestra */
    .regla__aguja { display: none; }
    .js .regla__aguja { display: block; }
    .regla__aguja.is-vibra { animation: aguja 0.55s var(--ease); }
    @keyframes aguja {
      0%   { transform: translateX(-50%) rotate(0deg); }
      22%  { transform: translateX(-50%) rotate(2.2deg); }
      52%  { transform: translateX(-50%) rotate(-1.4deg); }
      78%  { transform: translateX(-50%) rotate(0.6deg); }
      100% { transform: translateX(-50%) rotate(0deg); }
    }
    /* velos a los lados: la cinta se desvanece hacia los bordes */
    .regla__velo {
      position: absolute;
      top: 0;
      bottom: 0;
      width: clamp(2rem, 9vw, 9rem);
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(to right, var(--bg), transparent);
    }
    .regla__velo--der { right: 0; transform: scaleX(-1); }
    .regla__velo--izq { left: 0; }

    /* --- Las fichas --- */
    .fichas { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

    /* Texto | foto apaisada. La columna de la foto se limita a 3:2 × 320px de alto. */
    .ficha {
      display: grid;
      grid-template-columns: minmax(0, 1fr) min(42%, 480px);
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: start;
      padding-block: clamp(1.5rem, 3vw, 2.25rem);
      border-top: 1px solid var(--border);
    }
    /* Sin JS: las fichas se apilan y todas se ven. Con JS: una sola. */
    .js .fichas { display: grid; }
    .js .ficha {
      grid-area: 1 / 1;
      border-top: 0;
      padding-block: 0.25rem 0;
      visibility: hidden;
      pointer-events: none;
      transition: visibility 0s linear 0.85s;
    }
    .js .ficha.is-active {
      visibility: visible;
      pointer-events: auto;
      z-index: 2;
      transition-delay: 0s;
    }

    .ficha__cuerpo { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

    /* Fecha grande + día de la semana y mes en vertical */
    .ficha__fecha {
      display: flex;
      align-items: flex-start;
      gap: clamp(0.75rem, 1.6vw, 1.4rem);
      margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem);
    }
    .ficha__dia {
      font-family: var(--font-display);
      font-size: clamp(4.5rem, 12vw, 10.25rem);
      letter-spacing: -0.06em;
      line-height: 0.82;
      color: var(--text);
      margin-left: -0.04em;
    }
    .ficha__dia--siempre {
      font-style: italic;
      font-size: clamp(3rem, 7.8vw, 6.5rem);
      letter-spacing: -0.03em;
      line-height: 0.9;
      margin-left: 0;
    }
    .ficha__cuando {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      padding-top: 0.5rem;
      font-size: var(--kicker-size);
      letter-spacing: var(--tracking);
      text-transform: uppercase;
      color: var(--mid);
      line-height: 1.3;
    }
    .ficha__cuando strong { font-weight: 500; color: var(--text); }

    /* Tipo como sello de tinta roja */
    .ficha__sello {
      display: inline-block;
      padding: 0.35em 0.75em 0.3em;
      margin-bottom: 0.9rem;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 0.6875rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      line-height: 1;
      color: var(--red);
      border: 1.5px solid var(--red);
      outline: 1px solid var(--red);
      outline-offset: 2px;
      border-radius: var(--r-sm);
      transform: rotate(-3deg);
      transform-origin: left center;
      mix-blend-mode: multiply;
    }
    .ficha__titulo {
      font-size: clamp(1.7rem, 3.2vw, 2.6rem);
      letter-spacing: -0.025em;
      line-height: 1.04;
      max-width: 18ch;
      margin-bottom: 1.1rem;
    }

    /* Datos: filas con hairline, como una ficha de catálogo */
    .ficha__datos {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      column-gap: clamp(1.25rem, 3vw, 2.5rem);
      align-self: stretch;
      max-width: 44rem;
      border-top: 1px solid var(--border);
      margin-bottom: 1.1rem;
    }
    .ficha__datos dt,
    .ficha__datos dd {
      padding-block: 0.5rem;
      border-bottom: 1px solid var(--border);
      font-size: 0.86rem;
      min-width: 0;
    }
    .ficha__datos dt {
      font-size: var(--kicker-size);
      letter-spacing: var(--tracking);
      text-transform: uppercase;
      color: var(--mid);
      padding-top: 0.65rem;
    }
    .ficha__datos dd { color: var(--text); }
    .ficha__datos address { font-style: normal; }
    .ficha__pendiente {
      display: inline-block;
      padding: 0.2em 0.55em;
      font-size: 0.6875rem;
      letter-spacing: 0.2em;
      line-height: 1.3;
      text-transform: uppercase;
      color: var(--text);
      border: 1px dashed var(--gold);
      border-radius: var(--r-sm);
      vertical-align: middle;
      white-space: nowrap;
    }
    .ficha__desc {
      color: var(--mid);
      font-size: clamp(0.98rem, 1.3vw, 1.08rem);
      max-width: 50ch;
      margin-bottom: 1.4rem;
    }
    .ficha__cta { gap: 0.9em; }

    /* Foto apaisada 3:2, la decide el tipo de evento (src y alt los pone el JS).
       Encuadre centrado arriba para no cortar cabezas al recortar las campañas 4:5. */
    .ficha__foto {
      position: relative;
      width: 100%;
      margin: 0;
      aspect-ratio: 3 / 2;
      max-height: 320px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: var(--bg-warm);
      box-shadow: var(--shadow);
    }
    .ficha__foto img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 12%;
    }
    /* En la foto del pop-up (Mustang de noche) la figura está abajo: encuadre bajo */
    .ficha__foto[data-tipo="popup"] img { object-position: 50% 68%; }
    /* Cartel propio del evento (columna Foto de la hoja): se ve entero, sin recortar,
       sobre una copia difuminada y oscurecida de sí mismo que rellena el hueco */
    .ficha__foto--cartel { background: #240506; isolation: isolate; }
    .ficha__foto--cartel::before {
      content: "";
      position: absolute;
      inset: -10%;
      z-index: -1;
      background: var(--cartel) center / cover no-repeat;
      filter: blur(22px) brightness(0.55) saturate(1.15);
    }
    .ficha__foto--cartel img { object-fit: contain; object-position: 50% 50%; }
    .ficha__indice {
      position: absolute;
      top: 0.9rem;
      left: 1rem;
      font-size: var(--kicker-size);
      letter-spacing: var(--tracking);
      color: var(--text-light);
      mix-blend-mode: difference;
    }

    /* --- Variante compacta (inicio): la misma agenda, más baja --- */
    .agenda-c--compacta {
      min-height: 0;
      padding-block: clamp(2.5rem, 5vw, 4rem);
    }
    .agenda-c--compacta .agenda-c__head { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
    .agenda-c--compacta .fichas { margin-top: clamp(1.5rem, 3vw, 2rem); }
    .agenda-c--compacta .ficha {
      grid-template-columns: minmax(0, 1fr) min(38%, 420px);
    }
    .agenda-c--compacta .ficha__dia {
      font-size: clamp(3.75rem, 9vw, 7.5rem);
    }
    .agenda-c--compacta .ficha__dia--siempre {
      font-size: clamp(2.6rem, 6vw, 5rem);
    }
    .agenda-c--compacta .ficha__fecha { margin-bottom: 0.75rem; }
    .agenda-c--compacta .ficha__titulo {
      font-size: clamp(1.6rem, 2.8vw, 2.25rem);
      margin-bottom: 0.9rem;
    }
    .agenda-c--compacta .ficha__datos { margin-bottom: 0.9rem; }
    .agenda-c--compacta .ficha__datos dt,
    .agenda-c--compacta .ficha__datos dd { padding-block: 0.4rem; }
    .agenda-c--compacta .ficha__datos dt { padding-top: 0.55rem; }
    /* descripción a dos líneas como máximo */
    .agenda-c--compacta .ficha__desc {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      margin-bottom: 1.1rem;
    }
    .agenda-c--compacta .ficha__foto {
      aspect-ratio: 16 / 9;
      max-height: 240px;
    }

    /* --- Motion (solo con JS) --- */
    .js .ficha__cuerpo > * {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .js .ficha.is-active .ficha__cuerpo > * {
      opacity: 1;
      transform: none;
      transition-duration: 0.6s;
      transition-delay: calc(var(--i, 0) * 55ms + 60ms);
    }
    .js .ficha.is-active .ficha__sello { transform: rotate(-3deg); }
    .js .ficha__foto {
      opacity: 0;
      transition: opacity 0.85s var(--ease);
    }
    .js .ficha__foto img {
      transform: scale(1.05);
      transition: transform 1.4s var(--ease);
    }
    .js .ficha.is-active .ficha__foto { opacity: 1; }
    .js .ficha.is-active .ficha__foto img { transform: none; }
    .regla__mes-actual .regla__mes-texto {
      display: inline-block;
      transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    }
    .regla__mes-actual .regla__mes-texto.is-cambia { opacity: 0; transform: translateY(6px); }

    @media (prefers-reduced-motion: reduce) {
      .regla__aguja.is-vibra { animation: none; }
      .agenda-c.is-cargando .agenda-c__estado::before { animation: none; }
      .js .ficha__cuerpo > *,
      .js .ficha.is-active .ficha__cuerpo > *,
      .js .ficha__foto,
      .js .ficha__foto img,
      .regla__mes-actual .regla__mes-texto,
      .regla__num,
      .regla__punto {
        transition-duration: 0.01s;
        transition-delay: 0s;
      }
      .js .ficha { transition-delay: 0.02s; }
    }

    /* --- Móvil --- */
    @media (max-width: 720px) {
      :root {
        --paso: 12px;
        --regla-h: 124px;
        --base: 40px;
        --tick-cita: 30px;
      }
      .variante { flex-direction: column; gap: 0.15rem; }
      .agenda-c__head { grid-template-columns: 1fr; align-items: start; }
      .regla__hint { display: none; }
      .regla__dir { display: none; }
      .regla__num { font-size: 1.2rem; bottom: calc(var(--base) + var(--tick-cita) + 11px); }
      .regla__siempre .regla__num { font-size: 1rem; }
      .regla__mes { width: 84px; }
      .regla__aguja { bottom: calc(var(--base) - 24px); }
      /* Una columna. El cuerpo se disuelve en la rejilla (display: contents) para que
         la foto, que en el HTML va después del cuerpo, se coloque bajo el título. */
      .ficha {
        grid-template-columns: 1fr;
        gap: 0;
        justify-items: start;
      }
      .ficha__cuerpo { display: contents; }
      .ficha__fecha  { order: 1; }
      .ficha__sello  { order: 2; }
      .ficha__titulo { order: 3; }
      .ficha__foto   { order: 4; }
      .ficha__datos  { order: 5; }
      .ficha__desc   { order: 6; }
      .ficha__cta    { order: 7; }
      .ficha__foto {
        max-width: 100%;
        justify-self: stretch;
        aspect-ratio: 16 / 9;
        max-height: none;
        margin-bottom: 1.25rem;
      }
      .ficha__foto--cartel { aspect-ratio: 1 / 1; }
      .ficha__datos { grid-template-columns: 1fr; justify-self: stretch; }
      .ficha__datos dt { border-bottom: 0; padding-bottom: 0.1rem; }
      .ficha__datos dd { padding-top: 0.2rem; }
      .ficha__cta { width: 100%; justify-self: stretch; }
      /* La compacta también va a una columna (su regla de escritorio pesa más) */
      .agenda-c--compacta .ficha { grid-template-columns: 1fr; }
      .agenda-c--compacta .ficha__foto { max-height: none; margin-bottom: 1rem; }
      .agenda-c--compacta .ficha__foto--cartel { aspect-ratio: 4 / 3; }
    }
    @media (min-width: 721px) and (max-width: 1000px) {
      .ficha { grid-template-columns: minmax(0, 1fr) clamp(220px, 40vw, 380px); }
      .agenda-c--compacta .ficha { grid-template-columns: minmax(0, 1fr) clamp(200px, 36vw, 340px); }
    }

/* --- Foto por tipo: recorte 3:2 elegido a ojo para cada foto (recorte por foto).
   Las fotos de campaña son verticales; object-position decide qué banda se ve. --- */
.ficha__foto img[src*="col-archivo"]   { object-position: 50% 50%; }  /* botas en la escalera */
.ficha__foto img[src*="col-temporada"] { object-position: 50% 80%; }  /* el Mustang y ella */
.ficha__foto img[src*="hotel-01"]      { object-position: 50% 35%; }  /* el retrato con gafas */
.ficha__foto img[src*="hotel-02"]      { object-position: 50% 50%; }  /* el balón de baloncesto */
.ficha__foto img[src*="hotel-03"]      { object-position: 50% 85%; }  /* el bolso rojo */