/* Concurso de diseños GLIDE — usa los tokens de css/tienda.css (azul #004AAD,
   celeste #5DE0E6, tinta #053E5C, Raleway/Public Sans). Pensado primero para el
   celular de alguien que llega desde WhatsApp. */

:root {
  --cz-azul-hondo: #002E73;
  --cz-tarjeta-bg: radial-gradient(120% 95% at 50% 32%, #FFFFFF 0%, #F1F7FB 62%, #E4EFF6 100%);
  --cz-dorado: #FFC94D;
  --cz-sticky-h: 0px;
}

/* Lo oculto queda oculto aunque el bloque tenga display propio (grid/flex). */
.cz-main [hidden], .cz [hidden] { display: none !important; }
.cz-home-fotos svg { width: 100%; height: 100%; display: block; }

.cz-main { max-width: 1180px; margin: 0 auto; padding: 0 16px 48px; }
.cz-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cz-main a { color: inherit; }
.cz-link { color: var(--azul) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Foco visible y claro en todo el concurso (no solo un halo tenue). */
.cz :focus-visible, .cz-sheet :focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(93,224,230,.45); border-radius: 10px; }
.cz-hero :focus-visible { outline-color: #fff; }

/* ── Botones del concurso (táctiles: mínimo 48px) ───────────────────────── */
.cz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 20px;
  border-radius: 14px; border: 0; cursor: pointer; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 16px;
  text-decoration: none; line-height: 1.15; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.cz-btn:active { transform: translateY(1px); }
.cz-btn[disabled], .cz-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.cz-btn-primario { background: var(--grad-azul); color: #fff !important; box-shadow: 0 6px 18px rgba(0,74,173,.28); }
.cz-btn-primario:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,74,173,.32); }
.cz-btn-celeste { background: var(--celeste); color: var(--azul-hondo, #002E73) !important; box-shadow: 0 6px 18px rgba(93,224,230,.35); }
.cz-btn-celeste:not([disabled]):hover { transform: translateY(-2px); background: #78E8EC; }
.cz-btn-blanco { background: #fff; color: var(--azul) !important; }
.cz-btn-borde { background: transparent; color: var(--azul) !important; border: 2px solid var(--border-2); }
.cz-btn-borde:hover { border-color: var(--azul); }
.cz-btn-borde-claro { background: rgba(255,255,255,.08); color: #fff !important; border: 2px solid rgba(255,255,255,.55); }
.cz-btn-borde-claro:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.cz-btn-wa { background: #1FAF54; color: #fff !important; }
.cz-btn-wa:hover { background: #179447; }
.cz-btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 12px; }
.cz-btn-block { width: 100%; }
.cz-btn-lg { min-height: 56px; font-size: 17.5px; padding: 14px 24px; }

/* ── Sub-navegación del concurso ────────────────────────────────────────── */
.cz-subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 12px 0 2px; }
.cz-subnav::-webkit-scrollbar { display: none; }
.cz-subnav a { flex: 0 0 auto; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--tinta-2) !important;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.cz-subnav a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: #fff !important; }

/* ── Aviso de vista previa / estados globales ───────────────────────────── */
.cz-aviso { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; margin: 12px 0 0;
  font-size: 14px; line-height: 1.45; border: 1px solid; }
.cz-aviso svg { flex: 0 0 auto; margin-top: 2px; }
.cz-aviso-info { background: #EAF6FD; border-color: #B9DDF2; color: var(--tinta); }
.cz-aviso-warn { background: #FFF7E3; border-color: #F3D58A; color: #5A4300; }
.cz-aviso-ok { background: #E8F8F0; border-color: #A9E2C6; color: var(--ok-text); }
.cz-aviso-err { background: var(--rojo-bg); border-color: #F4B8BE; color: #8A1622; }
.cz-aviso b { font-weight: 800; }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.cz-hero { position: relative; overflow: hidden; color: #fff; margin: 14px 0 0; border-radius: 26px;
  background: radial-gradient(90% 120% at 100% 0%, rgba(93,224,230,.38) 0%, transparent 55%),
              radial-gradient(70% 90% at 0% 100%, rgba(26,102,199,.75) 0%, transparent 60%),
              linear-gradient(150deg, #003C93 0%, #004AAD 45%, #0B5FD0 100%);
  box-shadow: 0 18px 50px rgba(0,46,115,.25); isolation: isolate; }
.cz-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.4px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.cz-hero-in { display: grid; gap: 18px; padding: 26px 20px 22px; }
.cz-kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 800; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cz-azul-hondo, #002E73); background: var(--celeste);
  padding: 7px 12px; border-radius: 999px; }
.cz-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: #0E8F4F; box-shadow: 0 0 0 3px rgba(14,143,79,.25); }
.cz-kicker.cerrado { background: #fff; }
.cz-kicker.cerrado .dot { background: #8FB0C2; box-shadow: none; }
.cz-hero h1 { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: clamp(34px, 9.6vw, 64px); line-height: 1.02;
  letter-spacing: -0.025em; margin: 14px 0 12px; text-wrap: balance; }
.cz-monto { display: inline-block; color: var(--celeste); position: relative; white-space: nowrap; }
.cz-monto::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: .02em; height: .14em; border-radius: 99px;
  background: rgba(93,224,230,.45); transform: skewX(-12deg); }
.cz-hero-sub { font-size: clamp(16px, 4.3vw, 19px); line-height: 1.45; margin: 0 0 18px; max-width: 30em; opacity: .95; }
.cz-hero-ctas { display: flex; flex-direction: column; gap: 10px; }
.cz-hero-ctas .cz-btn { width: 100%; }
.cz-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 13.5px; opacity: .92; }
.cz-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }

.cz-cuenta { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 10px 14px; border-radius: 14px;
  background: rgba(0,24,70,.32); border: 1px solid rgba(255,255,255,.18); }
.cz-cuenta small { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.cz-cuenta b { font-family: 'Raleway', sans-serif; font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Composición de remeras */
.cz-comp { position: relative; min-height: 250px; display: grid; place-items: center; }
.cz-comp-fig { position: absolute; width: 50%; max-width: 230px; aspect-ratio: 1; border-radius: 22px; background: var(--cz-tarjeta-bg);
  box-shadow: 0 18px 40px rgba(0,20,60,.35); padding: 6px; transform: rotate(var(--r, 0deg)) translate(var(--x, 0), var(--y, 0));
  animation: czFlota 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.cz-comp-fig svg { width: 100%; height: 100%; display: block; }
.cz-comp-fig img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 16px; }
.cz-comp-fig:nth-child(1) { --r: -8deg; --x: -64%; --y: 8%; z-index: 1; width: 44%; }
.cz-comp-fig:nth-child(2) { --r: 0deg; --x: 0; --y: -4%; z-index: 3; width: 52%; max-width: 260px; }
.cz-comp-fig:nth-child(3) { --r: 8deg; --x: 64%; --y: 10%; z-index: 2; --d: -3s; width: 44%; }
.cz-comp-fig figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: 11.5px; font-weight: 700; color: var(--tinta);
  background: rgba(255,255,255,.92); border-radius: 9px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-comp-nota { position: absolute; bottom: -2px; right: 6px; font-size: 11px; font-weight: 700; background: rgba(0,24,70,.45);
  color: #fff; padding: 3px 9px; border-radius: 999px; z-index: 5; }
.cz-sticker { position: absolute; z-index: 6; top: 2%; right: 4%; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  text-align: center; background: var(--cz-dorado); color: #3A2600; font-family: 'Raleway', sans-serif; font-weight: 800; line-height: 1.02;
  box-shadow: 0 10px 24px rgba(0,0,0,.25); transform: rotate(12deg); font-size: 13px; padding: 8px; }
.cz-sticker b { display: block; font-size: 19px; letter-spacing: -.02em; }
@keyframes czFlota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@media (min-width: 720px) {
  .cz-hero-in { grid-template-columns: 1.08fr 1fr; align-items: center; padding: 44px 40px 40px; gap: 28px; }
  .cz-hero-ctas { flex-direction: row; flex-wrap: wrap; }
  .cz-hero-ctas .cz-btn { width: auto; }
  .cz-comp { min-height: 380px; }
}
@media (min-width: 1040px) { .cz-hero-in { padding: 56px 56px 50px; } }

/* ── Cómo participar ─────────────────────────────────────────────────────── */
.cz-sec { margin-top: 34px; }
.cz-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cz-sec-head h2 { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.08;
  margin: 0; color: var(--tinta); letter-spacing: -0.02em; }
.cz-sec-head p { margin: 4px 0 0; color: var(--tinta-2); font-size: 15px; }
.cz-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 72%);
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.cz-pasos::-webkit-scrollbar { display: none; }
.cz-paso { scroll-snap-align: start; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 16px; position: relative;
  box-shadow: var(--shadow-sm); }
.cz-paso-n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: 'Raleway', sans-serif;
  font-weight: 800; font-size: 19px; color: #fff; background: var(--grad-azul); margin-bottom: 12px; }
.cz-paso:nth-child(2) .cz-paso-n { background: linear-gradient(135deg, #0B5FD0, #1E86D8); }
.cz-paso:nth-child(3) .cz-paso-n { background: linear-gradient(135deg, #1E86D8, #2BB6BD); }
.cz-paso:nth-child(4) .cz-paso-n { background: linear-gradient(135deg, #2BB6BD, #5DE0E6); color: var(--cz-azul-hondo, #002E73); }
.cz-paso h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--tinta); }
.cz-paso p { margin: 0; font-size: 14px; color: var(--tinta-2); line-height: 1.45; }
@media (min-width: 820px) { .cz-pasos { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }

/* ── Galería ─────────────────────────────────────────────────────────────── */
.cz-gal-tools { display: grid; gap: 10px; margin-bottom: 12px; }
.cz-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-3); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.cz-tabs::-webkit-scrollbar { display: none; }
.cz-tab { flex: 1 0 auto; min-height: 44px; padding: 8px 14px; border-radius: 11px; border: 0; background: transparent; cursor: pointer;
  font-weight: 700; font-size: 14.5px; color: var(--tinta-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cz-tab[aria-selected="true"] { background: #fff; color: var(--azul); box-shadow: var(--shadow-sm); }
.cz-buscar { position: relative; }
.cz-buscar input { width: 100%; min-height: 48px; padding: 12px 44px 12px 44px; border: 1.5px solid var(--border); border-radius: 14px;
  font-size: 16px; background: #fff; color: var(--tinta); font-family: inherit; }
.cz-buscar input:focus { border-color: var(--azul-l); outline: none; box-shadow: var(--focus-ring); }
.cz-buscar > svg, .cz-buscar > [data-icon] { display: grid; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.cz-buscar button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px;
  border: 0; background: transparent; color: var(--tinta-2); cursor: pointer; display: grid; place-items: center; }
@media (min-width: 720px) { .cz-gal-tools { grid-template-columns: auto minmax(240px, 360px); justify-content: space-between; align-items: center; } }

.cz-gal-nota { font-size: 13.5px; color: var(--tinta-2); margin: 0 0 12px; display: flex; gap: 6px; align-items: center; }
.cz-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 360px) { .cz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .cz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1040px) { .cz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }

.cz-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--tinta) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cz-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.cz-card-img { position: relative; aspect-ratio: 1; background: var(--cz-tarjeta-bg); }
.cz-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%; opacity: 0; transition: opacity .25s ease; }
.cz-card-img img.ok { opacity: 1; }
.cz-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cz-card-titulo { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 15.5px; line-height: 1.2; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cz-card-alias { font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-card-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; }
.cz-votos { display: inline-flex; align-items: baseline; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.cz-votos b { font-family: 'Raleway', sans-serif; font-size: 18px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cz-card-cta { font-size: 13px; font-weight: 800; color: var(--azul); display: inline-flex; align-items: center; gap: 3px; }
.cz-badge-voto { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  background: var(--tinta); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 9px 5px 7px; border-radius: 999px; }
.cz-badge-voto svg { color: var(--celeste); }
.cz-badge-pos { position: absolute; top: 8px; right: 8px; z-index: 2; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 14px; background: #fff; color: var(--tinta);
  box-shadow: var(--shadow-sm); }
.cz-badge-pos.top1 { background: var(--cz-dorado); color: #3A2600; }
.cz-badge-prueba { position: absolute; bottom: 8px; left: 8px; z-index: 2; background: #5A4300; color: #FFF7E3; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; }
.cz-badge-mio { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--celeste); color: var(--cz-azul-hondo, #002E73);
  font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: 999px; }
.cz-card .cz-badge-voto ~ .cz-badge-mio { top: 44px; }

/* Esqueletos de carga: reservan el lugar, sin saltos. */
.cz-skel { pointer-events: none; }
.cz-skel .cz-card-img, .cz-skel-line { background: linear-gradient(100deg, #EDF4F9 30%, #F7FBFD 50%, #EDF4F9 70%); background-size: 300% 100%;
  animation: czShimmer 1.3s linear infinite; }
.cz-skel-line { height: 13px; border-radius: 7px; margin: 4px 0; }
@keyframes czShimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

.cz-vacio { text-align: center; padding: 34px 18px; background: #fff; border: 1.5px dashed var(--border-2); border-radius: 20px; color: var(--tinta-2); }
.cz-vacio h3 { font-family: 'Raleway', sans-serif; color: var(--tinta); margin: 10px 0 6px; font-size: 20px; }
.cz-vacio p { margin: 0 auto 14px; max-width: 32em; font-size: 15px; }
.cz-vacio .ico { width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center; background: var(--surface-3); color: var(--azul); }
.cz-mas { display: flex; justify-content: center; margin-top: 18px; }

/* ── Reglas / FAQ ────────────────────────────────────────────────────────── */
.cz-reglas { display: grid; gap: 12px; }
@media (min-width: 820px) { .cz-reglas { grid-template-columns: 1fr 1fr; gap: 16px; } }
.cz-panel { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-sm); }
.cz-panel h3 { font-family: 'Raleway', sans-serif; margin: 0 0 10px; font-size: 19px; color: var(--tinta); }
.cz-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cz-lista li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.45; }
.cz-lista li > svg { flex: 0 0 auto; color: var(--celeste-d); margin-top: 3px; }
.cz-pend { display: inline-block; font-size: 11.5px; font-weight: 800; color: #5A4300; background: #FFF1C9; border-radius: 6px; padding: 1px 7px; margin-left: 4px; }
.cz-faq details { border-bottom: 1px solid var(--border); }
.cz-faq details:last-child { border-bottom: 0; }
.cz-faq summary { cursor: pointer; list-style: none; padding: 13px 30px 13px 0; font-weight: 700; font-size: 15px; position: relative; min-height: 48px; }
.cz-faq summary::-webkit-details-marker { display: none; }
.cz-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--azul); font-weight: 400; }
.cz-faq details[open] summary::after { content: '–'; }
.cz-faq details p { margin: 0 0 14px; font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; }

.cz-banda { margin-top: 34px; border-radius: 24px; padding: 26px 20px; color: #fff; text-align: center; background:
  radial-gradient(80% 140% at 50% 0%, rgba(93,224,230,.35), transparent 60%), linear-gradient(135deg, #003C93, #0B5FD0); }
.cz-banda h2 { font-family: 'Raleway', sans-serif; font-size: clamp(24px, 6vw, 34px); margin: 0 0 8px; line-height: 1.1; }
.cz-banda p { margin: 0 auto 16px; max-width: 34em; opacity: .92; }
.cz-banda .cz-btn { min-width: 240px; }

/* ── Página de un diseño ─────────────────────────────────────────────────── */
.cz-d { display: grid; gap: 14px; margin-top: 12px; grid-template-areas: "head" "media" "info"; }
.cz-d-head { grid-area: head; display: flex; flex-direction: column; gap: 8px; }
.cz-d-media { grid-area: media; }
.cz-d-info { grid-area: info; }
/* Celular: nombre, autor y remera entran juntos en el primer pantallazo. */
@media (max-width: 899px) {
  .cz-d-fig { width: min(100%, 52vh); margin: 0 auto; }
  .cz-d-vistas { justify-content: center; }
  .cz-d-vista { width: 60px; height: 60px; }
  .cz-d-titulo { font-size: clamp(26px, 7vw, 34px); }
}
@media (min-width: 900px) { .cz-d { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); grid-template-areas: "media head" "media info"; grid-template-rows: auto 1fr; gap: 12px 28px; align-items: start; } }
.cz-d-media { position: relative; }
.cz-d-fig { position: relative; margin: 0; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: var(--cz-tarjeta-bg); border: 1px solid var(--border); }
.cz-d-fig img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cz-d-zoom { position: absolute; right: 12px; bottom: 12px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 0; cursor: pointer;
  background: rgba(5,62,92,.82); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.cz-d-vistas { display: flex; gap: 8px; margin-top: 10px; }
.cz-d-vista { width: 76px; height: 76px; border-radius: 14px; border: 2px solid var(--border); background: var(--cz-tarjeta-bg); padding: 3px; cursor: pointer; position: relative; }
.cz-d-vista img { width: 100%; height: 100%; object-fit: contain; }
.cz-d-vista span { position: absolute; bottom: -1px; left: 50%; transform: translate(-50%, 50%); font-size: 11px; font-weight: 800; background: #fff;
  border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; color: var(--tinta-2); white-space: nowrap; }
.cz-d-vista[aria-pressed="true"] { border-color: var(--azul); }
.cz-d-info { display: flex; flex-direction: column; gap: 12px; }
.cz-chip-concurso { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 13px; font-weight: 800; color: var(--azul);
  background: #E7F1FC; border: 1px solid #C6DDF6; border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.cz-chip-concurso b { color: var(--tinta); }
.cz-d-titulo { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: clamp(28px, 7.6vw, 42px); line-height: 1.05; margin: 0;
  color: var(--tinta); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cz-d-autor { margin: 0; font-size: 16px; color: var(--tinta-2); }
.cz-d-autor b { color: var(--tinta); }
.cz-d-votos { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--border); }
.cz-d-votos-n { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 40px; line-height: 1; color: var(--azul); font-variant-numeric: tabular-nums; }
.cz-d-votos-l { font-size: 14px; color: var(--tinta-2); line-height: 1.3; }
.cz-d-votos-l b { display: block; color: var(--tinta); font-size: 15px; }
.cz-d-votado { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #E8F8F0; border: 1px solid #A9E2C6;
  color: var(--ok-text); font-weight: 700; }
.cz-d-desc { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tinta); white-space: pre-line; overflow-wrap: anywhere; }
.cz-d-compartir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cz-d-mini { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.cz-d-mini a, .cz-d-mini button { color: var(--tinta-2) !important; background: none; border: 0; padding: 8px 0; cursor: pointer; font: inherit;
  text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; }
.cz-invita { margin-top: 26px; display: grid; gap: 14px; align-items: center; border-radius: 22px; padding: 20px; background: #fff; border: 1px solid var(--border); }
.cz-invita h2 { font-family: 'Raleway', sans-serif; font-size: 23px; margin: 0 0 4px; color: var(--tinta); }
.cz-invita p { margin: 0; color: var(--tinta-2); }
@media (min-width: 720px) { .cz-invita { grid-template-columns: 1fr auto; padding: 22px 26px; } }

/* Barra fija para votar en el celular (deja lugar abajo para no tapar nada). */
.cz-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(5,62,92,.08);
  display: flex; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .25s ease; }
.cz-barra.on { transform: none; }
.cz-barra-n { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 20px; color: var(--tinta); line-height: 1; font-variant-numeric: tabular-nums; }
.cz-barra-n small { display: block; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: var(--tinta-2); margin-top: 2px; }
.cz-barra .cz-btn { flex: 1; }
body.cz-con-barra { padding-bottom: 86px; }
@media (min-width: 900px) { .cz-barra { display: none; } body.cz-con-barra { padding-bottom: 0; } }

/* Más diseños (tira horizontal) */
.cz-tira { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 44%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.cz-tira > * { scroll-snap-align: start; }
@media (min-width: 720px) { .cz-tira { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }

/* ── Hojas (diálogos): abajo en el celular, centradas en escritorio ─────── */
.cz-sheet-back { position: fixed; inset: 0; z-index: 300; background: rgba(3,20,45,.55); display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s ease; }
.cz-sheet-back.on { opacity: 1; }
.cz-sheet { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 24px 24px 0 0;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); transform: translateY(30px); transition: transform .22s ease; color: var(--tinta); }
.cz-sheet-back.on .cz-sheet { transform: none; }
.cz-sheet-grip { width: 44px; height: 5px; border-radius: 9px; background: var(--border-2); margin: 0 auto 10px; }
.cz-sheet-head { display: flex; align-items: flex-start; gap: 10px; }
.cz-sheet-head h2 { font-family: 'Raleway', sans-serif; font-size: 22px; line-height: 1.15; margin: 4px 0 0; flex: 1; }
.cz-x { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--surface-3); color: var(--tinta); cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.cz-sheet p { font-size: 15px; line-height: 1.5; }
.cz-sheet .cz-campo { margin: 14px 0 10px; }
@media (min-width: 640px) {
  .cz-sheet-back { align-items: center; padding: 20px; }
  .cz-sheet { border-radius: 24px; padding: 20px 24px 24px; }
  .cz-sheet-grip { display: none; }
}
.cz-que-voto { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); margin: 12px 0; }
.cz-que-voto img { width: 72px; height: 72px; border-radius: 12px; object-fit: contain; background: var(--cz-tarjeta-bg); flex: 0 0 auto; }
.cz-que-voto b { display: block; font-family: 'Raleway', sans-serif; font-size: 16px; line-height: 1.2; }
.cz-que-voto span { font-size: 13.5px; color: var(--tinta-2); }

/* Campos */
.cz-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cz-campo label, .cz-campo .lbl { font-weight: 800; font-size: 14px; color: var(--tinta); }
.cz-campo label small, .cz-campo .lbl small { font-weight: 600; color: var(--tinta-2); }
.cz-campo input, .cz-campo textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--border-2); border-radius: 14px;
  font-size: 16px; font-family: inherit; color: var(--tinta); background: #fff; }
.cz-campo textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.cz-campo input:focus, .cz-campo textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 4px rgba(0,74,173,.14); }
.cz-campo[data-error] input, .cz-campo[data-error] textarea { border-color: var(--rojo); }
.cz-campo .err { font-size: 13.5px; color: #B0182A; font-weight: 700; display: none; align-items: center; gap: 5px; }
.cz-campo[data-error] .err { display: flex; }
.cz-campo .ayuda { font-size: 13px; color: var(--tinta-2); display: flex; justify-content: space-between; gap: 8px; }
.cz-codigo { letter-spacing: .5em; font-size: 26px !important; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; padding-left: calc(14px + .25em) !important; }
.cz-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1.5px solid var(--border); background: #fff;
  cursor: pointer; font-size: 14.5px; line-height: 1.45; margin-bottom: 10px; }
.cz-check input { width: 22px; height: 22px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--azul); }
.cz-check:has(input:checked) { border-color: var(--azul); background: #F2F8FE; }
.cz-check[data-error] { border-color: var(--rojo); }
.cz-nota { font-size: 13px; color: var(--tinta-2); line-height: 1.45; }
.cz-reenvio { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 10px; font-size: 14px; }
.cz-reenvio button { background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--azul); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 40px; }
.cz-reenvio button[disabled] { color: var(--tinta-3); cursor: default; text-decoration: none; }
.cz-dev { margin-top: 10px; font-size: 12.5px; background: #FFF7E3; border: 1px dashed #E2B94A; padding: 8px 10px; border-radius: 10px; color: #5A4300; }

.cz-exito { text-align: center; padding: 6px 0 4px; }
.cz-exito-ico { width: 74px; height: 74px; margin: 6px auto 10px; border-radius: 50%; display: grid; place-items: center; background: #E8F8F0; color: #0E8F4F;
  animation: czPop .35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes czPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cz-exito h2 { font-family: 'Raleway', sans-serif; font-size: 25px; margin: 0 0 6px; }
.cz-acciones { display: grid; gap: 9px; margin-top: 14px; }

/* Zoom */
.cz-zoom { position: fixed; inset: 0; z-index: 320; background: rgba(3,14,32,.94); display: flex; flex-direction: column; }
.cz-zoom-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; color: #fff; gap: 8px; }
.cz-zoom-area { flex: 1; overflow: auto; display: grid; place-items: center; touch-action: pan-x pan-y pinch-zoom; }
.cz-zoom-area img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 12px; cursor: zoom-in; }
.cz-zoom-area.grande img { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }

/* ── Participar / Mi participación ───────────────────────────────────────── */
.cz-flujo { display: grid; gap: 18px; margin-top: 12px; }
@media (min-width: 900px) { .cz-flujo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
  .cz-flujo-prev { position: sticky; top: 84px; } }
.cz-pasos-mini { display: flex; gap: 6px; margin: 4px 0 14px; }
.cz-pasos-mini span { flex: 1; height: 6px; border-radius: 9px; background: var(--border); }
.cz-pasos-mini span.on { background: var(--azul); }
.cz-h1 { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: clamp(26px, 7vw, 38px); line-height: 1.08; margin: 6px 0 8px; color: var(--tinta); letter-spacing: -0.02em; }
.cz-lead { font-size: 16px; color: var(--tinta-2); margin: 0 0 16px; line-height: 1.5; }
.cz-prev-vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cz-prev-vistas figure { margin: 0; aspect-ratio: 1; border-radius: 18px; background: var(--cz-tarjeta-bg); border: 1px solid var(--border); position: relative; overflow: hidden; }
.cz-prev-vistas figure.solo { grid-column: 1 / -1; }
.cz-prev-vistas img { width: 100%; height: 100%; object-fit: contain; }
.cz-prev-vistas figcaption { position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 800; background: #fff; border-radius: 8px; padding: 2px 8px; color: var(--tinta-2); }
.cz-yo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14.5px; }
.cz-yo button { margin-left: auto; }

.cz-mi-card { display: grid; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 16px; box-shadow: var(--shadow-sm); }
@media (min-width: 720px) { .cz-mi-card { grid-template-columns: 260px 1fr; padding: 20px; } }
.cz-mi-img { aspect-ratio: 1; border-radius: 18px; background: var(--cz-tarjeta-bg); overflow: hidden; }
.cz-mi-img img { width: 100%; height: 100%; object-fit: contain; }
.cz-estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; padding: 5px 11px; border-radius: 999px; }
.cz-estado-pendiente { background: #FFF1C9; color: #5A4300; }
.cz-estado-aprobado { background: #DDF5E8; color: var(--ok-text); }
.cz-estado-rechazado, .cz-estado-descalificado, .cz-estado-retirado { background: var(--rojo-bg); color: #8A1622; }
.cz-metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cz-metrica { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; }
.cz-metrica b { display: block; font-family: 'Raleway', sans-serif; font-size: 26px; color: var(--tinta); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cz-metrica span { font-size: 12.5px; color: var(--tinta-2); }

/* Compartir (pantalla de celebración) */
.cz-celebra { text-align: center; background: linear-gradient(180deg, #EAF6FD, #fff); border: 1px solid var(--border); border-radius: 24px; padding: 22px 16px; }
.cz-celebra h2 { font-family: 'Raleway', sans-serif; font-size: clamp(24px, 6.5vw, 32px); margin: 8px 0 6px; line-height: 1.1; }
.cz-celebra .cz-acciones { max-width: 420px; margin-left: auto; margin-right: auto; }
.cz-enlace { display: flex; gap: 8px; align-items: center; background: #fff; border: 1.5px solid var(--border-2); border-radius: 14px; padding: 6px 6px 6px 12px; margin-top: 10px; }
.cz-enlace code { flex: 1; font-size: 14px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

/* Banner del concurso dentro del diseñador (producto.html?concurso=1) */
.cz-pz-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 18px; padding: 12px 14px; margin-bottom: 14px; color: #fff;
  background: radial-gradient(80% 160% at 100% 0%, rgba(93,224,230,.35), transparent 60%), linear-gradient(135deg, #003C93, #0B5FD0); }
.cz-pz-banner b { font-family: 'Raleway', sans-serif; font-size: 17px; display: block; }
.cz-pz-banner span { font-size: 13.5px; opacity: .92; }
.cz-pz-banner .txt { flex: 1 1 220px; }
.cz-pz-cta { margin-bottom: 12px; display: grid; gap: 8px; }
.cz-pz-cta p { margin: 0; font-size: 13px; color: var(--tinta-2); }
.cz-pz-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--border); display: flex; gap: 10px; }
.cz-pz-barra .cz-btn { flex: 1; }
@media (min-width: 1040px) { .cz-pz-barra { display: none; } }
/* La guía del diseñador sube para no taparse con la barra del concurso. */
@media (max-width: 1039px) { body.cz-modo-concurso .tut-help { bottom: calc(86px + env(safe-area-inset-bottom)); } }
.cz-cargando-full { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(244,250,253,.92); }
.cz-cargando-full > div { text-align: center; color: var(--tinta); font-weight: 700; display: grid; gap: 12px; justify-items: center; }

/* Promo del concurso en la portada */
.cz-home { margin: 0 auto; max-width: 1180px; padding: 0 16px; }
.cz-home-card { position: relative; overflow: hidden; display: grid; gap: 14px; align-items: center; color: #fff; text-decoration: none;
  border-radius: 24px; padding: 22px 20px; margin: 22px 0 6px;
  background: radial-gradient(70% 140% at 100% 0%, rgba(93,224,230,.45), transparent 55%), linear-gradient(140deg, #003C93 0%, #004AAD 50%, #0B5FD0 100%);
  box-shadow: 0 14px 36px rgba(0,46,115,.22); }
.cz-home-card h2 { font-family: 'Raleway', sans-serif; font-size: clamp(26px, 7vw, 40px); margin: 6px 0 6px; line-height: 1.04; letter-spacing: -0.02em; }
.cz-home-card p { margin: 0 0 14px; opacity: .94; font-size: 15.5px; }
.cz-home-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.cz-home-fotos { display: flex; justify-content: center; gap: 0; }
.cz-home-fotos img { width: 38%; max-width: 170px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 18px; padding: 5px; box-shadow: 0 12px 26px rgba(0,0,0,.28); }
.cz-home-fotos img:nth-child(1) { transform: rotate(-7deg) translateX(12%); }
.cz-home-fotos img:nth-child(2) { transform: translateY(-6%); z-index: 2; }
.cz-home-fotos img:nth-child(3) { transform: rotate(7deg) translateX(-12%); }
@media (min-width: 760px) { .cz-home-card { grid-template-columns: 1.2fr 1fr; padding: 30px 34px; } }

/* Movimiento reducido: sin flotar, sin pop, sin brillo. */
@media (prefers-reduced-motion: reduce) {
  .cz-comp-fig, .cz-exito-ico, .cz-skel .cz-card-img, .cz-skel-line { animation: none !important; }
  .cz-card, .cz-btn, .cz-barra, .cz-sheet, .cz-sheet-back, .cz-card-img img { transition: none !important; }
}

/* ── Ranking en vivo ─────────────────────────────────────────────────────── */
.rk-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; color: var(--tinta-2); margin-bottom: 12px; }
.rk-head b { color: var(--tinta); font-family: 'Raleway', sans-serif; font-size: 15px; }
.rk-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #B0182A; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.rk-live .dot { width: 9px; height: 9px; border-radius: 50%; background: #E63946; animation: rkPulso 1.6s ease-in-out infinite; }
@keyframes rkPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,.5); } 50% { box-shadow: 0 0 0 6px rgba(230,57,70,0); } }
.rk-mio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; margin-bottom: 14px;
  background: linear-gradient(135deg, #E7F9FA, #EAF2FF); border: 1.5px solid var(--celeste-d); font-size: 14.5px; }
.rk-mio span { flex: 1 1 200px; }

.rk-podio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.rk-p { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 10px 12px;
  border-radius: 20px; background: #fff; border: 1px solid var(--border); text-decoration: none; color: var(--tinta) !important; box-shadow: var(--shadow-sm); }
.rk-p1 { grid-column: 1 / -1; background: radial-gradient(120% 90% at 50% 0%, #FFF4D1 0%, #fff 60%); border: 2px solid #F2C14E; box-shadow: 0 12px 30px rgba(242,193,78,.25); }
.rk-p.mio { outline: 3px solid var(--celeste-d); outline-offset: 2px; }
.rk-medalla { position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 15px; box-shadow: 0 4px 10px rgba(0,0,0,.15); z-index: 2; }
.rk-medalla.oro { background: linear-gradient(135deg, #FFE08A, #F2B705); color: #3A2600; width: 48px; height: 48px; font-size: 18px; }
.rk-medalla.plata { background: linear-gradient(135deg, #F1F4F7, #B8C2CC); color: #2B3640; }
.rk-medalla.bronce { background: linear-gradient(135deg, #F5C9A3, #C77A3C); color: #3B1D06; }
.rk-p-img { width: 100%; max-width: 150px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--cz-tarjeta-bg); display: block; }
.rk-p1 .rk-p-img { max-width: 220px; }
.rk-p-img img { width: 100%; height: 100%; object-fit: contain; }
.rk-p-tit { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 15.5px; line-height: 1.2; margin-top: 6px; overflow-wrap: anywhere; }
.rk-p1 .rk-p-tit { font-size: 19px; }
.rk-p-n { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2); }
.rk-p-n b { font-family: 'Raleway', sans-serif; font-size: 22px; color: var(--azul); }
.rk-p1 .rk-p-n b { font-size: 30px; }
.rk-tuyo { position: absolute; top: 12px; right: 10px; font-size: 11.5px; font-weight: 800; background: var(--celeste); color: #002E73; padding: 3px 8px; border-radius: 999px; display: inline-flex; gap: 4px; align-items: center; }
@media (min-width: 720px) {
  .rk-podio { grid-template-columns: 1fr 1.2fr 1fr; align-items: end; }
  .rk-p1 { grid-column: 2; grid-row: 1; padding-top: 22px; }
  .rk-p2 { grid-column: 1; grid-row: 1; }
  .rk-p3 { grid-column: 3; grid-row: 1; }
}

.rk-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rk-row { display: grid; grid-template-columns: 34px 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; position: relative; }
.rk-row.mio { border: 2px solid var(--celeste-d); background: linear-gradient(90deg, #EFFBFC, #fff 60%); }
.rk-row.voto { box-shadow: inset 4px 0 0 var(--azul); }
.rk-pos { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 19px; color: var(--tinta-2); text-align: center; }
.rk-img { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--cz-tarjeta-bg); display: block; }
.rk-img img { width: 100%; height: 100%; object-fit: contain; }
.rk-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-tit { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 15px; text-decoration: none; color: var(--tinta) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-alias { font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-bar { display: block; height: 6px; border-radius: 9px; background: #E4EEF5; overflow: hidden; margin: 3px 0 1px; }
.rk-bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--azul), var(--celeste-d)); transition: width .6s ease; }
.rk-bar.grande { height: 10px; }
.rk-falta { font-size: 12px; color: var(--tinta-2); }
.rk-racha { color: #B0182A; display: inline-flex; align-items: center; gap: 2px; }
.rk-n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 52px; }
.rk-n b { font-family: 'Raleway', sans-serif; font-size: 20px; color: var(--azul); line-height: 1; font-variant-numeric: tabular-nums; }
.rk-n small { font-size: 11.5px; color: var(--tinta-2); white-space: nowrap; }
.rk-pedir { grid-column: 1 / -1; justify-self: start; }
.rk-mov { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; padding: 1px 6px; border-radius: 999px; }
.rk-mov.up { color: #0B7A45; background: #DDF5E8; }
.rk-mov.down { color: #B0182A; background: #FDECEE; }
.rk-mov.igual { color: var(--tinta-3); background: var(--surface-3); }
.rk-mov.nuevo { color: #002E73; background: #DDF5F7; }
.rk-flash { animation: rkFlash 1.4s ease; }
@keyframes rkFlash { 0% { color: #fff; background: var(--azul); border-radius: 6px; } 100% { background: transparent; } }

/* Dónde vas (página del diseño y Mi participación) */
.rk-donde { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--border); }
.rk-donde.propio { border: 2px solid var(--celeste-d); background: linear-gradient(135deg, #EFFBFC, #F3F7FF); }
.rk-donde-top { display: flex; gap: 12px; align-items: center; }
.rk-donde-pos { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: var(--azul); min-width: 58px; }
.rk-donde-tit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 15px; }
.rk-donde-sub { display: block; font-size: 14px; color: var(--tinta-2); margin-top: 2px; }
.rk-donde-pie { font-size: 12.5px; color: var(--tinta-2); }
@media (prefers-reduced-motion: reduce) { .rk-live .dot, .rk-flash { animation: none !important; } .rk-bar i { transition: none; } }
.rk-hito { font-size: 13px; color: var(--tinta); display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rk-cerca { margin-top: 4px; }
.rk-cerca-tit { display: block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); margin: 4px 0 6px; }
.rk-row.compacta { grid-template-columns: 28px 40px minmax(0, 1fr) auto; padding: 6px 10px; gap: 8px; }
.rk-row.compacta .rk-img { width: 40px; height: 40px; }
.rk-row.compacta .rk-pos { font-size: 15px; }
.rk-row.compacta .rk-n b { font-size: 16px; }
.rk-row.compacta .rk-n { flex-direction: row; align-items: center; gap: 6px; }

/* Ranking: duelo, en vivo, subidas, festejo */
.rk-cierre { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; background: var(--tinta); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; }
.rk-cierre b { color: var(--celeste); font-size: 13px; }
.rk-duelo { display: grid; gap: 8px; padding: 14px 16px; border-radius: 20px; margin-bottom: 12px; color: #fff;
  background: radial-gradient(90% 140% at 50% 0%, rgba(93,224,230,.35), transparent 60%), linear-gradient(135deg, #002E73, #004AAD 55%, #0B5FD0); }
.rk-duelo-tit { justify-self: center; display: inline-flex; gap: 6px; align-items: center; font-family: 'Raleway', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; color: var(--cz-dorado); }
.rk-duelo-fila { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.rk-duelo-lado { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: #fff !important; min-width: 0; }
.rk-duelo-lado.der { text-align: right; align-items: flex-end; }
.rk-duelo-lado b { font-family: 'Raleway', sans-serif; font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; }
.rk-duelo-lado span { font-size: 13px; opacity: .85; }
.rk-vs { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 22px; color: var(--cz-dorado); text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.rk-duelo-barra { display: block; height: 10px; border-radius: 9px; background: rgba(255,255,255,.25); overflow: hidden; }
.rk-duelo-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--cz-dorado), #FFE08A); border-radius: 9px; transition: width .8s ease; }
.rk-duelo-dif { justify-self: center; font-weight: 800; font-size: 14px; }
.rk-subidas, .rk-feed { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 12px; }
.rk-feed-tit { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); width: 100%; }
.rk-subida { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid #BFE8D2; text-decoration: none; color: var(--tinta) !important; font-size: 13px; }
.rk-subida small { color: var(--tinta-2); }
.rk-feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; }
.rk-feed li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 7px 10px; background: #fff; border: 1px solid var(--border); border-radius: 12px; animation: rkEntra .5s ease both; }
.rk-feed li a { color: var(--tinta) !important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-feed li span { color: var(--tinta-3); white-space: nowrap; font-size: 12px; }
@keyframes rkEntra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rk-festejo { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 500; display: flex; align-items: center; gap: 10px;
  background: var(--cz-dorado); color: #3A2600; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 18px; padding: 14px 22px; border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25); animation: czPop .4s cubic-bezier(.2,1.4,.4,1) both; transition: opacity .6s, transform .6s; }
.rk-festejo.fuera { opacity: 0; transform: translateX(-50%) translateY(-10px); }
.rk-confeti { position: fixed; inset: 0; z-index: 499; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rk-feed li, .rk-festejo { animation: none !important; } .rk-duelo-barra i { transition: none; } }

.cz-cupon { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 14px 16px; border-radius: 18px; margin-top: 12px;
  background: linear-gradient(135deg, #FFF4D1, #FFFBEF); border: 2px dashed #E2B94A; color: #3A2600; font-size: 14px; line-height: 1.45; }
.cz-cupon-tit { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.cz-cupon-code { font-family: 'Raleway', sans-serif; font-size: 24px; letter-spacing: .06em; color: #002E73; }

/* En el teléfono las 4 secciones del concurso van en 2 filas a la vista
   (en una tira que se deslizaba, "Mi participación" quedaba cortado). */
@media (max-width: 520px) {
  .cz-subnav { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .cz-subnav a { justify-content: center; font-size: 13.5px; padding: 8px 10px; }
}
/* "Participar con este diseño" en una línea en teléfonos chicos. */
@media (max-width: 380px) { [data-participar].cz-btn-lg { font-size: 15.5px; white-space: nowrap; padding-left: 12px; padding-right: 12px; } }