/* Fyerro — landing. Paleta: carbón #171310, brasa #FF6B35, hierro #2C241D, hueso #EFE6DA, escoria #C33E12, dorado #E0A93E */
:root{
  --carbon:#171310;
  --carbon-2:#1E1915;
  --hierro:#2C241D;
  --brasa:#FF6B35;
  --escoria:#C33E12;
  --hueso:#EFE6DA;
  --hueso-60:rgba(239,230,218,.62);
  --hueso-30:rgba(239,230,218,.30);
  --dorado:#E0A93E;
  --radius:18px;
  --font-display:"Alfa Slab One",Georgia,serif;
  --font-body:"Archivo",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  background:var(--carbon);
  color:var(--hueso);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brasa)}
:focus-visible{outline:3px solid var(--brasa);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.12;letter-spacing:.01em}
h2{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:.5em}
.kicker{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brasa);display:block;margin-bottom:14px;
}
.muted{color:var(--hueso-60)}
section{padding:96px 0}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(23,19,16,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(239,230,218,.08);
}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--hueso)}
.brand-name{font-family:var(--font-display);font-size:1.25rem}
.site-nav{margin-left:auto;display:flex;gap:26px}
.site-nav a{
  color:var(--hueso-60);text-decoration:none;font-size:.95rem;font-weight:500;
}
.site-nav a:hover{color:var(--hueso)}
.btn{
  display:inline-block;padding:14px 28px;border-radius:12px;
  font-weight:700;font-size:1rem;text-decoration:none;text-align:center;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  border:0;cursor:pointer;font-family:var(--font-body);
}
.btn-primary{
  background:var(--brasa);color:#1a0d05;
  box-shadow:0 6px 24px rgba(255,107,53,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(255,107,53,.5)}
.btn-ghost{
  color:var(--hueso);border:1.5px solid rgba(239,230,218,.28);background:transparent;
}
.btn-ghost:hover{border-color:var(--brasa);color:var(--brasa)}
.header-cta{margin-left:6px;padding:10px 20px;font-size:.9rem}

/* ---------- Hero ---------- */
.hero{padding:160px 0 80px;position:relative}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(600px 400px at 78% 32%,rgba(255,107,53,.14),transparent 70%),
    radial-gradient(500px 320px at 12% 85%,rgba(195,62,18,.10),transparent 70%);
}
.hero .wrap{
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  position:relative;
}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--brasa)}
.hero-sub{font-size:1.2rem;color:var(--hueso-60);max-width:34em;margin-bottom:34px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-note{
  margin-top:18px;font-family:var(--font-mono);font-size:.8rem;color:var(--hueso-30);
}

/* ---------- Phone mockup ---------- */
.phone{
  position:relative;width:min(300px,78vw);margin:0 auto;
  background:#0B0908;border-radius:44px;padding:12px;
  border:1px solid rgba(239,230,218,.14);
  box-shadow:
    0 0 0 2px #262019,
    0 24px 70px rgba(0,0,0,.6),
    0 0 90px rgba(255,107,53,.16);
}
.phone::after{ /* notch */
  content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:34%;height:26px;background:#0B0908;border-radius:0 0 16px 16px;z-index:2;
}
.phone img{border-radius:33px;width:100%;height:auto}
.phone-sm{width:min(270px,72vw)}

/* ---------- Funciones ---------- */
.features{background:var(--carbon-2);border-top:1px solid rgba(239,230,218,.06);border-bottom:1px solid rgba(239,230,218,.06)}
.features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;
}
.feature{
  background:var(--carbon);border:1px solid rgba(239,230,218,.09);
  border-radius:var(--radius);padding:26px 24px;
  transition:border-color .2s ease,transform .2s ease;
}
.feature:hover{border-color:rgba(255,107,53,.5);transform:translateY(-3px)}
.feature-icon{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,107,53,.12);margin-bottom:16px;
}
.feature-icon svg{width:24px;height:24px;stroke:var(--brasa);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-family:var(--font-body);font-weight:700;font-size:1.06rem;margin-bottom:6px}
.feature p{font-size:.94rem;color:var(--hueso-60)}

/* ---------- IA / Rutinas splits ---------- */
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split-reverse .wrap > .split-media{order:2}
.steps{list-style:none;counter-reset:step;margin:30px 0}
.steps li{
  counter-increment:step;display:flex;gap:18px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid rgba(239,230,218,.08);
}
.steps li:last-child{border-bottom:0}
.steps li::before{
  content:counter(step);flex:0 0 40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.05rem;color:var(--brasa);
  background:rgba(255,107,53,.12);border:1px solid rgba(255,107,53,.35);
}
.steps strong{display:block;font-size:1.05rem}
.steps span{color:var(--hueso-60);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{
  font-family:var(--font-mono);font-size:.82rem;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,107,53,.4);color:var(--hueso);
  background:rgba(255,107,53,.08);
}
.checks{list-style:none;margin:26px 0}
.checks li{padding:9px 0 9px 34px;position:relative;color:var(--hueso-60)}
.checks li strong{color:var(--hueso)}
.checks li::before{
  content:"";position:absolute;left:0;top:14px;width:18px;height:18px;
  background:var(--brasa);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
}

/* ---------- Planes ---------- */
.pricing{background:var(--carbon-2);border-top:1px solid rgba(239,230,218,.06);border-bottom:1px solid rgba(239,230,218,.06);text-align:center}
.billing-toggle{
  display:inline-flex;align-items:center;gap:0;margin:22px auto 44px;
  border:1px solid rgba(239,230,218,.18);border-radius:999px;padding:4px;
  background:var(--carbon);
}
.billing-toggle button{
  border:0;background:transparent;color:var(--hueso-60);cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:.92rem;
  padding:10px 22px;border-radius:999px;transition:background .15s ease,color .15s ease;
}
.billing-toggle button[aria-pressed="true"]{background:var(--brasa);color:#1a0d05}
.billing-toggle .save{font-family:var(--font-mono);font-size:.72rem;display:block;letter-spacing:.02em}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
.plan{
  background:var(--carbon);border:1px solid rgba(239,230,218,.10);
  border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;
}
.plan-popular{border-color:var(--brasa);box-shadow:0 0 40px rgba(255,107,53,.15);position:relative}
.plan-elite{border-color:rgba(224,169,62,.55);box-shadow:0 0 40px rgba(224,169,62,.12)}
.plan-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--brasa);color:#1a0d05;font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;
  font-family:var(--font-mono);
}
.plan h3{font-family:var(--font-body);font-weight:800;font-size:1.15rem;margin-bottom:4px}
.plan-elite h3{color:var(--dorado)}
.plan-price{font-family:var(--font-display);font-size:2rem;margin:12px 0 2px}
.plan-price .cur{font-size:1rem;vertical-align:super}
.plan-per{font-family:var(--font-mono);font-size:.76rem;color:var(--hueso-30);margin-bottom:18px}
.plan ul{list-style:none;margin:0 0 24px;flex:1}
.plan ul li{padding:7px 0 7px 26px;position:relative;font-size:.92rem;color:var(--hueso-60)}
.plan ul li::before{
  content:"";position:absolute;left:0;top:12px;width:14px;height:14px;background:var(--brasa);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
}
.plan-elite ul li::before{background:var(--dorado)}
.plan .btn{width:100%}

/* ---------- Descargar ---------- */
.download{text-align:center}
.download .btn-primary{font-size:1.15rem;padding:20px 44px}
.badges{display:flex;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.badge-store{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid rgba(239,230,218,.18);border-radius:12px;padding:10px 20px;
  color:var(--hueso-60);
}
.badge-store svg{width:26px;height:26px}
.badge-store .b-top{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;display:block}
.badge-store .b-bot{font-weight:700;font-size:.98rem;color:var(--hueso);display:block;line-height:1.2}
.apk-meta{margin-top:16px;font-family:var(--font-mono);font-size:.78rem;color:var(--hueso-30)}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid rgba(239,230,218,.08);padding:44px 0;
}
.site-footer .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.footer-tag{font-family:var(--font-mono);font-size:.8rem;color:var(--hueso-30)}
.footer-links{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:var(--hueso-60);text-decoration:none;font-size:.9rem}
.footer-links a:hover{color:var(--brasa)}
.copy{width:100%;font-size:.8rem;color:var(--hueso-30);margin-top:8px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  section{padding:72px 0}
  .hero{padding:130px 0 64px}
  .hero .wrap,.split .wrap{grid-template-columns:1fr;gap:48px}
  .split-reverse .wrap > .split-media{order:0}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .site-nav{display:none}
}
@media (max-width:560px){
  .features-grid,.plans{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.feature{transition:none}
}