/* Real Mockup's — estilo de cristal (misma línea visual que la herramienta en justincanal.com) */
:root{
  --ink:#0a0a0a; --ink-soft:#52524d; --line:rgba(10,10,10,.14);
  --accent:#e31c25; --accent-dark:#b3151c; --page:#ecebe8;
  --glass:rgba(255,255,255,.58); --glass-line:rgba(255,255,255,.72);
  --blur:blur(26px) saturate(165%); --shadow:0 14px 44px rgba(20,20,20,.12), inset 0 1px 0 rgba(255,255,255,.85);
  --r-lg:28px; --r-md:20px; --r-sm:14px; --gutter:clamp(16px,1.8vw,26px); --ease:cubic-bezier(.2,.8,.2,1);
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; background:var(--page); color:var(--ink); font-family:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
body{ overflow-x:hidden; }
button,input,textarea{ font-family:inherit; }
a{ color:var(--ink); }
img{ max-width:100%; }
.ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; background:
  radial-gradient(55vmax 55vmax at 92% -8%, rgba(227,28,37,.20), transparent 62%),
  radial-gradient(50vmax 50vmax at -8% 108%, rgba(43,75,255,.15), transparent 62%),
  radial-gradient(40vmax 40vmax at 50% 45%, rgba(255,255,255,.55), transparent 70%); }
body > *:not(.ambient){ position:relative; z-index:1; }
.glass,.card{ background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-line); box-shadow:var(--shadow); }

/* cabecera */
header.site{ position:sticky; top:0; z-index:60; padding:12px var(--gutter) 0; }
.bar{ max-width:1180px; margin:0 auto; height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 8px 0 20px; border-radius:999px; }
.wordmark{ font-size:19px; font-weight:700; letter-spacing:-.045em; font-stretch:85%; text-decoration:none; color:var(--ink); white-space:nowrap; }
.wordmark span{ color:var(--accent); }
.nav{ display:flex; align-items:center; gap:4px; }
.nav a{ padding:9px 14px; border-radius:999px; font-size:14px; font-weight:500; text-decoration:none; color:var(--ink); }
.nav a:hover{ background:rgba(255,255,255,.75); }
.nav a.solo-escritorio{ display:none; }
.nav a.pill{ background:var(--ink); color:#fff; font-weight:600; padding:10px 18px; }
.nav a.pill:hover{ background:var(--accent); }
.nav a{ white-space:nowrap; }
@media (min-width:860px){ .nav a.solo-escritorio{ display:inline-block; } }
@media (max-width:480px){
  .bar{ padding:0 6px 0 14px; gap:6px; }
  .wordmark{ font-size:17px; }
  .nav{ gap:0; }
  .nav a{ padding:8px 9px; font-size:13px; }
  .nav a.pill{ padding:9px 12px; }
}

/* estructura */
.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--gutter); }
.wrap.narrow{ max-width:560px; padding-top:clamp(40px,8vw,90px); }
.hero{ padding:clamp(48px,8vw,110px) 0 clamp(24px,4vw,44px); }
.hero h1{ margin:0 0 18px; font-size:clamp(56px,11.5vw,170px); font-weight:700; font-stretch:75%; letter-spacing:-.05em; line-height:.84; }
.hero p.lead{ margin:0; max-width:600px; font-size:clamp(17px,1.6vw,21px); line-height:1.5; color:var(--ink-soft); letter-spacing:-.01em; }
.hero .cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; align-items:center; }
.hero .cta small{ color:var(--ink-soft); font-size:13px; }
.section{ padding:clamp(40px,6vw,80px) 0 0; }
.section h2{ margin:0 0 20px; font-size:clamp(34px,5vw,64px); font-weight:700; font-stretch:78%; letter-spacing:-.045em; line-height:.95; }
.card{ border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); }
.card h1{ margin:0 0 10px; font-size:clamp(28px,4vw,40px); font-weight:700; font-stretch:80%; letter-spacing:-.04em; line-height:1; }
.card p{ line-height:1.6; color:var(--ink-soft); }
.grid3{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:860px){ .grid3{ grid-template-columns:repeat(3,1fr); } }
.paso .n{ display:inline-flex; width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; align-items:center; justify-content:center; font-weight:700; margin-bottom:14px; }
.paso h3{ margin:0 0 6px; font-size:20px; letter-spacing:-.02em; }
.paso p{ margin:0; }

/* ejemplo antes / después */
.ejemplo{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:700px){ .ejemplo{ grid-template-columns:1fr 1fr; } }
.ejemplo figure{ margin:0; border-radius:var(--r-lg); overflow:hidden; padding:12px; }
.ejemplo .marco{ aspect-ratio:1/1; border-radius:var(--r-md); background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--ink-soft); font-size:14px; text-align:center; padding:20px; }
.ejemplo .marco img{ width:100%; height:100%; object-fit:contain; display:block; }
.ejemplo figcaption{ padding:12px 6px 4px; font-size:14px; font-weight:600; }

/* imagen de producto (caja) */
.portada{ margin:0 auto; max-width:760px; border-radius:var(--r-lg); overflow:hidden; background:#060606; box-shadow:var(--shadow); }
.portada img{ display:block; width:100%; height:auto; }

/* precio */
.precio{ display:grid; gap:24px; align-items:center; }
@media (min-width:860px){ .precio{ grid-template-columns:1.1fr 1fr; } }
.cifra{ font-size:clamp(64px,9vw,120px); font-weight:700; font-stretch:75%; letter-spacing:-.05em; line-height:.9; }
.cifra small{ font-size:.3em; letter-spacing:-.01em; color:var(--ink-soft); font-weight:600; }
.lista{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.lista li{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; line-height:1.45; }
.lista li::before{ content:""; flex:none; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--accent); }

/* faq */
.faq details{ border-bottom:1px solid var(--line); padding:18px 4px; }
.faq summary{ cursor:pointer; font-weight:600; font-size:17px; letter-spacing:-.01em; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-weight:400; font-size:22px; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:10px 0 0; color:var(--ink-soft); line-height:1.6; }

/* formularios y botones */
label.campo{ display:block; font-size:14px; font-weight:600; margin:0 0 8px; }
input[type=email], textarea{
  width:100%; font-size:15px; font-weight:500; color:var(--ink); background:rgba(255,255,255,.72);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; transition:border-color .2s, box-shadow .2s, background .2s;
}
textarea{ min-height:96px; resize:vertical; line-height:1.5; }
input[type=email]:focus, textarea:focus{ outline:none; border-color:var(--ink); background:#fff; box-shadow:0 0 0 4px rgba(227,28,37,.16); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:var(--r-sm); height:52px; padding:0 22px; font-size:15px; font-weight:600; letter-spacing:-.005em; cursor:pointer; text-decoration:none; transition:background .2s, color .2s, transform .25s var(--ease); }
.btn.full{ width:100%; }
.btn:hover:not(:disabled){ transform:translateY(-1px); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover:not(:disabled){ background:var(--accent); }
.btn-primary:disabled{ opacity:.3; cursor:default; }
.btn-secondary{ background:rgba(255,255,255,.72); color:var(--ink); border-color:var(--glass-line); }
.btn-secondary:hover:not(:disabled){ background:#fff; }
.btn-secondary:disabled{ opacity:.35; cursor:default; }
.btn:focus-visible, .nav a:focus-visible, a:focus-visible, summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.aviso{ margin:14px 0 0; padding:12px 14px; border-radius:var(--r-sm); font-size:14px; line-height:1.5; background:rgba(255,255,255,.6); border:1px solid var(--glass-line); }
.aviso.error{ color:var(--accent-dark); background:rgba(227,28,37,.10); border-color:rgba(227,28,37,.28); }
.aviso.ok{ background:rgba(30,160,90,.10); border-color:rgba(30,160,90,.3); }
form.inline{ display:inline; margin:0; }

/* cuenta */
.datos{ display:grid; gap:0; margin:18px 0; }
.datos div{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.datos dt{ color:var(--ink-soft); }
.datos dd{ margin:0; font-weight:600; text-align:right; }
.barra-uso{ width:140px; margin-left:auto; height:8px; border-radius:99px; background:rgba(10,10,10,.08); overflow:hidden; margin-top:8px; }
.barra-uso span{ display:block; height:100%; background:var(--ink); border-radius:99px; }
.acciones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }

/* legal */
.legal h2{ font-size:20px; margin:28px 0 8px; letter-spacing:-.02em; }
.legal p, .legal li{ color:var(--ink-soft); line-height:1.65; font-size:15px; }

/* pie */
footer.site{ margin:clamp(40px,6vw,90px) var(--gutter) var(--gutter); border-radius:var(--r-lg); background:var(--ink); color:#fff; padding:clamp(24px,4vw,44px); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; }
footer.site a{ color:#fff; text-decoration:none; }
footer.site a:hover{ color:var(--accent); }
footer.site p{ margin:0; color:rgba(255,255,255,.6); }
footer.site nav{ display:flex; gap:18px; flex-wrap:wrap; }

@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }