/* ═══════════════════════════════════════════════════════════════ RUMBO PROJECT · hoja compartida por las 5 paginas Reescrita el 23/08/2026 al aplicar los 15 cambios. La regla de color de Ricardo: - fondos blanco y negro ALTERNADOS, sin cuadricula - resaltar bloques con el cian, y de vez en cuando el marino - letras: blanco, negro, dorado y cian - se puede mezclar color dentro de una frase, pero solo donde haya algo que resaltar - NUNCA blanco con negro (como pareja de letras). NUNCA dorado con cian. ═══════════════════════════════════════════════════════════════ */ :root{ /* paleta fija */ --mk-primario:#2DD4BF; --mk-secundario:#141924; --mk-fondo:#0B0D12; --mk-texto:#F4F5F7; --tinta:#0B0D12; --tinta-2:#141924; --marino:#00061E; --acento:#2DD4BF; --acento-claro:#6FF0DE; --acento-tinta:#04211D; /* el mismo cian, oscurecido: sobre blanco el #2DD4BF no se lee */ --acento-hondo:#0E7C72; --dorado:#FFC300; --dorado-tinta:#1A1200; --crema:#F4F5F7; --gris:#8B93A7; --texto-cuerpo:#C6CBD8; --texto-card:#A9B0C2; --papel:#FFFFFF; --papel-2:#F1F3F7; /* variables de TEMA: cada seccion las reescribe */ --fondo:var(--tinta); --texto-fuerte:var(--crema); --texto-suave:var(--texto-cuerpo); --texto-tenue:var(--gris); --acento-txt:var(--acento); --superficie:rgba(255,255,255,.055); --superficie-2:rgba(255,255,255,.018); --borde:rgba(244,245,247,.11); --borde-fuerte:rgba(244,245,247,.22); --display:"Archivo Black","Segoe UI",system-ui,sans-serif; --texto:"Sora","Segoe UI",system-ui,sans-serif; --barra:64px; } /* ── el tema claro: se le pone a la
── */ .claro{ --fondo:var(--papel); --texto-fuerte:var(--marino); --texto-suave:#4A5164; --texto-tenue:#6A7182; --acento-txt:var(--acento-hondo); --superficie:rgba(0,6,30,.028); --superficie-2:rgba(0,6,30,.008); --borde:rgba(0,6,30,.11); --borde-fuerte:rgba(0,6,30,.2); } /* variante oscura de segundo nivel, para dos oscuras seguidas */ .tinta2{--fondo:var(--tinta-2)} /* variante clara de segundo nivel */ .claro.papel2{--fondo:var(--papel-2)} .tec{font-family:var(--texto);font-weight:600;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--texto-tenue)} /* rem se calcula contra , no contra body: subirlo aqui evita textos por debajo de 16px en celular */ html{font-size:17px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barra) + 14px)} *{box-sizing:border-box} body{margin:0;background:var(--tinta);color:var(--crema);font-family:var(--texto);font-size:1rem;line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} p{text-wrap:pretty} /* Archivo Black solo tiene un peso: el grosor lo da la propia familia */ h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:1.14;margin:0;text-wrap:balance;color:var(--texto-fuerte)} h1{font-size:clamp(2.35rem,6.6vw,4.5rem);letter-spacing:-.045em;line-height:1;text-transform:uppercase} /* mk-split mete cada palabra en una caja con overflow:hidden del alto del interlineado. Archivo Black es muy alta: con line-height apretado corta las letras por arriba Y por abajo. Se le devuelve el aire con padding negado */ .mk-split{line-height:1.02} .mk-split .mk-w{padding-top:.2em;margin-top:-.2em;padding-bottom:.18em;margin-bottom:-.18em} /* interlineado con aire: el fondo amarillo de .resalte es una caja mas alta que la letra, y con line-height apretado SE COME el rabito de la "q" y de la "p" de la linea de ARRIBA. 1.3 deja sitio para las dos cosas */ h2{font-size:clamp(1.6rem,4.3vw,2.9rem);line-height:1.3} h3{font-size:clamp(1rem,2.3vw,1.2rem);letter-spacing:-.015em} .acento{color:var(--acento-txt)} .oro{color:var(--dorado)} /* sobre blanco el dorado en letra no se lee: ahi se usa el resalte */ .claro .oro{color:var(--dorado-tinta)} /* el padding de arriba es MENOR que el de abajo a proposito: Archivo Black deja mucho hueco sobre la mayuscula, asi la caja se ve centrada en la letra sin subir tanto que invada la linea anterior */ .resalte{background:var(--dorado);color:var(--dorado-tinta);padding:.04em .3em .16em;border-radius:.2em;box-decoration-break:clone;-webkit-box-decoration-break:clone} section{padding:clamp(3.4rem,8vw,6.4rem) clamp(1.1rem,5vw,3rem);position:relative;background:var(--fondo);color:var(--texto-suave)} .caja{width:100%;max-width:1180px;margin:0 auto} .centro{text-align:center} .centro .parrafo,.parrafo.centro{margin-inline:auto} .parrafo{font-size:clamp(1rem,2.2vw,1.12rem);color:var(--texto-suave);margin:1.1rem 0 0;max-width:62ch} .eyebrow{font-family:var(--display);font-weight:700;font-size:clamp(.66rem,1.7vw,.76rem);letter-spacing:.22em;text-transform:uppercase;color:var(--acento-txt);margin:0 0 1rem;display:flex;align-items:center;gap:.6rem} .centro .eyebrow{justify-content:center} .eyebrow::before{content:"";width:22px;height:2px;background:var(--acento-txt);border-radius:2px;flex:none} .borde-top{border-top:1px solid var(--borde)} /* ── LA LINEA DE RUMBO: motivo de marca que cose las secciones ── */ .rumbo-linea{position:absolute;left:50%;top:-1px;width:2px;height:54px;transform:translateX(-50%);z-index:2; background:linear-gradient(180deg,var(--acento),transparent)} .rumbo-linea::after{content:"";position:absolute;left:50%;top:54px;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg); background:var(--acento);box-shadow:0 0 16px rgba(45,212,191,.9)} /* ═══ EL LOGOTIPO ═══════════════════════════════════════════════ "rumb" + la brujula haciendo de O. Las letras van como MASCARA (el png trae alfa de verdad), asi se pintan del color que haga falta sin tocar el archivo. La brujula va como imagen real, para no perder sus colores. */ .logotipo{display:inline-flex;align-items:flex-start;gap:calc(var(--lg,26px) * .02);text-decoration:none;line-height:0;flex:none} .logo-letras{display:block;width:calc(var(--lg,26px) * 3.0973);height:var(--lg,26px);background:var(--logo-color,var(--crema)); -webkit-mask:url(assets/rumbo-letras.png) no-repeat center/100% 100%; mask:url(assets/rumbo-letras.png) no-repeat center/100% 100%} .logo-o{width:calc(var(--lg,26px) * .78);height:calc(var(--lg,26px) * .78);margin-top:calc(var(--lg,26px) * .061);flex:none} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── BARRA ── */ .barra{position:fixed;top:0;left:0;right:0;z-index:9995;height:var(--barra);display:flex;align-items:center;gap:.7rem; padding:0 clamp(.8rem,3vw,1.7rem);background:rgba(11,13,18,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(45,212,191,.2)} .barra .logotipo{--lg:30px;margin-right:auto} .barra nav{display:flex;gap:1.25rem;margin-right:.6rem} .barra nav a{font-size:.86rem;font-weight:500;text-decoration:none;color:var(--gris);transition:color .2s} .barra nav a:hover,.barra nav a[aria-current]{color:var(--crema)} @media (max-width:940px){.barra nav{display:none}} .menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;background:transparent;border:0;cursor:pointer;padding:0;flex:none} .menu-toggle span{display:block;width:21px;height:2px;background:var(--crema);border-radius:2px;transition:transform .3s,opacity .2s} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:940px){.menu-toggle{display:flex}.barra .btn-wa{display:none}} .menu-fondo{position:fixed;top:var(--barra);inset:var(--barra) 0 0 0;z-index:9993;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s} .menu-fondo.abierto{opacity:1;pointer-events:auto} .menu-movil{position:fixed;top:var(--barra);left:0;right:0;z-index:9994;background:#0B0D12;border-bottom:1px solid rgba(45,212,191,.2); display:flex;flex-direction:column;padding:.4rem clamp(1.1rem,5vw,3rem) 1.6rem;transform:translateY(-10px);opacity:0;pointer-events:none; transition:transform .25s,opacity .2s;max-height:calc(100svh - var(--barra));overflow-y:auto} .menu-movil.abierto{transform:translateY(0);opacity:1;pointer-events:auto} .menu-movil a:not(.btn){padding:.95rem 0;border-bottom:1px solid rgba(244,245,247,.08);color:var(--crema);text-decoration:none;font-family:var(--display);font-weight:700;font-size:1rem} .menu-movil .btn{margin-top:1.2rem;width:100%} @media (min-width:941px){.menu-fondo,.menu-movil{display:none}} /* ── BOTONES ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;font-family:var(--display);font-weight:700; font-size:clamp(.82rem,2.1vw,.94rem);line-height:1;padding:.9em 1.35em;border-radius:13px;text-decoration:none;border:0;cursor:pointer; transition:transform .2s,box-shadow .2s,background .2s,color .2s;letter-spacing:-.02em} .btn:hover{transform:translateY(-2px)} .btn-wa{background:linear-gradient(135deg,var(--acento-claro),var(--acento));color:#04211D;box-shadow:0 10px 30px rgba(45,212,191,.34)} .btn-linea{background:transparent;color:var(--texto-fuerte);border:1.5px solid var(--borde-fuerte)} .btn-linea:hover{border-color:var(--acento-txt);color:var(--acento-txt)} .btn-xl{font-size:clamp(.92rem,2.7vw,1.12rem);padding:1.05em 1.75em;border-radius:15px} /* ═══ HERO ═══════════════════════════════════════════════════════ Negro liso. Sin cuadricula, sin marca de agua, sin halo: Ricardo descarto las seis versiones con fondo. */ .hero{padding:calc(var(--barra) + clamp(1.5rem,4vw,2.6rem)) clamp(1.1rem,4vw,3rem) clamp(2.2rem,5vw,3.2rem); overflow:hidden;position:relative;background:var(--tinta);min-height:100svh;display:flex;align-items:center} .hero .caja{position:relative;z-index:2;width:100%} .hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:center} @media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:2.2rem}} .hero-marcas{display:flex;justify-content:space-between;align-items:center;gap:1rem; padding-bottom:clamp(1.2rem,2.6vw,1.9rem);margin-bottom:clamp(1.4rem,3vw,2.3rem);border-bottom:1px solid var(--borde)} @media (max-width:640px){.hero-marcas .oculta-movil{display:none} .hero-marcas{font-size:.56rem;letter-spacing:.14em} .hero-marcas span{white-space:nowrap}} .sello{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.1rem; font-family:var(--texto);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acento)} .sello::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acento); box-shadow:0 0 12px var(--acento);animation:late 2s ease-in-out infinite;flex:none} @keyframes late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}} .hero h1{text-transform:none} .hero h1 .punto{color:var(--acento)} .hero .parrafo{font-size:clamp(.98rem,2.2vw,1.1rem);color:#CDD2DF;margin-top:1.25rem;max-width:48ch} /* el kit solo define retraso hasta el 4o hijo del hero; con mas hijos, los siguientes salen con retraso 0 y aparecen ANTES que el titular */ .mk-hero--solo > *:nth-child(5){animation-delay:.7s} .mk-hero--solo > *:nth-child(6){animation-delay:.85s} /* ── LA CAJA: pega aqui tu pagina ── */ .caja-diag{margin-top:clamp(1.5rem,3.4vw,2.1rem);max-width:580px} /* flex-wrap + un ancho minimo real para el campo: si el boton no cabe, BAJA, en vez de estrujar el campo hasta cortar el texto ("...tu negoc") */ .caja-diag .campo{display:flex;flex-wrap:wrap;gap:.55rem;background:rgba(255,255,255,.05);border:1px solid var(--borde-fuerte); border-radius:16px;padding:.5rem;transition:border-color .25s,box-shadow .25s} .caja-diag .campo:focus-within{border-color:var(--acento);box-shadow:0 0 0 4px rgba(45,212,191,.14)} .caja-diag input{flex:1 1 17rem;min-width:0;background:transparent;border:0;outline:0;color:var(--crema); font-family:var(--texto);font-size:.98rem;padding:.75rem .5rem .75rem .85rem} .caja-diag input::placeholder{color:#7C8497} .caja-diag .btn{flex:1 1 auto} .caja-diag .pista{margin:.7rem 0 0;font-size:.78rem;color:var(--gris)} @media (max-width:520px){.caja-diag .campo{flex-direction:column;padding:.65rem} .caja-diag input{padding:.55rem .3rem}.caja-diag .btn{width:100%}} /* las tres cifras, como lecturas de instrumento */ .lecturas{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(1.1rem,3vw,2.4rem);justify-content:start; margin-top:clamp(1.7rem,3.6vw,2.4rem);padding-top:clamp(1.3rem,2.8vw,1.8rem);border-top:1px solid var(--borde)} @media (max-width:520px){.lecturas{grid-template-columns:repeat(3,1fr);gap:.7rem}} .lectura b{display:block;font-family:var(--display);font-size:clamp(1.45rem,4vw,2rem);color:var(--crema); letter-spacing:-.045em;line-height:1;white-space:nowrap} .lectura b .mk-counter{font:inherit;color:inherit;letter-spacing:inherit;display:inline} .lectura i{display:block;margin-top:.45rem;font-style:normal;font-size:.64rem;letter-spacing:.13em; text-transform:uppercase;color:var(--gris);line-height:1.45} @media (max-width:520px){.lectura i{letter-spacing:.06em;font-size:.58rem}} .hero-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem; margin-top:clamp(2rem,4.5vw,3rem);padding-top:clamp(1.2rem,2.8vw,1.7rem);border-top:1px solid var(--borde)} .hero-pie .dato b{display:block;font-family:var(--texto);font-weight:600;font-size:clamp(.85rem,1.9vw,.98rem); color:var(--crema);letter-spacing:-.01em;margin-bottom:.35rem} .hero-pie .flecha{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;white-space:nowrap; border-bottom:1px solid var(--acento);padding-bottom:.3rem;color:var(--acento);transition:gap .25s} .hero-pie .flecha:hover{gap:.85rem} @media (max-width:640px){.hero-pie{flex-direction:column;align-items:flex-start;gap:1.2rem}} /* ── el visor: la muestra real, encuadrada con corchetes ── */ .visor-col{justify-self:center;width:min(100%,326px)} .visor{position:relative} .visor-marco{position:relative;border-radius:26px;overflow:hidden;background:#0F131C; border:1px solid rgba(244,245,247,.14);box-shadow:0 34px 80px rgba(0,0,0,.66),0 0 0 8px rgba(255,255,255,.022)} .visor video{width:100%;display:block;aspect-ratio:540/978;object-fit:cover;background:#0F131C} .visor::before,.visor::after{content:"";position:absolute;width:clamp(26px,4vw,40px);height:clamp(26px,4vw,40px); border:2px solid var(--acento);pointer-events:none;z-index:5} .visor::before{top:-12px;left:-12px;border-right:0;border-bottom:0;border-radius:6px 0 0 0} .visor::after{bottom:-12px;right:-12px;border-left:0;border-top:0;border-radius:0 0 6px 0} .visor-dato{position:absolute;left:clamp(-22px,-2vw,-8px);bottom:clamp(40px,7vw,66px);z-index:4; background:rgba(8,10,15,.92);border:1px solid rgba(255,195,0,.45);border-radius:12px; padding:.62rem .88rem;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); box-shadow:0 14px 34px rgba(0,0,0,.62)} .visor-dato b{display:block;font-family:var(--display);font-size:clamp(1.3rem,3.2vw,1.7rem);color:var(--dorado); line-height:1;letter-spacing:-.045em} .visor-dato i{display:block;margin-top:.32rem;font-style:normal;font-size:.57rem;letter-spacing:.15em; text-transform:uppercase;color:var(--gris)} .visor-nota{margin:1rem 0 0;text-align:center;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)} /* ── cabecera corta de las paginas interiores ── */ .cabecera{padding:calc(var(--barra) + clamp(2.4rem,6vw,4rem)) clamp(1.1rem,5vw,3rem) clamp(2rem,5vw,3rem); background:var(--tinta);border-bottom:1px solid rgba(244,245,247,.11)} .cabecera h1{font-size:clamp(2rem,5.4vw,3.4rem);text-transform:none;margin-top:.4rem} .migas{display:flex;align-items:center;gap:.5rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)} .migas a{text-decoration:none;color:var(--acento)} /* ══ SERVICIOS ══ */ .servicios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.4rem);margin-top:clamp(2.2rem,5vw,3rem)} @media (max-width:880px){.servicios{grid-template-columns:1fr}} /* esquina cortada: el mismo lenguaje de encuadre tecnico de los corchetes del hero, aplicado a las fichas de servicio */ .servicio{position:relative;padding:clamp(1.5rem,3vw,2rem);border-radius:18px;border:1px solid var(--borde); background:linear-gradient(165deg,var(--superficie),var(--superficie-2));display:flex;flex-direction:column; transition:border-color .3s,transform .3s; clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)} .servicio:hover{border-color:rgba(45,212,191,.42);transform:translateY(-4px)} .servicio .num{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:1rem;font-family:var(--display); font-weight:700;font-size:.9rem;background:rgba(45,212,191,.14);border:1px solid rgba(45,212,191,.34);color:var(--acento-txt)} .servicio h3{margin-bottom:.45rem} /* la promesa: lo que el cliente CONSIGUE, antes que el precio */ .servicio .logro{margin:0 0 .9rem;font-weight:600;font-size:.95rem;color:var(--texto-fuerte);line-height:1.45} .servicio .logro::before{content:"→ ";color:var(--acento-txt)} .servicio p{margin:0 0 1rem;color:var(--texto-suave);font-size:.92rem} .servicio ul{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.5rem;flex:1} .servicio li{display:flex;gap:.55rem;align-items:flex-start;font-size:.88rem;color:var(--texto-suave)} .servicio li::before{content:"";flex:none;width:6px;height:6px;margin-top:.55em;border-radius:2px;transform:rotate(45deg);background:var(--acento-txt)} /* el precio va en CIAN, el color de la marca: es el dato que la gente busca con la mirada. Nunca en la misma frase que un dorado */ .servicio .precio-linea{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;margin-bottom:.2rem;color:var(--acento-txt)} .servicio .precio-nota{font-size:.76rem;color:var(--texto-tenue);margin:0 0 .9rem} .servicio .para-quien{margin:0 0 1.2rem;font-size:.84rem;font-style:italic;color:var(--texto-tenue);line-height:1.5} .servicio .btn{margin-top:auto} /* ══ REJILLA DE TARJETAS ══ */ .rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.7vw,1rem);margin-top:clamp(1.8rem,4vw,2.6rem)} @media (max-width:820px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:540px){.rejilla{grid-template-columns:1fr}} .tarjeta{background:linear-gradient(165deg,var(--superficie),var(--superficie-2));border:1px solid var(--borde);border-radius:16px; padding:clamp(1.05rem,2.1vw,1.35rem);transition:border-color .3s,transform .3s} .tarjeta:hover{border-color:rgba(45,212,191,.4);transform:translateY(-3px)} .tarjeta .ico{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;margin-bottom:.75rem; background:rgba(45,212,191,.13);border:1px solid rgba(45,212,191,.3);font-family:var(--display);font-weight:700;color:var(--acento-txt);font-size:.82rem} .tarjeta h3{margin-bottom:.35rem;font-size:1rem} .tarjeta p{margin:0;color:var(--texto-suave);font-size:.87rem} /* ══ QUE NO HACEMOS ══ */ .no-hacemos{max-width:820px;margin:clamp(2rem,4.4vw,2.8rem) auto 0;border:1px solid var(--borde-fuerte);border-radius:20px; padding:clamp(1.4rem,3.4vw,2.2rem);background:var(--superficie)} .no-hacemos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem} @media (max-width:720px){.no-hacemos ul{grid-template-columns:1fr}} .no-hacemos li{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;color:var(--texto-fuerte);font-weight:500} .no-hacemos li::before{content:"×";flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center; font-family:var(--display);font-size:.95rem;line-height:1;background:rgba(255,195,0,.16);color:var(--dorado); border:1px solid rgba(255,195,0,.4);margin-top:.05em} .claro .no-hacemos li::before{color:var(--dorado-tinta);background:rgba(255,195,0,.55);border-color:rgba(255,195,0,.9)} .no-hacemos .cierra{margin:1.3rem 0 0;font-size:.9rem;color:var(--texto-suave)} /* ══ PASOS ══ */ /* la flecha vive en su PROPIA columna del grid (no adivinada por porcentaje): asi siempre ocupa el espacio real que hay entre un circulo y el siguiente */ .stepper{display:grid;grid-template-columns:minmax(0,1fr) clamp(34px,6vw,72px) minmax(0,1fr) clamp(34px,6vw,72px) minmax(0,1fr); column-gap:clamp(.6rem,1.6vw,1.1rem);row-gap:2rem;margin-top:clamp(2.4rem,5vw,3.4rem);align-items:start} @media (max-width:820px){.stepper{grid-template-columns:1fr}} .stepper-flecha{align-self:start;margin-top:17px;height:14px;color:var(--dorado);filter:drop-shadow(0 0 8px rgba(255,195,0,.5))} .claro .stepper-flecha{color:#C99A00;filter:none} .stepper-flecha svg{width:100%;height:100%;display:block} @media (max-width:820px){.stepper-flecha{display:none}} .paso{position:relative;z-index:1;min-width:0;text-align:center} /* PILDORA, no circulo de ancho fijo: "$1,250" no cabe en 48px y se salia por los lados. min-width deja redondo lo corto ($0, 01, 02) y lo largo se ensancha */ .paso .nodo{width:fit-content;min-width:48px;height:48px;border-radius:999px;padding:0 .85rem;background:var(--fondo);border:2px solid var(--dorado);display:grid;place-items:center; font-family:var(--display);font-weight:700;color:var(--dorado);margin:0 auto 1.1rem;font-size:.9rem;box-shadow:0 0 0 6px rgba(255,195,0,.1);flex:none} .claro .paso .nodo{color:var(--dorado-tinta);background:var(--dorado);border-color:var(--dorado)} .paso h3{margin-bottom:.5rem} .paso p{margin:0;color:var(--texto-suave);font-size:.94rem} /* los dos circulos de la mitad, con su propia flecha chica en medio */ .icono-doble{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2vw,1rem);margin:0 auto 1.1rem;width:100%;max-width:300px} .icono-doble .nodo{margin-bottom:0} .icono-doble .stepper-flecha{align-self:center;margin-top:0;flex:1;min-width:20px;display:block} /* ══ TABLA DE PRECIOS ══ */ .tabla{width:100%;margin-top:clamp(1.4rem,3vw,2rem);border-collapse:collapse;font-size:.94rem} .tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .tabla th,.tabla td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--borde);vertical-align:top} .tabla th{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-tenue)} .tabla td b{color:var(--texto-fuerte)} .tabla tr:last-child td{border-bottom:0} .tabla .cifra{font-family:var(--display);font-size:1.05rem;color:var(--acento-txt);white-space:nowrap} /* ══ EQUIPO ══ Sin fotos y SIN juegos de color: es informacion seria. */ .equipo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.2rem);margin-top:clamp(2rem,4.4vw,2.6rem);max-width:920px;margin-inline:auto} @media (max-width:880px){.equipo{grid-template-columns:1fr;max-width:400px}} .persona{border-radius:16px;border:1px solid var(--borde);background:linear-gradient(168deg,var(--superficie),var(--superficie-2)); transition:border-color .3s,transform .3s} .persona:hover{border-color:rgba(45,212,191,.42);transform:translateY(-4px)} .persona-cuerpo{padding:1.25rem 1.3rem} .persona h3{margin-bottom:.2rem} .persona .rol{font-size:.72rem;color:var(--acento-txt);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .55rem} .persona p{margin:0;color:var(--texto-suave);font-size:.85rem} /* ══ CIERRE ══ */ .cierre{text-align:center;overflow:hidden} .cierre::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 58% 72% at 50% 55%,rgba(45,212,191,.2),transparent 72%);filter:blur(26px)} .cierre .caja{position:relative;z-index:1} .wa-grande{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,6.4vw,3.1rem);color:var(--texto-fuerte);text-decoration:none; display:inline-block;margin:1rem 0 .3rem;letter-spacing:-.045em} .wa-grande:hover{color:var(--acento)} /* ══ TEXTO LEGAL ══ */ .legal{max-width:760px;margin:0 auto;color:var(--texto-suave)} .legal h2{font-size:clamp(1.25rem,3vw,1.7rem);margin:2.6rem 0 .9rem} .legal h2:first-child{margin-top:0} .legal p,.legal li{font-size:.98rem;line-height:1.72} .legal ul{padding-left:1.1rem;margin:.8rem 0} .legal li{margin:.45rem 0} .legal a{color:var(--acento-txt)} .legal .fecha{font-size:.82rem;color:var(--texto-tenue);letter-spacing:.06em;text-transform:uppercase} /* ══ PIE ══ */ footer{background:#070910;border-top:1px solid rgba(244,245,247,.11);padding:clamp(2.2rem,5vw,3.2rem) clamp(1.1rem,5vw,3rem) 1.8rem;color:var(--gris)} .pie{width:100%;max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1.8rem;justify-content:space-between;align-items:flex-start} .pie h4{font-family:var(--display);font-weight:700;font-size:1rem;margin:0 0 .6rem;letter-spacing:-.03em;color:var(--crema)} .pie p,.pie a{margin:.3rem 0;color:var(--gris);font-size:.88rem;text-decoration:none} .pie a:hover{color:var(--acento)} .pie .logotipo{--lg:30px;margin-bottom:.9rem} .pie-legal{max-width:1180px;margin:2rem auto 0;padding-top:1.3rem;border-top:1px solid rgba(244,245,247,.08);font-size:.79rem;color:#6A7182; display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center} .pie-legal a{color:#6A7182;text-decoration:none} .pie-legal a:hover{color:var(--acento)} .pie-legal nav{display:flex;gap:1.2rem;flex-wrap:wrap} /* ══ NOTAS DE PRECIO ══ */ .notas{margin-top:clamp(1.6rem,3.4vw,2.2rem);border-left:3px solid var(--acento-txt);padding-left:clamp(1rem,2.4vw,1.5rem)} .notas h3{margin-bottom:.7rem} .notas ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem} /* li en flujo normal (NO flex): un a mitad de frase es un elemento propio, y en un contenedor flex se vuelve su ITEM APARTE en vez de fundirse con el texto de alrededor — el parrafo se parte en dos columnas torcidas. El marcador va con ::before posicionado, no como item del flex */ .notas li{position:relative;padding-left:1.05rem;font-size:.94rem;color:var(--texto-suave);line-height:1.6} .notas li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:2px;transform:rotate(45deg);background:var(--acento-txt)} .notas li b{color:var(--texto-fuerte)} .letra-chica{margin:clamp(1.8rem,3.6vw,2.4rem) 0 0;font-size:.83rem;line-height:1.65;color:var(--texto-tenue);max-width:74ch} .letra-chica b{color:var(--texto-suave)} /* ══ CIERRE · VARIANTES ═════════════════════════════════════════ El mismo mensaje en las tres paginas se veia calcado. Cada una lo dice igual pero con otra forma. */ /* servicios: banda a dos columnas, alineada a la izquierda, sin halo */ .cierre--banda{text-align:left} .cierre--banda::before{display:none} .banda{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.6rem,4vw,3rem);align-items:center; border:1px solid var(--borde-fuerte);border-radius:26px;padding:clamp(1.6rem,4vw,3rem); background:linear-gradient(150deg,rgba(45,212,191,.09),rgba(255,255,255,.02))} @media (max-width:860px){.banda{grid-template-columns:1fr;gap:1.6rem}} .banda h2{font-size:clamp(1.5rem,3.6vw,2.4rem)} .banda .parrafo{margin-top:.9rem} .banda-accion{display:flex;flex-direction:column;gap:.7rem; border-left:2px solid var(--acento);padding-left:clamp(1rem,2.4vw,1.6rem)} @media (max-width:860px){.banda-accion{border-left:0;border-top:2px solid var(--acento);padding:1.3rem 0 0}} .banda-accion .tel{font-family:var(--display);font-size:clamp(1.35rem,3.4vw,1.9rem);letter-spacing:-.04em; color:var(--texto-fuerte);text-decoration:none;line-height:1} .banda-accion .tel:hover{color:var(--acento)} .banda-accion .nota{margin:0;font-size:.82rem;color:var(--texto-tenue)} /* precios: tarjeta estrecha centrada, con cinta de color arriba */ .cierre--tarjeta::before{display:none} .tarjeta-cierre{max-width:620px;margin:0 auto;position:relative;overflow:hidden; border:1px solid var(--borde-fuerte);border-radius:24px;padding:clamp(1.8rem,4vw,2.8rem); background:var(--superficie);text-align:center} .tarjeta-cierre::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--acento),var(--acento-claro))} .tarjeta-cierre h2{font-size:clamp(1.4rem,3.4vw,2.1rem)} .tarjeta-cierre .tel{display:inline-block;margin:1.2rem 0 .2rem;font-family:var(--display); font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:-.04em;color:var(--acento);text-decoration:none} .tarjeta-cierre .tel:hover{color:var(--acento-claro)} .tarjeta-cierre .botones{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.4rem} /* ══ LAS DOS OPCIONES · comparativa de decision, no de precio ══ */ .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(2rem,4.4vw,2.8rem)} @media (max-width:860px){.duo{grid-template-columns:1fr}} .opcion{border:1px solid var(--borde);border-radius:20px;padding:clamp(1.4rem,3vw,2rem); background:linear-gradient(165deg,var(--superficie),var(--superficie-2));display:flex;flex-direction:column} .opcion .etiqueta{display:inline-flex;align-self:flex-start;align-items:center;gap:.45rem;margin-bottom:.9rem; font-family:var(--texto);font-weight:700;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase; color:var(--acento-txt);border:1px solid var(--acento-txt);border-radius:999px;padding:.35em .9em} .opcion h3{font-size:clamp(1.15rem,2.6vw,1.45rem);margin-bottom:.5rem} .opcion .frase{margin:0 0 1.2rem;font-size:.95rem;color:var(--texto-suave);line-height:1.55} /* la rejilla pregunta / respuesta: se lee como una ficha, no como tabla */ .opcion dl{margin:0;padding:1.1rem 0 0;border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:.85rem;flex:1} .opcion dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-tenue);margin-bottom:.2rem} .opcion dd{margin:0;font-size:.92rem;color:var(--texto-fuerte);font-weight:500;line-height:1.45} .opcion .pie-precio{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--borde); display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem} .opcion .pie-precio b{font-family:var(--display);font-size:1.25rem;letter-spacing:-.03em;color:var(--acento-txt)} .opcion .pie-precio a{font-size:.82rem;color:var(--texto-tenue)} /* ══ QUÉ LLEVA TU PÁGINA · lista de contenido del servicio ══ */ .lleva{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(2rem,4.4vw,2.8rem)} @media (max-width:900px){.lleva{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){.lleva{grid-template-columns:1fr}} /* Fichas tintadas con el color de la marca y un numero grande de fondo. A proposito NO son la misma tarjeta gris de las otras secciones: aqui el color es el que hace el trabajo, para que se vea joven y no tan serio. Van alternando cian y dorado FICHA a FICHA — nunca los dos dentro de una misma, que es la regla de color de Ricardo. */ .lleva article{position:relative;overflow:hidden;padding:1.5rem 1.3rem 1.4rem;border-radius:20px; background:linear-gradient(158deg,rgba(45,212,191,.14),rgba(45,212,191,.02)); border:1px solid rgba(45,212,191,.28);transition:transform .3s,border-color .3s,box-shadow .3s} .lleva article:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.55);box-shadow:0 14px 34px rgba(45,212,191,.14)} /* el numero grande va ABAJO a la derecha: arriba obligaba a dejarle un hueco al titulo y partia en dos las frases largas ("Tu carta o tu / catalogo") */ .lleva article::before{content:attr(data-n);position:absolute;bottom:-.26em;right:.04em;pointer-events:none; font-family:var(--display);font-size:4.4rem;line-height:1;letter-spacing:-.05em;color:var(--acento-txt);opacity:.16} .claro .lleva article::before{opacity:.2} /* las pares, en dorado */ .lleva article:nth-child(2n){background:linear-gradient(158deg,rgba(255,195,0,.15),rgba(255,195,0,.02));border-color:rgba(255,195,0,.34)} .lleva article:nth-child(2n):hover{border-color:rgba(255,195,0,.62);box-shadow:0 14px 34px rgba(255,195,0,.14)} .lleva article:nth-child(2n)::before{color:var(--dorado);opacity:.26} .claro .lleva article:nth-child(2n)::before{color:#C99A00;opacity:.3} /* position:relative para que el texto quede POR ENCIMA del numero de fondo */ .lleva h3{position:relative;font-size:1.02rem;margin-bottom:.4rem} .lleva p{position:relative;margin:0;font-size:.9rem;color:var(--texto-suave);line-height:1.55}