/* Página /lonas-y-carteles — Regalos Mai Mai · dirección «Confeti & Papel» */ :root{ --crema:#FFF8F0; --papel:#FFFDF9; --tinta:#1B1033; --mandarina:#FF6B35; --mandarina-osc:#C7451B; --uva:#5B2A86; --uva-osc:#3F1C60; --menta:#06D6A0; --miel:#FFC94A; --bg:#FFF8F0; --surface:#FFFDF9; --surface-2:#FDF0E4; --ink:#1B1033; --ink-soft:#584A6E; --ink-faint:#8A7C9E; --line:#E8DCCC; --line-strong:#1B1033; --accent:#FF6B35; --accent-deep:#C7451B; --on-accent:#FFFDF9; --grape:#5B2A86; --grape-soft:#F1E8F9; --mint:#06D6A0; --mint-soft:#E0FAF2; --honey:#FFC94A; --honey-soft:#FFF3D6; --shadow:#1B1033; --r:18px; } /* Modo oscuro: NO se activa solo. Ponle data-mm-theme="dark" al si algún día quieres la versión oscura. */ :root[data-mm-theme="dark"]{ --bg:#140C2B; --surface:#1E1442; --surface-2:#291B55; --ink:#FFF1E4; --ink-soft:#C6B7DF; --ink-faint:#9C8CBB; --line:#3A2A66; --line-strong:#0C0619; --accent:#FF8657; --accent-deep:#FF6B35; --on-accent:#1B1033; --grape:#C4A0F0; --grape-soft:#2C1B58; --mint:#3FE7BC; --mint-soft:#123C36; --honey:#FFD470; --honey-soft:#3A2C10; --shadow:#0A0518; } .mm-lonas *,.mm-lonas *::before,.mm-lonas *::after{box-sizing:border-box} .mm-lonas{ margin:0; background:var(--bg); color:var(--ink); font-family:"Outfit",-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } .mm-lonas h1,.mm-lonas h2,.mm-lonas h3,.mm-h1,.mm-h2,.mm-display{font-family:"Fraunces","Georgia",serif; font-variation-settings:"SOFT" 40,"WONK" 1; line-height:1.05; text-wrap:balance; margin:0} .mm-lonas h1,.mm-h1{font-size:clamp(2.4rem,6vw,4.2rem); font-weight:900; letter-spacing:-.02em} .mm-lonas h2,.mm-h2{font-size:clamp(1.8rem,3.6vw,2.7rem); font-weight:800; letter-spacing:-.015em} .mm-lonas h3{font-size:1.22rem; font-weight:700} .mm-lonas p{margin:0} .mm-lonas a{color:inherit} .mm-wrap{max-width:1140px; margin:0 auto; padding:0 20px} .mm-eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 10px; } .mm-stack{display:flex; flex-direction:column} .mm-g8{gap:8px}.mm-g12{gap:12px}.mm-g16{gap:16px}.mm-g24{gap:24px}.mm-g32{gap:32px} .mm-lonas.mm-seccion,.mm-lonas.mm-calc,.mm-lonas.mm-dark{padding:clamp(56px,8vw,96px) 0} /* ---------- confetti / paper texture ---------- */ .mm-confetti{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none} .mm-confetti i{position:absolute; width:9px; height:14px; border-radius:2px; opacity:.85; animation:float 9s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(18deg)}} @media (prefers-reduced-motion:reduce){.mm-confetti i{animation:none}} /* ---------- buttons ---------- */ .mm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-size:1rem; font-weight:700; padding:14px 24px; border-radius:999px; border:2.5px solid var(--line-strong); cursor:pointer; background:var(--accent); color:var(--on-accent); box-shadow:4px 4px 0 var(--line-strong); text-decoration:none; transition:transform .14s ease, box-shadow .14s ease; } .mm-btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line-strong)} .mm-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line-strong)} .mm-btn--ghost{background:var(--surface); color:var(--ink)} .mm-btn--mint{background:var(--mint); color:#08281F} .mm-btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,.mm-opt:focus-visible{ outline:3px solid var(--grape); outline-offset:3px; } /* ---------- hero ---------- */ .mm-hero{position:relative; padding:clamp(40px,6vw,72px) 0 clamp(48px,7vw,80px); overflow:hidden} .mm-hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center} .mm-hero p.lead{font-size:1.16rem; color:var(--ink-soft); max-width:52ch} .mm-pricepill{ display:inline-flex; align-items:baseline; gap:7px; background:var(--honey-soft); border:2px solid var(--line-strong); border-radius:999px; padding:7px 16px; font-weight:600; font-size:.95rem; } .mm-pricepill b{font-family:"Fraunces",serif; font-size:1.15rem; font-weight:800} .mm-pillrow{display:flex; flex-wrap:wrap; gap:10px} /* ---------- gallery ---------- */ .mm-gal{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} .mm-card{ background:var(--surface); border:2.5px solid var(--line-strong); border-radius:var(--r); box-shadow:5px 5px 0 var(--line-strong); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; } .mm-card:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--line-strong)} .mm-card figure{margin:0; background:var(--surface-2); border-bottom:2.5px solid var(--line-strong)} .mm-card svg{display:block; width:100%; height:auto} .mm-card .body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1} .mm-card .mm-meta{font-size:.88rem; color:var(--ink-faint)} .mm-card .mm-tag{ align-self:flex-start; margin-top:8px; font-size:.82rem; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--grape-soft); color:var(--grape); } /* ---------- steps ---------- */ .mm-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} .mm-step{background:var(--surface); border:2.5px solid var(--line-strong); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; gap:8px} .mm-step .mm-num{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--honey); color:#1B1033; border:2.5px solid var(--line-strong); font-family:"Fraunces",serif; font-weight:800; font-size:1.05rem; } /* ---------- calculator ---------- */ .mm-calc{background:var(--surface-2); border-top:3px solid var(--line-strong); border-bottom:3px solid var(--line-strong); position:relative} .mm-calc-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start} .mm-panel{background:var(--surface); border:2.5px solid var(--line-strong); border-radius:var(--r); box-shadow:6px 6px 0 var(--line-strong); padding:clamp(20px,3vw,30px)} .mm-field{display:flex; flex-direction:column; gap:10px; padding:20px 0; border-top:1.5px dashed var(--line)} .mm-field:first-of-type{border-top:0; padding-top:0} .mm-field > label,.mm-flabel{font-weight:700; font-size:1.02rem; display:flex; align-items:center; gap:9px} .mm-flabel .n{ width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--grape); color:#FFF; font-size:.78rem; font-weight:700; font-family:"Outfit",sans-serif; } .mm-hint{font-size:.9rem; color:var(--ink-faint); margin-top:-2px} .mm-opts{display:grid; gap:10px} .mm-opts--2{grid-template-columns:1fr 1fr} .mm-opts--3{grid-template-columns:repeat(3,1fr)} .mm-opt{ display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer; background:var(--surface); border:2.5px solid var(--line); border-radius:14px; padding:13px 15px; font:inherit; color:var(--ink); transition:.14s ease; } .mm-opt:hover{border-color:var(--ink-faint)} .mm-opt strong{font-size:.99rem; font-weight:700; line-height:1.25} .mm-opt span{font-size:.84rem; color:var(--ink-faint); line-height:1.35} .mm-opt[aria-pressed="true"]{border-color:var(--line-strong); background:var(--grape-soft); box-shadow:3px 3px 0 var(--line-strong)} .mm-opt[aria-pressed="true"] span{color:var(--ink-soft)} .mm-dims{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:end} .mm-dim{display:flex; flex-direction:column; gap:6px} .mm-dim small{font-size:.83rem; font-weight:600; color:var(--ink-soft); letter-spacing:.02em} .mm-dim .mm-inputbox{display:flex; align-items:center; border:2.5px solid var(--line-strong); border-radius:14px; background:var(--surface); overflow:hidden} .mm-dim input{ width:100%; border:0; background:transparent; color:var(--ink); font:inherit; font-size:1.4rem; font-weight:700; padding:11px 0 11px 15px; font-variant-numeric:tabular-nums; } .mm-dim input::-webkit-outer-spin-button,.mm-dim input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .mm-dim input[type=number]{-moz-appearance:textfield} .mm-dim .mm-unit{padding:0 15px 0 4px; color:var(--ink-faint); font-weight:600} .mm-times{font-family:"Fraunces",serif; font-size:1.5rem; color:var(--ink-faint); padding-bottom:12px} .mm-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px} .mm-chip{ font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; padding:6px 13px; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink-soft); } .mm-chip:hover{border-color:var(--ink-faint); color:var(--ink)} .mm-qty{display:flex; align-items:center; gap:0; border:2.5px solid var(--line-strong); border-radius:999px; overflow:hidden; width:max-content; background:var(--surface)} .mm-qty button{width:44px; height:44px; border:0; background:transparent; font:inherit; font-size:1.3rem; font-weight:700; cursor:pointer; color:var(--ink)} .mm-qty button:hover{background:var(--honey-soft)} .mm-qty input{width:56px; text-align:center; border:0; border-left:2px solid var(--line); border-right:2px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-weight:700; font-size:1.05rem; padding:11px 0} .mm-lonas textarea,.mm-lonas input[type=text],.mm-lonas input[type=tel],.mm-lonas input[type=email],.mm-lonas input[type=date]{ width:100%; font:inherit; color:var(--ink); background:var(--surface); border:2.5px solid var(--line); border-radius:14px; padding:12px 14px; } .mm-lonas textarea{min-height:132px; resize:vertical; line-height:1.55} .mm-lonas textarea:focus,.mm-lonas input:focus{border-color:var(--line-strong)} .mm-filebox{ display:flex; align-items:center; gap:12px; border:2.5px dashed var(--line); border-radius:14px; padding:14px 16px; background:var(--surface); flex-wrap:wrap; } .mm-filebox label{cursor:pointer; font-weight:700; color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px} .mm-filebox input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none} .mm-filename{font-size:.9rem; color:var(--ink-soft)} .mm-grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px} /* ---------- ticket ---------- */ .mm-ticket{position:sticky; top:20px; display:flex; flex-direction:column; gap:18px} .mm-preview{ background:var(--surface); border:2.5px solid var(--line-strong); border-radius:var(--r); box-shadow:6px 6px 0 var(--line-strong); padding:18px; display:flex; flex-direction:column; gap:6px; } .mm-stage{height:230px; display:grid; place-items:center; background:var(--surface-2); border-radius:12px; overflow:hidden} .mm-stage svg{max-width:100%; max-height:100%; display:block} .mm-preview .mm-cap{font-size:.86rem; color:var(--ink-faint); text-align:center} .mm-tab{ background:var(--tinta); color:#FFF3E6; border:2.5px solid var(--line-strong); border-radius:var(--r); box-shadow:6px 6px 0 var(--line-strong); padding:22px 24px 24px; display:flex; flex-direction:column; gap:2px; } .mm-tab .mm-rows{display:flex; flex-direction:column; gap:9px; margin:14px 0 4px; font-size:.94rem} .mm-tab .mm-row{display:flex; justify-content:space-between; gap:14px; color:#D6C9EC} .mm-tab .mm-row b{font-weight:600; color:#FFF3E6; font-variant-numeric:tabular-nums; white-space:nowrap} .mm-tab .mm-row.free b{color:#3FE7BC} .mm-tab hr{border:0; border-top:1.5px dashed rgba(255,243,230,.28); margin:14px 0 12px} .mm-total{display:flex; align-items:baseline; justify-content:space-between; gap:12px} .mm-total .mm-lbl{font-size:.95rem; color:#D6C9EC; letter-spacing:.02em} .mm-total .mm-val{font-family:"Fraunces",serif; font-weight:900; font-size:2.7rem; color:#FFC94A; font-variant-numeric:tabular-nums; line-height:1} .mm-tab .mm-note{font-size:.83rem; color:#B7A7D4; margin-top:10px; line-height:1.45} .mm-tab .mm-note.warn{color:#FFC94A} .mm-m2{font-size:.88rem; color:#B7A7D4} .mm-tab .mm-btn{margin-top:16px; width:100%; border-color:#0C0619} .mm-tab .mm-btn--ghost{background:rgba(255,243,230,.1); color:#FFF3E6; box-shadow:4px 4px 0 #0C0619} /* ---------- dark price section ---------- */ .mm-dark{background:var(--tinta); color:#FFF3E6; border-top:3px solid var(--line-strong)} .mm-dark h2{color:#FFF3E6} .mm-dark .mm-eyebrow{color:#FFC94A} .mm-tablewrap{overflow-x:auto; border:2.5px solid #0C0619; border-radius:var(--r); background:rgba(255,243,230,.04)} .mm-lonas table{width:100%; border-collapse:collapse; min-width:520px} .mm-lonas th,.mm-lonas td{padding:13px 18px; text-align:left; border-bottom:1px solid rgba(255,243,230,.14)} .mm-lonas th{font-size:.79rem; letter-spacing:.11em; text-transform:uppercase; color:#B7A7D4; font-weight:600} .mm-lonas td{color:#EDE3F7} .mm-lonas td.mm-num{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:#FFC94A; white-space:nowrap} .mm-lonas tr:last-child td{border-bottom:0} /* ---------- faq ---------- */ .mm-faq{display:grid; grid-template-columns:1fr 1fr; gap:14px 24px} .mm-lonas details{background:var(--surface); border:2.5px solid var(--line-strong); border-radius:14px; padding:0; height:max-content} .mm-lonas summary{cursor:pointer; padding:16px 20px; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center} .mm-lonas summary::-webkit-details-marker{display:none} .mm-lonas summary::after{content:"+"; font-family:"Fraunces",serif; font-size:1.4rem; color:var(--accent-deep); line-height:1} .mm-lonas details[open] summary::after{content:"–"} .mm-lonas details p{padding:0 20px 18px; color:var(--ink-soft); font-size:.96rem} .mm-lonas-footer{background:var(--surface-2); border-top:3px solid var(--line-strong); padding:44px 0} .mm-footgrid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center} /* barra de precio fija en móvil */ .mm-mobilebar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--tinta); color:#FFF3E6; border-top:3px solid var(--line-strong); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); align-items:center; justify-content:space-between; gap:14px; transform:translateY(110%); transition:transform .22s ease; } .mm-mobilebar.on{transform:translateY(0)} .mm-mobilebar .mm-mb-t{display:flex; flex-direction:column; line-height:1.15} .mm-mobilebar .mm-mb-t small{font-size:.75rem; color:#B7A7D4} .mm-mobilebar .mm-mb-t b{font-family:"Fraunces",serif; font-size:1.5rem; color:#FFC94A; font-variant-numeric:tabular-nums} .mm-mobilebar .mm-btn{padding:11px 18px; font-size:.94rem; border-color:#0C0619; box-shadow:3px 3px 0 #0C0619} @media (prefers-reduced-motion:reduce){.mm-mobilebar{transition:none}} @media (max-width:900px){ .mm-mobilebar{display:flex} .mm-hero-grid,.mm-calc-grid,.mm-gal,.mm-steps,.mm-faq,.mm-grid2{grid-template-columns:1fr} .mm-gal{gap:18px} .mm-ticket{position:static} .mm-opts--3{grid-template-columns:1fr} } @media (max-width:560px){ .mm-opts--2{grid-template-columns:1fr} .mm-total .mm-val{font-size:2.2rem} } /* ================================================================ Ajustes para WordPress + Hello Elementor ================================================================ */ /* Hello Elementor no pinta nada raro, pero Elementor sí envuelve los widgets: quitamos márgenes heredados y dejamos que el ancho lo mande .mm-wrap. */ .elementor-widget-mm_lonas_calculadora .elementor-widget-container, .elementor-widget-mm_lonas_galeria .elementor-widget-container, .elementor-widget-mm_lonas_tarifa .elementor-widget-container, .elementor-widget-mm_lonas_hero .elementor-widget-container{margin:0;padding:0} .mm-lonas{margin:0} .mm-lonas img{max-width:100%;height:auto} .mm-h1,.mm-h2{margin:0} .mm-intro{color:var(--ink-soft);max-width:60ch;margin-top:10px} .mm-dark .mm-intro{color:#C6B7DF} .mm-dark .mm-eyebrow{color:#FFC94A} .mm-dark .mm-h2{color:#FFF3E6} .mm-pie{color:#B7A7D4;font-size:.92rem} .mm-right{text-align:right} .mm-hero-art svg{display:block;width:100%;height:auto} .mm-clip{font-size:1.4rem;line-height:1} .mm-filebox-txt{flex:1;min-width:180px} .mm-field[hidden]{display:none !important} /* Mensajes de estado bajo los botones del ticket */ .mm-aviso{font-size:.88rem;margin-top:10px;color:#3FE7BC;min-height:1px} .mm-aviso.mm-error{color:#FF9E7A} .mm-aviso:empty{margin-top:0} .mm-aviso a{color:#FFC94A;text-decoration:underline;text-underline-offset:3px} .mm-note--envio{color:#B7A7D4;font-size:.8rem;margin-top:10px} /* Botón ocupado */ .mm-btn[aria-busy="true"]{opacity:.7;pointer-events:none} /* Medidas de la línea en el carrito de WooCommerce */ .mm-cart-medida{display:block;font-weight:400;opacity:.7} /* La barra fija de móvil no debe taparse con la del tema */ @media (max-width:900px){ .mm-mobilebar{z-index:9999} body.admin-bar .mm-mobilebar{bottom:0} } /* ---- Piezas que monta Elementor ---- */ .mm-seccion-hero{overflow:hidden} .mm-lonas .mm-paso-titulo,.mm-lonas .elementor-heading-title{font-family:"Fraunces",Georgia,serif} .mm-step .elementor-widget{width:100%} .mm-step .elementor-widget-text-editor p{color:var(--ink-soft);font-size:.97rem;margin:0} .mm-step .elementor-widget-html{line-height:0} .mm-cierre .elementor-widget-heading{max-width:32ch} .mm-cierre .elementor-button{ background:var(--mint);color:#08281F;border:2.5px solid var(--line-strong); border-radius:999px;box-shadow:4px 4px 0 var(--line-strong); font-family:"Outfit",sans-serif;font-weight:700;padding:14px 24px; transition:transform .14s ease, box-shadow .14s ease; } .mm-cierre .elementor-button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line-strong)} .mm-stage-vacio{color:var(--ink-faint);font-size:.9rem;padding:20px;text-align:center}