/* ============================================================
   THE KINGS JOSEPHS — SISTEMA ATÓMICO "ECLIPSE REAL" v2.0.0
   Protocolo L&B v1.2 · Launch & Boost Manager
   ------------------------------------------------------------
   Prefijos:  .tkj-  componentes   ·   .u-  utilidades
   (LiteSpeed UCSS: agregar "tkj-" y "u-" a la allowlist)
   ------------------------------------------------------------
   Las variables --color-1..8 leen la paleta de Blocksy
   (--theme-palette-color-X). Cambias la paleta en el
   Customizer → toda la web se actualiza. El hex es fallback.
   ============================================================ */

:root{
  --color-1: var(--theme-palette-color-1, #FF7A2F); /* Sol — primario, CTAs, corona */
  --color-2: var(--theme-palette-color-2, #2B4BFF); /* Cobalto — reino manga */
  --color-3: var(--theme-palette-color-3, #0D1422); /* Noche — fondos oscuros */
  --color-4: var(--theme-palette-color-4, #FAF7F0); /* Museo — fondo claro cálido */
  --color-5: var(--theme-palette-color-5, #EAE2D2); /* Pergamino — superficie secundaria */
  --color-6: var(--theme-palette-color-6, #191D2E); /* Tinta — texto sobre claro */
  --color-7: var(--theme-palette-color-7, #E0392B); /* Sello — micro-acentos */
  --color-8: var(--theme-palette-color-8, #9AA3B8); /* Niebla — texto secundario sobre oscuro */

  --sol-suave:#FFB066;          /* acento cálido sobre noche */
  --cobalto-suave:#7E92FF;      /* acento frío sobre noche */

  --font-display:'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-sans:'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  /* Optical sizing: titulares grandes ganan contraste dramático */
  font-optical-sizing:auto;

  --tkj-ancho:1180px;
  --tkj-radio:18px;
  --tkj-transicion:.45s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   1 · BASE Y UTILIDADES
   ============================================================ */

.tkj-contenedor{width:min(var(--tkj-ancho),92vw);margin-inline:auto}

/* Grano de impresión fina en toda la web (clase puesta por functions.php) */
body.tkj-grano::after{
  content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/><feColorMatrix type="saturate" values="0"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.5"/></svg>');
}

/* Textura de líneas finas (papel del reino realista) */
.u-lineas{
  background-image:repeating-linear-gradient(0deg,rgba(25,29,46,.035) 0 1px,transparent 1px 7px);
}

/* Trama halftone cobalto (reino manga). Requiere position:relative del padre. */
.u-halftone{position:relative}
.u-halftone::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle, rgba(43,75,255,.4) 1px, transparent 1.5px);
  background-size:13px 13px;opacity:.5;
}
.u-halftone > *{position:relative;z-index:2}

/* Cielo estrellado (combinar con .tkj-seccion--noche) */
.u-estrellas{
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1px 1px at 28% 64%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(2px 2px at 44% 12%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1px 1px at 58% 42%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 18%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1px 1px at 84% 56%,rgba(255,255,255,.65),transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 30%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1px 1px at 8% 78%,rgba(255,255,255,.6),transparent 60%);
}

/* Estrella titilante individual (span suelto, padre con position:relative) */
.tkj-estrella{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:tkj-titilar 3.4s ease-in-out infinite}
@keyframes tkj-titilar{0%,100%{opacity:.9}50%{opacity:.15}}

/* Reveal on scroll — solo se oculta si hay JS (.tkj-js lo pone functions.php) */
.tkj-js .u-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.tkj-js .u-reveal.is-visible{opacity:1;transform:none}

.u-centro{text-align:center}
.u-centro .tkj-sub{margin-inline:auto}

/* ============================================================
   2 · SECCIONES — el museo que anochece
   ============================================================ */

.tkj-seccion{padding-block:clamp(3.5rem,8vw,6rem);scroll-margin-top:88px}

.tkj-seccion--museo{background-color:var(--color-4);color:var(--color-6)}
.tkj-seccion--pergamino{background-color:var(--color-5);color:var(--color-6)}
.tkj-seccion--noche{background-color:var(--color-3);color:var(--color-4);position:relative}
.tkj-seccion--noche-grad{background:linear-gradient(180deg,var(--color-3),#111A30);color:var(--color-4)}
.tkj-seccion--noche-grad-inv{background:linear-gradient(180deg,#111A30,var(--color-3));color:var(--color-4)}
.tkj-seccion--tinta{background-color:var(--color-6);color:var(--color-4)}

/* Banda de transición día → noche */
.tkj-ocaso{
  position:relative;overflow:hidden;text-align:center;
  padding:7rem 1rem 8.5rem;
  background:linear-gradient(180deg,var(--color-4) 0%,var(--color-5) 26%,#C9B998 48%,#5A536B 74%,var(--color-3) 100%);
}
.tkj-ocaso__sol{
  position:absolute;left:50%;bottom:-150px;transform:translateX(-50%);
  width:340px;height:340px;border-radius:50%;
  background:repeating-radial-gradient(circle,#FF8B45 0 6px,#E8650F 6px 12px);
  box-shadow:0 0 120px 30px rgba(255,122,47,.5);
}
.tkj-ocaso__linea{
  position:relative;z-index:2;margin-inline:auto;max-width:24ch;
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,3vw,2.2rem);color:var(--color-4);
  text-shadow:0 2px 30px rgba(13,20,34,.5);
}

/* ============================================================
   3 · TIPOGRAFÍA
   ============================================================ */

.tkj-kicker{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--color-1);margin-bottom:.2rem;
}
.tkj-kicker--luz{color:var(--sol-suave)}
.tkj-kicker--cobalto{color:var(--cobalto-suave)}

.tkj-titulo{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.01em;
  margin:.6rem 0 1rem;
}
.tkj-titulo em{font-style:italic;font-weight:600}
.tkj-titulo--xl{font-size:clamp(2.7rem,7.2vw,5.4rem);line-height:1.02;letter-spacing:-.015em}

/* Subrayado-corona dentro de un título (span o mark) */
.tkj-corona-sub{position:relative;white-space:nowrap}
.tkj-corona-sub::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.14em;
  background:var(--color-1);opacity:.35;border-radius:99px;z-index:-1;
}

.tkj-sub{font-size:clamp(1rem,1.4vw,1.12rem);max-width:56ch;color:rgba(25,29,46,.78)}
.tkj-seccion--noche .tkj-sub,
.tkj-seccion--noche-grad .tkj-sub,
.tkj-seccion--noche-grad-inv .tkj-sub,
.tkj-seccion--tinta .tkj-sub{color:var(--color-8)}

.u-mono{font-family:var(--font-mono)}
.u-display{font-family:var(--font-display)}

/* ============================================================
   4 · BOTONES
   (también mapeados al bloque Botón de Gutenberg)
   ============================================================ */

.tkj-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-sans);font-weight:700;font-size:.92rem;letter-spacing:.03em;
  padding:.95rem 1.7rem;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:var(--tkj-transicion);text-decoration:none;
}
.tkj-btn--sol{background:var(--color-1);color:#fff;box-shadow:0 8px 24px rgba(255,122,47,.32)}
.tkj-btn--sol:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(255,122,47,.42);color:#fff}
.tkj-btn--fantasma{border-color:rgba(25,29,46,.35);color:var(--color-6);background:transparent}
.tkj-btn--fantasma:hover{border-color:var(--color-6);transform:translateY(-3px)}
.tkj-btn--luz{border-color:rgba(250,247,240,.4);color:var(--color-4);background:transparent}
.tkj-btn--luz:hover{border-color:var(--color-4);transform:translateY(-3px);color:var(--color-4)}
.tkj-btn--mini{padding:.6rem 1.15rem;font-size:.8rem}

/* — Versión para el bloque nativo "Botones" de Gutenberg —
   En "Clase(s) CSS adicional(es)" del bloque Botón escribe:
   tkj-btn-sol · tkj-btn-fantasma · tkj-btn-luz (+ tkj-btn-mini) */
.wp-block-button.tkj-btn-sol .wp-block-button__link,
.wp-block-button.tkj-btn-fantasma .wp-block-button__link,
.wp-block-button.tkj-btn-luz .wp-block-button__link{
  font-family:var(--font-sans);font-weight:700;font-size:.92rem;letter-spacing:.03em;
  padding:.95rem 1.7rem;border-radius:999px;border:1.5px solid transparent;
  transition:var(--tkj-transicion);
}
.wp-block-button.tkj-btn-sol .wp-block-button__link{
  background:var(--color-1);color:#fff;box-shadow:0 8px 24px rgba(255,122,47,.32);
}
.wp-block-button.tkj-btn-sol .wp-block-button__link:hover{
  transform:translateY(-3px);box-shadow:0 14px 32px rgba(255,122,47,.42);
}
.wp-block-button.tkj-btn-fantasma .wp-block-button__link{
  background:transparent;border-color:rgba(25,29,46,.35);color:var(--color-6);
}
.wp-block-button.tkj-btn-fantasma .wp-block-button__link:hover{border-color:var(--color-6);transform:translateY(-3px)}
.wp-block-button.tkj-btn-luz .wp-block-button__link{
  background:transparent;border-color:rgba(250,247,240,.4);color:var(--color-4);
}
.wp-block-button.tkj-btn-luz .wp-block-button__link:hover{border-color:var(--color-4);transform:translateY(-3px)}
.wp-block-button.tkj-btn-mini .wp-block-button__link{padding:.6rem 1.15rem;font-size:.8rem}

/* ============================================================
   5 · EMBLEMA ECLIPSE (Bloque HTML personalizado en el Hero)
   ============================================================ */

.tkj-eclipse{position:relative;width:min(380px,76vw);aspect-ratio:1;margin-inline:auto}
.tkj-eclipse__sol{
  position:absolute;inset:6%;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, #FF8B45 0 6px, #E8650F 6px 12px);
  box-shadow:0 0 90px 18px rgba(255,122,47,.4), 0 0 220px 40px rgba(255,122,47,.16);
  animation:tkj-respirar 7s ease-in-out infinite;
}
.tkj-eclipse__luna{
  position:absolute;width:86%;aspect-ratio:1;right:-4%;top:9%;border-radius:50%;
  background:var(--color-3);border:1px solid rgba(43,75,255,.35);overflow:hidden;
  animation:tkj-deriva 14s ease-in-out infinite alternate;
}
.tkj-eclipse__luna::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(43,75,255,.5) 1px, transparent 1.5px);
  background-size:12px 12px;opacity:.55;
}
.tkj-eclipse__sello{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--color-7);right:8%;bottom:14%;
  box-shadow:0 0 12px rgba(224,57,43,.6);
}
.tkj-eclipse__leyenda{
  position:absolute;left:50%;bottom:-2.6rem;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;
  color:rgba(25,29,46,.5);white-space:nowrap;text-transform:uppercase;
}
@keyframes tkj-respirar{
  0%,100%{box-shadow:0 0 90px 18px rgba(255,122,47,.4),0 0 220px 40px rgba(255,122,47,.16)}
  50%{box-shadow:0 0 110px 26px rgba(255,122,47,.52),0 0 260px 60px rgba(255,122,47,.22)}
}
@keyframes tkj-deriva{from{transform:translateX(0)}to{transform:translateX(-7%)}}

/* Marca corona (dos anillos) — SVG en bloque HTML */
.tkj-corona-mark{width:54px;height:38px;margin-inline:auto}

/* ============================================================
   6 · MARQUESINA (Bloque HTML personalizado)
   ============================================================ */

.tkj-marquee{
  border-top:1.5px solid var(--color-6);border-bottom:1.5px solid var(--color-6);
  background:var(--color-5);overflow:hidden;padding:.85rem 0;
}
.tkj-marquee__track{display:flex;gap:3.2rem;width:max-content;animation:tkj-rodar 30s linear infinite}
.tkj-marquee__track span{
  font-family:var(--font-sans);font-weight:900;font-size:.86rem;letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:3.2rem;
}
.tkj-marquee__track i{font-style:normal;color:var(--color-1)}
@keyframes tkj-rodar{to{transform:translateX(-50%)}}

/* ============================================================
   7 · LOS REINOS — dualidad
   (Columnas de Gutenberg: cada columna = .tkj-reino + modificador)
   ============================================================ */

.tkj-reinos-grid{display:flex;flex-direction:column;gap:0}
.tkj-reino{
  position:relative;flex:1;padding:3.2rem 1.8rem;overflow:hidden;
  transition:flex .65s cubic-bezier(.22,.61,.36,1);
  min-height:430px;display:flex;flex-direction:column;justify-content:flex-end;
}
.tkj-reino > *{position:relative;z-index:2}

.tkj-reino__tag{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  margin-bottom:.7rem;
}
.tkj-reino__nombre{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05;margin-bottom:.9rem}
.tkj-reino__desc{max-width:42ch;font-size:.98rem}
.tkj-reino__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem;list-style:none;padding:0}
.tkj-chip{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  padding:.38rem .8rem;border-radius:999px;border:1px solid currentColor;opacity:.75;
}

.tkj-reino--real{
  background:
    repeating-linear-gradient(0deg,rgba(25,29,46,.035) 0 1px,transparent 1px 6px),
    linear-gradient(170deg,var(--color-5),#F3ECDD 60%,var(--color-5));
  color:var(--color-6);
}
.tkj-reino--real .tkj-reino__tag{color:#B05A14}
.tkj-reino--real .tkj-reino__nombre{font-family:var(--font-display);font-weight:500;font-style:italic}
.tkj-reino--real .tkj-reino__desc{color:rgba(25,29,46,.78)}
.tkj-reino--real::before{
  content:"";position:absolute;top:-90px;right:-90px;width:300px;height:300px;border-radius:50%;
  background:repeating-radial-gradient(circle,#FF8B45 0 5px,#E8650F 5px 10px);
  opacity:.9;box-shadow:0 0 70px rgba(255,122,47,.45);
}

.tkj-reino--manga{background:var(--color-3);color:var(--color-4)}
.tkj-reino--manga .tkj-reino__tag{color:var(--cobalto-suave)}
.tkj-reino--manga .tkj-reino__nombre{font-family:var(--font-sans);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.tkj-reino--manga .tkj-reino__nombre b{color:var(--color-2)}
.tkj-reino--manga .tkj-reino__desc{color:rgba(250,247,240,.78)}
.tkj-reino--manga::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(43,75,255,.4) 1px, transparent 1.5px);
  background-size:13px 13px;opacity:.5;
}
.tkj-reino--manga::after{
  content:"";position:absolute;top:-70px;right:-70px;width:260px;height:260px;border-radius:50%;
  background:var(--color-4);box-shadow:inset -18px -14px 0 0 var(--color-2);opacity:.92;
}

/* Banda corona central */
.tkj-corona-band{
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  padding:2.6rem 1.5rem;background:var(--color-6);color:var(--color-4);text-align:center;
}
.tkj-corona-band p{max-width:60ch;font-size:.98rem;color:rgba(250,247,240,.82);margin:0}
.tkj-corona-band em{font-family:var(--font-display);font-weight:500;font-style:italic;color:var(--sol-suave)}

@media (min-width:768px){
  .tkj-reinos-grid{flex-direction:row}
  .tkj-reinos-grid:hover .tkj-reino{flex:.78}
  .tkj-reinos-grid .tkj-reino:hover{flex:1.55}
  .tkj-reino{padding:3.6rem 2.6rem;min-height:520px}
}

/* ============================================================
   8 · PORTALES Y PLACARDS (Bóveda Nocturna)
   ============================================================ */

.tkj-portal{display:flex;flex-direction:column;align-items:center;gap:1.2rem;max-width:300px;margin-inline:auto}
.tkj-portal__circulo{
  width:min(260px,70vw);aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;
  border:1px solid rgba(250,247,240,.18);
  box-shadow:0 0 0 10px rgba(250,247,240,.04),0 24px 60px rgba(0,0,0,.5);
  transition:var(--tkj-transicion);
}
.tkj-portal__circulo img{width:100%;height:100%;object-fit:cover;display:block}
.tkj-portal:hover .tkj-portal__circulo{
  transform:translateY(-8px);
  box-shadow:0 0 0 10px rgba(255,122,47,.12),0 32px 70px rgba(0,0,0,.6);
}
.tkj-portal--eclipse .tkj-portal__circulo{
  box-shadow:0 0 0 10px rgba(255,122,47,.14),0 0 60px rgba(255,122,47,.25),0 24px 60px rgba(0,0,0,.5);
}

.tkj-placard{
  width:100%;background:rgba(250,247,240,.06);border:1px solid rgba(250,247,240,.12);
  border-radius:10px;padding:.9rem 1.1rem;text-align:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tkj-placard__titulo{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:1.12rem;margin:0}
.tkj-placard__meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--color-8);margin:.3rem 0 0}

/* ============================================================
   9 · PASOS (Para Marcas)
   ============================================================ */

.tkj-paso{
  position:relative;border:1px solid rgba(250,247,240,.12);border-radius:var(--tkj-radio);
  padding:2rem 1.6rem 1.8rem;background:rgba(250,247,240,.03);height:100%;
}
.tkj-paso__num{
  font-family:var(--font-display);font-weight:900;font-size:3.4rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,138,69,.75);margin:0;
}
.tkj-paso__titulo{font-weight:700;font-size:1.08rem;margin:.9rem 0 .45rem}
.tkj-paso__desc{font-size:.92rem;color:var(--color-8);margin:0}

.tkj-nota-borde{
  margin-top:2.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;justify-content:space-between;
  border:1px dashed rgba(255,138,69,.45);border-radius:var(--tkj-radio);padding:1.3rem 1.5rem;
}
.tkj-nota-borde p{font-size:.95rem;max-width:58ch;margin:0}
.tkj-nota-borde strong{color:var(--sol-suave)}

/* ============================================================
   10 · TARJETAS DE OBRA (HTML manual o skin WooCommerce)
   ============================================================ */

.tkj-obra-card{
  background:var(--color-4);color:var(--color-6);border-radius:var(--tkj-radio);overflow:hidden;
  display:flex;flex-direction:column;transition:var(--tkj-transicion);
  box-shadow:0 18px 44px rgba(0,0,0,.4);height:100%;
}
.tkj-obra-card:hover{
  transform:translateY(-7px);
  box-shadow:0 0 0 2px rgba(255,122,47,.55),0 28px 60px rgba(0,0,0,.55);
}
.tkj-obra-card__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.tkj-obra-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.tkj-obra-card__chip{
  position:absolute;top:.9rem;left:.9rem;z-index:3;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:999px;color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tkj-obra-card__chip--real{background:rgba(232,101,15,.92)}
.tkj-obra-card__chip--manga{background:rgba(43,75,255,.92)}
.tkj-obra-card__chip--eclipse{background:linear-gradient(100deg,#E8650F,#2B4BFF)}
.tkj-obra-card__cuerpo{padding:1.2rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tkj-obra-card__titulo{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:1.22rem;margin:0}
.tkj-obra-card__meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;color:rgba(25,29,46,.55);margin:0}
.tkj-obra-card__pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-top:.7rem}
.tkj-obra-card__precio{font-weight:900;font-size:1.06rem;margin:0}
.tkj-obra-card__precio small{
  display:block;font-family:var(--font-mono);font-weight:400;font-size:.6rem;
  letter-spacing:.12em;color:var(--color-7);
}

/* — Skin WooCommerce: convierte el loop clásico de productos
   (ul.products li.product) en tarjetas de obra.
   El body lleva .tkj-woo (lo pone functions.php). — */
.tkj-woo .woocommerce ul.products li.product,
.tkj-woo ul.products li.product{
  position:relative; /* ancla del chip de categoría inyectado por hook */
  background:var(--color-4);border-radius:var(--tkj-radio);overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.25);transition:var(--tkj-transicion);
  padding-bottom:1.2rem;
}

/* Chip de categoría automático (inyectado por functions.php) */
.tkj-woo ul.products li.product .tkj-woo-chip{
  position:absolute;top:.9rem;left:.9rem;z-index:3;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:999px;color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tkj-woo ul.products li.product .tkj-woo-chip--real{background:rgba(232,101,15,.92)}
.tkj-woo ul.products li.product .tkj-woo-chip--manga{background:rgba(43,75,255,.92)}
.tkj-woo ul.products li.product .tkj-woo-chip--eclipse{background:linear-gradient(100deg,#E8650F,#2B4BFF)}

/* Indicador de escasez 1/1 automático (inyectado por functions.php, solo si stock=1) */
.tkj-woo ul.products li.product .tkj-woo-escasez{
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-7);padding:0 1.1rem;margin:.35rem 0 0;display:block;
}
.tkj-woo ul.products li.product:hover{
  transform:translateY(-7px);
  box-shadow:0 0 0 2px rgba(255,122,47,.55),0 28px 60px rgba(0,0,0,.35);
}
.tkj-woo ul.products li.product img{
  border-radius:0;aspect-ratio:4/5;object-fit:cover;width:100%;margin-bottom:.9rem;
}
.tkj-woo ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:1.18rem;color:var(--color-6);padding:0 1.1rem;
}
.tkj-woo ul.products li.product .price{
  font-family:var(--font-sans);font-weight:900;font-size:1.02rem;
  color:var(--color-6);padding:0 1.1rem;display:block;
}
.tkj-woo ul.products li.product .button,
.tkj-woo ul.products li.product .add_to_cart_button{
  background:var(--color-1);color:#fff;border-radius:999px;
  font-family:var(--font-sans);font-weight:700;font-size:.8rem;letter-spacing:.03em;
  padding:.6rem 1.15rem;margin:.6rem 1.1rem 0;transition:var(--tkj-transicion);
}
.tkj-woo ul.products li.product .button:hover{
  transform:translateY(-3px);box-shadow:0 10px 24px rgba(255,122,47,.4);color:#fff;
}
.tkj-woo ul.products li.product .onsale{
  background:var(--color-7);border-radius:999px;
  font-family:var(--f-mono, var(--font-mono));font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
}
/* v1.1.0 — impresos por los hooks de functions.php */
.tkj-loop-meta{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;
  color:rgba(25,29,46,.55);padding:0 1.1rem;margin:.2rem 0 0;
}
.tkj-loop-unica{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-7);padding:0 1.1rem;margin:.25rem 0 0;
}

/* ============================================================
   11 · TARJETAS DE SERVICIO (Comisiones)
   ============================================================ */

.tkj-servicio-card{
  border:1px solid rgba(250,247,240,.14);border-radius:var(--tkj-radio);
  padding:1.9rem 1.6rem;background:rgba(250,247,240,.04);
  display:flex;flex-direction:column;gap:1rem;transition:var(--tkj-transicion);height:100%;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tkj-servicio-card:hover{
  transform:translateY(-6px);border-color:rgba(255,138,69,.55);background:rgba(250,247,240,.06);
}
.tkj-servicio-card__icono{width:46px;height:32px}
.tkj-servicio-card__titulo{font-weight:900;font-size:1.12rem;text-transform:uppercase;letter-spacing:.04em;margin:0}
.tkj-servicio-card__lista{display:flex;flex-direction:column;gap:.45rem;font-size:.9rem;color:var(--color-8);list-style:none;padding:0;margin:0}
.tkj-servicio-card__lista li::before{content:"— ";color:var(--color-1)}
.tkj-servicio-card__precio{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--sol-suave);margin:0}
.tkj-servicio-card .tkj-btn{align-self:flex-start;margin-top:.4rem}

/* ============================================================
   12 · BARRA DE CONFIANZA Y CÍRCULO (newsletter)
   ============================================================ */

.tkj-confianza{
  margin-top:4.5rem;border-top:1px solid rgba(25,29,46,.12);
  padding-top:1.4rem;display:grid;gap:.9rem;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
  color:rgba(25,29,46,.62);
}
.tkj-confianza span::before{content:"◆ ";color:var(--color-1);font-size:.6rem}

.tkj-circulo{
  border:1px solid rgba(250,247,240,.14);border-radius:var(--tkj-radio);
  padding:1.6rem;background:rgba(250,247,240,.03);
}
.tkj-circulo h4{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sol-suave);margin:0 0 1rem;
}
.tkj-circulo p{font-size:.88rem;color:var(--color-8);margin:.4rem 0 1rem}
.tkj-circulo input[type="email"]{
  background:rgba(250,247,240,.06);border:1px solid rgba(250,247,240,.18);
  border-radius:999px;padding:.85rem 1.2rem;color:var(--color-4);
  font-family:var(--font-sans);font-size:.9rem;outline:none;transition:border .3s;width:100%;
}
.tkj-circulo input[type="email"]:focus{border-color:var(--color-1)}

/* ============================================================
   13 · GRIDS RESPONSIVE (mobile-first · 768 / 1024)
   ============================================================ */

.tkj-grid-3{display:grid;gap:2.2rem}
.tkj-grid-obras{display:grid;gap:1.8rem}
.tkj-hero-grid{display:grid;gap:3rem;align-items:center}

@media (min-width:768px){
  .tkj-grid-3{grid-template-columns:repeat(3,1fr)}
  .tkj-grid-obras{grid-template-columns:repeat(2,1fr)}
  .tkj-confianza{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  .tkj-grid-obras{grid-template-columns:repeat(4,1fr)}
  .tkj-hero-grid{grid-template-columns:1.1fr .9fr}
  .tkj-eclipse{margin-inline:0 auto}
}

/* ============================================================
   14 · MOVIMIENTO REDUCIDO
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .tkj-eclipse__sol,.tkj-eclipse__luna,.tkj-marquee__track,.tkj-estrella{animation:none!important}
  .tkj-js .u-reveal{opacity:1;transform:none;transition:none}
  .tkj-reino,.tkj-btn,.tkj-obra-card,.tkj-portal__circulo,.tkj-servicio-card{transition:none}
}