/* ============================================================ Dyserco · landings de SERVICIOS (/servicios/*) Se carga DESPUÉS de /assets/css/site.css: hereda marca, nav, botones, pie, formulario y aviso de cookies. Aquí solo va lo propio de las landings. Cada landing lleva un acento propio en :root del : .sv-pulido → latón sobre mármol (frío, espejo) .sv-pintura → noche (abyss dominante, azul profundo) .sv-carpinteria → madera (nogal cálido, editorial) Espaciado: 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96. ============================================================ */ :root{ --sv-accent:var(--brass); --sv-accent-2:var(--brass-2); --sv-ink-on-accent:#fff; --sv-ease:cubic-bezier(.32,.72,0,1); } .sv-pintura{--sv-accent:#3E7A9C;--sv-accent-2:#8CC5E3;--sv-ink-on-accent:#fff} .sv-carpinteria{--sv-accent:#8A5A2B;--sv-accent-2:#C9955A;--sv-ink-on-accent:#fff} /* Accesibilidad: enlace para saltar al contenido */ .skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--abyss);color:#fff;padding:12px 16px;border-radius:2px;font-size:.9rem} .skip:focus{top:8px} /* El menú de las landings no lleva selector de idioma: son páginas en castellano */ .nav-links a.active{color:var(--brass-2)} .nav-links a{color:#EFE9DC;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:.9;transition:opacity .25s,color .25s} .nav-links a:hover{opacity:1;color:var(--brass-2)} .nav-links .btn-cat,.nav-links .btn-mail{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(215,177,115,.45);color:#EFE9DC;transition:background .25s,color .25s,transform .25s var(--sv-ease)} .nav-links .btn-cat:hover,.nav-links .btn-mail:hover{background:var(--brass);color:#fff;transform:translateY(-2px)} .nav-links .btn-cat svg,.nav-links .btn-mail svg{width:18px;height:18px} @media (max-width:759px){ .nav-links{display:none;position:fixed;inset:0 0 auto 0;top:64px;flex-direction:column;align-items:flex-start;gap:0;background:rgba(11,34,48,.98);padding:8px 0 24px; box-shadow:0 26px 50px rgba(0,0,0,.4);border-top:1px solid rgba(215,177,115,.16)} .nav-links.open{display:flex;animation:menuIn .32s var(--sv-ease)} .nav-links.open>a:not(.btn){padding:17px var(--gut);width:100%;border-bottom:1px solid rgba(255,255,255,.05)} .nav-links.open .btn-cat,.nav-links.open .btn-mail{margin:14px var(--gut) 0;width:auto;height:auto;padding:10px 16px;border-radius:100px;gap:8px} .nav-links.open .btn-cat::after{content:"Catálogo";font-size:.78rem;letter-spacing:.12em;text-transform:uppercase} .nav-links.open .btn-mail::after{content:"Email";font-size:.78rem;letter-spacing:.12em;text-transform:uppercase} .burger{display:flex} } /* Hamburguesa → X (nunca desaparece sin más) */ .burger span{transition:transform .35s var(--sv-ease),opacity .25s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ============================ HERO ============================ */ .sv-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding-top:104px} .sv-hero .hero-bg img{animation:heroIn 2.4s var(--sv-ease) forwards .1s;will-change:transform} .sv-hero .hero-bg::after{background:linear-gradient(180deg,rgba(8,28,40,.42) 0%,rgba(8,28,40,.12) 34%,rgba(7,24,34,.72) 72%,rgba(7,22,32,.96) 100%)} /* La palabra grande: Fraunces cursiva, la voz de la marca */ .sv-word{ position:relative;z-index:2;display:block;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(3.4rem,9.5vw,8.8rem);line-height:.9;letter-spacing:-.02em;color:#fff; font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144; opacity:0;animation:fadeUp 1.1s var(--sv-ease) .35s forwards;text-shadow:0 12px 50px rgba(7,22,32,.55) } .sv-word .em{color:var(--sv-accent-2);font-style:italic} .sv-hero .hero-inner{position:relative!important;inset:auto!important;height:auto!important;display:block!important;padding-top:12px;padding-bottom:clamp(24px,4vh,40px)} .sv-hero h1{font-size:clamp(1.5rem,2.7vw,2.3rem);max-width:30ch;font-style:normal;line-height:1.15;margin-top:8px} .sv-hero .lead{max-width:60ch;margin:16px 0 24px} .sv-hero .hero-eyebrow{margin-bottom:12px} .sv-hero .hero-bottom{ position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 32px; display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;align-items:end;border-top:1px solid rgba(215,177,115,.22);padding-top:16px; opacity:0;animation:fadeUp 1s var(--sv-ease) 1.15s forwards } .sv-hero .hero-bottom{grid-template-columns:auto 1fr;align-items:center} .sv-hero .hero-bottom .sv-chips{grid-column:1;grid-row:1/3;justify-content:flex-start;max-width:640px} .sv-hero .hero-bottom p{grid-column:2;margin:0;font-size:.8rem;line-height:1.5;color:rgba(239,233,220,.72);max-width:38ch;text-align:right;justify-self:end} /* Píldora de cristal: chips de prueba en el hero (tomada del prompt de Juanman, en CSS puro) */ .glass{ position:relative;overflow:hidden;background:rgba(255,255,255,.04); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:inset 0 1px 1px rgba(255,255,255,.12);border-radius:100px } .glass::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.14) 22%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 60%,rgba(255,255,255,.14) 80%,rgba(255,255,255,.45) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude } .sv-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .sv-chips .glass{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;font-size:.78rem;font-weight:500;color:#F3EDE1;letter-spacing:.02em;white-space:nowrap} .sv-chips svg{width:16px;height:16px;flex:0 0 auto;color:var(--sv-accent-2)} @media (max-width:760px){ .sv-hero{min-height:92svh} .sv-hero{padding-top:88px} .sv-hero .hero-bottom{grid-template-columns:1fr;gap:16px;padding-bottom:24px;border-top:0;padding-top:0} .sv-hero .hero-bottom p{display:none} .sv-chips{justify-content:flex-start} .sv-chips .glass{font-size:.72rem;padding:7px 11px 7px 8px} } /* ============================ SECCIONES ============================ */ .sv-section{padding:clamp(64px,10vh,112px) 0} .sv-dark{background:var(--abyss);color:#EFE9DC} .sv-dark .sec-head .lead{color:#C9C2B2} .sv-dark .label{color:var(--sv-accent-2)} .sv-dark .label::before{background:var(--sv-accent-2)} .sv-soft{background:var(--ivory-2)} .sv-section .sec-head h2{font-size:clamp(2rem,4.2vw,3.2rem)} .sv-section .sec-head h2 .em{font-style:italic;color:var(--sv-accent)} .sv-dark .sec-head h2 .em{color:var(--sv-accent-2)} .sv-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center} .sv-grid-2 .img{border-radius:2px;overflow:hidden;box-shadow:0 30px 80px rgba(11,34,48,.22)} .sv-grid-2 .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--sv-ease)} .sv-grid-2 .img:hover img{transform:scale(1.04)} .sv-grid-2 .big{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.3;margin:0 0 16px} .sv-grid-2 p{color:var(--ink-soft);margin:0 0 16px} .sv-dark .sv-grid-2 p{color:#C9C2B2} @media (max-width:860px){.sv-grid-2{grid-template-columns:1fr}} /* Problema → solución: dos columnas con regla vertical */ .sv-versus{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--mist);border-radius:2px;overflow:hidden;background:#fff} .sv-versus > div{padding:clamp(24px,4vw,48px)} .sv-versus > div + div{border-left:1px solid var(--mist)} .sv-versus h3{font-size:1.35rem;margin:12px 0 16px} .sv-versus ul{margin:0;padding:0;list-style:none;display:grid;gap:12px} .sv-versus li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:.98rem} .sv-versus li svg{flex:0 0 auto;width:20px;height:20px;margin-top:2px} .sv-versus .no li svg{color:#9a4b3c} .sv-versus .si li svg{color:var(--sv-accent)} .sv-versus .si{background:var(--ivory)} @media (max-width:760px){.sv-versus{grid-template-columns:1fr}.sv-versus > div + div{border-left:0;border-top:1px solid var(--mist)}} /* Beneficios: 4 tarjetas con icono SVG animado */ .sv-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)} .sv-card{background:#fff;border:1px solid var(--mist);border-radius:2px;padding:32px 24px;display:flex;flex-direction:column;gap:16px;transition:transform .5s var(--sv-ease),box-shadow .5s var(--sv-ease)} .sv-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(11,34,48,.12)} .sv-dark .sv-card{background:rgba(255,255,255,.04);border-color:rgba(215,177,115,.18);color:#EFE9DC} .sv-card .ico{width:44px;height:44px;color:var(--sv-accent);display:grid;place-items:center;border:1px solid currentColor;border-radius:50%} .sv-dark .sv-card .ico{color:var(--sv-accent-2)} .sv-card .ico svg{width:24px;height:24px} .sv-card h3{font-size:1.3rem;font-family:var(--serif)} .sv-card p{margin:0;color:var(--ink-soft);font-size:.96rem} .sv-dark .sv-card p{color:#C9C2B2} .sv-card .num{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--sv-accent)} .sv-dark .sv-card .num{color:var(--sv-accent-2)} @media (max-width:1000px){.sv-benefits{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.sv-benefits{grid-template-columns:1fr}} /* Animación de iconos (líneas que se dibujan al entrar) */ .sv-card .ico path,.sv-card .ico circle,.sv-card .ico rect,.sv-card .ico line{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.4s var(--sv-ease)} .reveal.in .sv-card .ico path,.reveal.in .sv-card .ico circle,.reveal.in .sv-card .ico rect,.reveal.in .sv-card .ico line{stroke-dashoffset:0} /* Tagline reveal: palabra a palabra con el scroll */ .sv-tagline{padding:clamp(80px,14vh,140px) 0;text-align:center} .sv-tagline p{margin:0 auto;max-width:22ch;font-family:var(--serif);font-size:clamp(2rem,5vw,3.75rem);line-height:1.15;text-wrap:balance} .sv-tagline .w{display:inline-block;color:currentColor;opacity:.28;transform:translateY(6px);transition:opacity .7s var(--sv-ease),transform .7s var(--sv-ease)} .sv-tagline .w.on{opacity:1;transform:none} .sv-tagline .w.em{font-style:italic;color:var(--sv-accent)} .sv-dark .sv-tagline .w.em{color:var(--sv-accent-2)} .sv-tagline .who{display:block;margin-top:24px;font-family:var(--sans);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sv-accent)} .sv-dark .sv-tagline .who{color:var(--sv-accent-2)} /* Cómo trabajamos: pasos numerados */ .sv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);counter-reset:paso} .sv-step{position:relative;padding:32px 24px 24px;border-top:1px solid var(--mist);counter-increment:paso} .sv-step::before{content:counter(paso,decimal-leading-zero);font-family:var(--serif);font-size:3rem;line-height:1;color:var(--sv-accent);display:block;margin-bottom:16px} .sv-dark .sv-step{border-top-color:rgba(215,177,115,.22)} .sv-dark .sv-step::before{color:var(--sv-accent-2)} .sv-step h3{font-size:1.25rem;margin-bottom:12px} .sv-step p{margin:0;color:var(--ink-soft);font-size:.96rem} .sv-dark .sv-step p{color:#C9C2B2} .sv-step .why{display:block;margin-top:12px;font-size:.84rem;color:var(--sv-accent);font-weight:600} .sv-dark .sv-step .why{color:var(--sv-accent-2)} @media (max-width:1000px){.sv-steps{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.sv-steps{grid-template-columns:1fr}} /* Línea de tiempo de una noche (pintura) */ .sv-night{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .sv-night::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:linear-gradient(90deg,transparent,var(--sv-accent-2) 10%,var(--sv-accent-2) 90%,transparent)} .sv-night li{list-style:none;position:relative;padding-top:40px} .sv-night li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;border-radius:50%;background:var(--abyss);border:2px solid var(--sv-accent-2);box-shadow:0 0 0 0 rgba(140,197,227,.5);transition:box-shadow .8s var(--sv-ease)} .reveal.in .sv-night li::before{animation:nightPing 2.6s ease-out infinite} .reveal.in .sv-night li:nth-child(2)::before{animation-delay:.4s}.reveal.in .sv-night li:nth-child(3)::before{animation-delay:.8s} .reveal.in .sv-night li:nth-child(4)::before{animation-delay:1.2s}.reveal.in .sv-night li:nth-child(5)::before{animation-delay:1.6s} @keyframes nightPing{0%{box-shadow:0 0 0 0 rgba(140,197,227,.55)}70%{box-shadow:0 0 0 12px rgba(140,197,227,0)}100%{box-shadow:0 0 0 0 rgba(140,197,227,0)}} .sv-night time{display:block;font-family:var(--serif);font-size:2rem;line-height:1;color:var(--sv-accent-2);margin-bottom:12px} .sv-night h3{font-size:1.1rem;margin-bottom:8px} .sv-night p{margin:0;font-size:.92rem;color:#C9C2B2} @media (max-width:1000px){.sv-night{grid-template-columns:repeat(2,1fr)}.sv-night::before{display:none}} @media (max-width:560px){.sv-night{grid-template-columns:1fr}} /* Galería editorial (masonry por columnas) */ .sv-gallery{columns:3;column-gap:16px} .sv-gallery figure{margin:0 0 16px;break-inside:avoid;position:relative;overflow:hidden;border-radius:2px;background:var(--abyss-2)} .sv-gallery img{width:100%;height:auto;display:block;transition:transform 1.6s var(--sv-ease),opacity .6s} .sv-gallery figure:hover img{transform:scale(1.05)} .sv-gallery figcaption{position:absolute;inset:auto 0 0 0;padding:40px 16px 14px;font-size:.8rem;letter-spacing:.06em;color:#F3EDE1; background:linear-gradient(180deg,transparent,rgba(7,22,32,.82));opacity:0;transform:translateY(8px);transition:opacity .5s var(--sv-ease),transform .5s var(--sv-ease)} .sv-gallery figure:hover figcaption,.sv-gallery figure:focus-within figcaption{opacity:1;transform:none} @media (max-width:900px){.sv-gallery{columns:2}} @media (max-width:560px){.sv-gallery{columns:1}.sv-gallery figcaption{opacity:1;transform:none}} /* Láminas numeradas (carpintería): 4 casos editoriales */ .sv-plates{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)} .sv-plate{display:grid;grid-template-rows:auto 1fr;gap:16px} .sv-plate .img{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:16/10;background:var(--abyss-2)} .sv-plate .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--sv-ease)} .sv-plate:hover .img img{transform:scale(1.05)} .sv-plate .n{position:absolute;top:12px;left:12px;font-family:var(--serif);font-size:.95rem;letter-spacing:.1em;color:#F3EDE1;background:rgba(7,22,32,.55);backdrop-filter:blur(6px);padding:6px 10px;border-radius:2px} .sv-plate h3{font-size:1.35rem} .sv-plate p{margin:8px 0 0;color:var(--ink-soft);font-size:.96rem} .sv-plate .tech{display:block;margin-top:8px;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sv-accent);font-weight:600} @media (max-width:760px){.sv-plates{grid-template-columns:1fr}} /* Así trabajamos: la marca en obra (uniforme, señal, un solo nombre) */ .sv-brand{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center} .sv-brand .img{border-radius:2px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)} .sv-brand .img{aspect-ratio:4/5;max-height:640px} .sv-brand .img img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 18%} .sv-brand{align-items:start} .sv-brand ul{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:16px} .sv-brand li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start} .sv-brand li .ico{width:44px;height:44px;border:1px solid var(--sv-accent-2);border-radius:50%;display:grid;place-items:center;color:var(--sv-accent-2)} .sv-brand li .ico svg{width:22px;height:22px} .sv-brand li strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.15rem;margin-bottom:4px} .sv-brand li span{color:#C9C2B2;font-size:.94rem} .sv-brand .senal{margin-top:24px;display:flex;gap:16px;align-items:center;padding:16px;border:1px solid rgba(215,177,115,.22);border-radius:2px;background:rgba(255,255,255,.03)} .sv-brand .senal img{width:120px;flex:0 0 auto;border-radius:2px} .sv-brand .senal p{margin:0;font-size:.9rem;color:#C9C2B2} @media (max-width:860px){.sv-brand{grid-template-columns:1fr}} /* Dónde se aplica: chips de zonas */ .sv-zones{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none} .sv-zones li{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--mist);border-radius:100px;background:#fff;font-size:.92rem;color:var(--ink)} .sv-zones li svg{width:18px;height:18px;color:var(--sv-accent)} /* FAQ */ .sv-faq{max-width:820px} .sv-faq details{border-top:1px solid var(--mist);padding:8px 0} .sv-faq details:last-child{border-bottom:1px solid var(--mist)} .sv-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-family:var(--serif);font-size:1.25rem;line-height:1.3} .sv-faq summary::-webkit-details-marker{display:none} .sv-faq summary svg{flex:0 0 auto;width:22px;height:22px;color:var(--sv-accent);transition:transform .45s var(--sv-ease)} .sv-faq details[open] summary svg{transform:rotate(45deg)} .sv-faq summary:hover{color:var(--sv-accent)} .sv-faq .a{padding:0 0 20px;color:var(--ink-soft);max-width:66ch} .sv-faq .a p{margin:0 0 12px} .sv-faq .a p:last-child{margin:0} /* Garantía y formulario final */ .sv-final{background:var(--abyss);color:#EFE9DC} .sv-final .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start} .sv-final h2{font-size:clamp(2rem,4.2vw,3.2rem)} .sv-final .lead{color:#C9C2B2;margin:16px 0 24px} .sv-final .risk{margin:0;padding:0;list-style:none;display:grid;gap:12px} .sv-final .risk li{display:flex;gap:12px;align-items:flex-start;color:#EFE9DC;font-size:.98rem} .sv-final .risk svg{flex:0 0 auto;width:22px;height:22px;color:var(--sv-accent-2);margin-top:1px} .sv-final form{background:#fff;color:var(--ink);padding:clamp(24px,4vw,40px);border-radius:2px} .sv-final .field{margin-bottom:16px} .sv-final .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .sv-final .field input,.sv-final .field textarea{width:100%;padding:12px 14px;border:1px solid var(--mist);border-radius:2px;background:#fff;font:inherit;font-size:1rem;color:var(--ink)} .sv-final .field input:focus,.sv-final .field textarea:focus{outline:none;border-color:var(--sv-accent);box-shadow:0 0 0 3px rgba(185,137,62,.18)} .sv-final .field.bad input,.sv-final .field.bad textarea{border-color:#9a4b3c} .sv-final .field .err{display:none;margin-top:6px;font-size:.82rem;color:#7a2b20} .sv-final .field.bad .err{display:block} .sv-final .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .sv-final .btn{width:100%} .sv-final .btn.sending{opacity:.7;pointer-events:none} .sv-final .btn:active{transform:translateY(1px) scale(.99)} .sv-final .alt{margin:16px 0 0;font-size:.9rem;color:var(--ink-soft);text-align:center} .sv-final .alt a{color:var(--sv-accent);font-weight:600;text-decoration:underline;text-underline-offset:3px} .sv-final .priv{margin:12px 0 0;font-size:.78rem;color:var(--ink-soft);text-align:center} .sv-final .priv a{text-decoration:underline} @media (max-width:860px){.sv-final .grid{grid-template-columns:1fr}.sv-final .row{grid-template-columns:1fr}} /* Otros servicios (enlaces cruzados) */ .sv-others{display:grid;grid-template-columns:1fr 1fr;gap:16px} .sv-others a{position:relative;display:block;min-height:220px;border-radius:2px;overflow:hidden;color:#fff;background:var(--abyss-2)} .sv-others a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7;transition:transform 1.4s var(--sv-ease),opacity .5s} .sv-others a:hover img{transform:scale(1.05);opacity:.85} .sv-others a div{position:absolute;inset:auto 0 0 0;padding:24px;background:linear-gradient(180deg,transparent,rgba(7,22,32,.9))} .sv-others a .label{color:var(--brass-2)} .sv-others a h3{font-size:1.5rem;margin-top:8px} .sv-others a span.go{display:inline-block;margin-top:8px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--brass-2)} @media (max-width:640px){.sv-others{grid-template-columns:1fr}} /* Barra CTA fija en móvil */ .sv-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:none;gap:8px;padding:8px; background:rgba(11,34,48,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:100px;border:1px solid rgba(215,177,115,.35); transform:translateY(120%);transition:transform .6s var(--sv-ease)} .sv-sticky.show{transform:none} .sv-sticky a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:100px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600} .sv-sticky a svg{width:18px;height:18px} .sv-sticky .p{background:var(--brass);color:#fff} .sv-sticky .w{background:#25D366;color:#fff} @media (max-width:760px){.sv-sticky{display:flex}body{padding-bottom:72px}.dy-cookie{bottom:80px}} /* HUB /servicios/ */ .sv-hub{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)} .sv-hub a{position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--mist);border-radius:2px;overflow:hidden;background:#fff;transition:transform .5s var(--sv-ease),box-shadow .5s var(--sv-ease)} .sv-hub a:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(11,34,48,.16)} .sv-hub .img{aspect-ratio:4/3;overflow:hidden;background:var(--abyss-2)} .sv-hub .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--sv-ease)} .sv-hub a:hover .img img{transform:scale(1.06)} .sv-hub .txt{padding:24px} .sv-hub h2{font-size:1.6rem;margin:8px 0 8px} .sv-hub p{margin:0;color:var(--ink-soft);font-size:.96rem} .sv-hub .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--brass)} .sv-hub .go svg{width:16px;height:16px;transition:transform .4s var(--sv-ease)} .sv-hub a:hover .go svg{transform:translateX(4px)} @media (max-width:900px){.sv-hub{grid-template-columns:1fr}} /* Cifras */ .sv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px} .sv-stats div{border-top:1px solid rgba(215,177,115,.3);padding-top:16px} .sv-stats b{display:block;font-family:var(--serif);font-weight:400;font-size:2.6rem;line-height:1;color:var(--brass-2)} .sv-stats span{font-size:.86rem;color:#C9C2B2} @media (max-width:560px){.sv-stats{grid-template-columns:1fr}} /* Aviso de idioma para visitantes que llegan desde otras versiones */ .sv-langnote{font-size:.8rem;color:var(--ink-soft);margin:0 0 8px} /* 404 / estados: los enlaces a # no existen; la página actual va marcada en el menú */ @media (prefers-reduced-motion:reduce){ .sv-word,.sv-hero .hero-bottom,.hero-eyebrow,.hero h1,.hero .lead,.hero-cta{animation:none;opacity:1} .reveal{opacity:1;transform:none;transition:none} .sv-tagline .w{opacity:1;transform:none} .sv-hero .hero-bg img{animation:none;opacity:1;transform:none} } /* ============================================================ FIRMAS PROPIAS DE CADA LANDING (motion: arquetipo Premium, 350-600 ms, curva (0.4,0,0.2,1), entradas ease-out, sin overshoot) ============================================================ */ :root{--sv-prem:cubic-bezier(.4,0,.2,1)} /* ---------- PULIDO · el reflejo: un brillo que sigue al cursor ---------- */ .sv-pulido .sv-gallery figure::after,.sv-pulido .sv-grid-2 .img::after,.sv-pulido .sv-hero .hero-bg::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s var(--sv-prem); background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),rgba(255,255,255,.08) 35%,transparent 62%); mix-blend-mode:screen} .sv-pulido .sv-gallery figure:hover::after,.sv-pulido .sv-grid-2 .img:hover::after{opacity:1} .sv-pulido .sv-hero .hero-bg::before{z-index:1;background:radial-gradient(640px circle at var(--mx,50%) var(--my,60%),rgba(215,177,115,.22),rgba(255,255,255,.06) 40%,transparent 70%)} .sv-pulido .sv-hero.lit .hero-bg::before{opacity:1} .sv-pulido .sv-grid-2 .img{position:relative} /* Escala de Mohs: diamante 10 frente a mármol 3 */ .sv-mohs{margin-top:32px;display:grid;gap:12px} .sv-mohs .row{display:grid;grid-template-columns:120px 1fr 44px;gap:12px;align-items:center;font-size:.9rem} .sv-mohs .bar{height:10px;background:var(--ivory-2);border-radius:100px;overflow:hidden} .sv-mohs .bar i{display:block;height:100%;width:0;border-radius:100px;background:var(--sv-accent);transition:width 1.2s var(--sv-prem)} .sv-mohs .row.marble .bar i{background:#B7ADA0} .reveal.in .sv-mohs .bar i{width:var(--w)} .sv-mohs b{font-family:var(--serif);font-weight:400;font-size:1.4rem;text-align:right} .sv-mohs .foot{font-size:.82rem;color:var(--ink-soft);margin:0} /* veta de mármol muy sutil en la sección clara */ .sv-pulido .sv-soft{background-color:var(--ivory-2);background-image:linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.55) 50%,transparent 54% 100%);background-size:900px 100%;background-repeat:no-repeat} /* ---------- PINTURA · la noche: página oscura, luna que avanza con el scroll ---------- */ .sv-pintura{background:#08202D;color:#EFE9DC} .sv-pintura .sv-section:not(.sv-dark):not(.sv-final){background:#0B2230;color:#EFE9DC} .sv-pintura .sv-soft{background:#0E2C3D} .sv-pintura .sv-section .sec-head .lead,.sv-pintura .sv-grid-2 p,.sv-pintura .sv-step p,.sv-pintura .sv-card p,.sv-pintura .sv-plate p,.sv-pintura .sv-faq .a{color:#C9C2B2} .sv-pintura .sv-section .sec-head h2 .em{color:var(--sv-accent-2)} .sv-pintura .sv-card{background:rgba(255,255,255,.04);border-color:rgba(140,197,227,.18);color:#EFE9DC} .sv-pintura .sv-card .ico,.sv-pintura .sv-card .num,.sv-pintura .sv-step::before,.sv-pintura .sv-step .why,.sv-pintura .sv-plate .tech{color:var(--sv-accent-2)} .sv-pintura .sv-step{border-top-color:rgba(140,197,227,.22)} .sv-pintura .sv-versus{background:rgba(255,255,255,.03);border-color:rgba(140,197,227,.18)} .sv-pintura .sv-versus > div + div{border-color:rgba(140,197,227,.18)} .sv-pintura .sv-versus .si{background:rgba(140,197,227,.06)} .sv-pintura .sv-versus li{color:#C9C2B2} .sv-pintura .sv-versus .si li svg{color:var(--sv-accent-2)} .sv-pintura .sv-versus .no li svg{color:#C97A6A} .sv-pintura .label{color:var(--sv-accent-2)}.sv-pintura .label::before{background:var(--sv-accent-2)} .sv-pintura .sv-zones li{background:rgba(255,255,255,.04);border-color:rgba(140,197,227,.22);color:#EFE9DC} .sv-pintura .sv-zones li svg{color:var(--sv-accent-2)} .sv-pintura .sv-faq details,.sv-pintura .sv-faq details:last-child{border-color:rgba(140,197,227,.2)} .sv-pintura .sv-faq summary svg{color:var(--sv-accent-2)} .sv-pintura .sv-faq summary:hover{color:var(--sv-accent-2)} .sv-pintura .sv-tagline{background:#061A25} .sv-pintura .sv-tagline .w.em{color:var(--sv-accent-2)} .sv-pintura .btn-ink{background:var(--sv-accent);color:#fff}.sv-pintura .btn-ink:hover{background:var(--sv-accent-2);color:#08202D} .sv-pintura .sv-final{background:#061A25} .sv-pintura .sv-final .risk svg,.sv-pintura .sv-stats b{color:var(--sv-accent-2)} .sv-pintura .sv-final .field input:focus,.sv-pintura .sv-final .field textarea:focus{box-shadow:0 0 0 3px rgba(62,122,156,.22)} .sv-pintura .sv-others a .label,.sv-pintura .sv-others a span.go{color:var(--sv-accent-2)} .sv-pintura .foot{background:#051520} /* el titular se pinta con un rodillo: barrido de clip-path de izquierda a derecha */ .sv-pintura .sv-hero h1{opacity:1;clip-path:inset(0 100% 0 0);animation:paintWipe 1.1s var(--sv-prem) .75s forwards} @keyframes paintWipe{to{clip-path:inset(0 0 0 0)}} .sv-pintura .sv-word .em{position:relative;display:inline-block} .sv-pintura .sv-word .em::after{content:"";position:absolute;left:.02em;right:.06em;bottom:.04em;height:.1em;border-radius:.05em;background:var(--sv-accent-2);opacity:.85; transform:scaleX(0);transform-origin:left;animation:brush .7s var(--sv-prem) 1.5s forwards} @keyframes brush{to{transform:scaleX(1)}} /* la noche que avanza: línea de progreso y luna sobre la sección */ .sv-night-wrap{position:relative} .sv-night-track{position:absolute;left:0;right:0;top:15px;height:1px;pointer-events:none} .sv-night-track .fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--sv-accent-2);box-shadow:0 0 12px rgba(140,197,227,.8)} .sv-night-track .moon{position:absolute;top:-13px;left:0;width:28px;height:28px;margin-left:-14px;color:#F3EDE1;filter:drop-shadow(0 0 10px rgba(243,237,225,.6))} .sv-night-track .moon svg{width:100%;height:100%} @media (max-width:1000px){.sv-night-track{display:none}} /* estrellas: puntos fijos muy discretos en el hero */ .sv-pintura .sv-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.35; background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 8%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 52% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 86% 10%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 92% 30%,#fff 50%,transparent 51%); animation:twinkle 6s ease-in-out infinite alternate} @keyframes twinkle{from{opacity:.2}to{opacity:.5}} .sv-pintura .sv-sticky .p{background:var(--sv-accent)} /* ---------- CARPINTERÍA · la madera: veta en el titular y láminas en carril ---------- */ .sv-carpinteria{background:#F4EDE0} .sv-carpinteria .sv-soft{background:#EDE3D2} .sv-carpinteria .sv-word .em{ background-image:linear-gradient(rgba(215,177,115,.45),rgba(215,177,115,.45)),url("/servicios/img/det-carpinteria-munequilla.jpg");background-size:cover;background-position:50% 40%; -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; filter:brightness(1.45) saturate(1.25) drop-shadow(0 6px 24px rgba(0,0,0,.45))} .sv-carpinteria .sv-hero .hero-bg::after{background:linear-gradient(180deg,rgba(28,18,10,.35) 0%,rgba(28,18,10,.1) 34%,rgba(24,14,6,.74) 72%,rgba(20,12,5,.96) 100%)} .sv-carpinteria .sv-dark,.sv-carpinteria .sv-tagline.sv-dark{background:#1C120A;color:#F1E6D4} .sv-carpinteria .sv-dark .sv-card{border-color:rgba(201,149,90,.25)} .sv-carpinteria .sv-final{background:#1C120A} .sv-carpinteria .foot{background:#150D06} .sv-carpinteria .sv-dark .label,.sv-carpinteria .sv-final .label{color:var(--sv-accent-2)} .sv-carpinteria .sv-dark .label::before,.sv-carpinteria .sv-final .label::before{background:var(--sv-accent-2)} .sv-carpinteria .sv-final .risk svg,.sv-carpinteria .sv-stats b{color:var(--sv-accent-2)} .sv-carpinteria .sv-final .field input:focus,.sv-carpinteria .sv-final .field textarea:focus{box-shadow:0 0 0 3px rgba(138,90,43,.2)} /* grano de madera: ruido muy fino sobre las secciones oscuras */ .sv-carpinteria .sv-dark::before,.sv-carpinteria .sv-final::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,")} .sv-carpinteria .sv-dark .wrap,.sv-carpinteria .sv-final .wrap{position:relative} /* láminas en carril horizontal con scroll-snap en pantallas anchas */ @media (min-width:900px){ .sv-carpinteria .sv-plates{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(440px,46%);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:32px; padding:8px 0 24px;scrollbar-width:thin;scrollbar-color:var(--sv-accent) transparent;cursor:grab} .sv-carpinteria .sv-plates.dragging{cursor:grabbing;scroll-snap-type:none} .sv-carpinteria .sv-plate{scroll-snap-align:start} .sv-carpinteria .sv-plates::-webkit-scrollbar{height:4px} .sv-carpinteria .sv-plates::-webkit-scrollbar-thumb{background:var(--sv-accent);border-radius:4px} } .sv-rail-hint{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sv-accent);font-weight:600} .sv-rail-hint svg{width:22px;height:22px;animation:railNudge 2.4s var(--sv-prem) infinite} @keyframes railNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}} @media (max-width:899px){.sv-rail-hint{display:none}} .sv-carpinteria .sv-plate .n{font-style:italic} .sv-carpinteria .sv-plate .img{aspect-ratio:16/11} .sv-carpinteria .sv-plate:hover .img img{transform:scale(1.04)} .sv-carpinteria .sv-tagline .w.em{color:var(--sv-accent-2)} /* Selector de idioma discreto (ES · CA · GL · EU) */ .sv-lang{display:inline-flex;align-items:center;gap:2px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,233,220,.7);white-space:nowrap} .sv-lang a{padding:4px 5px;border-radius:100px;color:inherit;opacity:1;font-size:inherit;letter-spacing:inherit;transition:color .2s,background .2s} .sv-lang a:hover{color:#fff;background:rgba(255,255,255,.08)} .sv-lang a.on{color:var(--brass-2);font-weight:700} .sv-lang i{opacity:.4;font-style:normal} @media (max-width:759px){.nav-links.open .sv-lang{padding:14px var(--gut) 6px;font-size:.74rem}} /* Ajuste de tiempos al arquetipo Premium (hover < 100 ms de latencia, 350-500 ms de movimiento) */ .sv-card,.sv-hub a{transition-duration:.45s} .sv-gallery img,.sv-plate .img img,.sv-hub .img img,.sv-grid-2 .img img,.sv-others a img{transition-duration:.9s} /* ============================================================ INMERSIÓN: bandas a sangre con parallax, galerías que caen, normas y seguridad, y dispositivos (móvil < 760 px; iPad = escritorio) ============================================================ */ /* ---------- Banda a sangre con parallax ---------- */ .sv-band{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;color:#fff;isolation:isolate} .sv-band .bg{position:absolute;inset:-18% 0;z-index:-1} .sv-band .bg img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:translate3d(0,var(--py,0),0)} .sv-band .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,24,34,.82) 0%,rgba(7,24,34,.5) 48%,rgba(7,24,34,.22) 100%)} .sv-band.right .bg::after{background:linear-gradient(270deg,rgba(7,24,34,.82) 0%,rgba(7,24,34,.5) 48%,rgba(7,24,34,.22) 100%)} .sv-band .wrap{position:relative;width:100%;padding-block:clamp(64px,10vh,112px)} .sv-band blockquote{margin:0;max-width:24ch;font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.12;text-wrap:balance} .sv-band.right .wrap{display:flex;justify-content:flex-end;text-align:right} .sv-band blockquote .em{font-style:italic;color:var(--sv-accent-2)} .sv-band .attrib{display:block;margin-top:24px;font-family:var(--sans);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sv-accent-2)} .sv-band .body{margin:24px 0 0;max-width:52ch;color:rgba(239,233,220,.85);font-size:1.02rem} .sv-band.short{min-height:56vh} .sv-band .btn{margin-top:32px} /* la palabra grande de las bandas entra letra a letra desde abajo */ .sv-band blockquote .w{display:inline-block;opacity:0;transform:translateY(24px);transition:opacity .6s var(--sv-prem),transform .6s var(--sv-prem)} .sv-band.in blockquote .w{opacity:1;transform:none} /* ---------- Galería en cascada: las fotos caen y se asientan ---------- */ .sv-cascade{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:start} .sv-cascade figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--abyss-2); opacity:0;transform:translateY(-72px) rotate(var(--r,0deg)) scale(.98);transition:opacity .7s var(--sv-prem),transform .9s cubic-bezier(.2,.8,.2,1)} .sv-cascade.in figure{opacity:1;transform:none} .sv-cascade figure:nth-child(1){grid-column:1/7;--r:-1.2deg} .sv-cascade figure:nth-child(2){grid-column:7/13;margin-top:64px;--r:1.4deg} .sv-cascade figure:nth-child(3){grid-column:1/5;--r:.8deg} .sv-cascade figure:nth-child(4){grid-column:5/9;margin-top:40px;--r:-1deg} .sv-cascade figure:nth-child(5){grid-column:9/13;margin-top:-24px;--r:1.2deg} .sv-cascade figure:nth-child(6){grid-column:1/8;--r:-.6deg} .sv-cascade figure:nth-child(7){grid-column:8/13;margin-top:56px;--r:1deg} .sv-cascade figure:nth-child(8){grid-column:1/13;--r:0deg} .sv-cascade.in figure:nth-child(2){transition-delay:.12s}.sv-cascade.in figure:nth-child(3){transition-delay:.2s} .sv-cascade.in figure:nth-child(4){transition-delay:.28s}.sv-cascade.in figure:nth-child(5){transition-delay:.36s} .sv-cascade.in figure:nth-child(6){transition-delay:.44s}.sv-cascade.in figure:nth-child(7){transition-delay:.52s}.sv-cascade.in figure:nth-child(8){transition-delay:.6s} .sv-cascade img{width:100%;height:auto;display:block;transition:transform 1s var(--sv-prem)} .sv-cascade figure:hover img{transform:scale(1.04)} .sv-cascade figcaption{position:absolute;inset:auto 0 0 0;padding:40px 16px 14px;font-size:.8rem;letter-spacing:.06em;color:#F3EDE1;background:linear-gradient(180deg,transparent,rgba(7,22,32,.82))} /* dentro de la cascada, cada foto sigue cayendo despacio con el scroll (parallax de capa) */ .sv-cascade figure img{transform:translate3d(0,var(--py,0),0) scale(1.08)} .sv-cascade figure:hover img{transform:translate3d(0,var(--py,0),0) scale(1.12)} @media (max-width:759px){ .sv-cascade{grid-template-columns:1fr 1fr;gap:10px} .sv-cascade figure,.sv-cascade figure:nth-child(n){grid-column:auto;margin-top:0} .sv-cascade figure:nth-child(8){grid-column:1/-1} } /* ---------- Normas, seguridad y un solo nombre ---------- */ .sv-normas{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:start} .sv-normas ol{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:0;counter-reset:norma} .sv-normas li{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:20px 0;border-top:1px solid rgba(215,177,115,.22);counter-increment:norma} .sv-normas li::before{content:counter(norma,decimal-leading-zero);font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--sv-accent-2);padding-top:2px;grid-row:1/3} .sv-normas li strong,.sv-normas li span{grid-column:2} .sv-normas li strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.2rem;margin-bottom:6px} .sv-normas li span{color:#C9C2B2;font-size:.95rem} .sv-normas .fotos{display:grid;gap:16px} .sv-normas .fotos figure{margin:0;position:relative;border-radius:2px;overflow:hidden;background:#fff} .sv-normas .fotos img{width:100%;height:auto;display:block} .sv-normas .fotos figcaption{padding:12px 14px;font-size:.82rem;color:#C9C2B2;background:rgba(255,255,255,.04);border-top:1px solid rgba(215,177,115,.18)} .sv-normas .fotos .dos{display:grid;grid-template-columns:1fr 1fr;gap:16px} .sv-normas .sello{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:10px 16px;border:1px solid var(--sv-accent-2);border-radius:100px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sv-accent-2);font-weight:600} .sv-normas .sello svg{width:18px;height:18px} @media (max-width:900px){.sv-normas{grid-template-columns:1fr}} /* ---------- Cuándo se hace (noche / día) ---------- */ .sv-cuando{display:grid;grid-template-columns:1fr 1fr;gap:16px} .sv-cuando > div{padding:32px 24px;border:1px solid var(--mist);border-radius:2px;background:#fff;position:relative;overflow:hidden} .sv-cuando .ico{width:44px;height:44px;border-radius:50%;border:1px solid var(--sv-accent);color:var(--sv-accent);display:grid;place-items:center;margin-bottom:16px} .sv-cuando .ico svg{width:22px;height:22px} .sv-cuando h3{font-size:1.35rem;margin-bottom:8px} .sv-cuando p{margin:0;color:var(--ink-soft);font-size:.96rem} .sv-cuando .tag{position:absolute;top:16px;right:16px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sv-accent);font-weight:600} .sv-dark .sv-cuando > div,.sv-pintura .sv-cuando > div{background:rgba(255,255,255,.04);border-color:rgba(215,177,115,.2)} .sv-dark .sv-cuando p,.sv-pintura .sv-cuando p{color:#C9C2B2} .sv-pintura .sv-cuando .ico,.sv-pintura .sv-cuando .tag{color:var(--sv-accent-2);border-color:var(--sv-accent-2)} @media (max-width:759px){.sv-cuando{grid-template-columns:1fr}} /* ---------- Cierre distinto en cada página ---------- */ .sv-cierre{position:relative;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff} .sv-cierre .bg{position:absolute;inset:-14% 0;z-index:0} .sv-cierre .bg img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0),0);will-change:transform} .sv-cierre .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,24,34,.1),rgba(7,24,34,.85))} .sv-cierre .wrap{position:relative;z-index:1;padding-block:clamp(48px,8vh,96px)} .sv-cierre h2{font-size:clamp(2rem,4.6vw,3.6rem);max-width:20ch} .sv-cierre h2 .em{font-style:italic;color:var(--sv-accent-2)} .sv-cierre p{max-width:52ch;color:rgba(239,233,220,.85);margin:16px 0 24px} .sv-cierre .links{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600} .sv-cierre .links a{color:var(--sv-accent-2);border-bottom:1px solid transparent;transition:border-color .25s} .sv-cierre .links a:hover{border-color:var(--sv-accent-2)} /* ---------- Enlaces a los otros servicios dentro del bloque final (sin tarjetas) ---------- */ .sv-final .otros{margin:32px 0 0;padding-top:24px;border-top:1px solid rgba(215,177,115,.22);font-size:.92rem;color:#C9C2B2} .sv-final .otros a{color:var(--sv-accent-2);text-decoration:underline;text-underline-offset:3px} /* ---------- Dispositivos: móvil = menos de 760 px; iPad (768 a 1024) = maqueta de escritorio ---------- */ @media (min-width:760px) and (max-width:1100px){ .sv-hero .hero-bottom{grid-template-columns:1fr} .sv-hero .hero-bottom .sv-chips{grid-row:auto;max-width:none} .sv-hero .hero-bottom p{grid-column:1;text-align:left;justify-self:start;max-width:60ch} .sv-hero .hero-bottom p:last-child{display:none} .nav-links{gap:clamp(10px,1.4vw,18px)} .nav-links a{font-size:.7rem;letter-spacing:.08em} .nav .btn-mail{display:none} .sv-lang{font-size:.6rem} .brand .sub{display:none} .sv-hero h1{max-width:26ch} } @media (min-width:760px) and (max-width:899px){ .nav-links{display:flex!important;position:static;flex-direction:row;background:none;padding:0;box-shadow:none;border:0} .burger{display:none!important} .sv-benefits,.sv-steps{grid-template-columns:repeat(2,1fr)} .sv-gallery{columns:2} .sv-plates{grid-template-columns:1fr 1fr} } /* En Safari (iPad y iPhone) el hero va quieto por regla de la web; las bandas sí llevan parallax porque es un solo transform */ @media (hover:none){ .sv-pulido .sv-gallery figure::after,.sv-pulido .sv-grid-2 .img::after,.sv-pulido .sv-hero .hero-bg::before{display:none} } @media (prefers-reduced-motion:reduce){ .sv-band .bg img,.sv-cierre .bg img,.sv-cascade figure img{transform:none!important} .sv-cascade figure,.sv-band blockquote .w{opacity:1;transform:none;transition:none} }