/* ===================================================================== WEB PÚBLICA — estilos Tokens del BRIEF como variables CSS. Sin Tailwind, sin compilar. Reglas que mandan (BRIEF §1 y §2): · Interfaz en negro, blanco y cobalto. El cobalto SOLO en botones, enlaces y estados activos. Nunca dentro de una tarjeta de proyecto. · Los ácidos van en el marco, jamás detrás de la imagen del proyecto. · Playfair solo en cursiva, solo en titulares, nunca por debajo de 32px. ===================================================================== */ :root { --lienzo: #FFFFFF; --superficie: #F4F3EE; --tinta: #0B0B0B; --secundario: #6E6D67; --cobalto: #2B34E8; --verde: #CBF24A; /* verde ácido, franja de software */ --radio-tarjeta: 22px; --radio-pildora: 100px; --sombra-tarjeta: 0 20px 44px rgba(11, 11, 11, .16); --sombra-cabecera: 0 18px 40px rgba(11, 11, 11, .14); --margen: clamp(20px, 5vw, 80px); --ancho: 1280px; /* Servidas desde este sitio (assets/fuentes). Las de detrás son el respaldo mientras cargan o si algo fallara. */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --serif: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, 'Times New Roman', serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Cuando Lenis toma el control del scroll, el suavizado del navegador sobra y además se pelean. Lenis pone estas clases en . */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--lienzo); color: var(--tinta); font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--cobalto); color: #fff; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-weight: 900; letter-spacing: -0.035em; line-height: 1.02; margin: 0; } /* --------------------------------------------------------------- REGLAS TIPOGRÁFICAS (BRIEF §2) Inter: texto y UI en 500; titulares en 900 con el interletrado apretado (-0.03 a -0.04em). Ese peso extremo + el apriete es lo que da el carácter de portada. Playfair: SOLO cursiva, SOLO en titulares, NUNCA por debajo de 32px (es una didone: por debajo de ese tamaño los trazos finos se rompen). --------------------------------------------------------------- */ .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; /* El suelo de 32px, cumplido por CSS y no por buena voluntad: aunque el contenedor mande un tamaño menor (en móvil, por ejemplo), la Playfair nunca baja de ahí. */ font-size: max(32px, 1em); } /* Dentro de un titular grande hereda el tamaño del titular, que ya es mayor que 32px. El max() de arriba solo actúa cuando algo la dejaría demasiado pequeña. */ h1 .serif, h2 .serif, h3 .serif { font-size: inherit; } .saltar { position: absolute; left: -9999px; padding: 12px 20px; background: var(--tinta); color: #fff; z-index: 200; } .saltar:focus { left: 12px; top: 12px; } :focus-visible { outline: 3px solid var(--cobalto); outline-offset: 3px; } /* --------------------------------------------------------------- BOTONES (píldoras, radio 100px) --------------------------------------------------------------- */ .boton { display: inline-flex; align-items: center; gap: 12px; padding: 15px 28px; border: 0; border-radius: var(--radio-pildora); font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s, opacity .2s; } .boton:hover { transform: translateY(-2px); } .boton--cobalto { background: var(--cobalto); color: #fff; } .boton--fantasma { background: transparent; color: var(--tinta); border: 1.5px solid rgba(11, 11, 11, .18); } .boton--blanco-contorno { background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; backdrop-filter: blur(6px); } .boton__flecha { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radio-pildora); background: rgba(255, 255, 255, .22); font-size: 13px; } .boton--fantasma .boton__flecha { background: rgba(11, 11, 11, .08); } .enlace-flecha { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cobalto); } .enlace-flecha:hover { text-decoration: underline; } /* --------------------------------------------------------------- CABECERA (BRIEF §4.1) Se transforma de forma CONTINUA con el scroll, no a saltos: una variable --t va de 0 (transparente sobre el héroe) a 1 (píldora de cristal). Todo lo demás se calcula a partir de ella, así que el JavaScript solo tiene que actualizar un número. Sin JavaScript: en la home se queda en 0 y en el resto de páginas la clase --pildora la fija en 1. Siempre legible. --------------------------------------------------------------- */ .cabecera { --t: 0; position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: calc(20px - var(--t) * 6px) var(--margen); /* De blanco sobre el héroe a tinta sobre la píldora. */ color: color-mix(in srgb, #FFFFFF calc((1 - var(--t)) * 100%), var(--tinta)); text-shadow: 0 1px 12px rgba(11, 11, 11, calc((1 - var(--t)) * .35)); } .cabecera--pildora { --t: 1; } .cabecera__caja { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: calc(var(--ancho) - (var(--ancho) - 940px) * var(--t)); margin: 0 auto; padding: calc(var(--t) * 12px) calc(var(--t) * 16px) calc(var(--t) * 12px) calc(var(--t) * 24px); border-radius: calc(var(--t) * var(--radio-pildora)); box-shadow: 0 calc(var(--t) * 18px) calc(var(--t) * 40px) rgba(11, 11, 11, calc(var(--t) * .14)); } /* El cristal va en una capa aparte: `backdrop-filter` crea un contexto de contención que atraparía dentro al menú de móvil, que es fixed. */ .cabecera__caja::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, calc(var(--t) * .86)); /* OJO con el saturate: tiene que ir atado a --t igual que el desenfoque. Dejándolo fijo en 150%, con la cabecera "transparente" seguía saturando el cielo de detrás y se veía una banda azul más intensa a lo ancho. A t=0 esto vale blur(0) saturate(100%), o sea: no hace nada. */ backdrop-filter: blur(calc(var(--t) * 18px)) saturate(calc(100% + var(--t) * 50%)); } @supports not (backdrop-filter: blur(1px)) { .cabecera__caja::before { background: rgba(255, 255, 255, var(--t)); } } /* El logo: blanco sobre el héroe, cobalto en la píldora. */ .cabecera__logo svg { width: calc(68px - var(--t) * 14px); height: auto; display: block; color: color-mix(in srgb, #FFFFFF calc((1 - var(--t)) * 100%), var(--cobalto)); transition: width .2s linear; } .cabecera__enlaces { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; } .idiomas { display: flex; gap: 8px; font-size: 13px; font-weight: 700; } .idiomas__opcion { opacity: .45; } .idiomas__opcion--activa { opacity: 1; } /* El botón "Hablemos": contorno translúcido sobre el héroe, cobalto pleno en la píldora. */ .boton-pildora { padding: 11px 22px; border-radius: var(--radio-pildora); font-weight: 700; font-size: 14px; color: color-mix(in srgb, #FFFFFF calc((1 - var(--t)) * 100%), #FFFFFF); background: color-mix(in srgb, rgba(255, 255, 255, .12) calc((1 - var(--t)) * 100%), var(--cobalto)); border: 1.5px solid rgba(255, 255, 255, calc((1 - var(--t)) * .55)); text-shadow: none; } .hamburguesa { display: none; flex-direction: column; gap: 6px; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; align-items: center; justify-content: center; /* Los botones NO heredan el color del texto: traen el suyo del navegador. Sin esto, la hamburguesa salía negra sobre el cielo en vez de seguir a la cabecera como el resto de los enlaces. */ color: inherit; } .hamburguesa span { display: block; width: 26px; height: 3px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .25s; } /* Sobre el héroe, una sombra sutil para que las líneas blancas se lean igual de bien sobre una nube que sobre el cielo azul. */ .cabecera .hamburguesa span { box-shadow: 0 1px 6px rgba(11, 11, 11, calc((1 - var(--t)) * .35)); } /* Al abrirse se cruzan en aspa. */ .hamburguesa[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); } .hamburguesa[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); } /* Con el menú abierto el fondo es blanco: las líneas pasan a tinta. */ .hamburguesa[aria-expanded="true"] { color: var(--tinta); } .hamburguesa[aria-expanded="true"] span { box-shadow: none; } /* --------------------------------------------------------------- HÉROE (BRIEF §4.2) --------------------------------------------------------------- */ .heroe { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 140px var(--margen) 0; overflow: hidden; } .heroe__cielo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -3; } /* VELO DE LEGIBILIDAD Un degradado oscuro que entra desde la izquierda, justo donde va el texto, y se desvanece antes de llegar al personaje. Funciona mejor que cargar la mano con la sombra: una sombra fuerte ensucia el filo de las letras, mientras que esto baja el brillo del cielo DETRAS del texto y lo deja nitido. Va entre el cielo y el personaje, asi que a el no le afecta: sigue recortado y limpio. */ .heroe::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient( 104deg, rgba(11, 11, 11, .46) 0%, rgba(11, 11, 11, .28) 26%, rgba(11, 11, 11, .08) 48%, transparent 66% ); } .heroe__texto { position: relative; /* Ancho pensado para que el titular entre en DOS líneas. Si se queda corto, la frase se parte en cuatro y pierde toda la fuerza. */ max-width: min(780px, 56vw); color: #fff; padding-bottom: 12vh; /* Sombra en dos capas, que es el truco para que se lea sobre una foto sin que se note que lleva sombra: · la primera, corta y cerrada, define el filo de la letra; · la segunda, amplia y suave, la despega del fondo. Una sola sombra grande emborrona; una sola pequeña no separa. */ text-shadow: 0 1px 2px rgba(11, 11, 11, .30), 0 6px 34px rgba(11, 11, 11, .34); } .heroe__titular { /* Ajustado al titular real. Con 92px la frase se iba a cuatro líneas y "conecta" quedaba suelta en medio, descolgada del resto. */ font-size: clamp(38px, 5.4vw, 76px); letter-spacing: -0.04em; line-height: 1.04; margin-bottom: 20px; /* Reparte las líneas de forma pareja en vez de dejar una larga y otra con dos palabras. */ text-wrap: balance; } .heroe__subtitulo { font-size: clamp(17px, 2vw, 21px); margin: 0 0 32px; /* Suficiente para que la frase entre en UNA línea en escritorio. Con 34ch se partía y "globales." caía sola debajo. */ max-width: 54ch; text-wrap: balance; } .heroe__personaje { position: absolute; right: 6vw; bottom: 0; max-height: 82vh; width: auto; z-index: -1; } /* --------------------------------------------------------------- MARQUESINA DE LOGOS (BRIEF §4.3) --------------------------------------------------------------- */ .marquesina { overflow: hidden; padding: 64px 0; border-bottom: 1px solid var(--superficie); } .marquesina__pista { display: flex; width: max-content; animation: desfilar 50s linear infinite; } .marquesina:hover .marquesina__pista { animation-play-state: paused; } @keyframes desfilar { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquesina__grupo { display: flex; align-items: center; gap: 80px; padding-right: 80px; } .marquesina__logo { font-size: calc(20px * var(--tamano, 100) / 100); font-weight: 700; color: var(--secundario); filter: grayscale(1); opacity: .55; transition: filter .25s, opacity .25s; white-space: nowrap; } .marquesina__logo:hover { filter: none; opacity: 1; } /* El 100% del deslizador equivale a esta altura. Subirla agranda todos los logos a la vez sin descuadrar el equilibrio entre ellos. */ .marquesina__logo img { height: calc(50px * var(--tamano, 100) / 100); width: auto; max-width: none; /* que no lo recorte el max-width global de img */ } /* --------------------------------------------------------------- SECCIONES --------------------------------------------------------------- */ .seccion-cabecera { text-align: center; max-width: 720px; margin: 0 auto 56px; } .seccion-cabecera__titulo { font-size: clamp(34px, 5vw, 60px); } .seccion-cabecera__subfrase { font-size: clamp(19px, 2.4vw, 26px); color: var(--secundario); margin: 14px 0 0; } .destacados-web, .servicios-web { padding: clamp(72px, 10vw, 130px) var(--margen); } .destacados-web { background: linear-gradient(160deg, #E8F0FF 0%, #FFFFFF 45%, #F3EDFF 100%); } .destacados-web__todos { text-align: center; margin-top: 48px; } /* --- Servicios: acordeón (BRIEF §4.5) --- */ .acordeon { max-width: var(--ancho); margin: 0 auto; } .servicio-fila { border-bottom: 1px solid rgba(11, 11, 11, .12); } .servicio-fila__cabecera { display: flex; align-items: center; gap: 28px; width: 100%; padding: 30px 4px; border: 0; background: none; font-family: var(--sans); color: inherit; text-align: left; cursor: pointer; position: relative; } /* La línea de color se dibuja de izquierda a derecha al pasar por encima. */ .servicio-fila__cabecera::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--color); transition: width .45s ease; } .servicio-fila__cabecera:hover::after, .servicio-fila__cabecera[aria-expanded="true"]::after { width: 100%; } .servicio-fila__cabecera[aria-expanded="true"]::after { height: 5px; } .servicio-fila__numero { font-size: 14px; font-weight: 700; color: var(--secundario); min-width: 30px; } .servicio-fila__nombre { flex: 1; font-size: clamp(26px, 3.6vw, 44px); font-weight: 900; letter-spacing: -0.035em; } .servicio-fila__mas { font-size: 26px; font-weight: 500; transition: transform .3s; } .servicio-fila__cabecera[aria-expanded="true"] .servicio-fila__mas { transform: rotate(45deg); } /* --------------------------------------------------------------- PÁGINAS INTERIORES --------------------------------------------------------------- */ .pagina { max-width: var(--ancho); margin: 0 auto; padding: clamp(120px, 16vw, 190px) var(--margen) 80px; } .pagina--centrada { text-align: center; min-height: 62vh; } .pagina__titulo { font-size: clamp(46px, 8vw, 96px); margin-bottom: 36px; } .pagina__subtitulo { font-size: clamp(24px, 3vw, 34px); margin: 90px 0 32px; } .pagina__texto { color: var(--secundario); max-width: 46ch; margin: 0 auto 32px; } .vacio { color: var(--secundario); text-align: center; padding: 80px var(--margen); } /* --- Filtro por disciplina --- */ .filtro { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; } .filtro__opcion { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radio-pildora); border: 1.5px solid rgba(11, 11, 11, .14); font-size: 14px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; } .filtro__opcion:hover { border-color: var(--tinta); } /* Filtro activo en cobalto (BRIEF §4.6) */ .filtro__opcion--activa { background: var(--cobalto); border-color: var(--cobalto); color: #fff; } .filtro__cuenta { opacity: .55; font-size: 12px; } /* --- Selección: tarjetas verticales 4:5 --- */ .rejilla-seleccion { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; } .tarjeta-alta { position: relative; display: block; } .tarjeta-alta__marco { display: block; aspect-ratio: 4 / 5; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--superficie); } .tarjeta-alta__marco img, .tarjeta-alta__marco video { width: 100%; height: 100%; object-fit: cover; /* La imagen crece DENTRO del marco; el marco no se mueve. */ transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .tarjeta-alta:hover .tarjeta-alta__marco img { transform: scale(1.07); } .tarjeta-alta__velo { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; border-radius: var(--radio-tarjeta); background: linear-gradient(to top, rgba(11, 11, 11, .72), rgba(11, 11, 11, 0) 62%); color: #fff; opacity: 0; transition: opacity .35s; } .tarjeta-alta:hover .tarjeta-alta__velo, .tarjeta-alta:focus-visible .tarjeta-alta__velo { opacity: 1; } .tarjeta-alta__titulo { font-size: 27px; line-height: 1.15; } .tarjeta-alta__meta { font-size: 13px; opacity: .82; } /* --- Resto: cuadrícula plana, título siempre visible --- */ .rejilla-resto { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 24px; } .tarjeta-plana__marco { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--superficie); margin-bottom: 14px; } .tarjeta-plana__marco img { width: 100%; height: 100%; object-fit: cover; } .tarjeta-plana__titulo { display: block; font-weight: 700; font-size: 16px; } .tarjeta-plana__meta { display: block; font-size: 13px; color: var(--secundario); } /* --------------------------------------------------------------- FICHA DE PROYECTO (BRIEF §4.7) --------------------------------------------------------------- */ .ficha__cabecera { max-width: var(--ancho); margin: 0 auto; padding: clamp(120px, 16vw, 180px) var(--margen) 48px; } .ficha__volver { display: inline-block; font-size: 14px; font-weight: 700; color: var(--secundario); margin-bottom: 40px; } .ficha__volver:hover { color: var(--cobalto); } .ficha__titulo { font-size: clamp(44px, 7.5vw, 96px); } .ficha__subtitulo { font-size: clamp(24px, 3.4vw, 40px); color: var(--secundario); margin: 18px 0 0; max-width: 22ch; } .ficha__meta { display: flex; flex-wrap: wrap; gap: 40px; margin: 52px 0 0; } .ficha__meta dt { font-size: 12px; font-weight: 700; color: var(--secundario); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .ficha__meta dd { margin: 0; font-size: 16px; font-weight: 500; } .ficha__portada { /* La portada va en el color del proyecto (BRIEF §4.7) */ background: var(--color); padding: clamp(28px, 5vw, 72px) var(--margen); } .ficha__portada img { max-width: var(--ancho); margin: 0 auto; border-radius: var(--radio-tarjeta); width: 100%; max-height: 76vh; object-fit: cover; } .ficha__intro { max-width: 68ch; margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--margen) 0; font-size: clamp(19px, 2.1vw, 23px); } /* --- Cuerpo de bloques --- */ .cuerpo { max-width: var(--ancho); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--margen); display: flex; flex-direction: column; gap: clamp(36px, 6vw, 76px); } .bloque-web { margin: 0; } .bloque-web img { border-radius: 14px; width: 100%; } /* Las imágenes del cuerpo se abren en el visor; la portada no. */ .bloque-web img[data-visor] { cursor: zoom-in; } .bloque-web--dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); } .bloque-web--dos figure { margin: 0; } .bloque-web--texto { max-width: 68ch; margin: 0 auto; font-size: clamp(18px, 2vw, 21px); } .bloque-web--cita { max-width: 26ch; margin: 0 auto; text-align: center; } .bloque-web--cita p { font-size: clamp(32px, 5vw, 54px); line-height: 1.18; margin: 0; } .bloque-web figcaption { font-size: 14px; color: var(--secundario); margin-top: 14px; } .video-marco { position: relative; padding-bottom: 56.25%; border-radius: 14px; overflow: hidden; background: var(--tinta); } .video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* --- Ficha técnica --- */ .ficha-tecnica { background: var(--superficie); padding: clamp(56px, 8vw, 92px) var(--margen); } .ficha-tecnica__caja, .ficha-tecnica__titulo { max-width: var(--ancho); margin: 0 auto; } .ficha-tecnica__titulo { font-size: clamp(24px, 3vw, 34px); margin-bottom: 36px; } .ficha-tecnica__dato { display: flex; flex-wrap: wrap; gap: 16px 40px; padding: 18px 0; border-top: 1px solid rgba(11, 11, 11, .1); } .ficha-tecnica__etiqueta { min-width: 140px; font-size: 12px; font-weight: 700; color: var(--secundario); text-transform: uppercase; letter-spacing: .06em; padding-top: 4px; } .etiquetas { display: flex; flex-wrap: wrap; gap: 8px; } .etiqueta { padding: 7px 16px; border-radius: var(--radio-pildora); /* Las etiquetas heredan el color del proyecto (BRIEF §4.7) */ background: var(--color); color: var(--color-texto); font-size: 13px; font-weight: 700; } .ficha-tecnica__credito { margin: 32px 0 0; font-size: 14px; color: var(--secundario); } /* --- Siguiente proyecto: el enganche (BRIEF §4.7) --- */ .siguiente { display: block; background: var(--tinta); color: #fff; padding: clamp(72px, 11vw, 150px) var(--margen); text-align: center; transition: background .3s; } .siguiente:hover { background: #000; } .siguiente__etiqueta { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .6; margin-bottom: 20px; } .siguiente__titulo { display: block; font-size: clamp(40px, 7vw, 88px); line-height: 1.05; } .siguiente__flecha { display: inline-block; margin-top: 28px; font-size: 26px; transition: transform .3s; } .siguiente:hover .siguiente__flecha { transform: translateX(10px); } /* --------------------------------------------------------------- CONTACTO (BRIEF §4.9) --------------------------------------------------------------- */ .contacto { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 160px var(--margen) 90px; } .contacto__cielo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .contacto__titular { font-size: clamp(34px, 5vw, 56px); text-align: center; margin-bottom: 34px; } .contacto__caja { width: 100%; max-width: 620px; background: var(--lienzo); border-radius: var(--radio-tarjeta); padding: clamp(28px, 5vw, 52px); box-shadow: var(--sombra-tarjeta); animation: flotar 7s ease-in-out infinite; } @keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .contacto__directo { color: #fff; text-shadow: 0 2px 16px rgba(11, 11, 11, .4); font-weight: 500; text-align: center; margin: 0; } .contacto__directo a { font-weight: 700; text-decoration: underline; } .paso { border: 0; padding: 0; margin: 0; } .paso__pregunta { font-size: 21px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 20px; padding: 0; } .opciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .opcion input { position: absolute; opacity: 0; pointer-events: none; } .opcion span { display: inline-block; padding: 11px 20px; border-radius: var(--radio-pildora); border: 1.5px solid rgba(11, 11, 11, .16); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .opcion input:checked + span { background: var(--cobalto); border-color: var(--cobalto); color: #fff; } .opcion input:focus-visible + span { outline: 3px solid var(--cobalto); outline-offset: 3px; } .campo { display: block; margin-bottom: 20px; } .campo span { display: block; font-size: 13px; font-weight: 700; color: var(--secundario); margin-bottom: 8px; } .campo input, .campo textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid rgba(11, 11, 11, .16); font-family: var(--sans); font-size: 16px; font-weight: 500; outline: none; } .campo input:focus, .campo textarea:focus { border-color: var(--cobalto); } .paso__botones { display: flex; gap: 12px; flex-wrap: wrap; } .formulario__aviso { margin: 26px 0 0; font-size: 13px; color: var(--secundario); } /* --------------------------------------------------------------- CIERRE Y PIE (BRIEF §4.8) --------------------------------------------------------------- */ .cierre { background: var(--lienzo); text-align: center; padding: clamp(90px, 13vw, 170px) var(--margen); } .cierre__titular { /* El mínimo es 32px porque dentro va "juntos" en Playfair, y la regla del BRIEF es que la didone nunca baje de ahí: por debajo se le rompen los trazos finos. Con 32px entra cómodo en dos líneas incluso en las pantallas más estrechas. */ font-size: clamp(32px, 6.5vw, 82px); line-height: 1.08; max-width: 18ch; margin: 0 auto 44px; text-wrap: balance; /* reparte las dos líneas de forma pareja */ } .pie { background: var(--tinta); color: #fff; border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; padding: clamp(56px, 8vw, 88px) var(--margen) 48px; } .pie__caja { max-width: var(--ancho); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; } .pie__logo svg { width: 62px; height: auto; color: #fff; } .pie__enlaces { display: flex; flex-wrap: wrap; gap: 28px; font-size: 15px; } .pie__enlaces a { opacity: .78; transition: opacity .2s; } .pie__enlaces a:hover { opacity: 1; } .pie__legal { width: 100%; margin: 0; font-size: 13px; opacity: .5; } /* --------------------------------------------------------------- MÓVIL (BRIEF §6) --------------------------------------------------------------- */ @media (max-width: 860px) { .hamburguesa { display: flex; } .cabecera__enlaces { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 34px; background: var(--lienzo); color: var(--tinta); font-size: 26px; font-weight: 700; text-shadow: none; transform: translateY(-100%); transition: transform .35s ease; } .cabecera__enlaces--abierto { transform: translateY(0); } .cabecera--pildora .cabecera__caja { padding: 10px 14px 10px 18px; } /* El carrusel en móvil: tarjetas planas con snap, sin abanico. */ .carrusel { gap: 16px; } .servicio-fila__panel { grid-template-columns: 1fr; gap: 24px; } .bloque-web--dos { grid-template-columns: 1fr; } .ficha__meta { gap: 24px; } .rejilla-resto { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } /* En móvil la imagen se ve siempre: ni velo ni vídeo. */ .tarjeta-alta__velo { opacity: 1; background: linear-gradient(to top, rgba(11, 11, 11, .78), rgba(11, 11, 11, 0) 48%); } .heroe__personaje { right: -10vw; max-height: 52vh; opacity: .9; } } /* --------------------------------------------------------------- MOVIMIENTO REDUCIDO (BRIEF §3) --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .marquesina__pista { animation: none; transform: none; } .contacto__caja { animation: none; } } /* ===================================================================== CARRUSEL EN ABANICO (BRIEF §4.4) Medidas tomadas del diseño: tarjetas de 240x258, giro de 6° por posición, separación de 110px, y crecimiento a 1.42 al enfocar. ===================================================================== */ .abanico__flechas { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; } .abanico__flecha { width: 44px; height: 44px; border-radius: var(--radio-pildora); border: 1.5px solid var(--tinta); background: none; font-family: var(--sans); font-size: 17px; color: var(--tinta); cursor: pointer; transition: background .2s, color .2s; } .abanico__flecha:hover { background: var(--tinta); color: #fff; } .abanico { position: relative; height: 580px; display: flex; align-items: center; justify-content: center; } .abanico__tarjeta { position: absolute; width: 310px; height: 333px; /* El JS pone el transform. Sin JS, quedan apiladas pero visibles. */ transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; } /* Flotación en reposo: cada tarjeta con su propio desfase, para que no suban y bajen todas a la vez. */ .abanico__flotante { display: block; width: 100%; height: 100%; position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--sombra-tarjeta); animation: flotar-tarjeta 4.6s ease-in-out infinite; animation-delay: var(--retardo, 0s); } @keyframes flotar-tarjeta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px); } } .abanico__tarjeta img { width: 100%; height: 100%; object-fit: cover; } .abanico__pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; background: linear-gradient(0deg, rgba(11, 11, 11, .55) 0%, transparent 60%); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .abanico__tarjeta--enfocada .abanico__pie { opacity: 1; } .abanico__cliente { display: block; width: fit-content; margin-bottom: 8px; padding: 5px 12px; border-radius: var(--radio-pildora); /* El ácido va en la etiqueta, nunca detrás de la imagen. */ background: var(--color); color: var(--color-texto); font-size: 11px; font-weight: 700; } .abanico__titulo { display: block; font-size: 26px; color: #fff; text-shadow: 0 1px 10px rgba(11, 11, 11, .4); } /* --- Móvil: nada de abanico. Tarjetas planas con scroll y snap. --- */ @media (max-width: 760px) { .abanico { height: auto; display: flex; justify-content: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 24px; margin: 0 calc(var(--margen) * -1); padding-left: var(--margen); padding-right: var(--margen); } .abanico__tarjeta { position: static; flex: 0 0 78vw; max-width: 320px; height: 340px; transform: none !important; opacity: 1 !important; scroll-snap-align: center; } .abanico__flotante { animation: none; } /* En móvil el pie se ve siempre: no hay ratón que lo revele. */ .abanico__pie { opacity: 1; } .abanico__flechas { display: none; } } /* ===================================================================== SERVICIOS: panel abierto sobre tinta (BRIEF §4.5 + diseño) ===================================================================== */ /* Sin esto, `display: grid` gana al atributo hidden del HTML y los paneles se quedan SIEMPRE abiertos. */ .servicio-fila__panel[hidden] { display: none; } .servicio-fila__panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; background: var(--tinta); padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px); border-radius: 18px; margin-bottom: 8px; } .servicio-fila__texto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } .servicio-fila__texto p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4; color: #fff; max-width: 400px; margin: 0; } .servicio-fila__enlace { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #fff; opacity: .7; transition: opacity .2s; } .servicio-fila__enlace:hover { opacity: 1; } .servicio-fila__imagen { display: flex; justify-content: center; } .servicio-fila__imagen img { width: 100%; height: 260px; object-fit: cover; border-radius: 16px; } @media (max-width: 760px) { .servicio-fila__panel { grid-template-columns: 1fr; gap: 28px; } .servicio-fila__imagen img { height: 200px; } } /* ===================================================================== PERSONAJE DEL HÉROE El cuerpo va recortado sobre el cielo, que es una capa fija por detrás. La cabeza gira siguiendo el ratón: la tira de fotogramas se desplaza como fondo, y el fotograma que se ve depende de dónde esté el cursor. ===================================================================== */ .personaje { position: absolute; /* Centrado-derecha y apoyado en el borde inferior, como en el diseño: el titular le pasa por delante y el OVNI queda libre arriba. */ left: 58%; transform: translateX(-50%); bottom: 0; z-index: -1; height: min(78vh, 780px); aspect-ratio: var(--proporcion, 0.75); /* De partida, la imagen fija: si no hay ratón o el visitante pide menos movimiento, esto es lo único que se descarga. */ background-image: url('/assets/img/personaje.webp'); background-repeat: no-repeat; background-size: contain; background-position: bottom center; /* Sombra elíptica suave bajo los pies, para que no flote. */ filter: drop-shadow(0 18px 22px rgba(11, 11, 11, .22)); } /* Con la tira cargada: el fondo pasa a ser la cuadrícula de fotogramas. background-size en % multiplica: 600% con 6 columnas = cada fotograma ocupa justo el ancho del hueco. */ .personaje--animado { background-image: url('/assets/img/personaje-tira.webp'); background-size: calc(var(--columnas) * 100%) calc(var(--filas) * 100%); background-position: 0% 0%; } @media (max-width: 860px) { .personaje { left: 50%; height: min(52vh, 420px); } } @media (prefers-reduced-motion: reduce) { /* Sin movimiento: se queda la imagen fija, no se descarga la tira. */ .personaje--animado { background-image: url('/assets/img/personaje.webp'); background-size: contain; background-position: bottom center; } } /* ===================================================================== FRANJA DE SOFTWARE (entre Servicios y el cierre) Verde ácido del sistema, con la marquesina de herramientas. ===================================================================== */ .franja-software { background: var(--verde, #CBF24A); padding: 48px 0; overflow: hidden; } .franja-software__titulo { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); opacity: .6; margin: 0 0 24px; } .marquesina--software { padding: 0; border: 0; } /* Va algo más rápida que la de clientes, como en el diseño. */ .marquesina__pista--software { animation-duration: 34s; } .marquesina--software .marquesina__grupo { gap: 64px; padding-right: 64px; } /* Las herramientas van en un solo color, sin gris ni hover de color. */ .marquesina__logo--software { font-weight: 900; font-size: calc(24px * var(--tamano, 100) / 100); letter-spacing: -0.02em; color: var(--tinta); filter: none; opacity: 1; } /* Los logos van en su color. El diseño los planteaba en un solo tono, pensando en marcas de un color; con los reales (Figma, Google, Slack…) el monocromo forzado los deja irreconocibles y algunos desaparecen. Si prefieres verlos en tinta, se cambia esta regla y ya. */ .marquesina__logo--software img { filter: none; opacity: 1; } /* El desplazamiento del arrastre se aplica al conjunto, no a cada tarjeta: así el abanico se mueve entero sin deshacerse. */ .abanico { transform: translateX(var(--arrastre, 0px)); } .abanico:not(.abanico--arrastrando) { transition: transform .25s ease-out; } .abanico--arrastrando { cursor: grabbing; transition: none; } .abanico--arrastrando * { pointer-events: none; } /* ===================================================================== VISOR DE IMÁGENES (BRIEF §4.7) ===================================================================== */ /* --- La imagen del cuerpo, pulsable --- */ .ampliable { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 14px; overflow: hidden; position: relative; cursor: zoom-in; line-height: 0; } .ampliable img { width: 100%; height: auto; border-radius: 14px; transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .ampliable:hover img { transform: scale(1.015); } /* La lupa aparece al pasar por encima: avisa de que se puede ampliar. */ .ampliable__lupa { position: absolute; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: var(--radio-pildora); background: rgba(11, 11, 11, .55); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; } .ampliable__lupa svg { width: 20px; height: 20px; } .ampliable:hover .ampliable__lupa, .ampliable:focus-visible .ampliable__lupa { opacity: 1; transform: translateY(0); } /* En pantallas táctiles no hay "pasar por encima": se ve siempre. */ @media (hover: none) { .ampliable__lupa { opacity: 1; transform: none; } } /* --- El visor --- */ .visor { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 12px; padding: clamp(16px, 4vw, 56px); /* Fondo oscuro atenuado, no negro puro. */ background: rgba(11, 11, 11, .92); backdrop-filter: blur(10px); animation: aparecer-visor .25s ease; } @keyframes aparecer-visor { from { opacity: 0; } to { opacity: 1; } } .visor[hidden] { display: none; } .visor__marco { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; min-width: 0; } /* La imagen COMPLETA, en su proporción real, sin recortar, ajustada por el lado más largo. Eso es exactamente lo que hace object-fit: contain con un tamaño máximo en las dos direcciones. */ .visor__imagen { max-width: 100%; max-height: calc(100vh - clamp(96px, 16vw, 190px)); width: auto; height: auto; object-fit: contain; border-radius: 6px; transition: opacity .2s; } .visor--cargando .visor__imagen { opacity: .35; } .visor__pie { color: rgba(255, 255, 255, .78); font-size: 14px; text-align: center; max-width: 60ch; margin: 0; } .visor__pie[hidden] { display: none; } .visor__cerrar { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); width: 48px; height: 48px; border: 0; border-radius: var(--radio-pildora); background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background .2s; } .visor__cerrar:hover { background: rgba(255, 255, 255, .24); } .visor__flecha { flex-shrink: 0; width: 52px; height: 52px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: var(--radio-pildora); background: none; color: #fff; font-size: 20px; cursor: pointer; transition: background .2s, border-color .2s; } .visor__flecha:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); } .visor__flecha[hidden] { display: none; } .visor__contador { position: absolute; bottom: clamp(14px, 3vw, 28px); left: 50%; transform: translateX(-50%); margin: 0; color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 700; letter-spacing: .06em; } .visor__contador[hidden] { display: none; } /* Mientras el visor está abierto, la página de detrás no se mueve. */ body.sin-scroll { overflow: hidden; } @media (max-width: 700px) { /* En móvil se navega deslizando, así que las flechas estorban. */ .visor__flecha { display: none; } } @media (prefers-reduced-motion: reduce) { .visor { animation: none; } .ampliable img { transition: none; } } /* --- Formulario: envío correcto, errores y trampa antirrobots --- */ .enviado { text-align: center; padding: 20px 0; } .enviado__marca { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: var(--radio-pildora); background: var(--cobalto); color: #fff; font-size: 30px; margin-bottom: 24px; } .enviado__titulo { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; } .enviado__texto { color: var(--secundario); max-width: 40ch; margin: 0 auto 28px; } .formulario__errores { background: #FDECEC; border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; } .formulario__errores p { margin: 0 0 6px; font-size: 14px; color: #BB3333; } .formulario__errores p:last-child { margin-bottom: 0; } /* La trampa: fuera de la vista, fuera del recorrido del tabulador y marcada como decorativa. Una persona no la encuentra ni por accidente; los robots rellenan todo lo que ven en el HTML. */ .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ===================================================================== REPASO RESPONSIVE (BRIEF §6) Sección por sección, no un retoque final. ===================================================================== */ /* --------------------------------------------------------------- TABLET (hasta 900px) En escritorio el texto va centrado en vertical y el personaje ocupa el lado derecho. En vertical eso no funciona: el texto queda flotando en mitad del cielo, con un desierto azul encima, y el personaje se le monta por debajo. Aquí se apilan: texto arriba, personaje abajo. --------------------------------------------------------------- */ @media (max-width: 1024px) { /* En vertical el texto va arriba, asi que el velo entra desde arriba y no desde la izquierda. */ .heroe::before { background: linear-gradient( 178deg, rgba(11, 11, 11, .48) 0%, rgba(11, 11, 11, .26) 30%, rgba(11, 11, 11, .06) 52%, transparent 68% ); } .heroe { align-items: flex-start; /* el texto sube, se acaba el vacío */ min-height: 92svh; padding: clamp(104px, 13vh, 150px) var(--margen) 0; } .heroe__texto { max-width: 100%; padding-bottom: 0; } .heroe__titular { font-size: clamp(40px, 7.2vw, 62px); } .heroe__subtitulo { font-size: 18px; margin-bottom: 26px; } /* Centrado y más grande: en vertical es el protagonista. */ .personaje { left: 50%; height: min(50vh, 520px); } .destacados-web, .servicios-web { padding: clamp(56px, 9vw, 90px) var(--margen); } } /* --------------------------------------------------------------- El abanico necesita unos 1100px para desplegarse sin salirse de la pantalla (6 tarjetas de 310px separadas 142px). Por debajo de eso se convierte en tarjetas planas con scroll y snap, como en móvil. --------------------------------------------------------------- */ @media (max-width: 1100px) { .abanico { height: auto; display: flex; justify-content: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--margen) 24px; margin: 0 calc(var(--margen) * -1); transform: none !important; } .abanico__tarjeta { position: static; flex: 0 0 62vw; max-width: 330px; height: 356px; transform: none !important; opacity: 1 !important; scroll-snap-align: center; } .abanico__flotante { animation: none; } .abanico__pie { opacity: 1; } .abanico__flechas { display: none; } } @media (max-width: 1024px) { .servicio-fila__panel { grid-template-columns: 1fr; gap: 24px; } .servicio-fila__imagen img { height: 230px; } .rejilla-seleccion { grid-template-columns: repeat(2, 1fr); gap: 20px; } .ficha__meta { gap: 22px 32px; } .bloque-web--dos { grid-template-columns: 1fr 1fr; gap: 12px; } } /* --------------------------------------------------------------- MÓVIL (hasta 600px) --------------------------------------------------------------- */ @media (max-width: 600px) { body { font-size: 16px; } .heroe { min-height: 94svh; padding-top: clamp(88px, 11vh, 120px); } .heroe__titular { font-size: clamp(34px, 9.5vw, 46px); } .heroe__subtitulo { font-size: 16px; max-width: 30ch; } .personaje { height: min(40vh, 350px); } .abanico__tarjeta { flex: 0 0 80vw; height: 330px; } /* Dos columnas se quedan muy estrechas para tarjetas 4:5. */ .rejilla-seleccion { grid-template-columns: 1fr; gap: 18px; } .rejilla-resto { grid-template-columns: repeat(2, 1fr); } .bloque-web--dos { grid-template-columns: 1fr; } .seccion-cabecera { margin-bottom: 36px; } .servicio-fila__cabecera { gap: 16px; padding: 22px 2px; } .servicio-fila__nombre { font-size: clamp(21px, 6vw, 28px); } .servicio-fila__panel { padding: 26px 20px; } .servicio-fila__imagen img { height: 190px; } .ficha__portada img { max-height: 62vh; } .ficha__meta { gap: 18px 26px; } .ficha-tecnica__dato { flex-direction: column; gap: 8px; } .ficha-tecnica__etiqueta { min-width: 0; } .contacto { padding-top: 130px; } .contacto__caja { padding: 26px 20px; } .paso__pregunta { font-size: 19px; } .pie__caja { gap: 24px; } .pie__enlaces { gap: 16px 20px; font-size: 14px; } /* La marquesina, más apretada para que pasen más logos por pantalla. */ .marquesina { padding: 40px 0; } .marquesina__grupo { gap: 44px; padding-right: 44px; } .franja-software { padding: 36px 0; } } /* --------------------------------------------------------------- MÓVIL PEQUEÑO (hasta 380px) — iPhone SE y similares --------------------------------------------------------------- */ @media (max-width: 380px) { .heroe__titular { font-size: 32px; } .personaje { height: min(34vh, 290px); } .rejilla-resto { grid-template-columns: 1fr; } .boton { padding: 13px 22px; font-size: 14px; } } /* --------------------------------------------------------------- PANTALLAS BAJAS (móvil apaisado, portátiles pequeños) Con poca altura, un héroe de pantalla completa no deja ver que hay más contenido debajo, y el personaje no cabe. --------------------------------------------------------------- */ @media (max-height: 560px) and (orientation: landscape) { .heroe { min-height: 0; padding: 96px var(--margen) 40px; align-items: center; } .heroe__titular { font-size: clamp(28px, 5vw, 44px); } .personaje { height: 78vh; left: 78%; } }