/* Maninitas · Diseño e impresión 3D — hoja de estilos única */
@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/montserrat-700.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:900;font-style:normal;font-display:swap;src:url(/fonts/montserrat-900.woff2) format("woff2")}

:root{
  --carbon:#08080A; --carbon-2:#16161A; --carbon-3:#26262C;
  --crema:#F3EEE6; --crema-2:#E9E2D6; --blanco:#FFFDF9;
  --naranja:#FF6B1A; --naranja-osc:#D9520A;
  --texto:#1D1D21; --texto-suave:#55555E; --linea:#DDD5C7;
  --wa:#1FAF54;
  --radio:18px; --sombra:0 10px 30px rgba(8,8,10,.10);
  --ancho:1180px;
  --titulo:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cuerpo:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--texto);font:400 1.0625rem/1.65 var(--cuerpo);overflow-x:hidden}
/* Nada puede desplazar la página hacia los lados en el móvil (clip no rompe la cabecera fija) */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
main{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titulo);font-weight:900;line-height:1.08;letter-spacing:-.01em;margin:0 0 .6em;color:var(--carbon)}
h1{font-size:clamp(2.2rem,6vw,4.2rem);text-transform:uppercase}
h2{font-size:clamp(1.7rem,4vw,2.7rem);text-transform:uppercase}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
.acento{color:var(--naranja)}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}
.seccion{padding:72px 0}
.seccion--oscura{background:var(--carbon);color:#E8E4DC}
.seccion--oscura h2,.seccion--oscura h3{color:#fff}
.seccion--blanca{background:var(--blanco)}
.antetitulo{display:inline-block;font:700 .8rem/1 var(--titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);margin-bottom:14px}
.intro{max-width:720px;font-size:1.13rem;color:var(--texto-suave)}
.seccion--oscura .intro{color:#B9B4AA}
.centro{text-align:center}.centro .intro{margin-left:auto;margin-right:auto}
.saltar{position:absolute;left:-999px;top:0;background:#fff;padding:10px;z-index:100}.saltar:focus{left:10px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:999px;font:700 1rem/1.1 var(--titulo);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn--naranja{background:var(--naranja);color:#fff;box-shadow:0 8px 22px rgba(255,107,26,.35)}
.btn--naranja:hover{background:var(--naranja-osc)}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 8px 22px rgba(31,175,84,.3)}
.btn--borde{border-color:currentColor;color:var(--carbon);background:transparent}
.seccion--oscura .btn--borde,.hero .btn--borde{color:#fff}
.btn svg{width:20px;height:20px;flex:none}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.centro .botones{justify-content:center}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(243,238,230,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 1.35rem/1 var(--titulo);color:var(--carbon)}
.marca img{width:44px;height:44px;border-radius:10px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{white-space:nowrap;text-decoration:none;font:700 .92rem/1 var(--titulo);padding:10px 12px;border-radius:10px;color:var(--carbon)}
.nav a:hover,.nav a[aria-current=page]{color:var(--naranja)}
.nav .btn{padding:11px 18px;margin-left:8px;color:#fff}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{display:block;width:26px;height:3px;background:var(--carbon);margin:5px 0;border-radius:2px}
@media (max-width:1120px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:70px 0 auto 0;background:var(--crema);flex-direction:column;align-items:stretch;padding:12px 20px 24px;border-bottom:1px solid var(--linea);box-shadow:var(--sombra);display:none}
  .nav.abierto{display:flex}
  .nav a{padding:14px 6px;font-size:1.05rem}
  .nav .btn{margin:10px 0 0}
}

/* Hero */
.hero{background:var(--carbon);color:#E8E4DC;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,26,.35),transparent 65%);pointer-events:none}
.hero__rejilla{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:70px;padding-bottom:80px}
.hero h1{color:#fff}
.hero p.intro{color:#C9C4BA}
.hero__img{border-radius:24px;background:#F4F4F4;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(1.5deg) translateY(var(--py,0px))}
.hero__datos{display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;padding:0;list-style:none;font-size:.95rem;color:#C9C4BA}
.hero__datos li::before{content:"✓ ";color:var(--naranja);font-weight:700}
.hero--sub .hero__rejilla{padding-top:56px;padding-bottom:64px}
@media (max-width:860px){.hero__rejilla{grid-template-columns:1fr;padding-top:44px;padding-bottom:56px}.hero__img{transform:translateY(var(--py,0px))}}

/* Migas */
.migas{font-size:.85rem;color:#9C978D;margin-bottom:18px}
.migas a{color:#C9C4BA;text-decoration:none}.migas a:hover{color:var(--naranja)}

/* Tarjetas */
.rejilla{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
a.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.tarjeta img{aspect-ratio:4/3;object-fit:cover;width:100%;background:#F4F4F4}
.tarjeta__cuerpo{padding:22px;display:flex;flex-direction:column;flex:1}
.tarjeta__cuerpo p{color:var(--texto-suave);font-size:.98rem}
.tarjeta__precio{margin-top:auto;font:700 .95rem/1 var(--titulo);color:var(--naranja)}
.seccion--oscura .tarjeta{background:var(--carbon-2);border-color:var(--carbon-3)}
.seccion--oscura .tarjeta__cuerpo p{color:#B9B4AA}
.icono{width:52px;height:52px;border-radius:14px;background:rgba(255,107,26,.12);color:var(--naranja);display:grid;place-items:center;font-size:1.6rem;margin-bottom:14px}

/* Dos columnas */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.dos-col img{border-radius:var(--radio);background:#F4F4F4}
@media (max-width:860px){.dos-col{grid-template-columns:1fr;gap:28px}}
.lista-check{list-style:none;padding:0;margin:0 0 1em}
.lista-check li{padding-left:30px;position:relative;margin-bottom:10px}
.lista-check li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--naranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}

/* Pasos */
.pasos{counter-reset:paso;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.paso{counter-increment:paso;background:var(--carbon-2);border:1px solid var(--carbon-3);border-radius:var(--radio);padding:26px}
.paso::before{content:counter(paso,decimal-leading-zero);display:block;font:900 2.4rem/1 var(--titulo);color:var(--naranja);margin-bottom:12px}
.paso p{color:#B9B4AA;margin:0}

/* Galería */
.galeria{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.galeria figure{margin:0;background:#F4F4F4;border-radius:14px;overflow:hidden;border:1px solid var(--linea)}
.galeria img{aspect-ratio:1;object-fit:cover;width:100%}
.galeria figcaption{font-size:.85rem;padding:10px 12px;background:var(--blanco);color:var(--texto-suave)}

/* Precios */
.tabla-precios{width:100%;border-collapse:collapse;background:var(--blanco);border-radius:var(--radio);overflow:hidden;font-size:.98rem}
.tabla-precios th,.tabla-precios td{padding:14px 16px;white-space:nowrap;text-align:left;border-bottom:1px solid var(--linea)}
.tabla-precios th{background:var(--carbon);color:#fff;font:700 .9rem/1.2 var(--titulo)}
.tabla-scroll{overflow-x:auto;border-radius:var(--radio);border:1px solid var(--linea)}

/* Calculadora */
.calc{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:start}
.calc__form,.calc__res{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:28px;color:var(--texto)}
.calc__res{background:var(--carbon);color:#E8E4DC;border-color:var(--carbon);position:sticky;top:90px}
.calc__res h3{color:#fff}
@media (max-width:860px){.calc{grid-template-columns:1fr}.calc__res{position:static}}
.campo{margin-bottom:20px}
.campo>label,.campo>legend{display:block;font:700 .95rem/1.3 var(--titulo);margin-bottom:8px;color:var(--carbon)}
fieldset.campo{border:0;padding:0;margin:0 0 20px}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opciones label{cursor:pointer}
.opciones input{position:absolute;opacity:0;pointer-events:none}
.opciones span{display:inline-block;padding:10px 16px;border:2px solid var(--linea);border-radius:12px;font-weight:600;font-size:.95rem;background:#fff;transition:border-color .15s,background .15s}
.opciones input:checked+span{border-color:var(--naranja);background:rgba(255,107,26,.08);color:var(--naranja-osc)}
.opciones input:focus-visible+span{outline:3px solid var(--naranja);outline-offset:2px}
input[type=number],input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;padding:13px 14px;border:2px solid var(--linea);border-radius:12px;font:inherit;background:#fff;color:var(--texto)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--naranja)}
.rango{display:flex;align-items:center;gap:14px}
.rango input[type=range]{flex:1;accent-color:var(--naranja)}
.rango input[type=number]{width:110px}
.check{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--naranja);margin-top:3px;flex:none}
.res__linea{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--carbon-3);font-size:.97rem}
.res__linea--desc{color:#7EE2A0}
.res__total{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 4px;font-family:var(--titulo)}
.res__total strong{font-size:2.3rem;font-weight:900;color:var(--naranja)}
.res__ud{font-size:.95rem;color:#B9B4AA;margin-bottom:18px}
.res__nota{font-size:.82rem;color:#8F8A80;margin:14px 0 0}
.calc__res .btn{width:100%;margin-top:10px}
.aviso-desc{background:rgba(255,107,26,.12);color:#FFB386;border-radius:10px;padding:10px 12px;font-size:.88rem;margin-top:12px}

/* FAQ */
.faq{max-width:860px;margin:0 auto}
.faq details{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;margin-bottom:12px}
.faq summary{cursor:pointer;padding:18px 52px 18px 20px;font:700 1.02rem/1.35 var(--titulo);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--naranja)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 20px 18px;color:var(--texto-suave)}

/* Franja CTA */
.franja-cta{background:var(--naranja);color:#fff;padding:60px 0}
.franja-cta h2{color:#fff}
.franja-cta p{font-size:1.15rem;max-width:640px;margin:0 auto}
.franja-cta .btn--naranja{background:var(--carbon);box-shadow:none}
.franja-cta .btn--borde{color:#fff}

/* Formulario */
.formulario{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:30px}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form-fila{grid-template-columns:1fr}}
.oculto{position:absolute!important;left:-9999px!important}
.contacto-canales{display:grid;gap:14px}
.canal{display:flex;gap:16px;align-items:center;padding:18px;border-radius:14px;background:var(--blanco);border:1px solid var(--linea);text-decoration:none}
.canal:hover{border-color:var(--naranja)}
.canal strong{display:block;font-family:var(--titulo)}
.canal small{color:var(--texto-suave)}

/* Texto legal */
.legal{max-width:820px}
.legal h2{font-size:1.4rem;text-transform:none;margin-top:1.6em}

/* Pie */
.pie{background:var(--carbon);color:#9C978D;padding:60px 0 110px;font-size:.95rem}
.pie__rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.pie h3{color:#fff;font-size:1rem;margin-bottom:14px}
.pie ul{list-style:none;padding:0;margin:0}.pie li{margin-bottom:8px}
.pie a{text-decoration:none;color:#C9C4BA}.pie a:hover{color:var(--naranja)}
.pie__legal{border-top:1px solid var(--carbon-3);margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between}
@media (max-width:860px){.pie__rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie__rejilla{grid-template-columns:1fr}}

/* WhatsApp flotante + barra móvil */
.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 25px rgba(0,0,0,.25);transition:transform .2s}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante svg{width:32px;height:32px;fill:#fff}
.barra-movil{display:none}
@media (max-width:700px){
  .wa-flotante{display:none}
  .barra-movil{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(8,8,10,.96)}
  .barra-movil .btn{padding:13px 10px;font-size:.92rem;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===================== Animaciones al hacer scroll ===================== */
/* Solo se ocultan si hay JavaScript (clase .js en <html>) y el usuario no pide movimiento reducido */
.js [data-anim]{opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms);will-change:opacity,transform}
.js [data-anim="arriba"]{transform:translateY(46px)}
.js [data-anim="izq"]{transform:translateX(-60px)}
.js [data-anim="der"]{transform:translateX(60px)}
.js [data-anim="zoom"]{transform:scale(.86)}
.js [data-anim][data-salida="arriba"]{transform:translateY(-46px)}
.js [data-anim].visible{opacity:1;transform:none}
.js .tarjeta[data-anim].visible:hover{transform:translateY(-6px);transition-delay:0s}

/* Entrada del hero al cargar */
.js .hero__rejilla>div:first-child>*{animation:entrar .8s cubic-bezier(.2,.7,.2,1) both}
.js .hero__rejilla>div:first-child>*:nth-child(2){animation-delay:.08s}
.js .hero__rejilla>div:first-child>*:nth-child(3){animation-delay:.16s}
.js .hero__rejilla>div:first-child>*:nth-child(4){animation-delay:.24s}
.js .hero__rejilla>div:first-child>*:nth-child(5){animation-delay:.32s}
.js .hero__rejilla>div:first-child>*:nth-child(6){animation-delay:.40s}
.js .hero__rejilla>div:last-child{animation:entrar-img 1s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes entrar{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes entrar-img{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
.hero__img{animation:flotar 6s ease-in-out infinite}
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -14px}}
.hero::after{animation:latido 8s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.7}}
.hero h1 .acento{background:linear-gradient(90deg,#FF6B1A,#FFB04A,#FF6B1A);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 5s linear infinite}
@keyframes brillo{to{background-position:200% center}}

/* Barra de progreso de lectura y cabecera al hacer scroll */
.progreso{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--naranja);transform-origin:0 50%;transform:scaleX(0);z-index:70;pointer-events:none}
.cabecera{transition:box-shadow .3s,background .3s}
.cabecera.con-scroll{box-shadow:0 6px 24px rgba(8,8,10,.10);background:rgba(243,238,230,.98)}

/* Cinta en movimiento */
.cinta{background:var(--naranja);color:#fff;overflow:hidden;padding:16px 0;transform:rotate(-1.2deg) scaleX(1.04);margin:-14px 0 0;position:relative;z-index:2;box-shadow:0 10px 30px rgba(255,107,26,.25)}
.cinta__pista{display:flex;width:max-content;animation:cinta 32s linear infinite}
.cinta span{font:900 1.05rem/1 var(--titulo);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;padding:0 22px}
.cinta span::after{content:"✦";margin-left:44px;color:var(--carbon)}
@keyframes cinta{to{transform:translateX(-50%)}}

/* Pasos y tarjetas con brillo al pasar */
.paso{transition:border-color .3s,transform .3s}
.paso:hover{border-color:var(--naranja)}
.galeria figure{transition:transform .35s,box-shadow .35s}
.galeria figure:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:var(--sombra)}
.galeria figure img{transition:transform .5s}
.galeria figure:hover img{transform:scale(1.06)}
.btn--naranja,.btn--wa{position:relative;overflow:hidden}
.btn--naranja::after,.btn--wa::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn--naranja:hover::after,.btn--wa:hover::after{transform:translateX(120%)}
.wa-flotante{animation:pulso 2.6s ease-out infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(31,175,84,.55),0 10px 25px rgba(0,0,0,.25)}70%{box-shadow:0 0 0 16px rgba(31,175,84,0),0 10px 25px rgba(0,0,0,.25)}100%{box-shadow:0 0 0 0 rgba(31,175,84,0),0 10px 25px rgba(0,0,0,.25)}}
.res__total strong{display:inline-block;transition:transform .25s}
.res__total strong.salto{transform:scale(1.08)}

@media (prefers-reduced-motion:reduce){
  /* con "reducir movimiento": solo fundido, sin desplazamientos */
  .js [data-anim]{transform:none!important;transition-property:opacity!important}
  .hero__img,.hero::after,.cinta__pista,.wa-flotante,.hero h1 .acento,.js .hero__rejilla>div>*,.js .hero__rejilla>div:last-child{animation:none!important}
}

/* Fotos verticales en el hero: altura limitada */
.hero__img{width:100%;max-height:min(70vh,540px);object-fit:cover}

/* Tarjetas con render de medalla/trofeo */
.tarjeta--render img{aspect-ratio:1;object-fit:cover;background:#2B2B31}

/* Página Funko */
.tarjeta__cuerpo .precio-grande{font:900 2.4rem/1 var(--titulo);color:var(--naranja);margin:4px 0 12px}
.resumen{background:var(--blanco);border-left:5px solid var(--naranja);border-radius:12px;padding:20px 24px;font-size:1.05rem;max-width:900px}

/* Las columnas no se ensanchan por tablas anchas: la tabla se desplaza dentro de su caja */
.dos-col>*,.calc>*{min-width:0}
.tabla-precios th{white-space:normal}

/* Galerías a dos columnas en móvil */
@media (max-width:600px){.galeria{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.galeria figcaption{font-size:.78rem;padding:8px 10px}}

/* Guías (artículos) */
.articulo{max-width:780px}
.articulo h2{text-transform:none;font-size:clamp(1.35rem,3vw,1.75rem);margin-top:1.8em}
.articulo ul,.articulo ol{padding-left:1.3em;margin:0 0 1.2em}
.articulo li{margin-bottom:.5em}
.articulo a{color:var(--naranja-osc);font-weight:600}
.articulo__img{margin:0 0 28px}
.articulo__img img{border-radius:var(--radio);width:100%;max-height:440px;object-fit:cover;background:#F4F4F4}
.articulo .resumen{margin:20px 0}
.firma{font-size:.9rem;color:#9C978D;margin-top:14px}.firma a{color:#C9C4BA}
.cta-caja{background:var(--carbon);color:#E8E4DC;border-radius:var(--radio);padding:28px;margin-top:40px}
.cta-caja h2{color:#fff;margin-top:0}
.cta-caja .btn--borde{color:#fff}
.legal a,.faq a{color:var(--naranja-osc);font-weight:600}

.tabla-precios{color:var(--texto)}

/* Pie con 5 columnas */
.pie__rejilla{grid-template-columns:1.3fr repeat(4,1fr)}
@media (max-width:1000px){.pie__rejilla{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:640px){.pie__rejilla{grid-template-columns:1fr 1fr}}