/*
 * Home · inbodas — REDISEÑO 2026-06-16.
 * Hero spectacle (orbs glass animados, display monumental, form pill
 * que respira) + 3 pasos (cards glass con scroll reveal) + quote
 * emocional + contacto (cards glass).
 * El bg aurora hereda de `.inbodas-portal-bg` (inbodas-system.css).
 */

.inbodas-public.home { min-height: 100svh; }

/* ============================================================
 *  Background de la Home: gradient taupe del sistema (paleta Canva
 *  DAHMepuGx5Q) — mismo idioma cromático que el Recibo / Cheque PDF
 *  y el bg de los emails (#E7E1DD).
 *
 *  IMPORTANTE: aplicamos el gradient al HTML (no al body ::after)
 *  para que cubra TODO el viewport por encima del padding-top que
 *  Bricks aplica al body y por encima del header. Si lo dejamos en
 *  el ::after del body, el bg del html (#FAFAFA) asoma por encima
 *  del header cuando hay padding-top, dejando una franja crema fea.
 *
 *  El ::after del aurora del portal lo desactivamos en la Home
 *  para que no se solape con este gradient.
 * ============================================================ */
html:has(body.home-page-bg) {
  background: -webkit-linear-gradient(8deg, #f5d7d9 49%, #92a8d1 100%) !important;
  background:    -moz-linear-gradient(8deg, #f5d7d9 49%, #92a8d1 100%) !important;
  background:         linear-gradient(8deg, #f5d7d9 49%, #92a8d1 100%) !important;
  background-attachment: fixed !important;
}
body.home-page-bg::after {
  background-image: none !important;
}
body.home-page-bg { padding-top: 0 !important; }

/* El header (Bricks) ya tiene reglas de transparent en inbodas-system.css
 * (#brx-header, .brxe-section). Reforzamos solo los WRAPPERS estructurales
 * de Bricks por si aplica algún bg inline. NO tocamos descendientes
 * genéricos: la regla `* { background: transparent !important }` rompía
 * las rayas del burger (`.ib-header-burger span` usa `--ink` como fill).
 * El pill `.ib-header-inner` y el drawer/menu mantienen su propio glass. */
body.home-page-bg #brx-header,
body.home-page-bg #brx-header > .brxe-section,
body.home-page-bg #brx-header .brxe-shortcode {
  background: transparent !important;
}

/* ============================================================
 *  HERO — pantalla completa con orbs, eucalipto, display y form
 * ============================================================ */
/* Hero edge-to-edge: ocupa 100svh desde el top del body. El header pill
 * (.ib-header con position:fixed z-index:100) flota POR ENCIMA del hero.
 * Sin padding-top — el contenido se centra con justify-content:center,
 * dejando margen visual respiratorio sin reservar espacio para el header. */
.inbodas-public.home .home-hero {
  position: relative;
  min-height: 100svh;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  /* Imagen de fondo del hero. Va antes que orbs/cursor-glow/contenido
   * en el stacking order (background del propio elemento, z-index 0). */
  background-image: url('https://cheques.inbodas.com/wp-content/uploads/2026/06/heart-02.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .inbodas-public.home .home-hero { padding: 40px; }
}
/* Overlay para asegurar legibilidad del display sobre la foto. Usa
 * mismos tonos del gradient global (paper → taupe) con baja opacidad. */
.inbodas-public.home .home-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(251, 248, 242, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, rgba(251, 248, 242, 0.35) 0%, rgba(231, 225, 221, 0.40) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Orbs decorativos (3) ---------- */
.inbodas-public.home .home-orbs {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.inbodas-public.home .home-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  animation: orbAppear 1.6s ease-out forwards, orbFloat 22s ease-in-out infinite;
  will-change: transform;
}
/* Paleta de los orbs alineada con el sistema INBodas:
 *   - coral primary  #EF444D
 *   - clay terracota #C25450 (escala coral profunda)
 *   - taupe          #A38A5F (caramel cálido del sistema, no verde sage)
 * Los 3 conviven en la misma familia cromática y dan el efecto aurora
 * coherente con el back-18.jpg del resto del portal. */
.inbodas-public.home .home-orb--coral {
  width: 480px; height: 480px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, rgba(239, 68, 77, 0.32) 0%, rgba(239, 68, 77, 0) 70%);
  animation-delay: 0s, 0.2s;
}
.inbodas-public.home .home-orb--sage {
  width: 560px; height: 560px;
  bottom: -180px; right: -140px;
  background: radial-gradient(circle, rgba(163, 138, 95, 0.30) 0%, rgba(163, 138, 95, 0) 70%);
  animation-delay: 0.2s, -7s;
}
.inbodas-public.home .home-orb--clay {
  width: 380px; height: 380px;
  top: 35%; right: 6%;
  background: radial-gradient(circle, rgba(194, 84, 80, 0.30) 0%, rgba(194, 84, 80, 0) 70%);
  animation-delay: 0.4s, -14s;
}
@keyframes orbAppear { to { opacity: 1; } }
@keyframes orbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(46px, -34px, 0) scale(1.06); }
  66%      { transform: translate3d(-32px, 44px, 0) scale(0.95); }
}

/* ---------- Cursor glow (solo desktop) ---------- */
.inbodas-public.home .home-cursor-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .35s ease;
  background:
    radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(239, 68, 77, 0.18) 0%,
      rgba(239, 68, 77, 0) 70%);
}

/* ---------- Eucalipto arco (existente, se mantiene) ---------- */
.inbodas-public.home .eucalyptus {
  position: absolute; pointer-events: none;
  top: 32px; left: 50%; transform: translateX(-50%);
  width: min(94vw, 1180px);
  color: var(--olive); opacity: 0.32;
  z-index: 2;
  animation: euLight 8s ease-in-out infinite;
}
.inbodas-public.home .eucalyptus svg { width: 100%; height: auto; display: block; }
@keyframes euLight {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.42; }
}

/* ---------- Contenido hero ---------- */
.inbodas-public.home .home-hero-content {
  position: relative; z-index: 5;
  max-width: 820px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

/* Eyebrow — pill liquid glass pequeño con animación entrada + dots
 * flanqueando el texto (mismo lenguaje que `.eyebrow` del sistema). */
.inbodas-public.home .home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.40);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--olive-deep);
  opacity: 0;
  animation: heroIn 1s cubic-bezier(.2,.7,.3,1) forwards;
}
.inbodas-public.home .home-eyebrow::before,
.inbodas-public.home .home-eyebrow::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--olive);
  opacity: 0.7;
  flex-shrink: 0;
}
/* En mobile el pill liquid glass se siente recargado sobre el hero
 * — quitamos fondo, borde y blur, dejando solo el texto con los dots
 * (mismo lenguaje que `.eyebrow` del resto del sistema). */
@media (max-width: 720px) {
  .inbodas-public.home .home-eyebrow {
    background: transparent;
    border: 0;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    padding: 0;
  }
}

/* Display monumental con stagger por línea */
.inbodas-public.home .home-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.026em;
  color: var(--ink);
  margin: 0;
}
.inbodas-public.home .home-display-line {
  display: block;
  opacity: 0;
  transform: translateY(48px);
  animation: lineIn 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
.inbodas-public.home .home-display-line:nth-child(1) { animation-delay: 0.25s; }
.inbodas-public.home .home-display-line:nth-child(2) { animation-delay: 0.50s; }
.inbodas-public.home .home-display em {
  font-style: italic;
  font-weight: 600;
  color: var(--olive-deep);
  position: relative;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lineIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Lede */
.inbodas-public.home .home-lede {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.55;
  color: var(--inksoft);
  max-width: 540px;
  margin: 28px auto 0;
  opacity: 0;
  animation: heroIn 1s cubic-bezier(.2,.7,.3,1) 0.7s forwards;
}

/* ---------- Form pill liquid glass (input + botón redondo) ---------- */
.inbodas-public.home .home-code-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 580px;
  width: 100%;
  margin: 48px auto 0;
  padding: 6px 6px 6px 8px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.50);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 16px 48px -8px rgba(15, 12, 8, 0.18),
    0 4px 14px -4px rgba(15, 12, 8, 0.08);
  opacity: 0;
  animation:
    heroIn 0.95s cubic-bezier(.2,.7,.3,1) 0.85s forwards,
    pillBreathe 4.8s ease-in-out 2s infinite;
}
@keyframes pillBreathe {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.65) inset,
      0 16px 48px -8px rgba(15, 12, 8, 0.18),
      0 4px 14px -4px rgba(15, 12, 8, 0.08),
      0 0 0 0 rgba(239, 68, 77, 0);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.65) inset,
      0 16px 48px -8px rgba(15, 12, 8, 0.18),
      0 4px 14px -4px rgba(15, 12, 8, 0.08),
      0 0 40px 6px rgba(239, 68, 77, 0.20);
  }
}
.inbodas-public.home .home-code-pill:focus-within {
  border-color: rgba(239, 68, 77, 0.55);
  animation: heroIn 0.95s cubic-bezier(.2,.7,.3,1) 0.85s forwards;
}

.inbodas-public.home .code-wrap {
  flex: 1; min-width: 0;
  position: relative;
  /* min-height fija para que el wrap nunca colapse si el input está
   * vacío con padding 0 (iOS Safari lo hacía a veces, ocultando el
   * placeholder overlay absolute). */
  min-height: 38px;
  display: flex;
  align-items: center;
}
.inbodas-public.home .code-input {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0; outline: none;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--ink);
  caret-color: var(--olive);
  text-transform: uppercase;
  font-feature-settings: "tnum", "lnum";
}
.inbodas-public.home .code-input::placeholder {
  color: var(--inkmute); opacity: 0.55; letter-spacing: 0.08em;
}
.inbodas-public.home .code-input:disabled { opacity: 0.6; }

/* Placeholder overlay con typewriter (`<span class="code-placeholder">`).
 * El input real lleva `placeholder=""` para que este span sea el único
 * visible cuando está vacío. Hereda font/letter-spacing del input para
 * que el cambio sea invisible al usuario. */
.inbodas-public.home .code-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkmute);
  opacity: 0.55;
  transition: opacity .25s ease;
  /* Compensación óptica: el `.code-wrap` ocupa solo la zona del input,
   * pero visualmente el pill es input + botón. Sin esto, el placeholder
   * aparece descentrado a la izquierda. El padding-left = ancho del
   * botón (58px) + gap (6px). */
  padding-left: 64px;
}
@media (max-width: 480px) {
  /* En mobile el botón mide 46x46 y el gap del pill es 6px. */
  .inbodas-public.home .code-placeholder {
    padding-left: 52px;
  }
}
.inbodas-public.home .code-wrap:focus-within .code-placeholder,
.inbodas-public.home .code-wrap.has-value .code-placeholder {
  opacity: 0;
}
/* Cada carácter del placeholder es un span individual para que el
 * efecto split-flap (cartel mecánico de aeropuerto) pueda animar
 * letra por letra. Width fijo por carácter para que no "salte" al
 * cambiar entre letras de distinto kerning. */
.inbodas-public.home .code-flap {
  display: inline-block;
  min-width: 0.62em;
  text-align: center;
  transition: color .08s linear;
  will-change: contents;
}
.inbodas-public.home .code-flap.is-flipping {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Caret blink — sutil, solo cuando el placeholder está visible. */
.inbodas-public.home .code-caret {
  display: inline-block;
  width: 1.5px; height: 1em;
  margin-left: 4px;
  background: var(--olive);
  vertical-align: -0.12em;
  animation: caretBlink 1.05s steps(2, end) infinite;
}
@keyframes caretBlink {
  to { visibility: hidden; }
}

/* Botón circular coral con flecha */
.inbodas-public.home .home-code-submit {
  flex-shrink: 0;
  width: 58px; height: 58px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0;
  font-size: 0;
}
.inbodas-public.home .home-code-submit .cta-label {
  position: absolute; left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.inbodas-public.home .home-code-submit .cta-arrow {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  transform: translateX(0) translateY(-1px);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.inbodas-public.home .home-code-submit:hover .cta-arrow {
  transform: translateX(2px) translateY(-1px);
}
@media (max-width: 480px) {
  /* En mobile mantenemos el layout horizontal pero compacto:
   * pill ajustado + botón circular más pequeño solo con flecha. */
  .inbodas-public.home .home-code-pill {
    padding: 4px 4px 4px 6px;
    margin-top: 36px;
  }
  .inbodas-public.home .code-input {
    padding: 0;
    font-size: 16px; /* evita zoom auto en iOS si <16px */
    letter-spacing: 0.04em;
  }
  .inbodas-public.home .home-code-submit {
    width: 46px; height: 46px;
  }
  .inbodas-public.home .home-code-submit .cta-arrow {
    font-size: 18px;
  }
}

/* Hint debajo del pill */
.inbodas-public.home .home-code-hint {
  position: static;
  transform: none;
  margin: 22px auto 0;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: var(--inkmute);
  text-align: center;
  opacity: 0;
  animation: heroIn 1s cubic-bezier(.2,.7,.3,1) 1.05s forwards;
}
.inbodas-public.home .home-code-hint.error {
  color: oklch(0.45 0.16 28);
  font-style: normal;
  font-weight: 500;
}

/* Trust line */
.inbodas-public.home .home-trust {
  margin: 40px auto 0;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--inkmute);
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  animation: heroIn 1s cubic-bezier(.2,.7,.3,1) 1.2s forwards;
}
.inbodas-public.home .home-trust a {
  color: var(--olive-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
.inbodas-public.home .home-trust a:hover { color: var(--ink); }

/* ---------- Scroll indicator ----------
 * Centrado horizontal con `inset-inline: 0; margin: 0 auto; width:
 * max-content` en vez de `left: 50% + translateX(-50%)` — más robusto
 * cuando el parent tiene scrollbars, padding asimétrico o transforms. */
.inbodas-public.home .home-scroll {
  position: absolute;
  bottom: 32px;
  left: 0; right: 0;
  margin-inline: auto;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--inkmute);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0;
  z-index: 6;
  animation: heroIn 1.2s ease-out 1.6s forwards;
}
/* Pill mouse del scroll indicator — mismo lenguaje liquid glass que
 * el header pill, mobile drawer y portal-kpi: translúcido fuerte +
 * blur amplio + saturación + borde glass + highlight inset superior. */
.inbodas-public.home .home-scroll-mouse {
  position: relative;
  display: block;
  width: 28px; height: 44px;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
          backdrop-filter: blur(22px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 8px 22px -8px rgba(15, 12, 8, 0.16),
    0 2px 8px -2px rgba(15, 12, 8, 0.06);
  transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .25s ease;
}
.inbodas-public.home .home-scroll:hover .home-scroll-mouse {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(239, 68, 77, 0.4);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 32px -10px rgba(239, 68, 77, 0.25),
    0 4px 10px -4px rgba(15, 12, 8, 0.08);
}
.inbodas-public.home .home-scroll-dot {
  position: absolute;
  top: 8px; left: 50%;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  background: var(--olive);
  border-radius: 2px;
  animation: scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot {
  0%, 18%   { transform: translateY(0); opacity: 0; }
  40%, 60%  { opacity: 1; }
  82%, 100% { transform: translateY(14px); opacity: 0; }
}
.inbodas-public.home .home-scroll:hover { color: var(--olive-deep); }
/* Override legacy del hover ya cubierto arriba en la nueva regla glass. */
/* El letter-spacing de 0.32em añade aire SOLO a la derecha de la
 * última letra; al centrarse en flexbox, el texto parece desplazado
 * a la izquierda respecto a la pill mouse. Compensamos con un
 * padding-left igual al letter-spacing para igualar centros ópticos. */
.inbodas-public.home .home-scroll-label {
  padding-left: 0.32em;
}

/* ============================================================
 *  SECCIONES inferiores — eyebrow + title compartidos
 * ============================================================ */
.inbodas-public.home .home-section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin: 0 0 14px;
}
.inbodas-public.home .home-section-eyebrow::before,
.inbodas-public.home .home-section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--olive);
  opacity: 0.7;
  flex-shrink: 0;
}
.inbodas-public.home .home-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 56px;
  text-align: center;
}
.inbodas-public.home .home-section-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--olive-deep);
}

/* ============================================================
 *  STEPS — 3 cards glass con scroll reveal stagger
 * ============================================================ */
.inbodas-public.home .home-steps {
  padding: 80px 0;
  position: relative;
}
@media (min-width: 768px) {
  .inbodas-public.home .home-steps { padding: 120px 0; }
}
.inbodas-public.home .home-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .inbodas-public.home .home-steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.inbodas-public.home .home-step {
  padding: 36px 32px 32px;
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 16px 48px -12px rgba(15, 12, 8, 0.10),
    0 4px 14px -4px rgba(15, 12, 8, 0.06);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.3,1),
    transform .8s cubic-bezier(.2,.7,.3,1),
    box-shadow .35s ease,
    border-color .35s ease;
}
.inbodas-public.home .home-step.is-in { opacity: 1; transform: translateY(0); }
.inbodas-public.home .home-step:nth-child(2) { transition-delay: 0.12s; }
.inbodas-public.home .home-step:nth-child(3) { transition-delay: 0.24s; }
.inbodas-public.home .home-step:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 68, 77, 0.32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 56px -12px rgba(239, 68, 77, 0.20),
    0 8px 20px -6px rgba(15, 12, 8, 0.08);
}
.inbodas-public.home .home-step-num {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: var(--olive-deep);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.inbodas-public.home .home-step-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.inbodas-public.home .home-step-text {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--inksoft);
  margin: 0;
}

/* ============================================================
 *  QUOTE — gran tipografía display, fade-in al entrar viewport
 * ============================================================ */
.inbodas-public.home .home-quote {
  padding: 80px 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1);
}
.inbodas-public.home .home-quote.is-in { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) {
  .inbodas-public.home .home-quote { padding: 120px 24px; }
}
.inbodas-public.home .home-quote-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 820px;
}
.inbodas-public.home .home-quote-text em {
  font-style: italic;
  font-weight: 600;
  color: var(--olive-deep);
}

/* ============================================================
 *  CONTACTO — 2 cards glass con icono + label + valor
 * ============================================================ */
/* ============================================================
 *  BANNER imagen tras la quote — solo decoración.
 *  Frame con border-radius generoso, hairline glass blanco y sombra
 *  difusa (mismo lenguaje que `.portal-canvas` y `.home-step`).
 * ============================================================ */
.inbodas-public.home .home-banner {
  padding: 0 0 40px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1);
}
.inbodas-public.home .home-banner.is-in { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) {
  .inbodas-public.home .home-banner { padding: 0 0 80px; }
}
.inbodas-public.home .home-banner-frame {
  position: relative;
  margin: 0 auto;
  max-width: 1080px;
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
@media (min-width: 768px) {
  .inbodas-public.home .home-banner-frame { border-radius: 32px; }
}
.inbodas-public.home .home-banner-frame img,
.inbodas-public.home .home-banner-frame .home-banner-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  object-fit: cover;
}
@media (min-width: 768px) {
  .inbodas-public.home .home-banner-frame img,
  .inbodas-public.home .home-banner-frame .home-banner-media { border-radius: 32px; }
}

.inbodas-public.home .home-contact {
  padding: 60px 0 100px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1);
}
.inbodas-public.home .home-contact.is-in { opacity: 1; transform: translateY(0); }
.inbodas-public.home .home-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .inbodas-public.home .home-contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.inbodas-public.home .home-contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 30px 26px;
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 12px 36px -10px rgba(15, 12, 8, 0.10);
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.inbodas-public.home .home-contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 68, 77, 0.36);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 20px 44px -12px rgba(239, 68, 77, 0.22);
}
.inbodas-public.home .home-contact-icon {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: rgba(239, 68, 77, 0.10);
  border-radius: 50%;
  color: var(--olive-deep);
}
.inbodas-public.home .home-contact-icon svg { width: 20px; height: 20px; }
.inbodas-public.home .home-contact-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--inkmute);
}
.inbodas-public.home .home-contact-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: var(--olive-deep);
  letter-spacing: -0.012em;
}
.inbodas-public.home .home-contact-hours {
  margin: 28px auto 0;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--inksoft);
}

/* ============================================================
 *  Reduced motion: respetamos preferencia del usuario
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .inbodas-public.home *,
  .inbodas-public.home *::before,
  .inbodas-public.home *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}