/* Web de presentación de Voploo (sorpify.es). Fuentes propias: sin peticiones a terceros. */
@font-face{font-family:'Archivo';src:url('/fonts/archivo.woff2') format('woff2');font-weight:400 800;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/figtree.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  --ink:#101B33;--ink-2:#1B2A4A;--paper:#F5F7FB;--surface:#FFFFFF;--line:#DCE2EE;--muted:#586176;
  --cobalt:#2952CC;--cobalt-deep:#1F3FA3;--cobalt-soft:#E8EDFB;--mint:#0E8F6B;--mint-soft:#E2F5EE;
  --radius:14px;--wrap:1180px;
  --display:'Archivo',system-ui,sans-serif;--body:'Figtree',system-ui,sans-serif;
  /* Tienda de ejemplo (plantilla Escaparate). */
  --shop-ink:#1A2230;--shop-primary:#0B7A75;--shop-accent:#F4B942;--shop-surface:#F3F6F8;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
a{color:var(--cobalt)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-stretch:118%;line-height:1.08;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:800;max-width:22ch}
h3{font-size:1.15rem;font-weight:700;font-stretch:108%}
p{margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{left:8px}

/* Botones */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--cobalt);color:#fff;font:inherit;font-weight:700;text-decoration:none;border:2px solid var(--cobalt);cursor:pointer;transition:background .15s,border-color .15s}
.button:hover{background:var(--cobalt-deep);border-color:var(--cobalt-deep)}
.button--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.button--ghost:hover{background:var(--surface);border-color:var(--ink)}
.button--small{min-height:40px;padding:0 18px;font-size:.95rem}
.button--block{width:100%}
.button--light{background:#fff;color:var(--ink);border-color:#fff}
.button--light:hover{background:var(--mint-soft);border-color:var(--mint-soft)}
.link-quiet{color:var(--ink);text-decoration:none;font-weight:600}
.link-quiet:hover{text-decoration:underline}

/* Cabecera */
.site-head{position:sticky;top:0;z-index:5;background:rgba(245,247,251,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.site-head__inner{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.site-nav{display:none;gap:24px;margin-left:12px}
.site-nav a{color:var(--muted);text-decoration:none;font-weight:600}
.site-nav a:hover{color:var(--ink)}
.site-head__actions{margin-left:auto;display:flex;align-items:center;gap:16px}
@media (min-width:860px){.site-nav{display:flex}}

/* Portada */
.hero{padding:44px 0 72px}
.hero__grid{display:grid;gap:48px;align-items:center}
@media (min-width:1020px){.hero{padding:72px 0 104px}.hero__grid{grid-template-columns:.9fr 1.1fr;gap:56px}}
.hero h1{font-size:clamp(2.6rem,6.6vw,4.8rem);font-weight:800;font-stretch:125%;max-width:11ch}
.lead{margin-top:24px;font-size:1.2rem;color:var(--ink-2);max-width:32em}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:24px 0 0;padding:0;color:var(--muted);font-size:.95rem}
.hero__facts li{padding-left:22px;position:relative}
.hero__facts li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg)}

/* Escaparate: una tienda de ejemplo completa y su calendario de publicaciones. */
.demo{position:relative;padding-bottom:24px}
@media (min-width:640px){.demo{padding:0 0 64px 0}}
.shop{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 80px -40px rgba(16,27,51,.45);overflow:hidden;color:var(--shop-ink);font-family:'Figtree',system-ui,sans-serif}
.shop__chrome{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#F7F8FA;border-bottom:1px solid #E7EAF0}
.shop__dots{display:flex;gap:6px}
.shop__dots i{width:9px;height:9px;border-radius:50%;background:#D5DAE3}
.shop__url{flex:1;min-width:0;font-size:.78rem;color:#6A7385;background:#fff;border:1px solid #E7EAF0;border-radius:999px;padding:3px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop__notice{background:var(--shop-ink);color:#fff;text-align:center;font-size:.72rem;padding:5px 8px;letter-spacing:.01em}
.shop__header{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid #EEF1F4}
.shop__logo{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.shop__nav{display:none;gap:14px;font-size:.78rem;color:#4A5466}
@media (min-width:520px){.shop__nav{display:flex}}
.shop__icons{margin-left:auto;display:flex;gap:10px}
.shop__icons svg{width:18px;height:18px;fill:none;stroke:var(--shop-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.shop__banner{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:12px 16px 4px;padding:18px;border-radius:12px;background:linear-gradient(120deg,#0B7A75,#13A39B);color:#fff}
.shop__kicker{font-size:.72rem;opacity:.85}
.shop__title{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:1.15rem;line-height:1.15;margin-top:2px}
.shop__cta{flex:none;background:#fff;color:var(--shop-primary);font-size:.72rem;font-weight:700;padding:7px 12px;border-radius:999px}
.shop__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;list-style:none;margin:0;padding:12px 16px 18px}
@media (min-width:520px){.shop__grid{grid-template-columns:repeat(3,1fr)}}
.product{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0}
.product__photo{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:var(--shop-surface);margin-bottom:6px}
.product__photo svg{width:68%;height:68%}
.product__photo--lamp{background:#FBF3E4}.product__photo--headphones{background:#ECEFF5}.product__photo--plant{background:#EEF4EC}.product__photo--bottle{background:#EAF2F9}.product__photo--bag{background:#F6EEE8}
.product__badge{position:absolute;top:7px;left:7px;background:var(--shop-accent);color:var(--shop-ink);font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px}
.product__name{font-size:.78rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product__price{font-size:.8rem;font-weight:700;color:var(--shop-primary)}
.product__price s{font-weight:400;color:#8A93A3;margin-left:4px}

.schedule{background:var(--ink);color:#fff;border-radius:16px;padding:18px 18px 8px;margin:-28px 12px 0;position:relative;box-shadow:0 24px 48px -24px rgba(16,27,51,.6)}
@media (min-width:640px){.schedule{position:absolute;right:-12px;bottom:0;width:300px;margin:0}}
@media (min-width:1020px){.schedule{right:-28px}}
.schedule__title{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:.95rem;margin-bottom:8px}
.schedule__list{list-style:none;margin:0;padding:0}
.schedule__list li{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:10px 0;border-top:1px solid #26365A}
.schedule__day{font-weight:700;font-size:.85rem}
.schedule__what{grid-column:1;font-size:.8rem;color:#AEB8CF}
.schedule__state{grid-row:1 / span 2;grid-column:2;align-self:center;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:#26365A;color:#C9D2E6}
.schedule__list li.is-done .schedule__state{background:var(--mint);color:#fff}

/* Entrada de los productos y del calendario: un único momento animado al cargar. */
@media (prefers-reduced-motion:no-preference){
  .product{animation:arrive .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms + 250ms)}
  .schedule{animation:arrive .6s cubic-bezier(.2,.8,.2,1) .9s both}
}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Secciones */
.section{padding:72px 0}
@media (min-width:960px){.section{padding:104px 0}}
.section__lead{margin-top:16px;color:var(--muted);max-width:44em}
.section--ink{background:var(--ink);color:#E6EAF4}
.section--ink h2{color:#fff}
.section--soft{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Antes / con Voploo */
.compare{display:grid;gap:16px;margin-top:40px}
@media (min-width:860px){.compare{grid-template-columns:1fr 1fr;gap:24px}}
.compare__col{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:var(--surface)}
.compare__col h3{color:var(--muted)}
.compare__col ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.compare__col li{padding-left:28px;position:relative;color:var(--muted)}
.compare__col li::before{content:"";position:absolute;left:4px;top:.75em;width:12px;height:2px;background:#B3BBCB}
.compare__col--us{border:2px solid var(--cobalt);background:linear-gradient(180deg,#fff,var(--cobalt-soft))}
.compare__col--us h3{color:var(--cobalt)}
.compare__col--us li{color:var(--ink)}
.compare__col--us li::before{top:.45em;left:3px;width:12px;height:7px;background:none;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg)}

/* Por qué nos eligen */
.reasons{margin:40px 0 0;display:grid;gap:32px 40px}
@media (min-width:640px){.reasons{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.reasons{grid-template-columns:repeat(3,1fr)}}
.reasons div{border-top:1px solid #34446B;padding-top:20px}
.reasons dt{font-family:var(--display);font-stretch:112%;font-weight:700;color:#fff;font-size:1.2rem;letter-spacing:-.01em}
.reasons dd{margin:10px 0 0;color:#B9C2D6}

/* Pasos: un proceso real, por eso numerados. */
.steps{counter-reset:step;list-style:none;margin:40px 0 0;padding:0;display:grid;gap:32px}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}}
.steps li{counter-increment:step;border-top:2px solid var(--ink);padding-top:20px}
.steps li::before{content:counter(step);display:block;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:2.4rem;line-height:1;color:var(--cobalt);margin-bottom:16px}
.steps p{margin-top:10px;color:var(--ink-2)}

/* Plantillas */
.themes{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.theme h3{margin-top:14px}
.theme p{margin-top:6px;color:var(--muted);font-size:.95rem}
.theme__preview{display:flex;flex-direction:column;gap:8px;aspect-ratio:4/3;padding:12px;border-radius:12px;background:var(--t-bg);border:1px solid var(--line);overflow:hidden}
.theme__bar{height:10px;border-radius:4px;background:var(--t-text);opacity:.85;width:40%}
.theme__hero{flex:1;border-radius:8px;background:var(--t-primary);display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px}
.theme__hero i{display:block;height:7px;width:60%;border-radius:3px;background:rgba(255,255,255,.85)}
.theme__hero b{display:block;height:12px;width:32%;border-radius:999px;background:var(--t-accent)}
.theme__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:30%}
.theme__cards i{border-radius:6px;background:var(--t-surface);border:1px solid rgba(0,0,0,.06)}

/* Casos de éxito (solo reseñas reales, añadidas desde el panel) */
.stories{display:grid;gap:20px;margin-top:40px}
@media (min-width:860px){.stories{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.story{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.story blockquote{margin:0;font-size:1.1rem;line-height:1.55}
.story blockquote::before{content:"“";display:block;font-family:var(--display);font-size:3rem;line-height:.6;color:var(--cobalt);margin-bottom:10px}
.story figcaption{display:flex;flex-direction:column}
.story figcaption span{color:var(--muted);font-size:.95rem}

/* Planes */
.plans{display:grid;gap:20px;margin-top:40px}
@media (min-width:860px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
.plan__name{font-size:1.4rem}
.plan__price{margin-top:12px;color:var(--muted)}
.plan__price strong{display:block;font-family:var(--display);font-stretch:118%;font-size:2.6rem;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.plan__list{list-style:none;margin:20px 0 28px;padding:0;display:grid;gap:10px;flex:1}
.plan__list li{padding-left:26px;position:relative}
.plan__list li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg)}
.plans__fine{margin-top:20px;color:var(--muted);font-size:.95rem}

/* Preguntas */
.faq{display:grid;gap:32px}
@media (min-width:960px){.faq{grid-template-columns:1fr 1.8fr;gap:64px}}
.faq__list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:40em}

/* Llamada final */
.cta{background:var(--cobalt);color:#fff;padding:64px 0}
.cta__inner{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.cta__inner{grid-template-columns:1fr auto;gap:48px}}
.cta h2{font-size:clamp(1.5rem,3vw,2.2rem);max-width:26ch}

/* Pie */
.site-foot{background:var(--ink);color:#B9C2D6;padding:56px 0 28px}
.site-foot__inner{display:grid;gap:28px}
@media (min-width:860px){.site-foot__inner{grid-template-columns:1fr 2fr}}
.brand--foot{color:#fff;margin:0}
.site-foot__note{margin-top:8px}
.site-foot__legal{display:flex;flex-wrap:wrap;gap:12px 24px;align-content:flex-start}
.site-foot__legal a{color:#E6EAF4;text-decoration:none}
.site-foot__legal a:hover{text-decoration:underline}
.site-foot__base{margin-top:40px;padding-top:20px;border-top:1px solid #26365A;font-size:.9rem}

/* Ventana de textos legales */
.sheet{width:min(760px,calc(100% - 24px));max-height:min(86vh,900px);padding:0;border:0;border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 40px 100px -20px rgba(16,27,51,.55);display:none;flex-direction:column;overflow:hidden}
.sheet[open]{display:flex}
.sheet::backdrop{background:rgba(16,27,51,.55);backdrop-filter:blur(4px)}
@media (prefers-reduced-motion:no-preference){
  .sheet[open]{animation:sheet-in .22s cubic-bezier(.2,.8,.2,1)}
  .sheet[open]::backdrop{animation:fade-in .22s ease-out}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 0}
.sheet__head h2{font-size:clamp(1.4rem,3vw,1.9rem);max-width:none}
.sheet__close{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;display:grid;place-items:center}
.sheet__close:hover{background:var(--cobalt-soft);border-color:var(--cobalt)}
.sheet__close svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.sheet__date{padding:6px 24px 0;color:var(--muted);font-size:.9rem}
.sheet__body{flex:1;overflow-y:auto;padding:8px 24px 24px;margin-top:12px;border-top:1px solid var(--line);overscroll-behavior:contain}
.sheet__loading{color:var(--muted);padding-top:16px}
.sheet__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--line);background:var(--paper)}
.sheet__foot a{font-weight:600;font-size:.95rem}
@media (max-width:520px){.sheet{width:100%;max-height:92vh;margin:auto 0 0;border-radius:20px 20px 0 0}}

/* Textos legales (página) */
.legal{padding-top:56px;padding-bottom:88px;max-width:820px}
.legal__head{border-bottom:2px solid var(--ink);padding-bottom:20px;margin-bottom:32px}
.legal h1{font-size:clamp(2rem,5vw,3rem);font-weight:800}
.legal__date{margin-top:10px;color:var(--muted)}
.prose{max-width:68ch}
.prose h2{font-size:1.3rem;font-stretch:110%;margin:32px 0 12px;max-width:none}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.95rem;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.prose th{font-weight:700}