/* ========================================================================
   registro.css — la landing de alta al podcast diario.

   Se carga DESPUES de styles.css y podcast.css y solo la usa esta pagina.
   El episodio de hoy reutiliza la tarjeta del podcast tal cual (.pd-card y
   companía) para no mantener dos reproductores; aqui solo se ajusta a una
   columna, porque en la landing vive dentro de media pantalla y no de la
   pagina entera.

   La regla que ordena todo lo demas: en esta pagina hay UNA sola cosa que
   hacer. Nada de menu, nada de segundo boton, ningun enlace al archivo. El
   episodio de hoy es la muestra; el resto llega por mensaje.
   ======================================================================== */

/* ---------- Cabecera minima ----------
   Un landing con el menu completo del sitio es un landing con seis salidas.
   Se deja la marca (que es lo que sostiene la confianza) y el idioma. */
.rg-top{position:absolute;top:0;left:0;right:0;z-index:60;padding:26px 0}
.rg-top .bar{max-width:1120px;margin:0 auto;padding:0 26px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.rg-top .brand{color:#fff}
.rg-top .lang{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}

/* ---------- Hero ---------- */
.rg-hero{position:relative;overflow:hidden;color:var(--white);text-align:center;
  padding:132px 0 44px;
  background:linear-gradient(180deg,var(--coal-darker) 0%,var(--coal-abyss) 100%)}
.rg-hero .orb-1{width:520px;height:520px;background:rgba(201,169,106,.28);top:-200px;right:-140px}
.rg-hero .inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.rg-hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem);color:#fff;margin:14px 0 18px}
.rg-hero h1 em{font-style:italic;color:var(--gold-lt)}
.rg-hero p.lead{font-size:clamp(1rem,1.7vw,1.18rem);color:rgba(255,255,255,.74);max-width:620px;margin:0 auto}
.rg-hero .eyebrow{justify-content:center;color:var(--gold-lt)}

/* ---------- El bloque central: episodio + formulario ---------- */
.rg-split{position:relative;overflow:hidden;color:#fff;padding:24px 0 96px;
  background:linear-gradient(180deg,var(--coal-abyss) 0%,var(--coal-deep) 58%,var(--coal) 100%)}
.rg-split .orb-1{width:560px;height:560px;background:rgba(201,169,106,.15);top:-60px;left:-200px}
.rg-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(0,430px);
  gap:48px;align-items:start;max-width:1080px;margin:0 auto}

.rg-hoy .rg-cap{display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.rg-hoy .rg-cap .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(201,169,106,.22);animation:pulse 2.4s infinite}

/* La tarjeta del podcast, a una columna. Aqui vive en media pantalla: con las
   dos columnas de origen (300px de caratula + el cuerpo) el titulo se queda en
   un canal de 200px y el reproductor se rompe. Se copia el trato que la propia
   podcast.css le da en movil, incluido el ancho explicito de la caratula: con
   margin:0 auto el item pasa a fit-content y, como la portada va en absolute,
   ese ancho es cero y la caratula desaparece. */
.rg-hoy .pd-card{grid-template-columns:1fr;gap:26px;padding:26px}
.rg-hoy .pd-cover{width:min(230px,64%);justify-self:center}
.rg-hoy .pd-meta{justify-content:center}
.rg-hoy .pd-card h2{text-align:center;font-size:clamp(1.5rem,2.6vw,2rem)}
.rg-hoy .pd-desc{text-align:center;margin-left:auto;margin-right:auto}
.rg-hoy .pd-ctrls{justify-content:center}

/* La nota que explica por que aqui solo hay uno. Es la pagina diciendo la
   verdad en vez de esconderla: el archivo no esta, y ese es el trato. */
.rg-solo{margin-top:18px;padding:15px 18px;border-radius:var(--r);
  background:rgba(201,169,106,.07);border:1px solid rgba(201,169,106,.2);
  font-size:14px;line-height:1.55;color:rgba(255,255,255,.72)}
.rg-solo b{color:var(--gold-lt);font-weight:600}

/* ---------- La tarjeta del formulario ----------
   Hueso sobre negro. Es el unico elemento claro de la pantalla, que es
   exactamente donde tiene que ir el ojo. */
.rg-form-card{position:sticky;top:26px;background:var(--bone);color:var(--ink);
  border-radius:var(--r);padding:32px 30px 26px;
  box-shadow:0 50px 100px -46px rgba(0,0,0,.95)}
.rg-form-card h2{font-size:clamp(1.55rem,2.4vw,1.95rem);margin-bottom:8px}
.rg-form-card h2 em{font-style:italic;color:var(--bronze)}
.rg-form-sub{font-size:14.5px;color:var(--muted);margin-bottom:22px}

.rg-field{display:block;margin-bottom:15px}
.rg-field span{display:block;font-family:'Instrument Sans',system-ui,sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.rg-field input{width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--white);border:1.5px solid var(--line);border-radius:3px;padding:13px 14px;
  transition:border-color .2s,box-shadow .2s}
.rg-field input::placeholder{color:#a29a90}
.rg-field input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,106,.22)}
.rg-field input.invalid{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.14)}
.rg-hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}

/* El consentimiento. NO va premarcado y no se esconde en letra de seis: es el
   documento que se ensena cuando una operadora pregunta por que le escribimos
   a alguien, y se guarda literal junto al telefono al que autoriza escribir. */
.rg-consent{display:flex;gap:11px;align-items:flex-start;margin:18px 0 6px;
  padding:14px;border-radius:3px;background:var(--bone-2);border:1.5px solid transparent;cursor:pointer}
.rg-consent.invalid{border-color:#b3261e}
.rg-consent input{margin-top:2px;width:19px;height:19px;flex:0 0 19px;accent-color:var(--bronze);cursor:pointer}
.rg-consent small{font-size:12.5px;line-height:1.5;color:var(--muted)}
.rg-consent a{color:var(--bronze);text-decoration:underline;text-underline-offset:2px}

.rg-turnstile{margin:14px 0 4px;min-height:0}
.rg-submit{width:100%;justify-content:center;margin-top:14px;font-size:16px}
.rg-fine{font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}
.rg-fine a{text-decoration:underline;text-underline-offset:2px}

.rg-msg{margin-top:13px;font-size:14px;line-height:1.5;display:none}
.rg-msg.on{display:block}
.rg-msg.error{color:#b3261e}

/* El honeypot: invisible para una persona, irresistible para un bot. Fuera de
   pantalla en vez de display:none, que algunos rellenadores saltan. */
.rg-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Confirmacion ---------- */
.rg-done{text-align:center;padding:6px 0}
.rg-done .rg-tick{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));display:flex;align-items:center;justify-content:center}
.rg-done .rg-tick svg{width:28px;height:28px;fill:none;stroke:#0B0B0C;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.rg-done h2{margin-bottom:10px}
.rg-done p{font-size:15px;color:var(--muted);margin-bottom:12px}
.rg-done .rg-num{display:inline-block;font-family:'Instrument Sans',system-ui,sans-serif;font-weight:700;
  font-size:17px;color:var(--ink);background:var(--bone-2);border-radius:3px;padding:9px 16px;margin-bottom:6px}
/* `hidden` tiene que ganarle al `display:inline-block` de arriba. El atributo
   lo apaga la hoja del navegador, que es de otro origen y pierde contra
   cualquier regla de autor: sin esto, el numero seguia en pantalla en el caso
   de quien ya estaba registrado, suelto y sin la frase que lo explica. */
.rg-done [hidden]{display:none}

/* ---------- Lo que recibes ---------- */
.rg-que{background:var(--bone);padding:96px 0}
.rg-que .inner{max-width:1000px;margin:0 auto;text-align:center}
.rg-que h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:14px}
.rg-que h2 em{font-style:italic;color:var(--bronze)}
.rg-que .sub{font-size:16px;color:var(--muted);max-width:600px;margin:0 auto 52px}
.rg-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:left}
.rg-col{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px}
.rg-col .rg-ico{width:44px;height:44px;border-radius:3px;background:var(--coal-darker);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.rg-col .rg-ico svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rg-col h3{font-size:17px;margin-bottom:9px}
.rg-col p{font-size:14.5px;color:var(--muted)}

/* ---------- Por que el texto ---------- */
.rg-why{position:relative;overflow:hidden;background:var(--coal-darker);color:#fff;padding:92px 0}
.rg-why .orb-1{width:460px;height:460px;background:rgba(201,169,106,.14);bottom:-220px;right:-120px}
.rg-why .inner{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center}
.rg-why h2{font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;margin-bottom:18px}
.rg-why h2 em{font-style:italic;color:var(--gold-lt)}
.rg-why p{font-size:16.5px;color:rgba(255,255,255,.72);margin-bottom:14px}
.rg-why p:last-of-type{margin-bottom:32px}

/* ---------- Pie minimo ---------- */
.rg-foot{background:var(--coal-abyss);color:rgba(255,255,255,.5);padding:34px 0;font-size:12.5px}
.rg-foot .bar{max-width:1080px;margin:0 auto;padding:0 26px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:12px}
.rg-foot a{color:rgba(255,255,255,.62)}
.rg-foot a:hover{color:var(--gold-lt)}

/* ---------- Responsive ---------- */
@media(max-width:940px){
  .rg-hero{padding:108px 0 34px}
  .rg-grid{grid-template-columns:1fr;gap:34px;max-width:560px}
  /* El formulario sube por delante del episodio en movil: quien llega desde un
     enlace ya sabe a que viene, y la muestra queda justo debajo para el que
     no. Sticky en una sola columna solo estorba. */
  .rg-hoy{order:2}
  .rg-form-card{order:1;position:static}
  .rg-cols{grid-template-columns:1fr;gap:18px}
  .rg-que{padding:72px 0}
  .rg-why{padding:72px 0}
}
@media(max-width:560px){
  .rg-top{padding:18px 0}
  .rg-hero{padding:96px 0 28px}
  .rg-form-card{padding:26px 20px 22px}
  .rg-split{padding:20px 0 70px}
}