/**
 * Diseñador «Crea tu idea» — TRONGO
 *
 * Concepto: la interfaz como hoja de taller serigráfico. Marcas de registro en
 * las esquinas del visor, tramado de semitono en el fondo, cotas en
 * monoespaciada con cifras tabulares y el magenta de marca usado como tinta
 * directa, no como decoración.
 *
 * Tipografía: Roboto Slab y Roboto, que el tema ya carga. Cero peticiones extra.
 *
 * Todo cuelga de `.tci`, con reseteo explícito de lo que el tema, Elementor y
 * los Code Snippets globales suelen pisar (botones, inputs, listas, márgenes).
 */

.tci {
  /* Fondo de marca: negro con el patrón del logotipo TRONGO, tal y como viene
     en «PATRON NEGRO CONSTRUCTOR CAMISETAS». El magenta y el ciruela quedan
     para los acentos (botones, cotas), que es donde la marca los usa. */
  --tci-ink: #F6F1EC;
  --tci-ink-2: #FFFFFF;
  --tci-plum: #4A0037;
  --tci-accent: #A5087D;
  --tci-accent-hot: #E8189F;
  --tci-paper: #0E0E0E;
  --tci-line: rgba(14, 14, 14, 0.14);
  --tci-line-soft: rgba(14, 14, 14, 0.07);
  --tci-text: #0E0E0E;
  --tci-muted: rgba(14, 14, 14, 0.62);
  --tci-danger: #C0392B;

  --tci-display: 'Roboto Slab', ui-serif, Georgia, serif;
  --tci-body: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  --tci-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Roboto Mono', Menlo, monospace;

  --tci-gap: 1rem;
  --tci-radius: 2px;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: min(88svh, 780px);
  margin: 0;
  padding: 0;
  color: var(--tci-text);
  font-family: var(--tci-body);
  font-size: 16px;
  line-height: 1.45;
  background: var(--tci-ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Fondo de marca: el patrón del logotipo, repetido a su escala nativa
   (92 × 236). Invertido y oscurecido para leerse como textura sutil sobre el
   fondo claro. Sin el tinte morado ni viñeteado. */
.tci::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url('../img/trongo-pattern.svg');
  background-repeat: repeat;
  background-size: 92px 236px;
  opacity: 0.2;
  filter: invert(1) brightness(0.45);
}

.tci > * { position: relative; z-index: 1; }

/* --- Reseteo defensivo ---------------------------------------------------
   El sitio inyecta CSS global desde el tema, Elementor y tres Code Snippets.
   Aquí se neutraliza lo que suelen tocar, sin recurrir a `all: revert`, que
   arrasaría también con lo que sí queremos heredar.

   Todo va dentro de `:where()`, que aporta especificidad CERO. Sin eso,
   `.tci button` (0-1-1) le ganaría a `.tci-chip` (0-1-0) y los componentes se
   quedarían sin fondo ni borde — que es exactamente lo que pasaba. */
:where(.tci) :where(button, input, textarea, select, label, p, h2, h3, ul, li, a) {
  margin: 0;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
}
:where(.tci) :where(button) {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
:where(.tci) :where(button:disabled) { cursor: not-allowed; }
:where(.tci) :where(ul) { list-style: none; padding: 0; }
.tci *, .tci *::before, .tci *::after { box-sizing: border-box; }

/* Garantía de que un elemento con `hidden` está oculto de verdad: el CSS del
   autor (p. ej. display:flex en .tci-success) pisaría el `display:none` que
   aplica el atributo hidden y el bloque "Recibido" aparecería dentro del
   diálogo antes de enviar. */
:where(.tci) [hidden] { display: none !important; }

.tci :focus-visible {
  outline: 2px solid var(--tci-accent-hot);
  outline-offset: 2px;
}

/* ========================================================== ESCENARIO ===
   Mobile-first: el visor crece y el selector de cara NO flota sobre la prenda
   (iba encima del pecho). Va en una franja propia bajo el canvas. */

.tci-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 52svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.tci-viewer {
  position: relative;
  flex: 1 1 auto;
  min-height: 42svh;
  width: 100%;
}
.tci-viewer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}
.tci-viewer canvas.is-dragging { cursor: grabbing; }

/* Marcas de registro: el guiño serigráfico que da carácter a todo el conjunto. */
.tci-stage::before,
.tci-stage::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0.4;
  z-index: 2;
  background:
    linear-gradient(var(--tci-paper), var(--tci-paper)) center/1px 100% no-repeat,
    linear-gradient(var(--tci-paper), var(--tci-paper)) center/100% 1px no-repeat;
  mask: radial-gradient(circle at center, transparent 0 4px, #000 5px);
}
.tci-stage::before { top: 10px; left: 10px; }
.tci-stage::after { bottom: auto; top: 10px; right: 10px; }

.tci-stage.is-dropping {
  outline: 2px dashed var(--tci-accent-hot);
  outline-offset: -8px;
}

.tci-flat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Selector de vista: franja bajo el canvas, no overlay. */
.tci-sides {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 3px;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  margin: 0.35rem auto 0.15rem;
  padding: 3px;
  background: rgba(246, 241, 236, 0.92);
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(14, 14, 14, 0.04);
}
.tci-sides button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0.4rem 0.75rem;
  font-family: var(--tci-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tci-muted);
  border-radius: 1px;
  transition: color 0.18s ease, background-color 0.18s ease;
  white-space: nowrap;
}
.tci-sides button.is-active {
  color: var(--tci-ink);
  background: var(--tci-paper);
}
/* Punto: esta cara ya tiene diseño subido. */
.tci-side-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tci-accent-hot);
  box-shadow: 0 0 0 1px rgba(14, 14, 14, 0.15);
  flex: 0 0 auto;
}
.tci-sides button.is-active .tci-side-dot {
  background: var(--tci-accent-hot);
  box-shadow: 0 0 0 1px rgba(246, 241, 236, 0.35);
}

/* Hint: en flujo bajo el selector, sin tapar la prenda. */
.tci-hint {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--tci-muted);
  padding: 0.15rem 1rem 0.55rem;
  pointer-events: none;
  line-height: 1.35;
}

.tci-status {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  max-width: min(22rem, calc(100% - 2rem));
  padding: 0.7rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  background: rgba(246, 241, 236, 0.94);
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
}
.tci-status.is-error { border-color: var(--tci-danger); color: var(--tci-danger); }
.tci-status.is-warn { border-color: var(--tci-accent-hot); }

/* ================================================================ PANEL === */

.tci-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(246, 241, 236, 0.82), rgba(246, 241, 236, 0.98));
  border-top: 1px solid var(--tci-line);
  backdrop-filter: blur(14px);
}

.tci-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tci-row-color {
  align-items: flex-start;
}

.tci-label {
  flex: 0 0 auto;
  min-width: 4.2rem;
  padding-top: 0.45rem;
  font-family: var(--tci-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tci-muted);
}
.tci-row:not(.tci-row-color) .tci-label { padding-top: 0; }

/* Fichas de prenda. */
.tci-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tci-chip {
  min-height: 40px;
  padding: 0.42rem 0.9rem;
  font-size: 0.82rem;
  color: var(--tci-muted);
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.tci-chip:hover { color: var(--tci-text); border-color: var(--tci-paper); }
.tci-chip[aria-pressed='true'] {
  color: var(--tci-ink);
  background: var(--tci-paper);
  border-color: var(--tci-paper);
  font-weight: 500;
}

/* Muestras de color ≥ 40×40 (hit area táctil). background-color real para que
   tests y accesibilidad lean el hex sin truco de capas. */
.tci-swatches {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  flex: 1 1 12rem;
}
.tci-swatch {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: var(--swatch);
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  transition: transform 0.16s ease;
}
.tci-swatch:hover { transform: translateY(-2px); }
.tci-swatch[aria-pressed='true'] {
  box-shadow: 0 0 0 2px var(--tci-ink), 0 0 0 4px var(--tci-accent-hot);
}

.tci-color-name {
  flex: 0 0 100%;
  margin: 0.15rem 0 0 0;
  padding-left: 0;
  font-size: 0.78rem;
  color: var(--tci-text);
  font-variant-numeric: tabular-nums;
}
/* En móvil el nombre del color va bajo las muestras, alineado al bloque. */
@media (max-width: 899px) {
  .tci-row-color {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .tci-row-color .tci-label {
    padding-top: 0;
    min-width: 0;
  }
  .tci-swatches {
    flex: 1 1 auto;
    gap: 0.4rem;
  }
  .tci-color-name {
    margin: 0;
    font-size: 0.8rem;
  }
}
@media (min-width: 900px) {
  .tci-color-name {
    flex: 0 0 auto;
    margin: 0.45rem 0 0 0;
    min-width: 5.5rem;
  }
}

/* Bloque del diseño de la cara activa. */
.tci-art {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  background: rgba(14, 14, 14, 0.04);
}

.tci-art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}
.tci-art-side {
  font-family: var(--tci-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tci-text);
}
.tci-print-info {
  font-size: 0.68rem;
  color: var(--tci-muted);
  font-variant-numeric: tabular-nums;
}

.tci-side-only {
  margin: 0;
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--tci-muted);
  background: rgba(14, 14, 14, 0.04);
  border: 1px dashed var(--tci-line);
  border-radius: var(--tci-radius);
}
.tci-side-only strong { color: var(--tci-text); font-weight: 600; }

/* Mockup fotográfico: canvas transparente para ver el patrón de marca. */
.tci-photo {
  background: transparent;
}
.tci-viewer {
  /* Deja ver el ::before del .tci (patrón) detrás de la prenda recortada. */
  background: transparent;
}

.tci-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 3.4rem;
  padding: 0.85rem 1rem;
  font-family: var(--tci-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tci-text);
  border: 1px dashed var(--tci-line);
  border-radius: var(--tci-radius);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.tci-upload:hover {
  border-color: var(--tci-accent-hot);
  background: rgba(232, 24, 159, 0.08);
}
.tci-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tci-upload-title { line-height: 1.2; }

.tci-formats {
  font-family: var(--tci-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tci-muted);
}

.tci-art-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.tci-art-id {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}
.tci-art-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}
.tci-art-name {
  font-size: 0.8rem;
  color: var(--tci-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tci-art-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.65rem;
  align-items: center;
}
.tci-linkbtn {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tci-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tci-linkbtn:hover { color: var(--tci-accent-hot); }

/* Control de tamaño. */
.tci-size { display: flex; align-items: center; gap: 0.75rem; }
.tci-size input[type='range'] {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--tci-line);
  border-radius: 2px;
}
.tci-size input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tci-paper);
  border: 4px solid var(--tci-accent);
  cursor: grab;
}
.tci-size input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tci-paper);
  border: 4px solid var(--tci-accent);
  cursor: grab;
}
.tci-size-value {
  flex: 0 0 auto;
  min-width: 4.5rem;
  text-align: right;
  font-family: var(--tci-mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Cotas: la ficha técnica del taller. */
.tci-measure {
  font-family: var(--tci-mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--tci-accent-hot);
  min-height: 1.1em;
}

/* Nudge a la cara que falta. */
.tci-side-nudge {
  margin: -0.25rem 0 0;
  text-align: center;
}
.tci-nudge-btn {
  min-height: 40px;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: var(--tci-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.01em;
}
.tci-nudge-btn:hover { color: var(--tci-accent-hot); }
.tci-nudge-opt {
  color: var(--tci-muted);
  text-decoration: none;
  font-size: 0.74rem;
}

/* Llamada a la acción: bloque macizo de tinta, sin esquinas blandas. */
.tci-cta {
  width: 100%;
  padding: 1rem 1.25rem;
  font-family: var(--tci-display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tci-paper);
  background: var(--tci-accent);
  border-radius: var(--tci-radius);
  transition: background-color 0.18s ease, transform 0.12s ease;
}
.tci-cta:hover:not(:disabled) { background: var(--tci-accent-hot); }
.tci-cta:active:not(:disabled) { transform: scale(0.96); }
.tci-cta:disabled {
  background: transparent;
  color: var(--tci-muted);
  border: 1px solid var(--tci-line);
}

.tci-cta-hint {
  margin: -0.35rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--tci-muted);
  letter-spacing: 0.02em;
}

.tci-reassure {
  margin: -0.55rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--tci-muted);
  letter-spacing: 0.03em;
}

/* =============================================================== DIÁLOGO === */

.tci-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: 88svh;
  padding: 0;
  color: var(--tci-text);
  background: var(--tci-ink-2);
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  overflow: hidden;
}
.tci-dialog::backdrop { background: rgba(14, 14, 14, 0.55); backdrop-filter: blur(4px); }

.tci-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 88svh;
  min-height: 0;
}
.tci-dialog form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.tci-dialog-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 1.5rem 1.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  -webkit-overflow-scrolling: touch;
}
.tci-dialog-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--tci-line);
  background: var(--tci-ink-2);
}
.tci-dialog-actions .tci-linkbtn {
  align-self: center;
}

.tci-dialog h2 {
  font-family: var(--tci-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
}
.tci-dialog p,
.tci-dialog-lead { font-size: 0.86rem; color: var(--tci-muted); }

/* Resumen de lo que se envía. */
.tci-summary {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.75rem;
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  background: rgba(14, 14, 14, 0.04);
}
.tci-summary-mock {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}
.tci-summary-body { min-width: 0; flex: 1 1 auto; }
.tci-summary-title {
  margin: 0 0 0.35rem !important;
  font-family: var(--tci-display);
  font-size: 0.82rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tci-text) !important;
}
.tci-summary-lines {
  margin: 0 !important;
  font-size: 0.74rem !important;
  line-height: 1.45;
  color: var(--tci-muted) !important;
  white-space: pre-line;
  font-variant-numeric: tabular-nums;
}

/* Unidades + tallas semi-estructuradas. */
.tci-units {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.tci-units-num { max-width: 9rem; }
.tci-size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.tci-size-chip {
  min-height: 40px;
  min-width: 2.6rem;
  padding: 0.35rem 0.55rem;
  font-family: var(--tci-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--tci-muted);
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.tci-size-chip:hover { color: var(--tci-text); border-color: var(--tci-paper); }
.tci-size-chip[aria-pressed='true'] {
  color: var(--tci-ink);
  background: var(--tci-paper);
  border-color: var(--tci-paper);
}

.tci-field { display: flex; flex-direction: column; gap: 0.3rem; }
.tci-field > span {
  font-family: var(--tci-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tci-muted);
}
.tci-field input,
.tci-field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-size: 0.95rem;
  color: var(--tci-text);
  background: rgba(14, 14, 14, 0.05);
  border: 1px solid var(--tci-line);
  border-radius: var(--tci-radius);
  -webkit-appearance: none;
  appearance: none;
}
.tci-field textarea { min-height: 5rem; resize: vertical; }
.tci-field input:focus,
.tci-field textarea:focus { border-color: var(--tci-accent-hot); outline: none; }

.tci-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.tci-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--tci-muted);
  cursor: pointer;
}
.tci-check input { flex: 0 0 auto; margin-top: 0.15rem; accent-color: var(--tci-accent-hot); }
.tci-check a { color: var(--tci-text); text-decoration: underline; text-underline-offset: 2px; }

.tci-honey { position: absolute !important; left: -9999px !important; }

.tci-error { font-size: 0.82rem; color: var(--tci-danger); min-height: 1em; }
.tci-note { font-size: 0.78rem; color: var(--tci-muted); }

.tci-success {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: center;
  padding: 1.5rem;
}
.tci-ref {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-family: var(--tci-mono);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--tci-accent-hot);
  border: 1px dashed var(--tci-line);
  border-radius: var(--tci-radius);
}
.tci-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.2rem;
  font-family: var(--tci-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #06251A;
  background: #25D366;
  border-radius: var(--tci-radius);
  text-decoration: none;
}

/* =========================================================== ESCRITORIO === */

@media (min-width: 900px) {
  .tci {
    flex-direction: row;
    min-height: min(84svh, 820px);
  }
  .tci-stage {
    flex: 1 1 auto;
    min-height: 0;
  }
  .tci-viewer {
    min-height: 0;
  }
  .tci-sides {
    margin: 0.55rem auto 0.25rem;
    padding: 4px;
  }
  .tci-sides button {
    padding: 0.45rem 1.05rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }
  .tci-hint {
    padding: 0.25rem 1.5rem 0.75rem;
    font-size: 0.72rem;
  }
  .tci-panel {
    flex: 0 0 25rem;
    justify-content: center;
    gap: 1.15rem;
    padding: 2rem;
    border-top: 0;
    border-left: 1px solid var(--tci-line);
  }
  .tci-stage::before { top: 14px; left: 14px; }
  .tci-stage::after { top: 14px; right: 14px; width: 26px; height: 26px; }
}

/* Móvil estrecho: aún más alto el visor y botones de vista compactos. */
@media (max-width: 480px) {
  .tci {
    min-height: min(92svh, 900px);
  }
  .tci-stage {
    min-height: 54svh;
  }
  .tci-viewer {
    min-height: 46svh;
  }
  .tci-sides button {
    padding: 0.38rem 0.55rem;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    min-height: 38px;
  }
  .tci-panel {
    gap: 0.95rem;
    padding: 0.95rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
  }
  .tci-art {
    padding: 0.8rem;
    gap: 0.65rem;
  }
  .tci-cta {
    padding: 0.95rem 1.1rem;
  }
}

/* ============================================================== ENTRADA === */

.tci-panel > * {
  opacity: 0;
  transform: translateY(8px);
  animation: tci-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.tci-panel > *:nth-child(1) { animation-delay: 0.05s; }
.tci-panel > *:nth-child(2) { animation-delay: 0.12s; }
.tci-panel > *:nth-child(3) { animation-delay: 0.19s; }
.tci-panel > *:nth-child(4) { animation-delay: 0.26s; }
.tci-panel > *:nth-child(5) { animation-delay: 0.32s; }
.tci-panel > *:nth-child(6) { animation-delay: 0.38s; }
.tci-panel > *:nth-child(7) { animation-delay: 0.42s; }

@keyframes tci-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tci-panel > * { animation: none; opacity: 1; transform: none; }
  .tci * { transition-duration: 0.01ms !important; }
}

/* ================================================= OCULTAR TÍTULO PÁGINA ===
   La página 3706 es «Crea tu idea»: su <h1> lo imprime Genesis/el tema y
   queda redundante con el propio diseñador. Se oculta solo en esta página
   (este CSS solo se sirve cuando el plugin está activo en ella). */
body.page-id-3706 .entry-title { display: none; }