/* ========================================================================== Portada. Rediseño del 2026-09-28. Abre y cierra con una banda oscura —la portada y el cierre— y entre medias va en claro. Lo que manda es el producto: pantallas reales dentro de un marco de teléfono, sobre un panel teñido con el color de cada aplicación. ========================================================================== */ /* --- Aparición al entrar en viewport ------------------------------------ La opacidad inicial sólo se aplica si `theme.js` (síncrono en ) ha podido marcar el documento con data-js. Sin JavaScript el atributo no existe, el selector no casa y el contenido nace visible: nunca queda una portada en blanco. Con movimiento reducido tampoco se oculta nada. */ :root[data-js='true'] .rm-reveal { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--rm-ease), transform 560ms var(--rm-ease); } :root[data-js='true'] .rm-reveal[data-visible='true'] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { :root[data-js='true'] .rm-reveal { opacity: 1; transform: none; transition: none; } } /* --- Piezas compartidas -------------------------------------------------- */ .rm-eyebrow { margin: 0 0 var(--rm-space-4); font-family: var(--rm-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rm-ink-muted); } .rm-figure { font-family: var(--rm-font-display); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.03em; color: var(--rm-ink); } .rm-figure--xl { display: block; font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: 0.9; } .rm-mono { font-family: var(--rm-font-mono); font-size: var(--rm-text-xs); font-variant-numeric: tabular-nums; color: var(--rm-ink-muted); } .rm-shot { margin: 0; } .rm-shot img { width: 100%; height: auto; border: 1px solid var(--rm-rule); border-radius: var(--rm-radius-lg); background: var(--rm-surface-sunken); } .rm-shot figcaption { margin-top: var(--rm-space-2); font-family: var(--rm-font-mono); font-size: var(--rm-text-xs); color: var(--rm-ink-muted); } /* Marco de teléfono. Es sólo borde y radio: la captura ya trae su barra de estado, así que no se dibuja isla ni botones. El bisel es el mismo casi negro en los dos temas, como el de un teléfono de verdad. */ .rm-device img { border: 6px solid #0b0f17; border-radius: 30px; background: #0b0f17; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), var(--rm-shadow-device); } /* Botones sobre banda oscura. El primario lleva el verde de marca con tinta oscura (8.4:1); el secundario es un contorno claro. */ .rm-btn-brand.btn-tech-primary { background: var(--rm-brand-bright); border-color: var(--rm-brand-bright); color: #07110a !important; font-weight: 600; } .rm-btn-brand.btn-tech-primary:hover { background: #86d06b; border-color: #86d06b; color: #07110a !important; } .rm-btn-ghost.btn-tech-secondary { border-color: rgb(255 255 255 / 0.22); color: var(--rm-night-ink) !important; } .rm-btn-ghost.btn-tech-secondary:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.4); color: var(--rm-night-ink) !important; } /* ========================================================================== 1. Portada: banda oscura con resplandor de marca y retícula ========================================================================== */ .rm-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--rm-space-9) var(--rm-space-8); background: var(--rm-night); color: var(--rm-night-ink); } /* Retícula de 56px que se desvanece hacia los bordes. Decorativa. */ .rm-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%); } .rm-hero__glow { position: absolute; inset: -20% -10% auto 35%; z-index: -1; height: 120%; background: radial-gradient(40% 40% at 60% 35%, rgb(108 191 79 / 0.28), transparent 70%), radial-gradient(35% 35% at 85% 60%, rgb(56 120 255 / 0.22), transparent 70%); filter: blur(20px); pointer-events: none; } .rm-hero__grid { display: grid; gap: var(--rm-space-8); } @media (min-width: 62em) { .rm-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--rm-space-9); align-items: center; } } .rm-hero__badge { display: inline-flex; align-items: center; gap: var(--rm-space-2); margin: 0 0 var(--rm-space-5); padding: 6px 14px 6px 10px; border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--rm-radius-pill); background: rgb(255 255 255 / 0.04); font-size: var(--rm-text-xs); font-weight: 500; color: var(--rm-night-muted); } .rm-hero__badge-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rm-brand-bright); box-shadow: 0 0 0 4px rgb(108 191 79 / 0.2); } .rm-hero h1 { margin-bottom: var(--rm-space-5); color: var(--rm-night-ink); font-size: clamp(2.5rem, 5vw + 1rem, 4.75rem); max-width: 14ch; } .rm-hero__sub { max-width: 44ch; margin-bottom: var(--rm-space-6); font-size: var(--rm-text-lg); color: var(--rm-night-muted); } .rm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rm-space-3); } .rm-hero__actions .btn-tech-primary, .rm-hero__actions .btn-tech-secondary { min-height: 48px; padding-inline: var(--rm-space-6); } .rm-hero__note { max-width: 48ch; margin: var(--rm-space-7) 0 0; font-size: var(--rm-text-sm); color: var(--rm-night-subtle); } /* Dos teléfonos, el segundo más abajo: se lee como una composición y no como dos capturas pegadas. */ .rm-hero__shots { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rm-space-5); width: 100%; max-width: 30rem; margin-inline: auto; align-items: start; } .rm-hero__shots .rm-shot:nth-child(1) { rotate: -3deg; } .rm-hero__shots .rm-shot:nth-child(2) { margin-top: var(--rm-space-9); rotate: 3deg; } @media (prefers-reduced-motion: no-preference) { .rm-hero__shots .rm-shot { animation: rm-float 7s ease-in-out infinite; } .rm-hero__shots .rm-shot:nth-child(2) { animation-delay: -3.5s; } } @keyframes rm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } /* Fila de aplicaciones al pie de la banda. */ .rm-hero__apps { display: grid; gap: var(--rm-space-4); margin-top: var(--rm-space-9); padding-top: var(--rm-space-6); border-top: 1px solid var(--rm-night-rule); } .rm-hero__apps-label { margin: 0; font-family: var(--rm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rm-night-subtle); } .rm-hero__apps-list { display: flex; flex-wrap: wrap; gap: var(--rm-space-3) var(--rm-space-6); margin: 0; padding: 0; list-style: none; } .rm-hero__app { display: inline-flex; align-items: center; gap: var(--rm-space-3); color: var(--rm-night-ink); font-size: var(--rm-text-sm); font-weight: 550; text-decoration: none; } a.rm-hero__app:hover { color: #fff; } a.rm-hero__app:hover .rm-app-icon { transform: translateY(-2px); } .rm-hero__app .rm-app-icon { width: 36px; height: 36px; border-radius: 9px; transition: transform var(--rm-duration) var(--rm-ease); } /* ========================================================================== 2. Nuestros productos: una tarjeta grande por producto, a dos columnas ========================================================================== */ .rm-work { padding-block: var(--rm-space-10); } .rm-work__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--rm-space-4); margin-bottom: var(--rm-space-7); } .rm-work__head h2 { margin: 0 0 var(--rm-space-2); font-size: var(--rm-text-3xl); } .rm-work__head p { margin: 0; } /* Enlace «hacia dentro»: mismo gesto en productos, servicios y presentación. */ .rm-work__more { display: inline-flex; align-items: center; gap: var(--rm-space-2); font-size: var(--rm-text-sm); font-weight: 600; text-decoration: none; } .rm-work__more .rm-icon { transition: transform var(--rm-duration) var(--rm-ease); } .rm-work__more:hover .rm-icon { transform: translateX(3px); } .rm-work__foot { margin: var(--rm-space-6) 0 0; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); } /* --- Carrusel ----------------------------------------------------------- Desplazamiento nativo con scroll-snap. Sin librería y sin autoplay: la pista es un contenedor con overflow, así que funciona igual con el guion desactivado. main.js sólo añade los controles y los indicadores. */ .rm-carousel { position: relative; } .rm-carousel__track { display: flex; gap: var(--rm-space-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; /* Aire para el anillo de foco y la sombra de la tarjeta; se compensa con el margen negativo. `scroll-padding` iguala al relleno para que la primera tarjeta se ancle en scrollLeft = 0. */ padding: 8px 8px 28px; margin: -8px -8px -28px; scroll-padding-inline: 8px; } .rm-carousel__track::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .rm-carousel__track { scroll-behavior: auto; } } /* La tarjeta siguiente siempre asoma: un carrusel que no enseña que hay más contenido esconde producto. */ .rm-carousel__slide { flex: 0 0 min(88%, 24rem); display: flex; flex-direction: column; scroll-snap-align: start; overflow: hidden; background: var(--rm-surface); border: 1px solid var(--rm-rule); border-radius: var(--rm-radius-xl); box-shadow: var(--rm-shadow-card); } @media (min-width: 48em) { .rm-carousel__slide { flex-basis: 82%; } } @media (min-width: 68em) { .rm-carousel__slide { flex-basis: 88%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } .rm-carousel__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rm-space-4); margin-top: var(--rm-space-6); } /* En un teléfono no caben las flechas y los seis iconos en una fila: se quedan los iconos, que además dicen a qué producto se salta. */ @media (max-width: 35.99em) { .rm-carousel__nav { display: none; } } .rm-carousel__nav { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--rm-surface); border: 1px solid var(--rm-rule-strong); border-radius: var(--rm-radius-pill); font-size: var(--rm-text-lg); color: var(--rm-ink); cursor: pointer; transition: background-color var(--rm-duration-fast) var(--rm-ease), border-color var(--rm-duration-fast) var(--rm-ease); } .rm-carousel__nav:hover:not(:disabled) { background: var(--rm-surface-sunken); border-color: var(--rm-ink-subtle); } .rm-carousel__nav:disabled { color: var(--rm-ink-subtle); border-color: var(--rm-rule); cursor: default; opacity: 0.6; } /* Una sola flecha en el sprite: la de retroceder es la misma girada. */ .rm-carousel__nav--prev .rm-icon { transform: rotate(180deg); } /* Los indicadores son los iconos de las aplicaciones: se sabe a qué producto se salta antes de pulsar. El activo se enciende; el resto queda atenuado. */ .rm-carousel__dots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rm-space-1); } @media (min-width: 36em) { .rm-carousel__dots { gap: var(--rm-space-2); } } .rm-carousel__dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 2px solid transparent; border-radius: 14px; cursor: pointer; opacity: 0.5; transition: opacity var(--rm-duration) var(--rm-ease), border-color var(--rm-duration) var(--rm-ease), transform var(--rm-duration) var(--rm-ease); } .rm-carousel__dot img { width: 30px; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); } /* Un producto sin icono conserva el punto. */ .rm-carousel__dot:not(:has(img))::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--rm-ink-subtle); } .rm-carousel__dot:hover { opacity: 0.85; } .rm-carousel__dot[aria-current='true'] { opacity: 1; border-color: var(--rm-accent); transform: translateY(-2px); } /* --- Tarjeta de producto -------------------------------------------------- */ /* `:where()` deja la especificidad a cero: el color por producto, declarado en components.css con `.rm-product--`, tiene que ganar aunque esta hoja se cargue después. */ :where(.rm-product) { --rm-product-accent: var(--rm-accent); } .rm-product__body { display: flex; flex-direction: column; padding: var(--rm-space-6); } @media (min-width: 68em) { .rm-product__body { padding: var(--rm-space-8); } } /* Sector y etapa, uno a cada extremo de la primera línea de la tarjeta. */ .rm-product__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rm-space-2) var(--rm-space-3); margin-bottom: var(--rm-space-5); } .rm-product__head .rm-eyebrow { margin: 0; } /* `.rm-stage` (la pastilla de etapa) y `.rm-app-icon` están en components.css: las comparten esta tarjeta, el catálogo de /productos/ y la ficha. */ .rm-product__name { display: flex; align-items: center; gap: var(--rm-space-4); margin-bottom: var(--rm-space-4); font-size: var(--rm-text-2xl); letter-spacing: -0.03em; } .rm-product__name .rm-app-icon { width: 56px; height: 56px; border-radius: 14px; } /* La marca de color del producto: un dato, no un fondo. Decorativa. */ .rm-product__mark { flex: none; width: 6px; height: 1.4em; border-radius: 3px; background: var(--rm-product-accent); } .rm-product__summary { font-size: var(--rm-text-base); color: var(--rm-ink-muted); } /* Cifras del producto. En móvil, filas compactas con el número a la izquierda; con sitio, una fila de cajas con el número encima. */ .rm-product__figures { display: grid; gap: var(--rm-space-2); margin: var(--rm-space-4) 0 var(--rm-space-5); } .rm-product__figures > div { display: flex; align-items: baseline; gap: var(--rm-space-3); padding: var(--rm-space-3) var(--rm-space-4); background: var(--rm-surface-sunken); border-radius: var(--rm-radius-md); } .rm-product__figures dt { font-size: var(--rm-text-lg); line-height: 1.15; white-space: nowrap; } .rm-product__figures dd { margin: 0; font-size: var(--rm-text-xs); color: var(--rm-ink-muted); } @media (min-width: 30em) { .rm-product__figures { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--rm-space-3); } .rm-product__figures > div { display: block; padding: var(--rm-space-4); } .rm-product__figures dd { margin-top: var(--rm-space-1); } } /* `.rm-product__key` y `.rm-product__chips` están en components.css. */ .rm-product__facts { margin-bottom: var(--rm-space-6); } .rm-product__link { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--rm-space-2); margin-top: auto; padding: 10px 18px; border-radius: var(--rm-radius-md); background: var(--rm-solid); color: var(--rm-solid-ink) !important; font-size: var(--rm-text-sm); font-weight: 600; text-decoration: none; transition: background-color var(--rm-duration-fast) var(--rm-ease); } .rm-product__link:hover { background: var(--rm-solid-hover); } /* Lo que hace el producto: lista con marca de verificación. */ .rm-product__highlights { display: grid; gap: var(--rm-space-3); margin: var(--rm-space-2) 0 var(--rm-space-5); padding: 0; list-style: none; } .rm-product__highlights li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--rm-space-3); align-items: start; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); } /* El color es --rm-accent y no el de la marca del producto: ese sí cambia con el tema y está comprobado en los dos. */ .rm-product__tick { box-sizing: content-box; width: 0.8em; height: 0.8em; margin-top: 0.15em; padding: 3px; border-radius: 50%; background: var(--rm-accent-wash); color: var(--rm-accent); } /* El escaparate: panel teñido con el color de la aplicación, con los teléfonos encima. Mezclado con la superficie para que no grite en claro y no se apague en oscuro. */ .rm-product__visual { position: relative; display: grid; place-items: center; min-height: 20rem; padding: var(--rm-space-8) var(--rm-space-6); overflow: hidden; background: radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--rm-product-accent) 34%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--rm-product-accent) 20%, var(--rm-surface)), color-mix(in srgb, var(--rm-product-accent) 6%, var(--rm-surface))); } .rm-product__visual::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--rm-product-accent) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--rm-product-accent) 16%, transparent) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%); pointer-events: none; } /* Dos capturas, la segunda un poco más abajo: se leen como una composición. En móvil sólo la primera. */ .rm-product__shots { position: relative; display: grid; gap: var(--rm-space-5); grid-template-columns: minmax(0, 15rem); justify-content: center; width: 100%; } .rm-product__shots .rm-shot:nth-child(n + 2) { display: none; } @media (min-width: 48em) { .rm-product__shots { grid-template-columns: repeat(2, minmax(0, 15rem)); } .rm-product__shots .rm-shot:nth-child(n + 2) { display: block; margin-top: var(--rm-space-7); } } .rm-product__shots img { aspect-ratio: 9 / 17; object-fit: cover; object-position: top center; } .rm-product__shots figcaption { display: none; } /* Sin capturas: el icono de la aplicación en grande, flotando sobre el panel. */ .rm-product__visual .rm-product__hero-icon { position: relative; align-self: center; width: clamp(7rem, 14vw, 10rem); height: auto; aspect-ratio: 1; border-radius: 26%; box-shadow: 0 28px 56px -18px color-mix(in srgb, var(--rm-product-accent) 70%, #000), inset 0 0 0 1px rgb(0 0 0 / 0.06); } /* MeetingVoice es de escritorio: su captura es apaisada y va a ancho entero, con marco de ventana en vez de teléfono. */ .rm-product--meetingvoice .rm-product__shots { display: block; width: 100%; max-width: 36rem; max-height: none; } .rm-product--meetingvoice .rm-product__shots .rm-shot:nth-child(n + 2) { display: none; } .rm-product--meetingvoice .rm-product__shots img { aspect-ratio: 16 / 10; object-position: left top; border-width: 4px; border-radius: 12px; } /* ========================================================================== 3. Qué hacemos: cinco tarjetas con icono ========================================================================== */ .rm-services { padding-block: var(--rm-space-10); background: var(--rm-surface-sunken); border-block: 1px solid var(--rm-rule); } .rm-services__head { display: grid; gap: var(--rm-space-4); margin-bottom: var(--rm-space-7); } @media (min-width: 56em) { .rm-services__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } } .rm-services__head h2 { margin: 0; font-size: var(--rm-text-3xl); } .rm-services__head p { margin: 0; color: var(--rm-ink-muted); font-size: var(--rm-text-lg); } .rm-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--rm-space-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 68em) { .rm-svc { grid-template-columns: repeat(6, minmax(0, 1fr)); } .rm-svc__card { grid-column: span 2; } .rm-svc__card:nth-child(4) { grid-column: 2 / span 2; } } .rm-svc__card { position: relative; padding: var(--rm-space-6); background: var(--rm-surface); border: 1px solid var(--rm-rule); border-radius: var(--rm-radius-lg); transition: border-color var(--rm-duration) var(--rm-ease), box-shadow var(--rm-duration) var(--rm-ease), transform var(--rm-duration) var(--rm-ease); } .rm-svc__card:hover { border-color: var(--rm-rule-strong); box-shadow: var(--rm-shadow-card); transform: translateY(-2px); } .rm-svc__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--rm-space-5); border-radius: 12px; background: var(--rm-accent-wash); color: var(--rm-accent); } .rm-svc__icon .rm-icon { width: 1.25rem; height: 1.25rem; } .rm-svc__num { position: absolute; top: var(--rm-space-6); right: var(--rm-space-6); font-family: var(--rm-font-mono); font-size: var(--rm-text-xs); color: var(--rm-ink-subtle); } .rm-svc__title { margin: 0 0 var(--rm-space-2); font-size: var(--rm-text-lg); font-weight: 650; } .rm-svc__card p { margin: 0; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); } /* Filas de etiquetas: sectores y tecnologías */ .rm-labels { display: grid; gap: var(--rm-space-3); margin-top: var(--rm-space-6); } @media (min-width: 48em) { .rm-labels { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--rm-space-5); align-items: baseline; } } .rm-labels__key { margin: 0; font-family: var(--rm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rm-ink-subtle); } .rm-labels__list { display: flex; flex-wrap: wrap; gap: var(--rm-space-2); margin: 0; padding: 0; list-style: none; } .rm-labels__list li { padding: 4px 12px; background: var(--rm-surface); border: 1px solid var(--rm-rule); border-radius: var(--rm-radius-pill); font-size: var(--rm-text-xs); color: var(--rm-ink-muted); } .rm-services__foot { margin: var(--rm-space-7) 0 0; } /* ========================================================================== 4. Cómo trabajamos: cuatro pasos unidos por una línea ========================================================================== */ .rm-steps-band { padding-block: var(--rm-space-10); } .rm-steps-band__head { display: grid; gap: var(--rm-space-3); margin-bottom: var(--rm-space-8); } .rm-steps-band__head h2 { margin: 0; font-size: var(--rm-text-3xl); } .rm-steps-band__head p { margin: 0; color: var(--rm-ink-muted); font-size: var(--rm-text-lg); } .rm-steps { display: grid; gap: var(--rm-space-6); } .rm-step { position: relative; } .rm-step__num { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--rm-space-4); border-radius: 50%; background: var(--rm-solid); color: var(--rm-solid-ink); font-family: var(--rm-font-mono); font-size: var(--rm-text-xs); font-weight: 600; font-variant-numeric: tabular-nums; } .rm-step h3 { margin: 0 0 var(--rm-space-2); font-size: var(--rm-text-lg); font-weight: 650; } .rm-step p { margin: 0; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); max-width: 30ch; } @media (min-width: 54em) { .rm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* La línea que une los pasos, detrás de los números. */ .rm-step:not(:last-child)::after { content: ''; position: absolute; top: 22px; left: 56px; right: calc(-1 * var(--rm-space-6) + 12px); height: 1px; background: linear-gradient(90deg, var(--rm-rule-strong), var(--rm-rule)); } } /* ========================================================================== 5. Quiénes somos ========================================================================== */ .rm-about { padding-block: var(--rm-space-10); border-top: 1px solid var(--rm-rule); } .rm-about__grid { display: grid; gap: var(--rm-space-7); } @media (min-width: 56em) { .rm-about__grid { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: var(--rm-space-9); align-items: start; } } .rm-about h2 { margin: 0 0 var(--rm-space-5); font-size: var(--rm-text-3xl); } .rm-about__lead { max-width: 44ch; margin: 0 0 var(--rm-space-7); font-size: var(--rm-text-xl); font-weight: 500; line-height: var(--rm-leading-snug); letter-spacing: -0.015em; color: var(--rm-ink); } .rm-about__creed { display: grid; gap: var(--rm-space-2); margin: 0; } @media (min-width: 48em) { .rm-about__creed { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: var(--rm-space-2) var(--rm-space-6); } } .rm-about__creed dt { margin-top: var(--rm-space-3); padding-top: var(--rm-space-4); border-top: 2px solid var(--rm-accent); } .rm-about__creed dd { max-width: 62ch; margin: 0; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); } /* ========================================================================== 6. Portal de privacidad: una sola fila en tarjeta ========================================================================== */ .rm-portal { padding-block: 0 var(--rm-space-9); } .rm-portal__row { display: grid; gap: var(--rm-space-5); align-items: center; padding: var(--rm-space-6); background: var(--rm-surface); border: 1px solid var(--rm-rule); border-radius: var(--rm-radius-lg); } @media (min-width: 48em) { .rm-portal__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--rm-space-8); padding: var(--rm-space-6) var(--rm-space-7); } } .rm-portal .rm-eyebrow { margin-bottom: var(--rm-space-2); } .rm-portal__title { margin: 0 0 var(--rm-space-2); font-size: var(--rm-text-lg); font-weight: 650; } .rm-portal p { margin: 0; max-width: 68ch; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); } /* ========================================================================== 7. Cierre: panel oscuro con el mismo resplandor que la portada ========================================================================== */ .rm-close { padding-block: 0 var(--rm-space-10); } .rm-close__panel { position: relative; isolation: isolate; overflow: hidden; padding: var(--rm-space-8) var(--rm-space-6); background: var(--rm-night); border-radius: var(--rm-radius-xl); color: var(--rm-night-muted); } @media (min-width: 48em) { .rm-close__panel { padding: var(--rm-space-10) var(--rm-space-9); } } .rm-close__glow { position: absolute; inset: -40% -20% auto 40%; z-index: -1; height: 160%; background: radial-gradient(40% 40% at 50% 40%, rgb(108 191 79 / 0.3), transparent 70%), radial-gradient(30% 30% at 80% 70%, rgb(56 120 255 / 0.22), transparent 70%); filter: blur(20px); pointer-events: none; } .rm-close h2 { margin: 0 0 var(--rm-space-4); max-width: 18ch; color: var(--rm-night-ink); } .rm-close__lead { max-width: 52ch; margin-bottom: var(--rm-space-6); font-size: var(--rm-text-lg); color: var(--rm-night-muted); } .rm-close__actions { display: flex; flex-wrap: wrap; gap: var(--rm-space-3); } .rm-close__actions .btn-tech-primary, .rm-close__actions .btn-tech-secondary { min-height: 48px; padding-inline: var(--rm-space-6); } /* El acceso a /legal/ acompaña al cierre sin competir con los dos botones. */ .rm-close__legal { display: flex; gap: var(--rm-space-3); max-width: 68ch; margin: var(--rm-space-7) 0 0; font-size: var(--rm-text-sm); color: var(--rm-night-subtle); } .rm-close__panel a:not(.btn-tech-primary):not(.btn-tech-secondary) { color: var(--rm-night-ink); } .rm-close__legal-icon { margin-top: 0.28em; color: var(--rm-night-subtle); } .rm-close__meta { display: flex; flex-wrap: wrap; gap: var(--rm-space-2) var(--rm-space-5); margin: var(--rm-space-6) 0 0; padding-top: var(--rm-space-5); border-top: 1px solid var(--rm-night-rule); font-family: var(--rm-font-mono); font-size: var(--rm-text-xs); }