:root{
  --bg:#1a0f0a; --fg:#f5e6d3; --muted:#c4a484; --card:#2d1b13;
  --accent:#ff6b35; --accent-2:#d4af37; --line:#3d2317; --shadow:0 10px 30px rgba(0,0,0,.5);
  --fire-red:#e63946; --charcoal:#36454f; --meat-brown:#8b4513; --smoke-gray:#696969;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{scroll-behavior:smooth}
body{touch-action:manipulation}
.container{max-width:1040px;margin:0 auto;padding:0 16px}
.topbar{position:sticky;top:0;background:linear-gradient(135deg, #2d1b13, #1a0f0a);border-bottom:2px solid var(--accent);z-index:10;backdrop-filter:blur(10px)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.topbar h1{font-size:20px;margin:0;color:var(--accent-2);text-shadow:2px 2px 4px rgba(0,0,0,0.5)}
.topbar nav{display:flex;gap:20px}
.topbar nav a{color:var(--muted);text-decoration:none;padding:8px 16px;border-radius:8px;transition:all 0.3s ease;position:relative}
.topbar nav a:hover{color:var(--fg);background:rgba(255,107,53,0.1);transform:translateY(-2px)}
.topbar nav a:before{content:'';width:16px;height:16px;margin-right:6px;opacity:0;transition:opacity 0.3s ease;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23ff6b35" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>') no-repeat center;background-size:contain}
.topbar nav a:hover:before{opacity:1}
.tld{opacity:.8;color:var(--accent)}
.hero{background:linear-gradient(135deg, var(--fire-red), var(--accent), var(--meat-brown));padding:50px 0;border-bottom:3px solid var(--accent-2);position:relative;overflow:hidden}
.hero:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="60" cy="80" r="1" fill="rgba(255,255,255,0.06)"/></svg>');animation:float 20s infinite linear}
.hero h2{margin:0 0 12px 0;font-size:36px;color:#fff;text-shadow:3px 3px 6px rgba(0,0,0,0.7);position:relative;z-index:1}
.hero p{color:rgba(255,255,255,0.9);font-size:18px;margin-bottom:24px;position:relative;z-index:1}
.hero .btn{position:relative;z-index:1;font-size:16px;padding:12px 24px;box-shadow:0 8px 25px rgba(0,0,0,0.3)}
@keyframes float{0%{transform:translateX(-100px)}100%{transform:translateX(calc(100vw + 100px))}}
.btn{background:linear-gradient(135deg, var(--accent), var(--fire-red));color:#fff;border:0;border-radius:12px;padding:12px 20px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(230,57,70,0.4);filter:brightness(1.1)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;border:2px solid var(--accent);color:var(--accent);box-shadow:none;background:rgba(255,107,53,0.1)}
.btn.ghost:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.btn i{width:18px;height:18px;flex-shrink:0}
.card{background:linear-gradient(145deg, var(--card), #241610);border:2px solid var(--line);border-radius:20px;padding:24px 20px;margin:20px 0;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card:before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--fire-red));border-radius:20px 20px 0 0}
.card h3{color:var(--accent-2);margin-top:0;font-size:24px;text-shadow:1px 1px 2px rgba(0,0,0,0.5)}
.card h4{color:var(--accent);margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid label{display:flex;flex-direction:column;font-size:14px;color:var(--muted)}
.label-content{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.label-content i{width:16px;height:16px;color:var(--accent)}
input,select{background:linear-gradient(145deg, #1a0f0a, #2d1b13);color:var(--fg);border:2px solid var(--line);border-radius:12px;padding:12px;transition:all 0.3s ease;font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,53,0.2);transform:translateY(-1px)}
input:hover,select:hover{border-color:var(--accent-2)}
select{background-image:url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23c4a484" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:40px}
.resultado.hidden{display:none}
.lista{list-style:none;padding-left:0}
.lista li{background:linear-gradient(90deg, rgba(255,107,53,0.1), rgba(212,175,55,0.1));border-left:4px solid var(--accent);padding:12px 16px;margin:8px 0;border-radius:8px;position:relative;transition:all 0.3s ease}
.lista li:before{content:'🔥';margin-right:8px;color:var(--accent)}
.lista li:hover{transform:translateX(4px);background:linear-gradient(90deg, rgba(255,107,53,0.2), rgba(212,175,55,0.2))}
.cta{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.kits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kit{background:linear-gradient(145deg, var(--meat-brown), #5d2f1a);border:2px dashed var(--accent);border-radius:16px;padding:16px;transition:all 0.3s ease;position:relative;overflow:hidden}
.kit:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(255,107,53,0.3);border-color:var(--accent-2)}
.kit:before{content:'';position:absolute;top:12px;right:12px;width:24px;height:24px;opacity:0.6;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23d4af37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>') no-repeat center;background-size:contain}
.kit h4{color:var(--accent-2);margin-top:0;margin-bottom:8px}
.kit p{color:var(--fg);font-size:14px;line-height:1.4}
.footer{border-top:1px solid var(--line);margin-top:36px;padding:24px 0;color:var(--muted);text-align:center}
/* Tablet */
@media(max-width:920px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h2{font-size:28px}
  .hero p{font-size:16px}
  .container{padding:0 12px}
}

/* Mobile */
@media(max-width:640px){
  .grid{grid-template-columns:1fr;gap:16px}
  .grid.two{grid-template-columns:1fr}
  .kits{grid-template-columns:1fr;gap:12px}

  .topbar .container{flex-direction:column;gap:12px;padding:12px 0}
  .topbar nav{justify-content:center;width:100%}
  .topbar nav a{padding:6px 12px;font-size:14px}

  .hero{padding:30px 0}
  .hero h2{font-size:24px;text-align:center}
  .hero p{font-size:14px;text-align:center}
  .hero .btn{display:block;text-align:center;margin:0 auto}

  .card{padding:16px;margin:12px 0}
  .card h3{font-size:20px}

  .cta{flex-direction:column;gap:8px}
  .btn{width:100%;text-align:center;padding:14px}

  .kit{padding:12px}
  .kit h4{font-size:16px}
  .kit p{font-size:13px}
}

/* Small Mobile */
@media(max-width:480px){
  .container{padding:0 8px}
  .hero h2{font-size:20px}
  .hero p{font-size:13px}
  .card{padding:12px;border-radius:12px}
  .topbar h1{font-size:16px}
  .topbar nav a{font-size:12px;padding:4px 8px}
}