/* Acceso con el correo, compartido (ver comun/newsletter.js). Usa la paleta de las guías. */

/* Guía cerrada: el script del <head> pone .nl-cerrada en <html>. Se ve la cabecera, el
   formulario y un avance borroso del primer bloque; el resto espera al correo. */
.nl-cerrada .hoja > [data-newsletter] ~ :not(.pie) { display: none !important; }
.nl-cerrada .hoja > [data-newsletter] + :not(.pie) {
  display: block !important;
  max-height: 240px;
  overflow: hidden;
  filter: blur(2.5px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
  mask-image: linear-gradient(#000 30%, transparent);
}
.nl-cerrada .hoja > .pie { display: none; }

.newsletter {
  margin: 28px 0 32px;
  padding: 30px 24px 26px;
  background: #1a1a1a;
  color: #f5f0e8;
  border-radius: 2px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.newsletter .meta {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
}
.newsletter h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.15;
  margin: 10px 0 12px;
}
.newsletter .nl-texto { font-size: 15px; line-height: 1.6; color: rgba(245, 240, 232, 0.82); margin: 0 0 18px; }
.newsletter form { display: grid; gap: 10px; }
.newsletter input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid rgba(245, 240, 232, 0.3);
  background: rgba(245, 240, 232, 0.06);
  color: #f5f0e8;
  font: inherit;
  /* 16px: con menos, Safari de iPhone hace zoom al tocar el campo */
  font-size: 16px;
  border-radius: 3px;
}
.newsletter input::placeholder { color: rgba(245, 240, 232, 0.45); }
.newsletter a { color: #e3936f; }
.newsletter button {
  background: #c96f4a;
  border: 1px solid #c96f4a;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px;
  border-radius: 999px;
  cursor: pointer;
}
.newsletter button[disabled] { opacity: 0.6; cursor: default; }
.newsletter .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter .nl-aviso { font-size: 12.5px; line-height: 1.5; color: rgba(245, 240, 232, 0.62); margin: 2px 0 0; }
.newsletter .nl-estado { font-size: 14px; min-height: 1.4em; margin: 0; color: #f5f0e8; }
.newsletter .nl-dentro { font-size: 15px; line-height: 1.5; margin: 0; outline: none; }
.newsletter .nl-sugerencia {
  display: inline; background: none; border: 0; padding: 0; color: #e3936f; font: inherit; font-size: 14px;
  letter-spacing: 0; text-align: left; text-transform: none; text-decoration: underline; border-radius: 0;
  overflow-wrap: anywhere; cursor: pointer;
}
/* El botón gira mientras se guarda el correo */
.newsletter button.nl-cargando { position: relative; color: transparent; opacity: 1; }
.newsletter button.nl-cargando::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: dw-girar 0.7s linear infinite;
}

/* ====================================================================================
   Después del correo (diseño D, elegido por David el 25-sept): la marca de sus portadas
   (naranja #FF4A1C, tinta #0E0E10, papel #F5F3EF, gris #8A8A93; Anton + Pinyon Script)
   con la sensación de desbloquear. El desbloqueo sale con MURO_V2_ENABLED y la tarjeta
   con SEGMENTACION_ENABLED (ver comun/newsletter.js).
   ==================================================================================== */

/* La guía se desbloquea: el avance borroso se enfoca y el resto aparece en cascada */
@keyframes nl-enfocar { from { filter: blur(3px); opacity: 0.5; } to { filter: none; opacity: 1; } }
@keyframes nl-aparecer { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.nl-enfocar { animation: nl-enfocar 0.8s ease both; }
.nl-aparecer { animation: nl-aparecer 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

.dw-saliendo > * { animation: dw-fundir 0.18s ease forwards; }
@keyframes dw-fundir { to { opacity: 0; transform: scale(0.98); } }
@keyframes dw-girar { to { transform: rotate(360deg); } }
@keyframes dw-trazo { to { stroke-dashoffset: 0; } }
@keyframes dw-aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dw.newsletter { background: transparent; padding: 0; color: #f5f3ef; }
.dw svg { display: block; }
.dw .dw-script { display: block; font-family: 'Pinyon Script', cursive; font-weight: 400; line-height: 1; }
.dw .dw-grande { display: block; font-family: 'Anton', 'Impact', sans-serif; font-weight: 400; letter-spacing: 0; text-transform: uppercase; line-height: 0.92; }
.dw .nl-saltar { display: inline-block; margin-top: 2px; color: #8a8a93; font-size: 14px; }
.dw-ic-svg { width: 22px; height: 22px; }

/* 1 · Desbloqueo: el naranja nace del botón que ha pulsado */
.dw-dentro {
  position: relative; overflow: hidden; border-radius: 22px; padding: 24px 22px 22px; color: #fff; isolation: isolate;
  background: radial-gradient(120% 95% at 0% 0%, #ff7d52 0%, #ff4a1c 46%, #e5360b 100%);
  clip-path: circle(0 at var(--ox, 50%) var(--oy, 80%));
  animation: dw-abrir 0.8s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
@keyframes dw-abrir { to { clip-path: circle(160% at var(--ox, 50%) var(--oy, 80%)); } }
.dw-dentro::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.45; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}
.dw-dentro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.38) 48%, transparent 64%);
  transform: translateX(-130%); animation: dw-brillo 1.05s 1.35s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
@keyframes dw-brillo { to { transform: translateX(130%); } }
.dw-sello {
  position: absolute; top: 18px; right: 18px; width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9); display: grid; place-items: center;
  animation: dw-sello-llenar 0.35s 1.02s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}
@keyframes dw-sello-llenar { 50% { transform: scale(1.12); } to { background: #fff; border-color: #fff; transform: none; } }
.dw-candado { position: absolute; width: 26px; height: 26px; color: #fff; animation: dw-fuera 0.22s 1.02s ease forwards; }
.dw-arco { transform-box: fill-box; transform-origin: right bottom; animation: dw-arco 0.28s 0.72s cubic-bezier(0.3, 1.8, 0.5, 1) forwards; }
@keyframes dw-arco { to { transform: translateY(-2px) rotate(-26deg); } }
@keyframes dw-fuera { to { opacity: 0; transform: scale(0.3); } }
.dw-check-sello { position: absolute; width: 28px; height: 28px; color: #ff4a1c; stroke-dasharray: 26; stroke-dashoffset: 26; animation: dw-trazo 0.38s 1.15s ease forwards; }
.dw .dw-dentro .dw-script { font-size: 40px; clip-path: inset(-10% 100% -20% 0); animation: dw-escribir 0.75s 0.55s cubic-bezier(0.55, 0, 0.3, 1) forwards; }
@keyframes dw-escribir { to { clip-path: inset(-10% -5% -20% 0); } }
.dw .dw-dentro .dw-grande { font-size: 88px; line-height: 0.92; margin: 0 0 12px; display: flex; overflow: hidden; padding-top: 4px; }
.dw .dw-dentro .dw-grande span { display: inline-block; transform: translateY(108%); animation: dw-letra 0.6s cubic-bezier(0.3, 1.45, 0.5, 1) forwards; }
@keyframes dw-letra { to { transform: none; } }
.dw-dentro-texto { opacity: 0; animation: dw-aparecer 0.5s 1.05s ease forwards; }
.dw-dentro-texto p { margin: 0 0 8px; max-width: 32ch; font: 500 14.5px/1.45 'Inter', sans-serif; color: #fff; }
.dw-dentro-texto p:last-child { margin-bottom: 0; }
.dw-dentro-texto .dw-nota { font-size: 13px; opacity: 0.88; }
.dw .dw-hoja {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 13px 18px; border-radius: 999px;
  background: #fff; color: #e5360b; text-decoration: none; font: 700 12px/1 'Inter', sans-serif; letter-spacing: 0.12em;
  text-transform: uppercase; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.dw .dw-hoja svg { width: 16px; height: 16px; }

/* 2 · Tarjeta de preguntas */
.dw-tarjeta {
  position: relative; margin-top: 12px; border-radius: 22px; padding: 22px 18px 18px;
  background: radial-gradient(130% 55% at 50% -8%, rgba(255, 74, 28, 0.2), transparent 60%), #0e0e10;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 44px rgba(14, 14, 16, 0.28);
  opacity: 0; transform: translateY(26px); animation: dw-subir 0.75s 1.3s cubic-bezier(0.2, 1.15, 0.3, 1) forwards;
}
@keyframes dw-subir { to { opacity: 1; transform: none; } }
.dw-cabeza { overflow: hidden; max-height: 260px; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; }
.dw-cabeza.plegada { max-height: 0; opacity: 0; }
.dw-progreso { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dw-barra { position: relative; width: 112px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.dw-barra i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 6px;
  background: linear-gradient(90deg, #ff4a1c, #ff8a5c); box-shadow: 0 0 14px rgba(255, 74, 28, 0.7);
  transition: width 0.8s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.dw-progreso em { font: 600 11px/1 'Inter', sans-serif; font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: #8a8a93; }
.dw-titulo { margin: 0; }
.dw .dw-titulo .dw-script { font-size: 31px; color: #fff; }
.dw .dw-titulo .dw-grande { font-size: 44px; color: #ff4a1c; margin-top: 2px; }
.dw-sub { margin: 8px 0 0; color: #8a8a93; font: 400 14px/1.5 'Inter', sans-serif; }
.dw-escena { position: relative; }
.dw-panel.entrando { animation: dw-panel-in 0.55s cubic-bezier(0.2, 1.1, 0.3, 1) both; }
.dw-panel.saliendo { animation: dw-panel-out 0.3s ease both; }
@keyframes dw-panel-in { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes dw-panel-out { to { opacity: 0; transform: translateX(-44px); } }
.dw-q { margin: 22px 0 12px; font: 700 18px/1.3 'Inter', sans-serif; color: #fff; }
.dw-lista { display: flex; flex-direction: column; }
.dw-item { max-height: 160px; margin-bottom: 10px; transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1), margin 0.42s, opacity 0.28s; }
.dw-item.fuera { max-height: 0; margin-bottom: 0; opacity: 0; pointer-events: none; }
.dw-entra { opacity: 0; transform: translateY(16px); animation: dw-entrar 0.55s cubic-bezier(0.2, 1.15, 0.3, 1) forwards; }
@keyframes dw-entrar { to { opacity: 1; transform: none; } }
.dw .dw-op {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: #16161a; border: 1px solid #26262c; border-radius: 16px; padding: 13px 14px; color: #f5f3ef;
  font: 500 15.5px/1.35 'Inter', sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 0.2s cubic-bezier(0.3, 1.5, 0.5, 1), border-color 0.25s, box-shadow 0.35s, color 0.3s;
}
.dw .dw-op:hover { border-color: #3a3a42; }
.dw .dw-op.pulsando { transform: scale(0.972); }
.dw .dw-op:focus-visible { outline: 2px solid #ff8a5c; outline-offset: 2px; }
.dw .dw-op:disabled { opacity: 1; cursor: default; }
.dw-onda {
  position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #ff5a2c, #ff4a1c 60%, #e8380d);
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.dw .dw-op > :not(.dw-onda) { position: relative; z-index: 1; }
.dw .dw-op.elegida { border-color: #ff4a1c; color: #fff; box-shadow: 0 12px 32px rgba(255, 74, 28, 0.38); }
.dw .dw-op.elegida .dw-onda { clip-path: circle(160% at var(--x, 50%) var(--y, 50%)); }
.dw-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 74, 28, 0.13); color: #ff4a1c; transition: background 0.35s, color 0.35s; }
.dw-ic .dw-ic-svg { animation-delay: inherit; }
.dw-ic .dw-ic-svg * { stroke-dasharray: 70; stroke-dashoffset: 70; animation: dw-trazo 0.9s ease forwards; animation-delay: inherit; }
.dw .dw-op.elegida .dw-ic { background: rgba(255, 255, 255, 0.22); color: #fff; }
.dw-tx { flex: 1; }
.dw-ok { width: 22px; height: 22px; flex: none; color: #fff; stroke-dasharray: 26; stroke-dashoffset: 26; }
.dw .dw-op.elegida .dw-ok { animation: dw-trazo 0.35s 0.28s ease forwards; }
.dw-lista.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dw-lista.rejilla .dw-item { margin: 0; max-height: none; transition: opacity 0.3s; }
.dw-lista.rejilla .dw-item.apagada { opacity: 0.28; }
.dw-lista.rejilla .dw-entra { height: 100%; }
.dw .dw-lista.rejilla .dw-op { height: 100%; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 116px; padding: 14px; }
.dw .dw-lista.rejilla .dw-ok { position: absolute; top: 14px; right: 14px; }
.dw-respuesta { display: flex; gap: 11px; align-items: flex-start; margin: 2px 0 14px; opacity: 0; transform: translateY(8px); animation: dw-aparecer 0.4s forwards; }
.dw-respuesta img { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0e0e10, 0 0 0 3.5px #ff4a1c; }
.dw-respuesta p { margin: 3px 0 0; font: 400 15.5px/1.45 'Inter', sans-serif; color: #f5f3ef; }
.dw-respuesta p::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: #ff4a1c; animation: dw-cursor 0.8s steps(1) infinite; }
.dw-respuesta.hecha p::after { display: none; }
@keyframes dw-cursor { 50% { opacity: 0; } }
.dw-error { margin: 8px 0 0; font: 400 14.5px/1.45 'Inter', sans-serif; color: #f5f3ef; }

/* 3 · El pase de la newsletter */
.dw-final { perspective: 1100px; padding-top: 4px; }
.dw-entrada { transform-style: preserve-3d; animation: dw-pase-in 1.05s cubic-bezier(0.2, 1, 0.3, 1) both; }
@keyframes dw-pase-in { from { opacity: 0; transform: rotateX(68deg) translateY(56px) scale(0.88); } to { opacity: 1; transform: none; } }
.dw-inclinar { transform-style: preserve-3d; transition: transform 0.15s ease-out; }
.dw-inclinar.reposo { animation: dw-flotar 7s ease-in-out infinite; }
@keyframes dw-flotar { 0%, 100% { transform: rotateX(3deg) rotateY(-4deg); } 50% { transform: rotateX(-3deg) rotateY(4deg); } }
.dw-pase { position: relative; min-height: 236px; cursor: pointer; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; transition: transform 0.8s cubic-bezier(0.3, 1.3, 0.5, 1); }
.dw-pase:focus-visible { outline: 2px solid #ff8a5c; outline-offset: 4px; border-radius: 20px; }
.dw-pase.girado { transform: rotateY(180deg); }
.dw-cara { position: absolute; inset: 0; overflow: hidden; border-radius: 20px; padding: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dw-frente { position: relative; inset: auto; min-height: 236px; display: flex; flex-direction: column; background: linear-gradient(140deg, #1d1d23 0%, #0e0e10 55%, #1c100b 100%); border: 1px solid rgba(255, 74, 28, 0.6); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.42); }
.dw-dorso {
  transform: rotateY(180deg); color: #fff; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(120% 90% at 100% 0%, #ff7d52, #ff4a1c 50%, #e5360b); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.42);
}
.dw-holo {
  position: absolute; inset: -60%; pointer-events: none; mix-blend-mode: screen; opacity: 0.9;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 138, 92, 0.22) 26%, transparent 36% 62%, rgba(255, 255, 255, 0.14) 72%, transparent 82%);
  animation: dw-girar 10s linear infinite;
}
.dw-luz { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx, 25%) var(--my, 0%), rgba(255, 255, 255, 0.2), transparent 46%); }
.dw-pase-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.dw .dw-pase-top .dw-grande { font-size: 34px; color: #fff; }
.dw-pase-top img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0e0e10, 0 0 0 4px #ff4a1c; }
.dw .dw-frente .dw-script { position: relative; font-size: 38px; color: #ff4a1c; margin: -2px 0 12px; }
.dw-dato { position: relative; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.16); max-width: 72%; }
.dw-dato small { display: block; margin-bottom: 4px; font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #8a8a93; }
.dw-dato strong { font: 600 15.5px/1.35 'Inter', sans-serif; color: #fff; }
.dw-pie { position: relative; margin-top: auto; padding: 14px 88px 0 0; font: 400 12px/1.3 'Inter', sans-serif; color: #8a8a93; }
.dw-estampa { position: absolute; right: 14px; bottom: 12px; width: 76px; height: 76px; }
.dw-estampa .dw-anillo { transform-origin: 50% 50%; animation: dw-girar 14s linear infinite; }
.dw .dw-dorso .dw-script { font-size: 36px; margin-bottom: 8px; }
.dw-dorso p { margin: 0 0 6px; font: 500 15.5px/1.45 'Inter', sans-serif; }
.dw-dorso small { font: 400 13px/1.4 'Inter', sans-serif; opacity: 0.85; }
.dw-pista { margin: 12px 0 0; text-align: center; font: 400 12.5px/1.3 'Inter', sans-serif; color: #8a8a93; opacity: 0; animation: dw-aparecer 0.5s 1.4s forwards; }
.dw-hecho { margin: 16px 0 0; font: 500 16px/1.45 'Inter', sans-serif; color: #fff; opacity: 0; animation: dw-aparecer 0.5s 0.9s forwards; }
.dw .nl-ir {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; background: #ff4a1c; border: 0; color: #fff;
  font: 600 12px/1 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 22px; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(255, 74, 28, 0.35); opacity: 0; animation: dw-aparecer 0.5s 1.15s forwards;
}
.dw .nl-ir svg { width: 16px; height: 16px; animation: dw-bote 1.4s ease-in-out infinite; }
@keyframes dw-bote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.dw-confeti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

@media (prefers-reduced-motion: reduce) {
  .nl-enfocar, .nl-aparecer { animation: none !important; }
  .dw *, .dw *::before, .dw *::after { animation: none !important; transition: none !important; }
  .dw-dentro, .dw .dw-dentro .dw-script { clip-path: none; }
  .dw .dw-dentro .dw-grande span, .dw-dentro-texto, .dw-tarjeta, .dw-entra, .dw-respuesta, .dw-pista, .dw-hecho, .dw .nl-ir { opacity: 1; transform: none; }
  .dw-candado { display: none; }
  .dw-sello { background: #fff; border-color: #fff; }
  .dw-check-sello, .dw .dw-op.elegida .dw-ok, .dw-ic .dw-ic-svg * { stroke-dashoffset: 0; }
}
@media print { .newsletter { display: none; } }

/* ====================================================================================
   Bloque de Hazlo Real al final de las guías (T7, ver bloqueHazloReal en newsletter.js).
   Sirve a las dos paletas: toma el color de texto de la guía y se pinta con transparencias; el
   acento es el terracota de las guías claras y, con .hr-oscuro (que pone el script al ver un
   fondo oscuro), el naranja de las oscuras.
   ==================================================================================== */
.hr-bloque {
  --hr-acento: #c96f4a;
  --hr-linea: rgba(26, 26, 26, 0.2);
  --hr-fondo: rgba(26, 26, 26, 0.04);
  box-sizing: border-box;
  margin: 48px 0 0;
  padding: 22px 20px 20px;
  border: 1px solid var(--hr-linea);
  border-left: 3px solid var(--hr-acento);
  border-radius: 14px;
  background: var(--hr-fondo);
  color: inherit;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
.hr-bloque.hr-oscuro {
  --hr-acento: #ff4a1c;
  --hr-linea: rgba(245, 243, 239, 0.18);
  --hr-fondo: rgba(245, 243, 239, 0.04);
}
.hr-bloque .hr-texto { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: inherit; }
.hr-bloque .hr-enlace {
  display: inline-block;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--hr-acento);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}
.hr-bloque .hr-enlace:hover { filter: brightness(1.08); }
.hr-bloque .hr-enlace:focus-visible { outline: 2px solid var(--hr-acento); outline-offset: 3px; }
/* Con la guía cerrada solo se ve el muro; el bloque aparece cuando se abre */
.nl-cerrada .hr-bloque { display: none !important; }
@media print { .hr-bloque { display: none; } }