/* ══════════════════════════════════════════════════════════════════════════
   DISEÑO ÚNICO · ZONA WEB PÚBLICA Y REGISTRO (oleada 3, 10/11/2026)

   Las piezas comunes están en pbc-kit.css (pbc-k-*); aquí solo lo propio de
   esta zona, con las mismas reglas:
   · Solo se carga con el interruptor DISENO_UNICO y TODO va dentro de `.pbc-du`
     (la clase que la plantilla pone en <body>): apagado, nada de aquí existe.
   · Ni un color escrito a mano: todo sale de pbc-design-tokens.css (lo vigila
     mainmodule/tests/test_du_web.py).
   · Fondo blanco, tarjetas blancas con línea fina, letra PBC Sans 400/700,
     texto 17, títulos 30, iconos de línea, nada de emojis ni mascotas.
   · Mismas pantallas, mismos pasos, mismos botones (Google, Apple, Facebook) y
     mismos textos: solo cambian el aspecto y el orden.

   Índice
     1. Entrar y crear cuenta (login.html, register_simple.html, register.html,
        y la ventanita del alta dentro de otra página: base-auth-modal.html).
     2. Páginas de cuenta sueltas (confirmar correo, contraseña olvidada).
     3. Páginas públicas de información (quiénes somos, equipo, opiniones,
        preguntas, cómo funciona, contacto y las legales): `du-web-pub`.
     4. Blog (`du-web-blog`) y páginas que trae Google (`du-web-seo`).
     5. El billete «Entra o crea tu cuenta» que sale encima de cualquier
        página al tocar algo que pide cuenta (auth_gate.html, du-web-gate).
     6. Páginas sueltas de «darse de baja» (du-simple).
     7. El aviso de cookies (cookie_consent.html, du-web-cookies).
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · ENTRAR Y CREAR CUENTA ───────────────────────────────────────────── */

/* Fondo blanco en toda la página (fuera el degradado gris). */
body.pbc-du.du-auth { background: hsl(var(--pbc-surface)); }
.pbc-du .du-auth-page {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  min-height: 0;
  padding: 28px 16px 48px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
.pbc-du .du-auth-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
  /* La web pone «* { max-width: 100% !important }» (viewport-fix.css): el tope de
     ancho va en width, que esa regla no toca. */
  width: min(100%, 460px);
  margin: 0 auto;
}
.pbc-du .du-auth-page button,
.pbc-du .du-auth-page input,
.pbc-du .du-auth-page select { font-family: var(--pbc-font); }

/* Título grande y una frase debajo. */
.pbc-du .du-auth-head { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.pbc-du .du-auth-title {
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.15;
  letter-spacing: -.5px;
}
.pbc-du .du-auth-sub {
  margin: 0;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-body);
  line-height: 1.45;
}

/* Avisos de arriba (bien o mal), en una tarjeta fina con el color del aviso. */
.pbc-du .du-auth-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid hsl(var(--pbc-green) / .25);
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.4;
}
.pbc-du .du-auth-msg--error {
  border-color: hsl(var(--pbc-red) / .3);
  background: hsl(var(--pbc-red-soft));
  color: hsl(var(--pbc-red-dark));
}
.pbc-du .du-auth-msg svg { flex: 0 0 auto; width: 20px !important; height: 20px !important; margin-top: 1px; }

/* La tarjeta del formulario: blanca, línea fina, radio de tarjeta. */
.pbc-du .du-auth-card {
  box-sizing: border-box;
  padding: 22px 20px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
@media (min-width: 640px) { .pbc-du .du-auth-card { padding: 28px 30px; } }

/* Botones de Google, Apple y Facebook: misma forma que el botón que se hunde.
   Cada uno conserva su color de marca (Google blanco, Apple negro, Facebook
   azul: lo piden sus normas); solo cambian el alto, el radio y el canto. */
.pbc-du .du-auth-page .space-y-3 > a[href],
.pbc-du .du-auth-page [data-social-signin] a[href] {
  min-height: 54px;
  /* Otras hojas de la web inflan .py-4 con !important: el alto lo da min-height. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: var(--pbc-radius-button);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .du-auth-page a[data-google-oauth] {
  border-color: hsl(var(--pbc-line));
  color: hsl(var(--pbc-ink));
}
.pbc-du .du-auth-page a[data-apple-oauth] { box-shadow: 0 3px 0 hsl(var(--pbc-ink)); }
.pbc-du .du-auth-page .space-y-3 > a[href]:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 hsl(var(--pbc-line));
}
.pbc-du .du-auth-page .space-y-3 > a[href]:hover { box-shadow: 0 3px 0 hsl(var(--pbc-line)); }
.pbc-du .du-auth-page a[data-apple-oauth]:hover { box-shadow: 0 3px 0 hsl(var(--pbc-ink)); }
.pbc-du .du-auth-page .space-y-3 > a[href] svg { width: 22px !important; height: 22px !important; display: block; }
/* El separador «o»: letra normal, sin mayúsculas, más pegado. */
.pbc-du .du-auth-page .my-5 { margin-top: 16px; margin-bottom: 16px; }
.pbc-du .du-auth-page .my-5 > span {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  text-transform: none;
  letter-spacing: 0;
}
.pbc-du .du-auth-page .my-5 > div { background: hsl(var(--pbc-line-soft)); }
.pbc-du .du-auth-page [data-inapp-email-note] {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
}

/* Campos: etiqueta en negrita encima (pbc-k-label) y campo del kit. */
.pbc-du .du-auth-form { display: flex; flex-direction: column; gap: 16px; }
.pbc-du .du-auth-form > * + * { margin-top: 0; }
.pbc-du .du-auth-field { display: flex; flex-direction: column; gap: 6px; }
.pbc-du .du-auth-field .pbc-k-input { font-size: var(--pbc-size-body); }
/* Campo con dibujo a la izquierda (usuario) o botón a la derecha (el ojo). */
.pbc-du .du-auth-inputbox { position: relative; display: block; }
.pbc-du .du-auth-inputbox .du-auth-lead {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 20px !important;
  height: 20px !important;
  margin-top: -10px;
  color: hsl(var(--pbc-muted));
  pointer-events: none;
}
.pbc-du .du-auth-inputbox .du-auth-lead + .pbc-k-input { padding-left: 44px; }
.pbc-du .du-auth-inputbox .pbc-k-input[type="password"],
.pbc-du .du-auth-inputbox .pbc-k-input.du-auth-has-eye { padding-right: 52px; }
.pbc-du .du-auth-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: hsl(var(--pbc-muted));
  cursor: pointer;
}
.pbc-du .du-auth-eye svg { width: 22px !important; height: 22px !important; }
/* El ojo cambia de dibujo cuando la contraseña se ve (el script de siempre cambia
   el tipo del campo; aquí solo se mira ese tipo). */
.pbc-du .du-auth-eye .du-auth-eye-hide { display: none; }
.pbc-du .du-auth-inputbox:has(input[type="text"]) .du-auth-eye-show { display: none; }
.pbc-du .du-auth-inputbox:has(input[type="text"]) .du-auth-eye-hide { display: block; }
.pbc-du .du-auth-eye:focus-visible { outline: 3px solid hsl(var(--pbc-blue) / .45); outline-offset: 0; }
/* Correo y nombre que ya vienen del cuestionario: solo lectura, en gris suave. */
.pbc-du .du-auth-page .pbc-k-input[readonly] { background: hsl(var(--pbc-page)); color: hsl(var(--pbc-ink-soft)); }

/* Enlaces de la tarjeta (olvidé la contraseña, condiciones, privacidad). */
.pbc-du .du-auth-link,
.pbc-du .du-auth-card p a,
.pbc-du .du-auth-card label a {
  color: hsl(var(--pbc-blue));
  font-weight: var(--pbc-weight-bold);
  text-decoration: none;
}
.pbc-du .du-auth-link:hover,
.pbc-du .du-auth-card p a:hover,
.pbc-du .du-auth-card label a:hover {
  color: hsl(var(--pbc-blue-dark));
  text-decoration: underline;
}
.pbc-du .du-auth-forgot { align-self: flex-end; font-size: var(--pbc-size-label); }

/* El botón de entrar lleva dentro su «Entrando…»: se pone encima del texto. */
.pbc-du .du-auth-page .pbc-k-btn { position: relative; overflow: hidden; }
.pbc-du .du-auth-page .pbc-k-btn .button-text { display: inline-flex; align-items: center; gap: 8px; }
.pbc-du .du-auth-page .pbc-k-btn .button-text svg { width: 20px !important; height: 20px !important; }
.pbc-du .du-auth-page .pbc-k-btn .button-text.hidden { display: none; }
.pbc-du .du-auth-page .button-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  background: hsl(var(--pbc-blue-dark));
  color: hsl(var(--pbc-on-color));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .du-auth-page .button-loader.hidden { display: none; }
.pbc-du .du-auth-page .button-loader > div { display: flex; align-items: center; gap: 10px; }
.pbc-du .du-auth-page .button-loader svg { width: 20px !important; height: 20px !important; margin: 0; }
.pbc-du .du-auth-spin { animation: du-auth-spin 1s linear infinite; }
@keyframes du-auth-spin { to { transform: rotate(360deg); } }

/* Debajo de la tarjeta: «¿Aún no tienes cuenta?» y el botón blanco. */
.pbc-du .du-auth-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-body);
  text-align: center;
}
.pbc-du .du-auth-switch .pbc-k-btn { max-width: 460px; }

/* Lo que es PBC, en una fila de tres con dibujos de línea (sin cajas). */
.pbc-du .du-auth-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid hsl(var(--pbc-line-soft));
  list-style: none;
}
.pbc-du .du-auth-feats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.25;
  text-align: center;
}
.pbc-du .du-auth-feats svg { width: 24px !important; height: 24px !important; max-width: none !important; max-height: none !important; color: hsl(var(--pbc-blue)); }

/* Crear cuenta, paso a paso: una pregunta por pantalla, como hoy. */
.pbc-du .du-auth-step-title {
  margin: 0 0 4px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  text-align: center;
}
.pbc-du .du-auth-step-sub {
  margin: 0 0 16px;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  line-height: 1.4;
  text-align: center;
}
/* Las banderas: fichas que se hunden (blancas con borde; la elegida en azul). */
.pbc-du .du-auth-page .pick-chip {
  min-height: 84px;
  padding: 12px 10px;
  border: 2px solid hsl(var(--pbc-line));
  border-bottom-width: 2px;
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  gap: 6px;
}
.pbc-du .du-auth-page .pick-chip:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow: 0 1px 0 hsl(var(--pbc-line));
}
@media (hover: hover) {
  .pbc-du .du-auth-page .pick-chip:hover { border-color: hsl(var(--pbc-blue)); }
}
.pbc-du .du-auth-page .pick-flag { font-size: 30px; border-radius: 4px; }
.pbc-du .du-auth-page .pick-name {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .du-auth-page .pick-input:checked + .pick-chip {
  border-color: hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue-soft));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue));
}
.pbc-du .du-auth-page .pick-input:checked + .pick-chip .pick-name { color: hsl(var(--pbc-blue-dark)); }
.pbc-du .du-auth-page .pick-input:focus-visible + .pick-chip { outline: 3px solid hsl(var(--pbc-blue) / .45); }
/* Atrás (blanco) y Continuar (azul), en la misma fila. */
.pbc-du .du-auth-page .wizard-actions { gap: 10px; margin-top: 22px; }
.pbc-du .du-auth-page .wizard-actions > .pbc-k-btn--sec { padding-left: 18px; padding-right: 18px; }
.pbc-du .du-auth-page .du-auth-next { margin-top: 22px; }
.pbc-du .du-auth-page .du-auth-other { margin-top: 12px; }

/* Casillas de condiciones y boletín: más grandes y legibles (antes 12 px). */
.pbc-du .du-auth-page input[name="terms_accept"],
.pbc-du .du-auth-page input[name="newsletter_opt_in"] {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: hsl(var(--pbc-blue));
  cursor: pointer;
}
.pbc-du .du-auth-page label:has(> input[name="terms_accept"]),
.pbc-du .du-auth-page label:has(> input[name="newsletter_opt_in"]) {
  gap: 10px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  line-height: 1.45;
}
/* El aviso de privacidad del final (antes 12 px). */
.pbc-du .du-auth-page .du-auth-card > p.text-xs {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  line-height: 1.5;
}
.pbc-du .du-auth-card .du-auth-switch { margin-top: 18px; }

/* La ventanita del alta dentro de otra página (base-auth-modal.html): sin
   título ni márgenes de página, la tarjeta sin borde (ya está dentro de una). */
.pbc-du.du-auth-modal .du-auth-page { padding: 0; }
.pbc-du.du-auth-modal .du-auth-head { display: none; }
.pbc-du.du-auth-modal .du-auth-card { padding: 0; border: 0; box-shadow: none; }
.pbc-du .du-auth-step-title--solo { margin-bottom: 16px; }
.pbc-du .du-auth-gap { margin-top: 16px; }
.pbc-du .du-auth-field .pbc-k-hint { margin: 0; }
.pbc-du .du-auth-switch--inline {
  display: block;
  margin-top: 18px;
  font-size: var(--pbc-size-label);
}
/* El formulario de siempre mete 16 px de relleno a los lados en el móvil
   (con !important): aquí la página ya los pone. */
.pbc-du .du-auth-page .register-form-wrapper,
.pbc-du .du-auth-page .login-form-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
/* Banderas: 2 por fila en el móvil y 3 en el ordenador, como pide la hoja de
   siempre (otra regla de la web las dejaba en una columna). */
.pbc-du .du-auth-page .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
@media (min-width: 640px) { .pbc-du .du-auth-page .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }


/* ── 2 · PÁGINAS DE CUENTA SUELTAS ───────────────────────────────────────────
   Confirmar el correo (verify_email.html) y la contraseña olvidada o cambiada
   (registration/password_*). Mismo HTML de siempre: aquí solo se le da el
   aspecto del kit (fondo blanco, título grande, tarjeta fina, campos y botón
   que se hunde), sin el cuadro de color de arriba. */
body.pbc-du.du-auth-legacy main > .container,
body.pbc-du.du-auth-legacy main .container { max-width: none; padding-left: 0; padding-right: 0; }
.pbc-du.du-auth-legacy .min-h-screen {
  min-height: 0;
  padding: 28px 16px 48px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
.pbc-du.du-auth-legacy .min-h-screen > div {
  width: min(100%, 460px);
  margin-left: auto;
  margin-right: auto;
}
.pbc-du.du-auth-legacy .min-h-screen > div > * + * { margin-top: 18px; }
/* El cuadro de color con el candado o el visto: fuera (solo adorna). */
.pbc-du.du-auth-legacy .text-center > div.rounded-2xl:first-child { display: none; }
.pbc-du.du-auth-legacy h2 {
  margin: 0 0 6px;
  background: none;
  color: hsl(var(--pbc-ink));
  -webkit-text-fill-color: currentColor;
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.15;
  letter-spacing: -.5px;
}
.pbc-du.du-auth-legacy .text-center > p {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-body);
  line-height: 1.45;
}
/* La tarjeta. */
.pbc-du.du-auth-legacy .bg-white\/80 {
  margin-top: 18px;
  padding: 22px 20px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}
@media (min-width: 640px) { .pbc-du.du-auth-legacy .bg-white\/80 { padding: 28px 30px; } }
.pbc-du.du-auth-legacy .bg-white\/80 p { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); line-height: 1.5; }
/* Etiquetas y campos como los del kit. */
.pbc-du.du-auth-legacy label {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du.du-auth-legacy input[type="email"],
.pbc-du.du-auth-legacy input[type="password"],
.pbc-du.du-auth-legacy input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: none;
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-regular);
  backdrop-filter: none;
}
.pbc-du.du-auth-legacy input[type="email"]:focus,
.pbc-du.du-auth-legacy input[type="password"]:focus,
.pbc-du.du-auth-legacy input[type="text"]:focus {
  outline: none;
  border-color: hsl(var(--pbc-blue));
  box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft));
}
.pbc-du.du-auth-legacy .text-xs { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); }
/* Avisos (error en rojo, información en azul, bien en verde). */
.pbc-du.du-auth-legacy .bg-red-50,
.pbc-du.du-auth-legacy .from-red-50 {
  border: 1px solid hsl(var(--pbc-red) / .3);
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-red-soft));
  box-shadow: none;
}
.pbc-du.du-auth-legacy .bg-red-50 p,
.pbc-du.du-auth-legacy .from-red-50 span { color: hsl(var(--pbc-red-dark)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du.du-auth-legacy .bg-blue-50 {
  border: 1px solid hsl(var(--pbc-blue) / .2);
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-blue-soft));
}
.pbc-du.du-auth-legacy .bg-blue-50 p { color: hsl(var(--pbc-blue-dark)); font-size: var(--pbc-size-label); }
.pbc-du.du-auth-legacy .from-green-50 {
  border: 1px solid hsl(var(--pbc-green) / .25);
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-green-soft));
  box-shadow: none;
}
.pbc-du.du-auth-legacy .from-green-50 span { color: hsl(var(--pbc-ink)); font-weight: var(--pbc-weight-bold); }
.pbc-du.du-auth-legacy .from-green-50 .rounded-full,
.pbc-du.du-auth-legacy .from-red-50 .rounded-full { display: none; }
/* El botón principal (enviar, guardar, volver a entrar): el que se hunde. Lleva
   !important en el color porque algunas de estas páginas lo traen escrito en
   el propio botón. */
.pbc-du.du-auth-legacy button[type="submit"]:not(.underline),
.pbc-du.du-auth-legacy a.group.relative {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 10px 18px !important;
  border: 2px solid hsl(var(--pbc-blue)) !important;
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue)) !important;
  color: hsl(var(--pbc-on-color)) !important;
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  transform: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du.du-auth-legacy button[type="submit"]:not(.underline):active,
.pbc-du.du-auth-legacy a.group.relative:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du.du-auth-legacy button[type="submit"]:not(.underline) > span.absolute,
.pbc-du.du-auth-legacy a.group.relative > span.absolute { position: static; padding: 0; }
.pbc-du.du-auth-legacy button[type="submit"]:not(.underline) svg,
.pbc-du.du-auth-legacy a.group.relative svg { width: 20px !important; height: 20px !important; color: currentColor !important; }
/* El dibujo de dentro del campo (sobre, candado): a su tamaño también en el móvil. */
.pbc-du.du-auth-legacy .relative > .absolute svg {
  display: block;
  width: 20px !important;
  height: 20px !important;
  color: hsl(var(--pbc-muted));
}
/* Botón de texto («Envía uno nuevo») y enlaces: azul de la casa. */
.pbc-du.du-auth-legacy button.underline,
.pbc-du.du-auth-legacy .bg-white\/80 a:not(.group),
.pbc-du.du-auth-legacy .min-h-screen > div > p a {
  color: hsl(var(--pbc-blue));
  font-weight: var(--pbc-weight-bold);
}
/* Fila de «Volver a entrar» + botón (contraseña olvidada): uno debajo del otro. */
.pbc-du.du-auth-legacy .flex.items-center.justify-between {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 14px;
  text-align: center;
}


/* ── 3 · PÁGINAS PÚBLICAS DE INFORMACIÓN ─────────────────────────────────────
   about-v2, team-v2, testimonials-v2, faq, how-it-works, contact-v2 y las
   legales (privacy, terms, cookies, impressum). Mismo HTML, mismos textos y
   mismo orden; solo cambian letra, tamaños, botones, tarjetas y fotos. Todo
   dentro de <section> para no tocar el marco (menú y pie son de otra zona).
   Las franjas azules de la web se quedan (son la marca); el resto, en blanco.
   Nunca dentro de la portada del móvil (.pbc-mhome), que es de la zona Inicio
   (la portada se queda como siempre: Guille, 10/11/2026). */

/* Una sola letra (PBC Sans) y dos pesos: fuera la Futura y los 300/500/600. */
.pbc-du.du-web-pub section:not(.pbc-mhome section),
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(h1, h2, h3, h4, h5, p, li, a, span, label, button, input, textarea, select, summary, blockquote, td, th, strong, em, small, div) {
  /* !important: la hoja de la web trae la Futura con reglas de 3 clases. */
  font-family: var(--pbc-font) !important;
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(p, li, td, blockquote, .body-text, .sub, .tagline) {
  font-weight: var(--pbc-weight-regular);
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(h1, h2, h3, h4, h5, strong, b, .bold, .emph, .body-text-bold, .role, summary) {
  font-weight: var(--pbc-weight-bold);
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) .light { font-weight: var(--pbc-weight-regular); }

/* Títulos: 30-34 (32 en el móvil), interlineado prieto, sin letras finas. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) h1 {
  font-size: var(--pbc-size-title-xl);
  line-height: 1.12;
  letter-spacing: -.5px;
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(h2, .section-title) {
  font-size: var(--pbc-size-title-l);
  line-height: 1.15;
  letter-spacing: -.4px;
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) h3 { font-size: var(--pbc-size-title-m); line-height: 1.2; }
.pbc-du.du-web-pub section:not(.pbc-mhome section) h4 { font-size: var(--pbc-size-title-s); line-height: 1.25; }
@media (min-width: 768px) {
  .pbc-du.du-web-pub section:not(.pbc-mhome section) h1 { font-size: calc(var(--pbc-size-title-xl) + 2px); }
  .pbc-du.du-web-pub section:not(.pbc-mhome section) :is(h2, .section-title) { font-size: var(--pbc-size-title-xl); }
}
/* Las dos partes del título (fina + negrita) traían su propio tamaño (52-60). */
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(h1, h2, h3, .section-title) :is(.light, .bold) { font-size: inherit; line-height: inherit; }
/* La palabra clave del título (la parte en negrita) con el subrayado amarillo. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(h1, h2, .section-title) .bold {
  /* Subrayado y no fondo: algunas de estas partes van en bloque y un fondo
     ocuparía todo el ancho de la página, no solo la palabra. */
  text-decoration: underline;
  text-decoration-color: hsl(var(--pbc-gold));
  text-decoration-thickness: .22em;
  text-underline-offset: .08em;
  text-decoration-skip-ink: none;
}

/* Texto 17 (nunca menos de 15), cómodo de leer con gafas. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(p, li) { font-size: var(--pbc-size-body); line-height: 1.55; }
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(small, .terms-updated, .role) { font-size: var(--pbc-size-label); }

/* Botones: el que se hunde. Azul para apuntarse o reservar; en las franjas
   azules, blanco para que se vea. Sin MAYÚSCULAS. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(.btn-yellow, .btn-primary, .btn-outline-white, .btn-outline) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 54px;
  padding: 10px 28px;
  border: 2px solid hsl(var(--pbc-blue));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transform: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(.btn-yellow, .btn-primary, .btn-outline-white, .btn-outline):hover {
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(.btn-yellow, .btn-primary, .btn-outline-white, .btn-outline):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(.bg-primary-section, .hero-primary, .pfaq-hero) :is(.btn-yellow, .btn-primary, .btn-outline-white, .btn-outline),
.pbc-du.du-web-pub section:not(.pbc-mhome section):is(.bg-primary-section, .hero-primary, .pfaq-hero) :is(.btn-yellow, .btn-primary, .btn-outline-white, .btn-outline),
.pbc-du.du-web-pub section:not(.pbc-mhome section) .btn-outline-white,
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(.bg-primary-section, .hero-primary, .pfaq-hero) :is(.btn-yellow, .btn-primary, .btn-outline-white, .btn-outline):hover,
.pbc-du.du-web-pub section:not(.pbc-mhome section):is(.bg-primary-section, .hero-primary, .pfaq-hero) :is(.btn-yellow, .btn-primary, .btn-outline-white, .btn-outline):hover {
  border-color: hsl(var(--pbc-surface));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
}

/* Tarjetas: blancas, línea fina, uno de los tres redondeos. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(.diff-card, .contact-card, .community-item, .persona, .card, .teacher-card, .testimonial-card, .faq-item) {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
  color: hsl(var(--pbc-ink));
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(.diff-card, .contact-card, .community-item, .persona, .card, .testimonial-card) img {
  border-radius: var(--pbc-radius-field);
}

/* Fotos SIEMPRE enteras: ancho fijo y alto natural, sin recortar en círculo.
   El fundador y las profes del equipo dejan de ir en un círculo. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) .teachers-row .circle {
  width: 8rem;
  height: auto;
  border: 0;
  border-radius: var(--pbc-radius-card);
  transform: none;
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) .teachers-row .circle img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) .founder .photo {
  height: auto;
  border: 0;
  border-radius: var(--pbc-radius-card);
  overflow: hidden;
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) .founder .photo img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  border-radius: var(--pbc-radius-card);
}
.pbc-du.du-web-pub :is(section:not(.pbc-mhome section), .teacher-modal) .avatar {
  width: 160px;
  height: auto;
  border: 0;
  border-radius: var(--pbc-radius-card);
  overflow: hidden;
  background: hsl(var(--pbc-page));
}
.pbc-du.du-web-pub :is(section:not(.pbc-mhome section), .teacher-modal) .avatar img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--pbc-radius-card);
}
/* Las tarjetas del equipo eran azules con letra blanca: ahora blancas, así que
   la letra pasa a oscura. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) .teacher-card { padding: 22px 18px; }
.pbc-du.du-web-pub section:not(.pbc-mhome section) .teacher-card h4 { color: hsl(var(--pbc-ink)); }
.pbc-du.du-web-pub section:not(.pbc-mhome section) .teacher-card p { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du.du-web-pub section:not(.pbc-mhome section) .teacher-card .avatar { margin-left: auto; margin-right: auto; }
.pbc-du.du-web-pub section:not(.pbc-mhome section) .teacher-read-more {
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-transform: none;
  letter-spacing: 0;
}
/* La ficha de la profe al pulsar «Leer más»: blanca, radio de tarjeta. */
.pbc-du.du-web-pub .teacher-modal {
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
.pbc-du.du-web-pub .teacher-modal :is(h3, p) { font-family: var(--pbc-font); }
.pbc-du.du-web-pub .teacher-modal p { font-size: var(--pbc-size-body); line-height: 1.55; font-weight: var(--pbc-weight-regular); }

/* Legales (privacidad, condiciones, cookies, aviso legal): una columna que se
   lee bien, títulos de apartado a 24. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(.terms-content, .terms-section) { color: hsl(var(--pbc-ink)); }
.pbc-du.du-web-pub section:not(.pbc-mhome section) .terms-content { max-width: 46rem; margin-left: auto; margin-right: auto; }
.pbc-du.du-web-pub section:not(.pbc-mhome section) .terms-section h2 { font-size: var(--pbc-size-title-m); }
.pbc-du.du-web-pub section:not(.pbc-mhome section) .terms-section a { color: hsl(var(--pbc-blue)); font-weight: var(--pbc-weight-bold); }

/* Formularios de contacto (contact-form-v2): campos del kit. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  box-sizing: border-box;
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  box-shadow: none;
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) textarea { min-height: 120px; }
.pbc-du.du-web-pub section:not(.pbc-mhome section) :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select):focus {
  outline: none;
  border-color: hsl(var(--pbc-blue));
  box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft));
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) form :is(button[type="submit"], input[type="submit"]) {
  min-height: 54px;
  padding: 10px 28px;
  border: 2px solid hsl(var(--pbc-blue));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  text-transform: none;
  letter-spacing: 0;
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) form :is(button[type="submit"], input[type="submit"]):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du.du-web-pub section:not(.pbc-mhome section) .teacher-card p span { color: inherit; }

/* La fecha y la entradilla de las legales iban a medio gris: gris de la casa. */
.pbc-du.du-web-pub section:not(.pbc-mhome section) .terms-updated { color: hsl(var(--pbc-muted)); }


/* ── 4 · BLOG Y PÁGINAS DE GOOGLE ───────────────────────────────────────────
   blog/index.html, blog/detail.html (du-web-blog) y las páginas que trae
   Google: seo/landing.html y seo/landing_index.html (du-web-seo). Mismos
   textos, títulos y metadatos (Google ya las tiene); solo aspecto y orden.
   Sin mascota (Guille, 09/11/2026): la cabecera azul se queda solo con el
   texto y el botón. */

/* Una letra y dos pesos. */
.pbc-du.du-web-seo .seo-landing,
.pbc-du.du-web-seo .seo-landing :is(h1, h2, h3, p, li, a, span, b, strong, td, th, summary, div),
.pbc-du.du-web-blog :is(.blog-wrap, .post-wrap),
.pbc-du.du-web-blog :is(.blog-wrap, .post-wrap) :is(h1, h2, h3, p, li, a, span, b, strong, summary, div) {
  font-family: var(--pbc-font) !important;
}
.pbc-du.du-web-seo .seo-landing :is(h1, h2, h3, b, strong, th, summary),
.pbc-du.du-web-blog :is(.blog-wrap, .post-wrap) :is(h1, h2, h3, b, strong, summary) {
  font-weight: var(--pbc-weight-bold);
}
.pbc-du.du-web-seo .seo-landing :is(p, li, td),
.pbc-du.du-web-blog :is(.blog-wrap, .post-wrap) :is(p, li) {
  font-weight: var(--pbc-weight-regular);
  font-size: var(--pbc-size-body);
  line-height: 1.55;
}
/* Títulos 30-34. */
.pbc-du.du-web-seo .seo-landing h1,
.pbc-du.du-web-blog :is(.blog-head, .post-head) h1 {
  font-size: var(--pbc-size-title-xl);
  line-height: 1.12;
  letter-spacing: -.5px;
}
.pbc-du.du-web-seo .seo-landing h2 { font-size: var(--pbc-size-title-m); line-height: 1.2; }
@media (min-width: 768px) {
  .pbc-du.du-web-seo .seo-landing h1,
  .pbc-du.du-web-blog :is(.blog-head, .post-head) h1 { font-size: calc(var(--pbc-size-title-xl) + 2px); }
  .pbc-du.du-web-seo .seo-landing h2 { font-size: var(--pbc-size-title-l); }
}

/* Sin mascota: la cabecera azul y el cierre se quedan con el texto. */
.pbc-du.du-web-seo .seo-hero-mascot,
.pbc-du.du-web-seo .seo-closer-mascot { display: none; }
.pbc-du.du-web-seo .seo-hero > .container {
  grid-template-columns: minmax(0, 1fr);
  /* La mascota ocupaba el hueco de debajo del menú (que va encima, 96 px); sin
     ella, el texto empieza debajo del menú y no lo pisa. */
  padding-top: 112px;
}
@media (min-width: 768px) { .pbc-du.du-web-seo .seo-hero > .container { padding-top: 128px; } }
.pbc-du.du-web-seo .seo-hero-text { max-width: 46rem; }

/* El botón que se hunde. En las franjas azules (cabecera y cierre), blanco. */
.pbc-du.du-web-seo .seo-landing .btn-yellow,
.pbc-du.du-web-blog .post-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 54px;
  padding: 10px 28px;
  border: 2px solid hsl(var(--pbc-blue));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  transform: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du.du-web-seo :is(.seo-hero, .seo-closer) .btn-yellow,
.pbc-du.du-web-seo :is(.seo-hero, .seo-closer) .btn-yellow:hover {
  border-color: hsl(var(--pbc-surface));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
}
.pbc-du.du-web-seo .seo-landing .btn-yellow:active,
.pbc-du.du-web-blog .post-cta a:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark));
}

/* Tarjetas blancas con línea fina y uno de los tres redondeos. */
.pbc-du.du-web-seo :is(.seo-row, .seo-index-card, .seo-tablewrap, .seo-faq details),
.pbc-du.du-web-blog :is(.blog-card, .post-faq .faq-item) {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du.du-web-seo .seo-stat b { font-size: var(--pbc-size-title-l); font-weight: var(--pbc-weight-bold); }
.pbc-du.du-web-seo .seo-stat span { font-size: var(--pbc-size-label); }
/* Las píldoras («gratis», «clase»…) con la forma de bocadillo del logo. */
.pbc-du.du-web-seo .seo-pill {
  border-radius: var(--pbc-radius-tag);
  background: hsl(var(--pbc-cyan-soft));
  color: hsl(var(--pbc-cyan-ink));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du.du-web-seo .seo-pill-y {
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
}
.pbc-du.du-web-seo .seo-eyebrow { font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }

/* Blog: fichas con la foto ENTERA (sin recorte) y fechas legibles. */
.pbc-du.du-web-blog .blog-card .thumb { aspect-ratio: auto; background: hsl(var(--pbc-page)); }
.pbc-du.du-web-blog .blog-card .thumb img { height: auto; object-fit: contain; }
.pbc-du.du-web-blog .blog-card h2 { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-title-s); }
.pbc-du.du-web-blog .blog-card .date,
.pbc-du.du-web-blog .post-head .date { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
.pbc-du.du-web-blog .blog-card .excerpt { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du.du-web-blog .post-body { color: hsl(var(--pbc-ink)); }
.pbc-du.du-web-blog .post-body :is(h2, h3) { font-size: var(--pbc-size-title-m); line-height: 1.2; }
.pbc-du.du-web-blog .post-cover img { height: auto; object-fit: contain; border-radius: var(--pbc-radius-card); }
.pbc-du.du-web-blog :is(.blog-wrap, .post-wrap) a:not(.blog-card):not(.post-cta a) { color: hsl(var(--pbc-blue)); }
/* El blog no tiene foto de cabecera: el menú (transparente, pensado para ir
   encima de una foto) salía blanco sobre blanco. Solo aquí, el fondo azul de
   la cabecera de la casa; no se mueve nada. */
.pbc-du.du-web-blog nav.navbar { background: hsl(var(--pbc-blue)); }
/* Y el contenido empieza debajo del menú (antes quedaba debajo, tapado, la
   miga de pan y la fecha). */
.pbc-du.du-web-blog :is(.blog-wrap, .post-wrap) { padding-top: 80px; }
/* La caja de «¿Quieres practicar…?» del final: tarjeta fina, sin fondo de color. */
.pbc-du.du-web-blog .post-cta {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-page));
}
.pbc-du.du-web-blog .post-cta p { color: hsl(var(--pbc-ink)); font-weight: var(--pbc-weight-bold); }


/* ── 5 · BILLETE «ENTRA O CREA TU CUENTA» (auth_gate.html) ───────────────────
   Sale encima de cualquier página sin cuenta. Mismo billete (muescas incluidas),
   mismos botones y el mismo alta dentro; solo letra y botones del kit. Lleva
   !important donde pbc-mlogin.css ya lo trae. */
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-ticket { font-family: var(--pbc-font); }
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-title {
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.15;
  letter-spacing: -.3px;
}
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-continue {
  min-height: 54px !important;
  height: 54px !important;
  border: 2px solid hsl(var(--pbc-blue));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-continue:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-divider {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-socials a,
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-socials button {
  min-height: 54px !important;
  height: 54px !important;
  border-color: hsl(var(--pbc-line)) !important;
  border-radius: var(--pbc-radius-button) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-family: var(--pbc-font) !important;
  font-size: var(--pbc-size-label) !important;
  font-weight: var(--pbc-weight-bold) !important;
}
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-foot { font-family: var(--pbc-font); font-size: var(--pbc-size-label); }
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-foot a { color: hsl(var(--pbc-blue)); font-weight: var(--pbc-weight-bold); }
/* El «o» de debajo de Google/Apple sobra aquí: el billete ya dice «o continúa
   con» encima (cada cosa una sola vez). */
.pbc-du .pbc-gate.du-web-gate .pbc-mlogin-socials .my-5 { display: none; }


/* ── 6 · PÁGINAS SUELTAS DE «DARSE DE BAJA» ──────────────────────────────────
   unsubscribe.html (correos de la comunidad) y outreach_unsubscribe.html (el
   robot de instituciones). Mismos textos y mismo botón (POST); fondo blanco,
   tarjeta fina, letra de la casa y el botón que se hunde. La de la comunidad
   trae los estilos escritos en cada etiqueta (es casi un correo): por eso los
   !important. */
body.pbc-du.du-simple {
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font) !important;
}
.pbc-du.du-simple :is(h1, p, button, td, span, strong) { font-family: var(--pbc-font) !important; }
.pbc-du.du-simple h1 {
  color: hsl(var(--pbc-ink)) !important;
  font-size: var(--pbc-size-title-m) !important;
  font-weight: var(--pbc-weight-bold) !important;
  line-height: 1.2 !important;
}
.pbc-du.du-simple p {
  color: hsl(var(--pbc-ink-soft)) !important;
  font-size: var(--pbc-size-body) !important;
  line-height: 1.55 !important;
}
.pbc-du.du-simple :is(.caja, table table) {
  border: 1px solid hsl(var(--pbc-line-soft)) !important;
  border-radius: var(--pbc-radius-card) !important;
  background: hsl(var(--pbc-surface)) !important;
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06) !important;
}
.pbc-du.du-simple-mail > table { background: hsl(var(--pbc-surface)) !important; }
/* Cuerpo y pie de la tarjeta en blanco; la franja del logo, en el azul de la
   cabecera de la casa (el logo oficial es blanco: sobre blanco no se vería). */
.pbc-du.du-simple-mail table table td { background: hsl(var(--pbc-surface)) !important; }
.pbc-du.du-simple-mail table table tr:first-child td { background: hsl(var(--pbc-blue)) !important; }
.pbc-du.du-simple-mail table table tr:last-child td {
  border-top: 1px solid hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-muted)) !important;
  font-size: var(--pbc-size-small) !important;
}
.pbc-du.du-simple button[type="submit"],
.pbc-du.du-simple form button {
  min-height: 54px;
  padding: 10px 28px !important;
  border: 2px solid hsl(var(--pbc-blue)) !important;
  border-radius: var(--pbc-radius-button) !important;
  background: hsl(var(--pbc-blue)) !important;
  color: hsl(var(--pbc-on-color)) !important;
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body) !important;
  font-weight: var(--pbc-weight-bold) !important;
  cursor: pointer;
}
.pbc-du.du-simple form button:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du.du-simple .otro { color: hsl(var(--pbc-muted)) !important; font-size: var(--pbc-size-label) !important; }
.pbc-du.du-simple hr { border-top-color: hsl(var(--pbc-line-soft)); }


/* ── 7 · AVISO DE COOKIES (includes/cookie_consent.html) ─────────────────────
   Mismo aviso, mismos dos botones y mismo comportamiento. Letra de la casa a
   15 y los dos botones IGUALES (blancos con borde: aceptar no puede destacar
   más que rechazar). Trae estilos en cada etiqueta: por eso los !important. */
.pbc-du #pbc-cookie-banner.du-web-cookies {
  border-top: 1px solid hsl(var(--pbc-line-soft)) !important;
  background: hsl(var(--pbc-surface)) !important;
  box-shadow: 0 -4px 14px hsl(var(--pbc-shadow) / .08) !important;
  font-family: var(--pbc-font);
}
.pbc-du #pbc-cookie-banner.du-web-cookies p {
  color: hsl(var(--pbc-ink-soft)) !important;
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label) !important;
  line-height: 1.45 !important;
}
.pbc-du #pbc-cookie-banner.du-web-cookies a { color: hsl(var(--pbc-blue)) !important; font-weight: var(--pbc-weight-bold); }
.pbc-du #pbc-cookie-banner.du-web-cookies button {
  min-height: 46px;
  padding: 8px 20px !important;
  border: 2px solid hsl(var(--pbc-line)) !important;
  border-radius: var(--pbc-radius-button) !important;
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label) !important;
  font-weight: var(--pbc-weight-bold) !important;
  /* En el móvil «Rechazar» se partía en dos líneas («Rechaza / r»). */
  white-space: nowrap;
  min-width: max-content;
}
.pbc-du #pbc-cookie-banner.du-web-cookies button:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }