/* * Hoja única del sitio (rediseño 2026), a partir de los handoffs de la home, Agencia SEO y Email Marketing. * Tipografía: títulos en Poppins Medium y textos en Open Sans Regular, con la escala del handoff. * Aparte quedan solo los efectos propios de las landings con handoff (css/agencia-seo-*, css/email-marketing-*) y las * secciones CSC y blog de la home (css/csc.css, css/blog-latest.css). */ /* base styles */ /* Fuentes del sitio, recortadas al rango latino */ @font-face { font-family: 'Open Sans Regular'; src: url('../fonts/OpenSans-Regular-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans Medium'; src: url('../fonts/OpenSans-Medium-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans Bold'; src: url('../fonts/OpenSans-Bold-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins Regular'; src: url('../fonts/Poppins-Regular-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins Medium'; src: url('../fonts/Poppins-Medium-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins SemiBold'; src: url('../fonts/Poppins-SemiBold-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* Colores de las secciones que siguen con su diseño anterior (CSC de la home y formulario de Ads) */ :root { --primary: #007CBF; --secondary: #ED7C00; } /* Reset */ html, body { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } ul { margin: 0; padding: 0; } li { list-style: none; } img, iframe, textarea, video { display: block; } input, select, textarea { outline: none; } a, button { text-decoration: none; transition: background .6s ease, color .6s ease, border-color .6s ease; } /* Tipografía por defecto, para lo que no lleva una clase del sistema */ h1 { font-size: 52px; font-family: 'Poppins Medium'; font-weight: 500; line-height: 1.1; } h2 { font-size: 45px; font-family: 'Poppins Medium'; font-weight: 500; line-height: 1.1; } h3 { font-size: 25px; font-family: 'Poppins Medium'; font-weight: 500; line-height: 1.2; } h4 { font-size: 20px; font-family: 'Open Sans Regular'; font-weight: 400; line-height: 1.5; } p, li, a, label, button, input, select, textarea, #form-feedback { font-family: 'Open Sans Regular'; font-weight: 400; font-size: 16px; line-height: 1.5; } /* Cargando, mientras se envía un formulario */ .loader { display: none; position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; background: rgba(0, 0, 0, .4); } .loader img { max-width: 45px; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } /* Secciones de la home que siguen con su diseño anterior (CSC y blog): contenedor, botón y aparición al scroll */ .container { width: 80%; max-width: 1200px; margin: auto; } .btn { padding: 10px 20px; border-radius: 100px; min-width: 160px; border: 0; cursor: pointer; font-family: 'Poppins Medium'; font-weight: 500; } .main-content section h1, .main-content section h2, .main-content section h3, .main-content section h4, .main-content section p, .main-content section .btn { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease, background-color .6s ease, color .6s ease; } .main-content section .scroll-revealed { opacity: 1 !important; transform: translateY(0) !important; } @media (max-width: 1380px) { h1 { font-size: 42px; } h2 { font-size: 36px; } h3 { font-size: 20px; } h4 { font-size: 16px; } p, li, a, label, button, input, select, textarea, #form-feedback { font-size: 15px; } } @media (max-width: 575px) { h1 { font-size: 38px; } } /* end base styles */ /* tokens styles */ :root { --rn-blue: #007CBF; --rn-orange: #ED7C00; --rn-sky: #20A8F2; --rn-ink: #1A1A1A; --rn-tint: #D9EAFF; --rn-bg: #FFFFFF; --rn-header: 72px; --rn-max: 1216px; --rn-pad: clamp(24px, 6vw, 112px); --rn-gap: clamp(112px, 12vw, 184px); --rn-col: clamp(40px, 7vw, 128px); --rn-ease: cubic-bezier(.2, .7, .2, 1); } html { scroll-padding-top: var(--rn-header); } body { padding-top: var(--rn-header); background: var(--rn-bg); } body.rn-no-scroll { overflow: hidden; } .rn-container { width: 100%; max-width: calc(var(--rn-max) + var(--rn-pad) * 2); margin: 0 auto; padding: 0 var(--rn-pad); box-sizing: border-box; } .rn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Botones: negros con hover azul, los de contacto naranjas */ .rn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 30px; border: 1.5px solid var(--rn-ink); border-radius: 999px; background: var(--rn-ink); color: #fff; font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background-color .25s ease, border-color .25s ease, transform .25s var(--rn-ease); } /* Botones de contacto (header, los que bajan al formulario o van a /contacto y los envíos de formularios): naranjas con hover azul */ .rn-btn[href="#contact-form-section"], .rn-btn[href="#hubspot-partner-form"], .rn-btn[href$="/contacto"], .rn-btn[type="submit"] { border-color: var(--rn-orange); background: var(--rn-orange); } .rn-btn:hover { background: var(--rn-blue); border-color: var(--rn-blue); color: #fff; transform: translateY(-2px); } .rn-btn:focus-visible { outline: 2px solid var(--rn-blue); outline-offset: 4px; } .rn-btn:disabled { opacity: .5; cursor: default; transform: none; } .rn-btn--line { background: transparent; color: var(--rn-ink); } .rn-btn--line:hover { background: transparent; border-color: var(--rn-blue); color: var(--rn-blue); } /* Ícono + que gira a − al abrir (preguntas frecuentes, menú y footer en celular) */ .rn-plus { position: relative; flex: none; width: 20px; height: 20px; } .rn-plus::before, .rn-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--rn-ink); transform: translate(-50%, -50%); transition: transform .3s var(--rn-ease); } .rn-plus::after { transform: translate(-50%, -50%) rotate(90deg); } [open] > summary .rn-plus::after, .is-open > .rn-footer-title .rn-plus::after { transform: translate(-50%, -50%) rotate(0deg); } /* end tokens styles */ /* header styles */ .rn-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: var(--rn-bg); } .rn-header::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rn-tint); opacity: 0; transition: opacity .3s ease; } .rn-header.is-scrolled::after, .rn-header.is-panel-open::after { opacity: 1; } .rn-header-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; column-gap: 32px; height: var(--rn-header); background: var(--rn-bg); } .rn-header-logo { flex: none; display: block; } .rn-header-logo img { display: block; width: 104px; height: auto; } .rn-nav-list { display: flex; align-items: center; column-gap: clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; } .rn-nav-link { position: relative; display: block; padding: 8px 0; border: 0; background: none; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.3; cursor: pointer; transition: color .25s ease; } /* El punto azul marca el grupo abierto, como el punto de la i de los títulos */ .rn-nav-link::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--rn-blue); opacity: 0; transform: scale(0); transition: opacity .25s ease, transform .3s var(--rn-ease); } .rn-nav-link:hover, .rn-nav-link.is-active { color: var(--rn-blue); } .rn-nav-link.is-active::after { opacity: 1; transform: none; } .rn-header-cta.rn-btn { flex: none; min-height: 44px; padding: 10px 24px; font-size: 15px; } .rn-burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; } .rn-burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--rn-ink); transition: transform .3s var(--rn-ease), top .3s var(--rn-ease); } .rn-burger span:first-child { top: 18px; } .rn-burger span:last-child { top: 25px; } .rn-header.is-mobile-open .rn-burger span:first-child { top: 21.5px; transform: rotate(45deg); } .rn-header.is-mobile-open .rn-burger span:last-child { top: 21.5px; transform: rotate(-45deg); } /* Panel de cada grupo del menú: frase a la izquierda, links a la derecha */ .rn-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; max-height: calc(100vh - var(--rn-header)); overflow-y: auto; overscroll-behavior: contain; background: var(--rn-bg); border-bottom: 1px solid var(--rn-tint); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .35s var(--rn-ease), visibility 0s linear .35s; } .rn-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s var(--rn-ease), visibility 0s; } .rn-panel-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--rn-col); padding-top: 48px; padding-bottom: 56px; } .rn-panel-tagline { max-width: 14em; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; } .rn-panel-tagline span { color: var(--rn-blue); } .rn-panel-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 48px; margin: 0; padding: 0; list-style: none; } /* Los grupos con muchos links (más de 6) van en tres columnas para que el panel entre en la pantalla */ .rn-panel-links--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } .rn-panel-links li { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s var(--rn-ease); transition-delay: calc(var(--i, 0) * 30ms); } .rn-panel.is-open .rn-panel-links li { opacity: 1; transform: none; } .rn-panel-link { position: relative; display: block; padding: 12px 0 12px 22px; color: var(--rn-ink); text-decoration: none; } .rn-panel-link::before { content: ""; position: absolute; left: 2px; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--rn-tint); transition: background-color .25s ease; } .rn-panel-label { display: block; font-family: 'Poppins Medium'; font-weight: 500; font-size: 17px; line-height: 1.35; transition: color .25s ease; } .rn-panel-desc { display: block; margin-top: 4px; color: rgba(26, 26, 26, .72); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 15px; line-height: 1.5; } .rn-panel-link:hover .rn-panel-label { color: var(--rn-blue); } .rn-panel-link:hover::before { background: var(--rn-blue); } /* Menú en celular: grupos como acordeón debajo de la barra */ .rn-mobile { display: none; } @media (max-width: 1099px) { .rn-nav, .rn-header-cta.rn-btn, .rn-panel { display: none; } .rn-burger { display: block; } .rn-mobile { display: block; position: fixed; left: 0; right: 0; top: var(--rn-header); bottom: 0; overflow-y: auto; background: var(--rn-bg); border-top: 1px solid var(--rn-tint); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .35s var(--rn-ease), visibility 0s linear .35s; } .rn-header.is-mobile-open .rn-mobile { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s var(--rn-ease), visibility 0s; } .rn-mobile-inner { padding-top: 8px; padding-bottom: 48px; } .rn-mobile-group { border-bottom: 1px solid var(--rn-tint); } .rn-mobile-group summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.3; list-style: none; cursor: pointer; } .rn-mobile-group summary::-webkit-details-marker { display: none; } .rn-mobile-group[open] summary { color: var(--rn-blue); } .rn-mobile-group ul { margin: 0; padding: 0 0 16px; list-style: none; } .rn-mobile-group .rn-panel-link { padding-top: 10px; padding-bottom: 10px; } .rn-mobile-group .rn-panel-link::before { top: 18px; } .rn-mobile-cta.rn-btn { width: 100%; margin-top: 32px; } } /* Pantallas bajas (laptops de 1366 x 768 con la barra del navegador): panel más compacto */ @media (min-width: 1100px) and (max-height: 800px) { .rn-panel-inner { padding-top: 32px; padding-bottom: 36px; } .rn-panel-link { padding-top: 8px; padding-bottom: 8px; } .rn-panel-link::before { top: 16px; } .rn-panel-desc { font-size: 14px; } } @media (min-width: 1100px) and (max-width: 1279px) { .rn-nav-link { font-size: 14px; } .rn-header-cta.rn-btn { padding: 10px 20px; font-size: 14px; } } /* Breadcrumb: arriba del hero, sobre la capa de puntos */ .rn-crumbs { position: absolute; left: 0; right: 0; top: calc(var(--rn-header) + clamp(20px, 2.6vw, 32px)); z-index: 2; pointer-events: none; } .rn-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 14px; line-height: 1.4; pointer-events: auto; } .rn-crumbs li { display: inline-flex; gap: 8px; } .rn-crumbs li + li::before { content: "/"; color: var(--rn-blue); } .rn-crumbs a { color: inherit; text-decoration: none; } .rn-crumbs a:hover { color: var(--rn-blue); text-decoration: underline; text-underline-offset: 4px; } /* Con breadcrumb, el hero deja lugar arriba aunque su contenido sea más alto que la pantalla */ .rn-crumbs ~ .rn-page .rn-hero-grid { padding-top: calc(clamp(20px, 2.6vw, 32px) + 72px); } @media (max-width: 899px) { .rn-crumbs { position: relative; top: 0; padding-top: 20px; } .rn-crumbs ~ .rn-page .rn-hero-grid { padding-top: 40px; } } /* end header styles */ /* contact form styles */ .rn-contact { padding: var(--rn-gap) 0; } .rn-contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: start; } .rn-contact-title { max-width: 12ch; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.14; letter-spacing: -.018em; } .rn-contact-info { display: grid; gap: 24px; margin: clamp(40px, 4vw, 56px) 0 0; } .rn-contact-info div { position: relative; padding-left: 22px; } .rn-contact-info div::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--rn-blue); } .rn-contact-info dt { color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 14px; line-height: 1.3; } .rn-contact-info dd { margin: 4px 0 0; } .rn-contact-info a { color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.35; text-decoration: none; transition: color .25s ease; } .rn-contact-info a:hover { color: var(--rn-blue); } .rn-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .rn-field { display: block; } .rn-field input, .rn-field textarea { display: block; width: 100%; padding: 22px 0 14px; border: 0; border-bottom: 1px solid var(--rn-tint); border-radius: 0; background: transparent; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 18px; line-height: 1.5; box-sizing: border-box; transition: border-color .25s ease; } .rn-field textarea { min-height: 140px; resize: vertical; } .rn-field input::placeholder, .rn-field textarea::placeholder { color: rgba(26, 26, 26, .55); opacity: 1; } .rn-field input:focus, .rn-field textarea:focus { border-bottom-color: var(--rn-blue); } .rn-form .rn-btn { margin-top: 40px; } .rn-field select { display: block; width: 100%; padding: 22px 28px 14px 0; border: 0; border-bottom: 1px solid var(--rn-tint); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5l4 4 4-4' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px bottom 20px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 18px; line-height: 1.5; box-sizing: border-box; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .25s ease; } .rn-field select:invalid { color: rgba(26, 26, 26, .55); } .rn-field select:focus { border-bottom-color: var(--rn-blue); outline: 0; } .rn-field select option { color: var(--rn-ink); } /* Formulario de Google y Meta Ads (layouts.ads-form) en el hero: toma el aspecto de los campos y el botón del sitio */ .rn-hero .ads-pages-form form { display: grid; row-gap: 0; } .rn-hero .ads-pages-form form .form-group { display: flex; column-gap: 32px; } .rn-hero .ads-pages-form form input, .rn-hero .ads-pages-form form textarea { width: 100%; border: 0; background: transparent; box-sizing: border-box; } .rn-hero .ads-pages-form form textarea { resize: none; } .rn-hero .ads-pages-form form button { width: fit-content; border-radius: 100px; font-family: 'Poppins Medium'; font-weight: 500; cursor: pointer; } .rn-hero .ads-pages-form form input, .rn-hero .ads-pages-form form textarea { padding: 22px 0 14px; border-bottom: 1px solid var(--rn-tint); border-radius: 0; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 18px; line-height: 1.5; transition: border-color .25s ease; } .rn-hero .ads-pages-form form textarea { height: 120px; } .rn-hero .ads-pages-form form input::placeholder, .rn-hero .ads-pages-form form textarea::placeholder { color: rgba(26, 26, 26, .55); opacity: 1; } .rn-hero .ads-pages-form form input:focus, .rn-hero .ads-pages-form form textarea:focus { border-bottom-color: var(--rn-blue); outline: 0; } .rn-hero .ads-pages-form form button { min-height: 52px; margin-top: 36px; padding: 14px 30px; border: 1.5px solid var(--rn-orange); background: var(--rn-orange); color: #fff; font-size: 16px; line-height: 1.2; transition: background-color .25s ease, border-color .25s ease, transform .25s var(--rn-ease); } .rn-hero .ads-pages-form form button:hover { background: var(--rn-blue); border-color: var(--rn-blue); transform: translateY(-2px); } .rn-hero .ads-pages-form form #ads-form-feedback { margin-top: 16px; color: #C62828; } .rn-form-feedback { margin-top: 16px; color: #C62828; font-family: 'Open Sans Regular'; font-weight: 400; font-size: 16px; line-height: 1.5; } @media (max-width: 899px) { .rn-contact-grid { grid-template-columns: 1fr; row-gap: 48px; } .rn-contact-title { max-width: none; } .rn-contact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .rn-form-row, .rn-contact-info { grid-template-columns: 1fr; } } @media (max-width: 899px) { .rn-hero .ads-pages-form form .form-group { flex-direction: column; } } /* end contact form styles */ /* faqs styles */ .rn-faqs { padding: var(--rn-gap) 0 0; } .rn-faqs.no-padding-top { padding-top: 0; } .rn-faqs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: start; } .rn-faqs-head { position: sticky; top: calc(var(--rn-header) + 120px); } .rn-faqs-kicker { position: relative; padding-left: 22px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; } .rn-faqs-title { margin-top: 12px; max-width: 14ch; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.14; letter-spacing: -.018em; } .rn-faqs-list { border-bottom: 1px solid var(--rn-tint); } .rn-faq { border-top: 1px solid var(--rn-tint); } .rn-faq summary { display: flex; align-items: flex-start; justify-content: space-between; column-gap: 24px; padding: 24px 0; list-style: none; cursor: pointer; } .rn-faq summary::-webkit-details-marker { display: none; } .rn-faq summary .rn-plus { margin-top: 5px; } .rn-faq-q { color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.4; transition: color .2s ease; } .rn-faq summary:hover .rn-faq-q, .rn-faq[open] .rn-faq-q { color: var(--rn-blue); } .rn-faq-body { overflow: hidden; } .rn-faq-body p { max-width: 64ch; padding: 0 44px 28px 0; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.65; } @media (max-width: 899px) { .rn-faqs-grid { grid-template-columns: 1fr; row-gap: 32px; } .rn-faqs-head { position: static; } .rn-faqs-title { max-width: none; } } @media (max-width: 599px) { .rn-faq-body p { padding-right: 0; } } /* end faqs styles */ /* footer styles */ .rn-footer { border-top: 1px solid var(--rn-tint); background: var(--rn-bg); } .rn-footer-top { display: flex; align-items: center; justify-content: space-between; column-gap: 32px; padding-top: 64px; } .rn-footer-logo img { display: block; width: 120px; height: auto; } .rn-footer-social { display: flex; align-items: center; column-gap: 8px; margin: 0; padding: 0; list-style: none; } .rn-footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--rn-ink); transition: background-color .25s ease, color .25s ease; } .rn-footer-social a:hover { background: var(--rn-tint); color: var(--rn-blue); } .rn-footer-social svg { width: 18px; height: 18px; fill: currentColor; } /* Los grupos se reparten en columnas balanceadas (CSS columns): cada uno entra entero en su columna */ .rn-footer-nav { columns: 4; column-gap: 40px; padding: 56px 0 32px; } .rn-footer-group { break-inside: avoid; padding-bottom: 36px; } .rn-footer-title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.3; text-align: left; cursor: default; } .rn-footer-title .rn-plus { display: none; } .rn-footer-links { margin: 16px 0 0; padding: 0; list-style: none; } .rn-footer-links li + li { margin-top: 10px; } .rn-footer-links a, .rn-footer-links p { color: rgba(26, 26, 26, .78); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 15px; line-height: 1.45; text-decoration: none; transition: color .25s ease; } .rn-footer-links a:hover { color: var(--rn-blue); } .rn-footer-langs { display: flex; column-gap: 16px; margin-top: 24px; } .rn-footer-langs a { display: flex; align-items: center; column-gap: 6px; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 14px; line-height: 1.3; text-decoration: none; } .rn-footer-langs a:hover { color: var(--rn-blue); } .rn-footer-langs img { width: 18px; height: auto; } .rn-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 24px 0 32px; border-top: 1px solid var(--rn-tint); } .rn-footer-bottom p, .rn-footer-bottom a { color: rgba(26, 26, 26, .72); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 14px; line-height: 1.5; text-decoration: none; } .rn-footer-bottom a:hover { color: var(--rn-blue); } .rn-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; } @media (max-width: 1099px) { .rn-footer-nav { columns: 3; } } @media (max-width: 899px) { .rn-footer-nav { columns: 2; } } /* En celular, cada grupo es un acordeón */ @media (max-width: 767px) { .rn-footer-top { flex-direction: column; align-items: flex-start; row-gap: 24px; padding-top: 48px; } .rn-footer-social { margin-left: -11px; } .rn-footer-nav { columns: 1; padding: 32px 0 48px; } .rn-footer-group { padding-bottom: 0; border-bottom: 1px solid var(--rn-tint); } .rn-footer-title { padding: 18px 0; font-size: 17px; cursor: pointer; } .rn-footer-title .rn-plus { display: block; } .rn-footer-links { display: none; margin: 0; padding-bottom: 20px; } .rn-footer-group.is-open .rn-footer-links { display: block; } .rn-footer-langs { margin: 0 0 20px; } /* La línea del último grupo ya separa el bloque legal */ .rn-footer-bottom { flex-direction: column-reverse; align-items: flex-start; border-top: 0; } } /* end footer styles */ /* typography styles */ /* Escala del handoff. Las clases se aplican sobre la etiqueta que ya tenía cada página (h2, h4, p...) */ .rn-h2 { max-width: 22ch; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.14; letter-spacing: -.018em; text-wrap: balance; } .rn-h3 { color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.32; } .rn-kicker { position: relative; padding-left: 22px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; } /* Viñeta de los kickers: el punto azul del hero aterriza acá al scrollear (initRnDot) */ .rn-kicker::before, .rn-faqs-kicker::before, .rn-hero-kicker--dot::before { content: ""; position: absolute; left: 2px; top: .675em; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--rn-tint); } .rn-lead { max-width: 62ch; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.55; } .rn-text { max-width: 62ch; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 18px; line-height: 1.65; } .rn-actions { display: flex; flex-wrap: wrap; gap: 16px; } /* end typography styles */ /* sections styles */ .rn-page { display: block; overflow-x: clip; } .rn-sec { margin-top: var(--rn-gap); } .rn-sec.rn-sec--tight { margin-top: clamp(48px, 5vw, 72px); } .rn-sec.rn-sec--last { padding-bottom: var(--rn-gap); } /* Espaciado vertical dentro de los bloques de texto */ .rn-media-copy > * + * { margin-top: 22px; } .rn-media-copy > .rn-kicker + .rn-h2 { margin-top: 14px; } .rn-media-copy > .rn-actions { margin-top: 40px; } /* end sections styles */ /* hero styles */ .rn-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--rn-col); align-items: center; min-height: max(600px, calc(100vh - var(--rn-header))); min-height: max(600px, calc(100svh - var(--rn-header))); padding-top: 48px; padding-bottom: 48px; box-sizing: border-box; } .rn-hero-kicker { color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; } .rn-hero-kicker--dot { position: relative; padding-left: 22px; } .rn-hero-title { --rn-lh: 1.04; margin-top: 16px; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(46px, 5.2vw, 82px); line-height: var(--rn-lh); letter-spacing: -.025em; } .rn-hero-list { display: grid; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; } .rn-hero-list li { display: flex; align-items: center; column-gap: 10px; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.4; } .rn-hero-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rn-sky); } .rn-hero-lead { max-width: 54ch; margin-top: 26px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; } .rn-hero-cta.rn-btn { margin-top: 36px; } /* El punto azul de la i, como en la home: se oculta el punto original y se dibuja otro con un anillo que late. Medidas del glifo de la i de Poppins 500; si cambia el peso hay que recalcularlas */ .rn-word { white-space: nowrap; } .rn-iwrap { position: relative; display: inline-block; } .rn-i { display: inline-block; --rn-cut: calc(.35em + var(--rn-lh) * .5em - .5875em); -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--rn-cut), #000 var(--rn-cut)); mask-image: linear-gradient(to bottom, transparent 0, transparent var(--rn-cut), #000 var(--rn-cut)); } .rn-tittle { position: absolute; left: .1325em; top: calc(.35em + var(--rn-lh) * .5em - .697em); width: .17em; height: .17em; margin: -.085em 0 0 -.085em; border-radius: 50%; background: var(--rn-blue); } .rn-tittle::after { content: ""; position: absolute; left: 50%; top: 50%; width: .58em; height: .58em; margin: -.29em 0 0 -.29em; border: 1.5px solid var(--rn-sky); border-radius: 50%; box-sizing: border-box; opacity: 0; animation: rn-ring 2.4s 1.2s infinite cubic-bezier(.25, .6, .35, 1); } @keyframes rn-ring { 0% { transform: scale(.3); opacity: 0; } 8% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .rn-hero-visual { align-self: center; } @media (max-width: 899px) { .rn-hero-grid { grid-template-columns: 1fr; row-gap: 40px; min-height: 0; padding-top: 56px; } .rn-hero-visual { max-width: 480px; } } /* end hero styles */ /* media styles */ /* Imagen + texto: la imagen a la derecha por defecto; con --left va a la izquierda. En celular, la imagen arriba */ .rn-media { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--rn-col); align-items: center; } .rn-media--left { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .rn-media--left .rn-media-visual { order: -1; } @media (max-width: 899px) { .rn-media, .rn-media--left { grid-template-columns: 1fr; row-gap: 40px; } .rn-media-visual { order: -1; max-width: 480px; } } /* end media styles */ /* cells styles */ /* Grilla de tarjetas abiertas: aire y una línea fina arriba que se dibuja al entrar */ .rn-cells-head { margin-bottom: clamp(56px, 6vw, 88px); } .rn-cells-head .rn-kicker + .rn-h2 { margin-top: 14px; } .rn-grid { display: grid; gap: 56px clamp(32px, 4vw, 64px); margin: 0; padding: 0; list-style: none; } .rn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rn-cell { position: relative; padding-top: 24px; } .rn-cell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rn-tint); transform-origin: 0 50%; } .rn-cell .rn-h3 + .rn-cell-text { margin-top: 12px; } .rn-cell-text { color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.6; } .rn-motion .rn-cell[data-rv]::before { transform: scaleX(0); transition: transform 1.1s var(--rn-ease); transition-delay: calc(var(--rv, 0) * 80ms + .15s); } .rn-motion .rn-cell[data-rv].is-in::before { transform: none; } @media (max-width: 1099px) { .rn-grid--3, .rn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .rn-grid--2, .rn-grid--3, .rn-grid--4 { grid-template-columns: 1fr; gap: 36px; } } /* end cells styles */ /* works styles */ /* Galería de trabajos: grilla abierta; la imagen se agranda apenas al pasar el mouse, sin recortarla (las imágenes traen sus propias esquinas redondeadas y un recorte las dejaría rectas) */ .rn-works { display: grid; gap: clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; } .rn-works--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rn-works--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rn-works--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rn-works img { display: block; width: 100%; height: auto; transition: transform .8s var(--rn-ease); } .rn-works li:hover img { transform: scale(1.03); } @media (max-width: 899px) { .rn-works--3, .rn-works--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .rn-works--2 { grid-template-columns: 1fr; } } /* end works styles */ /* text blocks styles */ /* Frase grande que se completa palabra por palabra al leerla (initRnFill) */ .rn-statement-text { max-width: 20ch; margin-top: 14px; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(30px, 4.4vw, 68px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; } .rn-fill .rn-fw { transition: color .15s linear; } /* Título a la izquierda que acompaña el scroll, texto a la derecha */ .rn-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: start; } .rn-split-head { position: sticky; top: calc(var(--rn-header) + 120px); } .rn-split-head .rn-kicker + .rn-h2 { margin-top: 14px; } .rn-split-body > * + * { margin-top: 22px; } .rn-split-body > .rn-actions { margin-top: 40px; } .rn-split-body ul, .rn-media-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .rn-split-body ul li, .rn-media-list li { position: relative; padding-left: 24px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.55; } .rn-split-body ul li::before, .rn-media-list li::before { content: ""; position: absolute; left: 1px; top: .775em; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--rn-blue); } /* Link de texto, subrayado, con el mismo azul de los kickers */ .rn-link { display: inline-block; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-underline-offset .25s var(--rn-ease); } .rn-link:hover { text-decoration-thickness: 2px; text-underline-offset: 7px; } /* Filas de título + texto */ .rn-index { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rn-tint); } .rn-index li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); padding: 28px 0; border-top: 1px solid var(--rn-tint); } .rn-index-title { color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.35; } .rn-index-body > * + * { margin-top: 14px; } .rn-cells-head .rn-lead { margin-top: 22px; } .rn-cells-cta { margin-top: clamp(48px, 5vw, 72px); } /* Unidades de negocio: cada animal tiene otra proporción; una caja común, apoyada abajo, alinea los textos */ .rn-units .rn-cell--image img { aspect-ratio: 5 / 4; object-fit: contain; object-position: 50% 100%; } /* Filas dentro de un bloque de imagen + texto (rubros de las industrias) */ .rn-media-copy > .rn-index { margin-top: 40px; } /* Frase larga con CTA que se completa palabra por palabra (industrias) */ .rn-claim-text { max-width: 32ch; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.24; letter-spacing: -.015em; text-wrap: pretty; } .rn-claim .rn-actions { margin-top: 40px; } /* Proceso por pasos o línea de tiempo: la columna izquierda acompaña el scroll y el rastro marca el paso actual */ .rn-steps-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: start; } .rn-steps-side { align-self: stretch; } .rn-steps-sticky { position: sticky; top: calc(var(--rn-header) + 120px); } .rn-steps-sticky .rn-kicker + .rn-h2 { margin-top: 14px; } .rn-steps-sticky .rn-lead { margin-top: 22px; } .rn-steps-sticky .rn-actions { margin-top: 40px; } .rn-trail { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } .rn-trail i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--rn-tint); transition: background-color .35s ease; } .rn-trail i.is-past, .rn-trail i.is-cur { background: var(--rn-blue); } .rn-trail i.is-cur::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1.5px solid var(--rn-sky); border-radius: 50%; box-sizing: border-box; animation: rn-ring 2s infinite cubic-bezier(.25, .6, .35, 1); } .rn-steps { margin: 0; padding: 0; list-style: none; } .rn-step { position: relative; padding: 32px 0; border-top: 1px solid var(--rn-tint); transition: border-color .35s ease; } .rn-step:last-child { border-bottom: 1px solid var(--rn-tint); } .rn-step.is-cur { border-top-color: var(--rn-blue); } .rn-step-label { color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 14px; line-height: 1.3; } .rn-step-title { margin-top: 8px; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; } .rn-step .rn-text { margin-top: 12px; font-size: 17px; } /* Tabla comparativa */ .rn-compare { overflow-x: auto; } .rn-compare table { width: 100%; border-collapse: collapse; } .rn-compare th, .rn-compare td { padding: 22px 20px 22px 0; border-bottom: 1px solid var(--rn-tint); color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.5; text-align: left; vertical-align: top; } .rn-compare thead th { padding-top: 0; border-bottom: 1.5px solid var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; } .rn-compare tbody th { width: 30%; font-family: 'Poppins Medium'; font-weight: 500; } .rn-index + .rn-compare { margin-top: clamp(56px, 6vw, 88px); } .rn-compare--pages th > *, .rn-compare--pages td > p { color: inherit; font: inherit; } .rn-compare--pages thead th p { margin-top: 4px; color: rgba(26, 26, 26, .6); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 14px; line-height: 1.4; } .rn-compare svg { display: block; width: 20px; height: 20px; } .rn-compare .rn-check { color: var(--rn-blue); } .rn-compare .rn-cross { color: var(--rn-ink); opacity: .5; } .rn-motion .rn-compare tbody tr { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s ease, transform .8s var(--rn-ease); transition-delay: calc(var(--rv, 0) * 90ms + .15s); } .rn-motion .rn-compare.is-in tbody tr { opacity: 1; transform: none; } .rn-motion .rn-compare .rn-check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1) .5s; } .rn-motion .rn-compare.is-in .rn-check path { stroke-dashoffset: 0; } /* Lista de servicios: encabezado que acompaña el scroll a la izquierda, filas numeradas a la derecha */ .rn-tags-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: start; } .rn-tags-head { position: sticky; top: calc(var(--rn-header) + 120px); } .rn-tags-sec .rn-kicker + .rn-h2 { margin-top: 14px; } .rn-tags-sec .rn-lead { margin-top: 22px; } .rn-tags-sec .rn-actions { margin-top: 40px; } .rn-tags { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rn-tint); counter-reset: rn-tag; } .rn-tags li { display: flex; align-items: baseline; column-gap: 24px; padding: 22px 0; border-top: 1px solid var(--rn-tint); counter-increment: rn-tag; transition: border-color .3s ease; } .rn-tags li::before { content: counter(rn-tag, decimal-leading-zero); flex: none; width: 28px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 14px; line-height: 1.3; } .rn-tags li > * { color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; letter-spacing: -.01em; transition: transform .35s var(--rn-ease), color .3s ease; } .rn-tags li:hover { border-top-color: var(--rn-blue); } .rn-tags li:hover > * { color: var(--rn-blue); transform: translateX(6px); } /* Logos: en gris y a color al pasar el mouse */ .rn-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 40px 48px; align-items: center; margin: 0; padding: 0; list-style: none; } .rn-logos img { display: block; max-width: 100%; max-height: 56px; width: auto; height: auto; margin: 0 auto; filter: grayscale(1); opacity: .75; transition: filter .3s ease, opacity .3s ease; } .rn-logos li:hover img { filter: none; opacity: 1; } /* Texto largo */ .rn-prose { max-width: 820px; color: var(--rn-ink); } .rn-prose h2 { margin-top: 64px; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.18; } .rn-prose h3 { margin-top: 40px; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.32; } .rn-prose h4 { margin-top: 28px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 17px; line-height: 1.35; } .rn-prose > :first-child { margin-top: 0; } .rn-prose p, .rn-prose li, .rn-prose td, .rn-prose th { color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.65; } .rn-prose p { margin-top: 16px; } .rn-prose ul, .rn-prose ol { margin: 16px 0 0; padding-left: 24px; } .rn-prose li { list-style: disc; } .rn-prose ol li { list-style: decimal; } .rn-prose li + li { margin-top: 8px; } .rn-prose a { color: var(--rn-blue); text-decoration: underline; text-underline-offset: 3px; } .rn-prose strong, .rn-prose b { font-family: 'Open Sans Bold'; font-weight: 700; } .rn-prose table { width: 100%; margin-top: 24px; border-collapse: collapse; } .rn-prose th, .rn-prose td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rn-tint); text-align: left; vertical-align: top; } .rn-prose th { font-family: 'Poppins Medium'; font-weight: 500; } /* Visuales propios en el hero y en los bloques de imagen + texto: video, foto o formulario */ .rn-hero-visual--custom img, .rn-hero-visual--custom video, .rn-media-visual img, .rn-media-visual video { display: block; width: 100%; height: auto; } .rn-hero-visual--custom video { border: 0; outline: 0; filter: brightness(1.03); } /* Tarjetas con imagen o con link */ .rn-cell--image img { display: block; width: 100%; height: auto; margin-bottom: 20px; } .rn-cell-link { display: block; color: inherit; text-decoration: none; } .rn-cell-link:hover .rn-h3 { color: var(--rn-blue); } @media (max-width: 899px) { .rn-split, .rn-steps-grid, .rn-tags-grid, .rn-index li { grid-template-columns: 1fr; row-gap: 24px; } .rn-tags-grid { row-gap: 40px; } .rn-split-head, .rn-steps-sticky, .rn-tags-head { position: static; } .rn-index li { row-gap: 8px; } .rn-trail { display: none; } } @media (max-width: 599px) { .rn-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .rn-compare table, .rn-compare tbody, .rn-compare tr, .rn-compare th, .rn-compare td { display: block; width: auto; } .rn-compare tr { padding: 20px 0; border-bottom: 1px solid var(--rn-tint); } .rn-compare tbody th, .rn-compare td { padding: 0; border: 0; } .rn-compare tbody th { width: auto; margin-bottom: 12px; } .rn-compare td + td { margin-top: 8px; } .rn-compare td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 13px; line-height: 1.3; } } /* end text blocks styles */ /* shapes styles */ /* Objetos de puntos (initRnDots): la caja marca el lugar y el tamaño, y los puntos se dibujan en una sola capa fija */ .rn-shape { width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto; } /* La capa de puntos va debajo del contenido: main y el footer quedan en z-index 1, con fondo transparente o blanco. No usa mix-blend-mode: multiply sobre una capa fija hace que el navegador recomponga toda la página en cada cuadro y el scroll se vuelve lento y a tirones */ .rn-swarm { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .main-content, .rn-page, .rn-footer { position: relative; z-index: 1; } /* La capa de adelante: los puntos que, durante el viaje, pasan por encima del texto */ .rn-swarm--front { z-index: 2; } /* Fotos de las secciones (cuando una sección lleva imagen en lugar de un objeto de puntos) */ .rn-media-visual img { display: block; width: 100%; height: auto; } /* end shapes styles */ /* reveal styles */ /* Entrada al scrollear (data-rv) y títulos palabra por palabra (data-rw). html.rn-motion lo agrega el head solo si hay JS y el sistema no pide movimiento reducido: sin eso, todo se ve quieto */ .rn-motion [data-rv] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--rn-ease), transform .9s var(--rn-ease); transition-delay: calc(var(--rv, 0) * 80ms); } .rn-motion [data-rv].is-in { opacity: 1; transform: none; } .rn-motion [data-rw] .rn-w { display: inline-block; opacity: 0; filter: blur(8px); transform: translate3d(0, .34em, 0); transition: opacity .7s ease, filter .8s ease, transform .9s var(--rn-ease); transition-delay: calc(var(--wi, 0) * 45ms); } .rn-motion [data-rw].is-in .rn-w { opacity: 1; filter: blur(0); transform: none; } /* Títulos que arrancan más grandes y se acomodan a su tamaño con el scroll (rn-settle), con las animaciones del navegador ligadas al scroll. Donde no están soportadas, el título se ve normal */ @supports (animation-timeline: view()) { .rn-motion .rn-settle { transform-origin: 0 50%; animation: rn-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } } @keyframes rn-settle { from { opacity: .15; transform: scale(1.22); } to { opacity: 1; transform: none; } } /* El hero entra al cargar, en una sola secuencia de arriba hacia abajo */ .rn-motion .rn-hero-copy > * { animation: rn-rise 1s var(--rn-ease) both; animation-delay: calc(var(--rv, 0) * 110ms + .1s); } @keyframes rn-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rn-tittle::after { animation: none; } } /* El punto azul que acompaña la lectura (initRnDot): se despega de la i del hero y aterriza en cada kicker */ .rn-dot-on .rn-page .rn-tittle { visibility: hidden; } .rn-travel { position: fixed; left: 0; top: 0; z-index: 40; width: 0; height: 0; pointer-events: none; will-change: transform; } .rn-travel-core { position: absolute; left: 0; top: 0; width: var(--d, 14px); height: var(--d, 14px); margin: calc(var(--d, 14px) / -2) 0 0 calc(var(--d, 14px) / -2); border-radius: 50%; background: var(--rn-blue); } .rn-travel-core::after { content: ""; position: absolute; left: 50%; top: 50%; width: 340%; height: 340%; margin: -170% 0 0 -170%; border: 1.5px solid var(--rn-sky); border-radius: 50%; box-sizing: border-box; opacity: 0; } .rn-travel.is-resting .rn-travel-core::after { animation: rn-ring 2.4s .3s infinite cubic-bezier(.25, .6, .35, 1); } .rn-travel-core.is-landing { animation: rn-land .6s cubic-bezier(.2, .7, .2, 1); } .rn-travel-trail { position: fixed; left: 0; top: 0; z-index: 39; width: var(--d, 6px); height: var(--d, 6px); margin: calc(var(--d, 6px) / -2) 0 0 calc(var(--d, 6px) / -2); border-radius: 50%; background: var(--rn-sky); opacity: 0; pointer-events: none; will-change: transform, opacity; } @keyframes rn-land { 0% { transform: scale(1); } 30% { transform: scale(1.6); } 60% { transform: scale(.85); } 100% { transform: scale(1); } } /* end reveal styles */ /* home hero styles */ /* Hero de la home "Los detalles hacen la diferencia", el punto azul y las partículas que viajan al embudo (.rnh, .rn-dot) */ .rnh { --rnh-blue: #007CBF; --rnh-sky: #20A8F2; --rnh-ink: #1A1A1A; --rnh-bg: #FFFFFF; --rnh-offset: 0px; --rnh-below: 120px; position: relative; color: var(--rnh-ink); } .rnh *, .rnh *::before, .rnh *::after { box-sizing: border-box; } /* El sitio oculta h1 y p de .main-content section hasta su reveal; el hero se ve desde el primer cuadro */ .rnh .rnh-eyebrow, .rnh .rnh-title, .rnh .rnh-sub { opacity: 1; transform: none; } .rnh .rnh-inner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 560px; min-height: max(560px, calc(100vh - var(--rnh-offset) - var(--rnh-below))); min-height: max(560px, calc(100svh - var(--rnh-offset) - var(--rnh-below))); padding: 48px clamp(24px, 6vw, 112px); } .rnh .rnh-copy { position: relative; max-width: 1300px; padding-bottom: 6vh; text-align: center; will-change: transform, opacity; } .rnh .rnh-eyebrow { margin: 0 0 18px; font-family: 'Poppins Medium', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.3; letter-spacing: normal; color: var(--rnh-ink); text-transform: none; } .rnh .rnh-title { --rnh-lh: 1.06; margin: 0 auto; max-width: 9.4em; font-family: 'Poppins Medium', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: clamp(40px, 5vw, 88px); line-height: var(--rnh-lh); letter-spacing: -.02em; color: var(--rnh-ink); text-transform: none; text-wrap: balance; } .rnh .rnh-title span { font: inherit; letter-spacing: inherit; color: inherit; } /* El detalle: el punto de la i de "diferencia" es azul. La letra sigue siendo una i real (lectura y buscadores): se oculta su punto original y se dibuja otro. Las medidas salen del glifo de la i de Poppins 500 (centro del punto a .1325em del borde y a .697em de la línea base, diámetro .146em; el tallo llega a .551em). Si cambia el peso hay que recalcularlas; si cambia el interlineado alcanza con --rnh-lh. */ .rnh .rnh-word { white-space: nowrap; } .rnh .rnh-iwrap { position: relative; display: inline-block; } .rnh .rnh-i { display: inline-block; --rnh-cut: calc(.35em + var(--rnh-lh) * .5em - .5875em); -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--rnh-cut), #000 var(--rnh-cut)); mask-image: linear-gradient(to bottom, transparent 0, transparent var(--rnh-cut), #000 var(--rnh-cut)); } .rnh .rnh-title .rnh-tittle { position: absolute; left: .1325em; top: calc(.35em + var(--rnh-lh) * .5em - .697em); width: .17em; height: .17em; margin: -.085em 0 0 -.085em; border-radius: 50%; background: var(--rnh-blue); } .rnh.is-ready .rnh-title .rnh-tittle { visibility: hidden; } .rnh .rnh-sub { margin: 28px auto 0; max-width: 30ch; font-family: 'Open Sans Regular', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--rnh-ink); text-transform: none; } .rnh .rnh-cta { display: inline-block; margin-top: 36px; padding: 16px 30px; border-radius: 999px; background: var(--rnh-ink); color: #FFFFFF; font-family: 'Poppins Medium', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.2; text-decoration: none; text-transform: none; transition: background-color .2s ease; } .rnh .rnh-cta:hover { background: var(--rnh-blue); } .rnh .rnh-cta:focus-visible { outline: 2px solid var(--rnh-blue); outline-offset: 4px; } @media (max-width:599px) { .rnh .rnh-inner { min-height: 0; padding: 56px 24px 64px; } .rnh .rnh-copy { padding-bottom: 0; } .rnh .rnh-title { font-size: clamp(32px, 9.4vw, 40px); } .rnh .rnh-sub { margin-top: 22px; } .rnh .rnh-cta { margin-top: 28px; padding: 14px 22px; font-size: 15px; white-space: nowrap; } } /* El punto azul que viaja: vive fuera de las secciones (posición fija) */ .rn-dot { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; will-change: transform, opacity; } .rn-dot, .rn-dot i, .rn-dot-trail, .rn-dot-burst { box-sizing: border-box; } .rn-dot i { position: absolute; left: 0; top: 0; border-radius: 50%; width: var(--d, 16px); height: var(--d, 16px); margin: calc(var(--d, 16px) / -2) 0 0 calc(var(--d, 16px) / -2); } .rn-dot .rn-dot-core { background: #007CBF; box-shadow: 0 0 0 calc(var(--d, 16px) * .32) rgba(0, 124, 191, var(--halo, 0)), 0 0 calc(var(--d, 16px) * 1.4) rgba(32, 168, 242, var(--glow, 0)); } .rn-dot .rn-dot-ring { z-index: 1; border: 1.5px solid #20A8F2; opacity: 0; } .rn-dot.is-landing .rn-dot-core { animation: rn-drop 1.15s .5s both; } .rn-dot.is-resting .rn-dot-ring { animation: rn-ring-grow 2.4s 2s infinite cubic-bezier(.25, .6, .35, 1), rn-ring-fade 2.4s 2s infinite linear; } .rn-dot.is-guiding .rn-dot-ring { animation: rn-ring-grow 2s infinite cubic-bezier(.25, .6, .35, 1), rn-ring-fade 2s infinite linear; } .rn-dot-burstwrap { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 39; pointer-events: none; } .rn-dot-burst { position: absolute; left: 0; top: 0; width: var(--d, 40px); height: var(--d, 40px); margin: calc(var(--d, 40px) / -2) 0 0 calc(var(--d, 40px) / -2); border-radius: 50%; border: 2px solid #007CBF; opacity: 0; pointer-events: none; } .rn-dot-burst.is-on { animation: rn-burst 1.1s cubic-bezier(.2, .7, .2, 1) both; } @keyframes rn-burst { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } } /* Partículas del fondo: flotan en el hero y, al scrollear, avanzan hasta su lugar en el anillo del embudo. La capa es fija y multiplica: sobre el blanco se ven celestes y sobre el texto negro desaparecen */ /* Debajo del contenido (main y footer van en z-index 1, ver styles-v2.x): sin multiply, que hacía lento el scroll */ .rn-swarm { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .rnh .rnh-field { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .rn-dot-trail { position: fixed; left: 0; top: 0; width: var(--d, 8px); height: var(--d, 8px); margin: calc(var(--d, 8px) / -2) 0 0 calc(var(--d, 8px) / -2); border-radius: 50%; background: #20A8F2; opacity: 0; z-index: 39; pointer-events: none; will-change: transform, opacity; } @keyframes rn-drop { 0% { transform: translateY(calc(var(--d, 16px) * -6)); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 12% { opacity: 1; } 55% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 70% { transform: translateY(calc(var(--d, 16px) * -.9)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 84% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 92% { transform: translateY(calc(var(--d, 16px) * -.25)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 100% { transform: translateY(0); opacity: 1; } } /* El anillo nace en el centro del punto y se abre hacia afuera con el mismo grosor de línea todo el tiempo */ @keyframes rn-ring-grow { 0% { width: 0; height: 0; margin: 0; } 100% { width: calc(var(--d, 16px) * 3.4); height: calc(var(--d, 16px) * 3.4); margin: calc(var(--d, 16px) * -1.7) 0 0 calc(var(--d, 16px) * -1.7); } } @keyframes rn-ring-fade { 0% { opacity: 0; } 6% { opacity: 1; } 100% { opacity: 0; } } /* end home hero styles */ /* home funnel styles */ /* Sección "Del primer contacto a los ingresos" de la home (.rnf) */ .rnf { --rnf-blue: #007CBF; --rnf-sky: #20A8F2; --rnf-deep: #0E3AA9; --rnf-tint: #D9EAFF; --rnf-ink: #1A1A1A; --rnf-bg: #FFFFFF; --rnf-length: 440vh; --rnf-offset: 0px; position: relative; color: var(--rnf-ink); } .rnf *, .rnf *::before, .rnf *::after { box-sizing: border-box; } /* Base sin JS: lista simple y legible. opacity/transform: anulan el estado inicial del reveal global (.main-content section h2, h3, p) */ .rnf .rnf-stage { position: relative; padding: 96px 24px; } .rnf .rnf-canvas { display: none; } .rnf .rnf-title { margin: 0 auto 56px; max-width: 13em; text-align: center; font-family: 'Poppins SemiBold', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: clamp(32px, 5.4vw, 76px); line-height: 1.06; letter-spacing: -.025em; color: var(--rnf-ink); opacity: 1; transform: none; text-wrap: balance; } .rnf .rnf-title span { color: inherit; font: inherit; letter-spacing: inherit; } /* La i de "primer": su punto es un elemento propio, para que el punto azul del hero pueda posarse ahí */ .rnf .rnf-iwrap { position: relative; display: inline-block; } .rnf .rnf-i { display: inline-block; -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent .2912em, #000 .2912em); mask-image: linear-gradient(to bottom, transparent 0, transparent .2912em, #000 .2912em); } .rnf .rnf-title .rnf-tittle { position: absolute; left: .14em; top: .1788em; width: .1625em; height: .1625em; margin: -.08125em 0 0 -.08125em; border-radius: 50%; background: currentColor; transition: opacity .2s; } .rnf.has-dot .rnf-title .rnf-tittle { opacity: 0; } .rnf .rnf-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; display: grid; gap: 48px; } .rnf .rnf-step { margin: 0; padding: 0; } .rnf .rnf-word { margin: 0 0 10px; font-family: 'Poppins SemiBold', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.05; letter-spacing: -.02em; color: var(--rnf-ink); opacity: 1; transform: none; } .rnf .rnf-desc { margin: 0; max-width: 30ch; font-family: 'Open Sans Regular', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--rnf-ink); opacity: 1; transform: none; } /* Descripciones al tamaño de los p del sitio (16px; 15px desde 1380px) */ @media (max-width:1380px) { .rnf .rnf-desc { font-size: 15px; } } /* Con JS: escena fija ligada al scroll */ .rnf.is-ready .rnf-track { position: relative; height: var(--rnf-length); } .rnf.is-ready .rnf-stage { position: sticky; top: var(--rnf-offset); height: calc(100vh - var(--rnf-offset)); height: calc(100svh - var(--rnf-offset)); padding: 0; overflow: hidden; } .rnf.is-ready .rnf-canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rnf.is-ready .rnf-head { position: absolute; top: 0; left: 0; right: 0; padding: 0 20px; transform-origin: 50% 50%; will-change: transform; pointer-events: none; } .rnf.is-ready .rnf-title { margin: 0 auto; } .rnf.is-ready .rnf-steps { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: none; display: block; pointer-events: none; } .rnf.is-ready .rnf-step { position: absolute; top: 0; left: 0; padding: 0; } .rnf.is-ready .rnf-word { margin: 0 0 10px; font-size: clamp(28px, min(2.5vw, 4.4vh), 40px); opacity: 0; will-change: transform, opacity; } .rnf.is-ready .rnf-desc { max-width: 34ch; opacity: 0; will-change: transform, opacity; } /* Título: se acomoda arriba a la izquierda, sobre la columna de texto */ .rnf.is-ready.is-desk .rnf-head { right: auto; padding: 0; transform-origin: 0 0; } .rnf.is-ready.is-desk .rnf-title { margin: 0; text-align: left; } /* Compacto (mobile, tablet o contenedor angosto): un paso visible por vez */ .rnf.is-compact { --rnf-length: 380vh; } .rnf.is-ready.is-compact .rnf-step { display: block; left: 0; right: 0; width: auto; padding: 0 28px; text-align: center; transform: none; opacity: 0; will-change: transform, opacity; } .rnf.is-ready.is-compact .rnf-word { margin: 0 0 10px; text-align: center; opacity: 1; font-size: 32px; } .rnf.is-ready.is-compact .rnf-desc { margin: 0 auto; max-width: 30ch; opacity: 1; font-size: 15px; } /* Compacto apaisado: embudo a la izquierda, texto a la derecha */ .rnf.is-ready.is-split .rnf-step { right: 32px; padding: 0; text-align: left; } .rnf.is-ready.is-split .rnf-word { text-align: left; } .rnf.is-ready.is-split .rnf-desc { margin: 0; } /* Movimiento reducido: composición final, sin recorrido */ .rnf.is-ready.is-static .rnf-track { height: auto; } .rnf.is-ready.is-static .rnf-stage { position: relative; top: 0; height: 100vh; height: 100svh; min-height: 640px; } .rnf.is-ready.is-static.is-compact .rnf-stage { height: auto; min-height: 0; padding: 0 0 72px; } .rnf.is-ready.is-static.is-compact .rnf-canvas { position: relative; height: 78vh; height: 78svh; } .rnf.is-ready.is-static.is-compact .rnf-steps { position: relative; display: grid; gap: 36px; padding: 0; } .rnf.is-ready.is-static.is-compact .rnf-step { position: static; opacity: 1; transform: none; } /* end home funnel styles */ /* home units styles */ /* Sección "Ocho tentáculos" de la home, con el pulpo y las ocho unidades (.rno) */ .rno { --rno-blue: #007CBF; --rno-sky: #20A8F2; --rno-deep: #0E3AA9; --rno-tint: #D9EAFF; --rno-ink: #1A1A1A; --rno-bg: #FFFFFF; --rno-length: 960vh; --rno-offset: 0px; position: relative; color: var(--rno-ink); } .rno *, .rno *::before, .rno *::after { box-sizing: border-box; } .rno .rno-title, .rno .rno-animal, .rno .rno-name, .rno .rno-lead, .rno .rno-story, .rno .rno-link, .rno .rno-close, .rno .rno-cta { text-transform: none; font-style: normal; } /* El sitio oculta h2, h3 y p de .main-content section hasta su reveal; acá la opacidad la maneja el script */ .rno [data-no-reveal] { opacity: 1; transform: none; transition: none; } /* Base sin JS y con movimiento reducido: lista estática */ /* La escena toma el ancho de .container del sitio (80%, máx. 1200px); el script mide la escena, así que todo queda dentro */ .rno .rno-stage { position: relative; width: 80%; max-width: 1200px; margin: 0 auto; padding: 120px 0 96px; } @media (max-width:1380px) { .rno .rno-stage { padding-top: 70px; } } .rno .rno-head { max-width: 1100px; margin: 0 auto 72px; } .rno .rno-title { margin: 0 auto; max-width: 15em; text-align: center; font-family: 'Poppins SemiBold', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: clamp(30px, 4.6vw, 68px); line-height: 1.08; letter-spacing: -.025em; color: var(--rno-ink); text-wrap: balance; } .rno .rno-title span { font: inherit; letter-spacing: inherit; color: inherit; } .rno .rno-title .rno-hl { color: var(--rno-blue); } .rno .rno-octo { max-width: 560px; margin: 0 auto 56px; } .rno .rno-octo video { display: block; width: 100%; height: auto; max-width: none; border: 0; background: var(--rno-bg); pointer-events: none; } /* Sin borde: según el navegador y la placa de video, el blanco del video no queda exactamente igual al de la página y se nota el rectángulo. Los bordes se funden con una máscara dentro del margen de 19px que el video deja alrededor del pulpo */ .rno .rno-octo video { -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 4.5%, #000 95.5%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 4.5%, #000 95.5%, transparent); mask-composite: intersect; } .rno .rno-units { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 72px; } .rno .rno-unit { margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } .rno .rno-fig { margin: 0; } .rno .rno-fig img { display: block; width: 100%; height: auto; max-height: 420px; border: 0; object-fit: contain; } .rno .rno-animal { margin: 0 0 8px; font-family: 'Poppins Medium', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--rno-blue); } .rno .rno-name { margin: 0; font-family: 'Poppins SemiBold'; font-weight: 600; font-size: 35px; line-height: 1.2; color: var(--rno-ink); } .rno .rno-name a { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; } .rno .rno-lead { margin-top: 15px; font-family: 'Poppins Regular'; font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--rno-ink); } .rno .rno-story { margin-top: 15px; font-family: 'Poppins Regular'; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--rno-ink); } .rno .rno-link { display: inline-block; margin-top: 20px; font-family: 'Poppins Medium', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--rno-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } .rno .rno-outro { margin: 88px auto 0; text-align: center; } .rno .rno-close { margin: 0 auto; max-width: 14em; font-family: 'Poppins SemiBold', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.12; letter-spacing: -.02em; color: var(--rno-ink); text-wrap: balance; } .rno .rno-cta { display: inline-block; margin-top: 28px; padding: 14px 28px; border-radius: 999px; background: var(--rno-blue); color: #FFFFFF; font-family: 'Poppins Medium', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.2; text-decoration: none; } .rno .rno-name a:hover, .rno .rno-link:hover { text-decoration-thickness: 2px; } .rno .rno-cta:hover { background: #0068A3; } .rno a:focus-visible, .rno button:focus-visible { outline: 2px solid var(--rno-blue); outline-offset: 4px; } @media (max-width: 1380px) { .rno .rno-name { font-size: 28px; } .rno .rno-lead { font-size: 16px; } .rno .rno-story { font-size: 15px; } .rno .rno-link { font-size: 15px; } } @media (max-width: 768px) { .rno .rno-unit { grid-template-columns: 1fr; gap: 20px; } } /* Con JS: escena fija ligada al scroll */ .rno.is-ready .rno-track { position: relative; height: var(--rno-length); } .rno.is-ready .rno-stage { position: sticky; top: var(--rno-offset); height: calc(100vh - var(--rno-offset)); height: calc(100svh - var(--rno-offset)); padding: 0; overflow: hidden; } .rno.is-ready .rno-octo { position: absolute; margin: 0; max-width: none; opacity: 0; will-change: transform, opacity; } .rno.is-ready .rno-head { position: absolute; top: 0; left: 0; right: 0; max-width: none; margin: 0; padding: 0; will-change: transform, opacity; pointer-events: none; } .rno.is-ready .rno-title { max-width: 22em; font-size: clamp(26px, 3.1vw, 46px); line-height: 1.12; } .rno.is-ready .rno-units { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: none; display: block; } .rno.is-ready .rno-unit { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; pointer-events: none; } .rno.is-ready .rno-fig { position: absolute; opacity: 0; will-change: transform, opacity; } .rno.is-ready .rno-fig img { width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: 50% 100%; } .rno.is-ready:not(.is-compact) .rno-fig img { object-position: 50% 50%; } .rno.is-ready .rno-copy { position: absolute; } .rno.is-ready .rno-copy > * { opacity: 0; will-change: transform, opacity; } .rno.is-ready .rno-outro { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .rno.is-ready .rno-ring { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .rno.is-ready .rno-ring a { position: absolute; display: block; text-align: center; text-decoration: none; color: var(--rno-ink); opacity: 0; will-change: transform, opacity; } .rno.is-ready .rno-ring img { display: block; max-width: none; border: 0; object-fit: contain; object-position: 50% 100%; } .rno.is-ready .rno-ring span { display: block; margin-top: 8px; font-family: 'Poppins Medium', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.25; } .rno.is-ready .rno-dots { display: flex; position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); gap: 4px; opacity: 0; } .rno.is-ready .rno-dots button { appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; padding: 14px 4px; cursor: pointer; } .rno.is-ready .rno-dots i { display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--rno-tint); } /* Compacto: hasta 992px de ventana, como el resto del sitio */ .rno.is-compact { --rno-length: 900vh; } /* Compacto: la escena va a ancho completo para que la ronda entre alrededor del pulpo; el script deja los textos en el 80% */ .rno.is-ready.is-compact .rno-stage { width: 100%; } .rno.is-ready.is-compact .rno-head, .rno.is-ready.is-compact .rno-outro { padding: 0 10%; } .rno.is-ready.is-compact .rno-copy { text-align: center; } .rno.is-ready.is-compact .rno-lead, .rno.is-ready.is-compact .rno-story { margin-left: auto; margin-right: auto; } .rno.is-ready.is-compact .rno-animal { font-size: 16px; margin-bottom: 6px; } .rno.is-ready.is-compact .rno-name { font-size: 30px; } .rno.is-ready.is-compact .rno-lead { margin-top: 12px; font-size: 16px; } .rno.is-ready.is-compact .rno-story { margin-top: 10px; font-size: 15px; line-height: 1.55; } .rno.is-ready.is-compact .rno-link { margin-top: 12px; font-size: 15px; } .rno.is-ready.is-compact .rno-ring span { margin-top: 6px; padding: 0 2px; font-size: 11.5px; hyphens: auto; -webkit-hyphens: auto; } .rno.is-ready.is-compact .rno-close { font-size: 26px; } .rno.is-ready.is-compact .rno-cta { margin-top: 20px; padding: 12px 20px; font-size: 14px; white-space: nowrap; } /* Pantallas bajas: se oculta el párrafo del animal (sigue en la página de cada unidad) */ .rno.is-ready.is-tight .rno-story { display: none; } /* end home units styles */ /* clients carousel styles */ /* Carrusel de logos de clientes (layouts.clients-carousel y las landings con handoff) */ .rn-clients { background: var(--rn-clients-bg, transparent); padding-block: var(--rn-clients-pad, 56px); } .rn-marquee { --rn-gap: 64px; --rn-scale: 0.85; --rn-fade: clamp(24px, 6vw, 96px); position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rn-fade), #000 calc(100% - var(--rn-fade)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--rn-fade), #000 calc(100% - var(--rn-fade)), transparent 100%); } .rn-marquee__track { display: flex; width: max-content; will-change: transform; } .rn-marquee.is-running .rn-marquee__track { animation: rn-marquee var(--rn-duration, 50s) linear infinite; } .rn-marquee.is-running:hover .rn-marquee__track, .rn-marquee.is-offscreen .rn-marquee__track { animation-play-state: paused; } @keyframes rn-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .rn-marquee__set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .rn-marquee__item { flex: none; display: flex; align-items: center; height: calc(56px * var(--rn-scale)); margin-right: var(--rn-gap); } /* Con .rn-marquee adelante, para que el reinicio de img de las landings (height: auto) no cambie el tamaño de los logos */ .rn-marquee .rn-logo { display: block; height: calc(var(--h) * var(--rn-scale) * 1px); width: auto; aspect-ratio: var(--r); max-width: none; } @media (max-width: 767px) { .rn-clients { --rn-clients-pad: 40px; } .rn-marquee { --rn-gap: 40px; --rn-scale: 0.65; } } @media (prefers-reduced-motion: reduce) { .rn-marquee { -webkit-mask-image: none; mask-image: none; } .rn-marquee__track { width: auto; animation: none !important; } .rn-marquee__set { flex-wrap: wrap; justify-content: center; gap: 24px var(--rn-gap); } .rn-marquee__item { margin-right: 0; } } /* end clients carousel styles */ /* agencia seo styles */ /* * Agencia SEO: solo lo propio del handoff (prefijo rnseo-). Tipografía, colores, botones, grillas, tabla, proceso, * preguntas frecuentes y apariciones son los de styles-v2.x.css. * Los efectos van con html.rn-motion (JS y sin movimiento reducido) y data-efectos="on" en el main (.rnseo.is-anim); * sin eso la página queda completa y estática: globo quieto, mapa fijo con las cifras y servicios en grilla. */ /* seo page styles */ .rnseo-center { margin-left: auto; margin-right: auto; text-align: center; } .rn-actions.rnseo-center { justify-content: center; } .rn-h2.rnseo-center { max-width: 24ch; } /* Títulos chicos (secciones de a pares y clientes) */ .rn-h2.rnseo-h2-sm { max-width: 20ch; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.18; } .rn-h2.rnseo-h2-sm.rnseo-center { max-width: none; } /* Bajada azul debajo de un título */ .rnseo-sub { max-width: 34ch; margin-top: 18px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.4; text-wrap: balance; } .rn-media-copy > .rnseo-sub { margin-top: 18px; } /* Párrafos que se completan palabra por palabra mientras se leen (color por palabra desde el JS) */ .rnseo-fill .rnseo-fw { transition: color .15s linear; } /* Frase de paso o de cierre */ .rnseo-punch { color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.35; } /* Encabezado en dos columnas arriba de una grilla, dentro de la misma sección */ .rnseo-split-head { margin-bottom: clamp(56px, 6vw, 88px); } .rnseo-actions { margin-top: clamp(48px, 5vw, 64px); } /* Link dentro de un párrafo */ .rnseo-inline { color: var(--rn-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .rnseo-inline:hover { text-decoration-thickness: 2px; } /* Texto en bloque: título, párrafos, link y CTA uno debajo del otro */ .rnseo-flow > * + * { margin-top: 22px; } /* Lista con viñetas azules */ .rnseo-dots { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .rnseo-dots li { position: relative; padding-left: 24px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.55; } .rnseo-dots li::before { content: ""; position: absolute; left: 1px; top: .775em; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--rn-blue); } /* Dos columnas de texto */ .rnseo-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(40px, 6vw, 96px); margin-top: clamp(48px, 5vw, 72px); } /* Dos secciones lado a lado */ .rnseo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rn-gap) var(--rn-col); } .rnseo .rn-cell-text strong, .rnseo-cols strong { font-family: 'Poppins Medium'; font-weight: 500; } /* Las líneas finas de arriba se dibujan al entrar, como en las tarjetas del sistema */ .rn-motion .rnseo.is-anim .rnseo-index li[data-rv]::before { transform: scaleX(0); transition: transform 1.1s var(--rn-ease), background-color .35s ease; transition-delay: .15s; } .rn-motion .rnseo.is-anim .rnseo-index li[data-rv].is-in::before { transform: none; } @media (max-width: 899px) { .rnseo-cols, .rnseo-pair { grid-template-columns: 1fr; } .rn-split.rnseo-split { row-gap: 32px; } /* Bloques con imagen: la imagen va debajo del texto, salvo el sabueso (va arriba) */ .rnseo-media .rn-media { row-gap: 48px; } .rnseo-media .rn-media:not(.rn-media--left) .rn-media-visual { order: 0; max-width: none; } .rnseo-media .rn-media--left .rn-media-visual { max-width: none; } } @media (max-width: 599px) { .rnseo .rn-btn { padding: 14px 24px; font-size: 15px; } } /* Interruptor apagado (data-efectos="off"): todo visible y quieto, aunque el sitio tenga movimiento */ .rn-motion .rnseo[data-efectos="off"] [data-rv] { opacity: 1; transform: none; transition: none; } .rn-motion .rnseo[data-efectos="off"] .rn-cell[data-rv]::before { transform: none; transition: none; } .rn-motion .rnseo[data-efectos="off"] .rn-hero-copy > * { animation: none; } /* end seo page styles */ /* seo hero styles */ /* El hero es el del sistema (rn-hero-grid); el globo de puntos lo dibuja el JS en una capa fija detrás del texto */ .rnseo-hero { position: relative; } .rnseo-hero-copy { will-change: transform, opacity; } /* El punto de la i (mismas medidas que .rn-tittle): con efectos lo reemplaza el punto que viaja a Buenos Aires */ .rnseo-tittle { position: absolute; left: .1325em; top: calc(.35em + var(--rn-lh) * .5em - .697em); width: .17em; height: .17em; margin: -.085em 0 0 -.085em; border-radius: 50%; background: var(--rn-blue); } .rnseo.is-anim .rnseo-tittle { visibility: hidden; } /* Lugar del globo: en escritorio la columna derecha; en pantallas angostas, un cuadrado debajo del texto */ .rnseo-globe { align-self: stretch; } /* Con movimiento reducido el globo se dibuja quieto en un canvas dentro del hero */ .rnseo-hero-field { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } /* En pantallas angostas el texto va centrado y el globo arranca debajo (el JS lo ubica desde .rnseo-globe) */ @media (max-width: 899px) { .rnseo-hero .rn-hero-grid { align-items: start; padding-top: 112px; padding-bottom: 96px; } .rnseo-hero-copy { margin: 0 auto; text-align: center; } .rnseo-hero-copy .rn-hero-list { justify-items: center; } .rnseo-hero-copy .rn-hero-lead { margin-left: auto; margin-right: auto; } .rnseo-globe { height: 0; margin: 8px 0 -48px; } } @media (max-width: 599px) { .rnseo-hero .rn-hero-grid { padding-top: 96px; padding-bottom: 72px; } } /* end seo hero styles */ /* seo reach styles */ /* Cifras y mapa: con efectos la sección queda fija mientras los puntos del globo arman el mapa */ .rnseo-reach-stage { display: flex; align-items: center; padding-top: var(--rn-gap); } .rnseo.is-anim .rnseo-reach-track { height: var(--rnseo-reach-len, 230vh); } .rnseo.is-anim .rnseo-reach-stage { position: sticky; top: var(--rn-header); height: calc(100vh - var(--rn-header)); height: calc(100svh - var(--rn-header)); padding: 48px 0; box-sizing: border-box; } .rnseo-reach-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; } .rnseo-map { position: relative; justify-self: end; width: 100%; aspect-ratio: 61 / 50; } .rnseo.is-anim .rnseo-map { width: min(100%, calc((100vh - var(--rn-header) - 120px) * 1.22)); width: min(100%, calc((100svh - var(--rn-header) - 120px) * 1.22)); } .rnseo-map-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .rnseo-map-label { position: absolute; left: var(--x); top: var(--y); color: var(--rn-ink); font-family: 'Open Sans Medium'; font-weight: 500; font-size: 13px; line-height: 1.2; white-space: nowrap; transform: translate(16px, 8px); } .rnseo-map-label--mia { transform: translate(14px, calc(-100% - 8px)); } .rnseo.is-anim .rnseo-map-label, .rnseo.is-anim .rnseo-stat, .rnseo.is-anim .rnseo-stat-c { opacity: 0; } .rnseo-stats { display: flex; flex-direction: column; } .rnseo-stat + .rnseo-stat { margin-top: clamp(28px, 5vh, 52px); } .rnseo-stat-n { color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(42px, 4.4vw, 68px); line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .rnseo-stat-n b { font-weight: 500; } .rnseo-stat-n span { font-size: .44em; letter-spacing: -.01em; } .rnseo-stat-l { max-width: 24ch; margin-top: 12px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.45; } .rnseo-stat-c { max-width: 36ch; margin-top: 14px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 14px; line-height: 1.6; } @media (max-width: 899px) { .rnseo-reach-grid { grid-template-columns: 1fr; row-gap: 28px; } .rnseo-map { order: -1; justify-self: center; max-width: 560px; } .rnseo.is-anim .rnseo-map { width: min(100%, 560px, calc((100vh - var(--rn-header) - 360px) * 1.22)); width: min(100%, 560px, calc((100svh - var(--rn-header) - 360px) * 1.22)); } .rnseo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; } .rnseo-stat + .rnseo-stat { margin-top: 0; } .rnseo-stat-n { font-size: clamp(28px, 7.4vw, 44px); } .rnseo-stat-l { margin-top: 8px; font-size: 14px; } .rnseo-stat-c { grid-column: 1 / -1; max-width: none; margin-top: 18px; font-size: 13px; } } @media (max-width: 599px) { .rnseo-stat-l { font-size: 13px; } } /* end seo reach styles */ /* seo clients styles */ /* El carrusel de la home (layouts.clients-logos), con sus mismas medidas, debajo del título */ .rnseo-clients .rn-marquee { margin-top: 48px; } .rnseo-note { margin-top: 40px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 16px; line-height: 1.65; text-align: center; } /* end seo clients styles */ /* seo case styles */ /* Caso de éxito: entra completo en una pantalla, texto a la izquierda y curva a la derecha */ .rnseo-case-stage { display: flex; align-items: center; min-height: calc(100vh - var(--rn-header)); min-height: calc(100svh - var(--rn-header)); padding: clamp(28px, 6vh, 64px) 0; box-sizing: border-box; } .rnseo-case-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; } .rnseo-case-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.3; } .rnseo-case-k span { color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; } .rnseo-case-t { max-width: 15ch; margin-top: clamp(14px, 2.4vh, 22px); color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(32px, min(3.6vw, 6.6vh), 60px); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; } .rnseo-case-t b, .rnseo-sales-t b { font-weight: 500; color: var(--rn-blue); } .rnseo-case-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(16px, 2vw, 32px); margin: clamp(24px, 4.4vh, 44px) 0 0; padding: 0; list-style: none; } .rnseo-case-n { color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(28px, min(2.6vw, 4.8vh), 44px); line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .rnseo-case-l { margin-top: 8px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 14px; line-height: 1.4; } .rnseo-case-story { max-width: 46ch; margin-top: clamp(20px, 3.6vh, 36px); color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 16px; line-height: 1.6; } /* Curvas de Search Console: el JS dibuja la línea y el área en el svg y la anima con el scroll */ .rnseo-chart { margin: 0; } .rnseo-chart-plot { position: relative; height: clamp(200px, 48vh, 440px); } .rnseo-chart-plot svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; } .rnseo-chart-line { fill: none; stroke: var(--rn-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rnseo-chart-area { fill: var(--rn-tint); opacity: .6; } .rnseo-chart-base { stroke: var(--rn-ink); stroke-width: 1; } .rnseo-chart-pt { fill: #fff; stroke: var(--rn-blue); stroke-width: 1.5; transition: opacity .3s ease; } .rnseo-chart-end { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--rn-blue); opacity: 0; transition: opacity .3s ease; } .rnseo-chart-end.is-on { opacity: 1; } .rnseo-chart-end::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1.5px solid var(--rn-sky); border-radius: 50%; box-sizing: border-box; opacity: 0; } .rnseo-chart-end.is-on::after { animation: rn-ring 2.4s .3s infinite cubic-bezier(.25, .6, .35, 1); } .rnseo-chart-axis { display: flex; justify-content: space-between; margin-top: 10px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 13px; line-height: 1.4; } .rnseo-chart-cap { margin-top: 6px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 13px; line-height: 1.5; } /* La curva del bloque de ventas, dentro de x-rn.media */ .rnseo-chart--sales .rnseo-case-k { margin-bottom: 12px; } .rnseo-sales-t { max-width: 18ch; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; } .rnseo-chart--sales .rnseo-chart-plot { height: clamp(170px, 20vw, 260px); margin-top: clamp(20px, 2.4vw, 32px); } .rnseo-sales-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin: 24px 0 0; padding: 0; list-style: none; } .rnseo-sales-metrics .rnseo-case-n { font-size: clamp(26px, 2.4vw, 36px); } @media (prefers-reduced-motion: reduce) { .rnseo-chart-end.is-on::after { animation: none; } } @media (max-width: 899px) { .rnseo-case-grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 3vh, 32px); } .rnseo-case-t { max-width: 16ch; font-size: clamp(28px, 7.6vw, 40px); } .rnseo-case-n { font-size: clamp(24px, 6.6vw, 34px); } .rnseo-case-l { font-size: 13px; } .rnseo-case-story { font-size: 15px; } .rnseo-case .rnseo-chart-plot { height: clamp(160px, 28vh, 300px); } .rnseo-chart--sales { width: 100%; } } /* end seo case styles */ /* seo problem styles */ .rnseo-problem .rn-lead { max-width: 58ch; margin-top: 32px; } .rnseo-pre { margin-top: clamp(64px, 7vw, 96px); } .rnseo-problem .rn-grid { margin-top: 32px; } .rnseo-close { display: grid; justify-items: center; gap: 20px; margin-top: clamp(64px, 7vw, 96px); text-align: center; } .rnseo-close .rn-text { max-width: 50ch; } .rnseo-close .rn-btn { margin-top: 12px; } /* end seo problem styles */ /* seo services styles */ /* Servicios: grilla de tarjetas; con efectos y pantalla grande (.is-pin, lo pone el JS) la sección queda fija, la lista a la izquierda marca el servicio actual y cada servicio pasa al frente a la derecha */ .rnseo-svc-grid { display: flex; flex-direction: column; } .rnseo-svc-side { order: 2; margin-top: clamp(48px, 5vw, 64px); } .rnseo-svc-nav { display: none; margin: 0; padding: 0; list-style: none; } .rnseo-svc-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(32px, 4vw, 64px); } .rnseo-svc.is-pin .rnseo-svc-track { height: var(--rnseo-svc-len, 380vh); } .rnseo-svc.is-pin .rnseo-svc-stage { position: sticky; top: var(--rn-header); display: flex; align-items: center; height: calc(100vh - var(--rn-header)); height: calc(100svh - var(--rn-header)); } .rnseo-svc.is-pin .rnseo-svc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: center; } .rnseo-svc.is-pin .rnseo-svc-side { order: 0; margin-top: 0; } .rnseo-svc.is-pin .rnseo-svc-nav { display: block; } .rnseo-svc.is-pin .rnseo-svc-side .rn-actions { margin-top: 40px; } .rnseo-svc.is-pin .rnseo-svc-panels { grid-template-columns: minmax(0, 1fr); gap: 0; } .rnseo-svc.is-pin .rnseo-svc-item { grid-area: 1 / 1; padding-top: 0; opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity .45s ease, transform .7s var(--rn-ease); pointer-events: none; } .rnseo-svc.is-pin .rnseo-svc-item::before { display: none; } .rnseo-svc.is-pin .rnseo-svc-item.is-past { transform: translate3d(0, -32px, 0); } .rnseo-svc.is-pin .rnseo-svc-item.is-cur { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s; } .rnseo-svc.is-pin .rnseo-svc-item .rn-h3 { max-width: 14em; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -.02em; } .rnseo-svc.is-pin .rnseo-svc-item .rn-cell-text { max-width: 28em; margin-top: 24px; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.5; } .rnseo-svc-nav li + li { margin-top: 2px; } .rnseo-svc-nav button { position: relative; display: block; width: 100%; margin: 0; padding: 7px 0 7px 26px; border: 0; background: none; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.35; text-align: left; cursor: pointer; transition: color .3s ease; } .rnseo-svc-nav button::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--rn-tint); transition: background-color .3s ease; } .rnseo-svc-nav button:hover, .rnseo-svc-nav button.is-cur { color: var(--rn-blue); } .rnseo-svc-nav button.is-past::before, .rnseo-svc-nav button.is-cur::before { background: var(--rn-blue); } .rnseo-svc-nav button.is-cur::after { content: ""; position: absolute; left: 6px; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1.5px solid var(--rn-sky); border-radius: 50%; box-sizing: border-box; animation: rn-ring 2s infinite cubic-bezier(.25, .6, .35, 1); } @media (max-width: 1099px) { .rnseo-svc-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .rnseo-svc-panels { grid-template-columns: 1fr; gap: 36px; } } /* end seo services styles */ /* seo world styles */ /* Cada mercado busca distinto: la búsqueda se escribe, se borra y cambia de ciudad */ .rnseo-world .rn-lead { max-width: 56ch; margin-top: 32px; } .rnseo-query { margin: clamp(56px, 6vw, 88px) auto 0; text-align: center; } .rnseo-query-city { display: inline-flex; align-items: center; column-gap: 10px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.3; transition: opacity .3s ease; } .rnseo-query-city::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rn-blue); } .rnseo-query.is-swap .rnseo-query-city { opacity: 0; } .rnseo-query-line { display: block; width: min(100%, 19em); margin: 16px auto 0; padding-bottom: 16px; border-bottom: 1.5px solid var(--rn-ink); color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(24px, 3vw, 46px); line-height: 1.2; letter-spacing: -.02em; text-align: left; white-space: nowrap; } .rnseo-caret { display: inline-block; width: 2px; height: .95em; margin-left: 3px; vertical-align: -.13em; background: var(--rn-blue); animation: rnseo-blink 1.05s steps(1) infinite; } .rnseo:not(.is-anim) .rnseo-caret { display: none; } @keyframes rnseo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .rnseo-world .rn-actions { margin-top: clamp(48px, 5vw, 64px); } @media (max-width: 899px) { .rnseo-query-line { min-height: 2.6em; white-space: normal; } } /* end seo world styles */ /* seo animals styles */ /* La araña entra caminando desde la derecha y el sabueso acompaña el scroll (transform desde el JS) */ .rnseo-spider-sec .rn-media-visual img.rnseo-spider { max-width: 600px; margin-left: auto; will-change: transform; } .rnseo-hound .rn-media-visual img.rnseo-hound-img { max-width: 450px; margin: 0 auto; will-change: transform; } /* La sombra del sabueso llega al borde de la imagen: nada la recorta y el bloque deja aire abajo para su recorrido */ .rnseo-hound .rn-media-visual { overflow: visible; padding: 40px 0; } .rnseo-spider-sec .rn-media-copy .rnseo-dots { margin-top: 28px; } @media (max-width: 899px) { .rnseo-spider-sec .rn-media-visual img.rnseo-spider { margin: 0 auto; } .rnseo-hound .rn-media-visual { padding: 0; } } /* end seo animals styles */ /* seo ai styles */ /* SEO para IA: frase grande que se completa al leerla (rn-fill del sistema) y los nombres de los asistentes */ .rnseo-ai-say { max-width: 28em; margin: clamp(48px, 5vw, 72px) auto 0; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(25px, 2.5vw, 38px); line-height: 1.32; letter-spacing: -.012em; text-align: center; text-wrap: pretty; } .rnseo-ai .rnseo-cols { max-width: 1040px; margin-left: auto; margin-right: auto; } .rnseo-ai-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(28px, 4vw, 64px); margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; list-style: none; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(21px, 2.1vw, 30px); line-height: 1.2; letter-spacing: -.01em; } .rnseo-ai .rn-actions { margin-top: clamp(48px, 5vw, 64px); } /* end seo ai styles */ /* seo process styles */ /* Proceso: la columna izquierda acompaña el scroll y el rastro de diez puntos avanza con el paso que cruza la mitad de la pantalla (js/agencia-seo) */ .rnseo-process-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: start; } .rnseo-process-side { align-self: stretch; } .rnseo-process-sticky { position: sticky; top: calc(var(--rn-header) + 120px); } .rnseo-trail { display: flex; column-gap: 14px; margin-top: 40px; } .rnseo-trail i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--rn-tint); transition: background-color .35s ease; } .rnseo-trail i.is-past, .rnseo-trail i.is-cur { background: var(--rn-blue); } .rnseo-trail i.is-cur::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1.5px solid var(--rn-sky); border-radius: 50%; box-sizing: border-box; animation: rn-ring 2s infinite cubic-bezier(.25, .6, .35, 1); } .rnseo-trail-label { margin-top: 16px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.3; } .rnseo:not(.is-anim) .rnseo-trail, .rnseo:not(.is-anim) .rnseo-trail-label { display: none; } .rnseo-process-side .rn-actions { margin-top: 40px; } .rnseo-steps { margin: 0; padding: 0; list-style: none; } .rnseo-step { position: relative; padding: 32px 0; } .rnseo-step::before, .rnseo-index li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rn-tint); transform-origin: 0 50%; transition: background-color .35s ease; } .rnseo-step:last-child { border-bottom: 1px solid var(--rn-tint); } .rnseo-step.is-cur::before { background: var(--rn-blue); } .rnseo-step-k { color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 14px; line-height: 1.3; } .rnseo-step-t { margin-top: 8px; color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; } .rnseo-step-text { max-width: 56ch; margin-top: 12px; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.6; } @media (max-width: 899px) { .rnseo-process-grid { grid-template-columns: 1fr; row-gap: 32px; } .rnseo-process-sticky { position: static; } .rnseo-trail, .rnseo-trail-label { display: none; } } /* end seo process styles */ /* seo index styles */ /* Por qué Rednodo: filas de título + texto */ .rnseo-index { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rn-tint); } .rnseo-index li { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); padding: 28px 0; } .rnseo-index-t { color: var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.35; } .rnseo-index-text { max-width: 56ch; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.6; } @media (max-width: 899px) { .rnseo-index li { grid-template-columns: 1fr; row-gap: 8px; } } /* end seo index styles */ /* seo compare styles */ /* Comparativa: tabla centrada; las filas entran de a una y las tildes se dibujan. En celular se apila */ .rnseo-compare-intro { max-width: 60ch; margin-top: 28px; } .rnseo-table-wrap { max-width: 1000px; margin: clamp(48px, 5vw, 72px) auto 0; } .rnseo-table { width: 100%; border-collapse: collapse; } .rnseo-table th, .rnseo-table td { padding: 22px 20px 22px 0; border-bottom: 1px solid var(--rn-tint); color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 17px; line-height: 1.5; text-align: left; vertical-align: top; } .rnseo-table thead th { padding-top: 0; border-bottom: 1.5px solid var(--rn-ink); font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; line-height: 1.3; } .rnseo-table thead th:nth-child(2) { color: var(--rn-blue); } .rnseo-table tbody th { width: 34%; font-family: 'Poppins Medium'; font-weight: 500; line-height: 1.45; } .rnseo-mark { display: flex; align-items: flex-start; column-gap: 12px; } .rnseo-mark svg { flex: none; width: 18px; height: 18px; margin-top: 3px; } .rn-motion .rnseo.is-anim .rnseo-table tbody tr { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s ease, transform .8s var(--rn-ease); transition-delay: calc(var(--rv, 0) * 90ms + .15s); } .rn-motion .rnseo.is-anim .rnseo-table-wrap.is-in tbody tr { opacity: 1; transform: none; } .rn-motion .rnseo.is-anim .rnseo-chk path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--rv, 0) * 90ms + .5s); } .rn-motion .rnseo.is-anim .rnseo-table-wrap.is-in .rnseo-chk path { stroke-dashoffset: 0; } @media (max-width: 599px) { .rnseo-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .rnseo-table, .rnseo-table tbody, .rnseo-table tr, .rnseo-table th, .rnseo-table td { display: block; width: auto; } .rnseo-table tr { padding: 20px 0; border-bottom: 1px solid var(--rn-tint); } .rnseo-table tbody th, .rnseo-table td { padding: 0; border: 0; } .rnseo-table tbody th { width: auto; margin-bottom: 12px; } .rnseo-table td + td { margin-top: 8px; } .rnseo-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: 'Poppins Medium'; font-weight: 500; font-size: 13px; line-height: 1.3; } .rnseo-table td:nth-child(2)::before { color: var(--rn-blue); } } /* end seo compare styles */ /* seo faqs styles */ /* Preguntas frecuentes: el acordeón del sitio (rn-faq) con el encabezado del handoff */ .rnseo-faqs .rn-h2 { max-width: 22ch; } /* end seo faqs styles */ /* seo commit styles */ .rnseo-commit .rnseo-sub { max-width: 34ch; } .rnseo-commit .rn-lead { max-width: 56ch; margin-top: 28px; } .rnseo-commit .rn-grid { margin-top: clamp(56px, 6vw, 80px); } .rnseo-closing { max-width: 56ch; margin-top: clamp(48px, 5vw, 64px); } /* end seo commit styles */ /* seo layers styles */ /* Capas fijas del globo, el mapa y el punto (se agregan al body). El globo va detrás del contenido como los objetos de puntos del sistema (sin mix-blend-mode, que traba el scroll); el punto y su estela pasan por encima del texto */ .rnseo-swarm { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .rnseo-dot { position: fixed; left: 0; top: 0; z-index: 40; width: 0; height: 0; pointer-events: none; will-change: transform, opacity; } .rnseo-dot i { position: absolute; left: 0; top: 0; width: var(--d, 16px); height: var(--d, 16px); margin: calc(var(--d, 16px) / -2) 0 0 calc(var(--d, 16px) / -2); border-radius: 50%; box-sizing: border-box; } .rnseo-dot .rnseo-dot-core { background: var(--rn-blue); box-shadow: 0 0 0 calc(var(--d, 16px) * .32) rgba(0, 124, 191, var(--halo, 0)), 0 0 calc(var(--d, 16px) * 1.4) rgba(32, 168, 242, var(--glow, 0)); } .rnseo-dot .rnseo-dot-ring { z-index: 1; border: 1.5px solid var(--rn-sky); opacity: 0; } .rnseo-dot.is-landing .rnseo-dot-core { animation: rnseo-drop 1.15s .7s both; } .rnseo-dot.is-resting .rnseo-dot-ring { animation: rnseo-ring-grow 2.4s 2.2s infinite cubic-bezier(.25, .6, .35, 1), rnseo-ring-fade 2.4s 2.2s infinite linear; } .rnseo-dot.is-home .rnseo-dot-ring { animation: rnseo-ring-grow 2.4s .9s infinite cubic-bezier(.25, .6, .35, 1), rnseo-ring-fade 2.4s .9s infinite linear; } .rnseo-dot-trail { position: fixed; left: 0; top: 0; z-index: 39; width: var(--d, 8px); height: var(--d, 8px); margin: calc(var(--d, 8px) / -2) 0 0 calc(var(--d, 8px) / -2); border-radius: 50%; background: var(--rn-sky); opacity: 0; pointer-events: none; will-change: transform, opacity; } .rnseo-burstwrap { position: fixed; left: 0; top: 0; z-index: 39; width: 0; height: 0; pointer-events: none; } .rnseo-burst { position: absolute; left: 0; top: 0; width: var(--d, 40px); height: var(--d, 40px); margin: calc(var(--d, 40px) / -2) 0 0 calc(var(--d, 40px) / -2); border: 2px solid var(--rn-blue); border-radius: 50%; box-sizing: border-box; opacity: 0; } .rnseo-burst.is-on { animation: rnseo-burst 1.1s var(--rn-ease) both; } @keyframes rnseo-burst { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } } /* El punto cae sobre la i al cargar y rebota */ @keyframes rnseo-drop { 0% { transform: translateY(calc(var(--d, 16px) * -6)); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 12% { opacity: 1; } 55% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 70% { transform: translateY(calc(var(--d, 16px) * -.9)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 84% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 92% { transform: translateY(calc(var(--d, 16px) * -.25)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 100% { transform: translateY(0); opacity: 1; } } /* El anillo nace en el centro del punto y se abre hacia afuera con el mismo grosor de línea */ @keyframes rnseo-ring-grow { 0% { width: 0; height: 0; margin: 0; } 100% { width: calc(var(--d, 16px) * 3.4); height: calc(var(--d, 16px) * 3.4); margin: calc(var(--d, 16px) * -1.7) 0 0 calc(var(--d, 16px) * -1.7); } } @keyframes rnseo-ring-fade { 0% { opacity: 0; } 6% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rnseo-svc-nav button.is-cur::after { animation: none; } } /* end seo layers styles */ /* end agencia seo styles */ /* email marketing styles */ /* * Agencia de Email Marketing: el handoff aprobado (rednodo-email-marketing-handoff), con los tokens y las tipografías del * sitio. Todo lleva el prefijo rnem- y vive dentro de main.rnem; botones, links y apariciones (data-rv, data-rw) son los * de styles-v2.x.css, que tienen las mismas medidas. Los efectos van con html.rn-motion y data-efectos="on" en el main; * sin eso la página queda completa y estática. * Diferencia con el handoff: la capa fija de la @ y del gráfico es la del sistema (rn-swarm, z-index 0 debajo del * contenido) sin mix-blend-mode, que trababa el scroll; los puntos quedan detrás del texto igual que con multiply. */ .rnem { display: block; position: relative; overflow-x: clip; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .rnem *, .rnem *::before, .rnem *::after { box-sizing: border-box; } .rnem p, .rnem ul, .rnem ol, .rnem figure, .rnem h1, .rnem h2, .rnem h3, .rnem address, .rnem table { margin: 0; } .rnem ul, .rnem ol { padding: 0; list-style: none; } .rnem img { display: block; max-width: 100%; height: auto; } .rnem a { color: inherit; } /* styles-v1 le pone tipografía propia a p, li, a y button: adentro de la landing heredan, como en el handoff */ .rnem p, .rnem li, .rnem a, .rnem button { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; } /* Botones y links del sistema (mismas medidas que los del handoff), por encima del reinicio de arriba */ .rnem .rn-btn { color: #fff; font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; line-height: 1.2; } .rnem .rn-link { color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; line-height: 1.4; } .rnem a:focus-visible, .rnem button:focus-visible, .rnem summary:focus-visible { outline: 2px solid var(--rn-blue); outline-offset: 4px; } .rnem [id] { scroll-margin-top: calc(var(--rn-header) + 24px); } /* ---------- Estructura ---------- */ .rnem .rnem-sec { padding: 0 var(--rn-pad); margin-top: var(--rn-gap); } .rnem .rnem-wrap { width: 100%; max-width: var(--rn-max); margin: 0 auto; } .rnem .rnem-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: start; } .rnem .rnem-split--head { margin-bottom: clamp(56px, 6vw, 88px); } .rnem .rnem-center { margin-left: auto; margin-right: auto; text-align: center; } /* En las secciones de dos columnas, el título acompaña el scroll de la columna derecha */ @media (min-width: 900px) { .rnem .rnem-split > :first-child { position: sticky; top: calc(var(--rn-header) + 120px); } } /* ---------- Tipografía ---------- */ .rnem .rnem-h2 { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.14; letter-spacing: -.018em; max-width: 22ch; text-wrap: balance; } .rnem .rnem-h2--sm { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.18; max-width: 20ch; } .rnem .rnem-h2.rnem-center { max-width: 24ch; } .rnem .rnem-h2.rnem-h2--wide { max-width: none; } .rnem .rnem-sub { margin-top: 18px; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.4; color: var(--rn-blue); max-width: 34ch; text-wrap: balance; } .rnem .rnem-h3 { font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.32; letter-spacing: -.005em; } .rnem .rnem-lead { font-size: clamp(19px, 1.45vw, 22px); line-height: 1.55; } .rnem .rnem-txt { max-width: 62ch; } .rnem .rnem-punch { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.35; } .rnem .rnem-flow > * + * { margin-top: 22px; } .rnem .rnem-flow > .rnem-actions { margin-top: 40px; } .rnem .rnem-flow > .rnem-sub { margin-top: 18px; } .rnem .rnem-inline { color: var(--rn-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .rnem .rnem-links { display: flex; flex-wrap: wrap; gap: 12px 32px; } /* ---------- Botones: todos negros con hover azul; son los únicos elementos redondeados ---------- */ .rnem .rnem-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(48px, 5vw, 64px); } .rnem .rnem-actions.rnem-center { justify-content: center; } /* ---------- Grillas abiertas: aire y una línea fina arriba que se dibuja al entrar ---------- */ .rnem .rnem-grid { display: grid; gap: 56px clamp(32px, 4vw, 64px); } .rnem .rnem-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rnem .rnem-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rnem .rnem-cell, .rnem .rnem-tips li, .rnem .rnem-svc-item, .rnem .rnem-case-metrics li { position: relative; padding-top: 24px; } .rnem .rnem-cell::before, .rnem .rnem-tips li::before, .rnem .rnem-index li::before, .rnem .rnem-step::before, .rnem .rnem-svc-item::before, .rnem .rnem-case-metrics li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rn-tint); transform-origin: 0 50%; transition: background-color .35s ease; } .rnem .rnem-cell p, .rnem .rnem-svc-item p { font-size: 17px; line-height: 1.6; } .rnem .rnem-cell .rnem-cell-t + p, .rnem .rnem-svc-item .rnem-h3 + p { margin-top: 12px; } .rnem .rnem-cell-t { font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.32; } .rnem .rnem-tips strong { font-family: 'Poppins Medium'; font-weight: 500; } .rnem .rnem-index { border-bottom: 1px solid var(--rn-tint); } .rnem .rnem-index--gap { margin-top: clamp(72px, 8vw, 112px); } .rnem .rnem-index li { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); padding: 28px 0; } .rnem .rnem-index-t { font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.35; } .rnem .rnem-index-b { font-size: 17px; line-height: 1.6; max-width: 56ch; } .rnem .rnem-index-b .rn-link { display: inline-block; margin-top: 12px; } /* ---------- GALERÍA de trabajos: la de la página actual en una grilla abierta, sin cajas ---------- */ .rnem .rnem-works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); } .rnem .rnem-works img { width: 100%; height: auto; } @media (max-width: 899px) { .rnem .rnem-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Hero: el texto a la izquierda y la @ de puntos a la derecha; en pantallas angostas, la @ va debajo del texto ---------- */ .rnem .rnem-hero { position: relative; } .rnem .rnem-hero-inner { position: relative; display: flex; align-items: center; justify-content: flex-start; min-height: 600px; min-height: max(600px, calc(100vh - var(--rn-header))); min-height: max(600px, calc(100svh - var(--rn-header))); padding: 112px var(--rn-pad) 96px; } .rnem .rnem-hero-copy { position: relative; max-width: 640px; margin-left: max(0px, calc((100% - var(--rn-max)) / 2)); text-align: left; will-change: transform, opacity; } .rnem .rnem-kicker { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; } /* Dos líneas: "Agencia de" / "email marketing". Más chico que el de SEO porque son dos líneas. */ .rnem .rnem-h1 { --rnem-lh: 1.06; margin-top: 16px; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(44px, 4.6vw, 68px); line-height: var(--rnem-lh); letter-spacing: -.025em; } /* El punto azul de la i de "email", como en la home y en la de SEO. La letra sigue siendo una i real (lectura y buscadores): se oculta su punto original y se dibuja otro. Medidas del glifo de la i de Poppins 500 (centro del punto a .1325em del borde y a .697em de la línea base; el tallo llega a .551em). Si cambia el peso hay que recalcularlas. */ .rnem .rnem-word { white-space: nowrap; } .rnem .rnem-iwrap { position: relative; display: inline-block; } .rnem .rnem-i { display: inline-block; --rnem-cut: calc(.35em + var(--rnem-lh) * .5em - .5875em); -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--rnem-cut), #000 var(--rnem-cut)); mask-image: linear-gradient(to bottom, transparent 0, transparent var(--rnem-cut), #000 var(--rnem-cut)); } .rnem .rnem-tittle { position: absolute; left: .1325em; top: calc(.35em + var(--rnem-lh) * .5em - .697em); width: .17em; height: .17em; margin: -.085em 0 0 -.085em; border-radius: 50%; background: var(--rn-blue); } .rn-motion .rnem[data-efectos="on"] .rnem-tittle { visibility: hidden; } .rnem .rnem-hero-list { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 30px; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.4; } .rnem .rnem-hero-list li { display: inline-flex; align-items: center; gap: 10px; } .rnem .rnem-hero-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rn-sky); } .rnem .rnem-hero-text { margin-top: 26px; max-width: 54ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; } .rnem .rnem-hero .rn-btn { margin-top: 36px; } .rnem .rnem-hero-field { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } /* Entrada del hero al cargar: una sola secuencia, de arriba hacia abajo */ .rn-motion .rnem[data-efectos="on"] .rnem-hero-copy > * { animation: rnem-rise 1s var(--rn-ease) both; animation-delay: calc(var(--rv, 0) * 110ms + .1s); } @keyframes rnem-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } @media (min-width: 900px) and (max-width: 1199px) { .rnem .rnem-hero-copy { max-width: 520px; } } @media (max-width: 899px) { /* Debajo del texto queda el lugar de la @ (la dibuja el script en ese espacio) */ .rnem .rnem-hero-inner { justify-content: center; align-items: flex-start; padding-bottom: calc(min(72vw, 300px) + 112px); } .rnem .rnem-hero-copy { margin: 0 auto; text-align: center; } .rnem .rnem-hero-list { align-items: center; } .rnem .rnem-hero-text { margin-left: auto; margin-right: auto; } } /* ---------- Recorrido: los puntos del hero se ordenan por etapa de compra ---------- Con efectos: la sección queda fija mientras se scrollea; los puntos son los mismos del hero (capa fija rn-swarm) y el texto de la izquierda cambia con cada etapa. Sin efectos: el gráfico se dibuja quieto y las etapas son una lista. */ .rnem .rnem-jr { --rnem-jr-lab: 58px; padding: 0 var(--rn-pad); margin-top: clamp(40px, 6vw, 96px); } .rnem .rnem-jr-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head chart" "steps chart"; grid-template-rows: auto 1fr; column-gap: var(--rn-col); align-items: start; } .rnem .rnem-jr-head { grid-area: head; } .rnem .rnem-jr-chart { grid-area: chart; position: relative; margin: 0; height: clamp(340px, 56vh, 540px); } .rnem .rnem-jr-steps { grid-area: steps; margin-top: clamp(32px, 4vw, 48px); } .rnem .rnem-jr-step + .rnem-jr-step { margin-top: 40px; } .rnem .rnem-jr-lead { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; max-width: 42ch; } .rnem .rnem-jr-t { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -.012em; } .rnem .rnem-jr-step p { max-width: 44ch; } .rnem .rnem-jr-t + p { margin-top: 12px; font-size: 17px; line-height: 1.6; } .rnem .rnem-jr-flows { margin-top: 14px; font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--rn-blue); } .rnem .rnem-jr-step .rn-btn { margin-top: 28px; } .rnem .rnem-jr-canvas { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - var(--rnem-jr-lab)); } .rnem .rnem-jr-labels { position: absolute; left: 0; right: 0; bottom: 0; height: var(--rnem-jr-lab); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 8px; padding-top: 14px; border-top: 1px solid var(--rn-tint); } .rnem .rnem-jr-labels li { text-align: center; font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.25; transition: color .35s ease; } .rnem .rnem-jr-labels li.is-cur { color: var(--rn-blue); } @media (min-width: 900px) { html:not(.rn-motion) .rnem .rnem-jr-chart, .rnem[data-efectos="off"] .rnem-jr-chart { position: sticky; top: calc(var(--rn-header) + 120px); } } .rn-motion .rnem[data-efectos="on"] .rnem-jr-track { height: var(--rnem-jr-len, 400vh); } .rn-motion .rnem[data-efectos="on"] .rnem-jr-stage { position: sticky; top: var(--rn-header); display: flex; align-items: center; height: calc(100vh - var(--rn-header)); height: calc(100svh - var(--rn-header)); } .rn-motion .rnem[data-efectos="on"] .rnem-jr-grid { width: 100%; align-items: center; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-head { align-self: end; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-steps { display: grid; align-self: start; } /* El texto que sale se apaga rápido y recién después entra el siguiente, así nunca se superponen */ .rn-motion .rnem[data-efectos="on"] .rnem-jr-step { grid-area: 1/1; margin-top: 0; opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .2s ease, transform .45s var(--rn-ease); pointer-events: none; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-step.is-past { transform: translate3d(0, -24px, 0); } .rn-motion .rnem[data-efectos="on"] .rnem-jr-step.is-cur { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s ease .22s, transform .7s var(--rn-ease) .22s; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-canvas { display: none; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-labels { opacity: 0; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-chart { height: min(540px, calc(100vh - var(--rn-header) - 140px)); height: min(540px, calc(100svh - var(--rn-header) - 140px)); } /* ---------- Clientes: el carrusel de la home (layouts.clients-logos), con sus mismas medidas, debajo del título ---------- */ .rnem .rnem-clients .rn-marquee { margin-top: 48px; } /* ---------- Caso de éxito: entra completo en una pantalla, la historia a la izquierda y las cifras a la derecha ---------- */ .rnem .rnem-case-stage { display: flex; align-items: center; min-height: calc(100vh - var(--rn-header)); min-height: calc(100svh - var(--rn-header)); padding: clamp(28px, 6vh, 64px) 0; } .rnem .rnem-case-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--rn-col); align-items: center; } .rnem .rnem-case-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--rn-blue); } .rnem .rnem-case-k span { font-family: 'Open Sans Regular'; font-weight: 400; font-size: 15px; color: var(--rn-ink); } .rnem .rnem-case-t { margin-top: clamp(14px, 2.4vh, 22px); max-width: 14ch; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(34px, min(3.8vw, 7vh), 62px); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; } .rnem .rnem-case-t b { font-weight: 500; color: var(--rn-blue); } .rnem .rnem-case-story { margin-top: clamp(20px, 3.6vh, 36px); max-width: 48ch; font-size: 17px; line-height: 1.6; } .rnem .rnem-case .rn-link { display: inline-block; margin-top: clamp(18px, 3vh, 28px); } .rnem .rnem-case-metrics { display: grid; row-gap: clamp(24px, 4.4vh, 44px); } .rnem .rnem-case-metrics li { padding-top: clamp(16px, 2.4vh, 24px); } .rnem .rnem-case-n { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(44px, min(4.8vw, 8.4vh), 80px); line-height: 1; letter-spacing: -.03em; color: var(--rn-blue); font-variant-numeric: tabular-nums; } .rnem .rnem-case-l { margin-top: 10px; font-size: 16px; line-height: 1.45; max-width: 28ch; } @media (max-width: 899px) { .rnem .rnem-case-grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 4vh, 40px); } .rnem .rnem-case-t { max-width: 15ch; font-size: clamp(30px, 7.8vw, 42px); } .rnem .rnem-case-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; } .rnem .rnem-case-n { font-size: clamp(28px, 8vw, 44px); } .rnem .rnem-case-l { font-size: 13px; } .rnem .rnem-case-story { font-size: 16px; } } /* ---------- Diagnóstico ---------- */ .rnem .rnem-problem .rnem-lead { margin: 32px auto 0; max-width: 58ch; text-align: center; } .rnem .rnem-pre { margin-top: clamp(64px, 7vw, 96px); } .rnem .rnem-problem .rnem-grid { margin-top: 32px; } .rnem .rnem-close { display: grid; justify-items: center; gap: 20px; margin-top: clamp(64px, 7vw, 96px); text-align: center; } .rnem .rnem-close > p:first-child { max-width: 50ch; } .rnem .rnem-close .rn-btn { margin-top: 12px; } /* ---------- Servicios: con efectos, la lista queda fija y cada servicio pasa al frente ---------- */ .rnem .rnem-svc-grid { display: flex; flex-direction: column; } .rnem .rnem-svc-side { order: 2; } .rnem .rnem-svc-nav { display: none; } .rnem .rnem-svc-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(32px, 4vw, 64px); } .rnem .rnem-svc.is-pin .rnem-svc-track { height: var(--rnem-svc-len, 360vh); } .rnem .rnem-svc.is-pin .rnem-svc-stage { position: sticky; top: var(--rn-header); display: flex; align-items: center; height: calc(100vh - var(--rn-header)); height: calc(100svh - var(--rn-header)); } .rnem .rnem-svc.is-pin .rnem-svc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: center; } .rnem .rnem-svc.is-pin .rnem-svc-side { order: 0; } .rnem .rnem-svc.is-pin .rnem-svc-nav { display: block; } .rnem .rnem-svc.is-pin .rnem-svc-side .rnem-actions { margin-top: 40px; } .rnem .rnem-svc.is-pin .rnem-svc-panels { grid-template-columns: minmax(0, 1fr); gap: 0; } .rnem .rnem-svc.is-pin .rnem-svc-item { grid-area: 1/1; padding-top: 0; opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity .2s ease, transform .45s var(--rn-ease); pointer-events: none; } .rnem .rnem-svc.is-pin .rnem-svc-item::before { display: none; } .rnem .rnem-svc.is-pin .rnem-svc-item.is-past { transform: translate3d(0, -32px, 0); } .rnem .rnem-svc.is-pin .rnem-svc-item.is-cur { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s ease .22s, transform .7s var(--rn-ease) .22s; } .rnem .rnem-svc.is-pin .rnem-svc-item .rnem-h3 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -.02em; max-width: 14em; } .rnem .rnem-svc.is-pin .rnem-svc-item p { margin-top: 24px; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.5; max-width: 28em; } .rnem .rnem-svc-nav li + li { margin-top: 2px; } .rnem .rnem-svc-nav button { position: relative; display: block; width: 100%; margin: 0; padding: 7px 0 7px 26px; background: none; border: 0; font: 500 clamp(16px, 1.3vw, 19px)/1.35 'Poppins Medium'; color: var(--rn-ink); text-align: left; cursor: pointer; transition: color .3s ease; } .rnem .rnem-svc-nav button::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--rn-tint); transition: background-color .3s ease; } .rnem .rnem-svc-nav button:hover, .rnem .rnem-svc-nav button.is-cur { color: var(--rn-blue); } .rnem .rnem-svc-nav button.is-past::before, .rnem .rnem-svc-nav button.is-cur::before { background: var(--rn-blue); } .rnem .rnem-svc-nav button.is-cur::after { content: ""; position: absolute; left: 6px; top: 50%; width: 0; height: 0; border: 1.5px solid var(--rn-sky); border-radius: 50%; transform: translate(-50%, -50%); animation: rnem-trail-ring 2s infinite cubic-bezier(.25, .6, .35, 1); } /* ---------- Bloques con foto ---------- */ .rnem .rnem-media { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--rn-col); align-items: center; } .rnem .rnem-media--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .rnem .rnem-fig img { width: 100%; height: auto; will-change: transform; } .rnem .rnem-fig--bee img { max-width: 540px; margin: 0 auto; } /* ---------- Personalización: el mismo envío con un asunto distinto para cada segmento ---------- */ .rnem .rnem-pers .rnem-lead { margin: 32px auto 0; max-width: 56ch; text-align: center; } .rnem .rnem-subj { margin: clamp(56px, 6vw, 88px) auto 0; text-align: center; } .rnem .rnem-subj-seg { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.3 'Poppins Medium'; color: var(--rn-blue); transition: opacity .3s ease; } .rnem .rnem-subj-seg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rn-blue); } .rnem .rnem-subj.is-swap .rnem-subj-seg { opacity: 0; } .rnem .rnem-subj-line { display: block; width: min(100%, 23em); margin: 16px auto 0; padding-bottom: 16px; border-bottom: 1.5px solid var(--rn-ink); font: 500 clamp(22px, 2.6vw, 40px)/1.2 'Poppins Medium'; letter-spacing: -.02em; text-align: left; white-space: nowrap; } .rnem .rnem-subj-k { margin-right: .7em; font: 400 .42em/1 'Open Sans Regular'; letter-spacing: 0; } .rnem .rnem-caret { display: inline-block; width: 2px; height: .95em; margin-left: 3px; vertical-align: -.13em; background: var(--rn-blue); animation: rnem-blink 1.05s steps(1) infinite; } html:not(.rn-motion) .rnem .rnem-caret, .rnem[data-efectos="off"] .rnem-caret { display: none; } @keyframes rnem-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .rnem .rnem-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 96px); row-gap: 22px; margin-top: clamp(48px, 5vw, 72px); } .rnem .rnem-pers .rnem-cols, .rnem .rnem-wa .rnem-cols { max-width: 1040px; margin-left: auto; margin-right: auto; } /* ---------- Proceso: la columna izquierda acompaña el scroll y el rastro avanza con cada paso ---------- */ .rnem .rnem-process-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: start; } .rnem .rnem-process-side { align-self: stretch; } .rnem .rnem-process-sticky { position: sticky; top: calc(var(--rn-header) + 120px); } .rnem .rnem-trail { display: flex; gap: 14px; margin-top: 40px; } .rnem .rnem-trail i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--rn-tint); transition: background-color .35s ease; } .rnem .rnem-trail i.is-past, .rnem .rnem-trail i.is-cur { background: var(--rn-blue); } .rnem .rnem-trail i.is-cur::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border: 1.5px solid var(--rn-sky); border-radius: 50%; transform: translate(-50%, -50%); animation: rnem-trail-ring 2s infinite cubic-bezier(.25, .6, .35, 1); } .rnem .rnem-trail-label { margin-top: 16px; font: 500 15px/1.3 'Poppins Medium'; color: var(--rn-blue); } html:not(.rn-motion) .rnem .rnem-trail, .rnem[data-efectos="off"] .rnem-trail, html:not(.rn-motion) .rnem .rnem-trail-label, .rnem[data-efectos="off"] .rnem-trail-label { display: none; } .rnem .rnem-process-side .rnem-actions { margin-top: 40px; } .rnem .rnem-step { position: relative; padding: 32px 0; } .rnem .rnem-step:last-child { border-bottom: 1px solid var(--rn-tint); } .rnem .rnem-step.is-cur::before { background: var(--rn-blue); } .rnem .rnem-step-k { font-family: 'Poppins Medium'; font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--rn-blue); } .rnem .rnem-step-t { margin-top: 8px; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; } .rnem .rnem-step-t + p { margin-top: 12px; font-size: 17px; line-height: 1.6; max-width: 56ch; } @keyframes rnem-trail-ring { 0% { width: 0; height: 0; opacity: 0; } 8% { opacity: 1; } 100% { width: 32px; height: 32px; opacity: 0; } } /* ---------- Pares de secciones ---------- */ .rnem .rnem-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rn-col); row-gap: var(--rn-gap); } /* ---------- Frase que se completa palabra por palabra mientras se lee ---------- */ .rnem .rnem-say { max-width: 28em; margin: clamp(40px, 4.4vw, 64px) auto 0; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.32; letter-spacing: -.012em; text-align: center; text-wrap: pretty; } .rnem .rnem-fill .rnem-fw { transition: color .15s linear; } /* ---------- Tablas comparativas ---------- */ .rnem .rnem-compare-intro { margin-top: 28px; max-width: 62ch; } .rnem .rnem-table-wrap { max-width: 1080px; margin: clamp(48px, 5vw, 72px) auto 0; } .rnem .rnem-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.55; } .rnem .rnem-table th, .rnem .rnem-table td { padding: 22px 24px 22px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rn-tint); } .rnem .rnem-table th:last-child, .rnem .rnem-table td:last-child { padding-right: 0; } .rnem .rnem-table thead th { padding-top: 0; font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; line-height: 1.3; border-bottom: 1.5px solid var(--rn-ink); } .rnem .rnem-table thead th.is-hl { color: var(--rn-blue); } .rnem .rnem-table tbody th { width: 22%; font-family: 'Poppins Medium'; font-weight: 500; font-size: 17px; line-height: 1.4; } .rnem .rnem-table--plat tbody th { width: 25%; } .rnem .rnem-table-ex { display: block; margin-top: 6px; font-family: 'Open Sans Regular'; font-weight: 400; font-size: 14px; line-height: 1.45; } .rnem .rnem-mark { display: flex; align-items: flex-start; gap: 10px; } .rnem .rnem-mark svg { flex: none; width: 18px; height: 18px; margin-top: 3px; } .rnem .rnem-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; font-size: 14px; line-height: 1.4; } .rnem .rnem-legend li { display: inline-flex; align-items: center; gap: 8px; } .rnem .rnem-legend svg { width: 16px; height: 16px; } .rnem .rnem-table-after { margin: clamp(40px, 4.4vw, 56px) auto 0; max-width: 40ch; text-align: center; } .rnem .rnem-table-after + .rnem-links { justify-content: center; margin-top: 24px; } /* ---------- Consejos ---------- */ .rnem .rnem-tips li { font-size: 17px; line-height: 1.6; } /* ---------- Preguntas frecuentes ---------- */ .rnem .rnem-faq-list { border-bottom: 1px solid var(--rn-tint); } .rnem .rnem-faq-item { border-top: 1px solid var(--rn-tint); } .rnem .rnem-faq-item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; } .rnem .rnem-faq-item summary::-webkit-details-marker { display: none; } .rnem .rnem-faq-q { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.4; transition: color .2s ease; } .rnem .rnem-faq-item summary:hover .rnem-faq-q, .rnem .rnem-faq-item[open] .rnem-faq-q { color: var(--rn-blue); } .rnem .rnem-faq-icon { position: relative; flex: none; width: 20px; height: 20px; margin-top: 5px; } .rnem .rnem-faq-icon::before, .rnem .rnem-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--rn-ink); transform: translate(-50%, -50%); transition: transform .3s var(--rn-ease); } .rnem .rnem-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .rnem .rnem-faq-item[open] .rnem-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .rnem .rnem-faq-body { overflow: hidden; } .rnem .rnem-faq-a { padding: 0 44px 28px 0; max-width: 64ch; font-size: 17px; line-height: 1.65; } /* ---------- Movimiento al scrollear (solo con efectos encendidos) ---------- */ .rn-motion .rnem[data-efectos="on"] [data-rv]::before { transform: scaleX(0); transition: transform 1.1s var(--rn-ease), background-color .35s ease; transition-delay: calc(var(--rv, 0) * 80ms + .15s); } .rn-motion .rnem[data-efectos="on"] [data-rv].is-in::before { transform: none; } /* Títulos: las palabras suben y se enfocan una detrás de otra */ /* Tablas: las filas entran de a una y las tildes se dibujan */ .rn-motion .rnem[data-efectos="on"] .rnem-table tbody tr { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s ease, transform .8s var(--rn-ease); transition-delay: calc(var(--rv, 0) * 90ms + .15s); } .rn-motion .rnem[data-efectos="on"] .rnem-table-wrap.is-in tbody tr { opacity: 1; transform: none; } .rn-motion .rnem[data-efectos="on"] .rnem-chk path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--rv, 0) * 90ms + .5s); } .rn-motion .rnem[data-efectos="on"] .rnem-table-wrap.is-in .rnem-chk path { stroke-dashoffset: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1099px) { .rnem .rnem-grid--3, .rnem .rnem-svc-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 899px) { .rnem .rnem-split, .rnem .rnem-media, .rnem .rnem-media--rev, .rnem .rnem-process-grid { grid-template-columns: 1fr; row-gap: 32px; } .rnem .rnem-media { row-gap: 48px; } .rnem .rnem-media--rev .rnem-fig { order: -1; } .rnem .rnem-process-sticky { position: static; } .rnem .rnem-trail, .rnem .rnem-trail-label { display: none; } .rnem .rnem-index li { grid-template-columns: 1fr; row-gap: 8px; } .rnem .rnem-pair, .rnem .rnem-cols { grid-template-columns: 1fr; } .rnem .rnem-subj-line { white-space: normal; min-height: 2.6em; } /* Recorrido en pantallas angostas: título arriba, gráfico al medio y la etapa debajo */ .rnem .rnem-jr { --rnem-jr-lab: 50px; } .rnem .rnem-jr-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "chart" "steps"; grid-template-rows: auto; row-gap: 28px; } .rnem .rnem-jr-chart { height: 300px; } .rnem .rnem-jr-steps { margin-top: 0; } .rnem .rnem-jr-labels { column-gap: 4px; padding-top: 10px; } .rnem .rnem-jr-labels li { font-size: 12px; hyphens: auto; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-stage { align-items: flex-start; padding-top: clamp(16px, 3.4svh, 40px); } .rn-motion .rnem[data-efectos="on"] .rnem-jr-grid { row-gap: clamp(14px, 2.6svh, 28px); } .rn-motion .rnem[data-efectos="on"] .rnem-jr-chart { height: clamp(190px, 34svh, 300px); } .rn-motion .rnem[data-efectos="on"] .rnem-jr-head .rnem-h2 { font-size: clamp(26px, 7vw, 32px); } .rn-motion .rnem[data-efectos="on"] .rnem-jr-head .rnem-sub { margin-top: 8px; font-size: 16px; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-t { font-size: 20px; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-t + p, .rn-motion .rnem[data-efectos="on"] .rnem-jr-lead { font-size: 15.5px; line-height: 1.55; } } @media (max-width: 599px) { .rnem .rnem-grid--2, .rnem .rnem-grid--3, .rnem .rnem-svc-panels { grid-template-columns: 1fr; gap: 36px; } .rnem .rnem-hero-inner { padding: 96px 24px calc(min(72vw, 300px) + 104px); } .rnem .rnem-h1 { font-size: clamp(30px, 8.6vw, 44px); } .rnem .rnem-hero-list { gap: 8px; } .rnem .rnem-faq-a { padding-right: 0; } } /* ---------- Tablas en pantallas angostas ---------- Cada tabla se reorganiza según cómo se lee mejor, sin duplicar contenido (solo CSS; los roles ARIA mantienen la tabla accesible). Jerarquía de las tres: nombre del bloque (Poppins 21px) > rótulo del dato (Poppins 14px, azul) > texto (Open Sans 16px). --by-col: un bloque por opción, con todos sus atributos (email vs. automation vs. CRM; interno vs. freelancer vs. agencia). --by-row: un bloque por fila, con su título (tipos de plataforma). --pair: dos opciones lado a lado, con sus nombres fijos arriba mientras se recorre la tabla (email vs. WhatsApp). */ @media (max-width: 719px) { .rnem .rnem-table { display: grid; grid-template-columns: minmax(0, 1fr); font-size: 16px; line-height: 1.55; } .rnem .rnem-table thead, .rnem .rnem-table tbody, .rnem .rnem-table tr { display: contents; } .rnem .rnem-table th, .rnem .rnem-table td, .rnem .rnem-table tbody th, .rnem .rnem-table--plat tbody th { display: block; width: auto; padding: 0; border: 0; } .rnem .rnem-table td::before { display: block; margin-bottom: 4px; font: 500 14px/1.3 'Poppins Medium'; color: var(--rn-blue); } .rnem .rnem-table .rnem-corner { display: none; } /* Un bloque por opción */ .rnem .rnem-table--by-col tbody th { display: none; } .rnem .rnem-table--by-col thead th { order: var(--o); margin-top: 44px; padding-top: 20px; border-top: 1.5px solid var(--rn-ink); font: 500 21px/1.25 'Poppins Medium'; } .rnem .rnem-table--by-col thead th:nth-child(2) { margin-top: 0; } .rnem .rnem-table--by-col thead th.is-hl { color: var(--rn-blue); border-top-color: var(--rn-blue); } .rnem .rnem-table--by-col td { order: var(--o); margin-top: 18px; } .rnem .rnem-table--by-col td::before { content: attr(data-row); } /* Un bloque por fila */ .rnem .rnem-table--by-row thead th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .rnem .rnem-table--by-row tbody th { margin-top: 44px; padding-top: 20px; border-top: 1.5px solid var(--rn-ink); font: 500 21px/1.25 'Poppins Medium'; } .rnem .rnem-table--by-row tbody tr:first-child th { margin-top: 0; } .rnem .rnem-table--by-row td { margin-top: 18px; } .rnem .rnem-table--by-row td::before { content: attr(data-col); } .rnem .rnem-table--by-row .rnem-table-ex { margin-top: 6px; font-size: 15px; } /* Dos opciones lado a lado */ .rnem .rnem-table--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .rnem .rnem-table--pair thead th { position: sticky; top: var(--rn-header); z-index: 1; padding: 14px 0 12px; background: var(--rn-bg); border-bottom: 1.5px solid var(--rn-ink); font: 500 18px/1.25 'Poppins Medium'; } .rnem .rnem-table--pair tbody th { grid-column: 1/-1; margin-top: 24px; font: 500 14px/1.3 'Poppins Medium'; color: var(--rn-blue); } .rnem .rnem-table--pair tbody tr + tr th { padding-top: 22px; border-top: 1px solid var(--rn-tint); } .rnem .rnem-table--pair td { margin-top: 8px; font-size: 15px; line-height: 1.5; } .rnem .rnem-table--pair td::before { content: none; } /* Celdas con marca: la marca va al lado del rótulo y el texto debajo */ .rnem .rnem-table td.has-mark { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; } .rnem .rnem-table td.has-mark::before { grid-column: 2; grid-row: 1; } .rnem .rnem-table td.has-mark .rnem-mark { display: contents; } .rnem .rnem-table td.has-mark .rnem-mark svg { grid-column: 1; grid-row: 1; margin-top: 0; } .rnem .rnem-table td.has-mark .rnem-mark > span { grid-column: 2; grid-row: 2; } .rnem .rnem-legend { margin-top: 32px; } } @media (max-width: 359px) { .rnem .rnem-word { white-space: normal; } } /* Celulares bajos (por ejemplo 375 x 667): el recorrido fijo achica gráfico, títulos y textos para que el cierre con su botón entre completo debajo del header */ @media (max-width: 899px) and (max-height: 740px) { .rn-motion .rnem[data-efectos="on"] .rnem-jr-stage { padding-top: 12px; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-grid { row-gap: 12px; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-chart { height: clamp(170px, 30svh, 240px); } .rn-motion .rnem[data-efectos="on"] .rnem-jr-head .rnem-h2 { font-size: 24px; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-head .rnem-sub { margin-top: 6px; font-size: 15px; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-t { font-size: 18px; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-t + p, .rn-motion .rnem[data-efectos="on"] .rnem-jr-lead { font-size: 14.5px; line-height: 1.5; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-flows { margin-top: 8px; font-size: 13.5px; } .rn-motion .rnem[data-efectos="on"] .rnem-jr-step .rn-btn { margin-top: 14px; min-height: 46px; padding: 11px 22px; } } /* ---------- Capas fijas del punto y las partículas (se agregan al body) ---------- */ .rnem-dot { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; will-change: transform, opacity; } .rnem-dot, .rnem-dot i, .rnem-dot-trail, .rnem-burst { box-sizing: border-box; } .rnem-dot i { position: absolute; left: 0; top: 0; border-radius: 50%; width: var(--d, 16px); height: var(--d, 16px); margin: calc(var(--d, 16px) / -2) 0 0 calc(var(--d, 16px) / -2); } .rnem-dot .rnem-dot-core { background: var(--rn-blue); box-shadow: 0 0 0 calc(var(--d, 16px) * .32) rgba(0, 124, 191, var(--halo, 0)), 0 0 calc(var(--d, 16px) * 1.4) rgba(32, 168, 242, var(--glow, 0)); } .rnem-dot .rnem-dot-ring { z-index: 1; border: 1.5px solid var(--rn-sky); opacity: 0; } .rnem-dot.is-landing .rnem-dot-core { animation: rnem-drop 1.15s .7s both; } /* En reposo sobre la i, el anillo late cada 2,4 s y cada dos latidos sale una onda por la base (la dispara el script) */ .rnem-dot.is-resting .rnem-dot-ring { animation: rnem-ring-grow 2.4s 2.2s infinite cubic-bezier(.25, .6, .35, 1), rnem-ring-fade 2.4s 2.2s infinite linear; } .rnem-dot.is-home .rnem-dot-ring { animation: rnem-ring-grow 2.4s .9s infinite cubic-bezier(.25, .6, .35, 1), rnem-ring-fade 2.4s .9s infinite linear; } .rnem-burstwrap { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 39; pointer-events: none; } .rnem-burst { position: absolute; left: 0; top: 0; width: var(--d, 40px); height: var(--d, 40px); margin: calc(var(--d, 40px) / -2) 0 0 calc(var(--d, 40px) / -2); border-radius: 50%; border: 2px solid var(--rn-blue); opacity: 0; } .rnem-burst.is-on { animation: rnem-burst 1.1s cubic-bezier(.2, .7, .2, 1) both; } .rnem-dot-trail { position: fixed; left: 0; top: 0; width: var(--d, 8px); height: var(--d, 8px); margin: calc(var(--d, 8px) / -2) 0 0 calc(var(--d, 8px) / -2); border-radius: 50%; background: var(--rn-sky); opacity: 0; z-index: 39; pointer-events: none; will-change: transform, opacity; } @keyframes rnem-burst { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } } @keyframes rnem-drop { 0% { transform: translateY(calc(var(--d, 16px) * -6)); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 12% { opacity: 1; } 55% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 70% { transform: translateY(calc(var(--d, 16px) * -.9)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 84% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 92% { transform: translateY(calc(var(--d, 16px) * -.25)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 100% { transform: translateY(0); opacity: 1; } } /* El anillo nace en el centro del punto y se abre hacia afuera con el mismo grosor de línea */ @keyframes rnem-ring-grow { 0% { width: 0; height: 0; margin: 0; } 100% { width: calc(var(--d, 16px) * 3.4); height: calc(var(--d, 16px) * 3.4); margin: calc(var(--d, 16px) * -1.7) 0 0 calc(var(--d, 16px) * -1.7); } } @keyframes rnem-ring-fade { 0% { opacity: 0; } 6% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rnem .rnem-trail i.is-cur::after, .rnem .rnem-svc-nav button.is-cur::after { animation: none; } } /* end email marketing styles */ /* internas styles */ /* * Internas de Transformar (Estrategia digital de negocio, Growth marketing, Consultoría de marketing y Branding), Atraer * (Redes sociales, Publicidad digital e Inbound y outbound), Convertir (Desarrollo web, Agencia creativa e IA aplicada) y * Automatizar (Marketing Automation, HubSpot, Marketo, Salesforce y Marketing Outsourcing): * sus handoffs comparten la misma base, con los tokens y las tipografías del sitio. Lo propio de Atraer y de Convertir va al * final del bloque. Todo lleva el prefijo * rnt- y vive dentro de div.rnt; botones, links y apariciones (data-rv, data-rw) son los de styles-v2.x.css, que tienen las * mismas medidas. Cada página elige su objeto y su gráfico con data-obj y data-viz en .rnt. * Los efectos van con html.rn-motion y data-efectos="on" en .rnt; sin eso la página queda completa y estática. * Diferencia con el handoff (igual que en Email Marketing): la capa fija de los puntos es la del sistema (rn-swarm, z-index 0 * debajo del contenido) sin mix-blend-mode, que trababa el scroll; los puntos quedan detrás del texto igual que con multiply. */ .rnt { --rnt-stick: calc(var(--rn-header) + 120px); display: block; position: relative; overflow-x: clip; color: var(--rn-ink); font-family: 'Open Sans Regular'; font-weight: 400; font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .rnt *, .rnt *::before, .rnt *::after { box-sizing: border-box; } .rnt p, .rnt ul, .rnt ol, .rnt figure, .rnt h1, .rnt h2, .rnt h3, .rnt address, .rnt table { margin: 0; } .rnt ul, .rnt ol { padding: 0; list-style: none; } .rnt img { display: block; max-width: 100%; height: auto; } .rnt a { color: inherit; } /* styles-v1 le pone tipografía propia a p, li, a y button: adentro de la página heredan, como en el handoff */ .rnt p, .rnt li, .rnt a, .rnt button { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; } /* Botones y links del sistema (mismas medidas que los del handoff), por encima del reinicio de arriba */ .rnt .rn-btn { color: #fff; font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; line-height: 1.2; } .rnt .rn-link { color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; line-height: 1.4; } .rnt a:focus-visible, .rnt button:focus-visible, .rnt summary:focus-visible { outline: 2px solid var(--rn-blue); outline-offset: 4px; } .rnt [id] { scroll-margin-top: calc(var(--rn-header) + 24px); } /* ---------- Estructura ---------- */ .rnt .rnt-sec { padding: 0 var(--rn-pad); margin-top: var(--rn-gap); } .rnt .rnt-wrap { width: 100%; max-width: var(--rn-max); margin: 0 auto; } .rnt .rnt-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: start; } .rnt .rnt-split--head { margin-bottom: clamp(56px, 6vw, 88px); } .rnt .rnt-center { margin-left: auto; margin-right: auto; text-align: center; } /* En las secciones de dos columnas, el título acompaña el scroll de la columna derecha */ @media (min-width: 900px) { .rnt .rnt-split > :first-child { position: sticky; top: var(--rnt-stick); } } /* ---------- Tipografía ---------- */ .rnt .rnt-h2 { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.14; letter-spacing: -.018em; max-width: 22ch; text-wrap: balance; } .rnt .rnt-h2--sm { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.18; max-width: 20ch; } .rnt .rnt-h2.rnt-center { max-width: 24ch; } .rnt .rnt-h2.rnt-h2--wide { max-width: none; } .rnt .rnt-sub { margin-top: 18px; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.4; color: var(--rn-blue); max-width: 34ch; text-wrap: balance; } .rnt .rnt-h3 { font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.32; letter-spacing: -.005em; } .rnt .rnt-lead { font-size: clamp(19px, 1.45vw, 22px); line-height: 1.55; } .rnt .rnt-txt { max-width: 62ch; } .rnt .rnt-punch { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.35; } .rnt .rnt-flow > * + * { margin-top: 22px; } .rnt .rnt-flow > .rnt-actions { margin-top: 40px; } .rnt .rnt-flow > .rnt-sub { margin-top: 18px; } .rnt .rnt-inline { color: var(--rn-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .rnt .rnt-links { display: flex; flex-wrap: wrap; gap: 12px 32px; } /* ---------- Botones: los del sistema (rn-btn, CTA al formulario en naranja); acá solo la fila de acciones ---------- */ .rnt .rnt-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(48px, 5vw, 64px); } .rnt .rnt-actions.rnt-center { justify-content: center; } /* ---------- Grillas abiertas: aire y una línea fina arriba que se dibuja al entrar ---------- */ .rnt .rnt-grid { display: grid; gap: 56px clamp(32px, 4vw, 64px); } .rnt .rnt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rnt .rnt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rnt .rnt-cell, .rnt .rnt-tips li, .rnt .rnt-svc-item, .rnt .rnt-case-metrics li { position: relative; padding-top: 24px; } .rnt .rnt-cell::before, .rnt .rnt-tips li::before, .rnt .rnt-index li::before, .rnt .rnt-step::before, .rnt .rnt-svc-item::before, .rnt .rnt-case-metrics li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rn-tint); transform-origin: 0 50%; transition: background-color .35s ease; } .rnt .rnt-cell p, .rnt .rnt-svc-item p { font-size: 17px; line-height: 1.6; } .rnt .rnt-cell .rnt-cell-t + p, .rnt .rnt-svc-item .rnt-h3 + p { margin-top: 12px; } .rnt .rnt-cell-t { font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.32; } .rnt .rnt-tips strong { font-family: 'Poppins Medium'; font-weight: 500; } .rnt .rnt-index { border-bottom: 1px solid var(--rn-tint); } .rnt .rnt-index li { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); padding: 28px 0; } .rnt .rnt-index-t { font-family: 'Poppins Medium'; font-weight: 500; font-size: 20px; line-height: 1.35; } .rnt .rnt-index-b { font-size: 17px; line-height: 1.6; max-width: 56ch; } .rnt .rnt-index-b .rn-link { display: inline-block; margin-top: 12px; } /* ---------- Hero: el texto a la izquierda y el objeto de puntos a la derecha; en pantallas angostas, el objeto va debajo del texto ---------- */ .rnt .rnt-hero { position: relative; } .rnt .rnt-hero-inner { position: relative; display: flex; align-items: center; justify-content: flex-start; min-height: 600px; min-height: max(600px, calc(100vh - var(--rn-header))); min-height: max(600px, calc(100svh - var(--rn-header))); padding: 112px var(--rn-pad) 96px; } .rnt .rnt-hero-copy { position: relative; max-width: 640px; margin-left: max(0px, calc((100% - var(--rn-max)) / 2)); text-align: left; will-change: transform, opacity; } .rnt .rnt-kicker { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; } /* Dos líneas: más chico que el de SEO */ .rnt .rnt-h1 { --rnt-lh: 1.06; margin-top: 16px; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(44px, 4.6vw, 68px); line-height: var(--rnt-lh); letter-spacing: -.025em; } /* El punto azul de la i del título, como en la home y en la de SEO. La letra sigue siendo una i real (lectura y buscadores): se oculta su punto original y se dibuja otro. Medidas del glifo de la i de Poppins 500 (centro del punto a .1325em del borde y a .697em de la línea base; el tallo llega a .551em). Si cambia el peso hay que recalcularlas. */ .rnt .rnt-word { white-space: nowrap; } .rnt .rnt-iwrap { position: relative; display: inline-block; } .rnt .rnt-i { display: inline-block; --rnt-cut: calc(.35em + var(--rnt-lh) * .5em - .5875em); -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--rnt-cut), #000 var(--rnt-cut)); mask-image: linear-gradient(to bottom, transparent 0, transparent var(--rnt-cut), #000 var(--rnt-cut)); } .rnt .rnt-tittle { position: absolute; left: .1325em; top: calc(.35em + var(--rnt-lh) * .5em - .697em); width: .17em; height: .17em; margin: -.085em 0 0 -.085em; border-radius: 50%; background: var(--rn-blue); } .rn-motion .rnt[data-efectos="on"] .rnt-tittle { visibility: hidden; } .rnt .rnt-hero-list { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 30px; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.4; } .rnt .rnt-hero-list li { display: inline-flex; align-items: center; gap: 10px; } .rnt .rnt-hero-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rn-sky); } .rnt .rnt-hero-text { margin-top: 26px; max-width: 54ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; } .rnt .rnt-hero .rn-btn { margin-top: 36px; } .rnt .rnt-hero-field { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } /* Entrada del hero al cargar: una sola secuencia, de arriba hacia abajo */ .rn-motion .rnt[data-efectos="on"] .rnt-hero-copy > * { animation: rnt-rise 1s var(--rn-ease) both; animation-delay: calc(var(--rv, 0) * 110ms + .1s); } @keyframes rnt-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } @media (min-width: 900px) and (max-width: 1199px) { .rnt .rnt-hero-copy { max-width: 520px; } } @media (max-width: 899px) { /* Debajo del texto queda el lugar del objeto (lo dibuja el script en ese espacio); el ojo es más bajo y reserva menos */ .rnt .rnt-hero-inner { justify-content: center; align-items: flex-start; padding-bottom: calc(var(--rnt-objh, min(72vw, 300px)) + 112px); } .rnt .rnt-hero-copy { margin: 0 auto; text-align: center; } .rnt .rnt-hero-list { align-items: center; } .rnt .rnt-hero-text { margin-left: auto; margin-right: auto; } } /* ---------- Recorrido: los puntos del objeto del hero arman el gráfico de cada página ---------- Con efectos: la sección queda fija mientras se scrollea; los puntos son los mismos del hero (capa rn-swarm del sistema) y el texto de la izquierda cambia con cada etapa. Sin efectos: el gráfico se dibuja quieto y las etapas son una lista. */ .rnt .rnt-jr { padding: 0 var(--rn-pad); margin-top: clamp(40px, 6vw, 96px); } .rnt .rnt-jr-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head chart" "steps chart"; grid-template-rows: auto 1fr; column-gap: var(--rn-col); align-items: start; } .rnt .rnt-jr-head { grid-area: head; } .rnt .rnt-jr-chart { grid-area: chart; position: relative; margin: 0; height: clamp(340px, 56vh, 540px); } .rnt .rnt-jr-steps { grid-area: steps; margin-top: clamp(32px, 4vw, 48px); } .rnt .rnt-jr-step + .rnt-jr-step { margin-top: 40px; } .rnt .rnt-jr-lead { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; max-width: 42ch; } .rnt .rnt-jr-t { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -.012em; } .rnt .rnt-jr-step p { max-width: 44ch; } .rnt .rnt-jr-t + p { margin-top: 12px; font-size: 17px; line-height: 1.6; } .rnt .rnt-jr-flows { margin-top: 14px; font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--rn-blue); } .rnt .rnt-jr-step .rn-btn { margin-top: 28px; } .rnt .rnt-jr-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } @media (min-width: 900px) { html:not(.rn-motion) .rnt .rnt-jr-chart, .rnt[data-efectos="off"] .rnt-jr-chart { position: sticky; top: var(--rnt-stick); } } .rn-motion .rnt[data-efectos="on"] .rnt-jr-track { height: var(--rnt-jr-len, 400vh); } .rn-motion .rnt[data-efectos="on"] .rnt-jr-stage { position: sticky; top: var(--rn-header); display: flex; align-items: center; height: calc(100vh - var(--rn-header)); height: calc(100svh - var(--rn-header)); } .rn-motion .rnt[data-efectos="on"] .rnt-jr-grid { width: 100%; align-items: center; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-head { align-self: end; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-steps { display: grid; align-self: start; } /* El texto que sale se apaga rápido y recién después entra el siguiente, así nunca se superponen */ .rn-motion .rnt[data-efectos="on"] .rnt-jr-step { grid-area: 1/1; margin-top: 0; opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .2s ease, transform .45s var(--rn-ease); pointer-events: none; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-step.is-past { transform: translate3d(0, -24px, 0); } .rn-motion .rnt[data-efectos="on"] .rnt-jr-step.is-cur { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s ease .22s, transform .7s var(--rn-ease) .22s; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-canvas { display: none; } .rn-motion .rnt[data-efectos="on"] .rnt-vlabs { opacity: 0; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-chart { height: min(540px, calc(100vh - var(--rn-header) - 140px)); height: min(540px, calc(100svh - var(--rn-header) - 140px)); } /* ---------- Clientes: el carrusel de la home (layouts.clients-logos), con sus mismas medidas, debajo del título ---------- */ .rnt .rnt-clients .rn-marquee { margin-top: 48px; } /* ---------- Diagnóstico ---------- */ .rnt .rnt-problem .rnt-lead { margin: 32px auto 0; max-width: 58ch; text-align: center; } .rnt .rnt-pre { margin-top: clamp(64px, 7vw, 96px); } .rnt .rnt-problem .rnt-grid { margin-top: 32px; } .rnt .rnt-close { display: grid; justify-items: center; gap: 20px; margin-top: clamp(64px, 7vw, 96px); text-align: center; } .rnt .rnt-close > p:first-child { max-width: 50ch; } .rnt .rnt-close .rn-btn { margin-top: 12px; } /* ---------- Servicios: con efectos, la lista queda fija y cada servicio pasa al frente ---------- */ .rnt .rnt-svc-grid { display: flex; flex-direction: column; } .rnt .rnt-svc-side { order: 2; } .rnt .rnt-svc-nav { display: none; } .rnt .rnt-svc-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(32px, 4vw, 64px); } .rnt .rnt-svc.is-pin .rnt-svc-track { height: var(--rnt-svc-len, 360vh); } .rnt .rnt-svc.is-pin .rnt-svc-stage { position: sticky; top: var(--rn-header); display: flex; align-items: center; height: calc(100vh - var(--rn-header)); height: calc(100svh - var(--rn-header)); } .rnt .rnt-svc.is-pin .rnt-svc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rn-col); align-items: center; } .rnt .rnt-svc.is-pin .rnt-svc-side { order: 0; } .rnt .rnt-svc.is-pin .rnt-svc-nav { display: block; } .rnt .rnt-svc.is-pin .rnt-svc-side .rnt-actions { margin-top: 40px; } .rnt .rnt-svc.is-pin .rnt-svc-panels { grid-template-columns: minmax(0, 1fr); gap: 0; } .rnt .rnt-svc.is-pin .rnt-svc-item { grid-area: 1/1; padding-top: 0; opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity .2s ease, transform .45s var(--rn-ease); pointer-events: none; } .rnt .rnt-svc.is-pin .rnt-svc-item::before { display: none; } .rnt .rnt-svc.is-pin .rnt-svc-item.is-past { transform: translate3d(0, -32px, 0); } .rnt .rnt-svc.is-pin .rnt-svc-item.is-cur { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s ease .22s, transform .7s var(--rn-ease) .22s; } .rnt .rnt-svc.is-pin .rnt-svc-item .rnt-h3 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -.02em; max-width: 14em; } .rnt .rnt-svc.is-pin .rnt-svc-item p { margin-top: 24px; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.5; max-width: 28em; } .rnt .rnt-svc-nav li + li { margin-top: 2px; } .rnt .rnt-svc-nav button { position: relative; display: block; width: 100%; margin: 0; padding: 7px 0 7px 26px; background: none; border: 0; font: 500 clamp(16px, 1.3vw, 19px)/1.35 'Poppins Medium'; color: var(--rn-ink); text-align: left; cursor: pointer; transition: color .3s ease; } .rnt .rnt-svc-nav button::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--rn-tint); transition: background-color .3s ease; } .rnt .rnt-svc-nav button:hover, .rnt .rnt-svc-nav button.is-cur { color: var(--rn-blue); } .rnt .rnt-svc-nav button.is-past::before, .rnt .rnt-svc-nav button.is-cur::before { background: var(--rn-blue); } .rnt .rnt-svc-nav button.is-cur::after { content: ""; position: absolute; left: 6px; top: 50%; width: 0; height: 0; border: 1.5px solid var(--rn-sky); border-radius: 50%; transform: translate(-50%, -50%); animation: rnt-trail-ring 2s infinite cubic-bezier(.25, .6, .35, 1); } /* ---------- Bloques con foto ---------- */ .rnt .rnt-media { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--rn-col); align-items: center; } .rnt .rnt-media--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .rnt .rnt-fig img { width: 100%; height: auto; will-change: transform; } /* ---------- Pares de secciones ---------- */ .rnt .rnt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rn-col); row-gap: var(--rn-gap); } /* ---------- Frase que se completa palabra por palabra mientras se lee ---------- */ .rnt .rnt-say { max-width: 28em; margin: clamp(40px, 4.4vw, 64px) auto 0; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.32; letter-spacing: -.012em; text-align: center; text-wrap: pretty; } .rnt .rnt-fill .rnt-fw { transition: color .15s linear; } /* ---------- Tablas comparativas ---------- */ .rnt .rnt-compare-intro { margin-top: 28px; max-width: 62ch; } .rnt .rnt-table-wrap { max-width: 1080px; margin: clamp(48px, 5vw, 72px) auto 0; } .rnt .rnt-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.55; } .rnt .rnt-table th, .rnt .rnt-table td { padding: 22px 24px 22px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rn-tint); } .rnt .rnt-table th:last-child, .rnt .rnt-table td:last-child { padding-right: 0; } .rnt .rnt-table thead th { padding-top: 0; font-family: 'Poppins Medium'; font-weight: 500; font-size: 16px; line-height: 1.3; border-bottom: 1.5px solid var(--rn-ink); } .rnt .rnt-table thead th.is-hl { color: var(--rn-blue); } .rnt .rnt-table tbody th { width: 22%; font-family: 'Poppins Medium'; font-weight: 500; font-size: 17px; line-height: 1.4; } .rnt .rnt-table--plat tbody th { width: 25%; } .rnt .rnt-table-ex { display: block; margin-top: 6px; font-family: 'Open Sans Regular'; font-weight: 400; font-size: 14px; line-height: 1.45; } .rnt .rnt-mark { display: flex; align-items: flex-start; gap: 10px; } .rnt .rnt-mark svg { flex: none; width: 18px; height: 18px; margin-top: 3px; } .rnt .rnt-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; font-size: 14px; line-height: 1.4; } .rnt .rnt-legend li { display: inline-flex; align-items: center; gap: 8px; } .rnt .rnt-legend svg { width: 16px; height: 16px; } .rnt .rnt-table-after { margin: clamp(40px, 4.4vw, 56px) auto 0; max-width: 40ch; text-align: center; } .rnt .rnt-table-after + .rnt-links { justify-content: center; margin-top: 24px; } /* ---------- Preguntas frecuentes ---------- */ .rnt .rnt-faq-list { border-bottom: 1px solid var(--rn-tint); } .rnt .rnt-faq-item { border-top: 1px solid var(--rn-tint); } .rnt .rnt-faq-item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; } .rnt .rnt-faq-item summary::-webkit-details-marker { display: none; } .rnt .rnt-faq-q { font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.4; transition: color .2s ease; } .rnt .rnt-faq-item summary:hover .rnt-faq-q, .rnt .rnt-faq-item[open] .rnt-faq-q { color: var(--rn-blue); } .rnt .rnt-faq-icon { position: relative; flex: none; width: 20px; height: 20px; margin-top: 5px; } .rnt .rnt-faq-icon::before, .rnt .rnt-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--rn-ink); transform: translate(-50%, -50%); transition: transform .3s var(--rn-ease); } .rnt .rnt-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .rnt .rnt-faq-item[open] .rnt-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .rnt .rnt-faq-body { overflow: hidden; } .rnt .rnt-faq-a { padding: 0 44px 28px 0; max-width: 64ch; font-size: 17px; line-height: 1.65; } /* ---------- Movimiento al scrollear (solo con efectos encendidos) ---------- Apariciones y títulos palabra por palabra son los del sistema (initRnReveal); acá van las líneas finas y las tablas */ .rn-motion .rnt[data-efectos="on"] [data-rv]::before { transform: scaleX(0); transition: transform 1.1s var(--rn-ease), background-color .35s ease; transition-delay: calc(var(--rv, 0) * 80ms + .15s); } .rn-motion .rnt[data-efectos="on"] [data-rv].is-in::before { transform: none; } /* Tablas: las filas entran de a una y las tildes se dibujan */ .rn-motion .rnt[data-efectos="on"] .rnt-table tbody tr { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s ease, transform .8s var(--rn-ease); transition-delay: calc(var(--rv, 0) * 90ms + .15s); } .rn-motion .rnt[data-efectos="on"] .rnt-table-wrap.is-in tbody tr { opacity: 1; transform: none; } .rn-motion .rnt[data-efectos="on"] .rnt-chk path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--rv, 0) * 90ms + .5s); } .rn-motion .rnt[data-efectos="on"] .rnt-table-wrap.is-in .rnt-chk path { stroke-dashoffset: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1099px) { .rnt .rnt-grid--3, .rnt .rnt-svc-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 899px) { .rnt .rnt-split, .rnt .rnt-media, .rnt .rnt-media--rev, .rnt .rnt-process-grid { grid-template-columns: 1fr; row-gap: 32px; } .rnt .rnt-media { row-gap: 48px; } .rnt .rnt-media--rev .rnt-fig { order: -1; } .rnt .rnt-process-sticky { position: static; } .rnt .rnt-trail, .rnt .rnt-trail-label { display: none; } .rnt .rnt-index li { grid-template-columns: 1fr; row-gap: 8px; } .rnt .rnt-pair, .rnt .rnt-cols { grid-template-columns: 1fr; } .rnt .rnt-subj-line { white-space: normal; min-height: 2.6em; } /* Recorrido en pantallas angostas: título arriba, gráfico al medio y la etapa debajo */ .rnt .rnt-jr-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "chart" "steps"; grid-template-rows: auto; row-gap: 28px; } .rnt .rnt-jr-chart { height: 300px; } .rnt .rnt-jr-steps { margin-top: 0; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-stage { align-items: flex-start; padding-top: clamp(16px, 3.4svh, 40px); } .rn-motion .rnt[data-efectos="on"] .rnt-jr-grid { row-gap: clamp(14px, 2.6svh, 28px); } .rn-motion .rnt[data-efectos="on"] .rnt-jr-chart { height: clamp(190px, 34svh, 300px); } .rn-motion .rnt[data-efectos="on"] .rnt-jr-head .rnt-h2 { font-size: clamp(26px, 7vw, 32px); } .rn-motion .rnt[data-efectos="on"] .rnt-jr-head .rnt-sub { margin-top: 8px; font-size: 16px; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-t { font-size: 20px; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-t + p, .rn-motion .rnt[data-efectos="on"] .rnt-jr-lead { font-size: 15.5px; line-height: 1.55; } } @media (max-width: 599px) { .rnt .rnt-grid--2, .rnt .rnt-grid--3, .rnt .rnt-svc-panels { grid-template-columns: 1fr; gap: 36px; } .rnt .rnt-hero-inner { padding: 96px 24px calc(var(--rnt-objh, min(72vw, 300px)) + 104px); } .rnt .rnt-h1 { font-size: clamp(30px, 8.6vw, 44px); } .rnt .rnt-hero-list { gap: 8px; } .rnt .rn-btn { padding: 14px 24px; font-size: 15px; } .rnt .rnt-faq-a { padding-right: 0; } } /* ---------- Tablas en pantallas angostas ---------- Cada tabla se reorganiza según cómo se lee mejor, sin duplicar contenido (solo CSS; los roles ARIA mantienen la tabla accesible). Jerarquía de las tres: nombre del bloque (Poppins 21px) > rótulo del dato (Poppins 14px, azul) > texto (Open Sans 16px). --by-col: un bloque por opción, con todos sus atributos (email vs. automation vs. CRM; interno vs. freelancer vs. agencia). --by-row: un bloque por fila, con su título (tipos de plataforma). --pair: dos opciones lado a lado, con sus nombres fijos arriba mientras se recorre la tabla (email vs. WhatsApp). */ @media (max-width: 719px) { .rnt .rnt-table { display: grid; grid-template-columns: minmax(0, 1fr); font-size: 16px; line-height: 1.55; } .rnt .rnt-table thead, .rnt .rnt-table tbody, .rnt .rnt-table tr { display: contents; } .rnt .rnt-table th, .rnt .rnt-table td, .rnt .rnt-table tbody th, .rnt .rnt-table--plat tbody th { display: block; width: auto; padding: 0; border: 0; } .rnt .rnt-table td::before { display: block; margin-bottom: 4px; font: 500 14px/1.3 'Poppins Medium'; color: var(--rn-blue); } .rnt .rnt-table .rnt-corner { display: none; } /* Un bloque por opción */ .rnt .rnt-table--by-col tbody th { display: none; } .rnt .rnt-table--by-col thead th { order: var(--o); margin-top: 44px; padding-top: 20px; border-top: 1.5px solid var(--rn-ink); font: 500 21px/1.25 'Poppins Medium'; } .rnt .rnt-table--by-col thead th:nth-child(2) { margin-top: 0; } .rnt .rnt-table--by-col thead th.is-hl { color: var(--rn-blue); border-top-color: var(--rn-blue); } .rnt .rnt-table--by-col td { order: var(--o); margin-top: 18px; } .rnt .rnt-table--by-col td::before { content: attr(data-row); } /* Un bloque por fila */ .rnt .rnt-table--by-row thead th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .rnt .rnt-table--by-row tbody th { margin-top: 44px; padding-top: 20px; border-top: 1.5px solid var(--rn-ink); font: 500 21px/1.25 'Poppins Medium'; } .rnt .rnt-table--by-row tbody tr:first-child th { margin-top: 0; } .rnt .rnt-table--by-row td { margin-top: 18px; } .rnt .rnt-table--by-row td::before { content: attr(data-col); } .rnt .rnt-table--by-row .rnt-table-ex { margin-top: 6px; font-size: 15px; } /* Dos opciones lado a lado */ .rnt .rnt-table--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .rnt .rnt-table--pair thead th { position: sticky; top: var(--rn-header); z-index: 1; padding: 14px 0 12px; background: var(--rn-bg); border-bottom: 1.5px solid var(--rn-ink); font: 500 18px/1.25 'Poppins Medium'; } .rnt .rnt-table--pair tbody th { grid-column: 1/-1; margin-top: 24px; font: 500 14px/1.3 'Poppins Medium'; color: var(--rn-blue); } .rnt .rnt-table--pair tbody tr + tr th { padding-top: 22px; border-top: 1px solid var(--rn-tint); } .rnt .rnt-table--pair td { margin-top: 8px; font-size: 15px; line-height: 1.5; } .rnt .rnt-table--pair td::before { content: none; } /* Celdas con marca: la marca va al lado del rótulo y el texto debajo */ .rnt .rnt-table td.has-mark { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; } .rnt .rnt-table td.has-mark::before { grid-column: 2; grid-row: 1; } .rnt .rnt-table td.has-mark .rnt-mark { display: contents; } .rnt .rnt-table td.has-mark .rnt-mark svg { grid-column: 1; grid-row: 1; margin-top: 0; } .rnt .rnt-table td.has-mark .rnt-mark > span { grid-column: 2; grid-row: 2; } .rnt .rnt-legend { margin-top: 32px; } } @media (max-width: 359px) { .rnt .rnt-word { white-space: normal; } } /* Celulares bajos (por ejemplo 375 x 667): el recorrido fijo achica gráfico, títulos y textos para que el cierre con su botón entre completo debajo del header */ @media (max-width: 899px) and (max-height: 740px) { .rn-motion .rnt[data-efectos="on"] .rnt-jr-stage { padding-top: 12px; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-grid { row-gap: 12px; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-chart { height: clamp(170px, 30svh, 240px); } .rn-motion .rnt[data-efectos="on"] .rnt-jr-head .rnt-h2 { font-size: 24px; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-head .rnt-sub { margin-top: 6px; font-size: 15px; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-t { font-size: 18px; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-t + p, .rn-motion .rnt[data-efectos="on"] .rnt-jr-lead { font-size: 14.5px; line-height: 1.5; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-flows { margin-top: 8px; font-size: 13.5px; } .rn-motion .rnt[data-efectos="on"] .rnt-jr-step .rn-btn { margin-top: 14px; min-height: 46px; padding: 11px 22px; } } /* ---------- Capas fijas del punto azul y su estela (se agregan al body; los puntos van en la capa rn-swarm del sistema) ---------- */ .rnt-dot { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; will-change: transform, opacity; } .rnt-dot, .rnt-dot i, .rnt-dot-trail, .rnt-burst { box-sizing: border-box; } .rnt-dot i { position: absolute; left: 0; top: 0; border-radius: 50%; width: var(--d, 16px); height: var(--d, 16px); margin: calc(var(--d, 16px) / -2) 0 0 calc(var(--d, 16px) / -2); } .rnt-dot .rnt-dot-core { background: var(--rn-blue); box-shadow: 0 0 0 calc(var(--d, 16px) * .32) rgba(0, 124, 191, var(--halo, 0)), 0 0 calc(var(--d, 16px) * 1.4) rgba(32, 168, 242, var(--glow, 0)); } .rnt-dot .rnt-dot-ring { z-index: 1; border: 1.5px solid var(--rn-sky); opacity: 0; } .rnt-dot.is-landing .rnt-dot-core { animation: rnt-drop 1.15s .7s both; } /* En reposo sobre la i, el anillo late cada 2,4 s y cada dos latidos sale una onda por la base (la dispara el script) */ .rnt-dot.is-resting .rnt-dot-ring { animation: rnt-ring-grow 2.4s 2.2s infinite cubic-bezier(.25, .6, .35, 1), rnt-ring-fade 2.4s 2.2s infinite linear; } .rnt-dot.is-home .rnt-dot-ring { animation: rnt-ring-grow 2.4s .9s infinite cubic-bezier(.25, .6, .35, 1), rnt-ring-fade 2.4s .9s infinite linear; } .rnt-burstwrap { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 39; pointer-events: none; } .rnt-burst { position: absolute; left: 0; top: 0; width: var(--d, 40px); height: var(--d, 40px); margin: calc(var(--d, 40px) / -2) 0 0 calc(var(--d, 40px) / -2); border-radius: 50%; border: 2px solid var(--rn-blue); opacity: 0; } .rnt-burst.is-on { animation: rnt-burst 1.1s cubic-bezier(.2, .7, .2, 1) both; } .rnt-dot-trail { position: fixed; left: 0; top: 0; width: var(--d, 8px); height: var(--d, 8px); margin: calc(var(--d, 8px) / -2) 0 0 calc(var(--d, 8px) / -2); border-radius: 50%; background: var(--rn-sky); opacity: 0; z-index: 39; pointer-events: none; will-change: transform, opacity; } @keyframes rnt-burst { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } } @keyframes rnt-drop { 0% { transform: translateY(calc(var(--d, 16px) * -6)); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 12% { opacity: 1; } 55% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 70% { transform: translateY(calc(var(--d, 16px) * -.9)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 84% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 92% { transform: translateY(calc(var(--d, 16px) * -.25)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 100% { transform: translateY(0); opacity: 1; } } /* El anillo nace en el centro del punto y se abre hacia afuera con el mismo grosor de línea */ @keyframes rnt-ring-grow { 0% { width: 0; height: 0; margin: 0; } 100% { width: calc(var(--d, 16px) * 3.4); height: calc(var(--d, 16px) * 3.4); margin: calc(var(--d, 16px) * -1.7) 0 0 calc(var(--d, 16px) * -1.7); } } @keyframes rnt-ring-fade { 0% { opacity: 0; } 6% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rnt .rnt-trail i.is-cur::after, .rnt .rnt-svc-nav button.is-cur::after { animation: none; } } /* ---------- Gráfico del recorrido: rótulos ubicados por el script sobre el mismo canvas ---------- */ .rnt .rnt-vlabs { position: absolute; inset: 0; pointer-events: none; } .rnt .rnt-vlab { position: absolute; left: 0; top: 0; width: max-content; max-width: 120px; font-family: 'Poppins Medium'; font-weight: 500; font-size: 15px; line-height: 1.25; color: var(--rn-ink); text-align: center; text-wrap: balance; transition: color .35s ease; } .rnt .rnt-vlab.is-cur { color: var(--rn-blue); } .rnt .rnt-vlab[data-al="r"] { text-align: right; } .rnt .rnt-vlab[data-al="l"] { text-align: left; } .rnt .rnt-jr-k { font-family: 'Poppins Medium'; font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--rn-blue); } .rnt .rnt-jr-k + .rnt-jr-t { margin-top: 8px; } .rnt .rnt-jr-step .rn-link { display: inline-block; margin-top: 14px; } @media (max-width: 899px) { .rnt .rnt-vlab { font-size: 12px; max-width: 84px; } } /* ---------- Canales: grilla abierta con enlace a cada servicio ---------- */ .rnt .rnt-chan .rnt-cell-t a { text-decoration: none; transition: color .25s ease; } .rnt .rnt-chan .rnt-cell-t a:hover { color: var(--rn-blue); } .rnt .rnt-chan .rn-link { display: inline-block; margin-top: 14px; } /* ---------- Unidades: fotos reales recortadas, sin cajas ---------- */ .rnt .rnt-fig--unit img { max-width: 520px; margin: 0 auto; } .rnt .rnt-fig--wide img { max-width: 640px; } @keyframes rnt-trail-ring { 0% { width: 0; height: 0; opacity: 0; } 8% { opacity: 1; } 100% { width: 32px; height: 32px; opacity: 0; } } /* Tablas en escritorio: columnas parejas */ @media (min-width: 720px) { .rnt .rnt-table { table-layout: fixed; } } .rnt .rnt-jr-k + .rnt-h2 { margin-top: 10px; } .rnt .rnt-links--center { justify-content: center; margin-top: clamp(32px, 4vw, 48px); } .rnt[data-obj="aa"] { --rnt-objh: min(52vw, 220px); } .rnt[data-obj="megaphone"], .rnt[data-obj="arrows"], .rnt[data-obj="browser"], .rnt[data-obj="pencil"], .rnt[data-obj="gauge"], .rnt[data-obj="dashboard"] { --rnt-objh: min(56vw, 230px); } .rnt .rnt-h1--long { font-size: clamp(40px, 4.1vw, 60px); } @media (max-width: 599px) { .rnt .rnt-h1--long { font-size: clamp(28px, 7.6vw, 40px); } } /* ---------- Galería de trabajos (Branding, Redes sociales y Desarrollo web): la de la página actual en una grilla abierta, sin cajas ---------- */ .rnt .rnt-works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(48px, 6vw, 80px); } .rnt .rnt-works--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rnt .rnt-works img { width: 100%; height: auto; } @media (max-width: 899px) { .rnt .rnt-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Atraer: grilla de 4, frase con su texto, pasos numerados y frase destacada ---------- */ .rnt .rnt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rnt .rnt-say-body { max-width: 62ch; margin: 28px auto 0; text-align: center; } .rnt .rnt-say-body p + p { margin-top: 10px; } .rnt .rnt-num { margin: 0 0 12px; color: var(--rn-blue); font-family: 'Poppins Medium'; font-weight: 500; font-size: 14px; line-height: 1; } .rnt .rnt-sec--tight { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); } .rnt .rnt-statement { max-width: 30ch; margin: 14px auto 0; font-family: 'Poppins Medium'; font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; } @media (max-width: 1023px) { .rnt .rnt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 899px) { .rnt .rnt-works--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .rnt .rnt-grid--4 { grid-template-columns: minmax(0, 1fr); } } /* ---------- Convertir: cierre con texto y nota de contacto ---------- */ .rnt .rnt-close-text { max-width: 58ch; margin: 20px auto 0; } .rnt .rnt-close-note { margin-top: 18px; font-size: 15px; } .rnt .rnt-close-note a { color: var(--rn-blue); } /* end internas styles */