/* Blenify · página de inicio (por ahora solo el encabezado y el pie, como el prototipo) */
:root {
  --verde: #123b3b; --verde-2: #1d5252; --verde-suave: #e3f3ef;
  --terracota: #bf5b3b; --terracota-luz: #d8683f;
  --fondo: #ffffff; --fondo-2: #f6f8f8;
  --tx: #10181f; --tx-2: #55626d; --tx-3: #8a949d;
  --linea: rgba(16, 24, 31, .09); --linea-2: rgba(16, 24, 31, .16);
  --f-display: 'Sora', 'Manrope', system-ui, sans-serif;
  --f-texto: 'Manrope', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tx); font: 500 16px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, .h-logo, b { font-family: var(--f-display); }
h1 { margin: 0; letter-spacing: -.035em; line-height: 1.06; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h-caja { max-width: 1140px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* Botones */
.h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 11px 20px; font: 800 .92rem var(--f-texto); border: 1.5px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; position: relative; overflow: hidden; }
.h-btn:hover { transform: translateY(-2px); }
.h-btn-acento { background: linear-gradient(135deg, #d8683f, var(--terracota)); color: #fff; box-shadow: 0 10px 26px -10px rgba(191, 91, 59, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.h-btn-acento::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.h-btn-acento:hover::after { transform: translateX(120%); }
.h-btn-linea { border-color: var(--linea-2); color: var(--tx); background: rgba(255, 255, 255, .7); }
.h-btn-linea:hover { border-color: var(--verde-2); background: #fff; }
.h-btn-fantasma { color: var(--tx-2); }
.h-btn-fantasma:hover { color: var(--tx); }
.h-btn-grande { padding: 16px 28px; font-size: 1.02rem; }
.h-flecha { transition: transform .2s; }
.h-btn:hover .h-flecha { transform: translateX(4px); }

/* Encabezado */
.h-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px); border-bottom: 1px solid var(--linea); }
.h-nav-fila { display: flex; align-items: center; gap: 28px; height: 72px; }
.h-logo { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 1.24rem; letter-spacing: -.025em; color: var(--tx); }
.h-logo-img { width: 29px; height: 29px; object-fit: contain; display: inline-block; }
.h-nav-der { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* Centro (mínimo, hasta que armemos la página completa) */
.h-centro { flex: 1; display: grid; place-items: center; padding: 72px 0; background: radial-gradient(60% 60% at 50% 0%, var(--verde-suave), transparent 70%); }
.h-centro .h-caja { text-align: center; }
.h-centro h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); max-width: 760px; margin: 0 auto; }
.h-centro p { color: var(--tx-2); font-size: 1.1rem; max-width: 560px; margin: 16px auto 28px; }
.h-centro small { display: block; margin-top: 14px; color: var(--tx-3); font-size: .84rem; }

/* Pie */
.h-pie { border-top: 1px solid var(--linea); padding: 56px 0 28px; font-size: .9rem; background: #fff; }
.h-pie-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.h-redes { display: flex; gap: 8px; margin-top: 18px; }
.h-redes a { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--linea); display: inline-flex; align-items: center; justify-content: center; color: var(--tx-2); transition: color .2s, border-color .2s, background .2s, transform .2s; }
.h-redes a:hover { color: #fff; background: var(--verde); border-color: var(--verde); transform: translateY(-2px); }
.h-redes svg { width: 18px; height: 18px; }
.h-pie nav { display: flex; flex-direction: column; gap: 9px; color: var(--tx-2); }
.h-pie nav b { color: var(--tx); font-size: .9rem; margin-bottom: 2px; }
.h-pie nav a:hover { color: var(--tx); }
.h-pie-legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea); color: var(--tx-3); font-size: .8rem; }

@media (max-width: 1024px) { .h-pie-grid { grid-template-columns: 1fr 1fr; } }
/* Teléfono: en el encabezado quedan el logo, Iniciar sesión y Probar gratis (sin menú, porque no hay secciones) */
@media (max-width: 640px) {
  .h-caja { padding: 0 16px; }
  .h-nav-fila { gap: 10px; height: 64px; }
  .h-logo { font-size: 1.1rem; }
  .h-logo-img { width: 26px; height: 26px; }
  .h-nav-der .h-btn { padding: 9px 13px; font-size: .84rem; }
  .h-centro { padding: 52px 0; }
  .h-centro .h-btn-grande { width: 100%; }
  .h-pie-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) { .h-largo { display: none; } .h-nav-der .h-btn-fantasma { padding-left: 6px; padding-right: 6px; } }
@media (max-width: 330px) { .h-nav-der .h-btn-fantasma { display: none; } }
