/* Flick Candy Labs: la portada del laboratorio y su puerta. Colores de la identidad del 2026-10-15
   (Candy, Sour, Ink y Sugar), oscuro por defecto y claro a elección, con la letra Inter. */
:root {
  --bg: #19171C; --card: #232127; --card-2: #2C2A31;
  --fg: #FFF7EF; --fg2: rgba(255, 247, 239, .74); --fg3: rgba(255, 247, 239, .56);
  --linea: rgba(255, 247, 239, .12); --sec: rgba(255, 247, 239, .10); --sec-borde: rgba(255, 247, 239, .30); --sec-hover: rgba(255, 247, 239, .18);
  --candy: #FF4F9A; --candy-texto: #FF6FAE; --sour: #D7FF3F; --sour-hover: #E6FF6E; --ink: #19171C;
  --sombra: 0 24px 60px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FFF7EF; --card: #FFFFFF; --card-2: #F6EDE4;
    --fg: #19171C; --fg2: rgba(25, 23, 28, .74); --fg3: rgba(25, 23, 28, .60);
    --linea: rgba(25, 23, 28, .12); --sec: rgba(25, 23, 28, .06); --sec-borde: rgba(25, 23, 28, .34); --sec-hover: rgba(25, 23, 28, .12);
    --candy-texto: #C21F68; --sombra: 0 20px 50px rgba(25, 23, 28, .12);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #FFF7EF; --card: #FFFFFF; --card-2: #F6EDE4;
  --fg: #19171C; --fg2: rgba(25, 23, 28, .74); --fg3: rgba(25, 23, 28, .60);
  --linea: rgba(25, 23, 28, .12); --sec: rgba(25, 23, 28, .06); --sec-borde: rgba(25, 23, 28, .34); --sec-hover: rgba(25, 23, 28, .12);
  --candy-texto: #C21F68; --sombra: 0 20px 50px rgba(25, 23, 28, .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

.logo { display: block; width: 132px; aspect-ratio: 535 / 104; background: var(--fg); -webkit-mask: url(/assets/logo-horizontal.png) center / contain no-repeat; mask: url(/assets/logo-horizontal.png) center / contain no-repeat; }
.logo--grande { width: 168px; }
.punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--candy); box-shadow: 0 0 0 3px rgba(255, 79, 154, .22); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; font: 700 14px/1 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn--sour { background: var(--sour); color: #19171C; }
.btn--sour:hover { background: var(--sour-hover); }
.btn--sec { background: var(--sec); color: var(--fg); box-shadow: inset 0 0 0 2px var(--sec-borde); }
.btn--sec:hover { background: var(--sec-hover); }
.btn--icono { width: 42px; padding: 0; }
.btn--icono svg { width: 18px; height: 18px; }
.btn--ancho { width: 100%; }
.btn:focus-visible, .campo input:focus-visible, .card__img:focus-visible { outline: 2px solid var(--candy); outline-offset: 2px; }

/* Cabecera */
.cab { max-width: 1240px; margin: 0 auto; padding: 20px 16px; display: flex; align-items: center; gap: 12px; }
.cab__chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--sec); color: var(--fg2); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.cab__hueco { flex: 1; }

.main { max-width: 1240px; margin: 0 auto; padding: 4px 16px 72px; }

/* La imagen de Flick Candy, entera: la caja lleva la proporción del archivo (2098 x 750). */
.hero { margin-bottom: 44px; }
.hero__foto { width: 100%; aspect-ratio: 2098 / 750; border-radius: 24px; background: #120F14 url(/assets/img/cabecera.webp) center / cover no-repeat; box-shadow: var(--sombra); }
.hero__texto { padding: 22px 4px 0; max-width: 760px; }
.hero__t { margin: 0 0 8px; font-size: clamp(32px, 5vw, 56px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; }
.hero__t span { color: var(--candy-texto); }
.hero__d { margin: 0; color: var(--fg2); font-size: 17px; }

/* Grupos y rejilla: siempre rejilla, nunca carrusel */
.grupo { margin-top: 40px; }
.grupo__cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.grupo__t { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 800; }
.grupo__n { color: var(--fg3); font-size: 14px; font-weight: 600; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 20px; }
.rejilla--dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }

/* Tarjetas: sin borde, imagen a sangre arriba y aire entre la imagen y el título */
.card { display: flex; flex-direction: column; background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); }
.card__img { display: block; aspect-ratio: 16 / 9; background: var(--card-2); }
.card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__cuerpo { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 20px 22px; }
.card__t { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; font-weight: 800; }
.card--grande .card__t { font-size: 22px; }
.card__d { margin: 0; color: var(--fg2); font-size: 14px; }
.card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--sec); color: var(--fg2); font-size: 12px; font-weight: 600; }
.chip--autor { background: transparent; box-shadow: inset 0 0 0 1px var(--linea); color: var(--fg); font-weight: 700; }
.card__btn { align-self: flex-start; margin-top: 4px; }

/* La puerta */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.entrar__caja { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--card); border-radius: 28px; overflow: hidden; box-shadow: var(--sombra); }
.entrar__foto { min-height: 100%; background: #120F14 url(/assets/img/cabecera.webp) 62% center / cover no-repeat; }
.entrar__form { display: flex; flex-direction: column; gap: 14px; padding: 40px 36px; }
.entrar__chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--fg2); font-size: 12px; font-weight: 700; }
.entrar__t { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; font-weight: 800; }
.entrar__d { margin: 0 0 6px; color: var(--fg2); }
.entrar__error { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 79, 154, .14); color: var(--fg); font-size: 14px; font-weight: 600; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--fg2); }
.campo input { height: 46px; padding: 0 14px; border: 1px solid var(--sec-borde); border-radius: 14px; background: var(--bg); color: var(--fg); font: 500 15px Inter, system-ui, sans-serif; }

@media (max-width: 760px) {
  .entrar__caja { grid-template-columns: 1fr; }
  .entrar__foto { min-height: 0; aspect-ratio: 2098 / 750; background-position: center; }
  .entrar__form { padding: 28px 20px; }
  .hero__foto { border-radius: 18px; }
  .hero { margin-bottom: 28px; }
}

/* CURSOR GRANDE · fragmento canonico de la casa
   ---------------------------------------------------------------------------
   Dictado por el CEO el 2026-09-03: «en todo lo que se monte en labs, aumenta
   el tamano del cursor, se me pierde siempre».

   QUE HACE. Sustituye la flecha del sistema (unos 20 px de dibujo dentro de un
   cuadro de 32) por una de 44 px con contorno oscuro, y la mano de los
   elementos que se pulsan por otra del mismo tamano. El contorno es lo que
   hace que se vea igual sobre fondo claro y sobre fondo oscuro, que es donde
   se perdia.

   COMO SE USA. Se pega tal cual al final de la hoja de estilos de la pieza, o
   se enlaza si la pieza carga estilos de una direccion compartida. No depende
   de ninguna variable de marca, asi que funciona en cualquier tablero.

   POR QUE LLEVA `auto` Y `pointer` DETRAS DE LA COMA. Es la red de seguridad
   del navegador: si por lo que sea no puede cargar el dibujo, usa el cursor
   normal en vez de dejar la pagina sin cursor ninguno.

   LO QUE NO SE TOCA. El cursor de escribir dentro de un campo de texto, que
   sigue siendo el del sistema: ahi el tamano no estorba y cambiarlo despista.

   Los dos dibujos van dentro de la propia hoja (no son archivos aparte) para
   que la pieza siga funcionando aunque se copie a otro servidor.            */

:root {
  --cursor-flecha:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.2 19.3 13.1l-6.5.4 3.4 6.7-3.1 1.6-3.4-6.7-4.7 4.4z' fill='%23ffffff' stroke='%23141414' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2;
  --cursor-mano:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 2.2c.9 0 1.6.7 1.6 1.6v6.1h.6V5.1c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6v4.8h.6V6.7c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6v7.6c0 3.9-2.4 6.6-6.1 6.6-2.4 0-4.1-1-5.3-3L4.4 13c-.5-.8-.2-1.8.6-2.3.8-.5 1.8-.2 2.3.6l1.6 2.4V3.8c0-.9.7-1.6 1.6-1.6z' fill='%23ffffff' stroke='%23141414' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 12 3;
}

/* Los dos van marcados como obligatorios A PROPOSITO. Casi todas las piezas
   ya traen su propio `cursor: pointer` escrito con mas peso (por ejemplo
   `.barra button`), y sin la marca esas reglas ganarian y el cursor volveria
   al pequeno justo encima de los botones, que es donde mas se busca. */
html, body { cursor: var(--cursor-flecha), auto !important; }

a, button, summary, label[for], select, [role="button"], [role="tab"], [role="link"],
[data-ir], [data-paso], [data-video], [onclick], .clic, .cta, .btn,
input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] {
  cursor: var(--cursor-mano), pointer !important;
}

/* En papel no hay cursor: se apaga para que ningun motor de impresion intente
   resolver las imagenes al generar el PDF. */
@media print {
  html, body, a, button { cursor: auto; }
}