/* ============================================================
   TOP 1 — MODO CLARO ÚNICO
   El sitio ya no tiene modo oscuro. Fondo de día (#F4F7FD con sus
   halos) y TARJETAS EN AZUL CLARO con el texto en navy.
   Cargar SIEMPRE después de temas.css.

   Por qué el texto de dentro es oscuro y no blanco: sobre el azul
   claro #5988F8 el blanco se queda en 3.33:1, por debajo de AA.
   Entre este azul y el azul profundo de antes hay una franja donde
   NINGÚN color de texto llega a 4.5 — por eso la tarjeta es o clara
   con texto navy, o profunda con texto blanco, pero nada intermedio.

   Medido sobre la tarjeta #5988F8:
     texto #071A42 5.10:1 · texto suave #0D2352 4.57:1
     botón navy 4.79:1 contra la tarjeta · blanco encima 15.96:1
     la tarjeta contra el fondo de página 3.11:1 (se distingue)
   ============================================================ */

/* --- 1. El acento de día es AZUL, no verde -------------------
   El generador dejó el modo claro en verde (#00C58F) y con las
   tarjetas azules eran dos identidades peleando. #0B5ED7 = 5.44:1
   como texto sobre el fondo claro y 5.84:1 con blanco encima. */
:root[data-theme="light"] {
  --accent:      #0B5ED7;
  --accent-deep: #0B5ED7;
  --accent-on:   #FFFFFF;
  --ok:          #0B5ED7;
  --neon:      0 1px 2px rgba(11,94,215,.20);
  --neon-soft: 0 1px 2px rgba(11,94,215,.16);
}

/* El "suelo en perspectiva" del hero dibujaba, cerca del horizonte,
   una raya recta que cruzaba la pantalla y parecía un fallo. Con la
   malla de puntos en toda la web ya no hace falta. */
:root[data-theme="light"] .hero::after { display: none; }

/* --- 2. Las tarjetas, en azul claro --------------------------
   Las variables de color se redefinen DENTRO de la tarjeta: todo lo
   que hay dentro usa var(--text)/var(--text-soft), así que se adapta
   solo. Un elemento nuevo dentro de una ficha hereda el navy sin que
   haya que acordarse de nada. */
:root[data-theme="light"] .step,
:root[data-theme="light"] .row,
:root[data-theme="light"] .rules li,
:root[data-theme="light"] .faq details,
:root[data-theme="light"] .stats > div,
:root[data-theme="light"] .destacado {
  --text:       #071A42;
  --text-soft:  #0A1F4D;
  --text-dim:   #0A1F4D;
  --brand-deep: #071A42;
  --accent:     #071A42;
  --accent-deep:#071A42;
  --line:       rgba(7,26,66,0.22);
  --line-soft:  rgba(7,26,66,0.12);
  --edge:       rgba(7,26,66,0.45);
  --bevel:      inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(7,26,66,.12);
  background: linear-gradient(180deg, #6693FA, #5A8BF8);
  color: var(--text);
  border: 1px solid #2E63D6;
  box-shadow: 0 2px 4px rgba(23,62,150,.14), 0 14px 30px rgba(23,62,150,.18);
}

/* Las cifras: navy, grandes y sin glow. Un neón sobre azul claro
   no es luz, es suciedad. */
:root[data-theme="light"] .row__amount,
:root[data-theme="light"] .destacado .row__amount,
:root[data-theme="light"] .destacado__bid,
:root[data-theme="light"] .stats dd {
  color: #071A42; text-shadow: none;
}
:root[data-theme="light"] .row__rank,
:root[data-theme="light"] .row--top .row__rank {
  color: #071A42; text-shadow: 0 1px 0 rgba(255,255,255,.28);
}

/* --- 3. El botón que cobra -----------------------------------
   Sobre azul claro, un botón azul desaparece. En navy sólido tiene
   15.96:1 con su texto y 4.79:1 contra la tarjeta: se ve y se lee. */
:root[data-theme="light"] .row .btn--ghost,
:root[data-theme="light"] .row .btn--brand,
:root[data-theme="light"] .destacado .btn--ghost,
:root[data-theme="light"] .destacado .btn--brand {
  background: linear-gradient(180deg, #123063, #071A42);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 2px 6px rgba(7,26,66,.28);
  text-shadow: none;
}
:root[data-theme="light"] .row .btn--ghost:hover,
:root[data-theme="light"] .row .btn--brand:hover,
:root[data-theme="light"] .destacado .btn--ghost:hover,
:root[data-theme="light"] .destacado .btn--brand:hover {
  background: linear-gradient(180deg, #1B4185, #0D2352);
  color: #FFFFFF;
}
:root[data-theme="light"] .row .btn .cur,
:root[data-theme="light"] .destacado .btn .cur { color: #FFFFFF; opacity: .74; }

/* La etiqueta "demo" necesita su propio fondo: el de antes se mezclaba
   con blanco y sobre el azul claro quedaba invisible. */
:root[data-theme="light"] .row .tag,
:root[data-theme="light"] .destacado .tag {
  background: #FFFFFF; color: #6B4204; border-color: rgba(107,66,4,.45);
}

/* --- 4. Escritorio: llenar la pantalla -----------------------
   El sitio vivía en 1240px: en un monitor de 2560 sobraban 660px
   muertos a cada lado. No basta estirar el contenedor — crecen la
   ficha del #1, las filas y sus cifras, que es lo que se veía vacío.
   Por debajo de 1100px no cambia nada. */
@media (min-width: 1100px) {
  :root { --maxw: 1600px; }

  .hero__in {
    grid-template-columns: minmax(0, 1fr) minmax(520px, 1fr);
    gap: clamp(32px, 4vw, 64px);
  }

  /* La ficha del #1, más cuadrada y con la foto grande: es un
     escaparate, no una línea de texto. */
  .destacado { padding: 26px; }
  .destacado__media { height: 320px; margin-bottom: 18px; }
  .destacado__name { font-size: 1.72rem; }
  .destacado__desc { font-size: 1.06rem; }

  /* Las filas: foto o vídeo grande a la izquierda, toda la
     información del negocio a la derecha. */
  .row { grid-template-columns: 110px 1fr auto; gap: 26px; padding: 26px 30px; }
  .row--con-media { grid-template-columns: 96px 300px 1fr auto; }
  .row__media { width: 300px; height: 200px; }
  .row__rank   { font-size: 3rem; }
  .row__name   { font-size: 1.3rem; }
  .row__desc   { font-size: 1.04rem; }
  .row__meta   { font-size: .88rem; gap: 22px; }
  .row__amount { font-size: 1.9rem; }
  .board { gap: 20px; }

  /* Los 4 pasos siguen siendo 4: sin esto el auto-fit haría 5 o 6
     columnas enanas en cuanto hay sitio de sobra. */
  .steps { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .step { padding: 34px 30px 32px; }
  .step p { font-size: 1.01rem; }

  /* A 1600px una línea de 100 caracteres es ilegible. */
  .sec__lead { max-width: 68ch; }
}

/* --- 5. Ni costura ni tarjetas torcidas ----------------------
   La línea diagonal que cruzaba la ficha del #1 no era un borde ni
   un degradado: es la costura que deja Chrome al rasterizar un
   elemento con backdrop-filter que además se gira en 3D — parte el
   rectángulo en dos triángulos y la diagonal se ve. Sobre tarjetas
   opacas el backdrop-filter no desenfoca nada, así que sobra.
   Y la ficha venía girada -4°/2° incluso en reposo: se queda en un
   gesto de menos de un grado y medio, que se nota sin deformar. */
:root[data-theme="light"] .step,
:root[data-theme="light"] .row,
:root[data-theme="light"] .rules li,
:root[data-theme="light"] .faq details,
:root[data-theme="light"] .stats > div,
:root[data-theme="light"] .destacado { backdrop-filter: none; }

:root[data-theme="light"] .destacado {
  /* De ladito, mirando hacia el centro de la pantalla. Estaba en -4°/2°
     (se torcía) y luego en -1.2° (quedaba plana, de frente): este es el
     punto medio, se nota el volumen sin deformar la ficha. */
  transform: perspective(1500px) rotateY(-7deg) rotateX(1.8deg);
}
/* El :hover ya no la endereza: la endereza el puntero según por dónde
   entre, y de eso se encarga effects.js. Aquí solo se levanta. */
:root[data-theme="light"] .destacado:hover {
  transform: perspective(1500px) rotateY(-7deg) rotateX(1.8deg) translateY(-4px);
}

/* --- 6. El hueco de la foto, también cuando está vacío --------
   Todas las fichas reservan el sitio de la foto o el vídeo, tengan
   contenido o no: así todas miden lo mismo y el negocio que aún no
   ha subido nada ve exactamente el espacio que le falta por llenar. */
:root[data-theme="light"] .row__media,
:root[data-theme="light"] .destacado__media {
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(7,26,66,.22);
  box-shadow: none;
}
:root[data-theme="light"] .row__media--vacio,
:root[data-theme="light"] .destacado__media--vacio {
  display: grid; place-items: center; text-align: center; padding: 14px;
  background: rgba(255,255,255,.72);
  border: 2px dashed rgba(7,26,66,.32);
  color: #071A42; font-weight: 700; line-height: 1.35;
}
:root[data-theme="light"] .row__media--vacio span { font-size: .92rem; max-width: 16ch; }
:root[data-theme="light"] .destacado__media--vacio span { font-size: 1.05rem; }

/* --- 7. Los botones secundarios se veían sin borde ------------
   .btn--ghost hereda border-color: var(--line), que en claro es negro
   al 14%: sobre un fondo casi blanco el borde desaparecía y el botón
   se fundía con la página. Borde azul de marca (5.44:1 contra el
   fondo) más un halo suave que lo despega. Dentro de las tarjetas NO
   se aplica: ahí el ghost ya es el botón navy que cobra, y esa regla
   es más específica. */
:root[data-theme="light"] .btn--ghost {
  background: #FFFFFF;
  border: 1.5px solid #0B5ED7;
  color: #0B4CB0;
  box-shadow: 0 2px 6px rgba(11,94,215,.14), 0 0 0 4px rgba(11,94,215,.07);
}
:root[data-theme="light"] .btn--ghost:hover {
  border-color: #0B4CB0;
  color: #072F6E;
  box-shadow: 0 3px 10px rgba(11,94,215,.22), 0 0 0 5px rgba(11,94,215,.12);
}