:root{--bg:#05080d;--card:#0e141c;--txt:#eef2f6;--mut:#8fa0b3;--acc:#07ddc3;--acc2:#1f5bff;--r:16px} *{box-sizing:border-box;margin:0} body{font-family:system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.5} a{color:inherit} .wrap{max-width:1100px;margin:0 auto;padding:0 16px} body>header{position:sticky;top:0;background:#05080dee;backdrop-filter:blur(8px);border-bottom:1px solid #18232f;z-index:10} nav{display:flex;align-items:center;justify-content:space-between;height:60px} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.3rem} .logo img{display:block} .logo .lt{font-weight:400}.logo .lt b{font-weight:800} .logo .t3d{font-weight:800;font-size:.8rem;color:var(--acc);border:2px solid var(--acc);border-radius:6px;padding:0 6px;line-height:1.35} .hero-logo{display:block;margin:0 auto 18px;filter:drop-shadow(0 0 24px #07ddc355)} nav a.l{margin-left:18px;text-decoration:none;color:var(--mut);font-size:.95rem} nav a.l:hover{color:var(--txt)} .hero{padding:70px 0 50px;text-align:center;background:radial-gradient(circle at 50% 0,#0b2a55 0,transparent 60%)} .hero h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.1;margin-bottom:14px} .hero h1 em{font-style:normal;color:var(--acc)} .hero p{color:var(--mut);max-width:560px;margin:0 auto 26px} .btn{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--acc);color:#111;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem} .btn.alt{background:transparent;color:var(--txt);border:1px solid #2c4258;margin-left:8px} section{padding:50px 0} h2{font-size:1.7rem;margin-bottom:6px} .sub{color:var(--mut);margin-bottom:24px} .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} .filters button{background:var(--card);color:var(--txt);border:1px solid #223142;border-radius:999px;padding:8px 16px;cursor:pointer} .filters button.on{background:var(--acc2);border-color:var(--acc2)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px} .card{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid #18232f;display:flex;flex-direction:column} .ph{aspect-ratio:1;background:linear-gradient(135deg,#0d2238,#0b3a4a);display:grid;place-items:center;font-size:3rem;position:relative} .ph img{width:100%;height:100%;object-fit:cover} .tag{position:absolute;top:10px;left:10px;font-size:.72rem;background:var(--acc);color:#111;padding:3px 9px;border-radius:999px;font-weight:700} .cb{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1} .cb h3{font-size:1.02rem} .cb p{color:var(--mut);font-size:.88rem;flex:1} .pr{display:flex;justify-content:space-between;align-items:center;margin-top:6px} .pr b{font-size:1.15rem} .pr a{font-size:.85rem;background:#25d366;color:#08210f;padding:7px 12px;border-radius:999px;text-decoration:none;font-weight:700} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px} .step{background:var(--card);padding:20px;border-radius:var(--r);border:1px solid #18232f} .step i{font-style:normal;font-size:1.8rem} .step h3{margin:8px 0 4px;font-size:1rem}.step p{color:var(--mut);font-size:.9rem} form{display:grid;gap:12px;max-width:560px} input,textarea,select{width:100%;padding:12px;border-radius:10px;border:1px solid #223142;background:var(--card);color:var(--txt);font:inherit} footer{border-top:1px solid #18232f;padding:28px 0;color:var(--mut);text-align:center;font-size:.9rem} footer a{margin:0 8px} .links{display:flex;align-items:center} .btn.sm{padding:8px 16px;font-size:.9rem;margin-left:18px} .pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;margin-top:26px} .pills li{background:var(--card);border:1px solid #18232f;border-radius:999px;padding:6px 14px;font-size:.88rem;color:var(--mut)} .tips{margin-top:20px;background:var(--card);border-left:3px solid var(--acc);padding:14px 16px;border-radius:10px;color:var(--mut);font-size:.92rem} .tips b{color:var(--txt)} .note{margin-top:16px;color:var(--mut);font-size:.9rem} .cb h3 small{color:var(--mut);font-weight:400;font-size:.8rem;margin-left:4px} form small{color:var(--mut)} .pills.left{justify-content:flex-start;margin:14px 0 18px} .especial{text-align:center;background:linear-gradient(180deg,transparent,#0b2a5533,transparent);border-top:1px solid #18232f;border-bottom:1px solid #18232f} .especial p{color:var(--mut);max-width:620px;margin:10px auto 24px} .especial h2{font-size:clamp(1.6rem,4vw,2.4rem)}.especial h2 em{font-style:normal;color:var(--acc)} .eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:8px} nav a.l.on{color:var(--acc)} .pills.left{justify-content:flex-start} .page-head{padding:50px 0 10px;text-align:center;background:radial-gradient(circle at 50% 0,#0b2a55 0,transparent 60%)} .page-head h1{font-size:clamp(1.8rem,5vw,2.8rem)} .page-head p{color:var(--mut);margin-top:6px} .grid-sec{padding-top:30px} .filters[hidden]{display:none} button.card.trabajo{padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:transform .15s,border-color .15s} button.card.trabajo:hover{transform:translateY(-3px);border-color:var(--acc)} .trabajo .ph{background:#fff} .trabajo .ph img{aspect-ratio:1;object-position:center top} .cta-box{margin-top:44px;text-align:center;background:var(--card);border:1px solid #18232f;border-radius:var(--r);padding:28px 16px} .cta-box p{color:var(--mut);margin:4px 0 16px} dialog#visor{margin:auto;width:min(960px,94vw);max-height:92vh;overflow:auto;background:var(--card);color:var(--txt);border:1px solid #223142;border-radius:var(--r);padding:20px} dialog#visor::backdrop{background:#000b} .cerrar{position:absolute;top:10px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:#000a;color:#fff;font-size:1rem;cursor:pointer} .visor-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:start} .pv{background:#fff;border-radius:12px;overflow:hidden;display:grid;place-items:center} .pv img{width:100%;max-height:70vh;object-fit:contain;display:block} .pinfo h3{font-size:1.5rem}.pinfo h3 small{display:block;color:var(--acc);font-size:.9rem;font-weight:500} .pinfo p{color:var(--mut);margin-top:8px} .thumbs{display:flex;gap:8px;margin:0 0 20px;flex-wrap:wrap} .thumbs button{width:60px;height:60px;padding:0;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:#fff;opacity:.65} .thumbs button.on,.thumbs button:hover{border-color:var(--acc);opacity:1} .thumbs img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:800px){.visor-grid{grid-template-columns:1fr}} /* ===== Animaciones ===== */ @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.15)}} @keyframes shimmer{to{background-position:200% center}} @keyframes pop{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none}} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes swap{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}} @keyframes pulse{0%{box-shadow:0 0 0 0 #07ddc388}100%{box-shadow:0 0 0 14px #07ddc300}} /* cabecera de Mis trabajos */ .page-head{position:relative;overflow:hidden} .page-head::before,.page-head::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(70px);opacity:.28;z-index:0;animation:blob 9s ease-in-out infinite} .page-head::before{background:#07ddc3;left:8%;top:-80px} .page-head::after{background:#1f5bff;right:8%;top:-60px;animation-delay:-4s} .page-head .wrap{position:relative;z-index:1} .page-head h1{background:linear-gradient(90deg,#fff,#07ddc3,#1f8bff,#fff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite,fadeUp .7s both} .page-head p{animation:fadeUp .7s .15s both} .filters{animation:fadeUp .7s .25s both} .filters button{transition:transform .2s,background .2s,border-color .2s} .filters button:hover{transform:translateY(-2px);border-color:var(--acc)} /* logo y botones */ .logo img{transition:transform .5s} .logo:hover img{transform:rotate(360deg) scale(1.08)} .btn{transition:transform .2s,box-shadow .2s,filter .2s} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #07ddc344;filter:brightness(1.08)} .btn:active{transform:translateY(0)} .cta-box .btn{animation:pulse 2.2s infinite} nav a.l{position:relative} nav a.l::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .25s} nav a.l:hover::after,nav a.l.on::after{transform:scaleX(1)} /* aparecer al hacer scroll */ .reveal{opacity:0;transform:translateY(26px)} .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--d,0ms),transform .6s var(--d,0ms)} /* tarjetas de trabajos: inclinación 3D, zoom y brillo que sigue al cursor */ .grid{perspective:1100px} button.card.trabajo{position:relative;transform-style:preserve-3d;will-change:transform} button.card.trabajo.in{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out,border-color .2s,box-shadow .3s,opacity .6s var(--d,0ms)} button.card.trabajo:hover{transform:none;border-color:var(--acc);box-shadow:0 18px 44px #07ddc322,0 0 0 1px #07ddc366} button.card.trabajo.in:hover{transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} .trabajo .ph{overflow:hidden} .trabajo .ph img{transition:transform .6s cubic-bezier(.2,.7,.2,1)} .trabajo:hover .ph img{transform:scale(1.09)} .trabajo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffffff2e,transparent 45%)} .trabajo:hover::after{opacity:1} .trabajo .tag{animation:floaty 3s ease-in-out infinite} .trabajo .cb h3{transition:color .2s} .trabajo:hover .cb h3{color:var(--acc)} .trabajo .cb::after{content:"Ver fotos →";color:var(--acc);font-size:.85rem;opacity:0;transform:translateX(-8px);transition:.3s} .trabajo:hover .cb::after{opacity:1;transform:none} /* ventana de fotos */ dialog#visor[open]{animation:pop .35s cubic-bezier(.2,.8,.2,1)} dialog#visor[open]::backdrop{animation:fade .3s} .pv img.swap{animation:swap .45s cubic-bezier(.2,.8,.2,1)} .thumbs button{transition:transform .2s,opacity .2s,border-color .2s} .thumbs button:hover{transform:translateY(-3px) scale(1.06)} .cerrar{transition:transform .25s,background .2s} .cerrar:hover{transform:rotate(90deg);background:#e5484d} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} } /* ===== Carta holográfica (ventana de fotos) ===== */ @keyframes cartaIn{from{opacity:0;transform:perspective(900px) rotateY(-90deg) scale(.85)}to{opacity:1;transform:perspective(900px) rotateY(0) scale(1)}} @keyframes cartaIdle{0%,100%{translate:0 0}50%{translate:0 -7px}} .visor-grid{perspective:900px} .pv{position:relative;isolation:isolate;touch-action:pan-y;border:3px solid #d9c36a;border-radius:18px;box-shadow:0 14px 40px #0009,0 0 0 1px #0006; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s; animation:cartaIdle 4s ease-in-out infinite} dialog#visor[open] .pv{animation:cartaIn .7s cubic-bezier(.2,.8,.2,1),cartaIdle 4s 0.7s ease-in-out infinite} .pv.activa{transition:transform .08s linear,box-shadow .3s;animation-play-state:paused;box-shadow:0 22px 54px #000b,0 0 34px #07ddc355} .pv img{position:relative;z-index:0} /* holograma arcoíris */ .pv::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:color-dodge; background:repeating-linear-gradient(115deg,#ff4d8d 0%,#ffd84d 12%,#4dff9a 24%,#4dc9ff 36%,#9a6bff 48%,#ff4d8d 60%); background-size:300% 300%;background-position:var(--hx,50%) var(--hy,50%);filter:saturate(1.1) brightness(.75) contrast(1.1)} /* destello de luz */ .pv::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:overlay; background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,50%),#ffffffdd 0%,#ffffff55 25%,transparent 60%)} .pv.activa::before{opacity:.55} .pv.activa::after{opacity:1} @media (prefers-reduced-motion:reduce){.pv{animation:none!important;transform:none}} /* ===== Corrección de barra de scroll en la ventana de fotos ===== */ dialog#visor{overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding:28px;max-height:92vh;max-height:92dvh} dialog#visor::-webkit-scrollbar{display:none} .pv img{max-height:min(62vh,560px)} .visor-grid{align-items:center} /* ===== Diseño responsivo ===== */ html{-webkit-text-size-adjust:100%} html,body{overflow-x:hidden} img{max-width:100%} .btn.alt{margin-left:0} .hero .btn.alt,.especial .btn.alt{margin-left:8px} @media (max-width:900px){ .wrap{padding:0 20px} section{padding:40px 0} .visor-grid{grid-template-columns:1fr;gap:18px} .pv img{max-height:48vh} } @media (max-width:640px){ nav{height:56px} .links .l:not(.keep){display:none} .links .l{margin-left:12px;font-size:.88rem} .btn.sm{padding:7px 14px;font-size:.85rem;margin-left:12px} .hero{padding:44px 0 36px} .hero-logo{width:84px;height:84px} .hero .btn,.especial .btn{display:block;width:100%;max-width:320px;margin:10px auto 0} .hero .btn.alt,.especial .btn.alt{margin-left:auto} .pills li{font-size:.8rem;padding:5px 11px} h2{font-size:1.4rem} .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .cb{padding:10px}.cb h3{font-size:.95rem}.cb p{font-size:.8rem} .pr{flex-wrap:wrap;gap:6px} .steps{grid-template-columns:1fr 1fr;gap:10px} .step{padding:14px} .page-head{padding:34px 0 6px} .cta-box{padding:22px 14px} form{max-width:100%} dialog#visor{width:96vw;padding:16px;border-radius:14px} .pv img{max-height:42vh} .pinfo h3{font-size:1.25rem} .thumbs button{width:52px;height:52px} } @media (max-width:400px){ .logo .lt{display:none} .steps{grid-template-columns:1fr} .grid{grid-template-columns:1fr 1fr} } @media (max-height:520px) and (orientation:landscape){ .visor-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)} .pv img{max-height:70vh} } /* ===== Página principal con más vida ===== */ @keyframes logoFloat{0%,100%{translate:0 0}50%{translate:0 -10px}} @keyframes glow{0%,100%{filter:drop-shadow(0 0 16px #07ddc355)}50%{filter:drop-shadow(0 0 38px #07ddc3cc)}} @keyframes gradShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}} @keyframes waPulse{0%{box-shadow:0 6px 18px #0006,0 0 0 0 #25d36699}100%{box-shadow:0 6px 18px #0006,0 0 0 18px #25d36600}} /* portada: capas de impresión 3D en movimiento + luces de color */ .hero{position:relative;overflow:hidden; background:radial-gradient(circle at 50% 0,#0b2a55 0,transparent 60%)} .hero::before,.hero::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(80px);opacity:.3;z-index:0;animation:blob 10s ease-in-out infinite} .hero::before{background:#07ddc3;left:-60px;top:20px} .hero::after{background:#1f5bff;right:-60px;bottom:-40px;animation-delay:-5s} .hero .wrap{position:relative;z-index:1} .hero .wrap>*{animation:fadeUp .8s both} .hero .wrap>:nth-child(2){animation-delay:.12s} .hero .wrap>:nth-child(3){animation-delay:.24s} .hero .wrap>:nth-child(4){animation-delay:.36s} .hero .wrap>:nth-child(5){animation-delay:.42s} .hero .wrap>:nth-child(6){animation-delay:.55s} /* logo grande: flota, brilla y gira al pasar el cursor (igual que el de arriba) */ .hero .wrap>img.hero-logo{cursor:pointer;transition:transform .7s cubic-bezier(.3,.7,.2,1); animation:fadeUp .8s both,logoFloat 5s 1s ease-in-out infinite,glow 3.5s ease-in-out infinite} .hero-logo:hover,.hero-logo:active{transform:rotate(360deg) scale(1.1)} /* título con degradado animado */ .hero h1 em,.especial h2 em{background:linear-gradient(90deg,#07ddc3,#1f8bff,#07ddc3);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite} /* etiquetas flotantes */ .pills li{animation:floaty 3.6s ease-in-out infinite;transition:border-color .2s,color .2s} .pills li:nth-child(2){animation-delay:-1.2s}.pills li:nth-child(3){animation-delay:-2.4s} .pills li:hover{border-color:var(--acc);color:var(--txt)} /* botón principal con pulso */ .hero .btn:not(.alt){animation:pulse 2.4s infinite} .btn.alt:hover{border-color:var(--acc);color:var(--acc)} /* tarjetas y pasos */ .card{transition:transform .25s,box-shadow .25s,border-color .25s} .card:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 16px 40px #07ddc320} .ph{overflow:hidden;transition:font-size .3s} .ph img{transition:transform .5s} .card:hover .ph{font-size:3.6rem} .card:hover .ph img{transform:scale(1.08)} .pr a{transition:transform .2s,filter .2s} .pr a:hover{transform:scale(1.08);filter:brightness(1.1)} .step{transition:transform .25s,border-color .25s,box-shadow .25s} .step:hover{transform:translateY(-5px);border-color:var(--acc);box-shadow:0 12px 30px #07ddc318} .step i{display:inline-block;transition:transform .35s} .step:hover i{transform:scale(1.3) rotate(-10deg)} .tips{transition:transform .25s}.tips:hover{transform:translateX(4px)} /* franja de especialidad con fondo en movimiento */ .especial{background:linear-gradient(120deg,#07ddc31a,#1f5bff26,#07ddc31a);background-size:220% 220%;animation:gradShift 9s ease infinite} /* enlaces del pie */ footer a{text-decoration:none;transition:color .2s}footer a:hover{color:var(--acc)} /* barra de progreso y botón flotante de WhatsApp */ .progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#07ddc3,#1f5bff);z-index:60;transition:width .1s linear} .wa-float{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;z-index:40;text-decoration:none;box-shadow:0 6px 18px #0006;animation:waPulse 2.4s infinite;transition:transform .2s} .wa-float:hover{transform:scale(1.12) rotate(-6deg)} @media (prefers-reduced-motion:reduce){ .hero,.especial,.hero::before,.hero::after{animation:none!important} .wa-float{animation:none} } /* ===== "Mis trabajos" del inicio: cartas estilo Pokémon ===== */ #trabajos h2,#trabajos .sub{text-align:center} .vermas{color:var(--acc);text-decoration:none;white-space:nowrap;margin-left:6px;font-weight:600} .vermas:hover{text-decoration:underline} #destacados{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;perspective:1000px} .carta{position:relative;display:block;flex:0 0 min(260px,calc((100% - 66px)/4));aspect-ratio:63/88; border:3px solid #d9c36a;border-radius:16px;overflow:hidden;background:#fff;isolation:isolate;cursor:pointer; box-shadow:0 12px 30px #0009,0 0 0 1px #0006; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s} .carta img{position:relative;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top} .carta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:color-dodge; background:repeating-linear-gradient(115deg,#ff4d8d 0%,#ffd84d 12%,#4dff9a 24%,#4dc9ff 36%,#9a6bff 48%,#ff4d8d 60%); background-size:300% 300%;background-position:var(--hx,50%) var(--hy,50%);filter:saturate(1.1) brightness(.75) contrast(1.1)} .carta::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:overlay; background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,50%),#ffffffdd 0%,#ffffff55 25%,transparent 60%)} .carta.activa{transition:transform .08s linear,box-shadow .3s;box-shadow:0 20px 48px #000b,0 0 32px #07ddc366} .carta.activa::before{opacity:.55} .carta.activa::after{opacity:1} .carta:focus-visible{outline:3px solid var(--acc);outline-offset:4px} /* responsivo: 4 cartas en pantalla grande, 2 en mediana, 1 en pequeña */ @media (max-width:900px){ .carta{flex-basis:min(280px,calc((100% - 22px)/2))} #destacados .carta:nth-child(n+3){display:none} } @media (max-width:560px){ #destacados{gap:12px} .carta{flex-basis:calc((100% - 12px)/2);border-width:2px;border-radius:12px} /* 2 cartas pequeñas, una al lado de la otra */ } @media (prefers-reduced-motion:reduce){.carta{transform:none}} /* ===== Especialidad: tarjetas de tipo (Mascotas / Personas) ===== */ .tipos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:720px;margin:0 auto 26px} a.tipo{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit;background:var(--card);border:1px solid #18232f;border-radius:var(--r);padding:22px 16px;transition:transform .25s,border-color .25s,box-shadow .25s} a.tipo:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 16px 40px #07ddc320} a.tipo i{font-style:normal;font-size:2.6rem;transition:transform .35s} a.tipo:hover i{transform:scale(1.2) rotate(-8deg)} a.tipo h3{font-size:1.2rem} a.tipo p{color:var(--mut);font-size:.9rem;margin:0} a.tipo span{color:var(--acc);font-weight:600;font-size:.88rem;margin-top:6px} .especial .tipos p{max-width:none} .seg{justify-content:center} @media (max-width:560px){.tipos{grid-template-columns:1fr}} /* Fondo animado de la portada: boquilla de impresora 3D (js/boquilla.js) */ .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} /* ===== Nuestra especialidad: título protagonista ===== */ .especial{padding:70px 0} .especial .eyebrow{font-size:.9rem;font-weight:700;letter-spacing:.18em;padding:6px 16px;border:1px solid #07ddc366;border-radius:999px;background:#07ddc314;margin-bottom:16px} .especial h2{font-size:clamp(2.2rem,7vw,4rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;max-width:900px;margin:0 auto 14px} .especial h2 em{text-shadow:0 0 40px #07ddc333} .especial .wrap>p:not(.centro){font-size:.95rem;max-width:560px;margin:0 auto 28px} .centro{text-align:center;margin-top:22px} .especial .centro{margin:0 0 22px} /* ===== Galería de figuras personalizadas (foto -> figura) ===== */ .pares-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px} #pares-inicio{max-width:820px;margin:6px auto 0;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .par{background:var(--card);border:1px solid #18232f;border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;transition:transform .25s,border-color .25s,box-shadow .25s} .par:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 16px 40px #07ddc320} .par header{display:flex;justify-content:space-between;align-items:center;gap:10px} .par h3{font-size:1.15rem} .chip{font-size:.78rem;color:var(--acc);border:1px solid #07ddc355;border-radius:999px;padding:3px 10px;white-space:nowrap} .par-img{display:flex;align-items:center;gap:8px} .par-img figure{flex:1;min-width:0;margin:0;text-align:center} .par-img figure>button,.par-img figure>img{display:block;width:100%;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#fff;border:0;padding:0;cursor:zoom-in} .par-img figure>img{object-fit:cover;cursor:default} .par-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .par-img figure>button:hover img{transform:scale(1.07)} .par-img figcaption{font-size:.8rem;color:var(--mut);margin-top:6px} .par-img figure:last-child figcaption{color:var(--acc);font-weight:600} .par-img figure:last-child>button,.par-img figure:last-child>img{box-shadow:0 0 0 2px #d9c36a,0 10px 26px #0008} .flecha{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#07ddc3,#1f5bff);color:#05080d;font-weight:800;margin-bottom:22px;animation:floaty 2.6s ease-in-out infinite} .par p{color:var(--mut);font-size:.9rem} .vacio{text-align:center;color:var(--mut);padding:40px 10px} .cta-box .btn.alt{margin-left:8px} dialog#zoom{background:transparent;border:0;padding:0;max-width:96vw;max-height:96vh;margin:auto;overflow:hidden} dialog#zoom::backdrop{background:#000d} dialog#zoom img{display:block;max-width:96vw;max-height:92vh;border-radius:14px;cursor:zoom-out} dialog#zoom[open]{animation:pop .3s cubic-bezier(.2,.8,.2,1)} @media (max-width:560px){ .pares-grid,#pares-inicio{grid-template-columns:1fr} .especial{padding:50px 0} .flecha{width:28px;height:28px;font-size:.85rem} .cta-box .btn.alt{margin:10px 0 0} } /* ===== Personalizadas: tarjeta que se abre + ventana de detalle ===== */ .par.abre{cursor:pointer} .par.abre:focus-visible{outline:3px solid var(--acc);outline-offset:3px} .par .ver{color:var(--acc);font-weight:600;font-size:.88rem;transition:transform .25s} .par.abre:hover .ver{transform:translateX(6px)} .par-link{display:block;text-decoration:none;color:inherit} .par-link .par{height:100%} dialog#detalle{margin:auto;width:min(1000px,95vw);max-height:92vh;max-height:92dvh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;background:var(--card);color:var(--txt);border:1px solid #223142;border-radius:var(--r);padding:26px} dialog#detalle::-webkit-scrollbar{display:none} dialog#detalle::backdrop{background:#000b} dialog#detalle[open]{animation:pop .35s cubic-bezier(.2,.8,.2,1)} dialog#detalle[open]::backdrop{animation:fade .3s} .det-cab{padding-right:40px;margin-bottom:16px} .det-cab h3{font-size:1.5rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .det-cab p{color:var(--mut);margin-top:4px} .det-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start;margin-bottom:18px} .det-grid.solo,dialog#detalle.sin-orig .det-grid{grid-template-columns:1fr} .det-orig,.det-fig{margin:0;text-align:center} .det-box{background:#fff;border-radius:12px;overflow:hidden;display:grid;place-items:center} .det-box img{display:block;width:100%;max-height:60vh;object-fit:contain} .det-fig .det-box{box-shadow:0 0 0 2px #d9c36a,0 10px 26px #0008} .det-box img.swap{animation:swap .45s cubic-bezier(.2,.8,.2,1)} .det-grid figcaption{font-size:.85rem;color:var(--mut);margin-top:8px} .det-fig figcaption{color:var(--acc);font-weight:600} .det-fig .thumbs{justify-content:center;margin:12px 0 0} dialog#detalle .btn{display:inline-block} @media (max-width:760px){ .det-grid{grid-template-columns:1fr} .det-box img{max-height:46vh} dialog#detalle{padding:18px} } /* ===== Efecto tarjeta 3D (solo inclinación, sin brillos) ===== */ .par{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s} .par:hover{transform:perspective(900px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} .par.inclina{transition:transform .08s linear,border-color .25s,box-shadow .25s} .par .par-img{transform-style:preserve-3d} .par .par-img figure{transform:translateZ(22px)} /* las fotos "salen" un poco de la tarjeta */ .par header{transform:translateZ(10px)} .det-fig .det-box{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .45s cubic-bezier(.2,.8,.2,1)} .det-fig .det-box.inclina{transition:transform .08s linear} @media (prefers-reduced-motion:reduce){.par,.par:hover,.det-fig .det-box{transform:none}} /* figuras de ejemplo dentro de la especialidad (solo "La foto" -> "La figura") */ .pares-grid[hidden]{display:none} .par-mini{padding:14px} .par-mini .par-img figcaption{font-size:.85rem} .especial .centro.ver-galeria{margin:26px 0 38px} .par-mini.abre{cursor:pointer} .mas-trabajos{margin-top:32px} #elige h2,#elige .sub{text-align:center} #elige .tipos{margin-bottom:0} /* ===== Fondo unificado: "Nuestra especialidad" + "Cómo funciona" comparten la misma banda ===== */ .banda{background:linear-gradient(120deg,#07ddc31a,#1f5bff26,#07ddc31a);background-size:220% 220%;animation:gradShift 9s ease infinite; border-top:1px solid #18232f;border-bottom:1px solid #18232f} .banda .especial{background:none;animation:none;border:0;padding-bottom:34px} .banda #como{padding-top:16px;padding-bottom:64px} #como h2,#como .sub{text-align:center} .ver-galeria .btn{margin-left:0} @media (max-width:560px){.banda #como{padding-bottom:44px}} @media (prefers-reduced-motion:reduce){.banda{animation:none}} /* el contenedor del botón ocupa todo el ancho y se centra de verdad (antes quedaba en una caja de 620px pegada a la izquierda) */ .especial .centro{max-width:none;margin-left:auto;margin-right:auto} /* ===== Barra de navegación fija arriba (position:sticky fallaba por el overflow-x:hidden del body) ===== */ body>header{position:fixed;top:0;left:0;right:0;z-index:50} body{padding-top:61px} html{scroll-padding-top:72px} /* los enlaces con # no quedan tapados por la barra */ @media (max-width:640px){body{padding-top:57px}html{scroll-padding-top:68px}} /* tarjetas de tamaños centradas (Personas tiene solo 2) */ #tamanos{grid-template-columns:repeat(auto-fit,minmax(230px,300px));justify-content:center} .note{text-align:center} @media (max-width:560px){#tamanos{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}} #precios .note{margin-top:8px} #precios .note:first-of-type{margin-top:18px} /* ===== Tamaños y precios: tarjetas con ilustración, color por tamaño y animación ===== */ @keyframes figFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}} @keyframes colear{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(10deg)}} @keyframes saludar{0%,100%{transform:rotate(0)}30%{transform:rotate(-16deg)}60%{transform:rotate(8deg)}} @keyframes haloPulso{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}} @keyframes chispa{0%,100%{opacity:.15;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}} .tam{--ac:#07ddc3;--glow:#07ddc333;border-top:3px solid var(--ac)} .tam.t2{--ac:#18a9d8;--glow:#18a9d833} .tam.t3{--ac:#4f86ff;--glow:#4f86ff40} .tam .ph{display:block;aspect-ratio:200/215;font-size:inherit;background:linear-gradient(165deg,#062b2b,#0a4a47)} .tam.t2 .ph{background:linear-gradient(165deg,#07263a,#0b4663)} .tam.t3 .ph{background:linear-gradient(165deg,#0b1a4c,#183580)} .tam:hover{border-color:var(--ac);box-shadow:0 16px 44px var(--glow),0 0 0 1px var(--ac)} .tam:hover .ph{font-size:inherit} .tam .pr b{color:var(--ac)} .tam h3 small{color:var(--ac)} .fig{display:block;width:100%;height:100%} .fig .flota{animation:figFlota 3.6s ease-in-out infinite} .tam:hover .fig .flota{animation-duration:1.3s} .fig .ojos{transform-box:fill-box;transform-origin:center;animation:parpadeo 5s infinite} .fig .cola{transform-box:fill-box;transform-origin:0% 100%;animation:colear 1.5s ease-in-out infinite} .fig .saludo{transform-box:fill-box;transform-origin:50% 100%;animation:saludar 2.6s ease-in-out infinite} .fig .halo{transform-box:fill-box;transform-origin:center;animation:haloPulso 3.2s ease-in-out infinite} .fig .chispa{transform-box:fill-box;transform-origin:center;animation:chispa 2.6s ease-in-out infinite} .fig .cota{opacity:.8;transition:opacity .25s} .tam:hover .fig .cota{opacity:1} @media (prefers-reduced-motion:reduce){.fig *{animation:none!important}} /* ===== Flechas para pasar de una figura a otra dentro del cuadro de "Mis trabajos" ===== */ @keyframes deslizaDer{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}} @keyframes deslizaIzq{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}} .visor-grid.d-der{animation:deslizaDer .38s cubic-bezier(.2,.8,.2,1)} .visor-grid.d-izq{animation:deslizaIzq .38s cubic-bezier(.2,.8,.2,1)} dialog#visor{padding-left:64px;padding-right:64px} .nav-fig{position:absolute;top:50%;translate:0 -50%;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid #2c4258;background:#0b1620ee;color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s} .nav-fig.prev{left:10px} .nav-fig.next{right:10px} .nav-fig:hover{background:var(--acc);border-color:var(--acc);color:#05080d} .nav-fig.prev:hover{transform:translateX(-3px)} .nav-fig.next:hover{transform:translateX(3px)} .nav-fig[hidden]{display:none} @media (max-width:760px){ dialog#visor{padding:58px 14px 16px} .nav-fig{top:10px;translate:none;width:38px;height:38px} .nav-fig.prev{left:12px} .nav-fig.next{left:58px;right:auto} } @media (prefers-reduced-motion:reduce){.visor-grid.d-der,.visor-grid.d-izq{animation:none}} /* ===== Flechas de figura anterior / siguiente también en el detalle de Personalizadas ===== */ .det-grid.d-der{animation:deslizaDer .38s cubic-bezier(.2,.8,.2,1)} .det-grid.d-izq{animation:deslizaIzq .38s cubic-bezier(.2,.8,.2,1)} dialog#detalle{padding-left:64px;padding-right:64px} @media (max-width:760px){ dialog#detalle{padding:58px 14px 16px} dialog#detalle .det-cab{padding-right:0} } @media (prefers-reduced-motion:reduce){.det-grid.d-der,.det-grid.d-izq{animation:none}} /* barra del celular: sin apretarse ni cortarse */ @media (max-width:640px){ .links{gap:0;white-space:nowrap} .links .l{margin-left:10px;font-size:.84rem} .links .btn.sm{margin-left:10px} } @media (max-width:380px){.links .l{margin-left:8px;font-size:.8rem}} /* ===== Preguntas frecuentes (acordeón) ===== */ .faq-wrap{max-width:820px} .faq-cat{font-size:1.25rem;margin:34px 0 14px;color:var(--acc)} .faq-cat:first-child{margin-top:6px} .faq-grupo{display:grid;gap:10px} .faq-item{background:var(--card);border:1px solid #18232f;border-radius:14px;transition:border-color .25s,box-shadow .25s} .faq-item:hover{border-color:#2c4258} .faq-item.abierto{border-color:var(--acc);box-shadow:0 8px 28px #07ddc314} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;padding:16px 18px;background:none;border:0;color:var(--txt);font:inherit;font-weight:600;font-size:1.02rem;cursor:pointer;border-radius:14px} .faq-q:focus-visible{outline:3px solid var(--acc);outline-offset:2px} .faq-ico{flex:0 0 auto;position:relative;width:26px;height:26px;border-radius:50%;background:#07ddc31f;transition:transform .3s,background .25s} .faq-ico::before,.faq-ico::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;background:var(--acc);border-radius:2px;transition:transform .3s} .faq-ico::after{transform:rotate(90deg)} .faq-item.abierto .faq-ico{background:var(--acc)} .faq-item.abierto .faq-ico::before,.faq-item.abierto .faq-ico::after{background:#05080d} .faq-item.abierto .faq-ico::after{transform:rotate(0)} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease} .faq-item.abierto .faq-a{grid-template-rows:1fr} .faq-a>div{overflow:hidden} .faq-a p{padding:0 18px 18px;color:var(--mut);line-height:1.65} .faq-a p b{color:var(--txt)} .faq-a a{color:var(--acc)} .faq-wrap .cta-box{margin-top:44px} .faq-btn{margin-top:30px} @media (prefers-reduced-motion:reduce){.faq-a,.faq-ico,.faq-ico::before,.faq-ico::after{transition:none}} /* enlaces del menú: nunca se parten en dos líneas; en pantallas medianas se muestran solo los principales */ .links .l{white-space:nowrap} @media (max-width:700px){.links .l:not(.keep){display:none}} .faq-a .faq-nota{display:block;margin-top:12px;padding:10px 14px;border-left:3px solid var(--acc);background:#07ddc30f;border-radius:8px;font-size:.92rem} /* ===== Aviso de derechos de autor ===== */ .aviso-der{max-width:820px;margin:44px auto 0;padding:16px 20px;border:1px dashed #2c4258;border-radius:14px;background:#0b141c;color:var(--mut);font-size:.86rem;line-height:1.6} .aviso-der p+p{margin-top:10px} .aviso-der b{color:var(--txt)} .aviso-corto{max-width:640px;margin:18px auto 0;text-align:center;color:var(--mut);font-size:.8rem;line-height:1.55} .aviso-corto a{color:var(--acc)} /* ===== Página 404 ===== */ @keyframes e404Flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes e404Capa{0%,100%{opacity:.75}50%{opacity:1}} .e404{min-height:calc(100vh - 170px);display:grid;align-items:center;text-align:center;padding:40px 0 60px;background:radial-gradient(circle at 50% 0,#0b2a55 0,transparent 55%)} .e404-fig{width:min(300px,70vw);height:auto;display:block;margin:0 auto 6px;overflow:visible} .e404-boq{animation:e404Flota 3.4s ease-in-out infinite} .e404-fig .capa{animation:e404Capa 2.6s ease-in-out calc(var(--i)*.4s) infinite} .e404-num{font-size:clamp(4.5rem,18vw,8rem);font-weight:800;line-height:1;margin:0;letter-spacing:-.04em;background:linear-gradient(90deg,#07ddc3,#1f8bff,#07ddc3);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite} .e404 h1{font-size:clamp(1.5rem,5vw,2.2rem);margin:6px 0 10px} .e404-txt{color:var(--mut);max-width:480px;margin:0 auto 26px} .e404-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .e404-btns .btn{margin:0} @media (prefers-reduced-motion:reduce){.e404-boq,.e404-fig .capa,.e404-num{animation:none}} /* ===== Pedido: formulario + cuadro "qué pasa después" ===== */ .pedido-grid{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:36px;align-items:start} .pedido-grid form{max-width:none} .pedido-info{background:var(--card);border:1px solid #18232f;border-top:3px solid var(--acc);border-radius:var(--r);padding:22px 22px 18px} .pedido-info h3{font-size:1.15rem;margin-bottom:14px} .pedido-pasos{list-style:none;padding:0;margin:0;counter-reset:paso;display:grid;gap:14px} .pedido-pasos li{counter-increment:paso;position:relative;padding-left:42px;display:grid;gap:2px} .pedido-pasos li::before{content:counter(paso);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#05080d;background:linear-gradient(135deg,#07ddc3,#1f5bff)} .pedido-pasos li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:32px;bottom:-12px;width:1px;background:#223142} .pedido-pasos b{font-size:.98rem} .pedido-pasos span{color:var(--mut);font-size:.88rem;line-height:1.5} .pedido-faq{margin-top:16px;padding-top:14px;border-top:1px solid #18232f;color:var(--mut);font-size:.88rem} .pedido-faq a{color:var(--acc)} @media (max-width:860px){.pedido-grid{grid-template-columns:1fr}} /* formulario y cuadro del mismo alto: el campo de detalles se estira para llenar el espacio */ .pedido-grid{align-items:stretch} .pedido-grid form{display:flex;flex-direction:column;gap:12px} .pedido-grid form #d{flex:1 1 auto;min-height:110px} .pedido-pasos span b{color:var(--txt);font-size:inherit} /* ===== Línea divisoria animada y cuadro con movimiento ===== */ @keyframes chorro{0%{top:-80px}100%{top:100%}} @keyframes pasoLuz{0%{transform:scale(1);box-shadow:0 0 0 0 #07ddc300}5%{transform:scale(1.2);box-shadow:0 0 0 7px #07ddc33a}15%{transform:scale(1.2);box-shadow:0 0 0 7px #07ddc31f}22%,100%{transform:scale(1);box-shadow:0 0 0 0 #07ddc300}} @keyframes pasoTexto{0%{color:var(--acc)}16%{color:var(--acc)}24%,100%{color:var(--txt)}} .pedido-grid{grid-template-columns:minmax(0,540px) 3px minmax(0,1fr);column-gap:30px} .pedido-linea{position:relative;overflow:hidden;border-radius:3px;background:linear-gradient(180deg,#07ddc300,#07ddc3a6 12%,#1f5bffa6 88%,#1f5bff00)} .pedido-linea::after{content:"";position:absolute;left:-1px;right:-1px;height:80px;background:linear-gradient(180deg,transparent,#07ddc3 55%,#ffffff 80%,transparent);animation:chorro 3.4s ease-in-out infinite} .pedido-info{position:relative;overflow:hidden;border-top:0} .pedido-info::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#07ddc3,#1f8bff,#07ddc3);background-size:200% auto;animation:shimmer 4s linear infinite} .pedido-pasos li:nth-child(1){--i:0}.pedido-pasos li:nth-child(2){--i:1}.pedido-pasos li:nth-child(3){--i:2}.pedido-pasos li:nth-child(4){--i:3}.pedido-pasos li:nth-child(5){--i:4} .pedido-pasos li::before{animation:pasoLuz 8s ease-in-out calc(var(--i)*1.6s) infinite} /* una luz recorre los pasos, uno tras otro */ .pedido-pasos li>b:first-child{animation:pasoTexto 8s linear calc(var(--i)*1.6s) infinite} @media (max-width:860px){ .pedido-grid{grid-template-columns:1fr} .pedido-linea{display:none} } @media (prefers-reduced-motion:reduce){ .pedido-linea::after,.pedido-info::before,.pedido-pasos li::before,.pedido-pasos li>b:first-child{animation:none} } /* cuadro "qué pasa después": al pasar el cursor se ilumina y sobresale, como las tarjetas de "Tamaños y precios" */ .pedido-info{transition:transform .25s,box-shadow .25s,border-color .25s} .pedido-info:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 16px 44px #07ddc333,0 0 0 1px var(--acc)} @media (prefers-reduced-motion:reduce){.pedido-info:hover{transform:none}} /* formulario con el mismo estilo de tarjeta que el cuadro de la derecha: se ilumina al usarlo y sobresale al pasar el cursor */ .pedido-grid form{position:relative;overflow:hidden;background:var(--card);border:1px solid #18232f;border-top:0;border-radius:var(--r);padding:26px 22px 20px;transition:transform .25s,box-shadow .25s,border-color .25s} .pedido-grid form::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#07ddc3,#1f8bff,#07ddc3);background-size:200% auto;animation:shimmer 4s linear infinite} .pedido-grid form input,.pedido-grid form select,.pedido-grid form textarea{background:#080d13;transition:border-color .2s,box-shadow .2s} .pedido-grid form input:focus,.pedido-grid form select:focus,.pedido-grid form textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px #07ddc326} .pedido-grid form:focus-within{border-color:var(--acc);box-shadow:0 16px 44px #07ddc333,0 0 0 1px var(--acc)} @media (hover:hover){.pedido-grid form:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 16px 44px #07ddc333,0 0 0 1px var(--acc)}} @media (max-width:560px){.pedido-grid form{padding:24px 16px 18px}} @media (prefers-reduced-motion:reduce){.pedido-grid form::before{animation:none}.pedido-grid form:hover{transform:none}} /* celular: zonas táctiles más grandes en los enlaces de la barra (el aspecto no cambia) */ @media (max-width:700px){ .links .l{padding:14px 5px} .links .l::after{left:5px;bottom:9px;width:calc(100% - 10px)} .links .l,.links .btn.sm{margin-left:4px} .links .btn.sm{padding:11px 16px} } /* botón flotante de WhatsApp: se oculta suavemente junto al formulario, los cuadros de contacto y el pie */ .wa-float{transition:transform .2s,opacity .25s} .wa-float.oculto{opacity:0;transform:scale(.6);pointer-events:none} /* selectores del formulario: el texto no se corta en pantallas angostas */ @media (max-width:560px){.pedido-grid form select{font-size:.94rem;padding-left:10px;padding-right:6px}} /* ===== Sobre nosotros ===== */ .hueco{display:grid;place-items:center;align-content:center;gap:6px;text-align:center;border:2px dashed #2c4258;border-radius:var(--r);background:linear-gradient(160deg,#0b1a2a,#0a2b33);color:var(--mut)} .hueco-ico{font-size:2.4rem;line-height:1} .hueco-txt{font-size:.9rem;line-height:1.4} .hueco-txt small{display:block;font-size:.78rem;opacity:.8} .hueco-retrato{aspect-ratio:4/5} .nos-carta-caja{perspective:1000px;width:100%} .nos-carta{position:relative;aspect-ratio:4/5;border:3px solid #d9c36a;border-radius:18px;overflow:hidden;background:#0a1626;isolation:isolate;cursor:pointer; box-shadow:0 14px 34px #0009,0 0 0 1px #0006; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s} .nos-foto{position:relative;z-index:0;display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.22);transform-origin:50% 88%} /* la foto se ve más grande dentro de la tarjeta, que conserva su tamaño */ .nos-carta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:color-dodge; background:repeating-linear-gradient(115deg,#ff4d8d 0%,#ffd84d 12%,#4dff9a 24%,#4dc9ff 36%,#9a6bff 48%,#ff4d8d 60%); background-size:300% 300%;background-position:var(--hx,50%) var(--hy,50%);filter:saturate(1.1) brightness(.75) contrast(1.1)} .nos-carta::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:overlay; background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,50%),#ffffffdd 0%,#ffffff55 25%,transparent 60%)} .nos-carta.activa{transition:transform .08s linear,box-shadow .3s;box-shadow:0 22px 50px #000b,0 0 34px #07ddc366} .nos-carta.activa::before{opacity:.45} .nos-carta.activa::after{opacity:.9} .hueco-paso{aspect-ratio:4/3;margin-bottom:12px} .hueco-mini{width:150px;aspect-ratio:1;flex:0 0 auto} .nos-sec{padding:50px 0} .nos-alt{background:linear-gradient(120deg,#07ddc310,#1f5bff18,#07ddc310);border-top:1px solid #18232f;border-bottom:1px solid #18232f} .nos-intro{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:44px;align-items:center} .nos-texto h2{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.15;margin:6px 0 6px} .nos-texto h2 em{font-style:normal;background:linear-gradient(90deg,#07ddc3,#1f8bff,#07ddc3);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite} .nos-texto p{color:var(--mut);margin-top:14px;line-height:1.7} .nos-texto p b{color:var(--txt)} .centro-h{text-align:center} .nos-sec .sub.centro-h{margin-bottom:0} .nos-pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px} .nos-paso,.nos-valor{background:var(--card);border:1px solid #18232f;border-radius:var(--r);transition:transform .25s,border-color .25s,box-shadow .25s} .nos-paso{padding:14px} .nos-paso h3{font-size:1.02rem;margin-bottom:4px} .nos-paso p,.nos-valor p{color:var(--mut);font-size:.9rem;line-height:1.55} .nos-valores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px} .nos-valor{text-align:center;padding:24px 18px} .nos-valor i{display:inline-block;font-style:normal;font-size:2rem;margin-bottom:6px;transition:transform .35s} .nos-valor h3{font-size:1.05rem;margin-bottom:6px} .nos-paso:hover,.nos-valor:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 16px 40px #07ddc320} .nos-valor:hover i{transform:scale(1.25) rotate(-8deg)} .nos-sec .cta-box{margin-top:48px} .franja-nos{padding:30px 0 10px} .franja-card{display:flex;gap:26px;align-items:center;background:var(--card);border:1px solid #18232f;border-radius:var(--r);padding:22px;transition:transform .25s,border-color .25s,box-shadow .25s} .franja-card:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 16px 40px #07ddc320} .franja-foto{flex:0 0 auto;width:170px;height:170px;object-fit:cover;border-radius:14px;border:1px solid #223142;box-shadow:0 10px 26px #0008} .franja-txt h2{font-size:clamp(1.25rem,3.2vw,1.6rem);margin:4px 0 8px;line-height:1.25} .franja-txt p{color:var(--mut);margin-bottom:14px} .franja-txt .btn{margin-left:0} @media (max-width:900px){.nos-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:760px){ .nos-intro{grid-template-columns:1fr;gap:24px} .nos-intro .hueco-retrato,.nos-intro .nos-carta-caja{max-width:300px;margin:0 auto;width:100%} .nos-valores{grid-template-columns:1fr} .nos-sec{padding:38px 0} .franja-card{flex-direction:column;text-align:center;padding:20px 16px} .hueco-mini{width:110px} .franja-foto{width:150px;height:150px} } @media (max-width:560px){.nos-pasos{gap:12px}.nos-paso{padding:10px}.nos-paso h3{font-size:.95rem}.nos-paso p{font-size:.82rem}.hueco-paso .hueco-ico{font-size:1.8rem}} @media (max-width:340px){.nos-pasos{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.nos-texto h2 em{animation:none}} /* ===== Carrusel giratorio (Sobre nosotros): la foto central grande y las laterales más pequeñas ===== */ .car-titulo{text-align:center;font-size:1.25rem;margin:46px 0 0;color:var(--acc)} .car-titulo[hidden],.carrusel[hidden]{display:none} .carrusel{position:relative;max-width:720px;margin:4px auto 0} .car-escena{position:relative;height:290px;perspective:1100px;overflow:hidden;outline:0;touch-action:pan-y;-webkit-user-select:none;user-select:none} .car-escena:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:14px} .car-item{position:absolute;left:50%;top:50%;width:172px;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#fff;border:2px solid #d9c36a;box-shadow:0 12px 30px #000a;display:block;cursor:pointer; transition:transform .8s cubic-bezier(.3,.75,.2,1),opacity .6s,filter .6s} .car-item.centro{box-shadow:0 18px 44px #000b,0 0 34px #07ddc340;border-color:#f0dc8a} .car-item img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;pointer-events:none;-webkit-user-drag:none} .car-info{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;display:grid;gap:1px;color:#fff;background:linear-gradient(180deg,transparent,#000000cc 70%);transition:opacity .4s} .car-info b{font-size:.98rem;text-shadow:0 1px 6px #000a} .car-info small{color:var(--acc);font-weight:600;font-size:.78rem} .car-item:not(.centro) .car-info{opacity:0} .car-btn{position:absolute;top:calc(50% - 14px);translate:0 -50%;z-index:30;width:42px;height:42px;border-radius:50%;border:1px solid #2c4258;background:#0b1620ee;color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s} .car-btn.prev{left:0}.car-btn.next{right:0} .car-btn:hover{background:var(--acc);color:#05080d;border-color:var(--acc)} .car-btn.prev:hover{transform:translateX(-3px)}.car-btn.next:hover{transform:translateX(3px)} .car-puntos{display:flex;justify-content:center;gap:9px;margin-top:4px;flex-wrap:wrap} .car-puntos i{width:9px;height:9px;border-radius:50%;background:#2c4258;cursor:pointer;transition:background .25s,transform .25s} .car-puntos i.on{background:var(--acc);transform:scale(1.4)} @media (max-width:560px){ .car-escena{height:236px} .car-item{width:134px} .car-btn{width:38px;height:38px} } @media (prefers-reduced-motion:reduce){.car-item,.car-info{transition:none}} /* foto central: efecto de tarjeta 3D al pasar el cursor (responde rápido mientras se inclina) */ .car-item.inclina{transition:transform .12s linear,opacity .6s,filter .6s;box-shadow:0 22px 50px #000c,0 0 38px #07ddc355;border-color:#fff3b0} /* ===== Tarjetas "¿Qué figura quieres?": 3 tarjetas con ilustraciones ===== */ .tipos{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px} a.tipo i.ilus{display:block;font-size:0;line-height:0;margin-bottom:4px} a.tipo i.ilus .fig{width:auto;height:118px;max-width:100%} a.tipo:hover i.ilus{transform:scale(1.05)} a.tipo:hover .fig .flota{animation-duration:1.3s} @media (max-width:760px){.tipos{grid-template-columns:1fr;max-width:460px}} /* ===== Aviso de fechas especiales ===== */ .aviso-fechas{position:relative;text-align:center;padding:10px 46px 10px 16px;font-size:.92rem;line-height:1.45;background:linear-gradient(90deg,#07ddc324,#1f5bff33,#07ddc324);border-bottom:1px solid #18232f} .aviso-fechas a{color:var(--acc);font-weight:700;white-space:nowrap;margin-left:6px;text-decoration:none} .aviso-fechas a:hover{text-decoration:underline} .aviso-fechas b{color:#fff} .aviso-fechas button{position:absolute;right:8px;top:50%;translate:0 -50%;width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--mut);font-size:.95rem;cursor:pointer} .aviso-fechas button:hover{background:#ffffff1a;color:#fff} /* ===== "¿Qué figura quieres?": fondo propio para distinguirla de las secciones vecinas ===== */ #elige{position:relative;padding:64px 0 60px;border-top:1px solid #1b2a3a;border-bottom:1px solid #1b2a3a; background: radial-gradient(ellipse 70% 90% at 50% 0%,#12315f66 0,transparent 70%), radial-gradient(circle,#ffffff14 1px,transparent 1.4px) 0 0/24px 24px, linear-gradient(180deg,#08121f,#060c15)} #elige::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#07ddc3,#1f5bff,transparent);opacity:.7} #elige .tipo{background:#0c1624;border-color:#1f3047} #elige .tipo:hover{border-color:var(--acc)} @media (max-width:560px){#elige{padding:46px 0 44px}} /* ===== "También hacemos": tarjetas por categoría con ilustraciones animadas ===== */ @keyframes segOnda{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes capaOnda{0%,100%{transform:skewX(0) scaleX(1)}50%{transform:skewX(-7deg) scaleX(1.07)}} @keyframes balanceo{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}} #otros-cards{grid-template-columns:repeat(auto-fit,minmax(230px,300px));justify-content:center} .cat-card{display:flex;flex-direction:column;text-decoration:none;color:inherit} .cat-card .ph{aspect-ratio:200/150} .cat-card .pr{justify-content:flex-start} .cat-card .ver-gal{color:var(--ac);font-weight:700;font-size:.92rem;transition:transform .25s;display:inline-block} .cat-card:hover .ver-gal{transform:translateX(6px)} .fig .seg{animation:segOnda 2.4s ease-in-out calc(var(--i)*-.22s) infinite} .fig .capa-h{transform-box:fill-box;transform-origin:50% 0;animation:capaOnda 2.6s ease-in-out infinite} .fig .llavero{transform-box:view-box;transform-origin:100px 12px;animation:balanceo 3.2s ease-in-out infinite} .cat-card:hover .fig .seg{animation-duration:1.2s} .cat-card:hover .fig .llavero{animation-duration:1.6s} .otros-btn{margin-top:30px} @media (max-width:560px){#otros-cards{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}} .vacio-cat{grid-column:1/-1;max-width:560px;margin:10px auto;padding:30px 10px} /* carrusel de "También hacemos": separación respecto a las tarjetas y al botón */ #otros .car-titulo{margin-top:44px} #otros .carrusel{margin-bottom:6px} /* ===== Desplegable de consejos de la foto ===== */ .tips-det{margin-top:18px} .tips-det summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;margin:0 auto;padding:10px 20px;border-radius:999px;border:1px solid #2c4258;background:var(--card);font-weight:600;font-size:.95rem;transition:border-color .2s,background .2s} .tips-det summary::-webkit-details-marker{display:none} .tips-det summary::after{content:"+";color:var(--acc);font-weight:800;font-size:1.2rem;line-height:1;transition:transform .25s} .tips-det[open] summary::after{content:"−"} .tips-det summary:hover{border-color:var(--acc)} .tips-det .tips{margin-top:14px} /* cuadro del pedido: los puntos se reparten el alto disponible */ .pedido-info{display:flex;flex-direction:column} .pedido-pasos{flex:1;align-content:space-evenly} .pedido-faq{margin-top:auto} /* ===== Menú de hamburguesa ===== */ .menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid #2c4258;background:var(--card);cursor:pointer;margin-left:8px;position:relative;flex:0 0 auto} .menu-btn span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .2s,top .25s} .menu-btn span:nth-child(1){top:14px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:28px} .menu-btn.abierto span:nth-child(1){top:21px;transform:rotate(45deg)} .menu-btn.abierto span:nth-child(2){opacity:0} .menu-btn.abierto span:nth-child(3){top:21px;transform:rotate(-45deg)} .menu-btn:focus-visible{outline:3px solid var(--acc);outline-offset:2px} .menu-panel{position:absolute;left:0;right:0;top:100%;display:grid;padding:8px 16px 14px;background:#060b13f5;backdrop-filter:blur(10px);border-bottom:1px solid #223142;box-shadow:0 18px 40px #000a;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s} .menu-panel[hidden]{display:none} .menu-panel.abierto{opacity:1;transform:none} .menu-panel a{display:flex;align-items:center;min-height:50px;padding:0 10px;color:var(--txt);text-decoration:none;font-weight:600;font-size:1.02rem;border-bottom:1px solid #15202d} .menu-panel a:last-child{border-bottom:0} .menu-panel a.on{color:var(--acc)} .menu-panel a:hover{color:var(--acc)} @media (max-width:700px){ .menu-btn{display:block} .links .l{display:none} } @media (min-width:701px){.menu-panel{display:none}} @media (prefers-reduced-motion:reduce){.menu-panel,.menu-btn span{transition:none}} /* el panel es un