/* ==========================================================================
   Composición de marca de los héroes (inicio y fichas) — design.md §4.3
   Manual CI-STA p. 22–26, 31 y 34 + medidas de mini.com.mx (analisis-rea/referencia-mx/animaciones.md §4):
   · El titular va arriba a la izquierda, en la esquina interior del marco: la línea superior empieza a la
     derecha de la línea más ancha del titular y la izquierda sube desde abajo hasta debajo del texto
     (esquina abierta). El marco rodea el producto.
   · Marco de ⅓ X en digital, en uno de los 7 colores de comunicación según la carrocería (p. 21–22);
     John Cooper Works usa el rojo JCW. Recuadro a 1,25 X del borde (MX: 24 px en móvil, 56 px en escritorio).
   · Titular en MINI Serif: máx. 3 líneas, 2 tamaños y 2 énfasis, interlineado 110 %, sin tracking, punto final.
   · Escritorio: oferta (precio y frase) o CTA debajo del titular. Móvil (como el ejemplo de MX): titular
     arriba y oferta / CTA al pie de la foto, dentro del marco; el auto queda libre en el centro.
   · En digital el marco puede ser animado (p. 24). Inicio: ciclo de 6 s por diapositiva (dibuja 2 s, queda 2 s,
     se retira 2 s; «campaignstage» de MX); con el carrusel detenido se dibuja igual en cada diapositiva y queda,
     y detenerlo o reanudarlo nunca reinicia el dibujo.
     Fichas: se dibuja una vez y queda fijo («stage» de MX; sin bucle por WCAG 2.2.2). Con «reducir movimiento»
     el marco queda fijo y completo.
   Sin JS: la rejilla (2 columnas × 3 filas) ubica las líneas según el tamaño real del texto en cada pantalla.
     [titular] [— línea superior —]
     [sub    ] [                  ]   sub = precio y frase (inicio) o botón (fichas); en móvil baja al pie
     [| línea izquierda  producto |]
   ========================================================================== */
.composicion {
  --marco-color: var(--color-azul);
  --marco-g: var(--marco-grosor);
  --marco-margen: calc(var(--x) * 1.25);
  --marco-aire: max(16px, calc(var(--x) * .75));
  --tam-enfasis: calc(var(--x) * 1.2);
  --tam-nombre: calc(var(--x) * 1.5);
  --tam-desde: calc(var(--x) * .55);
  --tam-cifra: calc(var(--x) * 1.3);
  --tam-frase: calc(var(--x) * .6);
  /* La línea superior se alinea con la altura de mayúsculas de la primera línea del titular */
  --marco-cap: calc(var(--tam-primera, var(--tam-enfasis)) * .2);
  position: absolute; z-index: 2;
  inset: var(--marco-margen);
  display: grid;
  grid-template-columns: fit-content(36%) minmax(var(--marco-aire), 1fr);
  grid-template-rows: auto auto minmax(var(--marco-aire), 1fr);
  color: var(--color-blanco);
  pointer-events: none;
}
.composicion--sin-enfasis { --tam-primera: var(--tam-nombre); }

/* Colores de comunicación del marco (CI-STA p. 21) */
.composicion--amarillo { --marco-color: var(--color-amarillo); }
.composicion--naranja { --marco-color: var(--color-naranja); }
.composicion--rojo { --marco-color: var(--color-rojo); }
.composicion--azul-claro { --marco-color: var(--color-azul-claro); }
.composicion--azul { --marco-color: var(--color-azul); }
.composicion--turquesa { --marco-color: var(--color-turquesa); }
.composicion--verde { --marco-color: var(--color-verde); }
.composicion--jcw-rojo { --marco-color: var(--color-jcw-rojo); }

/* ---------- Titular y línea de oferta ---------- */
.composicion__titulo {
  grid-area: 1 / 1 / 2 / 2; margin: 0;
  font-family: var(--fuente-titulares); font-weight: var(--peso-regular);
  line-height: var(--lh-titular); letter-spacing: normal;
}
.composicion__enfasis { display: block; font-family: var(--fuente-texto); font-style: italic; font-weight: var(--peso-regular); font-size: var(--tam-enfasis); }
.composicion__nombre { display: block; font-weight: var(--peso-bold); text-transform: uppercase; font-size: var(--tam-nombre); }
.composicion__sub { grid-area: 2 / 1 / 3 / 2; margin-top: calc(var(--x) * .4); pointer-events: auto; }
.composicion__precio { margin: 0; font-family: var(--fuente-texto); line-height: 1; }
.composicion__desde { display: block; font-style: italic; font-size: var(--tam-desde); }
.composicion__cifra { display: block; margin-top: .06em; font-size: var(--tam-cifra); }
.composicion__frase {
  margin: calc(var(--x) * .3) 0 0;
  font-family: var(--fuente-texto); font-size: var(--tam-frase); line-height: var(--lh-titular);
  text-transform: uppercase; letter-spacing: normal;
}

/* ---------- Marco: cuatro líneas en la misma rejilla ---------- */
.composicion__linea { display: block; background: var(--marco-color); pointer-events: none; }
.composicion__linea--arriba { grid-area: 1 / 2 / 2 / 3; align-self: start; height: var(--marco-g); margin: var(--marco-cap) 0 0 var(--marco-aire); transform-origin: 0 50%; }
.composicion__linea--derecha { grid-area: 1 / 2 / 4 / 3; justify-self: end; width: var(--marco-g); margin-top: var(--marco-cap); transform-origin: 50% 0; }
.composicion__linea--abajo { grid-area: 3 / 1 / 4 / 3; align-self: end; height: var(--marco-g); transform-origin: 100% 50%; }
.composicion__linea--izquierda { grid-area: 3 / 1 / 4 / 2; justify-self: start; width: var(--marco-g); margin-top: var(--marco-aire); transform-origin: 50% 100%; }

/* ---------- Variante: titular abajo a la izquierda (diapositiva MINI Lifestyle, como su arte original) ----------
   La esquina abierta queda abajo a la izquierda: la línea izquierda baja desde arriba hasta antes del titular y la
   inferior empieza a la derecha del titular, a la altura de su última línea. Misma secuencia de animación. */
.composicion--abajo { grid-template-rows: minmax(var(--marco-aire), 1fr) auto auto; }
.composicion--abajo .composicion__titulo { grid-area: 2 / 1 / 3 / 2; }
.composicion--abajo .composicion__sub { grid-area: 3 / 1 / 4 / 2; }
.composicion--abajo .composicion__linea--arriba { grid-area: 1 / 1 / 2 / 3; margin: 0; }
.composicion--abajo .composicion__linea--derecha { grid-area: 1 / 2 / 4 / 3; margin-top: 0; margin-bottom: var(--marco-base); }
.composicion--abajo .composicion__linea--abajo { grid-area: 2 / 2 / 4 / 3; margin: 0 0 var(--marco-base) var(--marco-aire); }
.composicion--abajo .composicion__linea--izquierda { grid-area: 1 / 1 / 2 / 2; margin: 0 0 var(--marco-aire); }
/* Distancia desde el borde inferior de la caja de texto hasta la línea de base de la última línea */
.composicion--abajo { --marco-base: calc(var(--tam-nombre) * .22); grid-template-columns: fit-content(62%) minmax(var(--marco-aire), 1fr); }
/* Titular «ligero» (arte original de MINI Lifestyle): segunda línea en MINI Serif Regular y del mismo tamaño que la
   itálica; así entra en 2 líneas en escritorio y en 3 en móvil (máximo del manual) */
.composicion.composicion--ligera { --tam-nombre: var(--tam-enfasis); }   /* gana también a los tamaños móviles */
.composicion--ligera .composicion__nombre { font-weight: var(--peso-regular); }

/* ---------- Animación (CI-STA p. 24; tiempos medidos en mini.com.mx) ---------- */
@keyframes marco-horizontal { from { transform: scaleX(0); } }
@keyframes marco-vertical { from { transform: scaleY(0); } }
/* Inicio: ciclo de 6 s = intervalo del carrusel, en dos animaciones por línea (design.md §4.3, 1.3.1):
   · dibujo: sup 750 · der 250 · inf 250 · izq 750 ms (`marco-horizontal` / `marco-vertical`), y queda;
   · retiro: 500 ms cada línea desde los 4 s, hacia el otro extremo (la «cola» sigue a la «cabeza»). Sin relleno
     hacia atrás: mientras espera, manda el dibujo.
   El retiro solo va con el carrusel andando. Al detenerse (cursor o foco encima, pausa, pestaña oculta, ventana
   Owners Club que se cierra sobre el héroe) se quita SOLO el retiro: el dibujo conserva su nombre y el navegador
   no lo reinicia, así que sigue donde iba y el marco queda cerrado. Si ya se estaba retirando, inicio-carrusel.js
   lo vuelve a cerrar desde donde estaba. Al reanudarse, el retiro empieza 4 s después, con el siguiente cambio.
   Sin JS el carrusel está detenido (atributo en index.php): el marco se dibuja y queda. */
@keyframes marco-retiro-arriba { from { transform: scaleX(1); transform-origin: 100% 50%; } to { transform: scaleX(0); transform-origin: 100% 50%; } }
@keyframes marco-retiro-derecha { from { transform: scaleY(1); transform-origin: 50% 100%; } to { transform: scaleY(0); transform-origin: 50% 100%; } }
@keyframes marco-retiro-abajo { from { transform: scaleX(1); transform-origin: 0 50%; } to { transform: scaleX(0); transform-origin: 0 50%; } }
@keyframes marco-retiro-izquierda { from { transform: scaleY(1); transform-origin: 50% 0; } to { transform: scaleY(0); transform-origin: 50% 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* Inicio (carrusel): dibujo al entrar cada diapositiva, con el carrusel andando o detenido */
  .is-activa .composicion--ciclo .composicion__linea--arriba { animation: marco-horizontal .75s cubic-bezier(.42, 0, .58, 1) both; }
  .is-activa .composicion--ciclo .composicion__linea--derecha { animation: marco-vertical .25s cubic-bezier(.42, 0, .58, 1) .75s both; }
  .is-activa .composicion--ciclo .composicion__linea--abajo { animation: marco-horizontal .25s cubic-bezier(.42, 0, .58, 1) 1s both; }
  .is-activa .composicion--ciclo .composicion__linea--izquierda { animation: marco-vertical .75s cubic-bezier(.42, 0, .58, 1) 1.25s both; }
  /* Carrusel andando: el mismo dibujo (mismo nombre, mismos tiempos ⇒ no se reinicia) + el retiro */
  [data-carrusel]:not([data-carrusel-detenido]) .is-activa .composicion--ciclo .composicion__linea--arriba {
    animation: marco-horizontal .75s cubic-bezier(.42, 0, .58, 1) both, marco-retiro-arriba .5s cubic-bezier(.42, 0, .58, 1) 4s forwards;
  }
  [data-carrusel]:not([data-carrusel-detenido]) .is-activa .composicion--ciclo .composicion__linea--derecha {
    animation: marco-vertical .25s cubic-bezier(.42, 0, .58, 1) .75s both, marco-retiro-derecha .5s cubic-bezier(.42, 0, .58, 1) 4.5s forwards;
  }
  [data-carrusel]:not([data-carrusel-detenido]) .is-activa .composicion--ciclo .composicion__linea--abajo {
    animation: marco-horizontal .25s cubic-bezier(.42, 0, .58, 1) 1s both, marco-retiro-abajo .5s cubic-bezier(.42, 0, .58, 1) 5s forwards;
  }
  [data-carrusel]:not([data-carrusel-detenido]) .is-activa .composicion--ciclo .composicion__linea--izquierda {
    animation: marco-vertical .75s cubic-bezier(.42, 0, .58, 1) 1.25s both, marco-retiro-izquierda .5s cubic-bezier(.42, 0, .58, 1) 5.5s forwards;
  }
  /* Diapositiva que sale (sigue visible 0,7 s debajo de la que entra): con el carrusel andando, su marco ya se retiró,
     así que queda retirado; sin esto, al perder .is-activa sus líneas volvían a escala 1 y el marco reaparecía */
  [data-carrusel]:not([data-carrusel-detenido]) .heroe__diapositiva:not(.is-activa) .composicion--ciclo .composicion__linea { transform: scale(0); }
  /* Fichas: una vez, 300 ms después de cargar (sup 1300 ease-in · der 200 ease-in · inf 200 ease-in · izq 500 ease-out) */
  .composicion--una-vez .composicion__linea--arriba { animation: marco-horizontal 1.3s cubic-bezier(.42, 0, 1, 1) .3s both; }
  .composicion--una-vez .composicion__linea--derecha { animation: marco-vertical .2s cubic-bezier(.42, 0, 1, 1) 1.6s both; }
  .composicion--una-vez .composicion__linea--abajo { animation: marco-horizontal .2s cubic-bezier(.42, 0, 1, 1) 1.8s both; }
  .composicion--una-vez .composicion__linea--izquierda { animation: marco-vertical .5s cubic-bezier(0, 0, .58, 1) 2s both; }
}

/* ---------- Móvil: texto al 135 %, titular arriba y oferta / CTA al pie dentro del marco ---------- */
@media (max-width: 767px) {
  .composicion {
    /* 135 % de los tamaños móviles anteriores (pedido del usuario); en 320 px se ajusta al ancho */
    --tam-enfasis: min(1.856rem, 8.25vw);
    --tam-nombre: min(2.3625rem, 10.5vw);
    --tam-desde: 1.18rem;
    --tam-cifra: 2.3625rem;
    --tam-frase: 1.18rem;
    --marco-aire: 16px;
    grid-template-columns: fit-content(calc(100% - 32px)) minmax(var(--marco-aire), 1fr);
  }
  .composicion__sub {
    grid-area: 3 / 1 / 4 / 3; align-self: end; margin: 0;
    padding: var(--marco-aire) calc(var(--marco-g) + var(--marco-aire)) calc(var(--marco-g) + var(--marco-aire));
  }
  .composicion__frase { margin-top: 8px; }
}