/* Base compartida de los 3 bocetos. Marca German Victoria (manual 26-09-2026). */
:root {
  --tinta: #0E0D16; --hueso: #F5F4FA; --grafito: #1B1B27; --humo: #2E2745; --niebla: #9A99A6;
  --acento: #1938D6; --acento-2: #0185FD;
  --adq: #1938D6; --conv: #9921EE; --auto: #592CE2;
  --radio: 14px; --ancho: 460px;
  --curva: cubic-bezier(.16, 1, .3, 1);
  /* modo oscuro por defecto */
  --fondo: var(--tinta); --texto: var(--hueso); --texto-2: var(--niebla);
  --tarjeta: rgba(245, 244, 250, .05); --borde: rgba(245, 244, 250, .10);
}
.claro {
  --fondo: #F5F4FA; --texto: #0E0D16; --texto-2: #5B5A68;
  --tarjeta: #FCFCFE; --borde: #E3E2EC; --radio: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--fondo); color: var(--texto); font: 300 16px/1.65 Inter, system-ui, sans-serif; overflow-x: hidden; }
.claro body, body.claro { font-weight: 400; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.pagina { width: min(100%, var(--ancho)); margin-inline: auto; }
.bloque { padding: 56px 20px; }
h1, h2, h3, .cifra, .boton, .etiqueta { font-family: Montserrat, sans-serif; }
h1 { font-weight: 800; font-size: 38px; line-height: 1.05; letter-spacing: -.02em; }
h2 { font-weight: 800; font-size: 28px; line-height: 1.12; letter-spacing: -.015em; }
h3 { font-weight: 700; font-size: 18px; line-height: 1.25; }
p + p { margin-top: .75em; }
.suave { color: var(--texto-2); }
.etiqueta { display: inline-block; font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.etiqueta.color { color: var(--acento-2); }
.claro .etiqueta.color { color: var(--acento); }

/* Botones: mínimo 52 px de alto para el dedo */
.boton { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 22px;
  border-radius: var(--radio); font-weight: 700; font-size: 15px; letter-spacing: .01em; text-align: center;
  background: var(--acento); color: var(--hueso); box-shadow: 0 10px 30px -10px rgba(25, 56, 214, .7);
  transition: transform .14s var(--curva); }
.boton:active { transform: scale(.97); }
.boton.contorno { background: transparent; color: var(--texto); border: 1px solid var(--borde); box-shadow: none; }
.boton svg { width: 20px; height: 20px; flex: none; pointer-events: none; }
.micro { margin-top: 10px; font-size: 12.5px; color: var(--texto-2); text-align: center; }
.botones { display: grid; gap: 10px; margin-top: 26px; }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }
.cifra { font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* HUECO: lo que Germán tiene que conseguir (captura, video, logo) */
.hueco { display: grid; place-items: center; text-align: center; padding: 16px; min-height: 120px;
  border: 1.5px dashed color-mix(in srgb, var(--texto) 30%, transparent); border-radius: var(--radio);
  font: 500 11.5px/1.5 Montserrat, sans-serif; letter-spacing: .04em; color: var(--texto-2);
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--texto) 3%, transparent) 10px 20px); }
.hueco b { display: block; color: var(--acento-2); letter-spacing: .14em; font-size: 10.5px; margin-bottom: 4px; }
.claro .hueco b { color: var(--acento); }

/* Reseña */
.estrellas { color: #F5B301; letter-spacing: 2px; font-size: 15px; }

/* Pie */
.pie { padding: 36px 20px 48px; font-size: 11.5px; line-height: 1.6; color: var(--texto-2); border-top: 1px solid var(--borde); }
.pie img { width: 150px; margin-bottom: 14px; }

/* WhatsApp flotante */
.flotante { position: fixed; right: 16px; bottom: 16px; z-index: 20; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: #25D366; color: #052e16; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
  transform: translateY(90px); transition: transform .5s var(--curva); }
.flotante.ver { transform: none; }
.flotante svg { width: 28px; height: 28px; pointer-events: none; }

/* ===== Animaciones (receta de Creator Club + reglas de la agencia) ===== */
.reveal { opacity: 0; transform: translateY(22px); filter: blur(4px); }
.reveal.in { opacity: 1; transform: none; filter: none;
  transition: opacity .7s var(--curva), transform .7s var(--curva), filter .5s; }
.zoom { opacity: 0; transform: scale(.95); }
.zoom.in { opacity: 1; transform: none; transition: opacity .8s var(--curva), transform .8s var(--curva); }
@keyframes rebote { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 70% { transform: scale(.98); } 100% { transform: scale(1); } }
.boton.rebote { animation: rebote .6s var(--curva) .3s 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .zoom { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .boton.rebote { animation: none; }
  * { scroll-behavior: auto !important; }
}
/* Para la captura de pantalla del boceto: todo visible */
.captura .reveal, .captura .zoom { opacity: 1; transform: none; filter: none; }

.captura .flotante { display: none; }