/* ==========================================================================
   MAGIC COMMANDER — estilos de la PÁGINA DE INICIO
   ==========================================================================

   ESTE ARCHIVO SE PUEDE EDITAR EN CALIENTE.
   Ábrelo con el Bloc de notas, cambia lo que quieras, guarda y pulsa F5 en
   el navegador. NO hace falta reiniciar el servidor ni tocar nada de Python.

   Casi todo el aspecto (colores, tamaños, inclinaciones de las cartas,
   sombras, redondeos) se controla desde el bloque de AJUSTES de aquí abajo.
   Cambia un número y lo ves al instante.

   Este archivo es SOLO de la página de inicio. La barra de arriba y el pie
   de abajo son componentes globales y viven en `global.css`, junto con los
   colores de la marca; ahí se cambian una vez y cambian en toda la web.
   El resto de la aplicación conserva su estilo de siempre.
   ========================================================================== */

:root {
  /* Los colores (--fondo, --panel, --borde, --texto, --acento...), el ancho
     máximo, el redondeo general, la tipografía y la velocidad de las
     transiciones están en `global.css`, porque los comparten todas las
     páginas. Aquí abajo solo están las medidas propias de la portada. */

  /* ---------- MEDIDAS DE LA PORTADA ---------- */
  --radio-carta:      3.6%;      /* redondeo de las cartas (como las de verdad) */
  --separacion:       22px;      /* hueco entre bloques */
  --nucleo-tamano:    clamp(146px, 13.5vw, 196px);  /* diámetro del círculo central */
  /* Anchura de la columna central. Es MÁS ESTRECHA que el círculo a
     propósito: así los bloques llegan casi hasta él y el mordisco curvo los
     abraza. Bájala y se acercan más todavía. */
  --nucleo-columna:   calc(var(--nucleo-tamano) * .55);
  /* Aire entre el borde del círculo y el arco de los bloques. */
  --muesca-aire:      16px;
  /* Cuánto crece el círculo central al pasar el ratón.
     Crece DESDE SU CENTRO, sin moverse ni un píxel.
     LÍMITE DE SEGURIDAD: el círculo gana (crecer - 1) x diámetro / 2 píxeles
     de radio, y solo tiene `--muesca-aire` (16 px) de hueco hasta el arco de
     los bloques. Con el diámetro máximo (196 px) y 1.06 gana 5,9 px: queda
     muy lejos de tocarlos. No subas de 1.14 o empezaría a invadirlos. */
  --nucleo-crecer:    1.06;

  /* ---------- LAS CARTAS ----------
     `--carta-ancho` manda en el tamaño de las cartas de los bloques.
     `--carta-giro` es cuánto se inclinan. */
  --carta-ancho:      clamp(112px, 10.4vw, 166px);
  --carta-giro:       -8deg;
  --carta-sombra:     0 26px 50px rgba(0, 0, 0, .65);

  /* ---------- SOMBRAS Y MOVIMIENTO ---------- */
  --sombra-bloque:    0 18px 40px rgba(0, 0, 0, .45);
  --sombra-bloque-on: 0 26px 60px rgba(0, 0, 0, .6);
  --subida-hover:     -6px;      /* cuánto se levanta un bloque al pasar el ratón */

  /* ---------- TIPOGRAFÍA DE LA PORTADA ---------- */
  --titulo-bloque:    clamp(1.2rem, 1.75vw, 1.68rem);
  --titulo-hero:      clamp(2.1rem, 4.4vw, 3.9rem);
}

/* ========================================================================== */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  /* Resplandor suave detrás de la cabecera: da profundidad sin dibujar nada. */
  background-image:
    radial-gradient(120% 70% at 50% -10%, var(--fondo-alto) 0%, transparent 62%),
    radial-gradient(60% 45% at 88% 8%, rgba(217, 164, 65, .10) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.contenedor { max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 28px; }

/* La BARRA SUPERIOR y el PIE ya no se definen aquí: son componentes
   globales y están en `global.css`, para que sean exactamente iguales en
   todas las páginas de la web. */

/* ==========================================================================
   CABECERA DE LA PÁGINA
   ========================================================================== */
.hero { padding: clamp(38px, 6vw, 76px) 0 clamp(22px, 3vw, 38px); }

.hero-etiqueta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 16px;
}
.hero-etiqueta::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento));
}

.hero h1 {
  margin: 0 0 14px;
  font-size: var(--titulo-hero); font-weight: 800; line-height: 1.02;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--texto) 30%, #9fb0c9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero p { margin: 0; max-width: 64ch; font-size: clamp(.97rem, 1.15vw, 1.1rem); color: var(--texto-suave); }

/* ==========================================================================
   LOS CUATRO BLOQUES Y EL CÍRCULO CENTRAL
   --------------------------------------------------------------------------
   En PC: cuatro bloques en 2x2 con una columna central propia para el
   círculo del simulador, que queda justo en medio y no tapa a nadie.
   En móvil (más abajo) todo se apila y el círculo pasa a ser una banda.
   ========================================================================== */
.bloques {
  display: grid;
  gap: var(--separacion);
  grid-template-columns: 1fr var(--nucleo-columna) 1fr;
  grid-template-rows: 1fr 1fr;   /* filas iguales: el centro del círculo cae
                                    exactamente en la esquina de los 4 bloques */
  padding-bottom: 10px;
}
.b-generar { grid-column: 1; grid-row: 1; }
.b-escoger { grid-column: 3; grid-row: 1; }
.b-mazos   { grid-column: 1; grid-row: 2; }
.b-bulk    { grid-column: 3; grid-row: 2; }
.nucleo    { grid-column: 2; grid-row: 1 / span 2; }

.bloque {
  position: relative;                 /* las cartas se colocan respecto a él */
  display: block;
  min-height: clamp(262px, 25vw, 334px);
  border-radius: var(--radio);
  isolation: isolate;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

/* El fondo va en una capa aparte para poder recortarlo con el redondeo
   mientras las cartas SÍ pueden asomar por el borde. */
.bloque-fondo {
  position: absolute; inset: 0; border-radius: var(--radio); overflow: hidden;
  background: linear-gradient(135deg, var(--panel-alto) 0%, var(--panel) 58%, #10141d 100%);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-bloque);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
/* Brillo diagonal muy suave, que se aviva al pasar el ratón. */
.bloque-fondo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(75% 90% at 82% 15%, rgba(217, 164, 65, .16) 0%, transparent 62%);
  opacity: .55; transition: opacity var(--transicion);
}

.bloque:hover { transform: translateY(var(--subida-hover)); }
.bloque:hover .bloque-fondo { border-color: var(--borde-brillo); box-shadow: var(--sombra-bloque-on); }
.bloque:hover .bloque-fondo::after { opacity: 1; }
.bloque:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

/* ---------- Texto del bloque ---------- */
.bloque-texto {
  position: relative; z-index: 3;
  padding: clamp(24px, 2.4vw, 36px);
  max-width: 60%;
  display: flex; flex-direction: column; height: 100%;
}
.bloque-tipo {
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 10px;
}
.bloque-titulo {
  margin: 0 0 10px;
  font-size: var(--titulo-bloque); font-weight: 800; line-height: 1.08; letter-spacing: -.01em;
  text-transform: uppercase;
}
.bloque-desc { margin: 0; font-size: .89rem; color: var(--texto-suave); max-width: 30ch; }

.bloque-entrar {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .84rem; font-weight: 700; letter-spacing: .04em; color: var(--acento-claro);
}
.bloque-entrar .flecha { transition: transform var(--transicion); display: inline-block; }
.bloque:hover .bloque-entrar .flecha { transform: translateX(6px); }

/* ==========================================================================
   EL MORDISCO CURVO HACIA EL CÍRCULO
   --------------------------------------------------------------------------
   Cada bloque tiene recortado, con una máscara, un arco de circunferencia en
   la esquina que mira al centro. Los cuatro arcos juntos dibujan el hueco
   redondo donde vive el círculo del simulador: por eso los bloques parecen
   abrazarlo en vez de ser cuatro rectángulos sueltos.

   El centro de ese arco es EXACTAMENTE el centro del círculo, calculado desde
   la esquina de cada bloque: media columna central más el hueco de la rejilla
   en horizontal, y medio hueco en vertical.
   ========================================================================== */
.bloques {
  --muesca-radio: calc(var(--nucleo-tamano) / 2 + var(--muesca-aire));
  --muesca-x: calc(var(--separacion) + var(--nucleo-columna) / 2);
  --muesca-y: calc(var(--separacion) / 2);
}

.bloque-fondo {
  -webkit-mask-image: var(--muesca-mascara);
          mask-image: var(--muesca-mascara);
}

/* El aro de 1 px que remata el arco: se dibuja JUSTO por fuera del recorte,
   así que de la circunferencia entera solo sobrevive el trozo visible. */
.muesca {
  position: absolute;
  width: calc(var(--muesca-radio) * 2); height: calc(var(--muesca-radio) * 2);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--borde);
  transition: box-shadow var(--transicion);
  pointer-events: none;
}
.bloque:hover .muesca { box-shadow: 0 0 0 1px var(--borde-brillo); }

/* Arriba a la izquierda: el mordisco va en su esquina inferior derecha. */
.b-generar {
  --muesca-mascara: radial-gradient(circle var(--muesca-radio)
      at calc(100% + var(--muesca-x)) calc(100% + var(--muesca-y)),
      transparent calc(100% - 1.5px), #000 100%);
}
.b-generar .muesca {
  right: calc(-1 * (var(--muesca-x) + var(--muesca-radio)));
  bottom: calc(-1 * (var(--muesca-y) + var(--muesca-radio)));
}

/* Arriba a la derecha: esquina inferior izquierda. */
.b-escoger {
  --muesca-mascara: radial-gradient(circle var(--muesca-radio)
      at calc(0% - var(--muesca-x)) calc(100% + var(--muesca-y)),
      transparent calc(100% - 1.5px), #000 100%);
}
.b-escoger .muesca {
  left: calc(-1 * (var(--muesca-x) + var(--muesca-radio)));
  bottom: calc(-1 * (var(--muesca-y) + var(--muesca-radio)));
}

/* Abajo a la izquierda: esquina superior derecha. */
.b-mazos {
  --muesca-mascara: radial-gradient(circle var(--muesca-radio)
      at calc(100% + var(--muesca-x)) calc(0% - var(--muesca-y)),
      transparent calc(100% - 1.5px), #000 100%);
}
.b-mazos .muesca {
  right: calc(-1 * (var(--muesca-x) + var(--muesca-radio)));
  top: calc(-1 * (var(--muesca-y) + var(--muesca-radio)));
}

/* Abajo a la derecha: esquina superior izquierda. */
.b-bulk {
  --muesca-mascara: radial-gradient(circle var(--muesca-radio)
      at calc(0% - var(--muesca-x)) calc(0% - var(--muesca-y)),
      transparent calc(100% - 1.5px), #000 100%);
}
.b-bulk .muesca {
  left: calc(-1 * (var(--muesca-x) + var(--muesca-radio)));
  top: calc(-1 * (var(--muesca-y) + var(--muesca-radio)));
}

/* ==========================================================================
   EL CÍRCULO CENTRAL — el simulador
   ========================================================================== */
.nucleo {
  position: relative; z-index: 4;
  align-self: center; justify-self: center;
  width: var(--nucleo-tamano); aspect-ratio: 1;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 14px;
  background: radial-gradient(circle at 50% 30%, #253048 0%, #141a26 62%, #0d1119 100%);
  border: 1px solid var(--acento-oscuro);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
/* Halo dorado alrededor: es lo que lo "conecta" visualmente con los cuatro bloques. */
.nucleo::before {
  content: ""; position: absolute; inset: -34px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(217, 164, 65, .18) 0%, transparent 66%);
  opacity: .8; transition: opacity var(--transicion);
  pointer-events: none;
}
/* Al pasar el ratón el círculo NO se mueve: crece desde su propio centro.
   `transform-origin` es el centro por defecto y el círculo está centrado en su
   celda de la rejilla (`align-self`/`justify-self: center`), así que al
   escalar se expande lo mismo hacia los cuatro lados y su centro se queda
   exactamente donde estaba. El "premium" lo pone el resplandor dorado, que
   crece más que el propio círculo pero es luz, no borde: nunca empuja ni
   invade los bloques. El tamaño máximo lo controlas con `--nucleo-crecer`
   arriba, que está calculado para no llegar nunca al arco de los bloques. */
.nucleo:hover,
.nucleo:focus-visible {
  transform: scale(var(--nucleo-crecer));
  border-color: var(--acento);
  box-shadow: 0 0 0 1px rgba(217, 164, 65, .30),
              0 0 34px 4px rgba(217, 164, 65, .22),
              0 20px 50px rgba(0, 0, 0, .7),
              inset 0 1px 0 rgba(255, 255, 255, .14);
}
.nucleo:hover::before, .nucleo:focus-visible::before { opacity: 1; }
.nucleo:focus-visible { outline: 2px solid var(--acento); outline-offset: 10px; }

.nucleo-tipo {
  font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acento);
}
.nucleo-titulo {
  font-size: clamp(.92rem, 1.25vw, 1.12rem); font-weight: 800; line-height: 1.12;
  text-transform: uppercase; letter-spacing: -.005em;
}
.nucleo-entrar {
  margin-top: 4px; font-size: .76rem; font-weight: 700; color: var(--acento-claro);
  display: inline-flex; align-items: center; gap: 6px;
}
.nucleo-entrar .flecha { transition: transform var(--transicion); display: inline-block; }
.nucleo:hover .nucleo-entrar .flecha { transform: translateX(5px); }

/* ==========================================================================
   LAS CARTAS DENTRO DE LOS BLOQUES
   --------------------------------------------------------------------------
   Todas siguen la misma lógica: a la derecha del bloque, centradas en
   vertical y ligeramente giradas, como una carta apoyada sobre el panel.
   Cambia `right` y el giro de cada una para moverlas.
   ========================================================================== */
.carta {
  position: absolute; z-index: 2;
  width: var(--carta-ancho);
  aspect-ratio: 488 / 680;            /* proporción real de una carta de Magic */
  border-radius: var(--radio-carta);
  overflow: hidden;
  background: #0d1017;
  box-shadow: var(--carta-sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
  will-change: transform;
}
.carta img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bisel fino: la carta parece tener grosor en vez de estar recortada. */
.carta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 0 26px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* Cuando no hay imagen real de esa carta: hueco honesto, nunca otra carta. */
.carta-pendiente {
  display: grid; place-items: center; text-align: center; padding: 14px;
  background: repeating-linear-gradient(135deg, #171d28 0 9px, #141924 9px 18px);
  border: 1px dashed var(--borde-brillo);
}
.carta-pendiente span { font-size: .68rem; color: var(--texto-tenue); line-height: 1.4; }

/* ---------- Colocación, bloque a bloque ---------- */
.b-escoger .carta, .b-bulk .carta { right: 5%; top: 50%; }
/* Los dos bloques de la izquierda tienen el mordisco justo donde va la
   carta, así que se separa un poco de esa esquina. */
.b-generar .carta { right: 5%; top: 45%; }

.b-generar .carta { transform: translateY(-50%) rotate(var(--carta-giro)); }
.b-generar:hover .carta { transform: translateY(-54%) rotate(calc(var(--carta-giro) + 3deg)) scale(1.04); }

.b-escoger .carta { transform: translateY(-50%) rotate(6deg); }
.b-escoger:hover .carta { transform: translateY(-54%) rotate(3deg) scale(1.04); }

.b-bulk .carta { transform: translateY(-50%) rotate(4deg); }
.b-bulk:hover .carta { transform: translateY(-54%) rotate(1deg) scale(1.04); }

/* Mis Mazos: abanico de hasta tres cartas, sensación de colección. */
.b-mazos .carta { width: calc(var(--carta-ancho) * .76); right: 3%; top: 56%; }
.b-mazos .carta-1 { transform: translate(-54%, -50%) rotate(-13deg); z-index: 1; filter: brightness(.7); }
.b-mazos .carta-2 { transform: translate(-27%, -50%) rotate(-4deg);  z-index: 2; filter: brightness(.86); }
.b-mazos .carta-3 { transform: translate(0, -50%)    rotate(7deg);   z-index: 3; }
.b-mazos:hover .carta-1 { transform: translate(-64%, -54%) rotate(-18deg); filter: brightness(.8); }
.b-mazos:hover .carta-2 { transform: translate(-30%, -56%) rotate(-6deg);  filter: brightness(.94); }
.b-mazos:hover .carta-3 { transform: translate(4%, -54%)   rotate(10deg); }

/* ==========================================================================
   NOTA DE LA PORTADA
   --------------------------------------------------------------------------
   El PIE de la web es un componente global y vive en `global.css`. Esto de
   aquí es solo la frase suelta que cierra la portada, justo encima del pie.
   ========================================================================== */
.nota-local {
  border-top: 1px solid var(--borde);
  margin-top: 40px; padding: 20px 0 6px;
  font-size: .8rem; color: var(--texto-tenue);
  display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: center;
}

/* ==========================================================================
   PANTALLAS MÁS PEQUEÑAS
   --------------------------------------------------------------------------
   Aquí NO se fuerza el círculo en medio: los cuatro bloques se apilan y el
   simulador pasa a ser una banda más, como el resto.
   ========================================================================== */
@media (max-width: 1080px) {
  .bloques { grid-template-columns: 1fr; grid-template-rows: auto; }
  /* Apilados no hay círculo en medio, así que no hay nada que morder. */
  .bloque-fondo { -webkit-mask-image: none; mask-image: none; }
  .muesca { display: none; }
  .b-generar { grid-column: 1; grid-row: 1; }
  .b-escoger { grid-column: 1; grid-row: 2; }
  .b-mazos   { grid-column: 1; grid-row: 3; }
  .b-bulk    { grid-column: 1; grid-row: 4; }

  /* El círculo deja de ser círculo y se convierte en una banda ancha. */
  .nucleo {
    grid-column: 1; grid-row: 5;
    width: 100%; aspect-ratio: auto; min-height: 96px;
    border-radius: var(--radio);
    flex-direction: row; justify-content: flex-start; gap: 16px;
    text-align: left; padding: 20px 26px; flex-wrap: wrap;
    background: linear-gradient(100deg, var(--panel) 0%, #10141d 100%);
    border-color: var(--borde);
    box-shadow: var(--sombra-bloque);
  }
  .nucleo::before { display: none; }
  .nucleo:hover { transform: translateY(-3px); border-color: var(--acento-oscuro); box-shadow: var(--sombra-bloque-on); }
  .nucleo-tipo { order: 1; width: 100%; margin-bottom: -6px; }
  .nucleo-titulo { order: 2; font-size: 1.05rem; }
  .nucleo-entrar { order: 3; margin-left: auto; margin-top: 0; }

  .bloque-texto { max-width: 58%; }
  :root { --carta-ancho: clamp(116px, 20vw, 172px); }
}

@media (max-width: 720px) {
  /* La barra de arriba se adapta sola desde `global.css`. */
  .contenedor { padding: 0 18px; }
  .bloque { min-height: 300px; }
  /* El texto se queda en una columna a la izquierda y las cartas bajan a la
     esquina derecha: así el enlace de "entrar" nunca queda debajo de una carta. */
  .bloque-texto { max-width: 60%; padding-right: 10px; }
  /* Las cartas asoman por el borde del bloque a propósito, pero solo hasta
     donde llega el margen lateral de la página (18 px): así nunca se salen
     de la pantalla ni aparece la barra de desplazamiento horizontal. */
  .b-generar .carta, .b-escoger .carta, .b-bulk .carta, .b-mazos .carta {
    right: 0; top: auto; bottom: -9%;
    width: clamp(112px, 33vw, 152px);
  }
  .b-generar .carta, .b-generar:hover .carta { transform: rotate(-7deg); }
  .b-escoger .carta, .b-escoger:hover .carta { transform: rotate(5deg); }
  .b-bulk .carta,    .b-bulk:hover .carta    { transform: rotate(5deg); }
  .b-mazos .carta   { width: clamp(96px, 27vw, 128px); }
  .b-mazos .carta-1, .b-mazos:hover .carta-1 { transform: translateX(-88%) rotate(-13deg); }
  .b-mazos .carta-2, .b-mazos:hover .carta-2 { transform: translateX(-44%) rotate(-3deg); }
  .b-mazos .carta-3, .b-mazos:hover .carta-3 { transform: translateX(0)    rotate(8deg); }
  .nucleo-entrar { margin-left: 0; }
}

/* Para quien tenga desactivadas las animaciones en su sistema. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .bloque:hover, .nucleo:hover { transform: none; }
}