/* receta.css — LA PAGINA COMPLETA (FASE 1, 29/08). Estructura y nada mas: aqui no
   hay ni un color ni una tipografia. Eso lo pone cada ambiente con sus variables,
   y por eso la receta es una y los ambientes son diez.

   MOVIL PRIMERO (390) con un salto a partir de 900 para escritorio. A 1440 la
   version anterior era el movil estirado: botones de 460 px y el texto pegado al
   borde. Aqui el contenido tiene ancho maximo y el hero deja de ser una columna.

   REGLA HEREDADA DE base.css: nada se oculta con opacity:0 esperando al JavaScript.
   Lo unico que nace oculto es el boton flotante, y se explica en su sitio. El
   scroll-reveal se hace con una clase que AÑADE el JS, asi que sin JS todo se ve.

   NADA DE ESTE FICHERO VIENE DE NINGUNA WEB DE REFERENCIA: escrito de cero. */

:root{--rmax:1120px;--rgutter:1.25rem}

/* ===== SALTAR AL CONTENIDO ============================================== */
.rs{position:absolute;left:-9999px;top:0;z-index:100;padding:.7rem 1rem;
  background:var(--acento,#111);color:var(--acento-texto,#fff);border-radius:0 0 6px 0}
.rs:focus{left:0}

/* ===== NAV FIJA ========================================================= */
/* Nace transparente sobre el hero y se vuelve solida al bajar: en el primer
   viewport la foto manda, y despues hace falta que se lea. */
.rn{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:.75rem;
  padding:.55rem var(--rgutter);
  padding-top:calc(.55rem + env(safe-area-inset-top,0px));
  font-family:var(--tipo-cuerpo,system-ui);
  color:#fff;background:transparent;
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease}
.rn-nom{font-family:var(--tipo-titulo,serif);font-weight:var(--peso-titulo,700);
  font-size:1rem;text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:44%}
.rn-menu{display:flex;align-items:center;gap:.85rem;font-size:.78rem;
  letter-spacing:.03em;white-space:nowrap}
.rn-menu a{text-decoration:none;padding:.35rem 0}
.rn-tel{font-weight:700}
.rn[data-solida]{background:var(--nav-fondo,rgba(20,20,20,.96));
  color:var(--nav-texto,#fff);box-shadow:0 1px 0 rgba(0,0,0,.10)}
.rn a:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ===== HERO ============================================================= */
.rh{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--hero-fondo,#1a1a1a)}
.rh-fondo{position:absolute;inset:0}
.rh-img{width:100%;height:100%;object-fit:cover;object-position:center}
/* El velo. Los valores salen de MEDIR, no de gusto: con el anterior el peor pixel
   bajo el titular daba 4,15:1 y hacia falta 4,5:1. */
.rh-velo{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.86) 26%,
                    rgba(0,0,0,.62) 48%, rgba(0,0,0,.28) 68%, rgba(0,0,0,0) 90%),
    linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,0) 58%)}
.rh-txt{position:relative;z-index:2;width:100%;max-width:var(--rmax);
  margin:0 auto;padding:0 var(--rgutter) calc(3.4rem + env(safe-area-inset-bottom,0px));
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.rh-eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  margin:0 0 .7rem;opacity:.92;font-family:var(--tipo-cuerpo,system-ui)}
.rh-nombre{font-family:var(--tipo-titulo,serif);font-weight:var(--peso-titulo,700);
  font-size:clamp(2rem,10.5vw,3.4rem);line-height:1.04;margin:0 0 .6rem;
  overflow-wrap:break-word;hyphens:none;max-width:16ch}
.rh-reclamo{font-family:var(--tipo-cuerpo,system-ui);font-size:1rem;line-height:1.45;
  margin:0 0 1.35rem;max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Fila, y si no caben bajan solas; nunca scroll horizontal: una tira que se
   arrastra esconde el tercer boton, y eso ya paso el 18/08. */
.rh-acciones{display:flex;flex-wrap:wrap;gap:.55rem}
.rb{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.8rem 1.15rem;border-radius:var(--radio-btn,6px);
  font-family:var(--tipo-cuerpo,system-ui);font-weight:600;font-size:.95rem;
  text-decoration:none;border:2px solid transparent;flex:1 1 auto;white-space:nowrap}
.rb-pri{background:var(--btn-pri-fondo,#fff);color:var(--btn-pri-texto,#111);
  border-color:var(--btn-pri-fondo,#fff)}
.rb-sec{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rb-fan{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.rb:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* La flecha invita a bajar y ES un enlace: sin JS lleva a la primera seccion. */
.rh-flecha{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(.9rem + env(safe-area-inset-bottom,0px));z-index:3;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;font-size:1.3rem;opacity:.85;
  animation:rbaja 2.4s ease-in-out infinite}
@keyframes rbaja{0%,100%{transform:translateX(-50%) translateY(0)}
                 50%{transform:translateX(-50%) translateY(6px)}}

/* ===== SECCIONES: caja comun ============================================ */
.rn2,.rc,.rg,.ri{padding:3rem var(--rgutter);
  background:var(--secc-fondo,transparent);color:var(--secc-texto,inherit)}
.rt{font-family:var(--tipo-titulo,serif);font-weight:var(--peso-titulo,700);
  font-size:1.75rem;margin:0 0 1.2rem;color:var(--acento,inherit)}

/* ===== NOSOTROS ========================================================= */
.rn2{display:grid;gap:1.5rem;max-width:var(--rmax);margin:0 auto}
.rn2-txt p{font-family:var(--tipo-cuerpo,system-ui);font-size:1.02rem;
  line-height:1.65;margin:0 0 .9rem;max-width:62ch}
.rn2-foto{margin:0;border-radius:var(--radio-foto,8px);overflow:hidden}
.rn2-foto img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ===== CARTA ============================================================ */
.rc{max-width:var(--rmax);margin:0 auto}
.rc-lista{margin:0 0 1.8rem}
.rc-plato{padding:.85rem 0;font-family:var(--tipo-cuerpo,system-ui);
  border-bottom:1px solid var(--linea,rgba(128,128,128,.24))}
.rc-cab{display:flex;align-items:baseline;gap:.5rem}
.rc-nom{font-weight:700}
.rc-pun{flex:1 1 auto;border-bottom:1px dotted var(--linea,rgba(128,128,128,.5));
  transform:translateY(-.22em)}
.rc-pre{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-desc{margin:.35rem 0 0;font-size:.92rem;line-height:1.5;opacity:.82;max-width:56ch}
.rc-btn{display:block;text-align:center;min-height:48px;padding:.9rem 1.2rem;
  border-radius:var(--radio-btn,6px);text-decoration:none;font-weight:700;
  font-family:var(--tipo-cuerpo,system-ui);
  background:var(--acento,#333);color:var(--acento-texto,#fff)}
.rc-btn:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ===== GALERIA ASIMETRICA =============================================== */
/* Cuatro columnas en movil para que las piezas puedan ser de 2 o 4: no es una
   rejilla de 4 fotos por fila, es un lienzo de 4 modulos. */
.rg{max-width:var(--rmax);margin:0 auto}
.rg-rejilla{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:88px;gap:.55rem}
.rg-cel{margin:0;border-radius:var(--radio-foto,8px);overflow:hidden;
  background:var(--linea,rgba(128,128,128,.14))}
.rg-cel img{width:100%;height:100%;object-fit:cover}
.g-nor{grid-column:span 2;grid-row:span 2}
.g-ancha{grid-column:span 4;grid-row:span 2}
.g-alta{grid-column:span 2;grid-row:span 3}

/* ===== DONDE ============================================================ */
.ri{max-width:var(--rmax);margin:0 auto;font-family:var(--tipo-cuerpo,system-ui)}
/* Nace vacio y lo rellena el JS. Vacio no ocupa: sin JS no deja hueco. */
.ri-chip{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 1.2rem;
  padding:.4rem .8rem;border-radius:999px;font-weight:700;font-size:.9rem;
  border:1px solid currentColor}
.ri-chip:empty{display:none}
.ri-chip .ri-si{color:var(--abierto,#1c7a3e)}
.ri-chip .ri-no{color:var(--cerrado,#a12b2b)}
.ri-cols{display:grid;gap:1.6rem}
.ri-horas{margin:0 0 1.3rem}
.ri-fila{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-bottom:1px solid var(--linea,rgba(128,128,128,.24))}
.ri-cerrado{opacity:.62}
.ri-dir{display:flex;align-items:flex-start;gap:.6rem;min-height:48px;
  text-decoration:none;font-weight:600;padding:.5rem 0}
.ri-ico{display:inline-flex;width:1.4rem;justify-content:center;opacity:.7}
/* El telefono, GRANDE: en la calle se pulsa con el pulgar y a veces con prisa. */
.ri-tel{display:inline-block;margin-top:.4rem;font-family:var(--tipo-titulo,serif);
  font-weight:var(--peso-titulo,700);font-size:1.7rem;letter-spacing:.01em;
  text-decoration:none;color:var(--acento,inherit)}
.ri-mapa{display:block;position:relative;border-radius:var(--radio-foto,8px);
  overflow:hidden}
.ri-mapa img{width:100%;height:auto}
.ri-mapa-pie{position:absolute;left:0;right:0;bottom:0;padding:.5rem .8rem;
  font-size:.8rem;background:rgba(0,0,0,.55);color:#fff}
.ri-credito{margin:.5rem 0 0;font-size:.72rem;opacity:.7}

/* ===== PIE ============================================================== */
.rp{padding:2.4rem var(--rgutter) calc(2.6rem + env(safe-area-inset-bottom,0px));
  text-align:center;font-family:var(--tipo-cuerpo,system-ui);
  background:var(--pie-fondo,transparent);color:var(--pie-texto,inherit)}
.rp-nom{font-family:var(--tipo-titulo,serif);font-size:1.2rem;margin:0 0 .5rem}
.rp-enl{margin:0;font-size:.9rem}
.rp-enl a{text-decoration:underline;opacity:.85}

/* ===== VOLVER ARRIBA, FLOTANTE ========================================== */
.rv{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  z-index:40;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  font-size:1.35rem;line-height:1;
  background:var(--acento,#222);color:var(--acento-texto,#fff);
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.rv[hidden]{display:none}
.rv:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ===== SCROLL-REVEAL ==================================================== */
/* La clase la PONE el JS al arrancar; sin JS no existe y todo se ve. Es lo que
   sostiene el gate de "medir con el JavaScript apagado" del 24/08. */
.js-revela [data-revelar]{opacity:0;transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease}
.js-revela [data-revelar].rv-visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-revela [data-revelar]{opacity:1;transform:none;transition:none}
  .rh-flecha{animation:none}
}

/* ===== EL BORRADOR ====================================================== */
/* El selector del borrador es una barra fija abajo y se come la fila de acciones:
   el hero mide 100svh y su texto se apoya en el borde de la ventana. Se le da el
   aire que ocupa la barra. Solo pasa en el borrador; la publicada no lo lleva. */
body[data-selector-visible="1"] .rh-txt{
  padding-bottom:calc(var(--sel-alto,88px) + 2.6rem + env(safe-area-inset-bottom,0px))}
/* La flecha NO se esconde en el borrador: es parte del hero y el borrador es
   justo lo que mira el dueno. Se sube por encima de la barra del selector y se
   hace un poco mas pequena, que es lo que cabe en el hueco medido (42 px entre
   los botones y la barra). Esconderla era comodo para mi, no para el. */
body[data-selector-visible="1"] .rh-flecha{
  width:38px;height:38px;font-size:1.15rem;
  bottom:calc(var(--sel-alto,88px) + .25rem + env(safe-area-inset-bottom,0px))}
body[data-selector-visible="1"] .rv{
  bottom:calc(var(--sel-alto,88px) + 1rem + env(safe-area-inset-bottom,0px))}
/* La barra de arriba se retira: su trabajo lo hace la nav, y encima ocultarla
   dejaba su hueco de 36 px reservado en el body. */
body[data-receta] .volver-chat{display:none}
body[data-receta][data-volver-visible="1"]{padding-top:0}

/* ===== ESCRITORIO ======================================================= */
@media (min-width:900px){
  :root{--rgutter:2.5rem}
  .rn{padding:.9rem var(--rgutter)}
  .rn-nom{font-size:1.15rem;max-width:none}
  .rn-menu{gap:1.6rem;font-size:.9rem}
  /* El hero deja de ser una columna estirada: el texto tiene ancho y los botones
     dejan de medir 460 px cada uno. */
  .rh-txt{padding-bottom:5rem}
  .rh-nombre{font-size:clamp(3rem,5.6vw,4.6rem);max-width:18ch}
  .rh-reclamo{font-size:1.15rem;max-width:52ch}
  .rh-acciones{gap:.75rem}
  .rb{flex:0 0 auto;padding:.9rem 1.6rem;font-size:1rem}
  .rn2{grid-template-columns:1.1fr .9fr;align-items:center;gap:3rem;padding:5rem var(--rgutter)}
  .rn2-foto img{aspect-ratio:4/3}
  .rc,.rg,.ri{padding:5rem var(--rgutter)}
  .rt{font-size:2.3rem;margin-bottom:1.8rem}
  .rc-lista{columns:1}
  .rc-btn{max-width:22rem;margin:0 auto}
  .rg-rejilla{grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:.8rem}
  .g-nor{grid-column:span 2;grid-row:span 2}
  .g-ancha{grid-column:span 4;grid-row:span 2}
  .g-alta{grid-column:span 2;grid-row:span 3}
  .ri-cols{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
  .ri-tel{font-size:2.2rem}
}

/* ===== ESQUELETO info-jerarquia: LAS TRES PREGUNTAS ====================== */
/* Es lo primero que se ve tras el hero, y responde antes de que haya que bajar:
   donde esta, cuando abre y como se reserva. Para sitios de paso, no de admirar. */
.rq{padding:2rem var(--rgutter) 1rem;max-width:var(--rmax);margin:0 auto;
  background:var(--secc-fondo,transparent);color:var(--secc-texto,inherit);
  font-family:var(--tipo-cuerpo,system-ui)}
.rq-rej{display:grid;gap:.7rem}
.rq-t{display:flex;flex-direction:column;gap:.25rem;min-height:88px;
  padding:1rem 1.1rem;border-radius:var(--radio-foto,8px);text-decoration:none;
  border:2px solid var(--linea,rgba(128,128,128,.3));background:transparent}
.rq-p{font-family:var(--tipo-titulo,serif);font-weight:var(--peso-titulo,700);
  font-size:1.15rem;color:var(--acento,inherit)}
.rq-r{font-weight:600}
.rq-r:empty{display:none}
.rq-a{font-size:.85rem;opacity:.75}
.rq-t:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ===== ESQUELETOS: los matices que los hacen distintos =================== */
/* info: el hero deja sitio a las preguntas, no se come la pantalla entera. */
body[data-esqueleto="info"] .rh{min-height:72svh}
/* producto: la carta va la primera y respira; los platos, mas grandes. */
body[data-esqueleto="producto"] .rc{padding-top:4rem}
body[data-esqueleto="producto"] .rc-nom{font-size:1.15rem}
body[data-esqueleto="producto"] .rc-plato{padding:1.15rem 0}
/* editorial: aire. Mas margen, columna estrecha y el texto manda. */
body[data-esqueleto="editorial"] .rn2,
body[data-esqueleto="editorial"] .rc,
body[data-esqueleto="editorial"] .ri{padding-top:4.5rem;padding-bottom:4.5rem}
body[data-esqueleto="editorial"] .rn2-txt p{font-size:1.12rem;line-height:1.8;max-width:54ch}
body[data-esqueleto="editorial"] .rh{min-height:88svh}

@media (min-width:900px){
  .rq{padding:3rem var(--rgutter) 1rem}
  .rq-rej{grid-template-columns:repeat(3,1fr);gap:1.2rem}
  body[data-esqueleto="editorial"] .rn2{grid-template-columns:1fr;max-width:70ch}
  body[data-esqueleto="editorial"] .rn2-foto{margin-top:2rem}
}

/* ═══ T1 · la proxima apertura, dentro del chip ══════════════════════════ */
.ri-prox,.kn-chip .ri-prox{font-weight:600;opacity:.85}

/* ═══ LISTON-PRO · foco visible en TODO lo pulsable ══════════════════════ */
a:focus-visible,button:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ═══ T4-bis (29/08) · EL MAPA ES UNA PIEZA, Y SE NOTA QUE SE TOCA ═══════
   Antes era una imagen suelta con la atribucion encima: en el PC parecia una foto
   muerta -y de hecho lo era, porque el visor no llegaba a atarse-. Ahora tiene
   marco, pin, cursor de mano y un rotulo que aparece al pasar el raton. */
.rm{position:relative;display:block;border-radius:var(--radio-foto,8px);overflow:hidden;
  cursor:pointer;border:1px solid var(--linea,rgba(128,128,128,.28));
  box-shadow:0 2px 10px rgba(0,0,0,.10)}
.rm img{width:100%;height:auto;display:block;transition:transform .35s ease}
.rm:hover img,.rm:focus-visible img{transform:scale(1.03)}
/* El pin, dibujado por CSS sobre el centro: la imagen ya lo trae, este lo remarca. */
.rm-pin{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-22px 0 0 -8px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--acento,#c0392b);box-shadow:0 0 0 3px rgba(255,255,255,.9),
  0 3px 8px rgba(0,0,0,.35);pointer-events:none}
.rm-lupa{position:absolute;left:50%;top:50%;transform:translate(-50%,14px);
  padding:.4rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700;
  background:rgba(0,0,0,.72);color:#fff;opacity:0;transition:opacity .2s ease;
  pointer-events:none;white-space:nowrap}
.rm:hover .rm-lupa,.rm:focus-visible .rm-lupa{opacity:1}
/* En un movil no hay raton: el rotulo se queda siempre visible y discreto, porque
   ahi el toque abre la app de mapas y conviene que se entienda igual. */
@media (hover:none){ .rm-lupa{opacity:.9;font-size:.72rem} }
.rm-attr{position:absolute;right:0;bottom:0;padding:.15rem .4rem;font-size:10px;
  line-height:1.4;color:rgba(255,255,255,.86);background:rgba(0,0,0,.42);
  border-top-left-radius:4px}

/* ═══ EL VISOR: zoom y arrastre sobre la imagen grande ═══════════════════ */
.rlb{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(0,0,0,.82);padding:1.2rem}
.rlb[hidden]{display:none}
.rlb-caja{position:relative;background:var(--secc-fondo,#fff);color:var(--secc-texto,#111);
  border-radius:10px;padding:1rem;max-width:min(94vw,1000px);width:100%}
/* La ventana por la que se mira: la imagen se mueve DENTRO de ella. */
.rlb-vista{position:relative;overflow:hidden;border-radius:6px;
  aspect-ratio:16/9;background:#ddd;cursor:grab;touch-action:none}
.rlb-vista[data-arrastrando]{cursor:grabbing}
.rlb-img{width:100%;height:100%;object-fit:cover;transform-origin:center center;
  will-change:transform;user-select:none;-webkit-user-drag:none}
.rlb-mandos{display:flex;align-items:center;gap:.5rem;margin:.7rem 0 .2rem}
.rlb-z{width:44px;height:44px;border-radius:8px;border:1px solid currentColor;
  background:transparent;color:inherit;font-size:1.3rem;line-height:1;cursor:pointer}
.rlb-ayuda{font-size:.8rem;opacity:.7}
.rlb-dir{margin:.6rem 0 .6rem;font-weight:600}
.rlb-attr{margin:.6rem 0 0;font-size:.72rem;opacity:.65}
.rlb-x{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;
  border:none;cursor:pointer;font-size:1.4rem;line-height:1;
  background:var(--acento,#222);color:var(--acento-texto,#fff)}
.rlb-copiar{min-height:44px;padding:.6rem 1.1rem;border-radius:var(--radio-btn,6px);
  border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;
  font:inherit}
.rlb-copiar:focus-visible,.rlb-x:focus-visible,.rlb-z:focus-visible{
  outline:3px solid currentColor;outline-offset:3px}
@media (max-width:520px){ .rlb-ayuda{display:none} }

/* ── RP-3B · RESERVA ─────────────────────────────────────────────────────────
   Sin paleta propia: hereda la del layout. Un bloque con colores suyos se ve
   pegado, y este aparece en diez disenos distintos. */
.rr{padding:clamp(40px,7vw,86px) var(--rr-lado,6vw);max-width:760px;margin:0 auto}
.rr-t{margin:0 0 8px;font-size:clamp(24px,4.4vw,34px);line-height:1.1}
.rr-sub{margin:0 0 18px;opacity:.78;line-height:1.5}
.rr-aviso{margin:0 0 10px;font-size:14px;opacity:.8}
.rr-form{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.rr-form{grid-template-columns:1fr 1fr}
  .rr-c:nth-last-child(2){grid-column:1/-1}}
.rr-c{display:grid;gap:6px;font-size:14px}
.rr-c span{opacity:.85}
.rr-c input,.rr-c textarea{font:inherit;font-size:16px;padding:12px 14px;
  border-radius:10px;border:1px solid currentColor;background:transparent;
  color:inherit;width:100%;box-sizing:border-box}
/* 16px de verdad en el movil: por debajo, iOS hace zoom al enfocar y descoloca
   la pagina entera. */
/* El boton NO inventa colores. `currentColor` y `canvas` se resuelven a lo que
   el navegador quiera, y en una pagina de texto claro eso fue blanco sobre
   blanco: el unico boton que manda la reserva, invisible. Usa las clases del
   sistema (`rb rb-pri`) y aqui solo se le da sitio. */
/* NI relleno ni `rb-pri`. Relleno con `currentColor` salio blanco sobre blanco;
   con `rb rb-pri` pasaba a ser un SEGUNDO boton primario y LISTON-PRO exige uno
   solo -el de la portada manda, y dos llamadas principales no son ninguna-. Va
   perfilado: contraste garantizado, porque usa el color del texto sobre el fondo
   de la pagina, que ya es un par que contrasta. */
.rr-enviar{grid-column:1/-1;justify-self:start;font:inherit;font-weight:700;
  font-size:16px;min-height:48px;padding:13px 26px;cursor:pointer;
  background:transparent;color:inherit;border:2px solid currentColor;
  border-radius:999px}
.rr-enviar:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.rr-legal{margin:14px 0 0;font-size:13px;opacity:.72;line-height:1.5}
/* El enlace que la ley obliga a poner medía 16 px de alto: el dedo no lo acierta
   y LISTON-PRO lo canto. 44 de verdad, no de mentira. */
.rr-legal-a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
/* LA TRAMPA. Fuera de pantalla, sin foco y sin voz —y NO con `display:none`,
   que es justo lo que miran los bots que se saltan estos campos—. */
.rr-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rr-gracias{max-width:640px;margin:0 auto;padding:14vh 6vw;line-height:1.6}
.rr-gracias h1{font-size:clamp(26px,5vw,38px);margin:0 0 12px}
.rr-gracias .rr-enviar{display:inline-block;text-decoration:none;margin-top:18px}