/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — INSPIRACIÓN
   ───────────────────────────────────────────────────────────────────────────
   Una galería vertical, de cine: el bucle manda y el texto se queda abajo, en
   voz baja. Todo sale de los tokens del sitio (estetica.css: --g0…--g10,
   --tinta, --acento, --linea). Ningún color suelto: el único que no es un
   token es el negro del velo sobre el video, que es una sombra.

   Sin degradados de color. Filetes de 1 px.
   Vuelta 4 de la portada (25/10/2026, arreglo 2): sin rótulos chicos en
   mayúsculas espaciadas («INSPIRACIÓN», «NOCHE · VIDEO», «PROMPT») y el título
   entero en la misma letra y color; las reglas de botones sin caja y sin
   resaltado amarillo valen para todo el sitio.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('muestra-video.css');

.insp {
  --i-linea: var(--linea-fuerte, rgba(213, 232, 240, .36));
  --i-linea-suave: var(--linea, rgba(213, 232, 240, .17));
  --i-panel: var(--g2, #304b59);
  --i-panel-2: var(--g3, #3b5665);
  --i-tinta: var(--tinta, #edf2f4);
  --i-tenue: var(--tinta-dim, #d5e1e7);
  --i-acento: var(--acento, var(--gr-rosa));
  --i-acento-tinta: var(--acento-ink, #28161f);
  --i-error: #ffb4a8;
  max-width: 1280px;
  box-sizing: border-box;
}
.insp *, .insp *::before, .insp *::after { box-sizing: border-box; }
.insp [hidden], .insp-dialogo [hidden] { display: none !important; }
.insp :is(button, a, summary):focus-visible,
.insp-dialogo :is(button, a, input):focus-visible { outline: 2px solid var(--i-acento); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════ CABECERA ══ */
.insp-cabeza { max-width: 760px; margin: clamp(10px, 3vw, 34px) 0 clamp(20px, 3vw, 34px); }
.insp-titulo {
  margin: 0 0 16px;
  font-family: var(--f-rara);
  font-weight: 600; font-size: clamp(34px, 7vw, 78px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance;
}
.insp-bajada { margin: 0; max-width: 58ch; font-size: 15.5px; line-height: 1.65; color: var(--i-tenue); }
.insp-a-tendencias { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--i-tinta); text-underline-offset: .22em; }
.insp-estado { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; color: var(--i-tenue); }
.insp-estado:empty { min-height: 0; margin: 0; }

/* ══════════════════════════════════════════════════════════════ FILTROS ══ */
.insp-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(18px, 3vw, 30px); }
.insp-filtro {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--i-linea); border-radius: 999px; background: transparent; color: var(--i-tinta);
  font: 500 13px/1 var(--sans); letter-spacing: .01em;
  transition: background .15s linear, border-color .15s linear;
}
.insp-filtro:hover { border-color: var(--i-tinta); }
.insp-filtro[aria-pressed="true"] { background: var(--i-tinta); border-color: var(--i-tinta); color: var(--g1, #354f5d); font-weight: 600; }

/* ════════════════════════════════════════════════════════════ LA REJILLA ══ */
.insp-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-bottom: 28px; }
.insp-tarjeta { min-width: 0; }
.insp-tarjeta-boton {
  display: block; width: 100%; padding: 0; text-align: left; cursor: pointer;
  border: 1px solid var(--i-linea-suave); border-radius: 16px; overflow: hidden;
  background: var(--i-panel); color: inherit; font: inherit;
  transition: border-color .2s linear, transform .2s ease;
}
.insp-tarjeta-boton:hover { border-color: var(--i-linea); transform: translateY(-2px); }
.insp-medio { position: relative; aspect-ratio: 9 / 14; background: var(--g1, #354f5d); overflow: hidden; }
.insp-medio :is(video, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.insp-info { padding: 14px 16px 16px; display: grid; gap: 6px; }
.insp-tarjeta-titulo { margin: 0; font-family: var(--f-rara); font-weight: 600; font-size: 19px; letter-spacing: -.025em; line-height: 1.15; }
.insp-tarjeta-bajada { margin: 0; font-size: 13px; line-height: 1.5; color: var(--i-tenue); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.insp-precio { margin: 4px 0 0; font: 600 11px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--i-acento); }
.insp-precio[data-gratis="true"] { color: var(--verde, #9dd5b7); }
.insp-mas {
  display: block; margin: 0 auto 36px; min-height: 46px; padding: 0 26px;
  border: 1px solid var(--i-linea); border-radius: 999px; background: transparent; color: var(--i-tinta); font: 500 13px/1 var(--sans, sans-serif);
}

/* ═════════════════════════════════════════════════ IDEAS PARA EMPEZAR ══ */
.insp-ideas { margin: clamp(10px, 3vw, 30px) 0 40px; }
.insp-ideas-cabeza { max-width: 700px; margin-bottom: 24px; }
.insp-ideas-cabeza h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 40px); }
.insp-ideas-cabeza p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--i-tenue); }
.insp-ideas-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* Las cuatro escenas de la portada en una sola fila (vuelta 4): en tres columnas la cuarta quedaba
   sola abajo, con un hueco al lado. En 1100 pasan a dos por fila y en el celular a una. */
.insp-ideas-portada { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 34px; }
/* Los formatos para arrancar (T3): sin imagen, cinco en fila; en 1100 tres y en el celular uno. */
.insp-formatos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 34px; }
.insp-formato { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--i-linea-suave); border-radius: 0; background: var(--i-panel); }
.insp-formato h4 { margin: 0; font-family: var(--f-rara); font-size: 19px; letter-spacing: -.02em; line-height: 1.2; }
.insp-formato p { margin: 0; flex: 1; font-size: 14px; line-height: 1.45; }
@media (max-width: 1100px) { .insp-formatos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .insp-formatos { grid-template-columns: minmax(0, 1fr); } }
.insp-idea { min-width: 0; overflow: hidden; border: 1px solid var(--i-linea-suave); border-radius: 16px; background: var(--i-panel); }
/* 16:10, como los cuadros de los videos del dueño (portada-muestras/): se ven enteros, sin recorte. */
.insp-idea-medio { aspect-ratio: 16 / 10; overflow: hidden; background: var(--g1, #354f5d); }
.insp-idea-medio :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.insp-idea-texto { padding: 18px 20px 20px; display: grid; gap: 8px; }
.insp-idea h3 { margin: 0; font-family: var(--f-rara); font-size: 21px; letter-spacing: -.025em; line-height: 1.2; }
.insp-ideas-subtitulo { margin: 34px 0 16px; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.03em; }
/* Las muestras propias: dos por fila (son cuatro), el video en 16:9 y los botones siempre abajo.
   Los puntos de corte de más abajo las pasan a una columna en el celular. */
.insp-ideas-muestras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.insp-ideas-muestras .insp-idea { display: flex; flex-direction: column; }
.insp-ideas-muestras .insp-idea-medio { flex: none; aspect-ratio: 16 / 9; }
.insp-ideas-muestras .insp-idea-texto { flex: 1; gap: 6px; grid-template-rows: auto auto 1fr; } /* título, sello y pedido (sin el rótulo desde la vuelta 4) */
.insp-ideas-muestras .insp-idea-texto h3 { margin-bottom: 2px; }
.insp-ideas-muestras .muestra-prompt { grid-template-rows: 1fr auto; }
.insp-idea-usar { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--i-acento); text-decoration: none; }
.insp-idea-usar:hover { text-decoration: underline; text-underline-offset: 4px; }
.insp-nota { margin: 18px 0 8px; max-width: 72ch; font-size: 12px; line-height: 1.6; color: var(--i-tenue); }

/* ═══════════════════════════════════════════════════════════ EL DETALLE ══ */
.insp-dialogo {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 1px solid var(--i-linea); border-radius: 22px; overflow: auto;
  background: var(--g2, #304b59); color: var(--tinta, #edf2f4);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
}
.insp-dialogo::backdrop { background: rgba(6, 8, 10, .74); }
.insp-dialogo[open] { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.insp-dialogo * { box-sizing: border-box; }
.insp-dialogo p { margin: 0; }
.insp-cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px;
  border: 1px solid var(--i-linea, rgba(213, 232, 240, .36)); border-radius: 50%;
  background: rgba(6, 8, 10, .55); color: #f2f2f0; font-size: 15px; cursor: pointer;
}
.insp-dialogo-medio { background: var(--g1, #354f5d); min-height: 280px; display: grid; place-items: center; }
.insp-dialogo-medio :is(video, img) { display: block; width: 100%; max-height: calc(100dvh - 34px); object-fit: contain; }
.insp-dialogo-cuerpo { padding: clamp(22px, 3vw, 36px); display: grid; align-content: start; gap: 16px; min-width: 0; }
.insp-dialogo-titulo { margin: 0; padding-right: 44px; font-family: var(--f-rara); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.04em; line-height: 1.05; }
.insp-dialogo-bajada { font-family: var(--f-serif); font-size: 20px; line-height: 1.35; color: var(--tinta-dim, #d5e1e7); }
.insp-datos { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; font-size: 14px; }
.insp-datos dt { font: 600 10.5px/1.7 var(--sans, sans-serif); letter-spacing: .13em; text-transform: uppercase; color: var(--acento, var(--gr-rosa)); }
.insp-datos dd { margin: 0; color: var(--tinta, #edf2f4); }
.insp-acciones, .insp-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.insp-zona:empty { display: none; }
.insp-legal { font-size: 11.5px; color: var(--tinta-dim, #d5e1e7); }
.insp-runway, .insp-denunciar { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.insp-runway:hover, .insp-denunciar:hover { color: var(--acento, var(--gr-rosa)); }

/* Botones */
.insp-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 700 14px/1 var(--sans, sans-serif); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: filter .15s linear, background .15s linear;
}
.insp-boton-acento { background: var(--acento, var(--gr-rosa)); color: var(--acento-ink, #28161f); }
.insp-boton-acento:hover { filter: brightness(1.08); }
.insp-boton-borde { background: transparent; border-color: var(--linea-fuerte, rgba(213, 232, 240, .36)); color: var(--tinta, #edf2f4); }
.insp-boton-borde:hover { border-color: var(--tinta, #edf2f4); }
.insp-boton:disabled { opacity: .5; cursor: not-allowed; }
.insp-enlace { padding: 10px 0; min-height: 44px; border: 0; background: none; color: var(--tinta, #edf2f4); font: 500 13px/1 var(--sans, sans-serif); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; text-align: left; }

/* ═══════════════════════════════════════════════════════════════ LA HOJA ══ */
.insp-hoja { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--linea-fuerte, rgba(213, 232, 240, .36)); border-radius: 16px; background: var(--g3, #3b5665); }
.insp-hoja-titulo { margin: 0; font: 600 11px/1.4 var(--sans, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--acento, var(--gr-rosa)); }
.insp-hoja-cuerpo { display: grid; gap: 14px; }
.insp-ayuda { font-size: 13.5px; color: var(--tinta-dim, #d5e1e7); }
.insp-falla { font-size: 13.5px; color: var(--i-error, #ffb4a8); }
.insp-aviso { padding: 10px 12px; border: 1px solid var(--linea, rgba(213, 232, 240, .17)); border-radius: 10px; font-size: 13.5px; color: var(--tinta, #edf2f4); }
.insp-permiso { display: grid; gap: 8px; justify-items: start; }
.insp-recientes { display: grid; gap: 8px; }
.insp-recientes-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.insp-reciente { width: 64px; height: 64px; padding: 0; border: 1px solid var(--linea-fuerte, rgba(213, 232, 240, .36)); border-radius: 12px; overflow: hidden; background: none; cursor: pointer; }
.insp-reciente:hover { border-color: var(--acento, var(--gr-rosa)); }
.insp-reciente img { display: block; width: 100%; height: 100%; object-fit: cover; }
.insp-tarjeta-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.insp-tarjeta-plan:not(:has(.insp-foto)) { grid-template-columns: minmax(0, 1fr); }
.insp-foto { width: 108px; border-radius: 12px; display: block; }
.insp-tarjeta-datos { display: grid; gap: 12px; min-width: 0; }
.insp-precio-linea { font-size: 15px; }
.insp-precio-linea strong { font-weight: 700; }
.insp-casilla { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.5; cursor: pointer; min-height: 44px; }
.insp-casilla input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--acento, var(--gr-rosa)); }
.insp-avance { display: grid; gap: 12px; }
.insp-avance-titulo { font-family: var(--f-rara); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.insp-avance-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.insp-avance-lista li { display: flex; gap: 10px; align-items: baseline; color: var(--tinta-dim, #d5e1e7); }
.insp-avance-lista li.activa { color: var(--tinta, #edf2f4); }
.insp-punto { width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.insp-avance-lista li.hecho .insp-punto, .insp-avance-lista li.activa .insp-punto { background: currentColor; }
.insp-resultado-medio :is(video, img) { display: block; width: 100%; max-height: 52dvh; object-fit: contain; border-radius: 12px; background: var(--g1, #354f5d); }

/* ═══════════════════════════════════════════════════════════ RESPONSIVO ══ */
@media (max-width: 1100px) {
  .insp-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insp-ideas-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .insp-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .insp-info { padding: 12px 12px 14px; }
  .insp-tarjeta-titulo { font-size: 16px; }
  .insp-tarjeta-bajada { display: none; }
  .insp-filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .insp-filtro { flex: none; }
  .insp-ideas-grilla { grid-template-columns: minmax(0, 1fr); }
  .insp-dialogo {
    width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; border-inline: 0; border-bottom: 0;
  }
  .insp-dialogo[open] { grid-template-columns: minmax(0, 1fr); }
  .insp-dialogo-medio :is(video, img) { max-height: 46dvh; }
  .insp-tarjeta-plan { grid-template-columns: minmax(0, 1fr); }
  .insp-foto { width: 96px; }
  .insp-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .insp-datos dd { margin-bottom: 10px; }
  .insp-boton { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .insp *, .insp-dialogo * { transition: none !important; }
  .insp-tarjeta-boton:hover { transform: none; }
}

/* Cierre de la portada (25/10/2026). Revisión de la vuelta 4-2: «Hechas en Sweet Little Trauma» y «Más
   ejemplos» traen dos tarjetas cada una, y en tres columnas la tercera quedaba vacía al lado. Con dos
   tarjetas, la grilla va a dos columnas (de 1100 para abajo ya son dos). */
@media (min-width: 1101px) {
  .insp-ideas-grilla:not(.insp-ideas-portada):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}