/* ========================================================================== RIMA CONSULTING — Hoja de estilos global Destino: este archivo es el que se pega en global.css de Wix Studio. Paleta y tipografias segun Cuaderno de Marca (julio 2026). ========================================================================== */ /* ---------- Tipografias alojadas en nuestro servidor ---------- Antes se cargaban desde Google Fonts. Se trajeron aqui por dos motivos: bloqueaban el pintado de la pagina 1.460 ms en movil, y enviaban la IP del visitante a un tercero. Ahora no hay ninguna peticion externa en toda la web. font-display:swap muestra el texto con una tipografia del sistema mientras llega la definitiva, en vez de dejar la pagina en blanco. Los subconjuntos 'ext' cubren acentos y caracteres que el basico no trae; el navegador solo descarga el que necesita segun unicode-range. */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap; src:url('../fonts/montserrat-300.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap; src:url('../fonts/montserrat-ext-300.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/montserrat-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/montserrat-ext-400.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/montserrat-500.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/montserrat-ext-500.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/montserrat-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/montserrat-ext-600.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/playfair-500.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/playfair-ext-500.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/playfair-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/playfair-ext-600.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/playfair-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/playfair-ext-700.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* Tipografia de kosmo. Cuaderno de marca 2.0 (agosto 2026): Figtree, familia unica para todo. Solo se trae el peso 700, que es el que el cuaderno reserva para el logotipo y los titulares grandes, que es justo lo que hay aqui. Sustituye a Space Grotesk, que era la del cuaderno 1.0. */ @font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/figtree-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/figtree-ext-700.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ /* Paleta de marca */ --antracita:#121212; /* fondo oscuro. El negro puro se evita */ --blanco-roto:#F8F7F2; --oro:#C8AF78; /* solo acentos, nunca fondo grande */ --piedra:#4A4A47; --oro-suave:rgba(200,175,120,.16); --linea:rgba(200,175,120,.28); /* Escala de texto sobre fondo oscuro — contraste WCAG verificado sobre #121212 No usar --piedra sobre oscuro: da 1.6:1 y es ilegible. */ --sobre-oscuro-1:#E8E5DD; /* principal · 14.9:1 · AAA */ --sobre-oscuro-2:#BFBAB0; /* secundario · 9.7:1 · AAA */ --sobre-oscuro-3:#97928A; /* terciario · 6.1:1 · AA */ --serif:'Playfair Display',Georgia,serif; --sans:'Montserrat',system-ui,-apple-system,sans-serif; --maxw:1180px; --r:2px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--blanco-roto);color:var(--antracita);font-family:var(--sans); font-weight:400;line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .narrow{max-width:860px} h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.01em} h1{font-size:clamp(2.1rem,5vw,3.6rem)} h2{font-size:clamp(1.6rem,3.3vw,2.4rem);margin-bottom:1rem} h3{font-size:1.15rem;margin-bottom:.45rem} p{margin-bottom:1rem} a{color:inherit} .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase; color:var(--oro);margin-bottom:.9rem;display:block} .lead{font-size:1.1rem;color:var(--piedra)} section{padding:clamp(56px,6.5vw,92px) 0} /* Toda seccion de fondo oscuro hereda la misma escala de texto */ .local,.forwho,.exclusive,.cta,.langs,.clients,footer{color:var(--sobre-oscuro-1)} .local h2,.local h3,.forwho h2,.forwho h3, .exclusive h2,.cta h2,.langs h2,.clients h2{color:var(--sobre-oscuro-1)} .local p,.local .lead,.forwho p,.forwho .lead, .exclusive p,.cta p,.langs p{color:var(--sobre-oscuro-2)} /* ---------- Cabecera ---------- */ header{position:sticky;top:0;z-index:60;background:rgba(18,18,18,.94); backdrop-filter:blur(12px);border-bottom:1px solid rgba(200,175,120,.16)} nav{display:flex;align-items:center;justify-content:space-between;height:88px; max-width:var(--maxw);margin:0 auto;padding:0 28px} /* Cabecera: solo el logotipo de texto (ratio 3,47). El isotipo con el cuchillo se reserva para el pie, donde hay sitio para que se aprecie. */ nav img{height:38px;width:auto;display:block} .nav-links{display:flex;gap:30px;list-style:none} .nav-links a{color:#cfcdc7;text-decoration:none;font-size:.85rem;font-weight:500;transition:color .2s} .nav-links a:hover{color:var(--oro)} /* Boton de la cabecera: contorno de oro sobre fondo transparente y forma de pastilla. El oro macizo lo convertia en el elemento mas pesado de la barra y competia con el boton real de cada pagina, que es el que debe ganar. */ .nav-cta{background:transparent;color:var(--oro)!important;padding:10px 24px; border:1px solid rgba(200,175,120,.5);border-radius:999px;font-weight:600; font-size:.8rem;letter-spacing:.02em;text-decoration:none;transition:.25s;white-space:nowrap} .nav-cta:hover{background:rgba(200,175,120,.12);border-color:var(--oro)} /* La misma llamada, dentro del desplegable del movil */ .solo-movil{display:none} .burger{display:none;background:none;border:0;color:var(--oro);font-size:1.5rem;cursor:pointer} /* ---------- Hero ---------- */ .hero{position:relative;color:var(--blanco-roto); padding:clamp(80px,10vw,130px) 0 clamp(70px,8vw,105px);overflow:hidden} .hero::before{content:'';position:absolute;inset:0;background-size:cover; background-position:center;background-repeat:no-repeat;transform:scale(1.04)} .hero::after{content:'';position:absolute;inset:0; background:linear-gradient(105deg,rgba(18,18,18,.94) 0%,rgba(18,18,18,.82) 46%,rgba(18,18,18,.44) 100%)} .hero .wrap{position:relative;z-index:2} .hero-inner{max-width:800px} .hero h1{margin-bottom:1.3rem} .hero h1 em{font-style:normal;color:var(--oro)} .hero p{font-size:1.14rem;color:var(--sobre-oscuro-1);max-width:610px} .hero-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:2.1rem;align-items:center} .hero-note{font-size:.83rem;color:var(--sobre-oscuro-2);margin-top:1.4rem} .btn{display:inline-block;padding:16px 34px;border-radius:var(--r);font-weight:600; font-size:.92rem;text-decoration:none;transition:.25s;border:1px solid transparent;cursor:pointer} .btn-primary{background:var(--oro);color:var(--antracita)} .btn-primary:hover{background:#d8c191;transform:translateY(-2px)} .btn-ghost{border-color:rgba(248,247,242,.34);color:var(--blanco-roto)} .btn-ghost:hover{border-color:var(--oro);color:var(--oro)} /* ---------- Miga de pan ---------- */ /* La miga de pan hereda el color de la seccion que va DEBAJO, para que no quede una franja suelta entre dos bloques. */ .bc-band{background:var(--antracita)} .bc-band.claro{background:var(--blanco-roto)} .bc-band.claro .bc,.bc-band.claro .bc a{color:#7c776f} .bc-band.claro .bc a:hover{color:#96793c} .bc-band.claro .bc span{color:var(--piedra)} .bc-band.crema{background:#efece4} .bc-band.crema .bc,.bc-band.crema .bc a{color:#7c776f} .bc-band.crema .bc a:hover{color:#96793c} .bc-band.crema .bc span{color:var(--piedra)} .bc{font-size:.75rem;color:var(--sobre-oscuro-3);padding:20px 0 4px} .bc a{color:var(--sobre-oscuro-3);text-decoration:none;transition:color .2s} .bc a:hover{color:var(--oro)} .bc span{color:var(--sobre-oscuro-2)} /* ---------- Bloques de fondo oscuro ---------- IMPORTANTE: toda clase que aparezca en la lista de "secciones de fondo oscuro" de arriba DEBE declarar aqui su background. Si hereda el texto claro pero no el fondo, queda texto casi blanco sobre blanco. */ .local,.forwho{background:var(--antracita);padding-top:clamp(44px,5vw,68px)} /* min(Xpx,100%) en vez de Xpx: sin esto la rejilla exige mas ancho del que hay en un movil de 320px y provoca scroll horizontal. */ .local-grid,.fw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:1px;background:rgba(200,175,120,.2);border:1px solid rgba(200,175,120,.2);margin-top:2.2rem} .local-item,.fw-item{background:#191919;padding:30px 28px} .local-item .tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase; color:var(--oro);font-weight:600;display:block;margin-bottom:12px} .local-item p,.fw-item p{font-size:.92rem;margin-bottom:0} .fw-item h3{font-size:1.08rem} /* ---------- Tarifas ---------- Las cifras salen de la propuesta de colaboracion que Ricardo envia a cliente: sesion suelta 250 EUR y packs decrecientes hasta 200 EUR/sesion. La escalera se muestra entera a proposito: ver bajar el precio por sesion cambia la pregunta del visitante, de "cuanto cuesta" a "cuantas necesito". */ .tarifas{background:#efece4} .tar-lista{list-style:none;margin:2rem 0 0;padding:0;max-width:640px} /* Columnas de ancho fijo, no automatico. Cada
  • es su propia rejilla, asi que con 'auto' cada fila medía sus columnas por separado y los importes no se alineaban entre si: los simbolos de euro bailaban hasta 6 px. En una lista de precios eso se nota. Medido en la web publicada. */ .tar-lista li{display:grid;grid-template-columns:1fr 8ch 11ch;gap:12px 20px; align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(74,74,71,.18)} .tar-lista li:last-child{border-bottom:0} .tar-lista .tar-q{font-weight:600} .tar-lista .tar-p{font-family:var(--serif);font-size:1.35rem;color:var(--antracita); white-space:nowrap;text-align:right} .tar-lista .tar-u{color:var(--piedra);font-size:.86rem;white-space:nowrap;min-width:9ch; text-align:right} .tar-destacada{margin-top:1.6rem;padding:18px 22px;background:var(--oro-suave); border-left:2px solid var(--oro);max-width:640px} .tar-destacada strong{font-weight:600} .tar-nota{margin-top:1.1rem;font-size:.86rem;color:var(--piedra);max-width:640px} @media(max-width:560px){ .tar-lista li{grid-template-columns:1fr 8ch} .tar-lista .tar-u{grid-column:2;text-align:right;min-width:0} } /* ---------- Fases del servicio ---------- */ .phase{display:grid;grid-template-columns:78px 1fr;gap:26px;padding:30px 0; border-bottom:1px solid rgba(74,74,71,.15)} .phase:last-child{border-bottom:0} .phase-n{font-family:var(--serif);font-size:2.2rem;color:var(--oro);line-height:1;font-weight:600} .phase-n small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.16em; text-transform:uppercase;color:var(--piedra);margin-top:8px;font-weight:600} .phase h3{font-size:1.25rem;margin-bottom:.5rem} .phase>div>p{color:var(--piedra);font-size:.97rem;margin-bottom:0;max-width:76ch} .phase ul{margin:.7rem 0 0;padding-left:1.1rem;color:var(--piedra);font-size:.94rem} .phase li{margin-bottom:.3rem} .phase-lg{grid-template-columns:96px 1fr;gap:30px;padding:42px 0} .phase-lg .phase-n{font-size:2.6rem} .phase-lg h3{font-size:1.42rem;margin-bottom:.6rem} .deliver{margin-top:1.4rem;border-left:2px solid var(--oro);padding:2px 0 2px 22px} .deliver b{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--oro); display:block;margin-bottom:.6rem} .deliver ul{list-style:none;display:grid;gap:.45rem;margin:0;padding:0} .deliver li{font-size:.95rem;color:var(--piedra);padding-left:18px;position:relative} .deliver li::before{content:'';position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--oro)} /* ---------- Resultado ---------- */ .outcome{background:#efece4} .out-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:16px 40px;margin-top:2rem;list-style:none} .out-list li{padding-left:30px;position:relative;font-size:1rem} .out-list li::before{content:'';position:absolute;left:0;top:11px;width:14px;height:1px;background:var(--oro)} /* ---------- Banda intermedia ---------- */ .band{background:var(--antracita);color:var(--sobre-oscuro-1);padding:clamp(48px,5vw,64px) 0} .band-in{display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap} .band h2{color:var(--sobre-oscuro-1);margin-bottom:.4rem;font-size:clamp(1.4rem,2.6vw,1.95rem)} .band p{color:var(--sobre-oscuro-2);margin-bottom:0;max-width:52ch;font-size:.98rem} /* ---------- Diferencial ---------- */ .exclusive{background:var(--antracita);text-align:center} .exclusive .wrap{max-width:800px} .exclusive h2{font-size:clamp(1.8rem,4vw,2.8rem)} .exclusive p{font-size:1.06rem;max-width:66ch;margin-left:auto;margin-right:auto} .pm{background:#efece4} .pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center} .pm blockquote{font-family:var(--serif);font-size:1.5rem;line-height:1.42; border-left:2px solid var(--oro);padding-left:26px} /* ---------- Clientes ---------- Los logos de cliente son CLAROS: van siempre sobre fondo oscuro. Alturas calculadas combinando caja y densidad de tinta, ancladas a Carina=73px: igualar la altura de archivo no iguala el peso optico. */ /* Banda, no seccion. El relleno vertical baja de 56-92 px a 24-32 px: nueve logos ajenos no sostienen el peso de una seccion completa, y con el aire de una se leia como un bloque que interrumpe en vez de un aval que acompana. */ .clients{background:var(--antracita);text-align:center;padding:clamp(24px,2.6vw,32px) 0} .clients .eyebrow{margin-bottom:0} /* El enlace vuelve debajo y centrado. Lo que engordaba la banda no era el enlace sino su margen de 2,8 rem: con 16 px cumple la misma funcion. */ .clients-mas{margin:16px 0 0;font-size:.86rem} .clients-mas a{color:var(--oro);font-weight:600;text-decoration:none; border-bottom:1px solid rgba(200,175,120,.5);padding-bottom:2px;transition:.2s} .clients-mas a:hover{border-bottom-color:var(--oro)} /* La fila es un contenedor de scroll horizontal real, no una animacion CSS. Asi se puede arrastrar con el dedo o con el raton, y rima.js se limita a empujarla despacio cuando nadie la toca. El grupo de logos va repetido tres veces para que el bucle sea continuo en ambas direcciones. */ .client-marquee{overflow-x:auto;overscroll-behavior-x:contain;margin-top:14px; scrollbar-width:none;-ms-overflow-style:none;cursor:grab; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .client-marquee::-webkit-scrollbar{display:none} .client-marquee.arrastrando{cursor:grabbing} .client-row{display:flex;flex-wrap:nowrap;align-items:center;width:max-content; gap:clamp(38px,4.5vw,60px)} .client-set{display:flex;align-items:center;flex-shrink:0;gap:clamp(38px,4.5vw,60px)} .client-row a{display:inline-flex;align-items:center;transition:transform .25s} .client-row a:hover{transform:translateY(-3px)} .client-row img{width:auto;display:block;transition:opacity .25s} .client-row a:hover img{opacity:.82} .client-row a[data-l='atemporal'] img{height:72px} .client-row a[data-l='azul'] img{height:64px} .client-row a[data-l='carina'] img{height:73px} .client-row a[data-l='gallego-playa'] img{height:86px} .client-row a[data-l='in-bocca-al-lupo'] img{height:50px} .client-row a[data-l='kentucky'] img{height:41px} .client-row a[data-l='nou-lloc-de-joc'] img{height:72px} .client-row a[data-l='soho'] img{height:58px} .client-row a[data-l='teselas'] img{height:54px} .client-row a[data-l='vamora-ver'] img{height:86px} /* ---------- Zonas de servicio ---------- Ciudades con y sin landing se ven EXACTAMENTE igual. La unica diferencia es que unas navegan al hacer clic. */ .zones{background:#efece4} .zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));gap:20px;margin-top:2rem} .zone{background:var(--blanco-roto);border:1px solid rgba(74,74,71,.12); padding:22px 22px 19px;border-radius:var(--r);transition:.25s} .zone:hover{border-color:var(--linea);transform:translateY(-3px)} .zone h3{font-size:1.02rem;margin-bottom:.7rem} .zone h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--oro)} .zone ul{list-style:none;display:flex;flex-wrap:wrap;gap:5px} .zone li a,.zone li span{font-size:.755rem;padding:3px 9px;border-radius:var(--r); display:inline-block;line-height:1.45;color:var(--piedra);text-decoration:none; border:1px solid rgba(74,74,71,.2);transition:.2s} .zone:hover li a,.zone:hover li span{border-color:rgba(200,175,120,.5)} /* ---------- Idiomas ---------- */ .langs{background:var(--antracita)} .lang-in{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center} .langs h2{font-size:clamp(1.4rem,2.6vw,1.95rem);margin-bottom:.5rem} .langs p{margin-bottom:0;max-width:60ch;font-size:.98rem} .lang-links{display:flex;gap:10px;flex-wrap:wrap} .lang-links a{font-size:.84rem;color:var(--sobre-oscuro-1);text-decoration:none; border:1px solid rgba(200,175,120,.34);padding:9px 18px;border-radius:var(--r); transition:.22s;white-space:nowrap} .lang-links a:hover{border-color:var(--oro);color:var(--oro);background:rgba(200,175,120,.08)} /* ---------- Acordeon FAQ ---------- */ details{border-bottom:1px solid rgba(74,74,71,.16);padding:22px 0} details summary{font-family:var(--serif);font-size:1.1rem;cursor:pointer;list-style:none; display:flex;justify-content:space-between;gap:20px;align-items:flex-start} details summary::-webkit-details-marker{display:none} details summary::after{content:'+';color:var(--oro);font-size:1.4rem;line-height:1; flex-shrink:0;transition:transform .25s} details[open] summary::after{transform:rotate(45deg)} details p{margin:14px 0 0;color:var(--piedra);font-size:.96rem;max-width:82ch} /* ---------- Llamada a la accion y formulario ---------- */ .cta{background:var(--antracita);border-top:1px solid rgba(200,175,120,.16)} .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5vw,76px);align-items:start} form{display:grid;gap:15px} label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oro); font-weight:600;margin-bottom:6px;display:block} input,select,textarea{width:100%;background:rgba(248,247,242,.05); border:1px solid rgba(200,175,120,.25);color:var(--blanco-roto);padding:14px 16px; border-radius:var(--r);font-family:var(--sans);font-size:.94rem;transition:border-color .2s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--oro)} /* ---------- Foco de teclado ---------- Los campos del formulario llevaban outline:none y lo unico que quedaba al enfocarlos era el borde de 1 px pasando de oro al 25 % a oro pleno. Es un cambio demasiado sutil para saber donde estas navegando con el teclado, y el formulario es el unico canal por el que entran clientes. Se usa :focus-visible y no :focus para que el anillo aparezca al tabular pero no al hacer clic con el raton, que es lo que motivo aquel outline:none. El color es currentColor y no el oro de marca a proposito: el oro sobre el fondo claro de la seccion de zonas (#efece4) da 1,9:1 y seria invisible. currentColor hereda el color del propio texto, que en cada seccion ya esta elegido para contrastar con su fondo. */ :focus-visible{outline:2px solid currentColor;outline-offset:3px} /* Los campos repiten el outline entero, no solo el desplazamiento. La regla generica :focus-visible tiene menos especificidad que input:focus, asi que el outline:none de arriba ganaba y los campos seguian sin anillo. Probado sobre la web publicada: con solo outline-offset, el navegador devolvia "outline: none" en los cuatro campos. */ input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--oro);outline-offset:1px} /* En un boton relleno el anillo se dibuja FUERA, y su color —el del texto, antracita— quedaria invisible sobre el fondo oscuro de la portada. Se dibuja dentro del propio boton, donde el antracita sobre oro da 9:1. */ .btn-primary:focus-visible{outline-offset:-5px} textarea{min-height:96px;resize:vertical} ::placeholder{color:var(--sobre-oscuro-3);opacity:1} select option{background:var(--antracita)} .form-note{font-size:.78rem;color:var(--sobre-oscuro-3);margin-top:2px} .contact-inline{display:flex;gap:30px;flex-wrap:wrap;margin-top:2rem;padding-top:1.6rem; border-top:1px solid rgba(200,175,120,.2)} .contact-inline strong{display:block;font-size:1.02rem;color:var(--oro);font-family:var(--serif)} .contact-inline span{font-size:.77rem;color:var(--sobre-oscuro-3)} /* ---------- Pie ---------- */ footer{background:#0d0d0d;color:var(--sobre-oscuro-2);padding:56px 0 32px;font-size:.86rem} footer p{color:var(--sobre-oscuro-2)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:34px; border-bottom:1px solid rgba(200,175,120,.14)} .foot-logo{display:inline-block;margin-bottom:22px} footer img{height:120px;width:auto;display:block} .social{display:flex;gap:12px;margin-top:20px} .social a{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center; border:1px solid rgba(200,175,120,.32);border-radius:50%;color:var(--sobre-oscuro-2); transition:.25s} .social a:hover{border-color:var(--oro);color:var(--oro);background:rgba(200,175,120,.1)} .social svg{width:19px;height:19px;fill:currentColor;display:block} footer h2{font-family:var(--sans);color:var(--oro);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; margin-bottom:14px;font-weight:600} footer ul{list-style:none;display:grid;gap:8px} footer a{color:var(--sobre-oscuro-2);text-decoration:none;transition:color .2s} footer a:hover{color:var(--oro)} /* justify-content:flex-start, no space-between: el copyright y los enlaces legales van juntos, uno al lado del otro. Con space-between se separaban a los dos extremos de la tira y los legales acababan pegados al borde derecho, lejos del texto al que pertenecen. */ .foot-bottom{padding-top:24px;display:flex;justify-content:flex-start;gap:24px; flex-wrap:wrap;align-items:flex-end;font-size:.79rem;color:var(--sobre-oscuro-3)} .foot-bottom a{color:var(--sobre-oscuro-3)} /* ---------- Cierre del pie: dos columnas ---------- A la izquierda, la linea de kosmo y la del copyright, una debajo de otra. A la derecha, el sello de Renace, con su base alineada a la del copyright. Antes el sello iba con position:absolute y provoco dos fallos seguidos: el texto de kosmo se metia por debajo y despues los enlaces legales acabaron justo detras del sello. Un elemento fuera del flujo no reserva sitio, asi que 'space-between' empujaba el ultimo elemento contra el borde derecho. Con dos columnas de verdad el solapamiento no puede ocurrir. */ .foot-cierre{display:flex;align-items:flex-end;gap:clamp(24px,3vw,44px)} .foot-cierre-txt{flex:1 1 auto;min-width:0} @media(max-width:700px){ /* En movil, uno debajo del otro y todo alineado a la izquierda. */ .foot-cierre{flex-direction:column;align-items:flex-start;gap:18px} .foot-cierre-txt{width:100%} } /* ---------- Sello de autoria de Renace ---------- Reglas tomadas de su manual de identidad, no inventadas: · va en el pie, alineado a la derecha, nunca compitiendo con la marca del cliente; · 56-90 px de diametro en escritorio y 48 en movil, que es su minimo absoluto: por debajo el texto del anillo deja de leerse; · area de respeto de medio disco por los cuatro lados, de ahi los margenes; · version en negativo, porque el pie de RIMA Consulting es oscuro. Se elige 60 px: dentro de su rango y en la parte discreta. El menta (#7CCFA9) es el unico verde de toda la web y aparece solo aqui. Su propio manual lo autoriza: "en proyectos de cliente manda la marca del cliente; menta aparece solo en el sello del pie". */ .sello-renace{display:inline-flex;flex:0 0 auto; padding:0;line-height:0;opacity:.85;transition:opacity .25s} .sello-renace:hover,.sello-renace:focus-visible{opacity:1} .sello-renace img{width:60px;height:60px;display:block} /* ---------- Bloque de kosmo ---------- kosmo es otra marca, no un cuarto servicio de RIMA Consulting, y el diseno tiene que decirlo antes que el texto: fondo #131215 (el neutro templado de su cuaderno, que tira a marron donde el antracita tira a neutro), acento violeta y Figtree. Con el oro de RIMA Consulting parecería un servicio propio y confundiria a quien viene buscando una apertura. */ .kosmo{background:#131215;color:#EDECEF;padding:clamp(38px,4.2vw,56px) 0; border-top:1px solid rgba(168,124,240,.22);border-bottom:1px solid rgba(168,124,240,.22)} /* Una sola columna: el panel lateral se retiro y el texto ocupa todo el ancho */ .k-grid{display:block} /* El cuaderno de kosmo exige zona de respeto de un ancho de asta (13 de cada 100 unidades de alto) por los cuatro lados: a 62 px son 8, y aqui hay 20. */ .k-marca{display:flex;align-items:center;gap:20px;margin-bottom:1.5rem} .k-marca svg{width:62px;height:62px;color:#FFFFFF;flex-shrink:0} .k-marca b{font-family:'Figtree',var(--sans);font-weight:700;font-size:3.1rem; letter-spacing:-.015em;line-height:1;display:block} .k-firma{display:block;font-size:.76rem;color:#A3A0A8;letter-spacing:.05em;margin-top:11px} .kosmo .eyebrow{color:#A87CF0;margin-bottom:.55rem} .kosmo h2{font-family:'Figtree',var(--sans);font-weight:700;color:#EDECEF; font-size:clamp(1.3rem,2.3vw,1.68rem);letter-spacing:-.015em;line-height:1.26;margin-bottom:.8rem} .kosmo p{color:#A3A0A8;font-size:.93rem;line-height:1.62;margin-bottom:0} .k-cta{display:inline-block;margin-top:1.3rem;font-size:.85rem;font-weight:600;color:#A87CF0; text-decoration:none;border:1px solid rgba(168,124,240,.38);border-radius:999px; padding:10px 21px;transition:.25s;background:rgba(168,124,240,.06)} .k-cta:hover{background:rgba(168,124,240,.16);border-color:#A87CF0} /* Mencion de kosmo dentro de una pagina de fondo claro. El logotipo en negro sobre el crema quedaba apagado y se confundia con el texto. Metido en una pastilla violeta con la marca en blanco, funciona como una insignia: se reconoce como marca ajena de un vistazo. */ .k-badge-fila{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:1.6rem} .k-badge{display:inline-flex;align-items:center;gap:8px;background:#6D3FE0; border-radius:10px;padding:9px 14px;text-decoration:none} .k-badge svg{width:18px;height:18px;color:#FFFFFF;flex-shrink:0} .k-badge b{font-family:'Figtree',var(--sans);font-weight:700;font-size:.92rem; color:#FFFFFF;line-height:1;letter-spacing:-.015em} a.k-badge{transition:.25s} a.k-badge:hover{background:#5A2FCC} /* Sin borde superior a proposito: .foot-grid ya cierra con su propio borde inferior y aqui se dibujaba una segunda linea 20 px mas abajo. Mientras las dos ocupaban el ancho completo pasaba por un doble filete; al reestructurar el pie en dos columnas, esta quedo dentro de la columna de texto —1021 px frente a los 1124 de la otra— y se veia como un error. Una sola linea. */ .k-pie{display:flex;align-items:center;gap:10px;padding-top:26px; font-size:.8rem;color:var(--sobre-oscuro-3)} /* El disco de kosmo: 22 px frente a los 17 del glifo suelto anterior, un 29 % mas, que es lo que pidio Ricardo. Sigue muy por debajo del sello de Renace (60 px), que es el credito de autoria y debe pesar mas. El disco ya trae su propio color, asi que aqui no se fija 'color'. */ .k-pie svg{width:22px;height:22px;flex-shrink:0} .k-disco{display:inline-flex;line-height:0;flex-shrink:0;border-radius:50%; transition:transform .25s} .k-disco:hover,.k-disco:focus-visible{transform:scale(1.08)} .k-pie a{color:var(--sobre-oscuro-2);text-decoration:none;font-weight:600} .k-pie a:hover{color:#A87CF0} .k-pie b{font-family:'Figtree',var(--sans);font-weight:700} @media(max-width:900px){ .k-marca{gap:15px;margin-bottom:1.2rem} .k-marca svg{width:48px;height:48px} .k-marca b{font-size:2.4rem} } /* ---------- Enlace de texto sobre fondo claro ---------- */ .link-oro{color:#96793c;font-weight:600;text-decoration:none; border-bottom:1px solid var(--oro);padding-bottom:2px;font-size:.94rem} /* ---------- Responsive ---------- */ @media(max-width:900px){ /* Escala tipografica del movil, un 9 % por debajo del escritorio. Se toca la raiz y no cada regla: todo lo definido en rem baja a la vez y las proporciones entre titulo, texto y nota se mantienen intactas. Menos lineas por parrafo = menos scroll para llegar al formulario. */ html{font-size:14.6px} body{font-size:15.4px} .btn{padding:13px 26px;font-size:.9rem} /* Excepcion deliberada: por debajo de 16px iOS hace zoom automatico al tocar un campo y descoloca la pagina. El formulario no baja de ahi. */ input,select,textarea{font-size:16px} .cta-grid,.foot-grid,.pm-grid,.lang-in{grid-template-columns:1fr} .nav-links{display:none} .burger{display:block} .phase,.phase-lg{grid-template-columns:52px 1fr;gap:18px;padding:30px 0} .phase-n,.phase-lg .phase-n{font-size:1.8rem} nav{height:76px;position:relative} nav img{height:30px} footer img{height:96px} /* Panel desplegable del menu movil */ .nav-links{display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0;padding:0;background:rgba(18,18,18,.985); backdrop-filter:blur(14px);border-bottom:1px solid var(--linea); box-shadow:0 18px 40px rgba(0,0,0,.4)} .nav-links.open{display:flex} .nav-links li{border-top:1px solid rgba(200,175,120,.13)} .nav-links li:first-child{border-top:0} .nav-links a{display:block;padding:17px 28px;font-size:.95rem;color:var(--sobre-oscuro-1)} .nav-links a:active{background:rgba(200,175,120,.1)} .burger{display:block;padding:8px 4px;line-height:1;min-width:44px;min-height:44px} /* En movil la llamada a la accion sale de la barra y entra en el desplegable: en una pantalla estrecha el boton se comia el ancho que necesita el logotipo. */ .nav-cta{display:none} /* Excepcion: las paginas en otros idiomas tienen una barra sin menu ni hamburguesa. Ahi el boton es lo unico que hay, y se queda. */ .nav-cta.siempre{display:inline-block;padding:9px 18px;font-size:.78rem} .solo-movil{display:block} .nav-links a.nav-menu-cta{background:rgba(200,175,120,.13);color:var(--oro); font-weight:600;letter-spacing:.02em} .nav-links a.nav-menu-cta:active{background:rgba(200,175,120,.22)} } /* Evita cualquier desbordamiento lateral residual. 'clip' y no 'hidden': hidden convierte al elemento en contenedor de scroll y eso ANULA el position:sticky de la cabecera. Era la razon por la que el menu no se quedaba anclado al bajar. */ html,body{max-width:100%;overflow-x:clip} /* ---------- Logos de cliente en movil ---------- */ @media(max-width:700px){ /* Objetivos tactiles del pie. Medido en la web publicada a 375 px: los enlaces del pie median 15 px de alto y los legales 14, por debajo del minimo de 24 que pide la norma. Se convierte separacion en relleno: la distancia de un enlace al siguiente apenas cambia, asi que el ritmo visual se mantiene, pero la superficie donde se puede tocar se duplica. Comprobado sobre la web publicada: 15 -> 35 px y 14 -> 32 px. Las etiquetas de ciudad se dejan como estan. Miden 24 px, que ya cumple el minimo, y agrandarlas cambiaria el aspecto de una seccion aprobada. */ footer ul{gap:0} /* OJO con el selector: tiene que ser '.foot-grid ul a', no '.foot-grid a'. Dentro de .foot-grid tambien viven el logo y los iconos de Instagram y LinkedIn. Esos iconos son circulos de 42x42 con display:inline-flex que centran el SVG; al alcanzarlos esta regla les cambiaba el display y les sumaba relleno, y el icono se salia del circulo. Paso en produccion. */ .foot-grid ul a{display:inline-block;padding:7px 0} /* El :not() no es adorno: '.foot-bottom a' es mas especifico que '.sello-renace', asi que sin excluirlo el sello heredaba 6 px de relleno arriba y abajo y su caja pasaba de 48 a 60 px. Mismo tropiezo que con los iconos de Instagram y LinkedIn. */ /* Hueco entre columnas mas corto: con 18 px, el copyright (140,3 px) y la linea legal (184 px) se partian en dos lineas antes de lo necesario. Medido en la web publicada: ancho 375 -> hacen falta 332, hay 319. No caben de ninguna manera. ancho 390 -> hacen falta 332, hay 334. Caben con 8 px, no con 10. ancho 414 -> caben incluso con los 18 originales. De ahi el 8: es el mayor hueco con el que entran en una linea en un movil de 390 px, que es la anchura mas comun hoy. Por debajo de 382 px las dos cadenas no caben juntas sin reducir el cuerpo de letra, y eso no se toca. */ /* En movil van SIEMPRE en columna: el copyright arriba y los legales justo en la linea de abajo, los dos pegados al margen izquierdo. Antes se dejaba que el ancho decidiera: si las dos cadenas no cabian se apilaban, y si cabian —a partir de unos 382 px, o sea en casi cualquier movil actual— se colocaban una al lado de la otra. Resultado distinto segun el telefono, que es justo lo que Ricardo veia como desalineado. Con direccion de columna el resultado es identico a cualquier ancho. gap de 2 px, no mas: el enlace legal ya aporta 6 px de relleno superior del area tactil, asi que el aire visible entre lineas queda en 8. */ .foot-bottom{flex-direction:column;align-items:flex-start;gap:2px} .foot-bottom a:not(.sello-renace){display:inline-block;padding:6px 0} .sello-renace img{width:48px;height:48px} /* Alturas del escritorio reducidas al 78 %: se conserva el equilibrio optico ya ajustado entre marcas en lugar de igualarlas a ciegas. */ .client-row a[data-l='atemporal'] img{height:56px} .client-row a[data-l='azul'] img{height:50px} .client-row a[data-l='carina'] img{height:57px} .client-row a[data-l='gallego-playa'] img{height:67px} .client-row a[data-l='in-bocca-al-lupo'] img{height:39px} .client-row a[data-l='kentucky'] img{height:32px} .client-row a[data-l='nou-lloc-de-joc'] img{height:56px} .client-row a[data-l='soho'] img{height:45px} .client-row a[data-l='teselas'] img{height:42px} .client-row a[data-l='vamora-ver'] img{height:67px} } /* Quien pide menos movimiento ve la fila quieta y repartida en varias lineas. rima.js comprueba lo mismo y no arranca el avance automatico. */ @media(prefers-reduced-motion:reduce){ .client-marquee{overflow-x:visible;cursor:auto; -webkit-mask-image:none;mask-image:none} .client-row{flex-wrap:wrap;justify-content:center;width:auto;gap:clamp(30px,4.5vw,60px)} .client-set{display:contents} .client-set~.client-set{display:none} } /* ---------- Enlace de salto al contenido ---------- Primer elemento de la pagina. Invisible hasta que recibe el foco: quien navega con teclado o lector de pantalla puede saltarse el menu en vez de tabular por sus seis enlaces en cada una de las 40 paginas. */ .saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--oro); color:var(--antracita);padding:12px 22px;font-size:.88rem;font-weight:600; text-decoration:none;border-radius:0 0 var(--r) 0} .saltar:focus{left:0} /* ---------- Trampa antibot ---------- Campo señuelo. Un humano no lo ve ni lo puede enfocar; un robot que rellena todo lo que encuentra, si. Cuando llega con algo escrito, Netlify descarta el envio en su servidor y no manda correo. Se esconde fuera de pantalla y NO con display:none ni con el atributo hidden: muchos robots saltan lo que esta declarado como oculto, asi que un señuelo invisible de esa forma no lo pisa nadie. Se le da 1px de caja y overflow oculto para que no altere la maquetacion ni provoque scroll lateral en ningun tamaño de pantalla. */ .trampa{position:absolute!important;left:-9999px!important;top:auto; width:1px;height:1px;overflow:hidden} /* ---------- Globo de WhatsApp ---------- Enlace normal con el icono dibujado en el HTML: ni script ni widget de terceros, que es lo que permite seguir sin cookies y sin banner. Se esconde solo mientras el formulario de contacto esta en pantalla. Es el unico momento en que las dos llamadas a la accion compiten, y ahi debe ganar el formulario, que recoge el servicio y el caso. No lleva boton de cerrar a proposito: recordar que alguien lo cerro exige guardar algo en su navegador, y esta web no guarda nada. */ .wa{position:fixed;right:20px;bottom:20px;z-index:55;width:56px;height:56px; display:flex;align-items:center;justify-content:center;border-radius:50%; background:#25D366;box-shadow:0 6px 20px rgba(0,0,0,.34); transition:transform .25s,opacity .25s,visibility .25s} .wa:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.44)} .wa svg{width:30px;height:30px;fill:#FFFFFF;display:block} .wa.oculto{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none} @media(max-width:900px){.wa{right:16px;bottom:16px;width:52px;height:52px} .wa svg{width:28px;height:28px}} @media(prefers-reduced-motion:reduce){.wa,.wa:hover{transition:none;transform:none}} /* ---------- Animacion de entrada ---------- Las reglas cuelgan de .js, que anade un script diminuto en el . Si el JavaScript no llega a ejecutarse —un error, un archivo que no carga, el navegador con scripts desactivados— la clase nunca se pone y el contenido se ve, simplemente sin animacion. Sin esta precaucion, TODA la pagina por debajo de la portada queda invisible ante cualquier fallo de JS. Es demasiado riesgo para un efecto decorativo. */ .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease} .js .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}