/* ==========================================================================
   CPS Silo Hub (página pilar N1) — estilos
   --------------------------------------------------------------------------
   REGLAS DE LA CASA:
   · Prohibido !important. Conflictos resueltos por ESPECIFICIDAD (todo cuelga
     de .cps-tpl-silo, igual que la ficha de máquina cuelga de .cps-tpl-machine).
   · Reutilizamos el sistema de tokens y clases de single-product-machine.css:
     .cps-wrap, .cps-sec, .cps-eyebrow, .cps-h-section, .cps-btn, .cps-rel-grid,
     .cps-rcard, .cps-stats/.cps-stat, .cps-advisor, .cps-fade, .cps-crumb,
     .cps-pinfo__chip. Aquí SOLO redeclaramos las variables (para que el silo
     funcione aunque se cargue sin el CSS de máquina) y añadimos lo NUEVO del
     hub: hero, toolbar de faceta, chips, grid de spokes y navegación de silos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — mismos valores que .cps-tpl-machine para coherencia 1:1.
   Si el CSS de máquina ya está cargado, estos no colisionan (distinto scope).
   -------------------------------------------------------------------------- */
.cps-tpl-silo {
	--green:       #f4d300;
	--green-hover: #e3d44a;
	--green-deep:  #c9ad00;
	--green-soft:  #fdfce9;
	--green-light: #fbf49a;
	--green-dark:  #3f3c13;

	--blue:        #6366f1;
	--blue-cyan:   #8b5cf6;

	--black:       #0d0c0a;
	--ink:         #181715;
	--ink-2:       #2e2c29;
	--ink-3:       #4d4a46;
	--muted:       #73706a;
	--muted-2:     #a19e98;
	--line:        #e8e6e1;
	--tint:        #f7f6f2;
	--tint-2:      #fcfcfa;
	--white:       #fff;

	--white-22: rgba(255,255,255,.22);
	--white-08: rgba(255,255,255,.08);
	--green-25: rgba(244,211,0,.25);
	--green-18: rgba(244,211,0,.18);
	--green-10: rgba(244,211,0,.1);
	--green-08: rgba(244,211,0,.08);
	--green-06: rgba(244,211,0,.06);
	--blue-08:  rgba(99,102,241,.08);
	--ink-sh-06: rgba(24,23,21,.06);
	--ink-sh-10: rgba(24,23,21,.1);

	--text-2xs: clamp(.625rem, .6rem + .15vw, .75rem);
	--text-xs:  clamp(.75rem, .71rem + .18vw, .875rem);
	--text-sm:  clamp(.875rem, .84rem + .18vw, 1rem);
	--text-base:clamp(1rem, .96rem + .18vw, 1.125rem);
	--text-md:  clamp(1.125rem, 1.05rem + .36vw, 1.375rem);
	--text-2xl: clamp(2rem, 1.2rem + 1.43vw, 3rem);
	--text-3xl: clamp(2.5rem, 2.07rem + 2.14vw, 4rem);

	--r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 999px;
	--sh-2: 0 4px 16px var(--ink-sh-06);
	--sh-3: 0 10px 30px var(--ink-sh-10);

	--ease: cubic-bezier(.22, 1, .36, 1);
	--max: 1280px;
	--pad-x: 32px;

	color: var(--ink);
	font-size: var(--text-base);
	line-height: 1.55;
}
@media (max-width: 768px) { .cps-tpl-silo { --pad-x: 20px; } }

/* Reset acotado (idéntico al de máquina, solo dentro del silo). */
.cps-tpl-silo *, .cps-tpl-silo *::before, .cps-tpl-silo *::after { box-sizing: border-box; }
.cps-tpl-silo img, .cps-tpl-silo svg { display: block; max-width: 100%; }
.cps-tpl-silo a { color: inherit; text-decoration: none; }
.cps-tpl-silo ul, .cps-tpl-silo ol { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Clases base reutilizadas — redeclaradas BAJO .cps-tpl-silo para que el hub
   sea autónomo. Misma especificidad que en máquina (.cps-tpl-X .clase), así no
   hay guerra de cascada entre ambas plantillas (scopes distintos).
   -------------------------------------------------------------------------- */
.cps-tpl-silo .cps-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad-x); }

.cps-tpl-silo .cps-sec { padding: 96px 0; position: relative; background: #F7F6F2; }
.cps-tpl-silo .cps-sec--alt { background: var(--tint-2); }
@media (max-width: 768px) { .cps-tpl-silo .cps-sec { padding: 64px 0; } }

.cps-tpl-silo .cps-sec__head { margin-bottom: 48px; }
.cps-tpl-silo .cps-sec__head--center { text-align: center; }
.cps-tpl-silo .cps-h-section { font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: var(--ink); margin: 0 0 20px; max-width: 820px; }
.cps-tpl-silo .cps-sec__head--center .cps-h-section { margin-inline: auto; }
.cps-tpl-silo .cps-h-section em { font-style: normal; font-weight: 800; background: linear-gradient(120deg, var(--green-deep) 0%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cps-tpl-silo .cps-sec__sub { font-size: var(--text-base); color: var(--ink-3); margin: 0 auto; max-width: 680px; line-height: 1.6; }

.cps-tpl-silo .cps-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); padding: 6px 14px; border: 1px solid var(--green-25); border-radius: var(--r-pill); background: var(--green-06); margin-bottom: 16px; }
.cps-tpl-silo .cps-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-18); }

.cps-tpl-silo .cps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: var(--text-sm); letter-spacing: -.005em; padding: 12px 22px; border-radius: var(--r-pill); cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; white-space: nowrap; border: 1px solid transparent; }
.cps-tpl-silo .cps-btn:active { transform: translateY(1px); }
.cps-tpl-silo .cps-btn--lg { padding: 14px 28px; font-size: var(--text-base); }
.cps-tpl-silo .cps-btn--cta { background: var(--green); color: var(--ink); }
.cps-tpl-silo .cps-btn--cta:hover { background: var(--green-hover); }
.cps-tpl-silo .cps-btn--soft { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.cps-tpl-silo .cps-btn--soft:hover { background: var(--tint); }

.cps-tpl-silo .cps-fade { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cps-tpl-silo .cps-fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cps-tpl-silo .cps-fade { opacity: 1; transform: none; transition: none; } }

/* Breadcrumb (mismo look que máquina). */
.cps-tpl-silo .cps-crumb { background: var(--tint-2); border-bottom: 1px solid var(--line); padding: 14px 0; }
.cps-tpl-silo .cps-crumb__inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); }
.cps-tpl-silo .cps-crumb a { color: var(--ink-3); font-weight: 500; }
.cps-tpl-silo .cps-crumb a:hover { color: var(--green-deep); }
.cps-tpl-silo .cps-crumb__sep { color: var(--muted-2); }
.cps-tpl-silo .cps-crumb .woocommerce-breadcrumb { font-size: var(--text-xs); color: var(--muted); }

/* Chips de confianza (compartidos con .cps-pinfo__chip de máquina). */
.cps-tpl-silo .cps-pinfo__chip { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); background: var(--white); border: 1px solid var(--line); padding: 7px 13px; border-radius: var(--r-pill); }
.cps-tpl-silo .cps-pinfo__chip svg { width: 15px; height: 15px; color: var(--green-deep); }

/* Stats (reutiliza .cps-stats/.cps-stat de máquina, scope silo). */
.cps-tpl-silo .cps-stats { background: linear-gradient(160deg, #141310 0%, #080806 100%); color: var(--white); padding: 56px 0; }
.cps-tpl-silo .cps-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 768px) { .cps-tpl-silo .cps-stats__grid { grid-template-columns: repeat(2, 1fr); } }
.cps-tpl-silo .cps-stat { text-align: center; }
.cps-tpl-silo .cps-stat__num { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cps-tpl-silo .cps-stat__num em { font-style: normal; background: linear-gradient(120deg, var(--green-light), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cps-tpl-silo .cps-stat__unit { font-size: var(--text-md); margin-left: 4px; color: var(--green); }
.cps-tpl-silo .cps-stat__label { font-size: var(--text-sm); color: rgba(255,255,255,.72); margin-top: 10px; }

/* ============================ HERO DEL HUB ============================ */
.cps-tpl-silo .cps-shero { padding: 56px 0 80px; background: linear-gradient(180deg, var(--tint-2) 0%, var(--white) 100%); position: relative; }
.cps-tpl-silo .cps-shero::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background:
		radial-gradient(ellipse 50% 40% at 88% 10%, var(--green-10) 0%, transparent 60%),
		radial-gradient(ellipse 40% 50% at 0% 90%, var(--blue-08) 0%, transparent 60%);
}
.cps-tpl-silo .cps-shero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
@media (max-width: 1024px) { .cps-tpl-silo .cps-shero__grid { grid-template-columns: 1fr; gap: 36px; } }
.cps-tpl-silo .cps-shero__title { font-size: var(--text-3xl); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; margin: 16px 0 0; color: var(--ink); }
.cps-tpl-silo .cps-shero__claim { font-size: var(--text-md); font-weight: 600; color: var(--ink-2); margin: 16px 0 0; max-width: 560px; }
.cps-tpl-silo .cps-shero__desc { font-size: var(--text-base); color: var(--ink-3); line-height: 1.65; margin: 18px 0 0; max-width: 600px; }
.cps-tpl-silo .cps-shero__desc p { margin: 0 0 12px; }
.cps-tpl-silo .cps-shero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.cps-tpl-silo .cps-shero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.cps-tpl-silo .cps-shero__visual { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); }
.cps-tpl-silo .cps-shero__visual img { width: 100%; height: auto; object-fit: cover; }

/* ============================ TOOLBAR DE FACETA ============================ */
.cps-tpl-silo .cps-silo-toolbar { margin-bottom: 32px; }
.cps-tpl-silo .cps-silo-toolbar__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cps-tpl-silo .cps-silo-toolbar__count { margin-left: auto; font-size: var(--text-sm); font-weight: 600; color: var(--muted); }

.cps-tpl-silo .cps-silo-search { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 200px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 16px; transition: border-color .15s ease, box-shadow .15s ease; }
.cps-tpl-silo .cps-silo-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-18); }
.cps-tpl-silo .cps-silo-search svg { color: var(--muted); flex: none; }
.cps-tpl-silo .cps-silo-search__input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--ink); padding: 12px 0; }
.cps-tpl-silo .cps-silo-search__toggle { flex: none; }

/* Panel de filtros */
.cps-tpl-silo .cps-silo-filters { margin-top: 20px; display: grid; gap: 20px; padding: 24px; background: var(--tint-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.cps-tpl-silo .cps-silo-filters[hidden] { display: none; }
.cps-tpl-silo .cps-silo-filters__group { border: 0; margin: 0; padding: 0; }
.cps-tpl-silo .cps-silo-filters__legend { font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; padding: 0; }
.cps-tpl-silo .cps-silo-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cps-tpl-silo .cps-silo-filters__reset { justify-self: start; background: none; border: 0; color: var(--green-deep); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; padding: 4px 0; }
.cps-tpl-silo .cps-silo-filters__reset:hover { color: var(--ink); }
.cps-tpl-silo .cps-silo-filters__reset[hidden] { display: none; }

/* Chip de faceta (botón, NO enlace → sin URL crawleable) */
.cps-tpl-silo .cps-silo-chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.cps-tpl-silo .cps-silo-chip:hover { border-color: var(--muted-2); }
.cps-tpl-silo .cps-silo-chip.is-active { background: var(--green); border-color: var(--green); color: var(--ink); }
.cps-tpl-silo .cps-silo-chip__n { font-size: var(--text-2xs); font-weight: 700; color: var(--muted); background: var(--tint); border-radius: var(--r-pill); padding: 1px 7px; }
.cps-tpl-silo .cps-silo-chip.is-active .cps-silo-chip__n { color: var(--green-dark); background: rgba(255,255,255,.45); }

/* ============================ GRID DE PRODUCTOS ============================ */
/* Reutiliza .cps-rel-grid + .cps-rcard de máquina; redeclarado en scope silo. */
.cps-tpl-silo .cps-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .cps-tpl-silo .cps-rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cps-tpl-silo .cps-rel-grid { grid-template-columns: 1fr; } }
.cps-tpl-silo .cps-rcard { background: var(--white); border-radius: var(--r-xl); padding: 28px 24px 24px; display: flex; flex-direction: column; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); min-height: 360px; }
.cps-tpl-silo .cps-rcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.cps-tpl-silo .cps-rcard__tag { align-self: flex-start; background: var(--green); color: var(--ink); font-size: 0.85em; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.cps-tpl-silo .cps-rcard__tag--spare { background: var(--ink); color: var(--white); }
.cps-tpl-silo .cps-rcard__media { flex: 1; display: grid; place-items: center; margin: 8px 0 20px; min-height: 250px; }
.cps-tpl-silo .cps-rcard__media img { max-width: 100%; max-height: 250px; object-fit: cover; }
.cps-tpl-silo .cps-rcard__title { font-size: var(--text-md); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink); }
.cps-tpl-silo .cps-rcard__price { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: 16px; }
.cps-tpl-silo .cps-rcard__price .amount { color: var(--ink); font-weight: 800; }
.cps-tpl-silo .cps-rcard__cta { margin-top: auto; }

/* Card oculta por el filtro: el atributo hidden basta, pero forzamos por si el
   tema define display sobre <a>. Resuelto por especificidad (no !important). */
.cps-tpl-silo .cps-silo-grid .cps-silo-card[hidden] { display: none; }

.cps-tpl-silo .cps-silo-empty { text-align: center; color: var(--muted); font-size: var(--text-base); padding: 48px 0; }
.cps-tpl-silo .cps-silo-empty[hidden] { display: none; }

.cps-tpl-silo .cps-silo-host { text-align: center; color: var(--ink-3); font-size: var(--text-base); max-width: 640px; margin: 0 auto; line-height: 1.65; }

/* ============================ SPOKES ============================ */
.cps-tpl-silo .cps-spoke-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .cps-tpl-silo .cps-spoke-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cps-tpl-silo .cps-spoke-grid { grid-template-columns: 1fr; } }
.cps-tpl-silo .cps-spoke { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cps-tpl-silo .cps-spoke:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.cps-tpl-silo .cps-spoke__kind { align-self: flex-start; font-size: var(--text-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: 14px; }
.cps-tpl-silo .cps-spoke__kind--info { color: var(--green-deep); background: var(--green-08); }
.cps-tpl-silo .cps-spoke__kind--bridge { color: var(--blue); background: rgba(99,102,241,.1); }
.cps-tpl-silo .cps-spoke__title { font-size: var(--text-md); font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink); }
.cps-tpl-silo .cps-spoke__excerpt { font-size: var(--text-sm); color: var(--ink-3); line-height: 1.6; margin: 0 0 18px; }
.cps-tpl-silo .cps-spoke__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--green-deep); }
.cps-tpl-silo .cps-spoke:hover .cps-spoke__cta { color: var(--ink); }

/* ============================ NAV DE SILOS HERMANOS ============================ */
.cps-tpl-silo .cps-silonav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .cps-tpl-silo .cps-silonav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cps-tpl-silo .cps-silonav { grid-template-columns: 1fr; } }
.cps-tpl-silo .cps-silonav__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); font-weight: 700; font-size: var(--text-sm); color: var(--ink-2); transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.cps-tpl-silo .cps-silonav__item:hover { border-color: var(--green); color: var(--ink); transform: translateY(-2px); }
.cps-tpl-silo .cps-silonav__item svg { color: var(--green-deep); flex: none; }

/* ============================ ADVISOR ============================ */
/* Mismo bloque que máquina, redeclarado en scope silo. */
.cps-tpl-silo .cps-advisor { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; background: linear-gradient(160deg, #141310 0%, #080806 100%); border-radius: var(--r-xl); padding: 56px; color: var(--white); }
@media (max-width: 900px) { .cps-tpl-silo .cps-advisor { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; } }
.cps-tpl-silo .cps-advisor__title { font-size: var(--text-2xl); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; margin: 16px 0; }
.cps-tpl-silo .cps-advisor__title em { font-style: normal; background: linear-gradient(120deg, var(--green-light), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cps-tpl-silo .cps-advisor__desc { font-size: var(--text-base); color: rgba(255,255,255,.82); line-height: 1.6; margin: 0; }
.cps-tpl-silo .cps-advisor__channels { display: grid; gap: 12px; }
.cps-tpl-silo .cps-advisor__channel { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); transition: background .15s ease, border-color .15s ease; }
.cps-tpl-silo .cps-advisor__channel:hover { background: rgba(255,255,255,.1); border-color: var(--white-22); }
.cps-tpl-silo .cps-advisor__channel-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--ink); }
.cps-tpl-silo .cps-advisor__channel-icon svg { width: 20px; height: 20px; }
.cps-tpl-silo .cps-advisor__channel-text { display: flex; flex-direction: column; }
.cps-tpl-silo .cps-advisor__channel-text strong { font-size: var(--text-base); }
.cps-tpl-silo .cps-advisor__channel-text span { font-size: var(--text-xs); color: rgba(255,255,255,.5); }

/* Utilidad accesible. */
.cps-tpl-silo .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }





.cps-tpl-silo .cps-fade {
	opacity: 1 !important;
}