/* ============================================================
   AgenteBnb · Landing BerriUp extras
   CSS extraído de feat/landing-redesign para:
     · Calculadora interactiva (4 barras comparativas)
     · Playground "Escríbele al Recepcionista"
   Importado SOLO en este landing provisional; el viejo
   no usa estas vars/clases, no hay colisión.
   ============================================================ */

/* CSS variables namespace-d a los contenedores nuevos para
   no contaminar el resto del landing viejo (que usa hex). */
.calc-berriup, .playground-berriup, .equipo-playground-berriup {
  --ink: #0a0a0a;
  --ink-2: #1a1a1a;
  --ink-3: #525252;
  --ink-4: #8a8a8a;
  --ink-5: #b8b8b8;
  --paper: #ffffff;
  --paper-2: #fafaf9;
  --paper-3: #f4f3f0;
  --line: #e8e6e1;
  --line-2: #d8d4cc;
  --accent: #d24a1f;
  --accent-h: #b53e18;
  --accent-soft: #fde8df;
  --good: #1f7a4d;
  --good-soft: #ecf6f1;
  --warn: #b85d00;
  --warn-soft: #fef6ea;
  --crit: #b3261e;
  --c-recepcionista: #d24a1f;
  --c-recepcionista-soft: #fde8df;
  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-family: var(--sans);
}

/* Section wrappers — replica del look "section alt" del nuevo */
.section-berriup {
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 56px);
}
.section-berriup.alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-berriup .wrap { max-width: 1200px; margin: 0 auto; }
.section-berriup .section-head { text-align: center; margin: 0 auto 3rem; max-width: 760px; }
.section-berriup .section-head .eyebrow.accent {
  display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 1rem;
}
.section-berriup h2.h2 {
  font-size: clamp(28px, 4vw, 48px); line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink); font-weight: 500; margin: 0 0 1rem;
}
.section-berriup h2.h2 .serif, .section-berriup h3 .serif {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent);
}
.section-berriup .section-head p {
  font-size: 17px; line-height: 1.55; color: var(--ink-3); margin: 0;
}

/* Botón primario (replica light del nuevo) */
.section-berriup .btn, .equipo-playground-berriup .btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.4rem; border-radius: 999px; border: none;
  font: inherit; font-weight: 500; font-size: 15px;
  cursor: pointer; text-decoration: none;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.section-berriup .btn.btn-primary, .equipo-playground-berriup .btn.btn-primary {
  background: var(--ink); color: var(--paper);
}
.section-berriup .btn.btn-primary:hover, .equipo-playground-berriup .btn.btn-primary:hover {
  background: var(--ink-2); transform: translateY(-1px);
}
.section-berriup .btn .arrow, .equipo-playground-berriup .btn .arrow { transition: transform .15s var(--ease); }
.section-berriup .btn:hover .arrow, .equipo-playground-berriup .btn:hover .arrow { transform: translateX(2px); }

.calc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.calc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 36px;
}
.calc-head-left { flex: 1 1 auto; min-width: 240px; }
.calc-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.calc-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 460px;
}
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  background: var(--paper-3);
  border-radius: 999px;
  outline: none;
  position: relative;
  cursor: grab;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--paper);
  box-shadow: 0 2px 8px rgba(210,74,31,.35), 0 0 0 1px var(--accent);
  cursor: grab;
  transition: transform .15s var(--ease);
}
.calc-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--paper);
  box-shadow: 0 2px 8px rgba(210,74,31,.35), 0 0 0 1px var(--accent);
  cursor: grab;
}
.calc-slider:active::-webkit-slider-thumb { transform: scale(1.1); cursor: grabbing; }

.calc-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  min-width: 96px;
  text-align: center;
  justify-content: center;
}
.calc-value strong { font-size: 22px; font-weight: 500; }
.calc-value span { font-size: 12.5px; opacity: .7; }

.calc-result-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(210,74,31,.18);
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(.2, .7, .2, 1);
  transform-origin: center;
}
.calc-result-pill.pulsing {
  animation: calc-pill-pulse 0.28s ease-out;
}
@keyframes calc-pill-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .calc-result-pill.pulsing { animation: none; }
  .bar-fill { transition: none !important; }
}
.calc-result-pill .num {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.calc-result-pill .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Bars */
.calc-bars {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bar-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2fr) minmax(160px, 0.9fr);
  gap: 28px;
  align-items: center;
}
@media (max-width: 780px) {
  .bar-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--line);
  }
  .bar-row:last-child { border-bottom: 0; }
}
.bar-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.bar-sub {
  font-size: 13px;
  color: var(--ink-4);
  margin-top: 4px;
  line-height: 1.4;
}
.bar-track {
  position: relative;
  height: 18px;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--ink-4);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.2, .7, .2, 1), background .2s var(--ease);
}
/* Primer paint (cuando entra en viewport): transición más larga para el "fill in" */
.bar-row[data-kind="ours"] .bar-fill {
  transition: width .4s cubic-bezier(.2, .7, .2, 1), background .2s var(--ease);
}
.bar-row[data-kind="human"]  .bar-fill { background: var(--ink); }
.bar-row[data-kind="custom"] .bar-fill { background: var(--ink-3); }
.bar-row[data-kind="diy"]    .bar-fill { background: var(--ink-4); }
.bar-row[data-kind="ours"]   .bar-fill { background: var(--accent); }
.bar-row[data-kind="ours"]   .bar-name { color: var(--accent); font-weight: 600; }

.bar-cost {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.bar-cost strong {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.bar-cost .bar-unit { font-size: 13px; color: var(--ink-4); }
.bar-cost .bar-ratio {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 4px 10px;
  background: var(--paper-2);
  border-radius: 999px;
  margin-left: 4px;
  white-space: nowrap;
}
.bar-row[data-kind="ours"] .bar-cost strong { color: var(--accent); font-weight: 600; }
.bar-row[data-kind="ours"] .bar-cost .bar-ratio {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
@media (max-width: 780px) {
  .bar-cost { justify-content: flex-start; }
}

/* Result summary */
.calc-summary {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 28px;
  align-items: center;
}
@media (max-width: 780px) {
  .calc-summary { grid-template-columns: 1fr 1fr; gap: 20px; }
  .calc-summary .summary-cta { grid-column: 1 / -1; }
}
.summary-cell .num {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.summary-cell .num.accent { color: var(--accent); }
.summary-cell .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 8px;
}
.summary-cta {
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   STICKY CTA BAR
============================================================ */

.equipo-playground {
  margin-top: clamp(72px, 8vw, 100px);
  padding-top: clamp(48px, 6vw, 72px);
  /* sin border-top → bg continuo a través del equipo */
}
.equipo-playground-head {
  max-width: 640px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  text-align: center;
}
.equipo-playground-head .eyebrow {
  margin-bottom: 18px;
  justify-content: center;
}
.equipo-playground-h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.equipo-playground-h3 .serif {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}

/* HOW-MINI removido — no se usa en este landing provisional */

.playground .pg-form {
  display: none;
}

/* Playground container */
.playground {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.18);
}

/* Header */
.pg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pg-dots { display: inline-flex; gap: 5px; }
.pg-dots span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--line-2);
}
.pg-dots span:nth-child(1) { background: #ff6058; }
.pg-dots span:nth-child(2) { background: #febc2e; }
.pg-dots span:nth-child(3) { background: #28c840; }
.pg-title { flex: 1; }
.pg-badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Chat area */
.pg-chat {
  padding: 20px;
  min-height: 280px;
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.pg-chat::-webkit-scrollbar { width: 6px; }
.pg-chat::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* Empty state */
.pg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
  margin: auto 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.pg-empty.gone {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  position: absolute;
}
.pg-empty-icon {
  font-size: 28px;
  color: var(--accent);
  animation: pg-bounce 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes pg-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.pg-empty-text {
  font-size: 14px;
  color: var(--ink-3);
  max-width: 32ch;
  line-height: 1.5;
}

/* Messages (created dynamically by playground.js) */
.pg-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease-out), transform .4s var(--ease-out);
}
.pg-msg.in { opacity: 1; transform: translateY(0); }
.pg-msg.out { align-items: flex-end; }
.pg-msg.ai { align-items: flex-start; }
.pg-msg.ai-host { align-items: flex-start; }

.pg-msg-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 0 4px;
}
.pg-msg.ai .pg-msg-meta { color: var(--accent); }
.pg-msg.ai .pg-msg-meta::before {
  content: "● ";
  color: var(--accent);
}
.pg-msg.ai-host .pg-msg-meta { color: var(--warn); }
.pg-msg.ai-host .pg-msg-meta::before {
  content: "→ ";
  color: var(--warn);
}

.pg-msg-bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 82%;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  word-wrap: break-word;
}
.pg-msg.out .pg-msg-bubble {
  background: var(--paper-3);
  color: var(--ink);
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.pg-msg.ai .pg-msg-bubble {
  background: var(--ink);
  color: #fff;
  border-bottom-left-radius: 4px;
}
.pg-msg.ai-host .pg-msg-bubble {
  background: var(--warn-soft);
  color: var(--warn);
  border-bottom-left-radius: 4px;
  font-size: 13px;
  font-style: italic;
  border: 1px dashed rgba(184, 93, 0, 0.3);
}

/* Urgent badge inside AI bubble */
.pg-urgent-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Typewriter */
.pg-typewriter { white-space: pre-wrap; }
.pg-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-left: 2px;
  background: currentColor;
  animation: pg-caret-blink 1.05s steps(2) infinite;
  opacity: .8;
}
.pg-caret.gone {
  animation: none;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
@keyframes pg-caret-blink {
  0%, 50% { opacity: .8; }
  51%, 100% { opacity: 0; }
}

/* Message footer (time + lang) */
.pg-msg-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.pg-msg-foot.in { opacity: 1; transform: translateY(0); }
.pg-msg-foot .sep { opacity: .4; }
.pg-msg-foot .pg-foot-time { color: var(--good); }
.pg-msg-foot .pg-foot-lang strong { color: var(--ink-2); font-weight: 600; }

/* Typing indicator */
.pg-typing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ink);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.pg-typing.in { opacity: 1; transform: translateY(0); }
.pg-typing.out { opacity: 0; transform: translateY(-4px); }
.pg-typing-dots { display: inline-flex; gap: 4px; }
.pg-typing-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  animation: pg-typing-dot 1.3s ease-in-out infinite;
}
.pg-typing-dots span:nth-child(2) { animation-delay: .15s; }
.pg-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes pg-typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.pg-typing-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}

/* Suggestions — chips as primary interaction */
.pg-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  align-items: center;
}
.pg-suggestions-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  width: 100%;
  margin-bottom: 4px;
}
.pg-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition:
    border-color .2s var(--ease),
    background .2s var(--ease),
    transform .15s var(--ease),
    box-shadow .2s var(--ease);
  letter-spacing: -0.005em;
}
.pg-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(210,74,31,.25);
}
.pg-chip:active { transform: translateY(0); }
.pg-chip:disabled { opacity: .5; cursor: not-allowed; }
.pg-chip-icon { font-size: 14px; line-height: 1; }
.pg-chip-label { white-space: nowrap; }
.pg-chip-lang {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-4);
  font-weight: 500;
}

/* Disclaimer */
.pg-disclaimer {
  padding: 16px 20px;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-4);
  text-align: center;
  text-wrap: pretty;
}
.pg-disclaimer strong { color: var(--ink-2); font-weight: 500; }
.pg-disclaimer a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  font-weight: 500;
}
.pg-disclaimer a:hover { color: var(--accent-h); }

/* Mobile playground */
@media (max-width: 720px) {
  .pg-chat { min-height: 220px; max-height: 360px; padding: 16px; }
  .pg-msg-bubble { font-size: 14px; padding: 10px 14px; max-width: 90%; }
  .pg-chip { width: 100%; justify-content: flex-start; }
  .pg-chip-label { white-space: normal; }
  .pg-suggestions { padding: 16px; }
  .pg-disclaimer { padding: 14px 16px; font-size: 12px; }
}

/* ============================================================
   MOBILE NAV — hamburger + drawer
   ============================================================ */

/* Default: hide hamburger and mobile-only CTA text; show desktop text */
.nav-hamburger { display: none; }
.nav-cta-text-mobile { display: none; }
.nav-cta-text-desktop { display: inline; }

/* Drawer is hidden on desktop */
.nav-drawer { display: none; }

/* Mobile-only sticky CTA — hidden by default */
.sticky-cta-mobile { display: none; }

@media (max-width: 760px) {
  /* Hide ghost "Iniciar sesión" on mobile (lives in drawer) */
  .nav-login-desktop { display: none; }
  /* Show mobile-friendly CTA text */
  .nav-cta-text-desktop { display: none; }
  .nav-cta-text-mobile { display: inline; }

  /* Compact CTA with proper touch target (Apple HIG ≥44px) */
  .nav-cta-primary.btn-primary {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.88rem;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1;
  }

  /* Hero primary CTA also needs ≥44px touch target */
  .hero-ctas .btn-primary.btn-primary-lg {
    min-height: 48px;
    padding: 14px 20px;
    font-size: 1rem;
    line-height: 1.1;
    white-space: nowrap;
  }
  .hero-ctas .btn-outline {
    min-height: 48px;
    padding: 13px 18px !important;
    font-size: 0.95rem;
    line-height: 1.1;
  }

  /* Hamburger button */
  .nav-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    margin-left: 4px;
    background: transparent;
    border: 1px solid var(--line, #e8e6e1);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    transition: background .15s, border-color .15s;
  }
  .nav-hamburger:hover { background: rgba(0,0,0,.04); }
  .nav-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #0a0a0a;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Drawer */
  .nav-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
  }
  .nav-drawer.is-open { pointer-events: auto; }
  .nav-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.45);
    opacity: 0;
    transition: opacity .25s ease;
  }
  .nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }
  .nav-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(82vw, 320px);
    background: #fafaf9;
    box-shadow: -12px 0 40px -10px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    padding: 72px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
  }
  .nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }
  .nav-drawer-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: #525252;
    cursor: pointer;
    border-radius: 8px;
  }
  .nav-drawer-close:hover { background: rgba(0,0,0,.05); color: #0a0a0a; }
  .nav-drawer-panel a {
    display: flex;
    align-items: center;
    padding: 14px 14px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    min-height: 48px;
    transition: background .15s;
  }
  .nav-drawer-panel a:hover { background: rgba(0,0,0,.04); }
  .nav-drawer-panel .nav-drawer-login {
    margin-top: 12px;
    border-top: 1px solid #e8e6e1;
    padding-top: 18px;
    color: #525252;
    font-weight: 500;
    border-radius: 0;
  }
  .nav-drawer-panel .nav-drawer-cta {
    margin-top: 10px;
    background: #0a0a0a;
    color: #fafaf9;
    justify-content: center;
    font-weight: 600;
    border-radius: 12px;
    padding: 16px 18px;
    min-height: 52px;
    gap: 8px;
  }
  .nav-drawer-panel .nav-drawer-cta:hover { background: #d24a1f; color: #fff; }

  /* Sticky bottom CTA */
  .sticky-cta-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 800;
    height: 56px;
    background: #0a0a0a;
    color: #fafaf9;
    font-family: var(--sans, "Geist", -apple-system, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    box-shadow: 0 -8px 28px -8px rgba(0,0,0,.25);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    padding: 0 16px;
    /* Safe area for iOS notch / home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-cta-mobile.is-visible { transform: translateY(0); }
  .sticky-cta-mobile:hover { background: #d24a1f; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer-panel,
  .nav-drawer-backdrop,
  .sticky-cta-mobile { transition: none !important; }
}

/* ============================================================
   PRICING — reordered (Ultra · Pro · Básico) + tier-specific CTAs
   ============================================================ */

/* "Más popular" pill: visually stronger than the other tag pills */
.price-tag-pill.price-tag-pop {
  background: linear-gradient(135deg, #d24a1f 0%, #f17a3c 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700;
  font-size: 10px !important;
  letter-spacing: 0.06em;
  padding: 4px 10px !important;
  box-shadow: 0 4px 14px -4px rgba(210, 74, 31, 0.45);
}
.price-card.featured .price-tag-pill.price-tag-pop {
  background: linear-gradient(135deg, #f17a3c 0%, #ffb88a 100%) !important;
  color: #1a1a1a !important;
}

/* Pro CTA — terracota prominente */
.price-card.featured .price-cta.solid {
  background: #d24a1f;
  color: #fff;
  font-weight: 600;
}
.price-card.featured .price-cta.solid:hover {
  background: #b53e18;
  color: #fff;
}

/* Mobile: Pro card first (featured siempre arriba en móvil) */
@media (max-width: 900px) {
  .pricing-grid-reordered { display: flex; flex-direction: column; gap: 1rem; }
  .pricing-grid-reordered .price-card-pro { order: -1; }
  .pricing-grid-reordered .price-card-basic { order: 1; }
  .pricing-grid-reordered .price-card-ultra { order: 2; }
}

/* ============================================================
   CALCULADORA · Mobile compact (max 760px)
   El layout default es muy generoso en pantalla pequeña: card
   gigante, número 28px, padding 48px. En mobile compactamos
   para que entre toda la calc en 1-1.5 viewports sin perderse.
============================================================ */
@media (max-width: 760px) {
  /* Sección entera con menos padding vertical */
  .section-berriup.calc-berriup {
    padding: 56px 16px;
  }
  .section-berriup.calc-berriup .section-head {
    margin-bottom: 1.8rem;
  }
  .section-berriup.calc-berriup h2.h2 {
    font-size: 26px;
    line-height: 1.12;
  }
  .section-berriup.calc-berriup .section-head p {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Card interna más compacta */
  .calc-berriup .calc {
    padding: 20px 16px;
    border-radius: 12px;
  }

  /* Header del calc: vertical + más denso */
  .calc-berriup .calc-head {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 18px;
  }
  .calc-berriup .calc-label {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .calc-berriup .calc-slider-row {
    gap: 12px;
  }
  .calc-berriup .calc-value {
    padding: 7px 12px;
    min-width: 78px;
    border-radius: 8px;
  }
  .calc-berriup .calc-value strong { font-size: 17px; }
  .calc-berriup .calc-value span { font-size: 11px; }

  /* Pill terracota más pequeña y full-width */
  .calc-berriup .calc-result-pill {
    align-self: stretch;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 999px;
  }
  .calc-berriup .calc-result-pill .num {
    font-size: 20px;
  }
  .calc-berriup .calc-result-pill .lbl {
    font-size: 10px;
  }

  /* Bars: menos gap entre bloques */
  .calc-berriup .calc-bars {
    gap: 14px;
  }
  .calc-berriup .bar-row {
    gap: 6px;
    padding-bottom: 12px;
  }
  .calc-berriup .bar-name {
    font-size: 14px;
  }
  .calc-berriup .bar-sub {
    font-size: 12px;
    line-height: 1.35;
  }
  .calc-berriup .bar-track {
    height: 12px;
  }
  .calc-berriup .bar-cost strong { font-size: 15px; }
  .calc-berriup .bar-cost .bar-unit { font-size: 12px; }
  .calc-berriup .bar-cost .bar-ratio {
    font-size: 11px;
    padding: 2px 7px;
  }

  /* Summary: stack vertical compacto */
  .calc-berriup .calc-summary {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
    padding-top: 18px;
    margin-top: 18px;
  }
  .calc-berriup .summary-cell .num {
    font-size: 20px;
  }
  .calc-berriup .summary-cell .lbl {
    font-size: 10px;
  }
  .calc-berriup .summary-cta {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  .calc-berriup .summary-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
  }
}

/* ============================================================
   TRUST BAR · Logos SVG inline (Booking, Smoobu, Gemini, Civitatis)
============================================================ */
.trust-item .trust-logo {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
}
/* En mobile reduce un pelín para no romper el wrap */
@media (max-width: 480px) {
  .trust-item .trust-logo { width: 1rem; height: 1rem; vertical-align: -2px; }
}

/* ============================================================
   HERO · Puente de dolor entre titular y subtitular
   "Ni a las tres. Ni desde la cama. Ni cuando estás cenando..."
   Tono más íntimo, fuente serif italic, gris medio.
============================================================ */
.hero .hero-pain {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: #6b6760;
  margin: 0.75rem 0 1.25rem;
  max-width: 540px;
  letter-spacing: -0.005em;
}
.hero .hero-sub strong {
  color: #1a1a1a;
  font-weight: 600;
}
.hero .hero-sub em {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #d24a1f;
  font-weight: 400;
  letter-spacing: -0.005em;
}
@media (max-width: 760px) {
  .hero .hero-pain {
    font-size: 1.05rem;
    margin: 0.5rem 0 1rem;
  }
}