/* ===================================================================
   Kreahouse — landing (kreahouse.com)
   Tema: oscuro y elegante (mismo lenguaje que la app).
   Carbón + terracota cálida. Titulares serif (Fraunces), texto Inter.
   =================================================================== */
:root {
  --bg:        #15171C;
  --bg-2:      #1B1E25;
  --card:      #1E222B;
  --card-2:    #242936;
  --line:      #2E333E;
  --ink:       #ECEDEF;
  --ink-soft:  #B7BCC6;
  --muted:     #8A909C;
  --accent:    #E0855A;
  --accent-2:  #E8A06E;
  --accent-deep:#C9683F;
  --gold:      #E9C27A;
  --grad:      linear-gradient(115deg, #E8A06E 0%, #E0855A 45%, #C9683F 100%);
  --grad-text: linear-gradient(115deg, #F0B385 0%, #E0855A 60%, #E9C27A 100%);
  --radius:    18px;
  --shadow:    0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --maxw:      1120px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, .serif { font-family: "Fraunces", Georgia, "Times New Roman", serif; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* HEADER */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(21,23,28,.72);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.brand__logo { border-radius: 9px; box-shadow: var(--shadow-sm); }
.brand__name { font-family: "Fraunces", serif; font-size: 1.3rem; letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--ink-soft); font-weight: 500; font-size: .95rem; transition: color .15s; }
.nav a:hover { color: var(--ink); }
.nav__cta {
  background: var(--accent); color: #1a1206 !important;
  padding: 9px 18px; border-radius: 999px; font-weight: 700;
  transition: background .2s, transform .12s, box-shadow .2s;
}
.nav__cta:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(224,133,90,.35); }

/* BOTONES */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  transition: transform .14s var(--ease), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--grad); color: #1a1206; box-shadow: 0 10px 26px rgba(224,133,90,.34); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(224,133,90,.46); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-2px); }
.btn--lg { padding: 17px 38px; font-size: 1.1rem; }

/* badge tienda */
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-soft); font-weight: 600; font-size: .9rem;
}
.store-badge b { color: var(--ink); font-family: "Fraunces", serif; font-weight: 600; }
.store-badge .soon { color: var(--accent-2); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* HERO */
.hero { position: relative; padding: 78px 0 96px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 56% at 82% 8%, rgba(224,133,90,.20), transparent 60%),
    radial-gradient(40% 50% at 6% 16%, rgba(233,194,122,.10), transparent 60%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--accent-2);
  background: rgba(224,133,90,.1); border: 1px solid rgba(224,133,90,.24);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(233,194,122,.55); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(233,194,122,.5);} 70%{box-shadow:0 0 0 9px rgba(233,194,122,0);} 100%{box-shadow:0 0 0 0 rgba(233,194,122,0);} }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.7rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.06; }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__sub { margin-top: 22px; font-size: 1.16rem; color: var(--ink-soft); max-width: 540px; }
.hero__actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__points { margin-top: 28px; display: flex; gap: 22px; list-style: none; flex-wrap: wrap; color: var(--ink-soft); font-weight: 600; font-size: .92rem; }
.hero__points li::before { content: "✓ "; color: var(--accent-2); font-weight: 800; }

/* PHONE MOCKUP — pantalla de resultado (antes/después) */
.hero__phone { position: relative; display: grid; place-items: center; }
.phone__glow { position: absolute; inset: 6% 16%; background: var(--grad); filter: blur(70px); opacity: .30; border-radius: 50%; z-index: 0; }
.phone {
  position: relative; z-index: 1;
  width: 286px; height: 580px;
  background: #0E0F13; border-radius: 46px;
  padding: 12px; box-shadow: var(--shadow);
  border: 1px solid #2a2d36;
}
.phone__notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 112px; height: 24px; background: #0E0F13; border-radius: 0 0 16px 16px; z-index: 3; }
.phone__screen { width: 100%; height: 100%; background: var(--bg); border-radius: 35px; overflow: hidden; }
.app { padding: 38px 16px 16px; height: 100%; display: flex; flex-direction: column; gap: 12px; }
.app__top { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; }
.app__top span:first-child { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.2rem; }
.app__top small { color: var(--muted); font-size: .72rem; }

/* tarjeta antes/después con divisor */
.ba {
  position: relative; border-radius: 16px; overflow: hidden; height: 230px;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.room { position: absolute; inset: 0; }
/* habitación "después": pared cálida, suelo madera, sofá, planta, lámpara */
.room--after { background: linear-gradient(180deg, #3a3a44 0%, #43424c 58%, #5a4636 58%, #6b513c 100%); }
.room--before { background: linear-gradient(180deg, #4c4d54 0%, #54555c 58%, #5b5852 58%, #66635c 100%); filter: saturate(.55) brightness(.92); }
.room .win { position: absolute; top: 16px; right: 20px; width: 58px; height: 70px; border-radius: 6px;
  background: linear-gradient(180deg, #cfe4ee, #acc7d6); box-shadow: inset 0 0 0 3px #2c2c34, 0 0 26px rgba(207,228,238,.35); }
.room .win::after { content:""; position:absolute; inset:0; background:
  linear-gradient(#2c2c34,#2c2c34) center/3px 100% no-repeat,
  linear-gradient(#2c2c34,#2c2c34) center/100% 3px no-repeat; }
.room .lamp { position: absolute; top: 0; left: 34%; width: 2px; height: 30px; background: #2a2a30; }
.room .lamp::after { content:""; position:absolute; top:28px; left:-9px; width:20px; height:12px; border-radius:0 0 12px 12px; background: var(--gold);
  box-shadow: 0 8px 30px 6px rgba(233,194,122,.5); }
.room .sofa { position: absolute; left: 16px; bottom: 30px; width: 116px; height: 46px; border-radius: 12px 12px 6px 6px;
  background: var(--accent); box-shadow: inset 0 6px 0 rgba(255,255,255,.12), 0 6px 12px rgba(0,0,0,.35); }
.room .sofa::before { content:""; position:absolute; left:8px; top:-12px; width:100px; height:18px; border-radius:9px; background: var(--accent-2); }
.room .cushion { position:absolute; left:34px; bottom:46px; width:20px; height:18px; border-radius:5px; background: var(--gold); }
.room .rug { position: absolute; left: 30px; bottom: 16px; width: 150px; height: 14px; border-radius: 50%; background: rgba(233,194,122,.28); }
.room .plant { position: absolute; right: 20px; bottom: 28px; width: 26px; height: 50px; }
.room .plant i { position:absolute; bottom:0; left:9px; width:10px; height:14px; background:#7a5638; border-radius:2px; }
.room .plant b { position:absolute; bottom:10px; left:50%; width:7px; height:42px; border-radius:50% 50% 40% 40%; background:#5f8f5a; transform-origin:bottom center; }
.room .plant b:nth-child(2){ transform: translateX(-50%) rotate(-26deg);}
.room .plant b:nth-child(3){ transform: translateX(-50%) rotate(0);}
.room .plant b:nth-child(4){ transform: translateX(-50%) rotate(26deg);}
.room .art { position:absolute; top:18px; left:22px; width:30px; height:22px; border-radius:3px; background: linear-gradient(135deg,#c98a5c,#7a9e8e); box-shadow:0 0 0 3px #2c2c34; }
/* divisor antes/después */
.ba__clip { position:absolute; inset:0; width:50%; overflow:hidden; }
.ba__divider { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.6); z-index:4; }
.ba__knob { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  width:30px; height:30px; border-radius:50%; background:#fff; color:#15171C; display:grid; place-items:center; font-size:.85rem; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.ba__tag { position:absolute; bottom:8px; z-index:4; font-size:.6rem; font-weight:800; letter-spacing:.1em; padding:3px 7px; border-radius:6px; background:rgba(0,0,0,.5); color:#fff; }
.ba__tag.l { left:8px; } .ba__tag.r { right:8px; }

.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chip { font-size:.72rem; font-weight:600; padding:6px 11px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); background:var(--card); }
.chip.on { background: rgba(224,133,90,.16); border-color: rgba(224,133,90,.4); color: var(--accent-2); }
.analysis-mini { background: var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.analysis-mini p { font-size:.74rem; color:var(--ink-soft); line-height:1.5; }
.analysis-mini p b { color: var(--ink); font-weight:700; }
.app__cta { margin-top:auto; background: var(--grad); color:#1a1206; text-align:center; font-weight:800; font-size:.86rem; padding:11px; border-radius:12px; }

/* SECCIONES */
.section { padding: 92px 0; }
.section__head { max-width: 660px; margin-bottom: 46px; }
.section__head--center { margin: 0 auto 46px; text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 700; color: var(--accent); }
.section h2 { margin-top: 12px; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; }
.section__lead { margin-top: 14px; color: var(--ink-soft); font-size: 1.06rem; }

/* GRID FUNCIONES */
.grid { display: grid; gap: 18px; }
.grid--features { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(224,133,90,.4); }
.ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; font-size: 1.5rem; margin-bottom: 16px; background: rgba(224,133,90,.12); }
.card h3 { font-size: 1.18rem; font-weight: 600; }
.card p { margin-top: 8px; color: var(--ink-soft); font-size: .96rem; }

/* PASOS / IA (panel elevado con acento) */
.section--ia { }
.ia-panel {
  background: linear-gradient(160deg, #20242e 0%, #1b1e26 100%);
  border: 1px solid var(--line); border-radius: 32px; padding: 56px 40px;
  position: relative; overflow: hidden;
}
.ia-panel::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(50% 60% at 90% 0%, rgba(224,133,90,.14), transparent 60%); }
.grid--ia { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); position:relative; z-index:1; }
.ia-card { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 26px 24px; transition: transform .25s var(--ease), background .25s; }
.ia-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.06); }
.ia-card__ico { width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 14px; background: var(--grad); margin-bottom: 16px; }
.ia-card h3 { font-size: 1.14rem; font-weight: 600; }
.ia-card p { margin-top: 8px; color: var(--ink-soft); font-size: .95rem; }

/* PRIVACIDAD */
.section--privacy .privacy {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 28px; padding: 56px 36px;
}
.privacy__icon { font-size: 2.4rem; width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 22px; background: var(--card); border:1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); }
.privacy h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 600; letter-spacing: -.01em; }
.privacy p { margin-top: 16px; color: var(--ink-soft); font-size: 1.06rem; }
.privacy__tags { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.privacy__tags span { background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); font-weight: 600; font-size: .85rem; padding: 8px 16px; border-radius: 999px; }

/* CTA */
.cta { padding: 100px 0; text-align: center; }
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta img { margin-bottom: 18px; border-radius: 16px; box-shadow: var(--shadow); }
.cta h2 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); font-weight: 600; letter-spacing: -.01em; }
.cta p { margin: 14px auto 28px; max-width: 470px; color: var(--ink-soft); font-size: 1.06rem; }
.cta__actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; }

/* FOOTER */
.site-footer { border-top: 1px solid var(--line); padding: 30px 0; }
.site-footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.site-footer__brand { display: inline-flex; align-items: center; gap: 9px; font-family:"Fraunces",serif; font-weight: 600; }
.site-footer__brand img { border-radius: 6px; }
.site-footer__links { display:flex; gap:18px; align-items:center; }
.site-footer__links a { color: var(--ink-soft); font-size:.9rem; }
.site-footer__links a:hover { color: var(--ink); }
.site-footer__by { color: var(--muted); font-size: .88rem; }
.site-footer__by a { color: var(--accent-2); font-weight: 600; }

/* RESPONSIVE */
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__phone { order: -1; }
  .phone { width: 248px; height: 502px; }
  .ia-panel { padding: 44px 24px; }
}
@media (max-width: 600px) {
  .nav { gap: 12px; }
  .nav a:not(.nav__cta) { display: none; }
  .section { padding: 66px 0; }
}