/* * Identidad visual de EELMAESO. * * Sin framework a propósito: la web son ocho secciones estáticas y una hoja de * estilos de mil líneas se lee entera. Meter Tailwind o React aquí añadiría un * paso de compilación y una carpeta de dependencias para no ganar nada. * * La paleta parte del verde del producto (#00A67E, el mismo de la app) y lo * lleva a un fondo oscuro: es lo que separa una web corporativa de tecnología * de una landing genérica, que casi siempre es blanca. */ :root { /* Marca */ --verde: #00a67e; --verde-claro: #2fe0b0; --verde-oscuro: #00805f; /* Fondos, del más profundo al más cercano */ --fondo: #070b10; --fondo-alt: #0c131b; --superficie: #111a24; --superficie-alta: #16212d; /* Texto */ --tinta: #f2f6fa; --texto: #b3c0cd; --tenue: #7d8b99; --borde: #1e2a37; --borde-vivo: #2b3a4a; --radio: 14px; --radio-lg: 22px; --ancho: 1180px; --transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Compensa la cabecera fija al saltar a un ancla. Sin esto, cada enlace del menú deja el título medio tapado. */ scroll-padding-top: 90px; } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: var(--verde-claro); text-decoration: none; transition: color var(--transicion); } a:hover { color: var(--verde); } /* Foco visible siempre: un contorno feo es infinitamente mejor que no saber dónde estás al navegar con teclado. */ :focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 3px; border-radius: 4px; } /* ── Tipografía ─────────────────────────────────────────────────────────── */ h1, h2, h3 { color: var(--tinta); line-height: 1.15; letter-spacing: -0.02em; margin: 0; font-weight: 700; } h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -0.035em; } h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); } h3 { font-size: 1.16rem; letter-spacing: -0.01em; } p { margin: 0; } /* ── Justificación ────────────────────────────────────────────────────────── * * Los párrafos de contenido van justificados a ambos lados. Se aplica al * párrafo, no a `body`, para no justificar etiquetas, botones ni cifras, donde * quedaría mal. * * Las tres propiedades van juntas a propósito. Justificar sin partir palabras * abre «ríos» de espacio en blanco en columnas estrechas —y esta página tiene * rejillas de tres y cuatro—, así que `hyphens` reparte, y `text-wrap: pretty` * evita además que la última línea quede con una sola palabra huérfana. * * `lang="es"` en el no es decorativo: sin él el navegador no sabe con * qué reglas silabear y `hyphens: auto` no hace nada. */ .tarjeta p, .paso p, .tec__nota, .entradilla, .hero__texto, .aviso, .lista-seguridad span, .cumplimiento__nota, #sobre p, #api p { text-align: justify; hyphens: auto; text-wrap: pretty; } /* En pantallas estrechas la justificación deja de compensar: con menos de unas * cuarenta y cinco letras por línea, los huecos entre palabras se vuelven más * llamativos que el borde recto que se gana. */ @media (max-width: 560px) { .tarjeta p, .paso p, .tec__nota, .entradilla, .hero__texto, .aviso, .lista-seguridad span, .cumplimiento__nota, #sobre p, #api p { text-align: left; } } .destacado { background: linear-gradient(120deg, var(--verde-claro), var(--verde)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Estructura ─────────────────────────────────────────────────────────── */ .contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; } section { padding: clamp(4.5rem, 10vw, 8rem) 0; position: relative; } .seccion-alt { background: var(--fondo-alt); border-block: 1px solid var(--borde); } .cabecera-seccion { max-width: 660px; margin-bottom: 3.5rem; } .cabecera-seccion.centrada { margin-inline: auto; text-align: center; } .etiqueta { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--verde-claro); margin-bottom: 1rem; } .entradilla { font-size: 1.09rem; margin-top: 1.15rem; color: var(--texto); } /* ── Barra de navegación ────────────────────────────────────────────────── */ .barra { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 1.1rem 0; transition: background var(--transicion), border-color var(--transicion), padding var(--transicion); border-bottom: 1px solid transparent; } /* La clase la pone el script al desplazarse. Sin fondo, el menú sobre el hero se lee mal en cuanto pasa por encima de una tarjeta. */ .barra.desplazada { background: rgba(7, 11, 16, 0.86); backdrop-filter: blur(14px); border-bottom-color: var(--borde); padding: 0.7rem 0; } .barra .contenedor { display: flex; align-items: center; gap: 2rem; } .marca { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.06rem; letter-spacing: 0.14em; color: var(--tinta); } .marca:hover { color: var(--tinta); } .marca__simbolo { width: 30px; height: 30px; flex: none; } .menu { display: flex; gap: 1.9rem; margin-left: auto; list-style: none; padding: 0; margin-block: 0; } .menu a { color: var(--texto); font-size: 0.93rem; font-weight: 500; position: relative; } .menu a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: var(--verde); transition: width var(--transicion); } .menu a:hover::after { width: 100%; } .barra .boton { padding: 0.6rem 1.3rem; font-size: 0.9rem; } .menu-movil { display: none; background: none; border: 1px solid var(--borde-vivo); border-radius: 9px; color: var(--tinta); padding: 0.45rem 0.6rem; cursor: pointer; margin-left: auto; } /* ── Botones ────────────────────────────────────────────────────────────── */ .boton { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.92rem 1.9rem; border-radius: 11px; font-weight: 650; font-size: 0.98rem; border: 1px solid transparent; cursor: pointer; transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion), border-color var(--transicion); white-space: nowrap; } .boton--principal { background: linear-gradient(135deg, var(--verde-claro), var(--verde)); color: #04231b; box-shadow: 0 8px 26px -10px rgba(0, 166, 126, 0.75); } .boton--principal:hover { color: #04231b; transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(0, 166, 126, 0.9); } .boton--secundario { background: var(--superficie); border-color: var(--borde-vivo); color: var(--tinta); } .boton--secundario:hover { color: var(--tinta); border-color: var(--verde); transform: translateY(-2px); } /* ── Hero ───────────────────────────────────────────────────────────────── */ .hero { padding-top: clamp(8rem, 18vw, 12rem); padding-bottom: clamp(5rem, 10vw, 8rem); position: relative; overflow: hidden; } /* Halo de fondo. Va en un pseudoelemento y no en una imagen para que no haya ni una petición de red de más. */ .hero::before { content: ""; position: absolute; top: -35%; left: 50%; width: 1000px; height: 1000px; transform: translateX(-50%); background: radial-gradient( circle, rgba(0, 166, 126, 0.16) 0%, rgba(0, 166, 126, 0.05) 38%, transparent 68% ); pointer-events: none; } .hero .contenedor { position: relative; } .hero__distintivo { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem; border: 1px solid var(--borde-vivo); border-radius: 999px; background: rgba(17, 26, 36, 0.7); font-size: 0.83rem; color: var(--texto); margin-bottom: 2rem; } .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-claro); box-shadow: 0 0 0 0 rgba(47, 224, 176, 0.6); animation: latido 2.4s infinite; } @keyframes latido { 70% { box-shadow: 0 0 0 9px rgba(47, 224, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 224, 176, 0); } } .hero h1 { max-width: 15ch; } .hero__texto { max-width: 60ch; font-size: clamp(1.05rem, 2vw, 1.24rem); margin-top: 1.7rem; } .hero__acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; } .hero__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin-top: 4.5rem; padding-top: 2.5rem; border-top: 1px solid var(--borde); } .dato__valor { font-size: 2rem; font-weight: 750; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .dato__etiqueta { font-size: 0.87rem; color: var(--tenue); margin-top: 0.2rem; } /* ── Rejillas y tarjetas ────────────────────────────────────────────────── */ .rejilla { display: grid; gap: 1.4rem; } .rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 2rem; transition: transform var(--transicion), border-color var(--transicion), background var(--transicion); position: relative; overflow: hidden; } .tarjeta:hover { transform: translateY(-4px); border-color: var(--borde-vivo); background: var(--superficie-alta); } .tarjeta h3 { margin-bottom: 0.7rem; } .tarjeta p { font-size: 0.96rem; } .icono { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient( 135deg, rgba(47, 224, 176, 0.18), rgba(0, 166, 126, 0.07) ); border: 1px solid rgba(47, 224, 176, 0.22); margin-bottom: 1.3rem; } .icono svg { width: 22px; height: 22px; stroke: var(--verde-claro); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ── Cómo funciona ──────────────────────────────────────────────────────── */ .pasos { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: paso; } .paso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 2rem 1.7rem; position: relative; } .paso__numero { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--verde-claro), var(--verde)); color: #04231b; display: grid; place-items: center; font-weight: 750; margin-bottom: 1.2rem; } /* ── Tecnología ─────────────────────────────────────────────────────────── */ .tecnologia { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } .tec { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem; transition: border-color var(--transicion), transform var(--transicion); } .tec:hover { border-color: var(--verde); transform: translateY(-3px); } .tec__capa { font-size: 0.73rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--verde-claro); } .tec__nombre { color: var(--tinta); font-weight: 650; font-size: 1.04rem; margin-top: 0.45rem; } .tec__nota { font-size: 0.9rem; margin-top: 0.5rem; color: var(--tenue); } /* ── Seguridad ──────────────────────────────────────────────────────────── */ .lista-seguridad { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; } .lista-seguridad li { display: flex; gap: 1rem; align-items: flex-start; } .marca-check { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 166, 126, 0.16); border: 1px solid rgba(47, 224, 176, 0.35); display: grid; place-items: center; margin-top: 2px; } .marca-check svg { width: 13px; height: 13px; stroke: var(--verde-claro); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .lista-seguridad strong { color: var(--tinta); display: block; font-weight: 620; } .lista-seguridad span { font-size: 0.94rem; } /* ── Bloque de código ───────────────────────────────────────────────────── */ .terminal { background: #05090d; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; font-size: 0.87rem; } .terminal__barra { display: flex; align-items: center; gap: 0.45rem; padding: 0.75rem 1.1rem; background: var(--superficie); border-bottom: 1px solid var(--borde); } .terminal__punto { width: 11px; height: 11px; border-radius: 50%; background: var(--borde-vivo); } .terminal__titulo { margin-left: 0.6rem; font-size: 0.8rem; color: var(--tenue); } .terminal pre { margin: 0; padding: 1.3rem; overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; line-height: 1.75; color: var(--texto); } .tok-verde { color: var(--verde-claro); } .tok-tenue { color: var(--tenue); } .tok-tinta { color: var(--tinta); } /* ── CTA final ──────────────────────────────────────────────────────────── */ .cta { text-align: center; background: linear-gradient( 160deg, var(--superficie) 0%, var(--fondo-alt) 100% ); border: 1px solid var(--borde-vivo); border-radius: 26px; padding: clamp(3rem, 7vw, 5rem) 2rem; position: relative; overflow: hidden; } .cta::before { content: ""; position: absolute; inset: -50% 20% auto; height: 380px; background: radial-gradient( ellipse, rgba(0, 166, 126, 0.16), transparent 70% ); pointer-events: none; } .cta > * { position: relative; } .cta p { max-width: 56ch; margin: 1.2rem auto 0; } .cta__acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; } /* La direccion escrita, ademas del boton. Un `mailto:` en un boton no dice a donde escribe, y quien quiera copiarla para su gestor de correo no puede sacarla de ahi. */ .cta__correo { margin-top: 1.4rem; font-size: 0.95rem; } .cta__correo a { color: var(--verde-claro); font-weight: 600; } /* ── Pie ────────────────────────────────────────────────────────────────── */ .pie { border-top: 1px solid var(--borde); padding: 4rem 0 2.5rem; background: var(--fondo-alt); } .pie__rejilla { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr)); } .pie h4 { color: var(--tinta); font-size: 0.83rem; letter-spacing: 0.11em; text-transform: uppercase; margin: 0 0 1.1rem; } .pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; } .pie a { color: var(--texto); font-size: 0.94rem; } .pie__nota { font-size: 0.9rem; margin-top: 1.1rem; max-width: 42ch; } .pie__abajo { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.87rem; color: var(--tenue); } .aviso { background: rgba(180, 83, 9, 0.1); border: 1px solid rgba(180, 83, 9, 0.3); border-radius: var(--radio); padding: 1.1rem 1.4rem; font-size: 0.9rem; margin-top: 2rem; } .aviso strong { color: #f5c77e; } /* ── Animación de entrada ───────────────────────────────────────────────── */ .revelar { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); } .revelar.visible { opacity: 1; transform: none; } /* * Quien haya pedido menos movimiento no debe ver ninguno, y sobre todo no debe * quedarse con el contenido invisible: sin la primera regla, el contenido se * queda en opacidad 0 para siempre si el script no llega a ejecutarse. */ @media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .punto { animation: none; } } /* ── Adaptación a pantallas pequeñas ────────────────────────────────────── */ @media (max-width: 860px) { .menu { position: fixed; inset: 64px 0 auto 0; flex-direction: column; gap: 0; background: var(--fondo-alt); border-bottom: 1px solid var(--borde); padding: 0.5rem 1.25rem 1.25rem; display: none; } .menu.abierto { display: flex; } .menu li { border-bottom: 1px solid var(--borde); } .menu a { display: block; padding: 0.95rem 0; font-size: 1rem; } .menu a::after { display: none; } .menu-movil { display: block; } .barra .boton--principal { display: none; } .barra { background: rgba(7, 11, 16, 0.92); backdrop-filter: blur(14px); } .hero__acciones .boton { flex: 1 1 100%; justify-content: center; } } /* ── Certificación ────────────────────────────────────────────────────────── * * La sección más larga de la página y la que más se va a leer con detenimiento: * es la que responde a «¿esto se puede certificar?». El diseño busca que el * estado de cada bloque se vea antes de leer una sola línea, con una pastilla * de color y un borde lateral que lo repite. * * El color nunca va solo: cada pastilla lleva su palabra —«Implementado», «A * medias», «Pendiente»—. Quien no distinga verde de ámbar sigue enterándose, * y el estado se conserva al imprimir en blanco y negro. */ .cumplimiento { margin-top: 3.5rem; } .cumplimiento__titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem; font-size: 1.28rem; margin: 0 0 1rem; color: var(--tinta); } .cumplimiento__nota { max-width: 760px; margin-bottom: 1.8rem; color: var(--texto); } .pastilla { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; border: 1px solid; } .pastilla--si { color: #4ade9a; border-color: rgba(74, 222, 154, 0.4); background: rgba(74, 222, 154, 0.1); } .pastilla--medio { color: #f5c451; border-color: rgba(245, 196, 81, 0.4); background: rgba(245, 196, 81, 0.1); } .pastilla--no { color: #f28b82; border-color: rgba(242, 139, 130, 0.4); background: rgba(242, 139, 130, 0.1); } .pastilla--na { color: var(--tenue); border-color: var(--borde-vivo); background: rgba(125, 139, 153, 0.08); } /* Listas de lo implementado. El borde izquierdo verde sustituye al icono de * marca de verificación: se lee igual y no mete quince SVG en el HTML. */ .lista-cumple { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .lista-cumple li { border-left: 3px solid var(--verde); background: var(--superficie); border-radius: 0 var(--radio) var(--radio) 0; padding: 1rem 1.15rem; font-size: 0.95rem; color: var(--texto); text-align: justify; hyphens: auto; } .lista-cumple strong { display: block; color: var(--tinta); margin-bottom: 0.3rem; font-size: 1rem; } .tarjeta--medio { border-left: 3px solid #f5c451; } .tarjeta--na { border-left: 3px solid var(--borde-vivo); } .tarjeta h4 { margin: 0 0 0.6rem; font-size: 1.06rem; color: var(--tinta); } /* La tabla se desborda en móvil por su propio contenedor, nunca la página. */ .tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); } .tabla-cumple { width: 100%; border-collapse: collapse; min-width: 660px; font-size: 0.94rem; } .tabla-cumple th { text-align: left; padding: 0.95rem 1.1rem; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); border-bottom: 1px solid var(--borde); white-space: nowrap; } .tabla-cumple td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--borde); color: var(--texto); vertical-align: top; } .tabla-cumple tr:last-child td { border-bottom: none; } .tabla-cumple td strong { color: var(--tinta); } .dep { display: inline-block; white-space: nowrap; font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--borde-vivo); } /* Quién bloquea qué. Es la información más accionable de la tabla: lo que * depende de un tercero hay que empezarlo antes, aunque el código espere. */ .dep--tercero { color: #f5c451; border-color: rgba(245, 196, 81, 0.35); } .dep--propio { color: var(--verde-claro); border-color: rgba(47, 224, 176, 0.3); } .aviso--fuerte { border-color: rgba(242, 139, 130, 0.35); background: rgba(242, 139, 130, 0.07); } .cumplimiento__pie { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--borde); font-size: 0.88rem; color: var(--tenue); text-align: justify; } /* ── Ejemplo numérico ─────────────────────────────────────────────────────── * * Explicar un exchange con palabras cuesta un párrafo largo; con cuatro cifras * se entiende de una pasada. Este bloque existe para quien viene de una casa * tradicional y necesita ver de dónde sale el ingreso del operador. */ .ejemplo { margin-top: 3.5rem; border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--superficie); padding: clamp(1.6rem, 4vw, 2.6rem); } .ejemplo__titulo { margin: 0 0 0.6rem; font-size: 1.3rem; } .ejemplo__intro { color: var(--texto); margin-bottom: 1.8rem; } .ejemplo__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; } .ejemplo__col { display: grid; gap: 0.8rem; align-content: start; } .ejemplo__paso { background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.15rem; font-size: 0.95rem; color: var(--texto); } .ejemplo__quien { display: block; color: var(--tinta); font-weight: 700; margin-bottom: 0.2rem; } .ejemplo__paso strong { color: var(--verde-claro); } .ejemplo__paso--resultado { border-color: rgba(47, 224, 176, 0.28); } /* El ingreso del operador se resalta aparte: es el dato que busca quien lee * esta página, y el que más cuesta creer al principio. */ .ejemplo__paso--casa { border-color: rgba(245, 196, 81, 0.32); background: rgba(245, 196, 81, 0.06); } .ejemplo__paso--casa strong { color: #f5c451; } .ejemplo__clave { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--borde); color: var(--texto); text-align: justify; hyphens: auto; text-wrap: pretty; } .ejemplo__clave strong { color: var(--tinta); } @media (max-width: 560px) { .ejemplo__clave { text-align: left; } }