/* ========================================================== pablo.dev — webs para negocios ========================================================== */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url(fuentes/inter.woff2) format('woff2'); } @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap; src:url(fuentes/space-grotesk.woff2) format('woff2'); } :root{ --fondo:#0b0d12; --fondo-2:#11141b; --panel:#151922; --borde:#242a36; --texto:#eef0f4; --suave:#a3acba; --acento:#7dd3a8; --acento-2:#f4c168; --acento-rgb:125,211,168; --wa:#25d366; --wa-texto:#06270f; --maxw:1140px; --fuente-titulo:'Space Grotesk',system-ui,sans-serif; --fuente-texto:'Inter',system-ui,sans-serif; --radio:16px; --sombra-maqueta:0 40px 80px -30px rgba(0,0,0,.75); } [data-tema="claro"]{ --fondo:#f6f7f9; --fondo-2:#eceff3; --panel:#ffffff; --borde:#dfe3ea; --texto:#111318; --suave:#525b69; --acento:#1f8f5f; --acento-2:#b07d12; --acento-rgb:31,143,95; --sombra-maqueta:0 40px 80px -30px rgba(20,30,50,.35); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:80px; } body{ margin:0; background:var(--fondo); color:var(--texto); font:16px/1.65 var(--fuente-texto); -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; transition:background-color .35s ease,color .35s ease; } img{ max-width:100%; height:auto; } a{ color:var(--acento); text-decoration:none; } h1,h2,h3{ font-family:var(--fuente-titulo); line-height:1.1; margin:0 0 .5em; letter-spacing:-.02em; text-wrap:balance; } :focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:6px; } /* Intro (solo escritorio y primera visita; la activa el script del ) */ .intro{ display:none; } .con-intro .intro{ display:flex; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; background:var(--fondo); animation:intro-fuera .45s cubic-bezier(.76,0,.24,1) .55s forwards; } .intro__marca{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.6rem; animation:intro-marca .5s ease both; } .intro__marca span{ color:var(--acento); } @keyframes intro-marca{ from{ opacity:0; transform:translateY(8px); } } @keyframes intro-fuera{ to{ transform:translateY(-100%); visibility:hidden; } } /* Barra de progreso */ .progreso{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1000; pointer-events:none; } .progreso span{ display:block; height:100%; background:linear-gradient(90deg,var(--acento),var(--acento-2)); transform-origin:left; transform:scaleX(0); } /* Cabecera */ .cabecera{ position:fixed; top:0; left:0; right:0; z-index:900; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 28px; transition:background-color .3s ease,box-shadow .3s ease,transform .3s ease; } .cabecera--solida{ background:rgba(11,13,18,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--borde); } [data-tema="claro"] .cabecera--solida{ background:rgba(246,247,249,.85); } .cabecera--oculta{ transform:translateY(-100%); } .marca{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.15rem; color:var(--texto); } .marca span{ color:var(--acento); } .nav{ display:flex; align-items:center; gap:26px; } .nav a{ color:var(--suave); font-size:.94rem; font-weight:500; position:relative; padding:4px 0; } .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--acento); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .nav a:hover,.nav a.activo{ color:var(--texto); } .nav a:hover::after,.nav a.activo::after{ transform:scaleX(1); } .cabecera__acciones{ display:flex; align-items:center; gap:12px; } .tema{ width:38px; height:38px; border-radius:50%; cursor:pointer; border:1px solid var(--borde); background:var(--panel); color:var(--texto); display:inline-flex; align-items:center; justify-content:center; transition:border-color .2s ease; } .tema:hover{ border-color:var(--suave); } .tema svg{ width:18px; height:18px; } [data-tema="oscuro"] .tema__luna{ display:none; } [data-tema="claro"] .tema__sol{ display:none; } /* Botones */ .btn{ display:inline-flex; align-items:center; gap:.55em; position:relative; overflow:hidden; background:var(--acento); color:#0b0d12; font-weight:600; padding:.9em 1.5em; border-radius:999px; border:0; font-family:var(--fuente-texto); font-size:1rem; line-height:1.2; cursor:pointer; transition:transform .2s ease,box-shadow .25s ease,filter .2s ease; } .btn > *{ position:relative; z-index:1; } .btn--wa{ background:var(--wa); color:var(--wa-texto); box-shadow:0 12px 30px -12px rgba(37,211,102,.7); } .btn--wa:hover{ filter:brightness(1.07); box-shadow:0 16px 36px -12px rgba(37,211,102,.85); } .btn--peq{ padding:.6em 1.05em; font-size:.9rem; box-shadow:none; } .btn--grande{ font-size:1.12rem; padding:1.05em 1.8em; } .icono-wa{ width:1.3em; height:1.3em; flex:none; } .enlace-flecha{ font-weight:600; display:inline-flex; gap:6px; align-items:center; } .enlace-flecha span{ transition:transform .2s ease; } .enlace-flecha:hover span{ transform:translate(2px,2px); } /* Portada */ .hero{ position:relative; max-width:var(--maxw); margin:0 auto; min-height:min(100vh,900px); display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center; padding:120px 28px 64px; overflow-x:clip; } .hero::before{ content:""; position:absolute; z-index:-1; right:-10%; top:10%; width:70%; height:80%; background:radial-gradient(closest-side,rgba(var(--acento-rgb),.16),transparent); filter:blur(20px); pointer-events:none; } .eyebrow{ color:var(--acento); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; } .hero__titulo{ font-size:clamp(2.2rem,5.2vw,4rem); margin-bottom:22px; } .lead{ color:var(--suave); font-size:1.12rem; max-width:52ch; margin:0 0 30px; } .acciones{ display:flex; gap:14px 22px; flex-wrap:wrap; align-items:center; } .hero__nota{ margin:22px 0 0; font-size:.88rem; color:var(--suave); } /* Entrada de la portada: solo transform/opacity, y la red de seguridad es el propio CSS */ .js .hero__pieza{ animation:subir .8s cubic-bezier(.22,1,.36,1) both; } .js .hero__pieza:nth-child(2){ animation-delay:.08s; } .js .hero__pieza:nth-child(3){ animation-delay:.16s; } .js .hero__pieza:nth-child(4){ animation-delay:.24s; } .js .hero__pieza:nth-child(5){ animation-delay:.32s; } .js .maqueta.hero__pieza{ animation-delay:.2s; animation-duration:1s; } .con-intro .hero__pieza{ animation-delay:.75s !important; } .con-intro .maqueta.hero__pieza{ animation-delay:.9s !important; } @keyframes subir{ from{ opacity:0; transform:translateY(22px); } } /* Maqueta de la portada: navegador + móvil que rotan entre los tres ejemplos */ .maqueta{ position:relative; padding:0 0 64px 0; } .maqueta__navegador{ margin:0; border-radius:14px; overflow:hidden; background:#101216; border:1px solid var(--borde); box-shadow:var(--sombra-maqueta); } .barra-nav{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:#171a20; border-bottom:1px solid rgba(255,255,255,.06); font-size:.72rem; color:rgba(255,255,255,.5); } .barra-nav i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); } .barra-nav__url{ margin-left:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } .maqueta__pantallas{ position:relative; display:grid; } .maqueta__pantallas img{ grid-area:1/1; display:block; width:100%; opacity:0; transition:opacity .7s ease; } .maqueta__pantallas img.activa{ opacity:1; } .maqueta__navegador img{ aspect-ratio:16/10; object-fit:cover; object-position:top; } .maqueta__movil{ position:absolute; right:-18px; bottom:0; width:27%; margin:0; border-radius:26px; padding:7px; background:#0c0d10; border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 60px -20px rgba(0,0,0,.8); } .maqueta__movil .maqueta__pantallas{ border-radius:20px; overflow:hidden; } .maqueta__movil img{ aspect-ratio:390/760; object-fit:cover; object-position:top; } .maqueta__tabs{ position:absolute; left:0; bottom:8px; display:flex; gap:6px; flex-wrap:wrap; } .maqueta__tabs button{ font:600 .82rem/1 var(--fuente-texto); color:var(--suave); cursor:pointer; background:var(--panel); border:1px solid var(--borde); border-radius:999px; padding:.6em 1em; transition:color .2s ease,border-color .2s ease,background-color .2s ease; } .maqueta__tabs button:hover{ color:var(--texto); border-color:var(--suave); } .maqueta__tabs button.activa{ color:#0b0d12; background:var(--acento); border-color:var(--acento); } /* Garantías */ .garantias{ list-style:none; max-width:var(--maxw); margin:0 auto; padding:0 28px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .garantias li{ border-top:2px solid var(--borde); padding:18px 4px 0; display:flex; flex-direction:column; gap:4px; } .garantias strong{ font-family:var(--fuente-titulo); font-size:1.05rem; } .garantias span{ color:var(--suave); font-size:.92rem; } /* Secciones */ .seccion{ max-width:var(--maxw); margin:0 auto; padding:96px 28px; } .seccion--estrecha{ max-width:820px; } .seccion__cab{ margin-bottom:44px; } .seccion h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); margin:0; } .seccion__intro{ color:var(--suave); font-size:1.08rem; max-width:62ch; margin:16px 0 0; } .seccion--alt{ max-width:none; padding-left:0; padding-right:0; background:var(--fondo-2); border-top:1px solid var(--borde); border-bottom:1px solid var(--borde); } .seccion__interior{ max-width:var(--maxw); margin:0 auto; padding:0 28px; } /* Ejemplos */ .demo{ display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; margin-bottom:96px; } .demo__visual{ position:relative; display:block; padding:0 40px 40px 0; } .demo__navegador{ display:block; overflow:hidden; border-radius:14px; background:#101216; border:1px solid var(--borde); box-shadow:var(--sombra-maqueta); transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease; } .demo__navegador img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; } .demo__visual:hover .demo__navegador{ transform:translateY(-4px); box-shadow:0 50px 90px -30px rgba(var(--acento-rgb),.4); } .demo__movil{ position:absolute; right:0; bottom:0; width:26%; border-radius:22px; padding:6px; background:#0c0d10; border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 60px -20px rgba(0,0,0,.8); } .demo__movil img{ display:block; width:100%; border-radius:17px; aspect-ratio:390/760; object-fit:cover; object-position:top; } .demo--inv .demo__visual{ order:2; padding:0 0 40px 40px; } .demo--inv .demo__movil{ right:auto; left:0; } .demo__info{ display:flex; flex-direction:column; gap:12px; } .demo__info h3{ font-size:clamp(1.6rem,2.8vw,2.1rem); margin:0; } .demo__info p{ color:var(--suave); margin:0; font-size:1.04rem; } .demo__lista{ list-style:none; padding:0; margin:6px 0 8px; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; font-size:.93rem; } .demo__lista li{ position:relative; padding-left:22px; } .demo__lista li::before{ content:"✓"; position:absolute; left:0; color:var(--acento); font-weight:700; } .etiqueta{ align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acento-2); } .aviso-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--panel); border:1px solid var(--borde); border-radius:20px; padding:26px 30px; } .aviso-cta p{ margin:0; font-size:1.08rem; max-width:52ch; } /* Precio en la portada */ .precio-hero{ display:inline-grid; grid-template-columns:auto auto; align-items:end; column-gap:12px; margin:0 0 28px; padding:12px 20px 12px 18px; border-radius:16px; color:var(--texto); background:linear-gradient(135deg,rgba(var(--acento-rgb),.16),rgba(244,193,104,.12)); border:1px solid rgba(var(--acento-rgb),.4); transition:transform .2s ease,border-color .2s ease; } .precio-hero:hover{ transform:translateY(-2px); border-color:var(--acento); } .precio-hero__desde{ grid-column:1; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--suave); align-self:center; } .precio-hero__cifra{ grid-column:2; grid-row:1 / span 2; font-family:var(--fuente-titulo); font-weight:700; font-size:2.6rem; line-height:1; color:var(--acento); } .precio-hero__nota{ grid-column:1; font-size:.8rem; color:var(--suave); } .precio-hero__nota u{ text-underline-offset:3px; color:var(--texto); } /* Sello rotatorio sobre la maqueta */ .sello{ position:absolute; z-index:3; left:-34px; top:-34px; width:118px; height:118px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; background:var(--acento-2); color:#1a1405; text-align:center; line-height:1; box-shadow:0 18px 40px -14px rgba(244,193,104,.7); transform:rotate(-10deg); transition:transform .3s cubic-bezier(.22,1,.36,1); animation:sello-latido 3.2s ease-in-out 1.6s infinite; } .sello:hover{ transform:rotate(0) scale(1.06); animation-play-state:paused; } .sello__desde,.sello__iva{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .sello__cifra{ font-family:var(--fuente-titulo); font-weight:700; font-size:2rem; letter-spacing:-.03em; margin:3px 0; } @keyframes sello-latido{ 0%,100%{ transform:rotate(-10deg) scale(1); } 50%{ transform:rotate(-6deg) scale(1.06); } } /* Precios */ .seccion__cab--centro{ text-align:center; } .seccion__cab--centro .seccion__intro{ margin-left:auto; margin-right:auto; } .planes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; } .plan{ position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--borde); border-radius:22px; padding:30px 26px 26px; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; } .plan:hover{ transform:translateY(-4px); border-color:rgba(var(--acento-rgb),.5); } .plan--destacado{ border:2px solid var(--acento); background:linear-gradient(180deg,rgba(var(--acento-rgb),.12),transparent 55%),var(--panel); box-shadow:0 40px 80px -40px rgba(var(--acento-rgb),.55); } .plan__marca{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--acento); color:#0b0d12; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.45em 1em; border-radius:999px; white-space:nowrap; } .plan__nombre{ font-size:1.35rem; margin:0 0 4px; } .plan__para{ color:var(--suave); margin:0 0 18px; font-size:.95rem; } .plan__precio{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0 0 20px; padding-bottom:20px; border-bottom:1px solid var(--borde); } .plan__desde{ width:100%; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--suave); } .plan__cifra{ font-family:var(--fuente-titulo); font-weight:700; font-size:3.2rem; line-height:1; letter-spacing:-.03em; } .plan--destacado .plan__cifra{ color:var(--acento); } .plan__iva{ color:var(--suave); font-size:.85rem; } .plan__lista{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:9px; flex:1; font-size:.95rem; } .plan__lista li{ position:relative; padding-left:24px; } .plan__lista li::before{ content:"✓"; position:absolute; left:0; color:var(--acento); font-weight:700; } .plan__cta{ justify-content:center; width:100%; } .plan:not(.plan--destacado) .plan__cta{ background:transparent; color:var(--texto); border:1.5px solid var(--borde); box-shadow:none; } .plan:not(.plan--destacado) .plan__cta:hover{ border-color:var(--wa); color:var(--wa); filter:none; } .extras{ margin-top:28px; background:var(--fondo-2); border:1px solid var(--borde); border-radius:22px; padding:28px 30px; } .extras__titulo{ font-size:1.15rem; margin:0 0 18px; } .extras__lista{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .extras__lista li{ display:flex; flex-direction:column; gap:4px; } .extras__cifra{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.7rem; color:var(--acento-2); line-height:1.1; } .extras__cifra small{ font-size:.55em; font-weight:500; } .extras__lista strong{ font-size:1.02rem; } .extras__lista span:last-child{ color:var(--suave); font-size:.92rem; } .extras__nota{ margin:22px 0 0; color:var(--suave); font-size:.85rem; } /* Qué incluye */ .ventajas{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .ventaja{ background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio); padding:26px 24px; transition:border-color .2s ease,transform .2s ease; } .ventaja:hover{ border-color:rgba(var(--acento-rgb),.5); transform:translateY(-3px); } .ventaja svg{ width:30px; height:30px; color:var(--acento); margin-bottom:14px; } .ventaja h3{ font-size:1.14rem; margin:0 0 8px; } .ventaja p{ color:var(--suave); margin:0; font-size:.96rem; } /* Cómo trabajo */ .pasos{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .pasos li{ position:relative; padding:26px 4px 0; border-top:2px solid var(--borde); } .pasos li::before{ content:""; position:absolute; top:-2px; left:0; width:56px; height:2px; background:var(--acento); } .pasos__num{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(var(--acento-rgb),.14); color:var(--acento); font-family:var(--fuente-titulo); font-weight:700; margin-bottom:14px; } .pasos h3{ font-size:1.2rem; margin:0 0 8px; } .pasos p{ color:var(--suave); margin:0; } /* Preguntas */ .faq{ display:flex; flex-direction:column; gap:10px; } .faq details{ background:var(--panel); border:1px solid var(--borde); border-radius:14px; transition:border-color .2s ease; } .faq details[open]{ border-color:rgba(var(--acento-rgb),.45); } .faq summary{ list-style:none; cursor:pointer; padding:18px 56px 18px 22px; position:relative; font-family:var(--fuente-titulo); font-weight:500; font-size:1.1rem; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:1.5rem; line-height:1; color:var(--acento); transition:transform .25s ease; } .faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); } .faq details p{ margin:0; padding:0 22px 20px; color:var(--suave); } .faq details p strong{ color:var(--texto); } /* Contacto */ .contacto{ text-align:center; padding-bottom:64px; } .contacto__caja{ position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--borde); border-radius:24px; padding:64px 32px; } .contacto__caja::before{ content:""; position:absolute; inset:-40%; z-index:0; background:radial-gradient(circle at 30% 30%,rgba(var(--acento-rgb),.18),transparent 45%),radial-gradient(circle at 70% 70%,rgba(37,211,102,.12),transparent 45%); animation:girar 18s linear infinite; } @keyframes girar{ to{ transform:rotate(360deg); } } .contacto__caja > *{ position:relative; z-index:1; } .contacto__caja > p{ color:var(--suave); margin:0 auto 28px; max-width:48ch; font-size:1.06rem; } .contacto__caja > p.contacto__correo{ margin:24px auto 0; font-size:.95rem; } .copiar{ margin-left:6px; font:600 .8rem/1 var(--fuente-texto); color:var(--suave); background:transparent; border:1px solid var(--borde); border-radius:999px; padding:.45em .8em; cursor:pointer; } .copiar:hover{ color:var(--texto); border-color:var(--suave); } /* Perfil técnico (secundario, plegado) */ .tecnico{ padding-top:0; } .tecnico__caja{ border:1px dashed var(--borde); border-radius:20px; padding:0 26px; } .tecnico__caja > summary{ list-style:none; cursor:pointer; padding:24px 40px 24px 0; position:relative; display:flex; flex-direction:column; gap:2px; } .tecnico__caja > summary::-webkit-details-marker{ display:none; } .tecnico__caja .eyebrow{ margin:0; color:var(--suave); } .tecnico__titulo{ font-family:var(--fuente-titulo); font-size:1.25rem; font-weight:500; } .tecnico__abrir{ position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.6rem; color:var(--acento); transition:transform .25s ease; } .tecnico__caja[open] .tecnico__abrir{ transform:translateY(-50%) rotate(45deg); } .tecnico__intro{ color:var(--suave); margin:0 0 24px; max-width:70ch; } .tecnico__stack{ color:var(--suave); font-size:.95rem; margin:24px 0 28px; } .tecnico__stack strong{ color:var(--texto); } .rejilla{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .tarjeta{ background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio); padding:24px 22px; display:flex; flex-direction:column; gap:10px; } .tarjeta h3{ font-size:1.2rem; margin:0; } .tarjeta p{ color:var(--suave); margin:0; flex:1; font-size:.95rem; } .chips{ list-style:none; padding:0; margin:4px 0 0; display:flex; flex-wrap:wrap; gap:8px; } .chips li{ font-size:.76rem; color:var(--suave); border:1px solid var(--borde); border-radius:999px; padding:.3em .7em; } /* Pie */ .pie{ border-top:1px solid var(--borde); color:var(--suave); padding:28px; font-size:.9rem; display:flex; justify-content:space-between; align-items:center; max-width:var(--maxw); margin:0 auto; } .pie p{ margin:0; } .pie__arriba{ width:40px; height:40px; border-radius:50%; border:1px solid var(--borde); display:inline-flex; align-items:center; justify-content:center; color:var(--texto); } /* Botón fijo de WhatsApp (solo móvil, aparece al pasar la portada) */ .wa-fijo{ display:none; } /* Aviso (toast) */ .aviso{ position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); opacity:0; background:var(--texto); color:var(--fondo); padding:10px 18px; border-radius:999px; font-size:.9rem; font-weight:500; pointer-events:none; transition:opacity .25s ease,transform .25s ease; z-index:1200; } .aviso--visible{ opacity:1; transform:translate(-50%,0); } /* Revelado al hacer scroll: solo si app.js lo ha preparado (si falla, todo visible) */ .revelar [data-anim]{ opacity:0; transform:translateY(26px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1); } .revelar [data-anim].visto{ opacity:1; transform:none; } /* ---------- Responsive ---------- */ @media (max-width:1000px){ .hero{ grid-template-columns:1fr; gap:40px; min-height:0; padding-top:112px; } .maqueta{ max-width:640px; } .nav{ gap:18px; } } @media (max-width:900px){ .nav{ display:none; } .garantias{ grid-template-columns:repeat(2,1fr); } .demo{ grid-template-columns:1fr; gap:28px; margin-bottom:72px; } .demo--inv .demo__visual{ order:0; padding:0 40px 40px 0; } .demo--inv .demo__movil{ left:auto; right:0; } .ventajas{ grid-template-columns:repeat(2,1fr); } .rejilla{ grid-template-columns:1fr; } .planes{ grid-template-columns:1fr; max-width:520px; margin:0 auto; gap:28px; } .plan--destacado{ order:-1; } .extras__lista{ grid-template-columns:1fr; gap:18px; } .aviso-cta{ flex-direction:column; align-items:flex-start; } } @media (max-width:640px){ .cabecera{ padding:12px 16px; } .cabecera .btn--peq{ padding:.6em; } .cabecera .btn--peq span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .hero{ padding:96px 16px 40px; gap:32px; } .hero__titulo{ font-size:clamp(2rem,9vw,2.6rem); } .lead{ font-size:1.04rem; } .acciones .btn{ width:100%; justify-content:center; } .acciones .enlace-flecha{ margin:0 auto; } .hero__nota{ text-align:center; } /* En móvil, la maqueta es solo el teléfono, centrado */ .maqueta{ padding:0 0 56px; } .maqueta__navegador{ display:none; } .maqueta__movil{ position:relative; right:auto; width:62%; margin:0 auto; } .maqueta__tabs{ left:0; right:0; justify-content:center; bottom:0; } .sello{ left:4%; top:14%; width:96px; height:96px; } .sello__cifra{ font-size:1.6rem; } .precio-hero{ display:grid; width:100%; } .extras{ padding:24px 20px; } .garantias{ grid-template-columns:1fr; padding:0 16px 8px; gap:12px; } .seccion{ padding:64px 16px; } .seccion__interior{ padding:0 16px; } .seccion--alt{ padding-left:0; padding-right:0; } .demo__visual,.demo--inv .demo__visual{ padding:0 24px 32px 0; } .demo__movil{ width:30%; border-radius:16px; padding:4px; } .demo__movil img{ border-radius:12px; } .demo__lista{ grid-template-columns:1fr; } .ventajas,.pasos{ grid-template-columns:1fr; } .contacto__caja{ padding:44px 20px; } .btn--grande{ width:100%; justify-content:center; font-size:1.05rem; } .tecnico__caja{ padding:0 18px; } .pie{ flex-direction:column; gap:14px; text-align:center; padding-bottom:96px; } .wa-fijo{ display:flex; align-items:center; justify-content:center; gap:10px; position:fixed; left:16px; right:16px; bottom:max(14px,env(safe-area-inset-bottom)); z-index:950; background:var(--wa); color:var(--wa-texto); font-weight:700; padding:15px 20px; border-radius:999px; box-shadow:0 14px 34px -10px rgba(0,0,0,.6); transform:translateY(160%); transition:transform .35s cubic-bezier(.22,1,.36,1); } .wa-fijo--visible{ transform:none; } .aviso{ bottom:88px; } } /* Menos movimiento: fuera intro, parallax y rotación automática; los fundidos suaves se quedan */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .con-intro .intro{ display:none; } .js .hero__pieza,.js .maqueta.hero__pieza{ animation-duration:.01ms; animation-delay:0s !important; } .revelar [data-anim]{ transform:none; transition:opacity .4s ease; } .contacto__caja::before,.sello{ animation:none; } } /* Tarjeta de app a medida: sin cifra, texto en su lugar */ .plan__cifra--texto{ font-size:2.4rem; } .plan__precio--medida .plan__iva{ width:100%; }