/* ===========================================================
   TRNSCEND — sistema de diseño · bundle.css
   Las variables salen de tokens.json (arma_capa.py); las piezas, de abajo, solo con var(--tr-…).
   Letras: <link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
   Control: python tools/trnscend_sistema/check_sistema.py <pieza.html> tiene que salir 0.
   =========================================================== */
/* TOKENS:INICIO — generado por arma_capa.py desde tokens.json; no se edita a mano */
:root{
  --tr-void:#1f1b1a;
  --tr-nebula:#edf2f4;
  --tr-pulse:#db2114;
  --tr-orbit:#4d74d3;
  --tr-deep:#2e3cb7;
  --tr-solar:#d35822;
  --tr-quantum:#752c62;
  --tr-texto-suave:rgba(237, 242, 244, 0.74);
  --tr-texto-tenue:rgba(237, 242, 244, 0.6);
  --tr-linea:rgba(237, 242, 244, 0.12);
  --tr-linea-fuerte:rgba(237, 242, 244, 0.4);
  --tr-velo:rgba(31, 27, 26, 0.86);
  --tr-g-senal:radial-gradient(60% 50% at 30% 35%, #4d74d3 0%, transparent 70%), radial-gradient(55% 45% at 72% 60%, #d35822 0%, transparent 70%), radial-gradient(40% 35% at 55% 80%, #db2114 0%, transparent 70%), #1f1b1a;
  --tr-g-planos:repeating-conic-gradient(from 0deg at 50% 50%, #2e3cb7 0deg 7.5deg, #1f1b1a 7.5deg 15deg);
  --tr-f-display:"Anton", system-ui, sans-serif;
  --tr-f-body:"Space Grotesk", system-ui, sans-serif;
  --tr-f-mono:"Space Mono", ui-monospace, monospace;
  --tr-t-etiqueta:12px;
  --tr-t-mono:14px;
  --tr-t-texto:16px;
  --tr-t-boton:19px;
  --tr-t-bajada:20px;
  --tr-t-prenda:24px;
  --tr-t-h3:32px;
  --tr-t-h2:clamp(2.4rem, 7vw, 5rem);
  --tr-t-display:clamp(3.1rem, 11.5vw, 9.6rem);
  --tr-t-ig-etiqueta:30px;
  --tr-t-ig-texto:44px;
  --tr-t-ig-claim:90px;
  --tr-t-ig-titulo:150px;
  --tr-lh-display:0.94;
  --tr-lh-body:1.5;
  --tr-tr-etiqueta:0.16em;
  --tr-tr-boton:0.08em;
  --tr-tr-display:0.01em;
  --tr-s-1:4px;
  --tr-s-2:8px;
  --tr-s-3:12px;
  --tr-s-4:16px;
  --tr-s-6:24px;
  --tr-s-8:32px;
  --tr-s-12:48px;
  --tr-s-24:96px;
  --tr-pad:clamp(1.25rem, 4vw, 3.5rem);
  --tr-r-0:0px;
  --tr-r-2:2px;
  --tr-r-4:4px;
  --tr-r-pill:999px;
  --tr-sombra-ninguna:none;
  --tr-sombra-brillo-pulse:0 0 40px rgba(219, 33, 20, 0.28);
  --tr-m-curva:cubic-bezier(0.16, 1, 0.3, 1);
  --tr-m-rapido:300ms;
  --tr-m-normal:400ms;
  --tr-m-entrada:900ms;
  --tr-m-respira:6s;
  --tr-toque:44px;
}
/* TOKENS:FIN */

/* ---------- base ---------- */
.tr{background:var(--tr-void);color:var(--tr-nebula);font-family:var(--tr-f-body);font-size:var(--tr-t-texto);line-height:var(--tr-lh-body);-webkit-font-smoothing:antialiased}
.tr *,.tr *::before,.tr *::after{box-sizing:border-box}
.tr em{font-style:normal;color:var(--tr-pulse)}  /* la palabra que se marca: solo en títulos (PULSE sobre VOID da 3,45:1) */
.tr-grano{position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.tr *{animation:none!important;transition-duration:.01ms!important}}

/* ---------- Encabezado de sección ---------- */
.tr-head{display:flex;flex-direction:column;gap:var(--tr-s-4);max-width:46ch}
.tr-head__tag{display:inline-flex;align-items:center;gap:var(--tr-s-2);font-family:var(--tr-f-mono);font-size:var(--tr-t-etiqueta);letter-spacing:var(--tr-tr-etiqueta);text-transform:uppercase;color:var(--tr-texto-tenue)}
.tr-head__tag::before{content:"";width:var(--tr-s-2);height:var(--tr-s-2);background:var(--tr-pulse)}
.tr-head__title{margin:0;font-family:var(--tr-f-display);font-weight:400;font-size:var(--tr-t-h2);line-height:var(--tr-lh-display);letter-spacing:var(--tr-tr-display);text-transform:uppercase}
.tr-head__intro{margin:0;font-size:var(--tr-t-bajada);line-height:var(--tr-lh-body);color:var(--tr-texto-suave)}

/* ---------- Portada ---------- */
.tr-portada{position:relative;overflow:hidden;min-height:min(100svh,880px);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--tr-s-24) var(--tr-pad) var(--tr-s-12);background:var(--tr-g-senal)}
.tr-portada__fondo{position:absolute;inset:0;overflow:hidden}  /* la luz se agranda al respirar: se recorta aquí, no en la portada */
.tr-portada__luz{position:absolute;inset:0;background:var(--tr-g-senal);filter:blur(48px);transform:scale(1.15)}
.tr-portada__velo{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--tr-velo) 80%,var(--tr-void) 100%)}  /* termina en VOID: sin borde duro con la sección de abajo (QA B.5) */
.tr-portada__iso{position:absolute;top:var(--tr-s-8);left:var(--tr-pad);width:58px;height:auto}
.tr-portada__copy{position:relative;display:flex;flex-direction:column;gap:var(--tr-s-6);max-width:1320px}
.tr-portada__claim{margin:0;font-family:var(--tr-f-display);font-weight:400;font-size:var(--tr-t-display);line-height:var(--tr-lh-display);letter-spacing:var(--tr-tr-display);text-transform:uppercase}
.tr-portada__sub{margin:0;max-width:34ch;font-size:var(--tr-t-bajada);color:var(--tr-nebula)}
.tr-portada__cta{display:flex;flex-wrap:wrap;gap:var(--tr-s-3)}
@media (prefers-reduced-motion:no-preference){.tr-portada__luz{animation:tr-respira var(--tr-m-respira) ease-in-out infinite}}
@keyframes tr-respira{50%{transform:scale(1.22)}}

/* ---------- Pie ---------- */
.tr-pie{display:flex;flex-direction:column;align-items:center;gap:var(--tr-s-6);text-align:center;padding:var(--tr-s-24) var(--tr-pad) var(--tr-s-12);border-top:1px solid var(--tr-linea)}
.tr-pie__logo{width:120px;height:auto}
.tr-pie__claim{margin:0;font-family:var(--tr-f-display);font-weight:400;font-size:var(--tr-t-h3);letter-spacing:var(--tr-tr-display);text-transform:uppercase}
.tr-pie__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--tr-s-2)}
.tr-pie__links a{display:inline-flex;align-items:center;min-height:var(--tr-toque);padding:0 var(--tr-s-3);font-family:var(--tr-f-mono);font-size:var(--tr-t-mono);letter-spacing:var(--tr-tr-etiqueta);text-transform:uppercase;color:var(--tr-texto-suave);text-decoration:none}
.tr-pie__links a:hover{color:var(--tr-nebula)}
.tr-pie__fino{margin:0;font-family:var(--tr-f-mono);font-size:var(--tr-t-etiqueta);letter-spacing:.1em;color:var(--tr-texto-tenue)}

/* PIEZAS-TE1:INICIO — A · Línea dura, la que eligió Alvaro en Te.1; la escribe arma_piezas_te1.py */
.tr-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;font-family:var(--tr-f-mono);font-weight:700;font-size:var(--tr-t-boton);letter-spacing:var(--tr-tr-boton);text-decoration:none;cursor:pointer;
  transition:background var(--tr-m-rapido) var(--tr-m-curva),color var(--tr-m-rapido) var(--tr-m-curva),border-color var(--tr-m-rapido) var(--tr-m-curva),transform var(--tr-m-normal) var(--tr-m-curva)}
.tr-btn:focus-visible{outline:2px solid var(--tr-orbit);outline-offset:2px}
.tr-tag{display:inline-flex;align-items:center;font-family:var(--tr-f-mono);font-size:var(--tr-t-etiqueta);text-transform:uppercase}
.tr-card{display:flex;flex-direction:column;min-width:0;position:relative}
.tr-card__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--tr-void)}
.tr-card__media img,.tr-card__puesta{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--tr-m-normal) var(--tr-m-curva)}
/* la foto puesta es un fondo que aparece encima al pasar el mouse y nunca recibe el toque: tocar abre siempre la plana */
.tr-card__puesta{background-size:cover;background-position:center;opacity:0;pointer-events:none}
.tr-card:hover .tr-card__puesta,.tr-card.is-hover .tr-card__puesta{opacity:1}
.tr-card__info{display:flex;flex-direction:column;gap:var(--tr-s-2)}
.tr-card__name{margin:0;font-family:var(--tr-f-display);font-weight:400;font-size:var(--tr-t-prenda);line-height:1;letter-spacing:var(--tr-tr-display);text-transform:uppercase}
.tr-card__meaning{margin:0;font-size:var(--tr-t-mono);line-height:1.45;color:var(--tr-texto-suave)}
.tr-card__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--tr-s-2);font-family:var(--tr-f-mono);font-size:var(--tr-t-etiqueta);letter-spacing:var(--tr-tr-etiqueta);text-transform:uppercase}
.tr-card__try{display:inline-flex;align-items:center;min-height:var(--tr-toque);color:var(--tr-nebula);text-decoration:none}
.tr-cards{display:grid;gap:var(--tr-s-6);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
/* A · Línea dura (Alvaro, Te.1): borde fino, esquinas rectas, todo en mayúsculas */
.tr-btn{padding:12px 20px;border-radius:var(--tr-r-0);background:transparent;color:var(--tr-nebula);border:1px solid var(--tr-nebula);text-transform:uppercase}
.tr-btn:hover,.tr-btn.is-hover{background:var(--tr-nebula);color:var(--tr-void)}
.tr-btn--pri{background:var(--tr-pulse);border-color:var(--tr-pulse)}
.tr-btn--pri:hover,.tr-btn--pri.is-hover{background:var(--tr-nebula);border-color:var(--tr-nebula);color:var(--tr-void)}
.tr-tag{letter-spacing:var(--tr-tr-etiqueta);padding:6px 10px;border:1px solid var(--tr-linea-fuerte);border-radius:var(--tr-r-0);color:var(--tr-nebula)}
.tr-tag--acento{border-color:var(--tr-pulse)}
.tr-tag--acento::before{content:"";width:6px;height:6px;background:var(--tr-pulse);margin-right:var(--tr-s-2)}
.tr-card{border:1px solid var(--tr-linea);border-radius:var(--tr-r-0);transition:border-color var(--tr-m-rapido) var(--tr-m-curva)}
.tr-card:hover,.tr-card.is-hover{border-color:var(--tr-nebula)}
.tr-card__info{padding:14px;border-top:1px solid var(--tr-linea)}
.tr-card__foot{padding-top:10px;border-top:1px solid var(--tr-linea);color:var(--tr-texto-tenue)}
/* PIEZAS-TE1:FIN */

/* ---------- Instagram: post y lámina de carrusel (1080 × 1350, MANUAL parte 4) ---------- */
/* Una pieza usa UNA dirección entera: .tr-ig--senal (frases y claim, PDF-11) o .tr-ig--planos (colección y prendas, PDF-10).
   Zona segura: texto y logo dentro de x 34-1046; el margen de 80 px (carrusel_prenda.py) deja aire. */
.tr-ig{position:relative;width:1080px;height:1350px;overflow:hidden;background:var(--tr-void);color:var(--tr-nebula);font-family:var(--tr-f-body)}
.tr-ig--senal .tr-ig__fondo{position:absolute;inset:-10%;background:var(--tr-g-senal);filter:blur(54px)}
.tr-ig--planos .tr-ig__fondo{position:absolute;inset:0;background:var(--tr-g-planos)}
.tr-ig__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tr-ig__prenda{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:500px;height:auto}
.tr-ig__velo{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,transparent,var(--tr-velo))}
.tr-ig__capa{position:absolute;inset:0;padding:80px;display:flex;flex-direction:column;justify-content:space-between}
.tr-ig__etiqueta{font-family:var(--tr-f-mono);font-size:var(--tr-t-ig-etiqueta);letter-spacing:.12em;text-transform:uppercase;color:var(--tr-nebula)}
.tr-ig__titulo{margin:0;font-family:var(--tr-f-display);font-weight:400;font-size:var(--tr-t-ig-titulo);line-height:var(--tr-lh-display);text-transform:uppercase}
.tr-ig__claim{margin:0;font-family:var(--tr-f-body);font-weight:300;font-size:var(--tr-t-ig-claim);line-height:1.08;letter-spacing:var(--tr-tr-display);text-transform:uppercase}
.tr-ig__texto{margin:0;max-width:22ch;font-size:var(--tr-t-ig-texto);line-height:1.3}
.tr-ig__logo{width:216px;height:auto;display:block}
.tr-ig__pie{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--tr-s-8)}
.tr-ig__pie--arriba{align-items:flex-start}
.tr-ig__guia{position:absolute;top:0;bottom:0;left:34px;right:34px;border:2px dashed var(--tr-orbit);pointer-events:none;display:none}
.tr-ig.con-guia .tr-ig__guia{display:block}