/* ---------------------------------------------------------------
   Cerebro Raro — Hero simulador
   Hereda de Blocksy: paleta, tipografía, radio de borde y botones.
   --------------------------------------------------------------- */

.cr-hero{
  /* puentes hacia Blocksy, con respaldo por si el tema cambia */
  --cr-fondo:  var(--theme-palette-color-8, #ffffff);
  --cr-texto:  var(--theme-text-color, var(--theme-palette-color-4, #14161c));
  --cr-acento: var(--theme-palette-color-1, #e5117b);
  --cr-borde:  var(--theme-border-radius, 6px);
  --cr-altura: 100svh;

  /* Variables que publica Blocksy. Con otro tema caen a cero y el hero queda
     como si no hubiera cabecera, que es lo correcto.
       --has-transparent-header  1 si la cabecera flota sobre el contenido
       --header-sticky-height    alto de la cabecera pegada; el tema solo la
                                 emite si la cabecera lo está, y la pone a 0
                                 en los dispositivos donde no lo esté
       --admin-bar               32px o 46px con sesión iniciada, si no 0 */
  --cr-cabecera:     var(--header-height, 0px);
  --cr-fija:         var(--header-sticky-height, 0px);
  --cr-transparente: var(--has-transparent-header, 0);
  --cr-barra:        var(--admin-bar, 0px);

  /* Arriba hay que esquivar lo que tape el hero de forma permanente, y son dos
     cosas distintas que no se suman: la cabecera pegada lo tapa mientras haces
     scroll, y la transparente lo tapa en reposo. Manda la mayor de las dos.
     Una cabecera pegada tapa aunque no sea transparente: ese es el caso que
     se comía el reloj. */
  --cr-arriba: calc(var(--cr-barra) + max(var(--cr-fija), var(--cr-cabecera) * var(--cr-transparente)));

  /* Abajo el problema es otro: una cabecera normal empuja el hero hacia abajo
     y su borde inferior se sale de la ventana, así que el aviso de scroll sube.
     La barra de admin tapa por arriba y desborda por abajo: cuenta en las dos. */
  --cr-abajo:  calc(var(--cr-barra) + var(--cr-cabecera) * (1 - var(--cr-transparente)));
  --cr-scroll-abajo: clamp(26px, calc(20px + var(--cr-abajo)), 140px);

  position:relative;
  font-family: var(--theme-font-family, inherit);
  color: var(--cr-texto);
}

.cr-pista{position:relative}

.cr-fijo{
  position:sticky; top:0;
  height:var(--cr-altura);
  overflow:hidden;
}

.cr-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}

.cr-capa{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  padding:calc(18px + var(--cr-arriba)) clamp(20px, 4vw, 72px) calc(var(--cr-scroll-abajo) + 18px);
  transition:opacity .7s ease, filter .7s ease;
}


/* El reloj vive suelto en .cr-capa, sin el antiguo .cr-hud: como es un item
   flex del contenedor en columna, hereda su padding-top y por tanto también
   --cr-arriba, así que nunca queda debajo de la cabecera. */
.cr-reloj{
  flex:0 0 auto;align-self:flex-end;
  font-variant-numeric:tabular-nums;font-size:13.5px;letter-spacing:.05em;
  opacity:.5;
  transition:opacity .4s ease, transform .3s ease;
}
.cr-reloj.cr-vivo{opacity:1;transform:scale(1.06)}

.cr-centro{
  flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;
  width:100%;max-width:72rem;
}
.cr-bloque{transition:opacity .28s ease, transform .28s ease;max-width:100%}
.cr-bloque.cr-ido{opacity:0;transform:translateY(12px)}

.cr-rotulo{
  margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  color:color-mix(in srgb, currentColor 62%, transparent);
  text-transform:uppercase;
}

/* cada parte del rótulo que tiene categoría propia es un enlace */
.cr-op{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness:1px;text-underline-offset:3px;
  display:inline-block;padding:6px 0;margin:-6px 0;
  transition:color .18s ease, text-decoration-color .18s ease;
}
.cr-op:hover,.cr-op:focus-visible{color:var(--cr-acento);text-decoration-color:var(--cr-acento)}
.cr-op:focus-visible{outline:2px solid var(--cr-acento);outline-offset:3px;border-radius:2px}

.cr-frase{
  margin:0 0 14px;
  font-family: var(--theme-font-family-headings, var(--theme-font-family, inherit));
  font-weight:800;
  font-size:clamp(1.9rem, 8vw, 3.4rem);
  line-height:1.04;letter-spacing:-.018em;
  text-wrap:balance;max-width:18ch;
  transition:font-size .4s ease;
}
.cr-frase.cr-compacta{font-size:clamp(1.35rem,5.2vw,2rem);margin-bottom:12px}
.cr-frase .cr-p{display:inline-block;transition:color .18s ease,transform .18s ease}
.cr-frase .cr-p.cr-intruso{color:var(--cr-acento);transform:translateY(-3px) rotate(-1.5deg)}
.cr-frase .cr-eco{opacity:.42}

.cr-nota{margin:0 0 10px;max-width:46ch;font-size:15px;opacity:.72}
.cr-precio{
  margin:0 0 8px;font-size:14px;font-weight:700;opacity:.85;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.cr-precio[hidden]{display:none}
.cr-precio-antes{font-weight:500;opacity:.55;text-decoration:line-through}
.cr-precio-antes[hidden]{display:none}
.cr-ver{margin:4px 0 0}
.cr-ver[hidden]{display:none}
/* ---------- botones ----------
   .cr-cta lleva .wp-element-button y .cr-enlace lleva .ct-button-ghost, así que
   Blocksy los resuelve enteros: alto mínimo, relleno, radio, tipografía, hover
   y el resplandor del :before. Aquí no se redeclara nada de eso.

   Lo de abajo es solo un respaldo para temas que no sean Blocksy. Va envuelto
   en :where(), que deja la especificidad en cero: cualquier regla del tema,
   por suelta que sea, lo pisa. Si Blocksy está activo esto no pinta nada. */
:where(.cr-hero .cr-cta, .cr-hero .cr-enlace){
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--theme-button-min-height, 42px);
  padding:var(--theme-button-padding, 10px 22px);
  border-radius:var(--theme-button-border-radius, var(--cr-borde));
  font-family:var(--theme-button-font-family, inherit);
  font-size:var(--theme-button-font-size, 14px);
  font-weight:var(--theme-button-font-weight, 600);
  line-height:var(--theme-button-line-height, 1.3);
  letter-spacing:var(--theme-button-letter-spacing, 0);
  text-decoration:none;
}
:where(.cr-hero .cr-cta){
  background:var(--cr-acento);
  color:var(--theme-button-text-initial-color, #fff);
  border:none;
}
:where(.cr-hero .cr-enlace){
  background:transparent;
  color:var(--cr-acento);
  border:2px solid currentColor;
}

/* ---------- índice ---------- */
.cr-indice{display:none;margin-top:8px;min-height:0;flex-direction:column}
.cr-indice.cr-puesto{display:flex}
.cr-familias{overflow-y:auto;padding-right:6px;-webkit-overflow-scrolling:touch}
.cr-familia{margin:0 0 12px}
.cr-familia h3{
  margin:0 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  opacity:.5;text-transform:uppercase;
}
.cr-tags{display:flex;flex-wrap:wrap;gap:5px}
.cr-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:500;text-decoration:none;color:inherit;
  border:1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius:999px;padding:4px 10px;opacity:.78;
  transition:opacity .18s ease,border-color .18s ease,background .18s ease;
}
.cr-tag span{font-size:10.5px;opacity:.55;font-variant-numeric:tabular-nums}
.cr-tag:hover,.cr-tag:focus-visible{
  opacity:1;border-color:var(--cr-acento);
  background:color-mix(in srgb, var(--cr-acento) 12%, transparent);
}

/* ---------- cierre ---------- */
.cr-cierre{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;flex:0 0 auto}
.cr-cierre[hidden]{display:none}
.cr-saldo{font-size:12.5px;opacity:.6;font-variant-numeric:tabular-nums}

/* ---------- explicación del saldo ---------- */
.cr-saldo-caja{position:relative;display:inline-flex;align-items:center;gap:6px}
.cr-ayuda{
  width:18px;height:18px;flex:0 0 auto;padding:0;
  display:grid;place-items:center;
  font:inherit;font-size:10.5px;font-weight:700;line-height:1;
  color:inherit;background:none;cursor:pointer;
  border:1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius:50%;opacity:.6;
  transition:opacity .18s ease, color .18s ease, border-color .18s ease;
}
.cr-ayuda:hover,.cr-ayuda:focus-visible{opacity:1;color:var(--cr-acento);border-color:var(--cr-acento)}
.cr-ayuda:focus-visible{outline:2px solid var(--cr-acento);outline-offset:2px}

/* Se oculta con opacity, no con hidden ni visibility, para que el texto siga
   en el árbol de accesibilidad y aria-describedby pueda leerlo. */
.cr-tip{
  position:absolute;left:0;bottom:calc(100% + 10px);z-index:4;
  width:max-content;max-width:min(34ch, 76vw);
  padding:10px 12px;
  font-size:12.5px;font-weight:400;line-height:1.45;letter-spacing:0;
  text-align:left;text-transform:none;
  color:var(--cr-fondo);background:var(--cr-texto);
  border-radius:var(--cr-borde);
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.cr-tip:after{
  content:"";position:absolute;left:14px;top:100%;
  border:6px solid transparent;border-top-color:var(--cr-texto);
}
.cr-ayuda:hover ~ .cr-tip,
.cr-ayuda:focus-visible ~ .cr-tip,
.cr-tip.cr-abierto{opacity:1;transform:none}

/* ---------- riel ---------- */
.cr-riel{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:11px;
}
.cr-riel button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.cr-riel i{
  display:block;width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.26;
  transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease;
}
.cr-riel button[aria-current="true"] i{opacity:1;transform:scale(1.8);box-shadow:0 0 12px var(--cr-acento)}

.cr-scroll{
  position:absolute;left:clamp(20px, 4vw, 72px);bottom:var(--cr-scroll-abajo);z-index:3;
  font-size:11.5px;letter-spacing:.11em;opacity:.5;margin:0;
  display:flex;align-items:center;gap:8px;transition:opacity .5s ease;
}
.cr-scroll span{display:block;width:1px;height:20px;background:currentColor;animation:cr-caer 1.9s ease-in-out infinite;transform-origin:top}
@keyframes cr-caer{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.cr-scroll.cr-fuera{opacity:0}

/* El campo «cabecera transparente» del bloque ya no calcula nada por su cuenta:
   solo fuerza el flag, para temas que no publiquen --has-transparent-header.
   Con Blocksy el valor ya viene del tema y marcar la casilla no duplica nada. */
.cr-hero--bajo-cabecera{--cr-transparente:1}

/* respaldo si la alineación completa no llega a los bordes */
.cr-hero--ancho{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}

.cr-acto{height:var(--cr-altura)}
.cr-acto:last-child{height:calc(var(--cr-altura) + 12svh)}

.cr-sinjs{padding:24px;max-width:70ch}
.cr-sinjs li{margin-bottom:12px}

/* ---------- editor ---------- */
.cr-hero--editor .cr-fijo{position:relative;height:min(var(--cr-altura), 520px)}
.cr-hero--editor .cr-acto{display:none}
.cr-hero--editor .cr-riel,
.cr-hero--editor .cr-scroll{display:none}

@media(min-width:782px){
  .cr-capa{padding:calc(26px + var(--cr-arriba)) clamp(40px, 4vw, 72px) calc(var(--cr-scroll-abajo) + 22px)}
  .cr-nota{font-size:16px}
  .cr-riel{right:28px}
  .cr-tag{font-size:13px}
}

/* pantallas anchas: el índice reparte las familias en columnas */
@media(min-width:1000px){
  .cr-familias{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:2px 32px;align-content:start;
  }
}

@media (prefers-reduced-motion: reduce){
  .cr-scroll span{animation:none}
  .cr-capa,.cr-bloque,.cr-riel i,.cr-frase{transition:none}
}