:root{
  --negro:#0d0d0f;
  --negro-2:#161619;
  --negro-3:#1d1d21;
  --linea:#2b2b31;
  --dorado:#c9a24b;
  --dorado-claro:#e4c878;
  --texto:#eceae4;
  --tenue:#a3a099;
  --radio:16px;
  --ancho:1150px;
  --sans:'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:radial-gradient(1200px 600px at 50% -200px,#1a1712 0%,var(--negro) 55%);
  background-attachment:fixed;
  color:var(--texto);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 22px}
.sans{font-family:var(--sans)}

/* Encabezado */
.top{border-bottom:1px solid var(--linea);position:sticky;top:0;background:rgba(13,13,15,.82);backdrop-filter:blur(10px);z-index:10}
.top .contenedor{display:flex;align-items:center;justify-content:space-between;height:66px}
.marca{font-weight:700;letter-spacing:.02em;font-size:19px;font-family:var(--sans)}
.marca b{color:var(--dorado)}
.top nav{font-family:var(--sans);font-size:13.5px;color:var(--tenue)}

/* Hero */
.hero{text-align:center;padding:74px 22px 30px}
.hero .kicker{font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dorado);margin-bottom:18px}
.hero h1{font-size:clamp(31px,5vw,52px);line-height:1.1;letter-spacing:-.01em}
.hero h1 span{color:var(--dorado)}
.hero p{color:var(--tenue);max-width:600px;margin:20px auto 0;font-size:18px}

/* Rejilla */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;padding:40px 0 90px}
.card{
  background:var(--negro-2);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-5px);border-color:var(--dorado);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.tapa{position:relative;height:212px;overflow:hidden;background:#0d0d0f;border-bottom:1px solid var(--linea)}
.tapa iframe{width:100%;height:640px;border:0;pointer-events:none;background:#0d0d0f;display:block}
.tapa .cover{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(13,13,15,0) 60%,rgba(13,13,15,.55) 100%)}
.tapa .badge{position:absolute;top:13px;right:13px;z-index:3;font-family:var(--sans);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#12100a;background:var(--dorado-claro);padding:4px 11px;border-radius:20px;font-weight:700}
.card .cuerpo{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.card .etq{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dorado);margin-bottom:9px}
.card h3{font-size:20px;line-height:1.22}
.card .res{color:var(--tenue);font-size:14.5px;margin:9px 0 18px;flex:1}
.card .pie{display:flex;align-items:center;justify-content:space-between}
.precio{font-family:var(--sans);font-weight:700;font-size:23px;color:var(--dorado-claro)}
.btn{font-family:var(--sans);font-weight:600;font-size:14px;background:var(--dorado);color:#12100a;border:none;cursor:pointer;
  padding:11px 20px;border-radius:10px;transition:background .15s;display:inline-block}
.btn:hover{background:var(--dorado-claro)}
.btn.grande{padding:15px 30px;font-size:16px}

/* Maqueta (mockup) */
.mock{background:#fff;border-radius:9px 9px 0 0;overflow:hidden;width:100%;
  box-shadow:0 14px 34px rgba(0,0,0,.5);font-family:var(--sans);color:#1c1c1c;position:relative}
.mock-tab{position:absolute;top:0;right:0;background:#1e8e3e;color:#fff;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;padding:3px 9px;border-radius:0 9px 0 8px;z-index:2}
.mock-tab.pdf{background:#d93025}
.mock-bar{display:flex;align-items:center;gap:5px;padding:8px 11px;background:#f1f0ec;border-bottom:1px solid #e2e0da}
.mock-bar i{width:9px;height:9px;border-radius:50%;display:inline-block}
.mock-bar .fn{margin-left:9px;font-size:11px;color:#6b6a66;font-weight:600}
table.sheet{width:100%;border-collapse:collapse;font-size:11.5px}
table.sheet th{background:#efe4c6;color:#5c4a1e;text-align:left;padding:7px 11px;font-weight:700;border-bottom:1px solid #e0d4b0}
table.sheet td{padding:7px 11px;border-bottom:1px solid #f0efeb;white-space:nowrap}
table.sheet tr:nth-child(even) td{background:#faf9f6}
table.sheet tr.total td{background:var(--dorado);color:#1c1408;font-weight:700;border:none}
.check{padding:15px 17px}
.check .ct{font-size:12.5px;font-weight:700;color:#5c4a1e;margin-bottom:11px}
.check .it{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12.5px;color:#2a2a2a;border-bottom:1px solid #f0efeb}
.check .it:last-child{border-bottom:none}
.check .bx{width:17px;height:17px;border-radius:5px;background:var(--dorado);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}

/* Pie */
.foot{border-top:1px solid var(--linea);padding:32px 22px;text-align:center;color:var(--tenue);font-family:var(--sans);font-size:13px}
.foot b{color:var(--texto)}

/* Landing de producto */
.prod{display:grid;grid-template-columns:1fr 1fr;gap:52px;padding:56px 0 76px;align-items:start}
.prod .visual{border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);background:#0d0d0f;
  position:relative;height:520px}
.prod .visual iframe{width:100%;height:100%;border:0;pointer-events:none;background:#0d0d0f;display:block}
.prod .visual .cover{position:absolute;inset:0}
.prod .etq{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dorado);margin-bottom:12px}
.prod h1{font-size:clamp(27px,4vw,39px);line-height:1.14}
.prod .res{color:var(--tenue);font-size:17px;margin:15px 0 24px}
.prod ul{list-style:none;margin:0 0 28px}
.prod li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid var(--linea);font-size:15.5px}
.prod li::before{content:"";position:absolute;left:4px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--dorado)}
.compra{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.compra .precio{font-size:36px}
.nota{font-family:var(--sans);font-size:12.5px;color:var(--tenue);margin-top:15px}
.volver{font-family:var(--sans);font-size:14px;color:var(--tenue);display:inline-block;margin-top:28px}
.volver:hover{color:var(--dorado)}

@media(max-width:760px){
  .prod{grid-template-columns:1fr;gap:28px}
  .prod .visual{padding:26px 22px 0}
}