/*
 * Inbodas · sistema visual común — paleta, tipografías y utilidades
 * compartidas entre todas las pantallas del front público y mi cuenta.
 *
 * Tokens del diseño Claude Design (2026-05-22 bundle).
 */

:root {
  --paper:      #FFFFFF;
  --surface:    #F4F0E6;
  --ink:        #0A0A0A;
  --inksoft:    #3A3733;
  --inkmute:    #7A746B;
  --line:       #E2DBCB;
  --line2:      #C9BFA8;
  --olive:      #EF444D;
  --olive-deep: #C5333B;
  --olive-soft: #FAD8DA;
  --accent:     #B8956A;
  --accent-soft:#D4B896;
  /* Display sans-serif para titulares en todo el plugin. */
  --font-display: 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Titulares y elementos editoriales con Mona Sans en todo el plugin.
 * Override agresivo (incluye em/i internos) — usamos especificidad
 * por namespace para evitar que reglas hardcodeadas de EB Garamond
 * dentro de portal.css / mi-cuenta.css ganen la cascada. */
.inbodas-public h1, .inbodas-public h2, .inbodas-public h3,
.inbodas-public h4, .inbodas-public h5, .inbodas-public h6,
.inbodas-mi-cuenta h1, .inbodas-mi-cuenta h2, .inbodas-mi-cuenta h3,
.inbodas-mi-cuenta h4, .inbodas-mi-cuenta h5, .inbodas-mi-cuenta h6,
.inbodas-public .display-title,
.inbodas-mi-cuenta .display-title {
  font-family: var(--font-display) !important;
  font-weight: 500;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}
/* Coherencia global: TODOS los <em> / <i> dentro de headings llevan
 * weight 600 (más presencia editorial) — sobreescribe el 500 heredado
 * del heading. Si añadimos un nuevo heading en algún sitio, esto
 * asegura que el em italic coral se vea con el peso correcto. */
.inbodas-public h1 em, .inbodas-public h1 i, .inbodas-public h1 .em,
.inbodas-public h2 em, .inbodas-public h2 i, .inbodas-public h2 .em,
.inbodas-public h3 em, .inbodas-public h3 i, .inbodas-public h3 .em,
.inbodas-public h4 em, .inbodas-public h4 i, .inbodas-public h4 .em,
.inbodas-public p .em, .inbodas-public span.em,
.inbodas-mi-cuenta h1 em, .inbodas-mi-cuenta h1 i, .inbodas-mi-cuenta h1 .em,
.inbodas-mi-cuenta h2 em, .inbodas-mi-cuenta h2 i, .inbodas-mi-cuenta h2 .em,
.inbodas-mi-cuenta h3 em, .inbodas-mi-cuenta h3 i, .inbodas-mi-cuenta h3 .em,
.inbodas-mi-cuenta h4 em, .inbodas-mi-cuenta h4 i, .inbodas-mi-cuenta h4 .em,
.inbodas-mi-cuenta p .em, .inbodas-mi-cuenta span.em,
.inbodas-public .display-title em, .inbodas-public .display-title i, .inbodas-public .display-title .em,
.inbodas-mi-cuenta .display-title em, .inbodas-mi-cuenta .display-title i, .inbodas-mi-cuenta .display-title .em {
  font-weight: 600 !important;
  font-style: italic;
}

/* Importes en euros — Mona Sans 500, sin font-feature-settings extra */
.inbodas-public .portal-kpi-num, .inbodas-public .portal-kpi-cur,
.inbodas-public .portal-cheque-card-amount,
.inbodas-public .portal-cheque-card-amount .value,
.inbodas-public .portal-cheque-card-amount .cur,
.inbodas-public .portal-cheques-total strong,
.inbodas-public .portal-cheques-total strong .cur,
.inbodas-public .portal-stat-value,
.inbodas-public .portal-card-amount,
.inbodas-public .portal-card-amount .cur,
.inbodas-mi-cuenta .stat-mini .value,
.inbodas-mi-cuenta .stat-mini .value .cur,
.inbodas-mi-cuenta .cheque-amount,
.inbodas-mi-cuenta .cheque-amount .cur {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
}

/* Símbolo € coral — patrón editorial unificado en todos los importes */
.inbodas-public .cur,
.inbodas-mi-cuenta .cur,
.inbodas-public .portal-kpi-cur {
  color: var(--olive-deep) !important;
}

/* SIN CURSIVAS — orden global del usuario. Todos los elementos del
 * plugin renderizan en normal, anulando font-style: italic hardcodeado
 * en cualquier regla específica. */
.inbodas-public, .inbodas-public *,
.inbodas-mi-cuenta, .inbodas-mi-cuenta * {
  font-style: normal !important;
}

/* Fondo cálido global.
 *
 * IMPORTANTE: el gradiente NO va en `body` con `background-attachment:fixed`
 * porque eso obliga al browser a repintar el viewport entero en cada frame
 * de scroll → causa sub-pixel rendering en el texto y se ve borroso al
 * hacer scroll. En su lugar lo metemos en un pseudo `::before` con
 * `position:fixed` que vive en su propia capa GPU detrás del contenido,
 * sin tocar el flujo del body. Resultado: gradiente fijo + texto nítido. */
html, body.brx-body {
  background: #FDFAF1 !important;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  line-height: 1.4;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}
body.brx-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, oklch(0.955 0.040 60) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 90% 10%, oklch(0.95 0.035 75) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 5% 85%, oklch(0.94 0.028 95) 0%, transparent 65%),
    linear-gradient(180deg, #F4ECDB 0%, #F8F1E0 35%, #FBF6EA 65%, #FDFAF1 100%);
}

/* font-smoothing no se hereda por defecto y Bricks aplica sus propias
 * reglas en header/footer/sections — forzamos a TODOS los descendientes
 * (incluyendo ::before/::after y pseudo-elementos del tema) para que el
 * rendering tipográfico sea consistente en toda la página, incluyendo
 * header/footer globales de Bricks y formularios WC/Stripe. */
html *,
html *::before,
html *::after {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Header y footer Bricks — forzamos font-smoothing y eliminamos
 * will-change/filter colgado (Bricks lazy-load deja layers GPU activos
 * que provocan sub-pixel rendering = blur). NO tocamos transform en
 * descendientes porque algunos micro-acentos (flecha del Mi cuenta link)
 * dependen de ello. */
#brx-header, #brx-header *,
#brx-footer, #brx-footer *,
.ib-header, .ib-header *,
.ib-footer, .ib-footer *,
.ib-home-outro, .ib-home-outro * {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  filter: none !important;
  will-change: auto !important;
  backface-visibility: visible !important;
}

/* Footer y eyebrow del header — Inter 400 a 13-14px se ve "thin" en
 * fondos cremas y aparenta blur; subimos a 500 (pesos cargados desde
 * Google Fonts: 400, 500, 600). */
.ib-footer, .ib-footer p, .ib-footer a, .ib-footer span,
.ib-footer-tagline, .ib-footer-cols a, .ib-footer-copy,
.ib-footer-legal-links a {
  font-weight: 500 !important;
}

/* Las secciones .brxe-section salen del compositing GPU una vez cargadas. */
.brx-body .brxe-section,
.brx-body .brxe-shortcode {
  transform: none;
  will-change: auto;
}

/* Botones — text-rendering nítido garantizado, vence a Bricks. */
.inbodas-public .cta,
.inbodas-mi-cuenta .cta,
.portal-export, .portal-back, .portal-codigo-copy,
.novios-logout, .ib-account-link, .ib-nav-link {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
}

/* Bricks suele aplicar bg blanco a las secciones del header/footer global —
 * forzamos transparencia para que el gradiente del body se vea a través. */
.brx-body #brx-header,
.brx-body #brx-footer,
.brx-body #brx-content,
.brx-body #brx-header .brxe-section,
.brx-body #brx-footer .brxe-section,
.brx-body #brx-content > .brxe-section,
.brx-body .brxe-shortcode {
  background: transparent !important;
}

/* Wrapper común — usado por todos los shortcodes de inbodas. Mantiene el
 * grain sutil pero hereda el fondo del body (transparente). */
.inbodas-public,
.inbodas-mi-cuenta {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  line-height: 1.4;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  position: relative;
  background: transparent;
}
/* Grain SVG eliminado por petición — el fondo aurora (back-07.jpg)
 * ya aporta textura suficiente; el grain superpuesto restaba claridad
 * a las tarjetas liquid glass. */
.inbodas-public > *,
.inbodas-mi-cuenta > * { position: relative; z-index: 2; }

/* ============================================================
 *  BRAND — "INBodas" con las dos primeras letras (IN) en coral.
 *  Helper: Inbodas\ChequesBodas\Util\Brand::html()
 * ============================================================ */
.ib-brand {
  white-space: nowrap;
}
.ib-brand-in {
  color: var(--olive-deep);
}

/* ============================================================
 *  PORTAL-BG — fondo lila full-bleed usado por portal, mi cuenta y
 *  panel novios autenticado. Vive aquí (no en portal.css) para que
 *  esté disponible aunque no se cargue el CSS específico del portal.
 *  Doble selector para ganar a Bricks (.brx-body).
 * ============================================================ */
/* Fondo del portal usando pseudo-elemento `::after` fixed en lugar de
 * `background-attachment: fixed` (no soportado en iOS Safari — la
 * imagen se mueve con el scroll). El ::after fixed sí se respeta en
 * iOS, así que el fondo se ve idéntico en iPhone y desktop.
 *
 * Desktop: `back-18-scaled.jpg` (paisaje).
 * Mobile (≤720px): `black-18-mob-scaled.jpg` (retrato).
 *
 * Body con bg transparente para no tapar el ::after; color de fallback
 * en el html via `:has()` por si la imagen tarda en cargar. */
body.inbodas-portal-bg,
body.brx-body.inbodas-portal-bg,
html body.inbodas-portal-bg {
  background-image: none !important;
  background-color: transparent !important;
  background-attachment: scroll !important;
}
html:has(body.inbodas-portal-bg) { background-color: #FAFAFA; }
body.inbodas-portal-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('https://cheques.inbodas.com/wp-content/uploads/2026/06/back-18-scaled.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 720px) {
  body.inbodas-portal-bg::after {
    background-image: url('https://cheques.inbodas.com/wp-content/uploads/2026/06/black-18-mob-scaled.jpg');
  }
}
/* Apagamos el gradient cálido global del ::before del body cuando
 * usamos el fondo de portal — la imagen ya aporta su propio tono. */
body.inbodas-portal-bg::before,
body.brx-body.inbodas-portal-bg::before {
  display: none !important;
}

/* ============================================================
 *  PORTAL CANVAS — wrapper liquid glass usado por portal, mi cuenta y
 *  panel novios. Es un border+shadow decorativo sin bg ni backdrop-filter
 *  para que las cards interiores conserven su propio glass.
 * ============================================================ */
.inbodas-public .portal-canvas,
.inbodas-mi-cuenta .portal-canvas {
  position: relative;
  margin: 28px 0 24px;
  padding: 32px 32px 36px;
  border-radius: 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 12px 24px -8px rgba(15, 12, 8, 0.05),
    0 32px 64px -20px rgba(15, 12, 8, 0.08);
}
@media (max-width: 720px) {
  .inbodas-public .portal-canvas,
  .inbodas-mi-cuenta .portal-canvas {
    margin: 12px 0 24px;
    padding: 14px;
    border-radius: 20px;
  }
}

/* Tipografía utilities — antes apuntaban a EB Garamond; ahora todo el
 * plugin usa Mona Sans (decisión 2026-06-08). Mantenemos las clases por
 * compatibilidad de HTML legacy pero el render es sans. */
.inbodas-public .serif,        .inbodas-mi-cuenta .serif        { font-family: var(--font-display); }
.inbodas-public .serif-italic, .inbodas-mi-cuenta .serif-italic { font-family: var(--font-display); }
.inbodas-public .script,       .inbodas-mi-cuenta .script       { font-family: 'Parisienne', cursive; font-weight: 400; }
.inbodas-public .mono,         .inbodas-mi-cuenta .mono         { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.inbodas-public .display {
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: -0.018em; line-height: 1.04;
}
.inbodas-public .display em,
.inbodas-mi-cuenta .display em {
  font-style: italic; font-weight: 600; color: var(--olive-deep);
}

/* ============================================================
 *  EYEBROW — REGLA GLOBAL ÚNICA
 *  Patrón editorial usado en toda la web. Todas las variantes
 *  (.eyebrow, .ib-footer-eyebrow, .ib-login-eyebrow) heredan
 *  EXACTAMENTE el mismo estilo: Inter 500 / 10px / 0.3em / coral
 *  + dos dots coral flanqueando el texto via pseudo-elementos.
 *  Las reglas específicas SOLO añaden overrides contextuales
 *  (margin, padding), nunca tocan font/color/dots.
 * ============================================================ */
.inbodas-public .eyebrow,
.inbodas-mi-cuenta .eyebrow,
.ib-modal .ib-modal-eyebrow,
.ib-footer-eyebrow,
.ib-login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--olive-deep);
}
.inbodas-public .eyebrow::before,
.inbodas-public .eyebrow::after,
.inbodas-mi-cuenta .eyebrow::before,
.inbodas-mi-cuenta .eyebrow::after,
.ib-modal .ib-modal-eyebrow::before,
.ib-modal .ib-modal-eyebrow::after,
.ib-footer-eyebrow::before,
.ib-footer-eyebrow::after,
.ib-login-eyebrow::before,
.ib-login-eyebrow::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--olive);
  opacity: 0.7;
  flex-shrink: 0;
}
/* Variantes legacy (.eyebrow-soft, .eyebrow-mute) — sin override de color.
 * Las clases se conservan por compatibilidad. */

/* ============================================================
 *  Autofill: anulamos el fondo amarillo de Chrome / Edge al
 *  autocompletar inputs. El truco estándar:
 *    - `transition: background-color 9999s` impide que el cambio
 *      del bg amarillo se "complete" visualmente.
 *    - `box-shadow inset` enorme tapa el bg con un color propio.
 *    - `-webkit-text-fill-color` fuerza el color del texto.
 *  Aplica a TODOS los inputs del plugin (login, gate, checkout,
 *  modal Mi cuenta, etc.). Safari iOS también lo respeta. */
.inbodas-public input:-webkit-autofill,
.inbodas-public input:-webkit-autofill:hover,
.inbodas-public input:-webkit-autofill:focus,
.inbodas-public input:-webkit-autofill:active,
.inbodas-public textarea:-webkit-autofill,
.inbodas-public select:-webkit-autofill,
.inbodas-mi-cuenta input:-webkit-autofill,
body.ib-login-page input:-webkit-autofill,
body.ib-login-page input:-webkit-autofill:hover,
body.ib-login-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
          box-shadow: 0 0 0 1000px transparent inset !important;
  caret-color: var(--olive);
  transition: background-color 9999s ease-in-out 0s,
              color 9999s ease-in-out 0s !important;
}

/* Container utility */
.inbodas-public .container,
.inbodas-mi-cuenta .container {
  max-width: 1320px; margin: 0 auto;
  padding-left: 24px; padding-right: 24px;
}
.inbodas-public .container.tight,
.inbodas-mi-cuenta .container.tight { max-width: 820px; }
@media (min-width: 768px) {
  .inbodas-public .container, .inbodas-mi-cuenta .container { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1024px) {
  .inbodas-public .container, .inbodas-mi-cuenta .container { padding-left: 56px; padding-right: 56px; }
}

/* CTA editorial — mismo patrón que .portal-export. Pill coral sólida,
 * highlight inset top + sombra coral difusa. Estilo único para todos
 * los botones de acción del plugin. */
.inbodas-public .cta,
.inbodas-mi-cuenta .cta,
.inbodas-mi-cuenta-modal-backdrop .cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--olive);
  color: var(--paper) !important;
  border: 1px solid var(--olive);
  padding: 12px 24px;
  border-radius: 50px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 22px -10px rgba(239, 68, 77, 0.45);
  transition: background .25s ease, transform .25s ease, box-shadow .35s ease;
}
.inbodas-public .cta:hover,
.inbodas-mi-cuenta .cta:hover,
.inbodas-mi-cuenta-modal-backdrop .cta:hover {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 16px 32px -12px rgba(239, 68, 77, 0.55);
}

/* CTA secundaria — outline coral sobre paper */
.inbodas-public .cta.cta-ghost,
.inbodas-mi-cuenta .cta.cta-ghost,
.inbodas-mi-cuenta-modal-backdrop .cta.cta-ghost {
  background: transparent; color: var(--olive);
  border: 1px solid var(--olive);
}
.inbodas-public .cta.cta-ghost:hover,
.inbodas-mi-cuenta .cta.cta-ghost:hover,
.inbodas-mi-cuenta-modal-backdrop .cta.cta-ghost:hover {
  /* Hover sólido coral-deep, no el primary (que ya lo usa .cta).
   * Mismo criterio que portal.css. */
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  color: var(--paper);
}

/* Variante terracota — escala coral profunda. Se usa cuando el botón
 * comparte rol primario con un .cta coral en la misma pantalla y
 * necesitamos separarlos cromáticamente (ej. Descargar cheque + Enviar
 * por WhatsApp coexistiendo en la página TY). */
.inbodas-public .cta.cta-clay,
.inbodas-mi-cuenta .cta.cta-clay,
.inbodas-mi-cuenta-modal-backdrop .cta.cta-clay {
  background: #C25450;
  border-color: #C25450;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 8px 22px -10px rgba(194, 84, 80, 0.5);
}
.inbodas-public .cta.cta-clay:hover,
.inbodas-mi-cuenta .cta.cta-clay:hover,
.inbodas-mi-cuenta-modal-backdrop .cta.cta-clay:hover {
  background: #A8443F;
  border-color: #A8443F;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 14px 30px -12px rgba(194, 84, 80, 0.65);
}
.inbodas-public .cta:disabled,
.inbodas-public .cta[aria-disabled="true"],
.inbodas-mi-cuenta .cta:disabled,
.inbodas-mi-cuenta .cta[aria-disabled="true"],
.inbodas-mi-cuenta-modal-backdrop .cta:disabled,
.inbodas-mi-cuenta-modal-backdrop .cta[aria-disabled="true"] {
  opacity: 0.4; cursor: not-allowed;
}
/* Shimmer eliminado — .cta usa el mismo hover que .portal-export:
 * cambio de bg a olive-deep + lift translateY + sombra coral. */
.inbodas-public .cta-arrow,
.inbodas-mi-cuenta .cta-arrow,
.inbodas-mi-cuenta-modal-backdrop .cta-arrow {
  font-family: 'Inter', sans-serif; font-style: italic;
  font-size: 17px; letter-spacing: 0; text-transform: none;
  transform: translateY(-1px);
}

/* SSL pill */
.ssl-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--inksoft); font-weight: 500;
}
.ssl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--olive); }

/* Spinner */
.inbodas-public .spinner,
.inbodas-mi-cuenta .spinner {
  width: 14px; height: 14px;
  border: 1.5px solid rgba(253,252,250,0.35);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: inbSpin .8s linear infinite;
}
@keyframes inbSpin { to { transform: rotate(360deg); } }

/* Entry animations — NO usar translate3d/will-change: activan GPU compositing
 * y dejan el texto en sub-pixel rendering (blur perceptible incluso después
 * de terminar la animación si el browser conserva el layer). translateY plano
 * fuerza CPU rendering nítido. */
@keyframes inbMRise     { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes inbMRiseSlow { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes inbMFade     { from { opacity: 0; } to { opacity: 1; } }
/* Animaciones de entrada DESACTIVADAS — con cache rápido las transiciones
 * se sentían como retardo. Las clases .m-fade y .m-stagger se conservan
 * por compatibilidad pero no aplican animación. */
.inbodas-public .m-fade,
.inbodas-mi-cuenta .m-fade,
.inbodas-public .m-stagger > *,
.inbodas-mi-cuenta .m-stagger > * {
  opacity: 1 !important;
  animation: none !important;
}

/* Selection color */
.inbodas-public ::selection,
.inbodas-mi-cuenta ::selection {
  background: rgba(239, 68, 77, 0.25); color: var(--olive-deep);
}

/* Cuando la página está controlada por Bricks (section full-width), el
 * wrapper hereda ancho completo sin trucos. Si está embebido en Gutenberg
 * el body o el container del tema seguirá restringiendo — pero damos
 * safety nets para evitar scroll horizontal. */
html:has(.inbodas-public), html:has(.inbodas-mi-cuenta),
body:has(.inbodas-public), body:has(.inbodas-mi-cuenta) {
  overflow-x: hidden;
}
.inbodas-public, .inbodas-mi-cuenta {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Ocultar h1 nativo del tema (entry/post-title) si la página contiene
 * uno de nuestros wrappers. */
body:has(.inbodas-public)   .brxe-post-title,
body:has(.inbodas-public)   h1.entry-title,
body:has(.inbodas-public)   header.entry-header,
body:has(.inbodas-mi-cuenta) .brxe-post-title,
body:has(.inbodas-mi-cuenta) h1.entry-title,
body:has(.inbodas-mi-cuenta) header.entry-header { display: none !important; }

/* ============================================================
 *  Header liquid glass · pill flotante con iconos
 *  Inspirado en la barra de navegación de iOS/macOS:
 *  fondo translúcido con backdrop blur+saturate, sombra suave,
 *  borde inset clarito para simular cristal. Posición fixed top
 *  centrada, con margen lateral generoso. Compatible con scroll
 *  (background-attachment no aplica; el blur se actualiza solo).
 * ============================================================ */
.ib-header {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: center;
  pointer-events: none;
  padding: 0 16px;
  /* Transición para auto-hide on scroll down / show on scroll up */
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
@media (min-width: 960px) {
  .ib-header { top: 16px; }
}
/* Auto-hide: scroll hacia abajo oculta el header desplazándolo
 * por encima del viewport. Scroll hacia arriba lo trae de vuelta.
 * 150% deja margen para que la sombra del pill también se vaya. */
.ib-header.is-hidden {
  transform: translateY(-150%);
}
@media (prefers-reduced-motion: reduce) {
  .ib-header { transition: none; }
}
.ib-header-inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  width: 100%;
  /* Alineado al ancho real del canvas visible (1208px medido). */
  max-width: 1208px;
  padding: 8px 10px 8px 16px;
  border-radius: 999px;

  /* Liquid glass ligero — patrón unificado del sistema. */
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.42);

  /* Highlight inset superior + sombra suave para flotar */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 8px 28px -6px rgba(15, 12, 8, 0.10),
    0 16px 40px -12px rgba(15, 12, 8, 0.08);
}
/* Fallback para browsers sin backdrop-filter: fondo algo más sólido */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ib-header-inner {
    background: rgba(253, 250, 244, 0.92);
  }
}

/* Logo a la izquierda dentro del pill */
.ib-logo {
  display: inline-flex; align-items: center;
  padding: 4px 8px;
  text-decoration: none;
  transition: filter .2s ease;
  flex-shrink: 0;
}
.ib-logo:hover { filter: brightness(1.08); }
.ib-logo img {
  display: block;
  height: 28px; width: auto;
  max-width: 140px;
}

/* Nav central — links pill clicables con icono + label.
 * El fondo del activo lo aporta un elemento flotante .ib-nav-pill
 * gestionado por JS, que se desplaza entre items como un switcher. */
.ib-nav {
  display: none;
  align-items: center;
  gap: 2px;
  position: relative;
}
/* Nav del header: aparece junto con la rejilla principal del contenido
 * (768px) en vez de a 960px, para evitar el gap visual de tablet donde
 * el contenido ya está desktop pero el nav seguía siendo hamburguesa. */
@media (min-width: 768px) {
  .ib-nav { display: inline-flex; }
}

/* Pill flotante: capa absoluta detrás de los links. Invisible por
 * defecto — el bg del item activo lo pinta directamente .is-active.
 * El pill SOLO se muestra durante el viaje de un click (animación
 * switcher), replicando el bg que acabamos de quitar del item viejo
 * y desplazándose al destino. Tono coral coherente con la paleta
 * accent del menú (igual que el drawer móvil). */
.ib-nav-pill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: rgba(239, 68, 77, 0.08);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translateX(0);
  transition:
    transform .22s cubic-bezier(.2,.7,.3,1),
    width .22s cubic-bezier(.2,.7,.3,1),
    background .2s ease;
}

/* Tinte del pill cuando se desplaza sobre el botón Salir: highlight
 * rojo claro coherente con el color del icono. */
.ib-nav-pill.is-on-logout {
  background: rgba(239, 68, 77, 0.14);
}

.ib-nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--inksoft);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s ease;
}
.ib-nav-link:hover { color: var(--olive-deep); }
.ib-nav-link.is-active { color: var(--olive-deep); }

/* Hover bg como ::before con transición de OPACITY. Pseudo-elemento
 * positioned con z-index -1: queda detrás del contenido del link
 * pero, dentro del stacking context, se pinta en su capa concreta.
 * Tono coral coherente con el drawer móvil. */
.ib-nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(239, 68, 77, 0.05);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity .18s ease;
}
.ib-nav-link:hover:not(.is-active)::before { opacity: 1; }

/* Active bg como ::after — pintado DESPUÉS del ::before en el orden
 * de stacking → cubre al ::before del hover. Sin opacity transition,
 * el .is-active aparece/desaparece INSTANT al añadirse/quitarse la
 * clase, evitando el "fade del pill anterior" durante el switcher. */
.ib-nav-link.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(239, 68, 77, 0.08);
  pointer-events: none;
  z-index: -1;
}
.ib-nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.ib-nav-icon svg {
  width: 100%; height: 100%; display: block;
}

/* Lado derecho — Mi cuenta / Portal / Acceder + Salir.
 * Igual que el nav central tiene su propio pill flotante que se desliza
 * al item activo en cada click. Todos los items son visualmente neutros
 * salvo Salir, que mantiene su tinte rojo de hover. */
.ib-header-right {
  display: none;
  align-items: center;
  gap: 2px;
  position: relative;
}
@media (min-width: 768px) {
  .ib-header-right { display: inline-flex; }
}

/* Portal / Acceder / Mi cuenta como ítem normal — sin destaque visual
 * propio. El pill switcher es quien marca la página activa. */
.ib-account-primary { background: transparent; }

/* Salir — más discreto, hover tinte rojo claro coherente con icono. */
.ib-account-logout {
  color: var(--inkmute);
}
.ib-account-logout:hover:not(.is-active) {
  color: var(--olive-deep);
}
.ib-account-logout::before {
  background: rgba(239, 68, 77, 0.10);
}

/* Mi cuenta secundario (cuando hay Portal) — sin fondo, color discreto */
.ib-account-side {
  color: var(--inksoft);
}

/* ============================================================
 *  Dropdown "Cuenta" — agrupa Mi evento / Mi cuenta / Portal / Salir
 *  en un solo trigger en desktop. En mobile no aplica (el menú vive
 *  en el ib-mobile-drawer).
 * ============================================================ */
.ib-account-dropdown {
  position: relative;
  display: inline-flex;
}
.ib-account-trigger {
  border: 0;
  background: transparent;
  cursor: pointer;
  /* Hereda padding/font/etc de .ib-nav-link */
}
.ib-account-trigger-chev {
  display: inline-flex;
  margin-left: 4px;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.ib-account-trigger-chev svg { width: 10px; height: 7px; }
.ib-account-dropdown.is-open .ib-account-trigger-chev {
  transform: rotate(180deg);
}

/* Menú liquid glass colgado del trigger. Mismo lenguaje visual que
 * el header pill y el mobile drawer. */
.ib-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: saturate(200%) blur(30px);
          backdrop-filter: saturate(200%) blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 12px 32px -8px rgba(15, 12, 8, 0.18),
    0 4px 12px -4px rgba(15, 12, 8, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 110;
  animation: ib-account-menu-in .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes ib-account-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ib-account-menu[hidden] { display: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ib-account-menu { background: rgba(253, 250, 244, 0.96); }
}
.ib-account-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background .18s ease, color .18s ease;
}
.ib-account-menu-item:hover {
  background: rgba(239, 68, 77, 0.08);
  color: var(--olive-deep);
}
.ib-account-menu-item.is-active {
  background: rgba(239, 68, 77, 0.10);
  color: var(--olive-deep);
}
.ib-account-menu-item.is-logout {
  color: var(--inksoft);
}
.ib-account-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  color: inherit;
}
.ib-account-menu-icon svg { width: 16px; height: 16px; }
.ib-account-menu-sep {
  display: block;
  height: 1px;
  margin: 4px 8px;
  background: linear-gradient(to right, transparent, rgba(15, 12, 8, 0.12) 30%, rgba(15, 12, 8, 0.12) 70%, transparent);
}

/* Burger móvil */
.ib-header-burger {
  display: inline-flex; flex-direction: column; gap: 4px;
  width: 38px; height: 38px;
  padding: 0; margin: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease;
  flex-shrink: 0;
}
.ib-header-burger:hover { background: rgba(15, 12, 8, 0.06); }
.ib-header-burger span {
  display: block; width: 16px; height: 1.6px;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.ib-header-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.ib-header-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ib-header-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
@media (min-width: 768px) {
  .ib-header-burger { display: none; }
}

/* ============================================================
 *  Drawer móvil — liquid glass pill expandido
 *  Premium: padding generoso, iconos a la izq, secciones agrupadas
 *  con eyebrow micro, indicador activo de barra coral lateral,
 *  hover y stagger animado al abrir.
 * ============================================================ */
.ib-mobile-drawer {
  position: fixed;
  /* Header está a top:8px y mide ~58px → drawer arranca a 80px del
   * viewport para dejar gap de ~14px entre el pill y el drawer. */
  top: calc(80px + env(safe-area-inset-top));
  /* Mismo padding lateral que el header (16px) — antes 12px lo dejaba
   * más ancho que el pill superior. */
  left: 16px; right: 16px;
  max-width: 1208px;
  margin: 0 auto;
  /* Liquid glass ligero — mismo lenguaje unificado que header + footer. */
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 16px 48px -8px rgba(15, 12, 8, 0.16),
    0 4px 12px -4px rgba(15, 12, 8, 0.08);
  opacity: 0; transform: translateY(-12px) scale(.98);
  transform-origin: top center;
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.2,.75,.3,1);
  pointer-events: none;
  z-index: 99;
  overflow: hidden;
}
/* Fallback sin backdrop-filter — sale más sólido para legibilidad */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ib-mobile-drawer { background: rgba(253, 250, 244, 0.94); }
}
.ib-mobile-drawer.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ib-mobile-nav {
  display: flex; flex-direction: column;
  padding: 10px 12px 14px;
  gap: 2px;
}

/* Eyebrow de sección — micro-label en uppercase con tracking ancho,
 * flanqueado por dos líneas hairline (estilo editorial "— EXPLORAR —").
 * Coherente con los arcos decorativos de puntos del hero. Las líneas
 * son gradient para desvanecerse hacia los bordes del drawer. */
.ib-mobile-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  margin: 22px 0 6px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--inkmute);
}
.ib-mobile-section:first-child { margin-top: 8px; }
.ib-mobile-section::before,
.ib-mobile-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(15, 12, 8, 0.12) 40%,
    rgba(15, 12, 8, 0.12) 60%,
    transparent
  );
  opacity: .9;
}
.ib-mobile-section::after {
  background: linear-gradient(
    to left,
    transparent,
    rgba(15, 12, 8, 0.12) 40%,
    rgba(15, 12, 8, 0.12) 60%,
    transparent
  );
}

/* Item — pill con icono, label, chevron. Hover sutil, active con
 * fondo coral suave + barra lateral 3px + texto coral. */
.ib-mobile-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  isolation: isolate;
  /* Desactiva el overlay gris nativo de iOS/Android al hacer tap.
   * El feedback visual ya lo dan los estilos :hover/:active propios
   * en coral, coherentes con la paleta del menú. */
  -webkit-tap-highlight-color: transparent;
  transition:
    background .22s ease,
    color .22s ease,
    transform .25s cubic-bezier(.2,.7,.3,1);
}
.ib-mobile-link:active { transform: scale(.985); }
/* Hover/tap usa el mismo tono coral que el active, solo más suave
 * (0.05 vs 0.08). Así el feedback al tocar es coherente con el estado
 * activo final y no introduce un gris ajeno a la paleta del menú. */
.ib-mobile-link:hover,
.ib-mobile-link:focus-visible {
  background: rgba(239, 68, 77, 0.05);
  color: var(--olive-deep);
  outline: none;
}
.ib-mobile-link.is-active {
  background: rgba(239, 68, 77, 0.08);
  color: var(--olive-deep);
}
.ib-mobile-link.is-active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  background: var(--olive);
  border-radius: 0 3px 3px 0;
}

.ib-mobile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--inksoft);
  transition: color .22s ease;
}
.ib-mobile-icon svg { width: 100%; height: 100%; display: block; }
.ib-mobile-link:hover .ib-mobile-icon,
.ib-mobile-link.is-active .ib-mobile-icon { color: var(--olive); }

.ib-mobile-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Logout — variante discreta con tinte rojo en hover */
.ib-mobile-link.is-logout {
  color: var(--inkmute);
  margin-top: 4px;
}
.ib-mobile-link.is-logout:hover {
  background: rgba(239, 68, 77, 0.08);
  color: var(--olive-deep);
}
.ib-mobile-link.is-logout .ib-mobile-icon { color: var(--inkmute); }
.ib-mobile-link.is-logout:hover .ib-mobile-icon { color: var(--olive); }

/* Footer del drawer — SSL pill */
.ib-mobile-footer {
  margin-top: 14px;
  padding: 14px 4px 4px;
  border-top: 1px solid rgba(15, 12, 8, 0.06);
  display: flex; justify-content: center;
}
.ib-mobile-ssl {
  font-size: 9.5px;
  letter-spacing: 0.3em;
  color: var(--inkmute);
}

/* Stagger fade-in de items al abrir el drawer.
 * Los items entran con un delay creciente, sutil y elegante. */
.ib-mobile-drawer .ib-mobile-section,
.ib-mobile-drawer .ib-mobile-link,
.ib-mobile-drawer .ib-mobile-footer {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.ib-mobile-drawer.is-open .ib-mobile-section,
.ib-mobile-drawer.is-open .ib-mobile-link,
.ib-mobile-drawer.is-open .ib-mobile-footer {
  opacity: 1;
  transform: translateY(0);
}
.ib-mobile-drawer.is-open > nav > *:nth-child(1)  { transition-delay: .04s; }
.ib-mobile-drawer.is-open > nav > *:nth-child(2)  { transition-delay: .07s; }
.ib-mobile-drawer.is-open > nav > *:nth-child(3)  { transition-delay: .10s; }
.ib-mobile-drawer.is-open > nav > *:nth-child(4)  { transition-delay: .13s; }
.ib-mobile-drawer.is-open > nav > *:nth-child(5)  { transition-delay: .16s; }
.ib-mobile-drawer.is-open > nav > *:nth-child(6)  { transition-delay: .19s; }
.ib-mobile-drawer.is-open > nav > *:nth-child(7)  { transition-delay: .22s; }
.ib-mobile-drawer.is-open > nav > *:nth-child(8)  { transition-delay: .25s; }
.ib-mobile-drawer.is-open > nav > *:nth-child(9)  { transition-delay: .28s; }
.ib-mobile-drawer.is-open > nav > *:nth-child(10) { transition-delay: .31s; }

@media (prefers-reduced-motion: reduce) {
  .ib-mobile-drawer,
  .ib-mobile-drawer .ib-mobile-section,
  .ib-mobile-drawer .ib-mobile-link,
  .ib-mobile-drawer .ib-mobile-footer {
    transition: opacity .15s ease !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}
body.ib-no-scroll { overflow: hidden; }

/* Compatibilidad — clases viejas que ya no usamos pero pueden estar
 * cacheadas en algún HTML antiguo del browser. Las dejamos neutras. */
.ib-header-eyebrow, .ib-header-eyebrow-inner,
.ib-header-eyebrow-decor, .ib-header-eyebrow-text, .ib-header-eyebrow-ssl,
.ib-account-divider, .ib-account-italic, .ib-account-name,
.ib-account-arrow, .ib-account-secondary, .ib-nav-sep, .ib-nav-italic,
.ib-account-link, .ib-header-account, .ib-header-ssl-mobile, .ib-header-link {
  display: none;
}

/* Empujamos el contenido del body para que el header flotante no tape el inicio.
 * Sumamos el safe-area-inset-top para iOS con notch/Dynamic Island. */
body.brx-body {
  padding-top: calc(72px + env(safe-area-inset-top));
}
@media (min-width: 960px) {
  body.brx-body { padding-top: 88px; }
}
/* Excepto en login/recuperar/novios gate (sin header) o en la Home,
 * donde el header pill flota sobre el hero edge-to-edge. */
body.ib-login-page,
body.home-page-bg { padding-top: 0 !important; }

/* ============================================================
 *  Outro emocional de Home (.ib-home-outro)
 *  Bloque "Cada cheque es un gesto que se recuerda" + contacto.
 *  Específico de Home — NO va en el footer global.
 * ============================================================ */
.ib-home-outro {
  position: relative; z-index: 5;
  padding: 64px 0 56px;
  border-top: 1px solid var(--line);
  margin-top: 80px;
}
@media (min-width: 768px) {
  .ib-home-outro { padding: 96px 0 80px; margin-top: 112px; }
}
.ib-home-outro-inner {
  max-width: 1320px; margin: 0 auto;
  padding-left: 24px; padding-right: 24px;
  display: grid; grid-template-columns: 1fr; gap: 40px;
  align-items: end;
}
@media (min-width: 768px) {
  .ib-home-outro-inner {
    padding-left: 40px; padding-right: 40px;
    grid-template-columns: 7fr 5fr; gap: 48px;
  }
}
@media (min-width: 1024px) {
  .ib-home-outro-inner { padding-left: 56px; padding-right: 56px; }
}
.ib-home-outro-quote {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); font-weight: 400; margin: 0;
}
.ib-home-outro-quote em {
  font-style: italic; color: var(--olive-deep); font-weight: 600;
}
.ib-home-outro-contact {
  display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 768px) {
  .ib-home-outro-contact { align-items: flex-end; text-align: right; }
}
.ib-home-outro-mail {
  font-size: 22px; color: var(--ink); letter-spacing: 0.005em;
  text-decoration: none; transition: opacity .2s ease;
}
.ib-home-outro-mail:hover { color: var(--olive-deep); }
.ib-home-outro-phone {
  font-size: 17px; color: var(--inksoft); letter-spacing: 0.01em;
  text-decoration: none; transition: opacity .2s ease;
}
.ib-home-outro-phone:hover { color: var(--olive-deep); }
.ib-home-outro-hours {
  font-family: 'Inter', sans-serif; font-style: italic;
  font-size: 14px; color: var(--inkmute); margin: 0;
}

/* ============================================================
 *  Footer pill PLANO — coherente con la paleta del header pero
 *  visualmente diferenciado: sin sombra de elevación, sin glass
 *  blur, sin bordes inset blancos. Asentado sobre el papel con
 *  un border hairline coral y dividers verticales internos que
 *  estructuran las 3 zonas (logo | nav | email).
 * ============================================================ */
.ib-footer {
  position: relative;
  z-index: 10;
  margin-top: 96px;
  padding: 56px 0 24px;
}
@media (min-width: 768px) {
  .ib-footer { margin-top: 128px; padding: 80px 0 32px; }
}

/* Slogan editorial con dots decorativos en el eyebrow — toque premium */
.ib-footer-hero {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .ib-footer-hero { margin-bottom: 56px; }
}
/* .ib-footer-eyebrow hereda TODO el patrón de la regla global eyebrow.
 * Aquí solo añadimos el margen contextual del footer. */
.ib-footer-eyebrow { margin-bottom: 18px; }
.ib-footer-slogan {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
  margin: 0 auto;
  letter-spacing: -0.015em;
  max-width: 620px;
}
.ib-footer-slogan em {
  font-style: italic;
  font-weight: 600;
  color: var(--olive-deep);
}
@media (min-width: 640px) {
  .ib-footer-slogan { font-size: 34px; }
}

/* Tarjeta editorial rectangular — forma deliberadamente distinta
 * del pill del header (border-radius pequeño, no 999px). Marcas
 * decorativas en las 4 esquinas estilo carta antigua/invitación. */
.ib-footer-card-wrap {
  padding: 0 16px;
  margin-bottom: 28px;
}
.ib-footer-card {
  position: relative;
  /* Mobile-first: stack vertical centrado con bloques bien separados.
   * En ≥900px pasamos a fila horizontal espaciada. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* Mismo max-width que .ib-header-inner para alinear con el canvas. */
  max-width: 1208px;
  margin: 0 auto;
  padding: 28px 24px;
  border-radius: 16px;
  /* Liquid glass coherente con el dashboard */
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.04),
    0 16px 32px -10px rgba(15, 12, 8, 0.10);
}
@media (min-width: 900px) {
  .ib-footer-card {
    flex-direction: row;
    justify-content: space-between;
    gap: 14px 36px;
    padding: 22px 40px;
  }
}

/* Puntos coral en las 4 esquinas de la carta — toque editorial premium
 * que evoca el sello de una invitación de boda. */
.ib-footer-corner {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--olive);
  opacity: 0.85;
}
.ib-footer-corner-tl { top: 12px; left: 12px; }
.ib-footer-corner-tr { top: 12px; right: 12px; }
.ib-footer-corner-bl { bottom: 12px; left: 12px; }
.ib-footer-corner-br { bottom: 12px; right: 12px; }

/* Logo a la izquierda */
.ib-footer-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .22s ease;
}
.ib-footer-logo:hover { opacity: 0.75; }
.ib-footer-logo img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 110px;
}

/* Nav inline — links discretos sin pill bg, solo cambio de color en hover.
 * En mobile el gap se reduce para que los 4 links quepan cómodos en 2
 * filas simétricas sin parecer una columna asimétrica. */
.ib-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 10px;
  column-gap: 18px;
}
@media (min-width: 900px) {
  .ib-footer-nav { column-gap: 22px; }
}
.ib-footer-nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--inksoft);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s ease;
}
.ib-footer-nav-link:hover { color: var(--olive-deep); }
.ib-footer-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--olive-deep);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.ib-footer-nav-link:hover::after { transform: scaleX(1); }

/* Email — link inline con icono + underline animado (no pill coral
 * sólido para diferenciarlo del CTA del header) */
.ib-footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s ease;
}
.ib-footer-mail-icon {
  display: inline-flex;
  width: 15px; height: 15px;
  color: var(--olive-deep);
}
.ib-footer-mail-icon svg { width: 100%; height: 100%; }
.ib-footer-mail-text {
  position: relative;
}
.ib-footer-mail-text::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--olive-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
}
.ib-footer-mail:hover { color: var(--olive-deep); }
.ib-footer-mail:hover .ib-footer-mail-text::after { transform: scaleX(1); }
/* El texto del email se muestra siempre — sin él el icono suelto en mobile
 * pierde contexto. */
.ib-footer-mail-text { display: inline; }

/* Legal compacto al pie */
.ib-footer-legal {
  padding: 0 24px;
}
.ib-footer-legal-inner {
  max-width: 1180px;
  margin: 0 auto;
  /* Mobile: pila vertical centrada (copy + legal links). En ≥640px
   * pasa a fila con space-between. Antes en mobile el `space-between`
   * sin wrap dejaba el copy a la izquierda y los links abajo en otra
   * fila — quedaba descentrado y poco jerárquico. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-top: 24px;
}
@media (min-width: 640px) {
  .ib-footer-legal-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}
.ib-footer-copy {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--inkmute);
  margin: 0;
}
.ib-footer-legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.ib-footer-legal-links a {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--inksoft);
  text-decoration: none;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s ease;
}
.ib-footer-legal-links a:hover { color: var(--olive-deep); }
.ib-footer-legal-links .sep {
  color: var(--inkmute);
  opacity: 0.45;
  font-size: 11px;
}

/* ============================================================
 *  Sistema modal `ib-modal-*`
 *  ------------------------------------------------------------
 *  Base compartida para todos los popups del plugin: editar
 *  mensaje (Mi cuenta), enviar código (Portal comerciales),
 *  y futuros. Mismo backdrop, mismo diálogo glass, mismas
 *  acciones — sin duplicar CSS por feature.
 *
 *  Markup mínimo:
 *    <div class="ib-modal" role="dialog" aria-modal="true">
 *      <div class="ib-modal-backdrop" data-ib-modal-close></div>
 *      <div class="ib-modal-dialog">
 *        <button class="ib-modal-close" data-ib-modal-close>×</button>
 *        <p class="ib-modal-eyebrow">…</p>
 *        <h2 class="ib-modal-title">…</h2>
 *        <p class="ib-modal-sub">…</p>
 *        <div class="ib-modal-warn">…</div>      (opcional)
 *        <div class="ib-modal-actions">
 *          <button class="ib-modal-btn ib-modal-btn--ghost">Cancelar</button>
 *          <button class="ib-modal-btn ib-modal-btn--primary">Confirmar</button>
 *        </div>
 *        <p class="ib-modal-feedback" hidden></p>
 *      </div>
 *    </div>
 * ============================================================ */
body.ib-modal-open { overflow: hidden; }

/* El atributo `hidden` debe ganar siempre. Algunas reglas con `display: flex/grid`
 * por defecto lo pisaban — caso típico en el portal y en Mi Cuenta. */
.inbodas-public [hidden],
.inbodas-mi-cuenta [hidden] { display: none !important; }

.ib-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ib-modal[hidden] { display: none; }

.ib-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 12, 8, 0.45);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  animation: ibModalBg .22s ease-out;
}
@keyframes ibModalBg { from { opacity: 0; } to { opacity: 1; } }

.ib-modal-dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  /* Glass aplicado en ::before para que descendientes con backdrop-filter
   * propio (ej. campos de input) no queden cancelados por el padre. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  padding: 30px 32px 26px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 24px 60px -20px rgba(15, 12, 8, 0.30);
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  animation: ibModalIn .22s cubic-bezier(.18, .9, .3, 1);
}
.ib-modal-dialog::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
          backdrop-filter: blur(40px) saturate(200%);
  z-index: -1;
  pointer-events: none;
}
.ib-modal-dialog > * { position: relative; }
@keyframes ibModalIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ib-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--inksoft);
  cursor: pointer; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.ib-modal-close:hover {
  background: rgba(15, 12, 8, 0.06);
  color: var(--ink);
}

/* Eyebrow del modal — reusa el patrón global eyebrow (dots coral) vía la
 * regla cláusulada al inicio de este archivo. */
.ib-modal-eyebrow { margin: 0 0 10px; }

.ib-modal-title {
  margin: 0 0 12px;
  font-family: var(--font-display), 'Inter', sans-serif;
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.ib-modal-title em,
.ib-modal-title .accent {
  font-style: normal;
  color: var(--olive-deep);
}

.ib-modal-sub {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.55;
  color: var(--inksoft);
}
.ib-modal-sub strong { color: var(--ink); font-weight: 500; }
.ib-modal-sub .mono,
.ib-modal-sub code {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  background: rgba(239, 68, 77, 0.08);
  border-radius: 6px;
  color: var(--olive-deep);
}

.ib-modal-warn {
  margin: 0 0 22px;
  padding: 12px 14px;
  background: rgba(239, 68, 77, 0.06);
  border: 1px solid rgba(239, 68, 77, 0.20);
  border-radius: 10px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--inksoft);
}
.ib-modal-warn-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--olive);
  color: var(--paper);
  border-radius: 999px;
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  margin-right: 8px;
}
.ib-modal-warn strong { color: var(--olive-deep); font-weight: 500; }

/* Filtros del modal "Filtros" — diseño premium liquid glass.
 * Cada filtro es una card individual con backdrop-filter, hairline blanco
 * inset y elevación coral en focus. Label eyebrow arriba en Inter coral;
 * valor en Mona Sans 17px abajo. Chevron coral grande a la derecha.
 * Grid 1 columna por defecto, 2 columnas a partir de 460px. */
.ib-modal-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 4px 0 24px;
}
@media (min-width: 460px) {
  .ib-modal-filters { grid-template-columns: 1fr 1fr; }
}
.ib-modal-filter {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px 14px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 18px -8px rgba(15, 12, 8, 0.06);
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, box-shadow .25s ease, transform .22s ease;
  min-width: 0;
}
.ib-modal-filter:hover {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(239, 68, 77, 0.28);
}
.ib-modal-filter:focus-within {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(239, 68, 77, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 12px 28px -10px rgba(239, 68, 77, 0.30);
}
.ib-modal-filter--has-value {
  background: rgba(239, 68, 77, 0.06);
  border-color: rgba(239, 68, 77, 0.35);
}
.ib-modal-filter-label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--olive-deep);
  opacity: 0.85;
  pointer-events: none;
}
/* Texto del valor seleccionado (display visible). NO captura clicks: el
 * select nativo va por encima, opacity 0, para que toda la card abra el
 * dropdown al pinchar en cualquier parte (incluido label o chevron). */
.ib-modal-filter-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--ink);
  pointer-events: none;
}
.ib-modal-filter-value-text {
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ib-modal-filter-value-chevron {
  flex-shrink: 0;
  width: 12px; height: 8px;
  color: #B73C42;
}
.ib-modal-filter:focus-within .ib-modal-filter-value { color: var(--olive-deep); }
/* Select nativo escondido — fuente de verdad para el JS de Apply.
 * El usuario interactúa con el dropdown custom (ib-modal-filter-menu). */
.ib-modal-filter-select { display: none !important; }

/* Dropdown custom: popover glass coral, ítems estilizados con check al
 * seleccionado. Posicionado debajo del trigger, full width de la card. */
.ib-modal-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  list-style: none;
  /* Casi opaco para que no se confunda con el botón "Aplicar" que queda
   * detrás cuando el menú se despliega. Un toque de blur conserva la
   * estética glass sin pérdida de legibilidad. */
  background: #FCEFEF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(255, 248, 248, 0.98));
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(239, 68, 77, 0.18);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 44px -14px rgba(15, 12, 8, 0.22);
  animation: ibFilterMenuIn .16s cubic-bezier(.2, .7, .3, 1);
  /* Scrollbar editorial discreta — coral ultra-fina (mismo patrón que
   * .portal-select-panel del listado). */
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 68, 77, 0.20) transparent;
}
.ib-modal-filter-menu[hidden] { display: none; }
@keyframes ibFilterMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ib-modal-filter-menu li {
  position: relative;
  padding: 9px 28px 9px 14px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
  list-style: none;
}
.ib-modal-filter-menu li:hover,
.ib-modal-filter-menu li.is-focused {
  background: rgba(239, 68, 77, 0.08);
  color: var(--olive-deep);
}
.ib-modal-filter-menu li.is-selected {
  background: rgba(239, 68, 77, 0.12);
  color: var(--olive-deep);
  font-weight: 500;
}
.ib-modal-filter-menu li.is-selected::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  width: 12px; height: 8px;
  margin-top: -4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 10' fill='none' stroke='%23B73C42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5 L5 9 L13 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
/* Scrollbar WebKit (Chrome / Safari / Edge): ultra-fina coral, mismo
 * patrón visual que el .portal-select-panel del listado del portal. */
.ib-modal-filter-menu::-webkit-scrollbar { width: 2px; }
.ib-modal-filter-menu::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.ib-modal-filter-menu::-webkit-scrollbar-thumb {
  background: rgba(239, 68, 77, 0.18);
  border-radius: 999px;
  transition: background .18s ease;
}
.ib-modal-filter-menu:hover::-webkit-scrollbar-thumb { background: rgba(239, 68, 77, 0.32); }
.ib-modal-filter-menu::-webkit-scrollbar-thumb:hover { background: rgba(239, 68, 77, 0.45); }
.ib-modal-filter.is-open { z-index: 41; }
.ib-modal-filter.is-open .ib-modal-filter-value-chevron {
  transform: rotate(180deg);
}
.ib-modal-filter-value-chevron {
  transition: transform .2s ease;
}

/* Chips de filtros activos en modales (export, etc.) — pills sutiles
 * con label en coral y valor en tinta. Se renderizan en grupo arriba
 * de las acciones. */
.ib-modal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
}
.ib-modal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(239, 68, 77, 0.08);
  border: 1px solid rgba(239, 68, 77, 0.20);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.3;
}
.ib-modal-chip strong {
  color: var(--olive-deep);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ib-modal-field {
  width: 100%;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  resize: none; box-sizing: border-box;
}
.ib-modal-field:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(239, 68, 77, 0.10);
}
.ib-modal-field:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.55);
}
.ib-modal-counter {
  display: block;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--inkmute);
}

.ib-modal-actions {
  display: flex; justify-content: stretch; gap: 10px;
  margin-top: 22px;
  flex-wrap: nowrap;
}
.ib-modal-actions .ib-modal-btn {
  flex: 1 1 0;
  padding-left: 16px;
  padding-right: 16px;
  min-width: 0;
}
/* Cuando solo hay un botón (selección vacía → solo "Todo el listado"),
 * centramos y limitamos su ancho para que no estire incómodamente. */
.ib-modal-actions--single {
  justify-content: center;
}
.ib-modal-actions--single .ib-modal-btn {
  flex: 0 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
.ib-modal-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 11px 22px; border-radius: 50px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  border: 1px solid transparent;
  /* Centra el contenido cuando hay una sub-línea (ej. "(5 cheques)").
   * Sin esto, el navegador renderiza multi-línea con text-align: left. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}
/* Sub-etiqueta dentro de un .ib-modal-btn — fuente más pequeña y discreta
 * para complementos del tipo "(5 cheques)" sin competir con el CTA. */
.ib-modal-btn-sub {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  opacity: 0.85;
}
/* Variante ghost: outline coral suave en vez del gris frío anterior.
 * Coherente con la paleta del resto del plugin (toda interacción
 * secundaria vive en el matiz coral). */
.ib-modal-btn--ghost {
  background: transparent;
  border-color: rgba(239, 68, 77, 0.32);
  color: var(--olive-deep);
}
.ib-modal-btn--ghost:hover {
  background: rgba(239, 68, 77, 0.08);
  border-color: rgba(239, 68, 77, 0.55);
  color: var(--olive-deep);
}
.ib-modal-btn--primary {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--paper);
}
.ib-modal-btn--primary:hover:not(:disabled) {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(239, 68, 77, 0.45);
}
.ib-modal-btn:disabled {
  opacity: 0.7; cursor: progress;
}
/* Disabled "duro" (aria-disabled): el botón no representa carga, sino una
 * acción no disponible en el contexto actual (selección vacía, etc.). */
.ib-modal-btn[disabled][aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed;
  transform: none; box-shadow: none;
}
.ib-modal-btn[disabled][aria-disabled="true"]:hover {
  background: var(--olive); border-color: var(--olive);
  transform: none; box-shadow: none;
}

.ib-modal-feedback {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}
.ib-modal-feedback[hidden] { display: none; }
.ib-modal-feedback.is-success {
  background: rgba(184, 149, 106, 0.10);
  color: var(--ink);
}
.ib-modal-feedback.is-error {
  background: rgba(239, 68, 77, 0.10);
  color: var(--olive-deep);
}

/* Botones del modal con touch target garantizado en cualquier viewport. */
.ib-modal-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px) {
  .ib-modal-dialog { padding: 20px 18px 18px; border-radius: 16px; }
  .ib-modal-title { font-size: 20px; }
  .ib-modal-sub { font-size: 13.5px; }
  .ib-modal-warn { padding: 10px 12px; }
  .ib-modal-actions {
    flex-direction: column-reverse; gap: 8px;
  }
  .ib-modal-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
  }
}