/* Archivo (Omnibus-Type) instanciada en peso 800 / ancho 125 — la grotesca ANCHA, equivalente libre del pack Wide de Heading Now — y recortada: 4.5 KB. SIL Open Font License 1.1, ver archivo-LICENSE.txt. font-display:block y precargada desde el : pesa 4.5 KB, llega antes de que se note. */ @font-face { font-family: "Archivo Wordmark"; src: url("archivo-800-125.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: block; } /* Archivo Black (Omnibus-Type) — el corte estatico bien negro de la familia, para la frase debajo del retrato con el interletraje bien cerrado que pidio Jorge (maqueta en Canva, tracking -136 alla). Recortada: 7.4 KB. SIL Open Font License 1.1, ver archivo-black-LICENSE.txt. */ @font-face { font-family: "Archivo Black Frase"; src: url("archivo-black.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Caja de TODO el sitio (nav, nombre, contenido, pie): de lado a lado, con el contenido a MEDIA PULGADA del borde, como lo pidio Jorge. En CSS media pulgada son exactamente 48px. En movil baja a 24px (media pulgada en un telefono seria la quinta parte de la pantalla). */ :root { --ancho: none; --margen: 48px; --ancho-foto: min(53.5%, 1026px); } @media (max-width: 640px) { :root { --margen: 24px; --ancho-foto: calc(100% - 2 * var(--margen)); } } * { margin: 0; padding: 0; box-sizing: border-box; } body { color-scheme: light; background: #000000; color: #f5f5f3; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; } a { color: #f5f5f3; } a:hover { opacity: 0.6; } /* nav */ /* El filete cruzaba los 1440px de pantalla mientras el contenido medía 680: esa discordancia era lo que hacía sentir los lados vacíos. Ahora el filete mide lo que mide el contenido. Cuando el menú está abierto, .top recupera el suyo para que el desplegable cierre con una línea. */ /* La barra de arriba se queda fija mientras se hace scroll — pedido de Jorge. z-index 3, por encima del nombre (2) y de la foto (1). Fondo propio porque, al quedar fija, el nombre y la foto pasan por detras. */ .top { position: sticky; top: 0; z-index: 3; background: #000000; } .top[data-menu] { border-bottom: 1px solid #2e2e2e; } .top-inner { border-bottom: 1px solid #2e2e2e; max-width: var(--ancho); margin: 0 auto; padding: 18px var(--margen); display: flex; justify-content: space-between; align-items: center; } .top .site { font-weight: 500; font-size: 15px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; } .top .ig { display: flex; align-items: center; color: #f5f5f3; } .top .ig svg { display: block; } /* hero — title fills the upper half, image fills the lower */ .wrap-wide { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); } @media (max-width: 640px) { .top-inner { padding: 16px 24px; } } .masthead { display: flex; flex-direction: column; background: #000000; position: relative; } /* el titulo se queda pegado y la foto le pasa por debajo al scrollear */ .hero { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 78px 0 30px; position: sticky; top: var(--top-alto, 64px); z-index: 2; } h1 { position: relative; width: 100%; container-type: inline-size; /* el tamano del nombre se mide contra esto */ margin: 0; } /* El nombre gigante de borde a borde, en grotesca ancha — la idea de la portada de Jake Fauber, con la letra y el nombre de Victor. Con "A.": la caja de "VICTOR A." mide 6.418em y la de SANTIAGO 6.807em con este tracking; con un hueco igual al espacio natural (0.284em), 100/(6.418+0.284+6.807) = 7.40cqw en teoria. El +0.7% de siempre por el kerning real del navegador da 7.45cqw. space-between manda a los dos bordes. */ .wordmark { display: flex; flex-direction: row; justify-content: space-between; font-family: "Archivo Wordmark", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 7.45cqw; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; color: #f5f5f3; } /* En movil no cabe en una linea: dos, cada una lo mas grande posible. VICTOR A arriba y SANTIAGO abajo; manda SANTIAGO: 100/6.807 = 14.69cqw. */ @media (max-width: 640px) { .wordmark { flex-direction: column; font-size: 14.69cqw; line-height: 0.92; } } /* Con fondo negro las letras claras ya se leen sobre el negro Y sobre la foto oscura: la copia invertida que las cambiaba de color ya no hace falta. Se queda en el HTML porque app.js la busca; aqui solo se apaga. */ .wordmark.claro { display: none; } /* La frase del sitio viejo de Victor en Wix («HAZ MUSICA QUE PERDURE»), debajo de la foto y al MISMO ancho — comparten --ancho-foto para que nunca se desalineen aunque cambie el 53.5% o el tope de 1026px. */ /* La caja MIDE (container-type) y el texto adentro se dimensiona contra ella (cqw) — igual que h1/.wordmark arriba. Un elemento no puede medirse contra si mismo: por eso son dos, no uno. */ .hero-frase-caja { flex: 0 0 auto; align-self: center; width: calc(var(--ancho-foto) + 96px); /* la foto + 48px (1/2") de cada lado */ container-type: inline-size; margin: 22px 0 0; padding: 0 0 40px; } @media (max-width: 640px) { .hero-frase-caja { align-self: stretch; width: auto; } } .hero-frase { text-align: center; text-transform: uppercase; font-family: "Archivo Black Frase", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: clamp(30px, 7.71cqw, 130px); letter-spacing: -0.12em; line-height: 0.95; color: #f5f5f3; } /* El retrato: foto vertical 2:3 ENTERA, centrada, con negro a los lados — como el retrato de la portada de Jake Fauber. Medido en la suya a 1920px: la foto ocupa el 53.5% del ancho. Se frena en 1026px (su tamano a 1920) para que en pantallas enormes no se vuelva un cartel. En movil va a todo el ancho menos los margenes. Como la foto ya es 2:3, no se recorta nada. */ .hero-img { flex: 0 0 auto; align-self: center; width: var(--ancho-foto); margin: 0; aspect-ratio: 2 / 3; position: relative; z-index: 1; overflow: hidden; background: #000000; } .hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; } .hero-img .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #85857f; font-size: 14px; letter-spacing: .02em; } /* copy that used to live in the hero */ /* p.intro y .credits ya no dependen de .lede: esa caja vivia solo en el Home, ahora este texto se mudo a Sobre mi (contacto.html) y su ritmo de espacio lo da el h2 de la seccion, como en el resto del sitio. */ p.intro { max-width: 560px; font-size: 18px; } p.intro + p.intro { margin-top: 16px; } /* sections */ section { padding: 56px 0; border-top: 1px solid #2a2a2a; } h2 { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: #a3a39e; margin-bottom: 36px; } /* presets */ .preset { padding: 28px 0; border-top: 1px solid #1f1f1f; } .preset:first-of-type { border-top: none; padding-top: 0; } .preset-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .preset h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .preset h3 small { font-weight: 400; font-size: 15px; color: #a3a39e; margin-left: 8px; } .preset .price { font-size: 18px; font-weight: 500; white-space: nowrap; } .preset p { margin-top: 8px; color: #cfcfca; max-width: 520px; } .preset .incl { margin-top: 6px; font-size: 14.5px; color: #a3a39e; } /* Boton principal: SOLIDO y con color propio. Antes era de contorno y sin `color`, asi que heredaba el del sistema — en el iPhone eso lo dejaba invisible. En movil no hay hover: si el boton no se ve solo, no se ve nunca. */ .buy { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; margin-top: 18px; min-height: 44px; padding: 11px 26px; border: 1.5px solid #f5f5f3; border-radius: 3px; background: #f5f5f3; color: #000000; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; } .buy:hover { background: #ffffff; border-color: #ffffff; color: #000000; opacity: 1; } .buy:active { background: #d6d6d1; border-color: #d6d6d1; } .buy:focus-visible { outline: 2px solid #f5f5f3; outline-offset: 3px; } .demos-note { margin-top: 36px; font-size: 15px; color: #a3a39e; } /* Boton secundario, de borde — "Continue Shopping" de Jake Fauber pero con la tipografia y los bordes propios del sitio, no su monospace. */ .boton-borde { display: inline-flex; align-items: center; justify-content: center; margin-top: 22px; min-height: 44px; padding: 11px 26px; border: 1.5px solid #f5f5f3; border-radius: 3px; background: transparent; color: #f5f5f3; font-family: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; } .boton-borde:hover { background: #f5f5f3; color: #000000; opacity: 1; } /* ---- El catálogo usa el ancho; la prosa no se mueve ---- Los presets y las preguntas pasan a la caja ancha (--ancho) que ya usan el nav y el logotipo. El lede y "Cómo funciona" se quedan en .wrap: son prosa y 632px es su medida. Frenos deliberados para que esto NO se lea como una tabla de precios de SaaS: sin cajas, sin sombras, sin esquinas redondeadas, sin fondo de color, sin "el más popular", y el precio en la escala del cuerpo (18px). El filete de 1px es lo único que separa, igual que en todo el sitio. */ /* ---- un solo borde izquierdo ---- La prosa conserva su medida de 632px, pero alineada al MISMO eje que el nav, el logotipo y el catálogo, en vez de centrada. Así la página tiene un eje y no dos, y el aire queda todo a la derecha: se lee como margen, no como sobra. .wrap se queda intacto para trabajos.html y contacto.html. */ .wrap-prosa { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); } .wrap-prosa > * { max-width: 632px; } @media (max-width: 640px) { } /* ---- Trabajos y Contacto: mismo eje y mismo ancho que el Home ---- La prosa se queda en sus 632px con .wrap-prosa; los bloques que NO son prosa (videos, formulario, foto) se emparejan de dos en dos dentro de la caja de 1180. Mismo criterio que el catálogo del Home. */ .duo { display: grid; gap: 56px; align-items: start; } #escuchar .duo, #escribeme .duo { grid-template-columns: 1fr 1fr; } /* la foto de familia va al lado del texto, no encima: ahorra media pantalla */ #sobre .duo { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } #sobre .about-photo { margin-bottom: 0; } #sobre .about { max-width: 632px; } /* dentro del par no hace falta margen vertical, pero el par si necesita separarse de lo que tiene encima */ #escuchar .duo { margin-top: 40px; } #escuchar .duo .media + .media { margin-top: 0; } #escribeme .caja-contacto { margin-top: 0; } /* Contacto: el título y la caja del formulario arrancan a la misma altura. La sección hace de cabecera, así que se lleva el aire de arriba. */ #escribeme { padding-top: 64px; } #escribeme .cabecera { padding: 0; } #escribeme .cabecera + h2 { margin-top: 48px; } @media (max-width: 860px) { #escuchar .duo, #escribeme .duo, #sobre .duo { grid-template-columns: 1fr; gap: 40px; } #sobre .about-photo { margin-bottom: 32px; } } .rejilla { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 76px; border-top: 1px solid #2a2a2a; padding-top: 30px; } .rejilla .preset { display: flex; flex-direction: column; padding: 0; border-top: none; position: relative; } /* filete vertical en medio del canal */ .rejilla .preset + .preset::before { content: ""; position: absolute; top: 0; bottom: 0; left: -38px; border-left: 1px solid #2a2a2a; } .rejilla .preset-top { display: block; } .rejilla .preset h3 small { display: block; margin-left: 0; margin-top: 3px; } .rejilla .preset .price { margin-top: 10px; } .rejilla .preset p { font-size: 16px; max-width: none; } /* el botón se clava abajo: los tres caen en la misma línea aunque los párrafos midan distinto, y por eso la fila se ve intencional */ .rejilla .preset form { margin-top: auto; } #presets .demos-note { max-width: 520px; padding-top: 26px; border-top: 1px solid #1f1f1f; } /* las cuatro preguntas en 2x2. align-items:start no es opcional: sin eso, abrir una estira a su vecina de fila y le deja un hueco blanco dentro. */ #preguntas .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } /* Por debajo de 999px se deshace todo y vuelve exactamente a la maqueta de antes: tres columnas de preset necesitan ~260px cada una más los canales. */ @media (max-width: 999px) { .rejilla { display: block; border-top: none; padding-top: 0; } .rejilla .preset { display: block; padding: 28px 0; border-top: 1px solid #1f1f1f; } .rejilla .preset:first-child { border-top: none; padding-top: 0; } .rejilla .preset + .preset::before { display: none; } .rejilla .preset-top { display: flex; } .rejilla .preset h3 small { display: inline; margin-left: 8px; margin-top: 0; } .rejilla .preset .price { margin-top: 0; } .rejilla .preset p { font-size: 17px; max-width: 520px; } .rejilla .preset form { margin-top: 0; } } @media (max-width: 700px) { #preguntas .faq { grid-template-columns: 1fr; } } /* credits line */ .credits { margin-top: 26px; padding-top: 22px; border-top: 1px solid #2a2a2a; max-width: 560px; font-size: 15.5px; color: #a3a39e; } .credits strong { color: #f5f5f3; font-weight: 600; } /* media */ .media + .media { margin-top: 40px; } .media h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; } .media .cap { font-size: 14.5px; color: #a3a39e; margin-bottom: 14px; } .vid { display: block; width: 100%; padding: 0; border: 1px solid #2a2a2a; background: #141414; cursor: pointer; position: relative; aspect-ratio: 16/9; overflow: hidden; font-family: inherit; } .vid img { width: 100%; height: 100%; object-fit: cover; display: block; } .vid .pl { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(26,26,26,0.82); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; padding-left: 4px; transition: background .15s; } .vid:hover .pl { background: #f5f5f3; } .vid iframe { width: 100%; height: 100%; border: 0; display: block; } .vid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 620px) { .vid-grid { grid-template-columns: 1fr; } } .vid-grid h3 { font-size: 15.5px; font-weight: 600; } .vid-grid .cap { font-size: 14px; margin-bottom: 10px; } .vid-grid > div + div { margin-top: 0; } @media (max-width: 620px) { .vid-grid { gap: 28px; } } .sp-embed { border: 1px solid #2a2a2a; } .sp-embed iframe { display: block; width: 100%; height: 380px; border: 0; } .reels { list-style: none; margin-top: 14px; } .reels li { border-top: 1px solid #1f1f1f; } .reels li:last-child { border-bottom: 1px solid #1f1f1f; } .reels a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; text-decoration: none; font-size: 15.5px; } .reels a:hover { opacity: 1; color: #a3a39e; } .reels .arw { color: #85857f; font-size: 14px; flex-shrink: 0; } /* about */ .about-photo { width: 100%; aspect-ratio: 4/5; background: #141414; margin-bottom: 32px; overflow: hidden; } .about-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 58%; } .about p + p { margin-top: 16px; } /* gear */ .gear { list-style: none; } .gear li { padding: 18px 0; border-top: 1px solid #1f1f1f; } .gear li:first-child { border-top: none; padding-top: 0; } .gear .g-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .gear h3 { font-size: 17px; font-weight: 600; } .gear .g-link { font-size: 14px; color: #a3a39e; white-space: nowrap; } /* en pantalla estrecha el titulo largo y el enlace se pisaban: que bajen */ @media (max-width: 520px) { .gear .g-top { flex-wrap: wrap; gap: 2px 16px; } } .gear p { margin-top: 5px; color: #cfcfca; font-size: 15.5px; max-width: 520px; } .gear .feat { background: #0f0f0f; margin: 0 -20px; padding: 20px; border-top: none; } .gear .feat p { max-width: 500px; } /* faq — cada pregunta en su propia tarjeta, se despliega al darle clic. El rebote sale del easing con sobrepaso: pasa de largo y regresa. */ .faq { display: flex; flex-direction: column; gap: 10px; } .qa { border: 1px solid #2a2a2a; border-radius: 4px; background: #0c0c0c; transition: border-color .3s ease; } .qa[data-abierta] { border-color: #4a4a4a; } .qa-t { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 18px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 16.5px; font-weight: 500; color: #f5f5f3; text-align: left; line-height: 1.4; } .qa-t:focus-visible { outline: 2px solid #f5f5f3; outline-offset: -2px; border-radius: 4px; } .qa-c { width: 15px; height: 15px; flex-shrink: 0; color: #85857f; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } .qa[data-abierta] .qa-c { transform: rotate(180deg); color: #f5f5f3; } /* La altura va en pixeles (la mide el JS en --alto). Es lo unico que deja que el easing SE PASE de largo y regrese: ahi esta el rebote. Con fr no se puede, porque un fr nunca crece mas que su contenido. Sin JS el panel queda abierto, asi que las respuestas siempre se leen. */ .qa-panel { overflow: hidden; } .qa-panel p { padding: 0 18px 18px; color: #cfcfca; font-size: 15.5px; } .faq[data-js] .qa-panel { height: 0; transition: height .34s cubic-bezier(.4, 0, .2, 1); /* al cerrar, seco */ } .faq[data-js] .qa[data-abierta] .qa-panel { height: var(--alto, auto); transition: height .58s cubic-bezier(.34, 1.7, .5, 1); /* al abrir, rebota */ } .faq[data-js] .qa-panel p { opacity: 0; transform: translateY(-5px); transition: opacity .26s ease, transform .26s ease; } .faq[data-js] .qa[data-abierta] .qa-panel p { opacity: 1; transform: none; transition-delay: .1s; } @media (prefers-reduced-motion: reduce) { .qa-c, .faq[data-js] .qa-panel, .faq[data-js] .qa-panel p { transition-duration: .01ms !important; } } /* footer — la seccion de acento del sitio, como el gris de Jake Fauber en la suya, pero en un azul fuerte y oscuro con un poco de degradado (pedido de Jorge, con la referencia de una tapa Kempinski en azul marino). El resto del sitio se queda en negro plano; el acento vive solo aqui. */ footer { background: linear-gradient(152deg, #1b2a54 0%, #0e1730 45%, #0a0f1f 100%); border-top: 1px solid #2a3a66; padding: 32px 0 0; font-size: 14px; color: #a3a39e; } .foot-inner { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } footer a { color: #a3a39e; } .foot-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .foot-links a[aria-current="page"] { color: #f5f5f3; } .foot-sep { width: 1px; height: 12px; background: #4a5a8a; } @media (max-width: 560px) { .foot-inner { flex-direction: column-reverse; align-items: flex-start; gap: 18px; } .foot-links { gap: 14px; } .foot-sep { display: none; } } /* El nombre como carrusel: entra por la izquierda y sale por la derecha, sin parar — la idea de Jorge para cerrar la pagina, con la escala y la letra (Archivo Wordmark, la misma del nombre de arriba) de Jake Fauber, pero en movimiento en vez de fija. Va SIN el padding lateral del footer: .marquee es hermano de .foot-inner, no hijo, asi que sangra de borde a borde de la pantalla. La costura del loop: .pista mide el doble (dos copias identicas de .grupo) y se anima de 0 a -50% — al llegar ahi la segunda copia esta exactamente donde empezo la primera, y el corte no se nota. */ .marquee { overflow: hidden; width: 100%; padding: 6px 0 22px; } .marquee__pista { display: flex; width: max-content; animation: marquee-desplazar 16s linear infinite; } .marquee__grupo { display: flex; align-items: baseline; flex-shrink: 0; font-family: "Archivo Wordmark", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; text-transform: uppercase; white-space: nowrap; font-size: clamp(52px, 10vw, 168px); letter-spacing: -0.01em; line-height: 1; color: #f5f5f3; } .marquee__punto { font-size: 0.32em; margin: 0 0.4em; color: #6b7ab0; } @keyframes marquee-desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__pista { animation-play-state: paused; } } @media (max-width: 540px) { .preset-top { flex-direction: column; gap: 4px; } } /* ---- menu desplegable ---- */ .top-acc { display: flex; align-items: center; gap: 14px; } /* Menu en linea, como el de Jake Fauber: TIENDA donde el suyo dice TEDDYTONES. BLOG y ABOUT ME no existen aqui; sus equivalentes son Trabajos y Contacto (que tiene el «Sobre mi»). Iconos mas separados que el texto, como el suyo. En pantallas estrechas se esconde y vuelve la hamburguesa. */ .enlaces { display: flex; align-items: center; gap: 22px; margin-right: 56px; } .enlaces a { color: #f5f5f3; text-decoration: none; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; } .enlaces a:hover { opacity: .6; } .enlaces a[aria-current="page"] { color: #85857f; } .top .carrito { display: flex; align-items: center; color: #f5f5f3; margin-left: 30px; } .top .carrito svg { display: block; } /* .top delante: .menu-b se declara mas abajo con display:flex y, a igual prioridad, ganaria esa y la hamburguesa saldria tambien en computadora. */ @media (min-width: 821px) { .top .menu-b, .top .menu { display: none; } } @media (max-width: 820px) { .enlaces, .top .carrito { display: none; } } .menu-b { width: 34px; height: 34px; padding: 0; margin: 0; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #f5f5f3; } .menu-b span { display: block; width: 19px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .34s cubic-bezier(.34,1.6,.5,1), opacity .2s ease; } .top[data-menu] .menu-b span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); } .top[data-menu] .menu-b span:nth-child(2) { opacity: 0; } .top[data-menu] .menu-b span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); } .menu-b:focus-visible { outline: 2px solid #f5f5f3; outline-offset: 2px; border-radius: 3px; } /* mismo rebote que las preguntas: altura en pixeles */ .menu { overflow: hidden; } .top[data-js] .menu { height: 0; visibility: hidden; transition: height .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s; } .top[data-js][data-menu] .menu { height: var(--menu-alto, auto); visibility: visible; transition: height .5s cubic-bezier(.34,1.6,.5,1), visibility 0s; } .menu-in { max-width: var(--ancho); margin: 0 auto; padding: 6px var(--margen) 20px; display: flex; flex-direction: column; gap: 2px; } .top.estrecha .menu-in { max-width: 680px; padding: 6px 24px 20px; } .menu-in a { text-decoration: none; color: #f5f5f3; font-size: 19px; font-weight: 500; letter-spacing: -.01em; padding: 9px 0; border-top: 1px solid #2a2a2a; } .menu-in a:first-child { border-top: none; } .menu-in a:hover { opacity: .55; } .menu-in a[aria-current="page"] { color: #85857f; } @media (max-width: 640px) { .menu-in { padding: 6px 24px 18px; } } /* ---- nav estrecha, para las paginas internas ---- */ .top.estrecha .top-inner { max-width: 680px; padding: 18px 24px; } /* ---- cabecera de pagina interna ---- */ .cabecera { padding: 64px 0 8px; } .cabecera h1 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(34px, 6vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; text-transform: none; } .cabecera p { margin-top: 14px; max-width: 520px; color: #a3a39e; font-size: 17px; } .interna section:first-of-type { border-top: none; } /* ---- caja de contacto ---- */ .caja-contacto { border: 1px solid #2a2a2a; border-radius: 4px; background: #0c0c0c; padding: 26px 24px; margin-top: 8px; } .caja-contacto h3 { font-size: 17px; font-weight: 600; } .caja-contacto .pie-caja { margin-top: 6px; color: #a3a39e; font-size: 15px; } .caja-contacto .pie-caja a { color: #f5f5f3; } .campo { margin-top: 20px; } .campo label { display: block; font-size: 15px; font-weight: 500; } .campo input, .campo textarea { width: 100%; margin-top: 8px; padding: 11px 13px; font-family: inherit; font-size: 16px; line-height: 1.5; color: #f5f5f3; background: #000000; border: 1.5px solid #3d3d3d; border-radius: 3px; } .campo textarea { min-height: 132px; resize: vertical; } .campo input:focus, .campo textarea:focus { outline: none; border-color: #f5f5f3; background: #0c0c0c; } .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .enviar { -webkit-appearance: none; appearance: none; margin-top: 22px; min-height: 44px; padding: 12px 26px; border: none; border-radius: 3px; font-family: inherit; font-size: 16px; font-weight: 600; color: #000000; background: #f5f5f3; cursor: pointer; } .enviar:hover { background: #ffffff; } .enviar[disabled] { opacity: .5; cursor: default; } .aviso-form { margin-top: 16px; font-size: 15px; padding: 11px 14px; border-radius: 3px; border: 1px solid #333333; background: #0f0f0f; color: #cfcfca; } .aviso-form[data-error] { border-color: #6b3434; background: #1e1010; } .aviso-form[hidden] { display: none; } /* ---- términos: prosa legal legible, sin cajas ---- */ .cabecera .fecha { margin-top: 8px; font-size: 14px; color: #85857f; } .legal h3 { font-size: 17px; font-weight: 600; margin-top: 26px; } .legal h2 + h3 { margin-top: 0; } .legal p, .legal ul { margin-top: 8px; color: #cfcfca; } .legal ul { padding-left: 20px; } .legal li + li { margin-top: 4px; } /* ---- El producto: uno solo, VS Quad Cortex ---- Dos columnas en la caja ancha: el producto a la izquierda, como llega a la derecha. Mismo .duo que Trabajos y Contacto. */ #presets .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .producto h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .producto .price { margin-top: 8px; font-size: 18px; font-weight: 500; } .producto p { margin-top: 14px; color: #cfcfca; max-width: 520px; } .entrega { list-style: none; border-top: 1px solid #2a2a2a; } .entrega li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid #1f1f1f; font-size: 15.5px; color: #cfcfca; } .entrega .n { flex: 0 0 auto; width: 22px; color: #85857f; font-variant-numeric: tabular-nums; } .entrega b { color: #f5f5f3; font-weight: 600; } .entrega a { color: #f5f5f3; } @media (max-width: 860px) { #presets .duo { grid-template-columns: 1fr; gap: 36px; } }