/* ============================================================
   aumentos.css — bloques añadidos a las tres landings el 7 de septiembre de
   2026 para acercarlas a Ruleta Ganadora SIN cambiar su identidad:
   tarjeta de cifras en la portada, sección de garantías con tarjetas
   numeradas (01-04), banda de cifras de la promoción y botón flotante de
   contacto. Sin puntos de luz (a petición del usuario). Compartido por las
   tres webs: toma los colores de cada una mediante var() con alternativas
   (hueso/coral, cobalto u oscuro dorado), igual que rasca.css.
   ============================================================ */
.aum, .aum-hero-tarjeta, .flotante {
  --a-acento: var(--coral, var(--cobalto, var(--oro, #f5a623)));
  --a-acento-texto: var(--coral-texto, var(--cobalto, var(--oro, #f5a623)));
  --a-acento-suave: var(--coral-suave, var(--cobalto-suave, var(--oro-bg, rgba(245, 166, 35, .1))));
  --a-papel: var(--papel, var(--superficie, #fff));
  --a-fondo: var(--arena, var(--niebla, var(--noche-media, #f0f0ea)));
  --a-tinta: var(--tinta, #111);
  --a-tinta-2: var(--tinta-2, var(--tinta-media, #555));
  --a-linea: var(--linea, var(--borde-suave, #ddd));
  --a-oscuro: var(--bosque, var(--marino, var(--noche-suave, #1a1a2e)));
  --a-oscuro-2: var(--bosque-2, var(--marino-2, var(--superficie, #16162a)));
  --a-oscuro-texto: var(--bosque-texto, var(--marino-texto, var(--tinta, #fff)));
  --a-oscuro-texto-2: var(--bosque-texto-2, var(--marino-texto-2, var(--tinta-media, #bbb)));
  --a-radio: var(--radio, 16px);
  --a-radio-btn: var(--radio-pildora, var(--radio-btn, var(--radio-full, 999px)));
  --a-sombra: var(--sombra, 0 2px 8px rgba(0, 0, 0, .06));
  --a-boton-texto: var(--hueso, #fff);
}

/* ---------- Portada: tarjeta con la cifra grande (sorteos abiertos) ---------- */
.aum-hero-tarjeta { margin-top: 26px; background: var(--a-papel); border: 1px solid var(--a-linea); border-radius: var(--a-radio); padding: 20px 22px; box-shadow: var(--a-sombra); max-width: 520px; color: var(--a-tinta); }
.aum-hero-cifra { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--a-linea); }
.aum-hero-icono { width: 50px; height: 50px; border-radius: 50%; background: var(--a-acento-suave); color: var(--a-acento-texto); display: grid; place-items: center; flex-shrink: 0; }
.aum-hero-icono svg { width: 26px; height: 26px; }
.aum-hero-cifra b { font-size: clamp(36px, 4.5vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--a-tinta); }
.aum-hero-cifra > span { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--a-tinta); }
.aum-hero-cifra small { display: block; font-weight: 500; color: var(--a-tinta-2); font-size: 13px; margin-top: 3px; }
.aum-hero-fila { list-style: none; margin: 0; padding: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 0; font-size: 13px; font-weight: 600; color: var(--a-tinta-2); }
.aum-hero-fila li { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-left: 1px solid var(--a-linea); flex: 1 1 33%; }
.aum-hero-fila li:first-child { border-left: 0; padding-left: 0; }
.aum-hero-fila .icono { width: 18px; height: 18px; color: var(--a-acento-texto); }

/* ---------- Secciones añadidas: etiqueta en píldora + título centrado ---------- */
.aum .aum-cab { margin: 0 auto 36px; max-width: 720px; text-align: center; }
.aum .aum-cab h2 { margin-bottom: 10px; }
.aum .aum-cab .seccion-desc { margin: 0 auto; }
.aum-etiqueta { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--a-acento-texto); background: var(--a-papel); border: 1px solid var(--a-linea); border-radius: var(--a-radio-btn); padding: 7px 18px; margin-bottom: 18px; box-shadow: var(--a-sombra); }

/* Garantías: cuatro tarjetas numeradas con icono y línea de acento */
.aum-garantias { background: var(--a-fondo); }
.aum-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.aum-tarjeta { position: relative; background: var(--a-papel); border: 1px solid var(--a-linea); border-radius: var(--a-radio); padding: 26px 24px 32px; box-shadow: var(--a-sombra); overflow: hidden; color: var(--a-tinta); transition: transform .2s ease, box-shadow .2s ease; }
.aum-tarjeta:hover { transform: translateY(-4px); }
.aum-tarjeta::after { content: ""; position: absolute; left: 24px; bottom: 0; width: 52px; height: 4px; border-radius: 4px 4px 0 0; background: var(--a-acento); }
.aum-tarjeta-icono { width: 50px; height: 50px; border-radius: 14px; background: var(--a-acento-suave); color: var(--a-acento-texto); display: grid; place-items: center; margin-bottom: 16px; }
.aum-tarjeta-icono svg { width: 24px; height: 24px; }
.aum-num { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--a-acento-texto); margin-bottom: 6px; }
.aum-tarjeta h3 { font-size: 18px; margin-bottom: 8px; }
.aum-tarjeta p { margin: 0; color: var(--a-tinta-2); font-size: 14px; line-height: 1.6; }

/* Banda de cifras de la promoción sobre el bloque oscuro de cada web */
.aum-cifras { background: var(--a-oscuro); color: var(--a-oscuro-texto); }
.aum-cifras h2 { color: var(--a-oscuro-texto); }
.aum-cifras .seccion-desc { color: var(--a-oscuro-texto-2); }
.aum-cifras .aum-etiqueta { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: var(--a-oscuro-texto); box-shadow: none; }
.aum-cifras-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.aum-cifra { position: relative; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--a-radio); padding: 26px 20px 28px; text-align: center; }
.aum-cifra::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 4px 4px 0 0; background: var(--a-acento); }
.aum-cifra-icono { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; margin: 0 auto 12px; color: var(--a-oscuro-texto); }
.aum-cifra-icono svg { width: 22px; height: 22px; }
.aum-cifra b { display: block; font-size: clamp(34px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 8px; color: var(--a-oscuro-texto); }
.aum-cifra h3 { font-size: 16px; margin-bottom: 6px; color: var(--a-oscuro-texto); }
.aum-cifra p { margin: 0; font-size: 13px; color: var(--a-oscuro-texto-2); }

/* Botón flotante de contacto */
.flotante { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--a-acento); color: var(--a-tinta); box-shadow: 0 10px 28px rgba(0, 0, 0, .25); text-decoration: none; transition: transform .2s ease; }
.flotante:hover { transform: scale(1.06); }
.flotante svg { width: 26px; height: 26px; }
/* Color del icono según la web: cobalto (acento azul intenso) → claro; hueso y oscuro dorado → tinta oscura */
.flotante { color: var(--marino-texto, var(--noche, var(--a-tinta))); }
.flotante.whatsapp { background: #25d366; color: #fff; }
.aum-hero-tarjeta { margin-left: auto; margin-right: auto; }
.hero-texto .aum-hero-tarjeta { margin-left: 0; }

@media (max-width: 640px) {
  .aum-hero-tarjeta { max-width: none; padding: 16px; }
  .aum-hero-fila li { flex-basis: 100%; border-left: 0; padding: 0; }
  .flotante { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .aum-tarjeta, .flotante { transition: none; }
  .aum-tarjeta:hover, .flotante:hover { transform: none; }
}

/* ---------- Banner de cookies con registro de consentimientos (8 de septiembre de 2026) ---------- */
.cookies { --a-acento: var(--coral, var(--cobalto, var(--oro, #f5a623))); --a-papel: var(--papel, var(--superficie, #fff)); --a-tinta: var(--tinta, #111); --a-tinta-2: var(--tinta-2, var(--tinta-media, #555)); --a-linea: var(--linea, var(--borde-suave, #ddd)); --a-exito: var(--exito, #1f7a45); --a-radio: var(--radio, 16px); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 12px 16px 16px; pointer-events: none; }
.cookies-int { pointer-events: auto; max-width: 980px; margin: 0 auto; background: var(--a-papel); color: var(--a-tinta); border: 1px solid var(--a-linea); border-radius: var(--a-radio); box-shadow: 0 18px 44px rgba(0, 0, 0, .22); padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 22px; align-items: start; }
.cookies h2 { font-size: 17px; margin: 0 0 6px; color: var(--a-tinta); }
.cookies p { font-size: 14px; color: var(--a-tinta-2); margin: 0 0 6px; max-width: 70ch; }
.cookies-enlace { font-size: 13px; }
.cookies-enlace a { color: var(--a-tinta); }
.cookies-botones { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
.cookies-botones .btn { width: 100%; min-height: 40px; padding: 8px 16px; font-size: 14px; }
.cookies-opciones { display: grid; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--a-linea); }
.cookies-fila { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.cookies-fila input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--a-acento); }
.cookies-fila span { color: var(--a-tinta-2); }
.cookies-fila b { color: var(--a-tinta); }
.cookies-siempre { margin: 0; }
.cookies-tick { width: 18px; height: 18px; border-radius: 4px; background: var(--a-exito); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
#cookies-guardar { justify-self: start; margin-top: 4px; }
@media (max-width: 640px) { .cookies-int { grid-template-columns: 1fr; } .cookies-botones { flex-direction: row; flex-wrap: wrap; } .cookies-botones .btn { width: auto; flex: 1; } }