/* Tipografía base */
:root {
  --bg-opacity: 0.45;
  --blur-radius: 14px;
  --text-color: #ffffff;
  --accent-color: #c69a86; /* tono arena como en app */
  --panel-bg: #ffffff;
  --panel-text: #1b1b1f;
  --muted: #6b7280;
  --border: #e9e9ee;
  --logo-size: clamp(120px, 10vmin, 240px); /* tamaño del logo */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-color);
  background: #ffffff;
  overflow: auto;
}

/* Fondo con logo desenfocado */
.bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,15,18,0.4), rgba(15,15,18,0.4)),
    url('/assets/logo.svg'); /* También puedes usar logo.png */
  background-size: cover, var(--logo-size);
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(var(--blur-radius));
  transform: none;
  opacity: var(--bg-opacity);
  z-index: 0;
}

.container {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

.title {
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
}

.subtitle {
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 400;
  opacity: 0.9;
  margin: 0;
}

/* Encabezado / navegación */
.site-header { position: relative; z-index: 2; }
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
.brand { color: #1b1b1f; text-decoration: none; font-weight: 800; letter-spacing: -0.02em; }
.links a { color: #1b1b1f; text-decoration: none; margin-left: 16px; opacity: 0.9; }
.links a:hover { opacity: 1; }
.btn-text { padding: 8px 12px; border-radius: 10px; }
.btn-outline { padding: 8px 12px; border-radius: 10px; border:2px solid #000; color:#000; }

.footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 24px;
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
  z-index: 2;
}

/* Home sections */
.home-header { position: sticky; top:0; backdrop-filter: blur(6px); background: #ffffff; border-bottom: 1px solid #eee; }
.home { display: grid; gap: 48px; }
.hero { position: relative; min-height: 56vh; display: grid; place-items: center; background: #101114; color:#fff; }
.hero-bg { display:none; }
.hero-inner { position:relative; text-align:center; padding: 100px 24px; }
.hero-title { font-size: clamp(40px, 6vw, 68px); font-weight: 800; letter-spacing: -0.02em; }
.hero-title span { color: #fff; }
.hero-sub { margin-top: 8px; opacity:.95; font-size: 18px; }
.search { margin: 18px auto 0; display: flex; gap: 8px; background: rgba(255,255,255,.9); border-radius: 999px; padding: 8px; width: min(640px, 92%); }
.search input { flex:1; border:0; outline:0; background: transparent; color:#111; padding: 10px 12px; border-radius: 999px; }
.search button { border:0; background:#fff; border-radius: 999px; padding: 10px 16px; cursor:pointer; }

.steps { background: #ffffff; color:#1b1b1f; }
.steps-wrap { max-width: 1400px; margin: 0 auto; padding: 48px 24px; display:grid; grid-template-columns: 708px 680px; gap: 12px; align-items: center; justify-content: center; }
.steps-text { max-width: 820px; justify-self: end; }
.steps-text h2 { font-size: 32px; margin-bottom: 16px; color:#1b1b1f; }
.step-list { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.step-list li { display:flex; gap:12px; background:#fff; border:1px solid #eee; border-radius:14px; padding:14px; align-items:flex-start; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.step-list h3 { margin:0 0 4px 0; font-size:16px; color:#111; }
.step-list p { margin:0; color:#4b5563; font-size:14px; }
.icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#eef2f7; }
.steps-card { background:#fff; border:1px solid #eee; border-radius:16px; overflow:hidden; box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.steps-card img { display:block; width:100%; height:220px; object-fit:contain; background: transparent; }
.steps-card-info { padding:14px; display:grid; gap:8px; }
.steps-card.image-only { padding:0; background: transparent; border: 0; box-shadow: none; overflow: visible; justify-self: end; align-self: center; }
.steps-card.image-only img { height: 680px; background: transparent; border-radius: 16px; }
.btn-solid { background: var(--accent-color); color:#1b1b1f; border:0; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; }

.business-cta { position: relative; overflow: hidden; }
.business-bg { position:absolute; inset:0; background: url('/assets/Fondo%20Negocio.svg') left center/cover no-repeat; }
.business-content { position: relative; max-width: 1400px; margin: 0 auto; padding: 64px -100px; display:grid; grid-template-columns: 1fr 700px; align-items: center; gap: 24px; }
.business-left h3 { font-size: 32px; color:#111; max-width: 520px; }
.business-button { display:inline-block; margin-top: 16px; padding: 12px 18px; border: 2px solid #000; border-radius: 999px; color:#000; text-decoration: none; font-weight:700; background: rgba(255,255,255,0.0); }
.business-right { justify-self: end; }
.business-right img { width: 100%; height: auto; display:block; }

.subscribe { background: transparent; }
.subscribe-inner { max-width: 1100px; margin: 0 auto; padding: 48px 24px; color:#1b1b1f; }
.subscribe-card { background: #f3ebe6; border-radius: 36px; padding: 28px 24px 36px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.subscribe-title { margin: 0 auto 20px auto; font-size: 22px; line-height: 1.5; max-width: 780px; }
.subscribe-form { display:flex; gap: 16px; justify-content:center; align-items:center; margin-top: 8px; }
.input-group { position: relative; }
.input-group .icon { position:absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity:.7; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.input-group .icon svg { display:block; }
.subscribe-form input { width: 420px; border-radius: 14px; border:1px solid #eadfd7; padding: 16px 16px 16px 56px; background:#fff; color:#111; font-size: 14px; }
.btn-pill { padding: 12px 20px; border-radius: 999px; border: 0; background: #c69a86; color:#fff; font-weight:600; cursor:pointer; font-size: 14px; }

.site-footer { background:#fff; color:#1b1b1f; border-top: 1px solid #eee; }
.footer-inner { max-width:1100px; margin:0 auto; padding: 24px; display:grid; grid-template-columns: auto 1fr; gap:24px; align-items:start; }
.f-brand img { height:24px; display:block; }
.f-cols { display:flex; flex-direction: column; gap: 6px; align-items:flex-start; }
.f-title { font-weight:700; margin-bottom:6px; }
.site-footer a { color:#1b1b1f; text-decoration:none; opacity:.9; }
.footer-copy { text-align:center; padding: 12px 0 24px; color:#6b7280; }

/* Responsive */
@media (max-width: 768px) {
  .nav { padding: 12px 16px; gap: 8px; flex-wrap: wrap; }
  .links a { margin-left: 12px; font-size: 14px; }

  .home { gap: 32px; }
  .hero { min-height: 48vh; }
  .hero-inner { padding: 64px 16px; }
  .hero-title { font-size: clamp(28px, 8vw, 40px); }
  .hero-sub { font-size: 16px; }
  .search { width: calc(100% - 32px); }

  .steps-wrap { grid-template-columns: 1fr; gap: 16px; padding: 32px 16px; }
  .steps-text { justify-self: start; max-width: 100%; }
  .steps-card.image-only { justify-self: center; }
  .steps-card.image-only img { height: 360px; }

  .business-content { grid-template-columns: 1fr; padding: 40px 0; gap: 16px; }
  .business-left h3 { font-size: 24px; max-width: 100%; padding: 0 16px; text-align: center; }
  .business-button { margin-left: 16px; margin-right: 16px; }
  .business-right { justify-self: center; padding: 0 16px; }

  .subscribe-inner { padding: 32px 16px; }
  .subscribe-card { border-radius: 28px; padding: 20px 16px 24px; }
  .subscribe-title { font-size: 20px; max-width: 100%; }
  .subscribe-form { flex-direction: column; gap: 12px; }
  .subscribe-form input { width: 100%; }
  .btn-pill { width: 100%; }

  .footer-inner { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .f-brand { justify-self: center; }
  .f-cols { align-items: center; }
}
/* --- Estética clara reusable para páginas internas --- */
body.light-page { background: #f6f7fb; color: #1b1b1f; overflow: auto; }
.page-wrap { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar {
  background: #ffffffcc; backdrop-filter: blur(10px);
  border-bottom: 1px solid #eee;
}
.topbar .nav { color: #1b1b1f; }
.topbar .brand { color: #1b1b1f; }
.topbar .links a { color: #1b1b1f; }
.content { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.panel { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.panel h1 { margin: 0 0 8px 0; font-size: 28px; }
.panel p { color: #4b5563; }
.form { display: grid; gap: 12px; }
.field label { display:block; color:#6b7280; font-size:13px; margin-bottom:6px; }
.input, .textarea {
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
  padding: 10px 12px; color:#111;
}
.textarea { min-height: 120px; resize: vertical; }
.btn { background: var(--accent-color); color:#1b1b1f; border:0; border-radius:10px; padding:12px 16px; font-weight:700; cursor:pointer; }

@media (prefers-reduced-motion: no-preference) {
  .bg { transition: opacity 800ms ease; }
  body:hover .bg { opacity: calc(var(--bg-opacity) + 0.05); }
}