/* ==========================================================================
   Refresh (nov 2026): presencia de marca + diseño móvil más liviano
   Se carga después de styles.css. Para volver al diseño anterior basta quitar el <link> de este archivo.
   ========================================================================== */

/* --- Presencia de marca: el cubo del favicon como señal discreta --- */
.eyebrow::before{
  content:""; display:inline-block; width:0.8em; height:0.95em; margin-right:0.55em;
  background:url('/img/marca-cubo.png') center/contain no-repeat; vertical-align:-0.12em;
}
.hero::before{
  content:""; position:absolute; right:7%; bottom:-6%; width:300px; height:350px; z-index:0; pointer-events:none;
  background:url('/img/marca-cubo.png') center/contain no-repeat; opacity:0.08;
}
.section-head{ margin-left:0; }
.section-head.center{ margin-left:auto; }

/* Menú: se oculta al bajar y reaparece al subir (lo activa nav.js) */
.nav{ transition:transform .25s ease; }
.nav.nav--oculto{ transform:translateY(-100%); }

@media (max-width:760px){
  :root{ --fs-hero:2.05rem; --fs-h1:1.7rem; --fs-h2:1.4rem; --fs-body:1rem; }
  .container{ padding:0 1.25rem; }
  .nav-inner{ padding:0.65rem 1.25rem; }
  .brand img{ height:26px; }

  /* Ritmo vertical más compacto */
  section{ padding:2.6rem 0; }
  .section-tight{ padding:1.8rem 0; }
  .section-head{ margin-bottom:1.5rem; }
  .grid{ gap:1.1rem; }
  .grid-4{ grid-template-columns:1fr 1fr; gap:1.2rem 1rem; }
  .stat .num{ font-size:2.1rem; }
  .stat .label{ font-size:0.85rem; }
  .card, .card-tool{ padding:1.4rem; }

  /* Botones: planos, mismo contorno de píldora, texto centrado */
  .btn{ padding:0.75rem 1.25rem; font-size:0.95rem; box-shadow:none; }
  .btn-sm{ padding:0.55rem 1rem; }
  .btn-primary,.btn-amber{ box-shadow:none; }
  .btn-outline{ border-width:1px; }
  .hero-ctas{ flex-direction:column; gap:0.7rem; margin-top:1.5rem; }
  .hero-ctas .btn{ width:100%; }
  .solo-escritorio{ display:none; }

  /* Hero claro, tipo Braun: fondo blanco, texto oscuro, un solo acento */
  .hero{ background:var(--white); color:var(--ink); padding:2rem 0 2.2rem !important; border-bottom:1px solid var(--line); }
  .hero::before{ right:-40px; bottom:auto; top:1.2rem; width:150px; height:175px; opacity:0.07; }
  .hero::after, .hero-mask{ display:none; }
  .hero h1{ color:var(--ink); max-width:none; }
  .hero .lede{ color:var(--slate); font-size:1.05rem; }
  .eyebrow.on-dark{ color:var(--teal); }
  .btn-ghost{ color:var(--ink); border-color:var(--line); }
  .hero-pillars{ flex-direction:column; gap:0.9rem; margin-top:1.8rem; }
  .hero-pillar{ color:var(--slate); border-left-color:var(--teal-bright); max-width:none; padding-left:0.9rem; }
  .hero-pillar strong{ color:var(--ink); }

  /* Bandas oscuras → claras (las tarjetas conservan el contraste) */
  .section-ink{ background:var(--cloud); color:var(--ink); }
  .section-ink h2, .section-ink h3{ color:var(--ink); }
  .section-ink .lede, .section-ink p{ color:var(--slate); }
  .section-ink .eyebrow{ color:var(--teal); }
  .pillar-card h3{ color:var(--white); }
  .pillar-card p{ color:#D6E8EA; }

  .founder-block{ padding:1.3rem 1.3rem; }
  .founder-quote p.lede{ font-size:1.05rem; }
  .client-strip{ padding:2rem 0; }
  footer{ padding:2.4rem 0 1.5rem; }
}