/* ==========================================================================
   Fichas de modelo (y bloques que comparten las páginas de medidas)
   Diagramación del original (analisis-rea/paginas/ficha-modelo.md) con las correcciones de marca
   de design.md §7: titulares MINI Serif Bold en mayúsculas a la izquierda, texto en MINI Serif,
   botones rectangulares en MINI Sans, sin sombras ni esquinas redondeadas, sin letter-spacing.
   ========================================================================== */

.ficha { display: block; overflow-x: clip; }

/* ---------- Columna única de las fichas («en bloque», pedido del usuario) ----------
   Todas las fotos, videos, el visor 360°, los carruseles y los bloques media + texto comparten el mismo
   ancho y los mismos bordes que los títulos y textos: la columna de .contenedor y del mapa del sitio
   (base.css: --ancho-max 1200 px y 16 px de margen a cada lado). El héroe no la usa (composición a sangre).
   --ancho-ficha: para el ancho (width) de un elemento dentro de un bloque a todo el ancho.
   --margen-lateral-ficha: relleno (padding-inline) de un bloque a todo el ancho que conserva su fondo
   (tema oscuro del JCW). Los «100%» se resuelven donde se usa la variable: dan los mismos bordes. */
.ficha {
  --margen-ficha: 16px;
  --ancho-ficha: min(100% - 2 * var(--margen-ficha), var(--ancho-max));
  --margen-lateral-ficha: max(var(--margen-ficha), (100% - var(--ancho-max)) / 2);
}

/* ---------- Tema oscuro (bloques negros del original: JCW y medidas) ---------- */
.tema-oscuro { background: var(--color-negro); color: var(--color-blanco); }
.tema-oscuro :focus-visible { outline-color: var(--color-blanco); }

/* ---------- Titulares y textos ---------- */
.titular {
  margin: 0 0 12px;
  font-family: var(--fuente-titulares); font-weight: var(--peso-bold);
  font-size: clamp(28px, 4vw, 42px); line-height: var(--lh-titular);
  text-transform: uppercase; text-align: left;
}
.titular--mediano { font-size: clamp(22px, 2.6vw, 32px); }
.titular--grande { font-size: clamp(32px, 5vw, 56px); margin-bottom: 40px; }
.antetitulo {
  margin: 0 0 6px;
  font-family: var(--fuente-titulares); font-weight: var(--peso-bold);
  font-size: clamp(18px, 2.2vw, 28px); line-height: var(--lh-titular); text-transform: uppercase;
}
/* JCW: el rojo #CC0000 solo como acento (CI-STA p. 52–53), en tamaño de texto grande (contraste AA ≥ 3:1 sobre negro) */
.ficha--jcw .antetitulo, .ficha--jcw .titulo-seccion--pequeno .titular { color: var(--color-jcw-rojo); }
.ficha--jcw .antetitulo { font-size: clamp(20px, 2.2vw, 28px); }
.intro__texto, .media-texto__texto, .titulo-seccion__texto, .visor-seccion__texto, .carrusel__texto,
.preguntas__respuesta, .medidas-interiores__texto p {
  font-family: var(--fuente-texto); line-height: var(--lh-texto);
}
.intro__texto > :last-child, .media-texto__texto > :last-child, .titulo-seccion__texto > :last-child,
.visor-seccion__texto > :last-child, .carrusel__texto > :last-child, .preguntas__respuesta > :last-child { margin-bottom: 0; }
.media-texto__texto ul, .intro__texto ul { margin: 0 0 1em; padding-left: 1.25em; }
.media-texto__texto li + li { margin-top: .35em; }

/* ---------- Héroe (det) ---------- */
.heroe {
  position: relative; overflow: hidden;
  height: calc(100vh - var(--alto-cabecera)); height: calc(100dvh - var(--alto-cabecera)); min-height: 420px;
  background: var(--color-negro); color: var(--color-blanco);
}
.heroe__fondo, .heroe__fondo picture { position: absolute; inset: 0; }
.heroe__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 60% 55%); }
.heroe__contenido { position: relative; z-index: 3; padding: 42px 10% 48px; max-width: 760px; }
.heroe__boton { min-width: 190px; }

/* Imagen original (nombre y marco incrustados): el botón queda donde estaba en el original */
.heroe--original { --sep: 10rem; }
.heroe--sep-11 { --sep: 11rem; }
.heroe--sep-15 { --sep: 15rem; }
.heroe--original .heroe__boton { margin-top: calc(var(--sep) + 140px); margin-left: 190px; }

/* Foto limpia + composición de marca (css/marco.css, design.md §4.3). Mismo alto que el héroe del inicio
   (ventana menos cabecera, sin pasar de 16:9): el auto se ve del mismo tamaño en todo el sitio */
.heroe--foto { height: min(calc(100dvh - var(--alto-cabecera)), 56.25vw); min-height: 320px; }
/* Mismo tamaño de auto en todas las fichas: las tomas de estudio se amplían un 10 % hacia el auto */
@media (min-width: 768px) {
  .heroe--zoom-110 .heroe__fondo img { transform: scale(1.1); transform-origin: var(--foco, 60% 55%); }
}
.heroe--foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .22) 34%, rgb(0 0 0 / 0) 56%);
}

/* ---------- Principales especificaciones (cm / cmjcw) ---------- */
.especificaciones { padding: 32px 0 48px; }
.especificaciones__interior { width: var(--ancho-ficha); margin-inline: auto; }
.especificaciones__titulo {
  margin: 0 0 6px; font-size: clamp(18px, 2vw, 24px); text-transform: uppercase;
}
.especificaciones__subtitulo {
  margin: 0 0 24px; font-family: var(--fuente-titulares); font-weight: var(--peso-bold);
  font-size: clamp(26px, 3.5vw, 50px); line-height: var(--lh-titular); text-transform: uppercase;
}
.especificaciones__rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 22px 40px; align-items: center; }
.especificaciones__figura { margin: 0; }
.especificaciones__figura img { width: 100%; height: auto; }
.especificaciones__pie { margin-top: 10px; font-family: var(--fuente-ui); font-size: .875rem; color: var(--color-texto-secundario); }
.tema-oscuro .especificaciones__pie { color: var(--color-blanco); }
.especificaciones__lista { margin: 0; }
.especificaciones__dato + .especificaciones__dato { margin-top: 18px; }
.especificaciones__dato dt { font-family: var(--fuente-ui); font-size: 1.125rem; line-height: 1.3; }
.especificaciones__dato dd {
  margin: 4px 0 0; font-family: var(--fuente-texto); font-weight: var(--peso-bold);
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.2;
}
.especificaciones__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
.especificaciones__acciones .boton { min-width: 230px; }

/* ---------- Título + texto + media (ip) ---------- */
.intro { padding: 40px 0 48px; }
.intro__interior { width: min(100% - 40px, 1160px); margin-inline: auto; }
.intro__texto { max-width: 80ch; font-size: 1rem; }
.intro__media { width: min(100% - 40px, 1160px); margin: 22px auto 0; }
.intro__media img, .intro__media video { width: 100%; height: auto; }
/* Fichas: texto y media en la columna única (las páginas de medidas conservan su diagramación) */
.ficha:not(.medidas) .intro__interior, .ficha:not(.medidas) .intro__media { width: var(--ancho-ficha); }

/* ---------- Visor 360° (vis) ---------- */
.visor-seccion { padding: 32px 0 48px; }
.visor-seccion__interior { width: var(--ancho-ficha); margin-inline: auto; }
.visor-seccion__texto { max-width: 80ch; margin-bottom: 18px; }
.visor__pista { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-family: var(--fuente-ui); font-size: .8125rem; }
.visor__pista-icono { width: 20px; height: 20px; }
.visor { position: relative; width: var(--ancho-ficha); margin-inline: auto; }
.visor__escena { position: relative; overflow: hidden; background: var(--gris-fondo); user-select: none; -webkit-user-select: none; }
.tema-oscuro .visor__escena { background: transparent; }
.visor--activo .visor__escena { cursor: grab; touch-action: pan-y; }
.visor--arrastrando .visor__escena { cursor: grabbing; }
.visor__imagen { width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.visor__escena:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 4px; }
.tema-oscuro .visor__escena:focus-visible { outline-color: var(--color-blanco); }
.visor__carga {
  position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 6px 10px;
  background: var(--color-blanco); color: var(--color-negro); font-family: var(--fuente-ui); font-size: .8125rem;
}
.visor__controles { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; gap: 8px; }
.visor__boton, .carrusel__flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tactil-min); height: var(--tactil-min); padding: 0;
  background: var(--color-blanco); color: var(--color-negro); border: 2px solid var(--color-negro); border-radius: 0;
  transition: background-color var(--transicion), color var(--transicion);
}
.visor__boton:hover, .carrusel__flecha:hover { background: var(--color-negro); color: var(--color-blanco); }
.tema-oscuro .visor__boton { border-color: var(--color-blanco); }
.ficha--jcw .visor__boton:hover { background: var(--color-jcw-rojo); border-color: var(--color-jcw-rojo); color: var(--color-blanco); }

/* ---------- Carrusel de características (sfv) y galería (gal) ---------- */
/* La ventana ocupa toda la columna única; las flechas van encima de la imagen, a los lados y centradas
   en su alto (misma celda de la rejilla), para que la media quede alineada con los demás bloques */
.carrusel {
  --alto-media-carrusel: clamp(360px, 34vw, 620px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 32px var(--margen-lateral-ficha) 48px;
}
.carrusel__ventana { grid-column: 1; grid-row: 1; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
/* Con JS la pista se mueve con transform: sin scroll-snap (el navegador re-anclaba la vista al rotar las tarjetas
   y el carrusel saltaba y se regresaba; design.md 1.4.1, CG-50) */
.carrusel--js .carrusel__ventana { overflow: hidden; touch-action: pan-y; scroll-snap-type: none; }
.carrusel--js .carrusel__elemento { scroll-snap-align: none; }
.carrusel__pista { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.carrusel--animando .carrusel__pista { transition: transform .35s ease; }
.carrusel__elemento { flex: 0 0 calc(50% - 7px); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--gris-fondo); }
.carrusel__media img, .carrusel__media video { width: 100%; height: var(--alto-media-carrusel); object-fit: cover; }
.carrusel__cuerpo { padding: 14px 14px 18px; }
.carrusel__titulo {
  margin: 0 0 8px; font-family: var(--fuente-titulares); font-weight: var(--peso-bold);
  font-size: clamp(22px, 2.4vw, 34px); line-height: var(--lh-titular); text-transform: uppercase;
}
.carrusel__texto { font-size: .9375rem; line-height: 1.55; }
.carrusel__flecha {
  grid-column: 1; grid-row: 1; z-index: 1; align-self: start;
  width: 54px; height: 54px; margin-top: calc(var(--alto-media-carrusel) / 2); transform: translateY(-50%);
}
.carrusel__flecha--anterior { justify-self: start; margin-left: 12px; }
.carrusel__flecha--siguiente { justify-self: end; margin-right: 12px; }

/* ---------- Media + texto (fi / fd) ---------- */
.media-texto {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px 40px; align-items: center;
  padding: 34px clamp(16px, 4vw, 56px);
}
.media-texto--media-derecha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
/* Fichas: el bloque (media + texto) llega a los mismos bordes de la columna única; la sección sigue a todo el
   ancho para conservar el fondo negro del tema oscuro (las páginas de medidas conservan su diagramación) */
.ficha:not(.medidas) .media-texto { padding-inline: var(--margen-lateral-ficha); }
.media-texto__media img, .media-texto__media video { width: 100%; height: clamp(320px, 34vw, 620px); object-fit: cover; }
.media-texto__texto { font-size: 1rem; }

/* ---------- Título de sección (st) ---------- */
.titulo-seccion { padding: 24px 0 12px; }
.titulo-seccion__interior { width: var(--ancho-ficha); margin-inline: auto; }
.titulo-seccion .titular { font-size: clamp(22px, 3vw, 34px); }
.titulo-seccion--pequeno .titular { font-size: 1.25rem; }
.titulo-seccion__texto { max-width: 80ch; font-size: 1rem; }

/* ---------- Preguntas frecuentes (faq) ---------- */
.preguntas__interior { width: min(100% - 40px, 900px); margin-inline: auto; padding: 30px 0 50px; }
.preguntas__item { border-bottom: 1px solid var(--gris-linea); }
.preguntas__pregunta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--tactil-min); padding: 12px 0; cursor: pointer; list-style: none;
  font-family: var(--fuente-ui); font-weight: var(--peso-bold); font-size: 1rem; line-height: 1.4;
}
.preguntas__pregunta::-webkit-details-marker { display: none; }
.preguntas__pregunta:hover { text-decoration: underline; text-underline-offset: 4px; }
.preguntas__mas, .preguntas__menos { width: 20px; height: 20px; }
.preguntas__menos, .preguntas__item[open] .preguntas__mas { display: none; }
.preguntas__item[open] .preguntas__menos { display: block; }
.preguntas__respuesta { padding: 0 0 16px; font-size: .9375rem; }

/* ---------- Siguientes pasos (sp, JCW) ---------- */
.siguientes-pasos { padding: 60px var(--margen-lateral-ficha) 80px; }
.siguientes-pasos__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.siguientes-pasos__paso { display: flex; flex-direction: column; gap: 16px; }
.siguientes-pasos__imagen, .siguientes-pasos__paso img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--gris-fondo); }
.siguientes-pasos__titulo { margin: 0; font-size: 1.375rem; line-height: 1.2; text-transform: uppercase; }
.siguientes-pasos__texto { margin: 0; font-size: 1rem; line-height: 1.5; }
.siguientes-pasos__boton { align-self: flex-start; }

/* ---------- Foto a sangre (sfoto) ---------- */
.foto-sangre img { width: 100%; height: auto; }
/* En las fichas también sigue la columna única (en las medidas sigue a todo el ancho) */
.ficha:not(.medidas) .foto-sangre { padding-inline: var(--margen-lateral-ficha); }

/* ---------- Puntos de quiebre ---------- */
@media (max-width: 1024px) {
  .siguientes-pasos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (max-width: 960px) {
  .heroe--original { min-height: 360px; }
  .heroe__contenido { padding: 32px 22px 40px; max-width: 90%; }
}
@media (max-width: 900px) {
  .especificaciones__rejilla { grid-template-columns: 1fr; }
  .media-texto, .media-texto--media-derecha { grid-template-columns: 1fr; }
  .media-texto--media-derecha .media-texto__media { order: 2; }
  .media-texto__media img, .media-texto__media video { height: clamp(280px, 70vw, 520px); }
  .carrusel { --alto-media-carrusel: clamp(280px, 58vw, 520px); gap: 10px; }
  .carrusel__flecha { width: 46px; height: 46px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .heroe--foto .composicion__sub { justify-self: center; }
  .heroe--foto .heroe__boton { width: auto; min-width: 200px; }
}
@media (max-width: 767px) {
  /* Imagen original con el nombre incrustado: se muestra completa (en el original quedaba recortada) */
  .heroe--original { height: auto; min-height: 0; background: var(--color-blanco); }
  .heroe--original .heroe__fondo, .heroe--original .heroe__fondo picture { position: static; }
  .heroe--original .heroe__fondo img { height: auto; }
  .heroe--original .heroe__contenido { max-width: none; padding: 16px; }
  .heroe--original .heroe__boton { width: 100%; margin: 0; }
  .ficha--jcw .heroe--original { background: var(--color-negro); }
  /* Foto limpia: distribución del ejemplo móvil de MINI México (foto alta que deja asomar 72 px de lo
     siguiente, mínimo 460 px; titular arriba sobre el degradado y «Cotízalo» al pie dentro del marco) */
  .heroe--foto { height: max(460px, calc(100svh - var(--alto-cabecera) - 72px)); }
  .heroe--foto .heroe__fondo img { object-position: var(--foco-movil, 50% 50%); }
  .heroe--foto::after { background: linear-gradient(180deg, rgb(0 0 0 / .65) 0%, rgb(0 0 0 / .65) 8%, rgb(0 0 0 / 0) 34%); }
  .heroe--foto .heroe__boton { width: 100%; }

  /* Visor: mismo ancho de columna que los demás medios; el cuadro se amplía un 15 % (antes 40 %, que cortaba
     la trompa y la cola del auto de perfil: el auto ocupa ~9,4 %–90,6 % del cuadro y la ventana visible
     queda en 6,5 %–93,5 %), así el auto se ve completo en las 36 vistas */
  .visor__imagen { width: 115%; max-width: none; margin-left: -7.5%; }
  /* Flechas del visor debajo de la imagen (sobre la foto tapaban el frente y las ruedas del auto) */
  .visor__controles { position: static; justify-content: flex-end; margin-top: 10px; }

  /* Carrusel: un elemento por vista y flechas debajo para no estrechar la imagen */
  .carrusel { grid-template-columns: 1fr 1fr; }
  .carrusel--js .carrusel__ventana, .carrusel__ventana { grid-column: 1 / -1; grid-row: 1; }
  .carrusel__flecha { align-self: center; margin: 0; transform: none; }
  .carrusel__flecha--anterior { grid-column: 1; grid-row: 2; justify-self: end; }
  .carrusel__flecha--siguiente { grid-column: 2; grid-row: 2; justify-self: start; }
  .carrusel__elemento { flex-basis: 100%; }
  .carrusel__flecha { width: var(--tactil-min); height: var(--tactil-min); }

  .especificaciones__acciones .boton { width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
  .siguientes-pasos__rejilla { grid-template-columns: 1fr; }
}

/* ---------- Esquinas redondeadas del original ---------- */
.carrusel__elemento { border-radius: var(--radio-tarjeta); overflow: hidden; }
.visor__boton, .carrusel__flecha { border-radius: 50%; }