/* ==========================================================================
   NORA — Sistema Glassmorphism
   Valores EXACTOS del reference cristal-ejemplo-blanco.html,
   adaptados a la paleta Navy (#00274E) + Gold (#CBA052) de NORA.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. VARIABLES — copiadas exactamente del reference
   ────────────────────────────────────────────────────────────────────────── */
:root {

  /* ── THICK GLASS (cristal volumétrico) — valores exactos del reference ── */
  --glass-bg:    linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 100%);
  --glass-blur:  blur(28px);
  --glass-border: 1px solid rgba(255,255,255,0.3);

  /* Sombra tarjetas grandes — exacta del reference */
  --glass-thick-shadow:
    0 25px 50px -12px rgba(50,75,100,0.15),
    inset 1px 1px 1px rgba(255,255,255,0.9),
    inset 4px 4px 15px rgba(255,255,255,0.65),
    inset -1px -1px 2px rgba(0,0,0,0.05),
    inset -4px -4px 15px rgba(0,0,0,0.02);

  --glass-thick-shadow-hover:
    0 35px 60px -15px rgba(50,75,100,0.25),
    inset 1px 1px 2px rgba(255,255,255,1),
    inset 5px 5px 20px rgba(255,255,255,0.8),
    inset -1px -1px 2px rgba(0,0,0,0.08),
    inset -4px -4px 15px rgba(0,0,0,0.03);

  /* Sombra botones / elementos pequeños — exacta del reference */
  --glass-thick-shadow-sm:
    0 10px 20px -5px rgba(50,75,100,0.12),
    inset 1px 1px 1px rgba(255,255,255,0.9),
    inset 2px 2px 8px rgba(255,255,255,0.6),
    inset -1px -1px 2px rgba(0,0,0,0.05),
    inset -2px -2px 8px rgba(0,0,0,0.02);

  --glass-thick-shadow-sm-hover:
    0 15px 25px -5px rgba(50,75,100,0.2),
    inset 1px 1px 2px rgba(255,255,255,1),
    inset 3px 3px 12px rgba(255,255,255,0.8),
    inset -1px -1px 2px rgba(0,0,0,0.08),
    inset -2px -2px 8px rgba(0,0,0,0.04);

  /* ── GLASS OSCURO — para fondos navy (hero index.html) ── */
  --glass-dark-bg:           linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 100%);
  --glass-dark-border:       1px solid rgba(203,160,82,0.25);
  --glass-dark-border-top:   rgba(255,255,255,0.22);
  --glass-dark-border-left:  rgba(203,160,82,0.30);

  --glass-dark-shadow:
    0 25px 50px -12px rgba(0,0,0,0.45),
    inset 1px 1px 1px rgba(255,255,255,0.16),
    inset 4px 4px 15px rgba(255,255,255,0.06),
    inset -1px -1px 2px rgba(0,0,0,0.35),
    inset -4px -4px 15px rgba(0,0,0,0.16);

  --glass-dark-shadow-hover:
    0 35px 60px -15px rgba(0,0,0,0.55),
    inset 1px 1px 2px rgba(255,255,255,0.22),
    inset 5px 5px 20px rgba(255,255,255,0.08),
    inset -1px -1px 2px rgba(0,0,0,0.45),
    inset -4px -4px 15px rgba(0,0,0,0.22);

  --glass-dark-shadow-sm:
    0 10px 20px -5px rgba(0,0,0,0.35),
    inset 1px 1px 1px rgba(255,255,255,0.14),
    inset 2px 2px 8px rgba(255,255,255,0.05),
    inset -1px -1px 2px rgba(0,0,0,0.30),
    inset -2px -2px 8px rgba(0,0,0,0.14);

  --nora-btn-inset-gold:
    rgba(240,203,106,0.18) -1.996px 2.391px 18.109px -2.622px inset,
    rgba(255,255,255,0.42) -5.73px -4px 3.36px -2.73px inset,
    rgba(255,255,255,0.28) 6.671px 6.671px 3.363px -6.214px inset,
    rgba(255,255,255,0.55) 0 1px 12.2px -5px inset,
    rgba(255,255,255,0.36) -6.727px -6.727px 3.363px -6.727px inset,
    rgba(255,255,255,0.24) 6.671px 6.671px 3.363px -6.214px inset;

  --nora-btn-inset-navy:
    rgba(240,203,106,0.16) -1.996px 2.391px 18.109px -2.622px inset,
    rgba(255,255,255,0.18) -5.73px -4px 3.36px -2.73px inset,
    rgba(140,210,255,0.16) 6.671px 6.671px 3.363px -6.214px inset,
    rgba(255,255,255,0.30) 0 1px 12.2px -5px inset,
    rgba(255,255,255,0.14) -6.727px -6.727px 3.363px -6.727px inset,
    rgba(140,210,255,0.12) 6.671px 6.671px 3.363px -6.214px inset;

  --nora-btn-inset-light:
    rgba(196,154,48,0.10) -1.996px 2.391px 18.109px -2.622px inset,
    rgba(255,255,255,0.70) -5.73px -4px 3.36px -2.73px inset,
    rgba(255,255,255,0.42) 6.671px 6.671px 3.363px -6.214px inset,
    rgba(255,255,255,0.65) 0 1px 12.2px -5px inset,
    rgba(255,255,255,0.56) -6.727px -6.727px 3.363px -6.727px inset,
    rgba(0,39,78,0.08) 6.671px 6.671px 3.363px -6.214px inset;
}


/* ─────────────────────────────────────────────────────────────────────────
   2. EFECTOS INTERACTIVOS — spotlight cursor + specular + shimmer botón
   Igual que .cg, .sp y .btn::before del cristal-ejemplo-blanco.html
   glass.js inyecta .nora-glass-cg y .nora-glass-sp dentro de cada card,
   y .nora-glass-shimmer dentro de cada botón.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 3D TILT en cards — exacto del reference ── */
.sp2-card,
.hero-calc,
.calculator-panel,
.calculator-result,
.glass-card,
.glass-card-dark {
  transform-style: preserve-3d !important;
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) !important;
  transition: transform 0.08s ease-out, box-shadow 0.25s ease !important;
}

/* ── SPOTLIGHT CURSOR (.nora-glass-cg) ──
   Igual que .cg del reference:
   radial-gradient 800px en posición del ratón, mix-blend-mode overlay */
.nora-glass-cg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    800px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.6),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: overlay;
}

/* Mostrar el spotlight al hacer hover en la card */
.sp2-card:hover      .nora-glass-cg,
.hero-calc:hover     .nora-glass-cg,
.calculator-panel:hover .nora-glass-cg,
.calculator-result:hover .nora-glass-cg,
.glass-card:hover    .nora-glass-cg,
.glass-card-dark:hover .nora-glass-cg {
  opacity: 1;
}

/* ── DESTELLO ESPECULAR TOP-LEFT (.nora-glass-sp) ──
   Igual que .sp del reference:
   blob blanco en esquina top-left que se mueve en hover */
.nora-glass-sp {
  position: absolute;
  top: -22%;
  left: -12%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 64%);
  filter: blur(12px);
  opacity: 0;
  transition: transform 280ms, opacity 220ms;
}

/* Animar el destello al hacer hover */
.sp2-card:hover      .nora-glass-sp,
.hero-calc:hover     .nora-glass-sp,
.calculator-panel:hover .nora-glass-sp,
.calculator-result:hover .nora-glass-sp,
.glass-card:hover    .nora-glass-sp,
.glass-card-dark:hover .nora-glass-sp {
  transform: translate(8px, -6px) scale(1.08);
  opacity: 0.4;
}

/* ── SHIMMER SWEEP EN BOTONES — CSS puro ::before ──
   Exacto del reference (.btn::before y .btn-gold::before)
   Requiere overflow:hidden en el botón (se aplica abajo en sección 9) */

/* Botones glass claros — shimmer blanco completo */
.btn--outline::before,
.btn--secondary::before,
.nv__btn-secondary::before,
.btn--outline-white::before,
.btn--sm::before,
.sp2-card__expand::before,
.demo-copy-cta::before,
.demo-step-badge::before,
.widget-section__copy::before,
.tb-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent) !important;
  transform: translateX(-110%) !important;
  transition: transform 0.46s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.btn--outline:hover::before,
.btn--secondary:hover::before,
.nv__btn-secondary:hover::before,
.btn--outline-white:hover::before,
.btn--sm:hover::before,
.sp2-card__expand:hover::before,
.demo-copy-cta:hover::before,
.demo-step-badge:hover::before,
.widget-section__copy:hover::before,
.tb-icon:hover::before {
  transform: translateX(110%) !important;
}

/* Botones oscuros/gold — shimmer sutil (igual que .btn-gold::before del reference) */
.btn--gold::before,
.btn--primary::before,
.nh__cta::before,
.nv-mcalc__btn::before,
.nv__btn-primary::before,
.btn--header-cta::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
  transform: translateX(-110%) !important;
  transition: transform 0.46s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.btn--gold:hover::before,
.btn--primary:hover::before,
.nh__cta:hover::before,
.nv-mcalc__btn:hover::before,
.nv__btn-primary:hover::before,
.btn--header-cta:hover::before {
  transform: translateX(110%) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   3. FONDO AMBIENT — INDISPENSABLE para que el cristal se vea
   El glass con 0.45 de opacidad necesita color detrás.
   En el reference era blue-grey; aquí usamos navy + gold de NORA.
   ────────────────────────────────────────────────────────────────────────── */

/* Manchas de color en el fondo de páginas blancas (igual que el .bg del reference) */
body:not(:has(.nv)):not([data-dark]) {
  position: relative;
  /* Mancha central navy, desaparece en los bordes — igual que rgba(130,155,180,0.35) del reference */
  background-image:
    radial-gradient(ellipse 80% 60% at 55% 30%, rgba(0,39,78,0.07) 0%, rgba(0,39,78,0.02) 50%, transparent 75%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(196,154,48,0.05) 0%, transparent 65%);
}

/* Grid de puntos sutilísimo — igual que .bg-grid del reference */
body:not(:has(.nv))::before {
  content: "";
  position: fixed;
  inset: 0;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.018) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 25%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Orbes animados — iguales a .oc y .ow del reference (blur 100px, animación float) */
body:not(:has(.nv))::after {
  content: "";
  position: fixed;
  width: 50vw;
  height: 50vh;
  top: 15%;
  right: 15%;
  border-radius: 50%;
  filter: blur(100px);
  background: rgba(0,39,78,0.08);
  pointer-events: none;
  z-index: 0;
  animation: glass-orb-float 18s ease-in-out infinite alternate;
}

@keyframes glass-orb-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -40px) scale(1.05); }
  100% { transform: translate(-20px, 20px) scale(0.95); }
}

/* Segundo orbe gold (se añade via clase en body si se quiere, o pseudo de sections clave) */
.sp2-section::before,
.como-fn-header::after {
  content: "";
  position: absolute;
  width: 40vw;
  height: 40vh;
  border-radius: 50%;
  filter: blur(100px);
  background: rgba(196,154,48,0.06);
  pointer-events: none;
  z-index: 0;
  animation: glass-orb-float 22s ease-in-out 5s infinite alternate-reverse;
}
.sp2-section::before {
  bottom: 0;
  left: 5%;
}
.como-fn-header::after {
  top: 0;
  right: 10%;
}
.sp2-section,
.como-fn-header {
  position: relative;
}

/* Asegurar que el contenido queda por encima del fondo */
.site-header, .nh, main, footer, section, header {
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────────────────────────────────
   3. CLASES DE UTILIDAD — copiadas del reference
   ────────────────────────────────────────────────────────────────────────── */

/* Card de cristal (fondo claro) */
.glass-card {
  position: relative;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  border-top-color: rgba(255,255,255,0.8) !important;
  border-left-color: rgba(255,255,255,0.6) !important;
  box-shadow: var(--glass-thick-shadow) !important;
  transition: box-shadow 0.25s ease, transform 0.22s ease !important;
  overflow: hidden;
}
.glass-card:hover {
  box-shadow: var(--glass-thick-shadow-hover) !important;
  transform: translateY(-2px);
}

/* Brillo especular top-left — igual que en el reference */
.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 15% 10%, rgba(255,255,255,0.55), transparent 55%);
  opacity: 0.7;
  z-index: 0;
}

/* Card cristal oscuro (fondo navy) */
.glass-card-dark {
  position: relative;
  background: var(--glass-dark-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-dark-border) !important;
  border-top-color: var(--glass-dark-border-top) !important;
  border-left-color: var(--glass-dark-border-left) !important;
  box-shadow: var(--glass-dark-shadow) !important;
  transition: box-shadow 0.25s ease, transform 0.22s ease !important;
  overflow: hidden;
}
.glass-card-dark:hover {
  box-shadow: var(--glass-dark-shadow-hover) !important;
  transform: translateY(-2px);
}

/* Divisor grabado — igual que .div del reference */
.glass-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08) 25%, rgba(0,0,0,0.08) 75%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5);
  margin: 1rem 0;
  border: none;
}

/* Mini stat incrustada — igual que .stat del reference */
.glass-stat {
  background: rgba(255,255,255,0.5) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02), inset 1px 1px 2px rgba(255,255,255,0.9) !important;
}

/* Mini icono cuadrado — igual que .ic del reference */
.glass-icon {
  background: var(--glass-bg) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-top-color: rgba(255,255,255,0.9) !important;
  border-left-color: rgba(255,255,255,0.7) !important;
  box-shadow: var(--glass-thick-shadow-sm) !important;
}

/* Pill / chip cristal */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #00274E;
}


/* ─────────────────────────────────────────────────────────────────────────
   4. HEADER — thick glass (igual que .topbar del reference)
   ────────────────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.3) !important;
  box-shadow:
    0 15px 30px -10px rgba(50,75,100,0.10),
    inset 1px 1px 2px rgba(255,255,255,0.9),
    inset 0 -1px 2px rgba(0,0,0,0.05),
    inset 0 -4px 15px rgba(0,0,0,0.02) !important;
}

/* Header de index.html (.nh) */
.nh {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.3) !important;
  box-shadow:
    0 15px 30px -10px rgba(50,75,100,0.10),
    inset 1px 1px 2px rgba(255,255,255,0.9),
    inset 0 -1px 2px rgba(0,0,0,0.05),
    inset 0 -4px 15px rgba(0,0,0,0.02) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   5. MINI CALCULADORA HERO — dark glass (sobre fondo navy)
   ────────────────────────────────────────────────────────────────────────── */
.nv-mcalc {
  background: var(--glass-dark-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-dark-border) !important;
  border-top-color: var(--glass-dark-border-top) !important;
  border-left-color: var(--glass-dark-border-left) !important;
  box-shadow: var(--glass-dark-shadow) !important;
}

.nv-mcalc__label {
  color: rgba(203,160,82,0.9) !important;
}

/* Inputs del mini calc — mismo patrón que .nv__center del reference */
.nv-mcalc__input,
.nv-mcalc__select {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.nv-mcalc__input:focus,
.nv-mcalc__select:focus {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(203,160,82,0.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(203,160,82,0.15) !important;
}

/* Botón calcular — gold volumétrico */
.nv-mcalc__btn {
  background: linear-gradient(135deg, rgba(203,160,82,0.90) 0%, rgba(160,118,45,0.90) 100%) !important;
  color: #00274E !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-top-color: rgba(255,220,130,0.70) !important;
  box-shadow:
    0 10px 20px -5px rgba(203,160,82,0.40),
    inset 1px 1px 1px rgba(255,220,130,0.70),
    inset 2px 2px 8px rgba(255,255,255,0.25),
    inset -1px -1px 2px rgba(100,70,0,0.30),
    inset -2px -2px 8px rgba(0,0,0,0.15) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.nv-mcalc__btn:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 15px 25px -5px rgba(203,160,82,0.55),
    inset 1px 1px 2px rgba(255,230,160,0.90),
    inset 3px 3px 12px rgba(255,255,255,0.30),
    inset -1px -1px 2px rgba(100,70,0,0.40),
    inset -2px -2px 8px rgba(0,0,0,0.20) !important;
}

/* Badge del hero */
.nv__badge {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-dark-border) !important;
  box-shadow: var(--glass-dark-shadow-sm) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   6. HERO CALC — páginas SEO / marketing
   ────────────────────────────────────────────────────────────────────────── */
.hero-calc {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  border-top-color: rgba(255,255,255,0.8) !important;
  border-left-color: rgba(255,255,255,0.6) !important;
  box-shadow: var(--glass-thick-shadow) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   7. CALCULATOR PANEL — páginas programmatic SEO
   ────────────────────────────────────────────────────────────────────────── */
.calculator-panel,
.calculator-result {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  border-top-color: rgba(255,255,255,0.8) !important;
  border-left-color: rgba(255,255,255,0.6) !important;
  box-shadow: var(--glass-thick-shadow) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   8. BENTO GRID — index.html (.sp2-card)
   ────────────────────────────────────────────────────────────────────────── */

/* Fondo de la sección para que el glass se vea */
.sp2-section {
  background: linear-gradient(180deg, #edf1f7 0%, #e4ecf6 100%) !important;
}

/* Card base — thick glass claro */
.sp2-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  border-top-color: rgba(255,255,255,0.8) !important;
  border-left-color: rgba(255,255,255,0.6) !important;
  box-shadow: var(--glass-thick-shadow) !important;
  transition: box-shadow 0.25s ease, transform 0.22s ease !important;
}
.sp2-card:hover {
  box-shadow: var(--glass-thick-shadow-hover) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(255,255,255,0.45) !important;
  border-top-color: rgba(255,255,255,0.9) !important;
}

/* Cards NIE y Licencia — dark glass sobre su fondo navy propio */
.sp2-card--nie,
.sp2-card--lic {
  background: var(--glass-dark-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-dark-border) !important;
  border-top-color: var(--glass-dark-border-top) !important;
  border-left-color: var(--glass-dark-border-left) !important;
  box-shadow: var(--glass-dark-shadow) !important;
}
.sp2-card--nie:hover,
.sp2-card--lic:hover {
  box-shadow: var(--glass-dark-shadow-hover) !important;
  border-color: rgba(203,160,82,0.35) !important;
}

/* Expand icon — mini cristal grueso igual que .tb-icon del reference */
.sp2-card__expand {
  background: var(--glass-bg) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-top-color: rgba(255,255,255,0.9) !important;
  border-left-color: rgba(255,255,255,0.7) !important;
  box-shadow: var(--glass-thick-shadow-sm) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.sp2-card__expand:hover {
  box-shadow: var(--glass-thick-shadow-sm-hover) !important;
  transform: translateY(-1px);
}


/* ─────────────────────────────────────────────────────────────────────────
   9. BOTONES — thick glass + gold volumétrico
   Igual que .btn y .btn-gold del cristal-ejemplo-blanco.html
   ────────────────────────────────────────────────────────────────────────── */

/* ── Base obligatoria para el efecto ::before ──
   Todos los botones necesitan position:relative + overflow:hidden */
.btn--outline,
.btn--secondary,
.btn--outline-white,
.btn--sm,
.btn--gold,
.btn--primary,
.nh__cta,
.nv-mcalc__btn,
.nv__btn-secondary,
.nv__btn-primary,
.btn--header-cta,
.sp2-card__expand,
.demo-copy-cta,
.demo-step-badge,
.widget-section__copy {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.btn--outline::after,
.btn--secondary::after,
.btn--outline-white::after,
.btn--sm::after,
.btn--gold::after,
.btn--primary::after,
.nh__cta::after,
.nv-mcalc__btn::after,
.nv__btn-secondary::after,
.nv__btn-primary::after,
.btn--header-cta::after,
.demo-copy-cta::after,
.widget-section__copy::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity 0.22s ease, box-shadow 0.22s ease !important;
}

/* ── Botón glass claro — exacto .btn del reference ── */
.btn--outline,
.btn--secondary,
.btn--outline-white {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-top-color: rgba(255,255,255,0.9) !important;
  border-left-color: rgba(255,255,255,0.7) !important;
  box-shadow: var(--glass-thick-shadow-sm) !important;
  transition: all 0.22s ease !important;
}
.btn--outline::after,
.btn--secondary::after,
.btn--outline-white::after,
.demo-copy-cta::after,
.widget-section__copy::after {
  box-shadow: var(--nora-btn-inset-light) !important;
}
.btn--outline:hover,
.btn--secondary:hover,
.btn--outline-white:hover {
  box-shadow: var(--glass-thick-shadow-sm-hover) !important;
  transform: translateY(-2px) !important;
}

/* ── Botón gold/oscuro — exacto .btn-gold del reference adaptado a NORA ──
   El reference usa negro (#111). Nosotros usamos dorado NORA. */
.btn--gold,
.btn--primary,
.nh__cta,
.nv-mcalc__btn,
.nv__btn-primary,
.btn--header-cta {
  background: linear-gradient(135deg, #c49a30 0%, #9a6f10 100%) !important;
  color: #001f3d !important;
  font-weight: 800 !important;
  border: 1px solid rgba(0,0,0,0.55) !important;
  border-top-color: rgba(255,220,130,0.30) !important;
  border-left-color: rgba(255,220,130,0.20) !important;
  box-shadow:
    0 10px 20px -5px rgba(154,111,16,0.45),
    inset 1px 1px 1px rgba(255,220,130,0.28),
    inset 2px 2px 8px rgba(255,255,255,0.10),
    inset -1px -1px 2px rgba(0,0,0,0.70),
    inset -2px -2px 8px rgba(0,0,0,0.40) !important;
  transition: all 0.22s ease !important;
}
.btn--gold::after,
.btn--primary::after,
.nv-mcalc__btn::after,
.nv__btn-primary::after,
.btn--header-cta::after {
  box-shadow: var(--nora-btn-inset-gold) !important;
}
.btn--gold:hover,
.btn--primary:hover,
.nh__cta:hover,
.nv-mcalc__btn:hover,
.nv__btn-primary:hover,
.btn--header-cta:hover {
  background: linear-gradient(135deg, #d4a830 0%, #b07a10 100%) !important;
  color: #001f3d !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 15px 25px -5px rgba(154,111,16,0.55),
    inset 1px 1px 2px rgba(255,230,140,0.38),
    inset 3px 3px 12px rgba(255,255,255,0.14),
    inset -1px -1px 2px rgba(0,0,0,0.80),
    inset -2px -2px 8px rgba(0,0,0,0.50) !important;
}

.nh__cta {
  background: linear-gradient(180deg, #063565 0%, #00274e 100%) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.18) !important;
  border-top-color: rgba(255,255,255,0.24) !important;
  border-left-color: rgba(240,203,106,0.20) !important;
  box-shadow:
    0 16px 28px -20px rgba(0,39,78,0.60),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
.nh__cta::after {
  box-shadow: var(--nora-btn-inset-navy) !important;
}
.nh__cta:hover {
  background: linear-gradient(180deg, #0a4276 0%, #06315f 100%) !important;
  box-shadow:
    0 20px 34px -20px rgba(0,39,78,0.68),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.nv__btn-secondary {
  box-shadow:
    0 18px 30px -24px rgba(0,39,78,0.22),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.nv__btn-secondary::after {
  box-shadow: var(--nora-btn-inset-navy) !important;
}

/* ── Componente DROPDOWN (igual que en el reference) ──
   Cualquier .dropdown en las páginas de NORA funciona igual */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Menú flotante glass — exacto .dropdown-menu del reference */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transform-origin: top right;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;

  background: var(--glass-bg);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 12px;
  border: var(--glass-border);
  border-top-color: rgba(255,255,255,0.9);
  border-left-color: rgba(255,255,255,0.7);
  box-shadow: var(--glass-thick-shadow);
}

/* Estado abierto — exacto .dropdown.open .dropdown-menu del reference */
.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Items del menú — exacto .dropdown-item del reference */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  width: 100%;
  font-family: inherit;
}
.dropdown-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  flex-shrink: 0;
}
/* Hover exacto del reference */
.dropdown-item:hover {
  background: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.9) !important;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,1), 0 2px 5px rgba(0,0,0,0.03) !important;
  transform: translateX(2px) !important;
  color: #111827 !important;
}
.dropdown-item:hover svg {
  opacity: 1;
}

/* Separador interno — exacto .dropdown-divider del reference */
.dropdown-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08) 15%, rgba(0,0,0,0.08) 85%, transparent);
  margin: 6px 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Item peligro — exacto .dropdown-item.danger del reference */
.dropdown-item.danger {
  color: #dc2626;
}
.dropdown-item.danger:hover {
  background: rgba(254,226,226,0.6) !important;
  border-color: rgba(254,226,226,0.9) !important;
  box-shadow: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   10. DESPLEGABLE MOBILE — thick glass dropdown
   Igual que .dropdown-menu del reference
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* Mostrar hamburger en mobile */
  .nh__toggle {
    display: flex !important;
  }

  /* El header necesita position relative para que el nav absolute funcione */
  .nh,
  .nh__inner {
    position: relative !important;
  }

  /* Nav como dropdown glass — igual que .dropdown-menu del reference */
  .nh__nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    z-index: 200 !important;

    /* THICK GLASS — exacto del reference */
    background: var(--glass-bg) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: var(--glass-border) !important;
    border-top-color: rgba(255,255,255,0.9) !important;
    border-left-color: rgba(255,255,255,0.7) !important;
    box-shadow: var(--glass-thick-shadow) !important;

    /* Estado cerrado */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(0.98) !important;
    transform-origin: top right !important;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  }

  /* Estado abierto */
  .nh.is-open .nh__nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  /* Items del nav — igual que .dropdown-item del reference */
  .nh__link {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
  }
  .nh__link:hover {
    background: rgba(255,255,255,0.7) !important;
    border-color: rgba(255,255,255,0.9) !important;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,1), 0 2px 5px rgba(0,0,0,0.03) !important;
    transform: translateX(2px) !important;
  }

  /* Divisor antes del CTA */
  .nh__nav .nh__link:last-of-type {
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 0 !important;
    margin-bottom: 6px !important;
    padding-bottom: 10px !important;
  }

  /* CTA ancho completo — gold volumétrico */
  .nh__nav .nh__cta {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #c49a30 0%, #9a6f10 100%) !important;
    color: #fff !important;
    margin-top: 4px !important;
  }

  /* Hamburger — mismo estilo que .tb-icon del reference */
  .nh__toggle {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-top-color: rgba(255,255,255,0.9) !important;
    border-left-color: rgba(255,255,255,0.7) !important;
    box-shadow: var(--glass-thick-shadow-sm) !important;
    transition: all 0.2s ease !important;
  }
  .nh__toggle:hover {
    box-shadow: var(--glass-thick-shadow-sm-hover) !important;
    transform: translateY(-1px) !important;
  }
}

/* Dropdown de marketing/SEO pages (.nav, .site-header.is-open) */
@media (max-width: 760px) {
  .site-header .nav {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: var(--glass-border) !important;
    border-top-color: rgba(255,255,255,0.9) !important;
    border-left-color: rgba(255,255,255,0.7) !important;
    box-shadow: var(--glass-thick-shadow) !important;
  }

  .site-header__toggle {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-top-color: rgba(255,255,255,0.9) !important;
    box-shadow: var(--glass-thick-shadow-sm) !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   11. SCROLLYTELLING — #como-funciona
   ────────────────────────────────────────────────────────────────────────── */

/* Pill de paso — mini cristal igual que .sb-item.active del reference */
.demo-step-badge {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-top-color: rgba(255,255,255,0.9) !important;
  border-left-color: rgba(255,255,255,0.7) !important;
  box-shadow: var(--glass-thick-shadow-sm) !important;
  color: rgba(0,39,78,0.65) !important;
  transition: box-shadow 0.22s ease !important;
}

/* CTA link dentro del scrollytelling — glass btn */
.demo-copy-cta {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(196,154,48,0.3) !important;
  border-top-color: rgba(255,255,255,0.9) !important;
  border-left-color: rgba(255,255,255,0.7) !important;
  box-shadow: var(--glass-thick-shadow-sm) !important;
  color: #00274E !important;
  transition: box-shadow 0.22s ease, transform 0.18s ease !important;
}
.demo-copy-cta:hover {
  box-shadow: var(--glass-thick-shadow-sm-hover) !important;
  transform: translateY(-2px) !important;
}

/* Mac shell — premium shadow + borde reflex */
.dmac-shell {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, transparent 18%),
    linear-gradient(145deg, #4b5058 0%, #171b21 38%, #06080c 100%) !important;
  border-radius: 24px 24px 8px 8px !important;
  padding: 12px 12px 10px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.24) inset,
    0 0 0 1px rgba(0,0,0,0.36),
    0 55px 110px -40px rgba(0,39,78,0.38),
    0 28px 60px -34px rgba(0,0,0,0.42) !important;
  border-top: 1px solid rgba(255,255,255,0.34) !important;
  transform: rotateX(0.001deg);
}
.dmac-screen {
  border-color: #04060a !important;
  border-radius: 15px !important;
}
.dmac-chin {
  background:
    radial-gradient(80% 180% at 50% 0%, rgba(255,255,255,0.76) 0%, transparent 32%),
    linear-gradient(180deg, #e0e3e9 0%, #b9bec9 58%, #8e95a4 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 26px 58px -38px rgba(0,18,42,0.72) !important;
}
.dmac-notch {
  background: radial-gradient(circle at 35% 35%, #5d748a 0 16%, #111822 48%, #020305 100%) !important;
}

.dphone-shell {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16) 0%, transparent 24%),
    linear-gradient(145deg, #555b65 0%, #181b21 36%, #050608 72%, #303640 100%) !important;
  border-radius: 50px !important;
  padding: 8px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 0 0 2px #0b0e13,
    0 32px 76px -30px rgba(0,0,0,0.75),
    0 18px 42px -34px rgba(0,39,78,0.72) !important;
}
.dphone-island {
  background: #010204 !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.08),
    0 1px 8px rgba(0,0,0,0.5) !important;
}
.dphone-scr {
  border-radius: 42px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 26px rgba(0,0,0,0.12) !important;
}

/* Línea divisoria grabada dentro de scrolly */
#como-funciona .demo-inner::after {
  display: none;
}


/* ─────────────────────────────────────────────────────────────────────────
   12. RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --glass-blur: blur(16px);
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   13. HERO TEASER CALCULATOR
   Sustituye el antiguo espacio visual por una calculadora parcial.
   ────────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   14. COBERTURA GLASS EXTENDIDA — todas las cards de toda la web
   Sin esto el efecto solo se veía en la parte superior.
   Aplica a todas las clases tipo card que existen en NORA.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Cards de contenido (todas las variantes) ── */
.feature-card,
.service-card,
.product-card,
.pricing-card,
.pro-card,
.case-card,
.legal-card,
.trust-card,
.visual-card,
.benefit-card,
.widget-card,
.seo-guide-card,
.testimonio-card,
.dpdf-card,
.sp-card,
.tax-card,
.info-card,
.ccaa-card,
.calc-card,
.tax-summary,
.tax-summary-card,
.summary-card,
.summary-box,
.calc-panel,
.resultado-card,
.calculadora-card,
.seo-card,
.cta-box,
.stat-card,
.card {
  position: relative !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  border-top-color: rgba(255,255,255,0.8) !important;
  border-left-color: rgba(255,255,255,0.6) !important;
  box-shadow: var(--glass-thick-shadow) !important;
  transition: box-shadow 0.25s ease, transform 0.22s ease !important;
}
.feature-card:hover,
.service-card:hover,
.product-card:hover,
.pricing-card:hover,
.pro-card:hover,
.case-card:hover,
.trust-card:hover,
.benefit-card:hover,
.widget-card:hover,
.seo-guide-card:hover,
.tax-card:hover,
.info-card:hover,
.ccaa-card:hover,
.calc-card:hover,
.tax-summary:hover,
.tax-summary-card:hover,
.summary-card:hover,
.resultado-card:hover,
.seo-card:hover,
.stat-card:hover,
.card:hover {
  box-shadow: var(--glass-thick-shadow-hover) !important;
  transform: translateY(-3px) !important;
  border-top-color: rgba(255,255,255,0.9) !important;
}

/* ── Panels / boxes genéricos ── */
.pricing-panel,
.info-panel,
.highlight-box,
.quote-wrap,
.testimonio-wrap,
.widget-section,
.seo-stack-note,
.faq-item,
.faq-question,
.cta__box,
.pro-feature {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  border-top-color: rgba(255,255,255,0.8) !important;
  border-left-color: rgba(255,255,255,0.6) !important;
  box-shadow: var(--glass-thick-shadow) !important;
}

/* ── Tablas de impuestos (ccaa pages) ── */
.tax-table,
.tipos-table,
.comparison-table {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.70) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,39,78,0.06), inset 1px 1px 2px rgba(255,255,255,0.9) !important;
  overflow: hidden;
}

/* ── Hero en SEO/ccaa pages ── */
.seo-hero,
.ccaa-hero {
  position: relative;
}

/* ── Footer glass ── */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, rgba(0,39,78,0.04) 0%, rgba(255,255,255,0.40) 100%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90);
}

/* ── Los cards interiores (como .sp-modal, .modal, .popover) ── */
.sp-modal,
.modal,
.popover,
.widget-card-inner {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: var(--glass-border) !important;
  border-top-color: rgba(255,255,255,0.9) !important;
  border-left-color: rgba(255,255,255,0.7) !important;
  box-shadow: var(--glass-thick-shadow) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   15. ORBES AMBIENT DISTRIBUIDOS POR TODA LA PÁGINA
   El efecto glass necesita color detrás incluso en secciones bajas.
   Añadimos orbes flotantes a las secciones principales.
   ────────────────────────────────────────────────────────────────────────── */

/* Cada sección main/section recibe un orbe sutil de fondo */
main > section,
.seo-section,
.ccaa-section,
.content-section {
  position: relative;
}

main > section:nth-of-type(odd)::before,
.seo-section:nth-of-type(odd)::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 40vw;
  height: 40vw;
  max-width: 600px;
  max-height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,39,78,0.04) 0%, transparent 65%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: glass-orb-float 22s ease-in-out infinite alternate;
}

main > section:nth-of-type(even)::before,
.seo-section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 35vw;
  height: 35vw;
  max-width: 500px;
  max-height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,154,48,0.05) 0%, transparent 65%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: glass-orb-float 18s ease-in-out 3s infinite alternate-reverse;
}

/* Asegurar que el contenido de cada sección queda por encima del orbe */
main > section > *,
.seo-section > * {
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────────────────────────────────
   16. FALLBACK — sin backdrop-filter
   ────────────────────────────────────────────────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card,
  .hero-calc,
  .calculator-panel,
  .calculator-result,
  .sp2-card {
    background: rgba(255,255,255,0.92) !important;
  }

  .glass-card-dark,
  .sp2-card--nie,
  .sp2-card--lic,
  .nv-mcalc {
    background: rgba(0,28,65,0.90) !important;
  }

  .site-header,
  .nh {
    background: rgba(255,255,255,0.98) !important;
  }

  .nh__nav {
    background: rgba(255,255,255,0.98) !important;
  }
}

/* Home mobile repair: hero order, calculator dropdown, and scrollytelling */
.nv__badge,
.nv__h1,
.nv__center .nv-mcalc,
.nv__center .nv__actions,
.nv__support {
  position: relative;
  z-index: 2;
}

.nv__badge { order: 1; }
.nv__h1 { order: 2; }
.nv__center .nv-mcalc { order: 4; }
.nv__center .nv__actions { order: 5; }
.nv__support { order: 6; }

.nv-mcalc {
  overflow: visible !important;
  z-index: 12;
}

.nv-mcalc__custom-select {
  position: relative;
  z-index: 30;
}

.nv-mcalc__custom-select.is-open {
  z-index: 80;
}

.nv-mcalc__select-menu {
  min-width: max(100%, 190px);
  max-height: min(42svh, 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 980px) {
  .nv__left {
    display: contents !important;
  }

  .nv__badge,
  .nv__h1,
  .nv__center .nv-mcalc,
  .nv__center .nv__actions,
  .nv__support {
    align-self: center;
  }

  .nv__h1 {
    text-shadow: 0 18px 44px rgba(0, 18, 42, 0.56);
  }

  .nv__center .nv-mcalc {
    margin-top: 1.35rem !important;
    margin-bottom: 1rem;
  }
}

@media (max-width: 600px) {
  .nv {
    padding-top: 1.35rem !important;
  }

  .nv__center {
    overflow: visible !important;
  }

  .nv__badge {
    margin-bottom: 0.75rem !important;
  }

  .nv__h1 {
    margin-bottom: 0 !important;
    max-width: 35rem !important;
  }

  .nv__h1-main {
    display: block !important;
    margin-bottom: 0.32rem;
    font-size: clamp(1.18rem, 6.2vw, 1.55rem);
    line-height: 1.14;
  }

  .nv__h1-copy {
    display: block !important;
    font-size: clamp(0.88rem, 3.65vw, 1.02rem);
    line-height: 1.54;
  }

  .nv__center .nv-mcalc {
    max-width: 100% !important;
    margin-top: 1.15rem !important;
    margin-bottom: 0.85rem;
  }

  .nv-mcalc__select-menu {
    position: absolute;
    left: 0;
    right: auto;
    width: 100%;
    min-width: 100%;
    max-height: min(38svh, 260px);
  }
}

@media (max-width: 860px) {
  #como-funciona.demo-mobile-ready {
    min-height: auto !important;
    overflow: visible !important;
  }

  #como-funciona.demo-mobile-ready > .demo-sticky {
    display: none !important;
  }

  .demo-mobile-strip {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: min(100% - 1.25rem, 430px);
    margin: 0 auto;
    padding: 0.75rem 0 1.25rem !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .demo-mobile-slide {
    width: 100%;
    min-height: auto !important;
    flex: none !important;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.95rem;
    align-items: start !important;
    justify-content: start !important;
    padding: 1rem;
    border: 1px solid rgba(0, 39, 78, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 22px 48px -38px rgba(0, 39, 78, 0.35);
    scroll-snap-align: none !important;
  }

  .demo-mobile-slide .demo-copy {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    max-width: none;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    text-align: left;
  }

  .demo-mobile-slide .demo-copy h3 {
    font-size: clamp(1.18rem, 6vw, 1.55rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 0.42rem;
  }

  .demo-mobile-slide .demo-copy p {
    font-size: 0.88rem !important;
    line-height: 1.58 !important;
    margin: 0;
  }

  .demo-mobile-slide .demo-phone-wrap {
    display: block !important;
    justify-self: center;
    width: min-content;
  }

  .demo-mobile-slide .dphone-shell {
    border-radius: 42px !important;
    padding: 8px !important;
  }

  .demo-mobile-slide .dphone-scr {
    width: min(218px, 60vw);
    height: auto !important;
    aspect-ratio: 218 / 472;
    max-height: 360px;
    border-radius: 34px !important;
  }

  .demo-mobile-slide .dphone-island {
    top: 11px !important;
    width: 62px !important;
    height: 18px !important;
    border-radius: 14px !important;
  }

  .demo-mobile-dots {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .demo-mobile-strip {
    width: min(100% - 0.9rem, 430px);
  }

  .demo-mobile-slide {
    padding: 0.85rem;
  }

  .demo-mobile-slide .dphone-scr {
    width: min(194px, 56vw);
  }
}

/* Header/nav repair and hero CTA spacing */
.nh {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  overflow: visible !important;
}

.nh__inner {
  position: relative !important;
  overflow: visible !important;
}

.nh__brand {
  gap: 0.48rem !important;
}

.nh__brand-mark {
  order: 0;
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 auto;
}

.nh__brand-wordmark {
  order: 1;
  height: 30px !important;
  width: auto !important;
}

.nv__center .nv__actions {
  margin-top: 1.15rem !important;
  margin-bottom: 0.7rem !important;
  gap: 0.9rem !important;
}

.nv__support {
  margin-top: 0 !important;
}

@media (min-width: 981px) {
  .nv__center .nv-mcalc {
    margin-top: 1.35rem !important;
  }

  .nv__center .nv__actions {
    margin-top: 1.25rem !important;
  }
}

@media (max-width: 760px) {
  .nh {
    z-index: 2000 !important;
  }

  .nh__inner {
    min-height: 76px !important;
  }

  .nh__brand {
    gap: 0.62rem !important;
  }

  .nh__brand-mark {
    width: 48px !important;
    height: 48px !important;
  }

  .nh__brand-wordmark {
    height: 38px !important;
    max-width: min(44vw, 150px);
  }

  .nh__toggle {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 auto;
  }

  .nh__toggle span {
    width: 23px !important;
    height: 2px !important;
  }

  .nh.is-open .nh__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .nh.is-open .nh__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  .nh__nav {
    top: calc(100% + 10px) !important;
    z-index: 2100 !important;
    max-height: calc(100svh - 96px);
    overflow-y: auto;
  }
}

@media (max-width: 420px) {
  .nh__inner {
    width: min(100% - 1.15rem, var(--container)) !important;
  }

  .nh__brand-mark {
    width: 46px !important;
    height: 46px !important;
  }

  .nh__brand-wordmark {
    height: 34px !important;
    max-width: 42vw;
  }
}

/* Hero SaaS teaser calculator */
.nv__center {
  display: block !important;
}

.nv__hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(390px, 0.72fr);
  gap: clamp(1.75rem, 5vw, 5.75rem);
  align-items: center;
  width: 100%;
  min-height: clamp(620px, 82svh, 780px);
  padding: clamp(3.2rem, 7vw, 5.6rem) 0 clamp(3.8rem, 7vw, 5.8rem);
}

.nv__hero-grid .nv__left {
  display: block !important;
  max-width: 760px !important;
}

.nv__hero-grid .nv__h1 {
  max-width: 700px !important;
  margin-bottom: 1rem !important;
  font-size: clamp(1.04rem, 1.32vw, 1.28rem) !important;
  line-height: 1.52 !important;
}

.nv__hero-grid .nv__h1-main {
  display: block !important;
  margin-bottom: 0.58rem !important;
  font-size: clamp(1.52rem, 2.4vw, 2.16rem) !important;
  line-height: 1.12 !important;
}

.nv__hero-grid .nv__h1-copy {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  font-size: clamp(0.95rem, 1.06vw, 1.05rem) !important;
  line-height: 1.55 !important;
}

.nv__calc-column {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.nv__calc-column > .nv-mcalc {
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  margin: 0 !important;
  padding: clamp(0.95rem, 1.5vw, 1.18rem) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)),
    rgba(5, 22, 45, 0.82) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    0 34px 86px -42px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.nv__center .nv__calc-column > .nv-mcalc {
  margin: 0 !important;
}

.nv-mcalc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.82rem;
}

.nv-mcalc__head .nv-mcalc__label {
  margin-bottom: 0.25rem;
}

.nv-mcalc__intro {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.58);
}

.nv-mcalc__status {
  flex: 0 0 auto;
  padding: 0.28rem 0.48rem;
  border: 1px solid rgba(240,203,106,0.28);
  border-radius: 999px;
  background: rgba(240,203,106,0.1);
  color: rgba(240,203,106,0.94);
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nv__calc-column .nv-mcalc__row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 0.55rem !important;
}

.nv__calc-column .nv-mcalc__price-wrap,
.nv__calc-column .nv-mcalc__btn {
  grid-column: 1 / -1;
}

.nv-mcalc__property {
  width: 100%;
  height: 48px;
  min-width: 0;
  padding: 0 34px 0 12px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 16px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  appearance: none;
  cursor: pointer;
  outline: none;
}

.nv-mcalc__property option {
  color: #001f3d;
  background: #fff;
}

.nv__calc-column .nv-mcalc__custom-select {
  min-width: 0;
}

.nv__calc-column .nv-mcalc__btn {
  width: 100%;
}

.nv-mcalc__result.is-visible {
  max-height: 720px !important;
}

.nv-mcalc__res-inner {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0.64rem !important;
  align-items: stretch !important;
  padding: 0.78rem !important;
}

.nv-mcalc__summary-grid,
.nv-mcalc__premium-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.nv-mcalc__pill,
.nv-mcalc__premium-item {
  min-width: 0;
  padding: 0.68rem 0.72rem;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.055);
  overflow: hidden;
}

.nv-mcalc__pill--total {
  background: linear-gradient(135deg, rgba(240,203,106,0.18), rgba(255,255,255,0.055));
  border-color: rgba(240,203,106,0.22);
}

.nv-mcalc__detail {
  display: grid;
  gap: 0.42rem;
  padding: 0.68rem 0.72rem;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  background: rgba(0,0,0,0.12);
}

.nv-mcalc__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.56);
}

.nv-mcalc__line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nv-mcalc__line strong {
  flex: 0 0 auto;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 820;
}

.nv-mcalc__sep {
  display: none !important;
}

.nv-mcalc__link,
.nv-mcalc__note {
  width: 100%;
}

.nv-mcalc__blur {
  display: inline-block;
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  opacity: 0.82;
  transform: translateZ(0);
}

.nv-mcalc__premium-item::after {
  content: "Desbloquear";
  display: inline-flex;
  margin-top: 0.35rem;
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240,203,106,0.92);
}

@media (min-width: 1101px) {
  .nv-mcalc__summary-grid,
  .nv-mcalc__premium-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nv-mcalc__pill,
  .nv-mcalc__premium-item {
    padding: 0.56rem 0.58rem;
  }

  .nv-mcalc__pill-lbl {
    font-size: 0.52rem !important;
  }

  .nv-mcalc__pill-val {
    font-size: 0.92rem !important;
  }

  .nv-mcalc__detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.72rem;
  }

  .nv-mcalc__line {
    font-size: 0.68rem;
  }

  .nv-mcalc__line strong {
    font-size: 0.72rem;
  }

  .nv-mcalc__premium-item::after {
    font-size: 0.5rem;
  }
}

@media (max-width: 1100px) {
  .nv__hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding-top: clamp(2.4rem, 6vw, 4rem);
  }

  .nv__hero-grid .nv__left {
    display: block !important;
    max-width: 780px !important;
    margin: 0 auto;
    text-align: center;
  }

  .nv__hero-grid .nv__h1 {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .nv__hero-grid .nv__actions {
    justify-content: center;
  }

  .nv__calc-column {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .nv__hero-grid {
    gap: 1.15rem;
    padding-top: 1.25rem;
    padding-bottom: 2.4rem;
  }

  .nv__calc-column > .nv-mcalc {
    width: 100% !important;
    padding: 0.86rem !important;
  }

  .nv__hero-grid .nv__h1-main {
    font-size: clamp(1.2rem, 6vw, 1.55rem) !important;
  }

  .nv__hero-grid .nv__h1-copy {
    -webkit-line-clamp: 8;
    font-size: clamp(0.88rem, 3.7vw, 1rem) !important;
  }

  .nv__center .nv__calc-column > .nv-mcalc {
    margin: 0 !important;
  }

  .nv__calc-column .nv-mcalc__row,
  .nv-mcalc__summary-grid,
  .nv-mcalc__premium-grid {
    grid-template-columns: 1fr !important;
  }

  .nv-mcalc__line span {
    white-space: normal;
  }
}