/* ══════════════════════════════════════════════════════════════════════════ TrainBee · sistema de la maqueta · 2026-09-10 ⚠️ CADA VALOR DE AQUÍ ESTÁ MEDIDO, no elegido a ojo. La fuente de cada uno está en el comentario, y el detalle en: ../09-referencias-esteticas.md Referencias medidas el 2026-09-10 con extraer_referencia.py: calendly.com → estética, limpieza, el «product switcher» www.owner.com → la receta de sección y los bordes Color: Aitor, 2026-09-10, «los de una abeja: amarillo, negro y blanco». ══════════════════════════════════════════════════════════════════════════ */ /* ⚠️ AQUÍ HABÍA DOS FUENTES DE REFERENCIA Y NINGUNA ES DE LA MARCA. Eran Geist -la de Calendly- e Instrument Serif, elegidas el 2026-09-10, antes de que existiera la hoja de marca. La hoja manda tres familias y a la web entra UNA SOLA: · ROND PRO solo vive en el logo, y el logo va vectorizado: nadie necesita cargar la fuente para verlo · UNI SANS es de pago (Fontfabric) y NO hay licencia webfont, que es distinta de la de escritorio. Aitor, 2026-09-14: los títulos también en Poppins · POPPINS está en Google Fonts y manda en todo Se piden 400 a 800: los títulos necesitan el peso fuerte que antes daba el cambio de familia. Si algún día se compra la licencia de Uni Sans, se cambia --tipo-titulo y ya está: el resto del sistema no se entera. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Quicksand:wght@500;600&display=swap'); :root { /* ── Color ─────────────────────────────────────────────────────────────── Medido con la tabla de contraste de la HIG de Apple (accessibility.md): 4,5:1 texto normal · 3:1 titular o negrita. negro sobre amarillo ...... 13,06:1 ✅ blanco sobre amarillo ...... 1,61:1 ❌ PROHIBIDO amarillo sobre blanco ...... 1,61:1 ❌ PROHIBIDO 🔑 LA REGLA: el amarillo es FONDO, nunca tinta. */ /* ⚠️ Y OJO CON EL 60/30/10 DE LA HOJA DE MARCA: ahí el negro es el 60 %. Eso es reparto de MARCA -redes, impresión-, no de web. Aplicado tal cual la web saldría de fondo negro. Aitor, 2026-09-14: blanco dominante, negro como tinta, amarillo de acento. */ --papel: #fafafa; /* «Secundario» de la hoja · el fondo de la web */ --papel-2: #ffffff; /* alterna con el papel · rol del linen de Calendly */ --tinta: #000000; /* «Principal» · 20,12:1 sobre el papel */ --tinta-panel: #131417; /* el negro «Extra» · paneles y bloques oscuros */ --tinta-70: #5c5c5c; /* texto secundario · 6,41:1 ✅ · NO está en la hoja: la paleta no trae gris de texto, y su #d9d9d9 da 1,35:1. Derivado, y Aitor lo eligió el 2026-09-14 sabiéndolo. */ --tinta-40: #6e6e6e; /* terciario · 4,89:1 ✅ · era #9a9a9a y daba 2,70:1, que no llega ni al 3:1 de texto grande */ --tinta-display:#8a8a8a; /* 3,31:1 · SOLO dentro de un titular de 24 px o más. Fuera de un titular, NUNCA. */ --amarillo: #ffd21f; /* «Acento» · SOLO fondo, con --tinta encima */ --amarillo-pal: #feee8d; /* «Extra» · superficie teñida */ --gris: #d9d9d9; /* «Extra» · 1,35:1 · líneas y superficies */ /* ⚠️ EL AMARILLO QUE SE PUEDE USAR COMO TINTA, y existe porque el de marca NO se puede: #ffd21f sobre blanco da 1,45:1 y no se lee. Este es el amarillo MÁS CLARO que pasa el listón, con el mismo tono (48°) y la misma saturación: 3,08:1 sobre blanco. Y solo vale donde el texto es de 18,66 px o más Y de peso 700, que es lo único que permite bajar de 4,5 a 3. Fuera de ahí haría falta #8f7200, más apagado aún. No sustituye al de marca: el de marca sigue siendo SOLO FONDO. */ --amarillo-tinta: #b28f00; /* ⚠️ SIN USAR: el «Extra» #ff7651. Su muestra en la hoja se ve turquesa y el código dice coral: uno de los dos está mal, y hasta saber cuál no entra. Además da 2,53:1 sobre el papel, así que tampoco sería texto. */ /* La línea al 5-8%. Los DOS referentes separan así, no con sombra. Calendly: rgba(7,26,49,.05) · Owner: rgba(44,44,44,.05) */ --linea: rgba(20, 20, 20, .08); --linea-suave: rgba(20, 20, 20, .05); --linea-clara: rgba(255, 255, 255, .12); /* la misma, sobre panel negro */ /* ── Espacio · base 4px ────────────────────────────────────────────────── Calendly declara `--spacing: .25rem`. Todo es múltiplo de 4. */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e6: 24px; --e8: 32px; --e12: 48px; --e16: 64px; --e24: 96px; /* ── Radios ────────────────────────────────────────────────────────────── Owner: 16(67) 24(58) 32(54) 12(48) · Calendly: 24(65) 48(36) 64(28) */ --bisel: 16px; /* el corte de la esquina · el polígono va en .btn */ /* ⚠️ EL BISEL DE LAS TARJETAS NO ES EL DEL BOTÓN, y no puede serlo. Aitor, 2026-09-25: quiere «ese corte» también en las tarjetas. Pero 15 px en un botón de 46 de alto son un tercio de su altura, y los mismos 15 en una tarjeta de 400 no se ven. No se puede escalar en proporción -daría 130 px y se comería la esquina-, así que es otro número fijo, elegido para que se lea a la escala de una tarjeta. */ --bisel-tarjeta: 28px; --barra-alto: 88px; /* lo usan la barra Y el panel del menú */ /* ⚠️ BAJADOS, Aitor 2026-09-24: «demasiada redondez». Y no a ojo: se leyeron los píxeles de su imagen de referencia. El botón macizo mide 64 px de alto y su radio son 7, o sea una proporción de 0,109. En los nuestros, de 46 y 48 px, eso son 5. Del botón sale el factor -16 → 5, un 0,31- y el resto baja igual, para que la escala siga siendo una escala y no cuatro números sueltos. */ --r-chip: 4px; /* era 8 */ --r-boton: 5px; /* era 16 · medido de la referencia */ --r-tarjeta: 8px; /* era 24 */ --r-panel: 10px; /* era 32 */ --r-hoja: 64px; /* el `64px 64px 0 0` de Owner, 7 secciones seguidas */ /* ── Ritmo de sección ──────────────────────────────────────────────────── Owner: relleno 128 arriba / 164 abajo · Calendly: 120 / 120 */ --sec-arriba: 128px; --sec-abajo: 164px; /* ── Caja ──────────────────────────────────────────────────────────────── Owner 1232px · Calendly 1280px. Tomo la de Owner. */ --caja: 1232px; /* ── La ÚNICA sombra ───────────────────────────────────────────────────── Calendly tiene UNA sombra real en toda su portada. Owner, una. Si aparece una segunda en esta maqueta, es un error. */ --sombra: 0 5px 40px rgba(20, 20, 20, .16); --tipo: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --tipo-titulo: var(--tipo); /* una sola familia · ver la nota de arriba */ --peso-titulo: 600; /* lo que antes hacía el cambio de familia */ --r-grande: 14px; /* era 48 · la tarjeta grande y el escenario */ } /* Al estrecharse · medido a 390 px en los dos sitios: el relleno se parte por ~2,3 y el radio del panel JUSTO POR DOS. */ @media (max-width: 900px) { :root { --sec-arriba: 56px; --sec-abajo: 112px; --r-hoja: 32px; } } * { box-sizing: border-box; } /* ══ EL SCROLL ════════════════════════════════════════════════════════════ Suave al saltar a un anclaje -«Funcionalidades» y «Sectores» del menú llevan a secciones de esta misma página-, en vez de aparecer de golpe. ⚠️ Y `scroll-margin-top` NO es un detalle: con la barra FIJA, un salto a un anclaje deja el destino DEBAJO de la barra. Se pierde el titular de la sección a la que acabas de ir, que es justo lo que ibas a leer. Se reserva el alto de la barra más un respiro. */ html { scroll-behavior: smooth; } [id] { scroll-margin-top: calc(var(--barra-alto) + var(--e4)); } /* A quien haya pedido menos movimiento, el salto seco. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--tipo); color: var(--tinta); /* ⚠️ BLANCO, no papel. Lo único del cuerpo que se ve sin tapar por una sección es la FRANJA DE LA BARRA, y con la portada ya en blanco ahí salía una costura gris de 88 px justo arriba del todo. */ /* ⚠️ EL PATRON VA AQUI Y NO EN CADA SECCION, y ese es todo el cambio. Puesto en las secciones se cortaba en cada juntura -cada una empieza su propio fondo-, que es justo lo que Aitor no quiere. En el cuerpo corre de arriba abajo sin enterarse de donde empieza y acaba cada una. Y se repite hacia abajo: el dibujo ocupa solo una parte de un lienzo de 1500 px y el resto va vacio, asi que sale una mancha cada 1500. El de la derecha lleva su dibujo a media altura, o sea que bajando los dos se van cruzando en vez de ir emparejados. Medida FIJA y no en vw: escalandolo, los hexagonos encogerian con la pantalla y dejarian de medir lo mismo en toda la web. */ background-color: var(--papel-2); background-image: url('fondo/panal-izquierda.svg'), url('fondo/panal-derecha.svg'); background-position: left top, right top; background-repeat: repeat-y, repeat-y; background-size: 700px 1500px, 700px 1500px; /* EL HUECO DE LA BARRA. Al pasar a `fixed` sale del flujo, así que si no se le devuelve su alto al cuerpo, la portada se sube 88 px y queda medio tapada. */ padding-top: var(--barra-alto); -webkit-font-smoothing: antialiased; } /* ══ TIPOGRAFÍA ═══════════════════════════════════════════════════════════ La regla de Owner, medida y sirve para los tres tamaños: interlínea 0,95 - 1,00 · letra a -0,03em · peso 600 Owner: h1 80/600/lh76/-3,2px · h2 64/600/lh64/-1,92px · h2 48/600/lh48 */ h1, h2, h3, .display { font-weight: 600; letter-spacing: -0.03em; margin: 0; text-wrap: balance; } /* ⚠️ MÁS GRANDE, Aitor 2026-09-24: «lo quiero en dos líneas y grande». El tope sube de 80 a 96 px. */ h1 { font-size: clamp(44px, 6.6vw, 96px); line-height: 0.95; } /* Y LAS DOS LÍNEAS, GARANTIZADAS. Estrechar el contenedor no basta: a un ancho da dos líneas y al siguiente una -en tablet salía en una-, porque depende de cuánto mida el texto a ese tamaño. El titular ya viene partido en dos tonos, y el corte que queremos es justo ese. Así que el segundo tono pasa a ocupar su propia línea: se parte SIEMPRE por donde cambia el color, a cualquier ancho, y sin escribir un salto en el HTML -que es lo que se rompe al estrechar-. */ .malla--tenue h1 > .apagado { display: block; } /* El h1 y el h2 comparten familia. El h2 se distingue por TAMAÑO y PESO, que es lo que antes hacía el salto a la serif. El nivel del encabezado no se toca: sigue siendo h2 y sigue donde estaba. */ h2 { font-family: var(--tipo-titulo); font-weight: var(--peso-titulo); font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -0.015em; } h2 em { font-style: italic; } h3 { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.02em; } h4 { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin: 0; } p { margin: 0; line-height: 1.45; } .entradilla { font-size: clamp(17px, 1.35vw, 20px); color: var(--tinta-70); line-height: 1.45; } .cuerpo { font-size: 16px; color: var(--tinta-70); } .menudo { font-size: 14px; color: var(--tinta-70); } /* El titular a dos tonos de Owner: «The AI platform restaurants use to win online.» — la segunda mitad al 50%. Recurso gratis. */ .apagado { color: var(--tinta-40); } /* La cejilla: Calendly la pone sobre el titular en mayúsculas menudas */ .cejilla { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-70); } /* ══ CAJA Y SECCIÓN ═══════════════════════════════════════════════════════ */ .caja { width: 100%; max-width: var(--caja); margin: 0 auto; padding: 0 var(--e6); } /* LA RECETA DE OWNER, medida en 7 secciones seguidas: radio 64 64 0 0 · relleno 128/164 · fondo alternando blanco ↔ crema. Cada panel deja 164 por abajo y el siguiente sube con 64 de radio: por eso cada panel MUERDE al anterior. No hay separador ni sombra. */ /* ⚠️ SIN REDONDEZ Y SIN FONDO PROPIO. Aitor, 2026-09-25: «no sé por qué cada sección tiene una redondez en los bordes, quiero quitar eso», y «que el fondo de todas las secciones, menos la que es negra, sea todo blanco con ese patrón, que no se corte». Las dos cosas son la misma: cada seccion se pintaba su propio fondo y se mordia a la anterior con 64 px de radio. Dejandolas transparentes, lo que se ve es el del cuerpo, con el patron, y no hay junturas. La unica que conserva fondo es la negra. */ .hoja { position: relative; padding: var(--sec-arriba) 0 var(--sec-abajo); background: transparent; } .hoja--crema { background: transparent; } .hoja--amarilla { background: transparent; } .hoja--negra { background: var(--tinta); color: var(--papel); } .hoja--negra .entradilla, .hoja--negra .cuerpo, .hoja--negra .menudo, .hoja--negra .cejilla { color: rgba(255, 255, 255, .72); } .hoja--negra .apagado { color: rgba(255, 255, 255, .45); } /* La banda de cierre: el único momento en que grita. Negro sobre amarillo, 13,06:1 — el par más legible de toda la paleta. */ .hoja--grito { background: transparent; color: var(--tinta); } .hoja--grito .entradilla, .hoja--grito .cuerpo { color: rgba(20, 20, 20, .72); } /* ⚠️ LA HOJA APRETADA. Aitor, 2026-09-26, por la sección de reseñas: «rebajar el espacio que hay entre la parte de arriba y la parte de abajo; me parece que hay demasiado espacio en blanco». Y tenía razón medida: la sección ocupaba 746 px para 263 px de cinta, o sea 356 px de blanco contra 263 de contenido. Aquí el relleno normal de sección -128 arriba y 164 abajo- no lo pide nada: la cinta no es un bloque de texto que necesite aire, es una fila que corre. */ .hoja--apretada { padding: var(--e16) 0; } .hoja--apretada .hoja__cabeza { margin-bottom: var(--e10, 40px); } .hoja__cabeza { max-width: 780px; margin-bottom: var(--e16); } .hoja__cabeza--centro { margin-left: auto; margin-right: auto; text-align: center; } .hoja__cabeza .entradilla { margin-top: var(--e6); } /* La fila de acciones de la portada: la llamada y las dos tiendas, juntas. Misma altura las tres, que es lo que hace que se lean como una fila y no como tres cosas apiladas por casualidad. */ .portada__acciones { display: flex; align-items: center; justify-content: center; gap: var(--e3); margin-top: var(--e8); flex-wrap: wrap; } /* ⚠️ `.portada__acciones .portada__cta` y no `.portada__cta` a secas: la regla de `.btn` está MÁS ABAJO en el fichero y, a igual fuerza, gana la última. Sin el ancestro delante, el botón se quedaba en 48 px y la fila salía descuadrada. */ .portada__acciones .portada__cta { height: 64px; padding: 0 40px; font-size: 18px; } .portada__acciones .tienda { min-height: 64px; } /* ══ LAS INSIGNIAS DE LAS TIENDAS ═════════════════════════════════════════ Van en el hueco que en la referencia ocupan los avatares y las reseñas. Negras y macizas, que es como las quiere Apple y como las da Google, y con el radio nuevo del sistema para que no canten al lado del botón. ⚠️ SON UNA RECREACIÓN. Las de verdad se descargan de cada tienda y tienen sus propias normas de uso -margen mínimo, proporción, qué se puede recolorear-. Hay que sustituirlas antes de publicar; está anotado. */ .tienda { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 20px 8px 16px; border-radius: var(--r-boton); background: var(--tinta); color: var(--papel-2); text-decoration: none; transition: filter .18s ease, transform .1s ease; } .tienda:hover { filter: brightness(1.35); } .tienda:active { transform: translateY(1px); } .tienda > span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .tienda__arriba { font-size: 11px; opacity: .8; } .tienda__nombre { font-size: 19px; font-weight: 600; letter-spacing: -.01em; } /* ══ EL ESCAPARATE ═══════════════════════════════════════════════════════ El mockup que se asienta al entrar. Los números salen de medir la referencia que pasó Aitor, no de calcularlos a ojo: perspectiva 1600px transición .5s cubic-bezier(.45, 0, .55, 1) escala de grande a 1 ⚠️ Y `overflow: hidden` NO es cosmético: mientras el marco está ampliado se sale por los dos lados, y sin recortarlo la página entera se podría arrastrar de lado mientras dura la animación. */ /* ⚠️ `clip` EN HORIZONTAL Y NADA EN VERTICAL, y la diferencia importa. Con `overflow: hidden` se recortaba por los CUATRO lados, y la sombra del mockup -que sube 52 px, porque es 64 de difuminado bajando 12- se cortaba en seco contra el borde de arriba de la sección: se veía una raya recta justo encima de la ventana. Quitarlo del todo no vale: mientras el mockup está ampliado y el móvil espera fuera por la derecha, la página entera se podría arrastrar de lado. `hidden` obliga a que el otro eje también recorte, así que no se puede pedir uno sí y otro no. `clip` sí lo permite: es la única combinación que recorta a lo ancho y deja respirar a lo alto. */ .escaparate { perspective: 1600px; overflow-x: clip; overflow-y: visible; } /* ⚠️ LA ESCENA ES LA PAREJA ENTERA, no la ventana. Y es la clave del encaje: en la referencia la ventana NO está centrada -le quedan 392 px libres a la derecha y 225 a la izquierda-. Lo que está centrado es la pareja: de 225 a 1216, centro en 720,5 de 1440. Clavado. ⚠️ Y NO ENCOGE CON EL ANCHO. Medido a 1180 y a 1440: la pareja mide 991 px en los dos, y lo único que cambia es el hueco de los lados. Lo tenía en 68,8vw y eso la dejaba en 812 a 1180 y en 557 a 810, que es por lo que en iPad se veía pequeña. A 810 la referencia da 704, que son 86,9vw: ese es el tope de abajo, y 991 el de arriba. */ .escaparate__escena { position: relative; /* ⚠️ SUBE DE 991 A 1180. Aitor, 2026-10-01: «si tenemos que aumentar las dimensiones, las aumentamos, no hay problema, pero sí quiero que se vea fiable el tamaño de la aplicación». Con 991 el teléfono se quedaba en 248 px y el texto de 14 px de la app caía a 8,3: pequeño de más. A 1180 el teléfono pasa a 319 y ese texto a 10,7. */ /* ⚠️ FUERA EL `86.9vw`. Aitor, 2-oct-2026: en tablet la pareja se veía pequeña. Ese vw la encogía ANTES de que se acabara el sitio: a 900 px de ventana la caja da 852 y la escena se quedaba en 782, dejando 70 px sin usar. Con `100%` coge lo que hay y nada más, así que sigue sin salirse ni crear scroll lateral. En escritorio no cambia nada: a 1440 la caja tope son 1232 y el min sigue dando 1180. */ width: min(1180px, 100%); margin-inline: auto; } .escaparate__marco { /* 823 de los 991 de la escena. ⚠️ Y LA PROPORCIÓN PASA A 16:10 (2026-10-01). Estaba en 1,352, que no es la de ningún portátil: un MacBook es 1,6 y la referencia de la que salió aquel número era un recorte, no una pantalla. Con 16:10 la captura de la app entra sin franjas ni recortes, y el marco se lee como lo que dice ser. La ventana se captura a 1440 × 900. */ width: 83.05%; aspect-ratio: 16 / 10; display: grid; /* ⚠️ EL RADIO ENCOGE, y con el ancho de la ventana. Medido: 20 px de 1000 para arriba, y 2vw por debajo -16,2 a 810-. Con `min` sale solo. */ /* ⚠️ EL MISMO QUE EL ESCENARIO. Aitor, 2026-09-29: los bordes de las secciones tienen que coincidir con los de la tarjeta de fuera. Este iba a 20 y el escenario a 14, asi que dos marcos del mismo tamano y pegados uno encima de otro tenian curvas distintas. */ border-radius: var(--r-grande); /* Blanco puro, como la referencia. Y el filete es lo que deja que el hueco se siga viendo como hueco encima de una sección blanca. */ background: var(--papel-2); border: 1px solid var(--linea); /* ⚠️ SEGUNDA SOMBRA DEL SISTEMA, y va declarada. La regla de la casa es que solo hay una -`--sombra`-, pero la de los mockups es otra cosa: 0 12px 64px, mucho más abierta y más suave, y es lo que los hace flotar en vez de estar pegados. Medida en la referencia. */ box-shadow: 0 12px 64px rgba(0, 0, 0, .12); overflow: hidden; transform-origin: 50% 0; /* ⚠️ ARRANCA EN 1,14, Y ESTE NÚMERO TIENE UN TOPE QUE NO SE PUEDE PASAR. Estaba en 1,8, y a 1,8 la ventana mide 823 × 1,8 = 1481 px: más ancha que la pantalla. Los dos lados se quedan fuera y de la silueta solo queda una raya horizontal, que es lo que veía Aitor -«está muy extendido», «no se ve la silueta de la app»-. El tope es el ancho de la ventana: por encima de 1,74 a 1440 px ya no cabe. 1,14 la deja en 938 y se ve entera, con sus esquinas. Aitor, 2026-09-25: «lo único que pasa es que se hace un pelín más pequeño y entra el móvil». Así que el viaje es corto a propósito, el ángulo baja de 13° a 6° y SE QUITA EL DESVANECIDO: si entra a media opacidad, lo que se quería ver desde el principio no se ve. */ /* ⚠️ Y CENTRADA, que es lo que pidió Aitor el 25: al cargar la ventana va en medio de la pantalla, y al bajar SE CORRE A LA IZQUIERDA para dejar sitio al móvil. Antes ya arrancaba descolocada a la izquierda y el hueco de la derecha no se entendía: parecía un fallo de encuadre. Los 10,204 % salen solos y no son un número a ojo. La ventana ocupa el 83,05 % de la escena, así que a su derecha queda el 16,95 %; para centrarla hay que moverla la mitad de eso, un 8,475 % de la escena, que sobre SU propio ancho -que es contra lo que se mide un % en un translate- son 8,475 / 83,05 = 10,204 %. Y al ir en %, vale igual en las tres anchuras: a 1440 son 84 px y a 810 son 59,5, que es justo lo que mide el hueco en cada una. */ transform: translateX(10.204%) scale(1.14) rotateX(6deg); opacity: 1; transition: transform .5s cubic-bezier(.45, 0, .55, 1); } /* Asentado. Lo pone maqueta.js cuando la sección entra en pantalla. */ .escaparate__marco[data-dentro] { transform: none; opacity: 1; } /* ── El móvil, encima de la esquina de abajo a la derecha ──────────────── Se apoya en la ventana y SOBRESALE por fuera, que es lo que hace que se lea como dos aparatos y no como un dibujo dentro de otro. */ /* ⚠️ EL MÓVIL VA CASI FUERA, y esto es lo que yo tenía mal. En la referencia se monta 80 px sobre la ventana y SOBRESALE 168 por la derecha: solo un tercio de él pisa la ventana. Antes lo tenía casi dentro, saliendo 24 px, y por eso se veía pequeño y metido. Medido a 1440: 248x506, radio 30, y su borde de arriba a 132 px del de la ventana -el 21,7 % de su alto-. */ /* ⚠️ EL APARATO, REHECHO EL 2026-09-26. Aitor: «revisa bien el mockup […] quiero que sea de mayor calidad, que se vean incluso las orillas del móvil, como si fuera el iPhone, que se vea más realista». Lo que lo hacía parecer de cartón era que era UNA sola pieza: un rectángulo negro con la pantalla dentro. Un teléfono de verdad tiene TRES capas y se ven las tres: 1. el canto, metálico y brillante, de 2,5 px 2. el marco negro entre el canto y la pantalla 3. la pantalla ⚠️ LAS TRES SE PINTAN SIN AÑADIR UN SOLO ELEMENTO, con `background-clip`: una capa recortada a `border-box` -que llega hasta el filo- y otra a `padding-box` -que empieza por dentro del borde-. El borde va transparente y de 2,5 px, así que por él asoma la capa de abajo, que es el metal. Es el truco de siempre para un borde con degradado, y aquí además hace de canto. ⚠️ EL DEGRADADO DEL CANTO NO ES UN GRIS CUALQUIERA: son ocho paradas que imitan el bisel pulido del titanio -claro en los filos, oscuro en el centro de cada cara-. Con dos paradas queda un tubo de plástico. ⚠️ Y EL RADIO SUBE de 30 a 38. Un iPhone tiene la esquina casi al quinto de su ancho; a 248 px de aparato eso son 47, y los 30 de antes lo dejaban con cara de tableta vieja. */ /* ══ EL APARATO · UNA SOLA PIEZA PARA TODA LA WEB ═════════════════════════ Aitor, 2026-09-30: «en vez de poner simplemente un mockup de un movil con un rectangulo con un borde redondeado y un grosor, sacar un mockup real […] el que hay debajo de la seccion 1 del home. Quiero utilizar ese para todos porque ese ya esta bien hecho, se ven incluso los botones». Y tenia razon: habia DOS marcos distintos en la web. El del escaparate estaba trabajado y el de descarga era un rectangulo negro con un filo gris plano. Esto es el del escaparate, sacado a una clase que usan los cinco. Lo que lo hace parecer un telefono y no un rectangulo son cuatro cosas: 1 · el canto de titanio, un degradado de OCHO paradas que pone brillo en las esquinas y sombra en los lados rectos. Un gris plano no vale: es justo lo que delataba a los de descarga 2 · el bisel negro entre el canto y el cristal 3 · los cuatro botones, con el mismo degradado metalico 4 · el radio de dentro = el de fuera MENOS canto y bisel. Con el mismo, la curva interior va mas abierta y se ve que es un dibujo ⚠️ LAS TRES MEDIDAS NO PUEDEN IR EN %. El porcentaje de un relleno se resuelve contra el ANCHO DEL PADRE, no contra el del elemento: un 2,8 % aqui son 27 px de la escena, no 7 del movil. Con `clamp` sobre vw quedan en lo medido y adelgazan al encoger. Y sirven igual en las tres secciones porque los cinco moviles miden casi lo mismo: 230 a 249 px a 1440. */ .iphone { --canto: 2.5px; --bisel: clamp(4px, .7vw, 7px); /* ⚠️ LAS MEDIDAS DEL APARATO, NO UNAS APROXIMADAS. iPhone 15 Pro: 146,6 × 70,6 mm → a 248 de ancho le tocan 515 de alto, y su esquina mide 10,5 mm, el 14,8 % del ancho. Estaba en 2,040 de proporción y 11,9 % de radio: achatado y con la esquina más cuadrada de lo que es, que es justo lo que hace que un marco deje de leerse como un iPhone. */ --radio: min(47px, 4.7vw); aspect-ratio: 248 / 515; border-radius: var(--radio); /* El canto va de `border` con el fondo en `border-box`, y el negro del bisel en `padding-box`: dos capas de un mismo `background`. */ border: var(--canto) solid transparent; padding: var(--bisel); background: linear-gradient(#0b0b0d, #0b0b0d) padding-box, linear-gradient(152deg, #54575d 0%, #c9ced4 8%, #7c8187 19%, #34363b 37%, #2b2d32 63%, #7c8187 81%, #c9ced4 92%, #54575d 100%) border-box; } /* ⚠️ LA PANTALLA, Y SOLO LA PANTALLA. Aquí ponía `.iphone > *`, y el móvil del escaparate tiene DOS HIJOS MÁS: las tarjetas flotantes de «Nombre Apellido completó». Les caía encima `height: 100%` y salían del tamaño del teléfono, desbordadas y con el filo del cristal. Se apunta a `.ios-pantalla`, que es la clase que llevan las dos pantallas -la del escaparate y la de descarga- y no llevan las fichas. */ .iphone > .ios-pantalla { position: relative; height: 100%; border-radius: calc(var(--radio) - var(--canto) - var(--bisel)); /* El filo donde el cristal se encuentra con el marco. Sin esto la pantalla parece pegada encima y no metida dentro. */ box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.55); } /* ── Los botones del canto ─────────────────────────────────────────────── Tres a la izquierda -accion y los dos de volumen- y encendido a la derecha, en las proporciones del iPhone. ⚠️ LOS TRES DE LA IZQUIERDA SON UN SOLO ELEMENTO CON TRES CAPAS DE FONDO. Lo evidente seria una tira con dos `box-shadow` desplazados, y NO FUNCIONA: un `box-shadow` no admite porcentajes en el desplazamiento, asi que `calc(100% + 5px)` invalida la declaracion entera y el navegador la tira sin avisar. Se quedaba un solo boton. Un `background` si admite porcentajes, asi que la tira va del 19 % al 41 % del alto y dentro lleva las tres barras en proporcion. ⚠️ Y LA POSICION EN % NO ES LA QUE PARECE: colocar una banda de alto h a la altura o se pide con `o / (100 - h)`, porque el 100 % de una posicion es «abajo del todo», no «a 100 de arriba». De ahi el 50 y el 100. ⚠️ Y VAN MEDIO FUERA: `left: calc(-1 * var(--canto))` los saca justo el grosor del canto, que es como asoman de verdad. */ .iphone::before, .iphone::after { content: ""; position: absolute; width: var(--canto); } .iphone::before { left: calc(-1 * var(--canto)); top: 19%; height: 22%; background: linear-gradient(90deg, #9aa0a6, #4b4e53) 0 0 / 100% 18% no-repeat, linear-gradient(90deg, #9aa0a6, #4b4e53) 0 50% / 100% 28% no-repeat, linear-gradient(90deg, #9aa0a6, #4b4e53) 0 100% / 100% 27% no-repeat; } .iphone::after { right: calc(-1 * var(--canto)); top: 31%; height: 11%; background: linear-gradient(270deg, #9aa0a6, #4b4e53); } /* Lo del escaparate que NO es el aparato: dónde se coloca y cómo entra. El marco, los botones y el cristal los pone `.iphone`. */ .escaparate__movil { position: absolute; /* ⚠️ EL TELÉFONO SIEMPRE DELANTE. Es un objeto físico apoyado en la esquina del portátil, así que nada de dentro de la pantalla puede salir y taparlo: el panel de Mensajes lleva `z-index: 4` y lo hacía. Que el panel se corte contra el móvil es lo correcto; verlo flotar por encima deshace la escena entera. */ z-index: 5; /* ⚠️ Y GANA SITIO, del 25,03 % al 27 %: con la escena en 1180 son 319 px de aparato, que es donde la app dibujada se lee sin forzar la vista. */ left: 73%; top: 21.7%; /* 132 de 609 */ width: 27%; box-shadow: 0 12px 64px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .22); /* ⚠️ ENTRA DESPUÉS QUE LA VENTANA, no a la vez. Asentándose juntos el móvil parece parte de ella; con el retardo se lee como una pieza que se pone encima. */ transform: translate(14%, 18%) scale(.82); opacity: 0; transition: transform .5s cubic-bezier(.45, 0, .55, 1) .22s, opacity .4s ease-out .22s; } .escaparate__movil[data-dentro] { transform: none; opacity: 1; } /* El fondo del cristal. El radio y el filo los pone `.iphone > *`. */ .escaparate__pantalla { position: relative; display: grid; place-items: center; padding: var(--e3); } .escaparate__pantalla .nota { font-size: 9px; letter-spacing: .04em; } /* ⚠️ AQUÍ VIVÍAN DOS TARJETAS FLOTANTES, y se quitaron el 2-oct-2026. Eran la pieza de la referencia del 26-sep: dos avisos asomando por los lados del teléfono, con un «Nombre del entrenamiento» de relleno que nunca se llenó. Aitor: «vamos a quitar esas dos tarjetas flotantes». Están en el git, en el commit anterior. */ /* ⚠️ EN TABLET LA PAREJA CRECE DENTRO DE LA ESCENA. Aitor, 2-oct-2026: «si la parte del mockup web tenemos que hacerla más grande y que ocupe más espacio, y el móvil esté por encima, el corte más pantalla por haber hecho el mockup de la web más grande, no pasa nada». La composición es la MISMA que en escritorio -ventana y teléfono encima, la pareja entera y centrada-. Lo que cambia son los dos porcentajes: la ventana pasa del 83,05 % al 92 % de la escena. Medido a 900 px de ventana: la ventana sube de 650 a 784 px. ⚠️ EL TELÉFONO BAJA AL 28 %, Y ESE NÚMERO ES UN TOPE MEDIDO. Estuvo en 34 y Aitor lo paró: «que el mobile no sea tan grande: corta mucho los botones abajo. Eso no puede pasar». Lo que cortaba son las insignias de App Store y Google Play. El teléfono es 2,07 veces más alto que ancho y asoma por debajo de la ventana, así que cuanto más ancho, más baja y más se come la franja de las tiendas. Medido el 2-oct-2026 en seis anchos de tablet, lo que invade la insignia de Google Play: 34 % → 64 px 30 % → 18 px 32 % → 54 px 28 % → LIBRE, con 29 px de holgura en el peor 28 es el mayor que las deja limpias en todo el tramo. Por encima, corta. ⚠️ Y AQUÍ EL TELÉFONO ES DECORADO, no un mando. A 701 px sus pestañas miden 26 px de alto, muy por debajo de los 44 que pide un dedo. Aitor lo dio por bueno: «aunque solo lo utilicemos a nivel visual, para que puedan ver cómo va quedando la aplicación de tablet». Sigue navegando -las zonas están puestas-, pero quien decide en tablet es la ventana grande. */ @media (max-width: 1040px) and (min-width: 701px) { .escaparate__marco { width: 92%; } /* `left` y `width` suman 100: el teléfono se encoge hacia la DERECHA y se queda pegado al canto de la escena. Encogiéndolo con `left` fijo se movería hacia las insignias, que es justo lo que hay que evitar. */ .escaparate__movil { left: 72%; width: 28%; } } /* ⚠️ EN MÓVIL MANDA EL TELÉFONO, NO LA VENTANA. Aitor, 2026-09-26: quiere la pieza de harbiz, o sea un solo aparato centrado con sus dos avisos. Hasta ahora era al revés -fuera el teléfono, la ventana a todo lo ancho-, y el motivo de entonces sigue siendo bueno: a 390 px los dos juntos no caben. Lo que cambia es CUÁL se queda, y ahora es el que enseña la app, que es de lo que va la web. El teléfono deja de ir posicionado -en escritorio está pegado a la esquina de la ventana- y pasa a estar en el flujo, centrado: así es él quien le da el alto a la escena. */ @media (max-width: 700px) { .escaparate__marco { display: none; } .escaparate__escena { width: 100%; } .escaparate__movil { position: relative; left: auto; top: auto; /* ⚠️ 300 Y NO 208. Aitor, 2-oct-2026: «hacemos más grande el mockup del móvil». Ahora es él solo en la escena -ni ventana ni tarjetas-, y la pantalla es una captura con zonas que hay que poder pulsar con el dedo. ⚠️ EL 100% ES DEL CONTENEDOR, NO DE LA VENTANA, y por eso no es 86: con 86 el aparato se quedaba en 241 px a un ancho de 390 y cada pestaña medía 40, por debajo de los 44 que pide un dedo. Al 100% son 280 de aparato y 47 de pestaña. El tope de 300 es para que en una tablet estrecha no crezca sin sentido. */ width: min(300px, 100%); margin-inline: auto; /* La esquina y el marco suben con el aparato: 52 es el quinto de 260, que es lo que mide la pantalla dentro de los 300. */ --radio: 52px; --bisel: 8px; } } /* El hueco de dentro. Blanco, sin trama: lo que dice que está vacío es la nota, no un fondo de color. La proporción la lleva el marco -1,35-. */ .escaparate__lienzo { display: grid; place-items: center; border-radius: inherit; overflow: hidden; } /* Quien haya pedido menos movimiento ve el mockup ya puesto, sin el viaje. */ @media (prefers-reduced-motion: reduce) { .escaparate__marco, .escaparate__movil { transform: none; opacity: 1; transition: none; } } /* ⚠️ AQUÍ VIVÍA EL ESCAPARATE LIGADO AL SCROLL, y se quitó entero. Aitor, 2026-09-25 (tarde): «necesito que sea bastante más estática». Medido a 1440 antes de quitarlo: el móvil recorría 720 px atado a la rueda y la ventana cambiaba 81 px de tamaño. Ahora el mockup se asienta una vez, con el observador, igual en las tres anchuras. Si hiciera falta volver, está en el commit 7bc11df. */ /* Las insignias de las tiendas, debajo de los mockups. Aitor, 2026-09-25. ⚠️ `.escaparate__tiendas .tienda` y no `.tienda` a secas: el alto de 64 lo ponía `.portada__acciones .tienda`, y al salir del héroe volvían a los 56 de la regla base. Se cambiaban de sitio y encogían. */ /* ⚠️ Y BAJAN. Aitor, 2026-09-25: «están muy arriba y tocan el mockup». Eran 48 px de separación y pasan a 96 más el relleno de dentro de las rayas, o sea 128 hasta la insignia. */ .escaparate__tiendas { margin-top: var(--e24); } .escaparate__tiendas-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e4); padding: var(--e8) 0; } /* La raya: la misma que flanquea la frase del divisor, pero apagándose por los dos lados en vez de por uno. `--gris` es el mismo color. */ .raya { display: block; height: 1px; background: linear-gradient(to right, transparent, var(--gris) 22%, var(--gris) 78%, transparent); } .escaparate__tiendas .tienda { min-height: 64px; } /* ⚠️ A 390 PX SE PARTÍAN EN DOS FILAS POR 5 PX. Las dos juntas medían 363 -165 + 182 + 16 de hueco- y entre márgenes hay 358. No es un caso de dejarlas caer: dos insignias en dos filas parecen un descuadre, no una decisión. Encogiendo lo justo -alto 56, letra 17, hueco 8- se quedan en una fila con aire de sobra a los lados. */ @media (max-width: 600px) { .escaparate__tiendas { gap: var(--e2); } .escaparate__tiendas .tienda { min-height: 56px; padding: 6px 14px 6px 12px; gap: 8px; } .escaparate__tiendas .tienda__nombre { font-size: 17px; } .escaparate__tiendas .tienda svg { width: 22px; height: 22px; } } /* ══ EL DIVISOR CON TEXTO ═════════════════════════════════════════════════ La línea a los dos lados y el texto en medio. Las líneas son pseudo, no elementos: el marcado solo lleva el texto, que es lo que tiene que leer un buscador. Un `` vacío a cada lado no aporta nada y ensucia. */ .divisor { display: flex; align-items: center; gap: var(--e6); /* 24 px · en la referencia son 25 */ margin-top: var(--e16); } /* ⚠️ LAS RAYAS SE DESVANECEN HACIA FUERA, y eso es lo que las hace parecer un divisor y no dos palos. Medido en la referencia que pasó Aitor: el brillo de la raya, de fuera hacia dentro, va 0 · 3 · 4 · 6 · 8 · 10 · 12 · 15 · 17 · 19. No es una línea plana: nace de la nada y crece hasta tocar el texto. Por eso son dos degradados espejados y no un `background` liso. */ .divisor::before, .divisor::after { content: ""; flex: 1 1 0; height: 1px; } .divisor::before { background: linear-gradient(to right, transparent, var(--gris)); } .divisor::after { background: linear-gradient(to left, transparent, var(--gris)); } .divisor__texto { flex: 0 1 auto; margin: 0; font-size: clamp(19px, 1.35vw, 20px); font-weight: 700; font-style: italic; letter-spacing: -.01em; line-height: 1.3; /* Aitor, 2026-09-25: en negro. Iba en amarillo desde el día 24 y sobre blanco ese amarillo da 1,45:1, que era la excepción anotada en el punto 7 de los pendientes. En negro da 21:1 y la excepción se cierra: lo que destaca pasa a ser la cursiva y el peso, no el color. */ color: var(--tinta); text-wrap: balance; } /* Por debajo de 700 px el texto se queda sin sitio entre las dos líneas y sale en cuatro renglones. Ahí la línea pasa a ir solo por encima. */ @media (max-width: 700px) { .divisor { flex-direction: column; gap: var(--e4); } .divisor::before { width: 100%; flex: none; } .divisor::after { display: none; } .divisor__texto { text-align: center; } } /* ══ BOTONES ══════════════════════════════════════════════════════════════ Owner: alto 48, radio 16, relleno 16/24, 16px peso 600. Nav: 42/14/14-21 */ .btn { display: inline-flex; align-items: center; gap: var(--e2); height: 48px; padding: 0 var(--e6); --r-btn: var(--r-boton); white-space: nowrap; /* un botón no parte su texto en dos líneas */ border: 0; border-radius: var(--r-btn); font: 600 16px/1 var(--tipo); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; /* ⚠️ SEGUNDA REFERENCIA, Aitor 2026-09-24. Era el botón de webild -degradado, sombra de color, volumen- y pasa al de su imagen, que es JUSTO LO CONTRARIO: plano, sin sombra, con la esquina de abajo a la derecha cortada y el texto en mayúsculas muy espaciado. El de antes está a un commit: 29c407f. */ text-transform: uppercase; letter-spacing: .09em; font-weight: 700; position: relative; isolation: isolate; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bisel)), calc(100% - var(--bisel)) 100%, 0 100%); transition: background-color .18s ease, color .18s ease, filter .18s ease, transform .1s ease; } /* Lo que pinta el relleno, 2 px por dentro. Va aparte porque si el borde y el relleno fueran la misma capa, el recorte se llevaría la diagonal por delante y la esquina saldría abierta. */ /* ⚠️ EL BISEL DE DENTRO NO ES EL DE FUERA, y esta es la cuenta que hacía que el trazo se viera sucio. Metiendo la caja `b` px por cada lado y cortando con el MISMO bisel, la diagonal interior no queda paralela a la exterior: se separa b·√2, un 41 % más que en los lados rectos. Justo en la esquina que se mira. Para que las dos vayan paralelas y a la misma distancia: bisel interior = bisel − b·(2 − √2) ≈ bisel − 0,586·b */ .btn::before { content: ""; position: absolute; inset: var(--btn-borde, 0); --bisel-int: calc(var(--bisel) - var(--btn-borde, 0px) * 0.586); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bisel-int)), calc(100% - var(--bisel-int)) 100%, 0 100%); background: inherit; /* Y el radio interior es el exterior MENOS el grosor. Con el mismo, la curva de dentro va más abierta y el trazo se estrecha en la curva. */ border-radius: calc(var(--r-btn, 16px) - var(--btn-borde, 0px)); /* ⚠️ DETRÁS DEL TEXTO, y esto no es un detalle: el texto de un botón es un nodo suelto, no un elemento, así que no se le puede subir con z-index. Si la capa del relleno va por delante, TAPA EL TEXTO -pasó-. Con -1 se queda entre el fondo del botón y su contenido. */ z-index: -1; } /* ⚠️ Y SOLO SE PINTA CUANDO HAY BORDE QUE FINGIR. Aitor, 2026-09-25 (tarde): «en el botón de Probar gratis se ve una sombra más oscura […] a la hora de hacer el scroll». Con `--btn-borde` en 0 -que es TODOS los botones macizos: amarillo, negro, blanco, fantasma- esta capa tiene el mismo recorte, el mismo radio y el mismo fondo que el propio botón: pintaba el amarillo DOS VECES, una encima de otra. Dos capas con el borde suavizado montadas en el mismo sitio dan un filo distinto al de una sola, y al hacer scroll cada una cae en una rejilla de píxeles ligeramente distinta. Eso es la sombra: no la pinta nadie, sale de pintar dos veces. Se queda solo en los dos botones que la NECESITAN, que son los de contorno: ahí el elemento pinta el trazo y esta capa tapa por dentro. */ .btn::before { display: none; } .btn--linea::before, .btn--suave::before { display: block; } .btn:active { transform: translateY(1px); } /* El primario: AMARILLO PLANO CON TEXTO NEGRO. 14,49:1. Nunca texto blanco, que sobre amarillo da 1,45:1 y no se lee. */ .btn--amarillo { background: var(--amarillo); color: var(--tinta); } /* ⚠️ AL PASAR EL CURSOR, SE INVIERTE. Aitor eligió la C de las cinco que se le enseñaron el 25: amarillo y negro se cambian el sitio. Antes se oscurecía -un 12 % de negro mezclado en el amarillo- y eso es justo lo que no quería: «no me gusta el hecho de que se oscurezca». Y la inversión no cuesta contraste: 14,49:1 en los dos sentidos, porque es el mismo par de colores dado la vuelta. Medido. */ .btn--amarillo:hover { background: var(--tinta); color: var(--amarillo); } .btn--negro { background: var(--tinta); color: var(--papel); } .btn--negro:hover { background: var(--amarillo); color: var(--tinta); } /* El de contorno es el «INICIAR SESIÓN» de la imagen: el elemento pinta el TRAZO y el ::before tapa por dentro con el papel, dejando 2 px de línea que también recorre la diagonal. */ .btn--linea { background: var(--tinta); color: var(--tinta); --btn-borde: 2px; } .btn--linea::before { background: var(--papel); } .btn--linea:hover { color: var(--papel); } .btn--linea:hover::before { background: var(--tinta); } .btn--suave { background: var(--tinta); color: var(--tinta); --btn-borde: 1.5px; } .btn--suave::before { background: var(--papel-2); } .btn--suave:hover::before { background: color-mix(in srgb, var(--gris) 30%, #fff); } .btn--blanco { background: var(--papel); color: var(--tinta); } .btn--fantasma{ background: rgba(255,255,255,.15); color: var(--papel); } /* El de la barra. Sube con ella: 42 → 46, y la letra con él. */ .btn--peq { height: 46px; padding: 0 24px; font-size: 13px; --r-btn: 5px; --bisel: 15px; letter-spacing: .07em; } /* Botón de icono redondo · Owner: círculo con fondo rgba(tinta,.05) */ .btn-icono { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(20,20,20,.05); color: var(--tinta); display: inline-grid; place-items: center; cursor: pointer; font-size: 17px; } /* La flecha cuadrada de Calendly, al lado de cada función del acordeón */ .btn-flecha { width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: var(--r-chip); background: rgba(20,20,20,.05); color: var(--tinta); display: grid; place-items: center; cursor: pointer; } /* ══ EL TITULAR DE DOS PISOS ═════════════════════════════════════════════ El de funcionalidades, y ha cambiado tres veces en el mismo día. Lo que quedó, con las palabras de Aitor del 2026-09-26: · la cejilla «Funcionalidades», fuera · «Tu software de entrenamiento,» arriba, limpio y en UNA línea · «todo en uno» debajo, más grande y «solo en amarillo, no subrayado» 🔴 EL AMARILLO ES EL DE MARCA, Y NO PASA CONTRASTE. ESTO NO ES UN FALLO: ES UNA DECISIÓN DE AITOR, tomada el 2026-09-26 con la medida delante. Primero fue a `--amarillo-tinta` -#b28f00, el mismo tono más oscuro-, que da 3,08:1 y es el único amarillo que puede ser letra sobre claro. Se le enseñó, y respondió: «el todo en uno quiero que sea amarillo como el botón». Así que va en #ffd21f. MEDIDO EN EL PÍXEL, no estimado: 1,45:1. El listón de la WCAG para texto grande son 3:1, o sea que se queda a menos de la mitad. En la práctica: con sol en la pantalla, con el brillo bajo o con poca vista, esas tres palabras no se leen. ⚠️ NO SE TOCA SIN HABLAR CON ÉL. Quien venga detrás y lo vea en un comprobador de accesibilidad va a querer arreglarlo; está así a propósito. Si algún día se revierte, el camino de vuelta es `--amarillo-tinta` con peso 700 y 18,66 px o más, que es lo que había. ⚠️ Y LA FRASE SIGUE ENTENDIÉNDOSE SIN ELLAS: «Tu software de entrenamiento,» ya está arriba en negro. Es lo único que salva esto: el remate es énfasis, no información que no esté en otro sitio. ⚠️ LO QUE PARTE LAS DOS LÍNEAS ES EL `display: block`, no un `
`. Un salto ahí sería un salto que el texto no tiene; con un bloque, el h2 sigue diciendo exactamente la misma frase. ⚠️ Y EL `line-height` SUBE DE 1,02 A 1,12. Aitor: «no me gusta que se interpongan así». Con 1,02 el segundo piso, que va a 1,35 em, se metía entre los rabos de la línea de arriba. El renglón de un h2 es muy justo a propósito; aquí hay dos tamaños distintos y necesita aire. */ .titular-doble { line-height: 1.12; } .titular-doble__linea { display: block; } .titular-doble mark { display: block; background: none; color: var(--amarillo); /* 🔴 1,45:1 · decisión de Aitor, arriba */ font-size: 1.35em; font-weight: 700; line-height: 1.05; margin-top: .04em; } /* ⚠️ «EN UNA SOLA LÍNEA» TAMBIÉN EN EL TELÉFONO, y eso cuesta tamaño. «Tu software de entrenamiento,» mide 15,18 em, así que por debajo de 600 px el h2 tiene que encoger para que quepa de una pieza: a 390 se queda en 22 px y a 320 en 18. El tope de 34 es el suelo normal del h2, así que de 600 para arriba esta regla no hace nada. */ @media (max-width: 600px) { .titular-doble { font-size: min(34px, calc((100vw - 52px) / 15.18)); } } /* ══ EL HEXÁGONO DE LAS PREGUNTAS ════════════════════════════════════════ Aitor, 2026-09-26: «en vez de aparecer una flecha al abrir la pregunta, haya un hexágono en cada una […] en gris; cuando le des clic y se abra, que se marque en amarillo». ⚠️ LA FORMA NO ES UN POLÍGONO A OJO: es EL hexágono del panal, sacado de la misma función que dibuja el fondo -`fondo/panal.py`, lado plano arriba, girado -4° y redondez 0,22 ajustada contra el logo-. Por eso `marca/hexagono.svg` existe: para que la forma tenga UNA fuente y no dos que se separen con el tiempo. Va de MÁSCARA y no de imagen, que es lo que deja que el color sea una propiedad normal: gris cerrado, amarillo abierto, una línea cada uno. ⚠️ Y NO LLEVA TRANSICIÓN, a propósito. Aitor lleva tres tandas quitando movimiento de esta página. */ .hexa { flex: 0 0 auto; /* 1,1099 es la proporción real del hexágono, medida de sus vértices */ width: 27px; height: calc(27px / 1.1099); background: var(--gris); /* ⚠️ EL SVG VA INCRUSTADO, Y NO ES UN CAPRICHO. Como fichero suelto, una máscara CSS NO CARGA cuando la página se abre con doble clic: el navegador trata cada fichero local como un sitio distinto y la bloquea por CORS. El hexágono desaparecía y no avisaba nada. Pesa 335 bytes, así que incrustarlo no cuesta nada. El original sigue en `marca/hexagono.svg`: es el que manda, y **si cambia hay que rehacer esta línea**. Se rehace así: python3 -c "import base64,pathlib; \ print(base64.b64encode(pathlib.Path('marca/hexagono.svg').read_bytes()).decode())" */ -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii05OS43NiAtODkuODggMTk5LjUxIDE3OS43NiI+PHBhdGggZD0iTTkyLjcgLTE3LjUgQTIyLjAgMjIuMCAwIDAgMSA5NC4yIDQuNCBMNjEuNSA3MS41IEEyMi4wIDIyLjAgMCAwIDEgNDMuMiA4My44IEwtMzEuMiA4OS4wIEEyMi4wIDIyLjAgMCAwIDEgLTUwLjkgNzkuMyBMLTkyLjcgMTcuNSBBMjIuMCAyMi4wIDAgMCAxIC05NC4yIC00LjQgTC02MS41IC03MS41IEEyMi4wIDIyLjAgMCAwIDEgLTQzLjIgLTgzLjggTDMxLjIgLTg5LjAgQTIyLjAgMjIuMCAwIDAgMSA1MC45IC03OS4zIFoiLz48L3N2Zz4=') no-repeat center / contain; mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii05OS43NiAtODkuODggMTk5LjUxIDE3OS43NiI+PHBhdGggZD0iTTkyLjcgLTE3LjUgQTIyLjAgMjIuMCAwIDAgMSA5NC4yIDQuNCBMNjEuNSA3MS41IEEyMi4wIDIyLjAgMCAwIDEgNDMuMiA4My44IEwtMzEuMiA4OS4wIEEyMi4wIDIyLjAgMCAwIDEgLTUwLjkgNzkuMyBMLTkyLjcgMTcuNSBBMjIuMCAyMi4wIDAgMCAxIC05NC4yIC00LjQgTC02MS41IC03MS41IEEyMi4wIDIyLjAgMCAwIDEgLTQzLjIgLTgzLjggTDMxLjIgLTg5LjAgQTIyLjAgMjIuMCAwIDAgMSA1MC45IC03OS4zIFoiLz48L3N2Zz4=') no-repeat center / contain; } .acordeon__item[data-abierto] .hexa { background: var(--amarillo); } /* ══ CHIPS E INSIGNIAS ════════════════════════════════════════════════════ */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--e3); border-radius: var(--r-chip); background: rgba(20,20,20,.05); font-size: 13px; font-weight: 500; color: var(--tinta); } .chip--amarillo { background: var(--amarillo); } .chip--nuevo { background: var(--amarillo); font-weight: 600; } .chip--claro { background: rgba(255,255,255,.12); color: var(--papel); } /* ══ LA FRANJA DE PROMO ══════════════════════════════════════════════════ Aitor, 2026-09-25: deja de ser un globo pegado a la esquina de abajo a la derecha y pasa a ser una franja que SUBE DESDE ABAJO y ocupa el ancho entero. Y con los colores del revés: el fondo amarillo, y encima lo que antes era amarillo -la etiqueta y el botón- en negro. ⚠️ `display` Y `hidden` SE PISAN. Poner `display: flex` aquí anula el `hidden` del marcado: el aviso no se vería, pero seguiría ocupando su sitio y robando las pulsaciones a lo que tiene debajo. Por eso la regla del `[hidden]` va explícita, y va DESPUÉS. */ .promo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--amarillo); color: var(--tinta); box-shadow: 0 -8px 32px -12px rgba(0, 0, 0, .22); padding: var(--e6) 0 var(--e4); transform: translateY(100%); transition: transform .42s cubic-bezier(.2, .8, .3, 1); } .promo[hidden] { display: none; } .promo--dentro { transform: none; } @media (prefers-reduced-motion: reduce) { .promo { transition: none; } } .promo__caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e3) var(--e6); } /* ⚠️ UNA SOLA LÍNEA EN LAS TRES ANCHURAS, que es lo que pidió, y ahora ADEMÁS es lo que manda en la franja: sube de 20 a 30 y de peso 600 a 700. Es lo que se lee primero y lo que la franja viene a decir. El `nowrap` es el que obliga a la línea y el `clamp` el que hace que quepa. El suelo son 19 px y no menos: a 390 px la frase ocupa 331 de los 358 que hay entre márgenes, así que es justo el tope antes de que se salga. Medido. */ .promo__texto { margin: 0; white-space: nowrap; font-weight: 700; font-size: clamp(19px, 4.2vw, 30px); letter-spacing: -.015em; } /* El botón: BLANCO CON LETRA NEGRA. Aitor, 2026-09-25 -«vamos a probar con el botón blanco con texto negro»-. Era negro con letra amarilla. 21:1, que es el par más legible que hay. */ .promo__cta { background: var(--papel-2); color: var(--tinta); } /* ⚠️ AQUÍ NO VALE EL RESALTADO DE LA WEB, y es por dónde está puesto. El de la web se va a amarillo, y el fondo de la franja YA es amarillo: el botón desaparecería contra ella. Invirtiendo lo que hay -blanco y negro- sale negro con letra amarilla, que además es lo que era el botón antes de este cambio. 14,49:1. */ .promo__cta:hover { background: var(--tinta); color: var(--amarillo); } /* La línea de abajo, separada por puntos. Aitor, 2026-09-25: la quiere como estaba antes, con los tres argumentos sueltos y no en una frase corrida. Los puntos son decoración y por eso van marcados como tal: un lector de pantalla no tiene que leer «punto» tres veces. */ .promo__finos { margin: var(--e3) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e2) var(--e3); font-size: 14px; color: rgba(20, 20, 20, .74); text-align: center; } .promo__finos span { opacity: .45; } .promo__cerrar { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--tinta); border-radius: 50%; } .promo__cerrar:hover { background: rgba(20, 20, 20, .10); } /* En móvil el botón se estira: un botón a medio ancho en una franja que ocupa toda la pantalla se lee como un descuido. */ @media (max-width: 600px) { .promo { padding: var(--e12) 0 var(--e4); } .promo__caja { gap: var(--e3); } .promo__cta { width: 100%; justify-content: center; } .promo__finos { font-size: 12px; } } /* ══ TARJETAS ═════════════════════════════════════════════════════════════ */ .tarjeta { background: var(--papel); border-radius: var(--r-tarjeta); padding: var(--e8); box-shadow: inset 0 0 0 1px var(--linea); } .tarjeta--crema { background: var(--papel-2); } .tarjeta--negra { background: var(--tinta); color: var(--papel); box-shadow: inset 0 0 0 1px var(--linea-clara); } .tarjeta--amarilla { background: var(--amarillo); color: var(--tinta); box-shadow: none; } .tarjeta--tenue { background: var(--amarillo-pal); box-shadow: none; } .tarjeta--limpia { box-shadow: none; } .tarjeta--grande { border-radius: var(--r-grande); padding: clamp(28px,3vw,48px); } /* Superficies teñidas pálidas · el juego de 8 que tiene Calendly, aquí en la gama de la abeja. Los bloques grandes van SIEMPRE en pálido; el amarillo saturado solo en chip y botón. */ .tarjeta--miel { background: var(--amarillo-pal); box-shadow: none; } .tarjeta--cera { background: color-mix(in srgb, var(--amarillo-pal) 40%, #fff); box-shadow: none; } .tarjeta--polen { background: color-mix(in srgb, var(--amarillo-pal) 70%, #fff); box-shadow: none; } .tarjeta--humo { background: var(--papel); box-shadow: none; } .rejilla { display: grid; gap: var(--e6); } .rejilla--2 { grid-template-columns: repeat(2, 1fr); } .rejilla--3 { grid-template-columns: repeat(3, 1fr); } .rejilla--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; } } /* ══ LOS SECTORES · UNA FOTO POR TARJETA ═════════════════════════════════ Aitor, 2026-09-25, tercera vuelta: pasó el `HoverRevealCards` de 21st.dev. «Vamos a pasar de varias imágenes a solo una», el título abajo, el texto encima de él, y los dos sobre la foto. El movimiento del original, entero: en reposo las cinco iguales con el cursor fuera nada con el cursor dentro la señalada crece al 1,05 y se queda nítida; las otras cuatro encogen al 0,97, bajan al 60 % y se desenfocan 2 px ⚠️ EL «group-hover» DE TAILWIND SE HACE SIN `!important`, que es como lo resuelve el original. Basta con que la regla de la señalada tenga más peso que la del grupo: `.sectores .sector:hover` son tres partes contra las dos de `.sectores:hover .sector`, y gana sola. */ .sectores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e4); /* Hueco para lo que crece la señalada: 5 % de 400 px son 20. */ padding: 22px 0; } .sector { position: relative; display: flex; flex-direction: column; justify-content: flex-end; /* ⚠️ «LAS IMÁGENES LO SUFICIENTEMENTE LARGAS COMO PARA QUE SE PUEDA APRECIAR TANTO EL TEXTO COMO LA IMAGEN» -Aitor-. Con la proporción del original -320 px fijos- el texto se comía la tarjeta entera y no quedaba foto que mirar. A 4:7 la más cargada deja 214 px de foto limpia por encima del texto. Medido. */ aspect-ratio: 4 / 7; padding: 22px 20px; border-radius: var(--r-grande); overflow: hidden; cursor: pointer; color: var(--papel); /* ⚠️ DOS CAPAS DE FONDO EN EL MISMO ELEMENTO Y NO UN VELO APARTE: la primera capa es el degradado y la segunda la foto. Así no hace falta un `` decorativo dentro de cada tarjeta. ⚠️ Y EL DEGRADADO NO ES COSMÉTICO, ES EL CONTRASTE. Texto blanco sobre una foto que todavía no existe: la única forma de garantizar que se lea es que debajo del texto la capa negra sea lo bastante opaca. La cuenta, con la foto MÁS BLANCA posible: blanco sobre negro al a % da 255·(1-a), y para llegar al 4,5:1 que pide la WCAG hace falta a ≥ 0,535. Por eso de 0 a 55 % de alto va por encima de 0,78 y no baja de ahí hasta pasar el texto. */ /* El velo va en su propia variable porque la tarjeta de «Próximamente» necesita otro cuando se tumba: al acortarla, su texto sube en proporción y se queda donde el velo ya es flojo. */ --velo: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .78) 34%, rgba(0, 0, 0, .62) 50%, rgba(0, 0, 0, .22) 70%, rgba(0, 0, 0, 0) 88%); --rayado: repeating-linear-gradient(45deg, rgba(255, 255, 255, .10) 0 9px, rgba(255, 255, 255, .03) 9px 18px); background-color: #3a3a3a; background-image: var(--velo), var(--foto, var(--rayado)); background-size: cover, cover; background-position: center, center; transition: transform .5s ease-in-out, opacity .5s ease-in-out, filter .5s ease-in-out; } /* ⚠️ MIENTRAS SE BAJA, LAS DOS REJILLAS QUE REACCIONAN AL CURSOR NO REACCIONAN. Lo marca maqueta.js y el porqué está explicado allí: al hacer scroll el puntero está quieto y las tarjetas le pasan por debajo, así que el efecto se disparaba solo. Aitor, 2026-09-25 (tarde). */ /* ⚠️ Y VA A TODA LA PÁGINA, NO A DOS REJILLAS. Aitor, 2026-09-25 (tarde): «incluso moverlo lento al escrollear se ve una sombra». Tenía razón: la primera versión solo apagaba sectores y equipo, y los BOTONES seguían encendiéndose solos cuando pasaban por debajo del cursor. El de «Probar gratis» se pone negro al pasar el ratón, así que al bajar soltaba un destello oscuro sin que nadie lo tocara. */ /* ⚠️ Y SOLO DONDE HAY RATÓN. En una pantalla táctil no existe este problema -no hay cursor que se quede quieto- y apagar el puntero en mitad de un gesto es pedirle un lío al navegador. `hover: hover` y `pointer: fine` juntos son ratón o trackpad, y nada más. */ @media (hover: hover) and (pointer: fine) { :root[data-bajando] body { pointer-events: none; } } /* ⚠️ `:has()` Y NO `.sectores:hover`, Y ESTO ES UN FALLO QUE CAZÓ AITOR. El original apaga las demás cuando el cursor entra EN EL GRUPO, y el grupo incluye los huecos entre tarjetas y, en tablet, la casilla vacía que dejan cinco tarjetas en una rejilla de tres. Resultado: pasabas por un sitio donde no hay nada y se difuminaban las cinco. `.sectores:has(.sector:hover)` solo se cumple cuando el cursor está sobre una tarjeta DE VERDAD. Si el navegador no entiende `:has()` -anteriores a Chrome 105, Safari 15.4 o Firefox 121- la regla entera se cae y no pasa nada: las cinco se quedan como están, que es el estado en el que todas se leen. */ .sectores:has(.sector:hover) .sector { transform: scale(.97); opacity: .6; filter: blur(2px); } /* ...menos la que tiene el cursor encima. ⚠️ Y VA CON EL `:has()` DELANTE, no a secas. `:has()` NO es gratis en peso: se lleva la especificidad de su argumento, así que `.sectores:has(.sector:hover) .sector` cuenta como CUATRO clases y le ganaba a `.sectores .sector:hover`, que son tres. Se veía: al pasar por una tarjeta se difuminaban las cinco, la señalada incluida. Repitiendo el `:has()` la exención sube a cinco y gana ella. */ .sectores:has(.sector:hover) .sector:hover { transform: scale(1.05); opacity: 1; filter: none; } /* ⚠️ EL TÍTULO VA DEBAJO DEL TEXTO CON `order` Y NO CAMBIANDO EL HTML. Aitor lo quiere así -«el título es el de abajo y el texto el de arriba»-, pero en el marcado el h3 tiene que seguir yendo primero: es como lo lee un lector de pantalla y como se lee la página sin estilos. Mismo truco y mismo motivo que en la tarjeta del switcher. */ .sector__titulo { order: 2; margin: 6px 0 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.2; letter-spacing: -.01em; color: var(--papel); } .sector__texto { order: 1; margin: 0; font-size: 13px; line-height: 1.45; font-weight: 300; color: rgba(255, 255, 255, .88); } /* Tres y dos por debajo de 1041, una sola por debajo de 701. A esos anchos la tarjeta se ensancha, así que la proporción se acorta: a 4:7 una tarjeta de 342 px de ancho mediría 599 de alto y ocuparía la pantalla entera de un móvil. */ /* ⚠️ EN TABLET SON DOS Y DOS, Y LA QUINTA DE LADO A LADO. Aitor: «vamos a poner los cuatro extendidos para que entren dos y dos, y el de próximamente abajo, alargado, no tan alto». Con tres columnas las cinco dejaban una casilla vacía y la fila de abajo quedaba coja. A dos columnas la tarjeta pasa de 243 a 373 px de ancho, así que la proporción se acorta a cuadrada: a 3:4 mediría 497 px de alto y las cuatro juntas serían dos metros de scroll. */ @media (max-width: 1040px) { .sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sector { aspect-ratio: 1 / 1; } } @media (max-width: 700px) { .sectores { grid-template-columns: 1fr; gap: var(--e6); padding: 0; } .sector { aspect-ratio: 4 / 3; } } /* ⚠️ LA DE «PRÓXIMAMENTE», APARTE. En escritorio va como las otras cuatro -«en ordenador está bien»-. Por debajo de 1041 se tumba: ocupa el ancho entero y baja de alto, porque no tiene foto que enseñar y con la proporción de las demás quedaba un rectángulo enorme con dos palabras dentro. `aspect-ratio: auto` hace falta: sin él, la proporción de la regla de arriba gana y el alto mínimo no sirve de nada. */ @media (max-width: 1040px) { .sector--proxima { grid-column: 1 / -1; aspect-ratio: auto; min-height: 150px; /* ⚠️ VELO MÁS CERRADO AL TUMBARLA, y no es un capricho: en la tarjeta alta el texto cae al 38 % del alto, donde el velo va al 0,74. En la tumbada cae al 54 %, donde iba al 0,54 -el mínimo exacto de la WCAG-. Medido: el peor contraste del móvil bajaba de 7,53:1 a 5,32:1 solo por acortarla. Con estos topes vuelve a 8:1. */ --velo: linear-gradient(to top, rgba(0, 0, 0, .90) 0%, rgba(0, 0, 0, .80) 60%, rgba(0, 0, 0, .55) 85%, rgba(0, 0, 0, .30) 100%); } } @media (max-width: 700px) { .sector--proxima { min-height: 132px; } } /* Sin movimiento: se quedan las cinco como están, que es el estado en el que todas se leen. */ @media (prefers-reduced-motion: reduce) { .sector { transition: none; } .sectores:hover .sector, .sectores .sector:hover { transform: none; opacity: 1; filter: none; } } /* ══ EL EQUIPO ═══════════════════════════════════════════════════════════ Aitor, 2026-09-25: pasó el `team-02` de 21st.dev. Lo que se trae es la disposición -foto alta, nombre y cargo debajo, a la izquierda- y las dos entradas escalonadas. ⚠️ LOS NOMBRES SE QUEDAN EN `` Y NO PASAN A `

`, que es lo que hace el componente. No es un descuido: Luis, Emilio, Aitor e Iván son CUATRO DE LAS CINCO NEGRITAS de toda la maqueta, y la regla de Aitor del 24 es que no se toca ni el nivel de un encabezado ni que algo esté en negrita. Convertirlos habría sumado cuatro encabezados y restado cuatro negritas de golpe. Cambia el aspecto, no la estructura. ⚠️ Y LA INSIGNIA DE ARRIBA NO ESTÁ PORQUE LA QUITÓ ÉL: «quita la palabra el equipo». Lo mismo con «Para quién» en la de sectores. */ .equipo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e6); } .equipo__ficha { display: flex; flex-direction: column; gap: var(--e6); margin: 0; } /* La foto: alta y recortada, como el `h-80 object-cover` del original. Misma variable `--foto` que los sectores, y mismo trato: mientras no haya, se ve que falta. */ .equipo__foto { position: relative; aspect-ratio: 27 / 32; /* el 270x325 del original */ border-radius: var(--r-grande); overflow: hidden; background-color: #2a2a2a; background-image: var(--foto, none); background-size: cover; background-position: center; display: grid; place-items: center; color: rgba(255, 255, 255, .30); } /* El icono neutro se va solo en cuanto hay foto: con `--foto` puesta, la foto lo tapa entera. */ .equipo__foto svg { width: 30%; height: auto; } /* El velo oscuro que el original usa para asomar los perfiles sociales. ⚠️ SIN ICONOS TODAVÍA: no tenemos las cuentas de los cuatro, y unos iconos que llevan a `#` prometen un perfil que no hay. Cuando lleguen las URLs, entran aquí dentro. */ /* ⚠️ Y AHORA MISMO NO SE OSCURECE AL PASAR EL CURSOR. Aitor, 2026-09-25 (tarde): «se ve una sombra de un gris más claro a la hora de mover rápido el cursor, por ejemplo en la sección de entrenadores para entrenadores […] me gustaría que sea más estático». Era un velo negro al 50 % que entraba en 0,3 s: barriendo rápido por encima de las cuatro fotos se veía una mancha gris siguiendo al ratón. Y lo peor es que NO TAPABA NADA: está vacío hasta que lleguen las URLs de los perfiles. Un oscurecido que no enseña nada solo estorba. El hueco se queda montado. Cuando entren los iconos, se le devuelve el `opacity: 1` al pasar el cursor y ya hay algo que enseñar. */ .equipo__velo { position: absolute; inset: 0; background: rgba(10, 10, 12, .50); opacity: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--e5, 20px); } .equipo__pie { display: flex; flex-direction: column; gap: 4px; } .equipo__nombre { font-size: 20px; font-weight: 500; color: var(--papel); } .equipo__cargo { font-size: 14px; color: rgba(255, 255, 255, .70); } /* ⚠️ LAS DOS ENTRADAS LAS ENCIENDE EL JAVASCRIPT, NO EL CSS. Si el estado escondido viviera aquí, un fallo de JS -o el JS apagado- dejaría la sección entera invisible para siempre. Escondiendo desde JS, sin JS se ve todo quieto, que es lo correcto. */ /* ⚠️ SOLO SE DESVANECE: NADA SE DESLIZA. Aitor, 2026-09-25 (tarde): «las fotos de la sección de entrenadores para entrenadores […] al hacer scroll hay un descuadre […] que sea bastante más estática». Y tenía razón con un número detrás: era lo ÚNICO de esta sección que se movía de sitio. Medido, la cabecera y las fichas recorrían 17 px a 1440 y 32 a 810 mientras se bajaba. La cascada de 0,1 s por ficha se queda -eso no descoloca nada-, el viaje de 40 px se va. */ .equipo--anima .hoja__cabeza, .equipo--anima .equipo__ficha { opacity: 0; transition: opacity .8s cubic-bezier(.21, .47, .32, .98); } .equipo--anima .equipo__ficha { /* la cascada del original: 0,1 s por ficha */ transition-delay: calc(var(--n, 0) * .1s); } .equipo--anima [data-visto] { opacity: 1; } @media (max-width: 1040px) { .equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .equipo { grid-template-columns: 1fr; } } /* ══ CABECERAS ANCHAS Y LA MARCA DENTRO DE UN TITULAR ════════════════════ Aitor, 2026-09-25: quiere tres titulares con un número de líneas fijo -sectores en dos, el proceso en una, la entradilla del equipo en dos- y con los 780 px de siempre no salían. La caja sube a 1000 en esas tres secciones y `text-wrap: balance` reparte. */ .hoja__cabeza--ancha { max-width: 1000px; } /* ⚠️ LA DEL EQUIPO PIDE TODO EL ANCHO. Aitor, 2026-09-25: ese titular en una sola línea. Son 33 letras y a 62 px piden 1122, o sea más que los 1000 de `--ancha`. Con el ancho entero del contenedor -1184- cabe. La entradilla de debajo sigue en dos: son 168 letras y a 19,4 px piden 1630, que no caben en 1184 ni queriendo. */ .hoja__cabeza--maxima { max-width: none; } .hoja__cabeza--ancha h2, .hoja__cabeza--ancha .entradilla { text-wrap: balance; } /* ⚠️ EN MÓVIL NO BASTA CON ENSANCHAR: no hay de dónde. «Pensado para cada tipo de entrenador y disciplina» son 48 letras y a 34 px entran 18 por línea, así que salían tres. A 25 entran 24 y son dos. Solo baja ESTE titular: los otros dos ya caben. */ @media (max-width: 700px) { #sectores .hoja__cabeza h2 { font-size: 25px; } } /* ⚠️ «TrainBee» DENTRO DEL TITULAR SE PINTA, NO SE ESCRIBE. Aitor: «con la tipografía del logo, mejor». Y esa letra NO ES UNA FUENTE: en el logotipo está dibujada como trazados, no hay fichero de tipografía que cargar. Es la misma razón por la que la marca de la barra ya se pinta. ⚠️ Y EL TEXTO SIGUE EN EL HTML, escondido pero presente. Si se quitara, el encabezado pasaría a decir «Así empiezas con» a secas: lo leería así un lector de pantalla, un buscador, y el comprobador de la huella SEO. Se esconde sacándolo de la caja, no con `font-size: 0`: a cero, los `em` del ancho valdrían cero y la palabra no se vería. El recorte sale de medir el logotipo horizontal trazado a trazado: la abeja ocupa de 11 a 505 y la palabra de 644 a 2365, con lo que la palabra sola mide 1721 x 233 y su proporción es 7,386. */ .marca-palabra { display: inline-block; vertical-align: baseline; height: .72em; width: 5.318em; /* .72 x 7,386 */ margin-bottom: -.02em; /* asienta sobre la línea base */ background: url('marca/trainbee-palabra-negro.svg') no-repeat left bottom; background-size: contain; overflow: hidden; white-space: nowrap; text-indent: -200vw; /* fuera de la vista, dentro del documento */ } .hoja--negra .marca-palabra, .marca-palabra--claro { background-image: url('marca/trainbee-palabra-blanco.svg'); } /* El amarillo sí puede ser tinta sobre el negro: 12,71:1 contra el #000. Sobre claro no -1,45:1-, y por eso solo vive aquí. */ .en-amarillo { color: var(--amarillo); } /* ══ EL LOGOTIPO DENTRO DEL TITULAR ══════════════════════════════════════ El titular lleva el logotipo ENTERO -abeja y palabra-, montado con dos piezas: el hueco de la abeja y la palabra. El texto «TrainBee» sigue escrito dentro de la palabra, como ya estaba. ⚠️ LA ABEJA YA NO VUELA. Aitor, 2026-09-25 (tarde): «no me gustó. Entonces vamos a hacer una cosa: simplemente pon el logo en color y ya está». Se quitó el vuelo entero -el suyo era el único movimiento que quedaba en esa sección- y la abeja se queda dibujada en el titular, en COLOR. La versión que volaba está en el commit 872bbf9. Las medidas salen del logotipo horizontal: la abeja ocupa de 11 a 505 y la palabra de 644 a 2365, con la pieza entera de 0 a 430 de alto. Como la palabra va a .72em, la abeja es 430/233 veces más alta -1,329em- y su proporción es 1,152. */ .marca-abeja { display: inline-block; width: 1.531em; height: 1.329em; /* ⚠️ LOS DOS HUECOS NO SON LOS DEL LOGOTIPO, y es a propósito. Aitor, 2026-09-25 (tarde): «que juntas más la abeja con la T y las separes más de la N». En el logotipo horizontal la abeja va pegada a su palabra y no tiene nada a la izquierda; aquí tiene la palabra «con» delante, así que el hueco de antes -solo el espacio de la letra- la dejaba pegada a la «n» y suelta de la «T». Ahora el hueco de la izquierda es MAYOR que el de la derecha. */ margin-left: .30em; margin-right: .16em; margin-bottom: -.195em; vertical-align: baseline; background: url('marca/trainbee-abeja-color.svg') no-repeat center / contain; } /* ⚠️ SOBRE NEGRO, LA DE COLOR NO VALE: el hexágono de atrás es gris muy claro y el contorno de la abeja es negro, así que sobre fondo oscuro se pierde el dibujo y queda la mancha gris suelta. Ahí sigue la blanca. */ .hoja--negra .marca-abeja { background-image: url('marca/trainbee-abeja-blanco.svg'); } /* ══ EL PROCESO · LOS CUATRO PASOS EN COLUMNA ════════════════════════════ Aitor, 2026-09-25: pasó el `HowItWorksBlock` y dijo que de ahí quiere los pasos -«me gusta cómo están explicados»-, no la cabecera. Eran cuatro tarjetas en fila, cada una de un pálido distinto. Ahora es una lista vertical con su casilla de icono y el hilo que las cose, que es lo que hace que se lean como un ORDEN y no como cuatro opciones. ⚠️ LOS TÍTULOS SE QUEDAN EN h4. El componente los pone en h3, y aquí no se toca el nivel de un encabezado: es la regla de Aitor del 24. */ .pasos { list-style: none; margin: 0 auto; padding: 0; max-width: 680px; } .paso { display: flex; gap: var(--e6); } .paso__carril { display: flex; flex-direction: column; align-items: center; } /* ⚠️ NÚMERO Y NO ICONO. Aitor, 2026-09-25: «en vez de símbolos, que pongas números de pasos». Un icono para «Ajusta» había que inventarlo; un número dice exactamente lo que es. Y el amarillo aquí SÍ es el de marca, porque va de FONDO con la tinta encima: 14,49:1. Es el uso para el que existe. */ .paso__icono { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-tarjeta); background: var(--amarillo); color: var(--tinta); font: 700 16px/1 var(--tipo); letter-spacing: -.01em; } /* El hilo. `flex: 1` lo estira hasta el siguiente icono sin saber cuánto mide el texto de al lado. */ .paso__linea { width: 1px; flex: 1; margin-top: 4px; background: var(--linea); } .paso__texto { padding-bottom: var(--e12); } .paso:last-child .paso__texto { padding-bottom: 0; } .paso__texto h4 { margin: 8px 0 0; font-size: 17px; } .paso__texto p { margin: 6px 0 0; font-size: 15px; color: var(--tinta-70); } /* ══ EL CORTE DE LA ESQUINA, EN LAS TARJETAS ═════════════════════════════ Aitor, 2026-09-25: «coger las formas que tienen los botones y aplicarla a las tarjetas […] coherencia en la redondez de las esquinas y que haya ese corte en la esquina inferior derecha». ⚠️ LA REDONDEZ SOBREVIVE AL RECORTE, que es lo que hace que esto funcione y no es evidente: el polígono cubre la caja ENTERA menos el triángulo de abajo a la derecha, así que las otras tres esquinas se siguen pintando con su `border-radius`. Es exactamente lo que hace el botón, que es radio 5 y bisel 15 a la vez. */ .bisel-tarjeta { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bisel-tarjeta)), calc(100% - var(--bisel-tarjeta)) 100%, 0 100%); } /* ══ EL CARRUSEL ASOMADO ══════════════════════════════════════════════════ Los DOS lo hacen: la tarjeta siguiente se corta en el borde. Es lo que dice «hay más» sin escribirlo. */ .asomado { display: flex; gap: var(--e6); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e2); scrollbar-width: none; } .asomado::-webkit-scrollbar { display: none; } .asomado > * { flex: 0 0 clamp(280px, 31%, 380px); scroll-snap-align: start; } /* ══ LA BARRA ═════════════════════════════════════════════════════════════ La flotante de Calendly: separada del borde, radio 16, y lleva la ÚNICA sombra que el sistema permite. */ /* ⚠️ ERA LA BARRA FLOTANTE DE CALENDLY -separada del borde, radio 16 y con la única sombra del sistema- y pasa a la de webild.io, que es la que Aitor señaló el 2026-09-24. Medida ese día con Playwright, en sus DOS estados. Lo que cambia y por qué: · A TODO EL ANCHO, sin radio y sin margen. El contenido sí se centra, con el relleno lateral, para no tener que meter un envoltorio en el HTML -y el HTML no se toca-. · TRANSPARENTE ARRIBA. Al bajar se vuelve blanca AL 80 % con desenfoque detrás, no blanca del todo: es lo que deja ver que hay algo debajo. · Los enlaces AL CENTRO. Tres columnas: la marca ocupa la izquierda, los botones la derecha, y el nav se centra en la ventana. · La transición es de 0,7 s. Es lenta a propósito -lo medido-: el cambio tiene que notarse como un desvanecido, no como un salto. */ .barra { /* ⚠️ FIJA, NO PEGAJOSA, y el motivo está medido. Con `sticky` la posición la recalcula el hilo principal en cada fotograma: con el scroll FRACCIONADO de un trackpad la barra aterriza en medio píxel y se vuelve a dibujar entera. A 60 fotogramas por segundo eso se ve como un temblor de arriba abajo. Con una rueda sintética NO se reproduce -se midieron 145 fotogramas en la página y 206 en cada panel del espejo, todos clavados-, así que el diagnóstico sale de la diferencia entre las dos entradas, no de verlo fallar aquí. `fixed` va en su propia capa y el compositor la deja quieta. */ position: fixed; top: 0; left: 0; right: 0; z-index: 50; width: 100%; height: var(--barra-alto); /* La capa propia, para que el navegador no la repinte con la página. */ will-change: transform; transform: translateZ(0); /* Centrado sin envoltorio: el relleno lateral es lo que sobra a cada lado hasta la caja, y nunca menos que la separación mínima del borde. */ padding: 0 max(var(--e6), (100% - var(--caja)) / 2); /* ⚠️ LA COLUMNA ELÁSTICA ES LA DEL NAV, y es lo que lo manda a la derecha. Era `1fr auto 1fr`, con el nav en una columna que medía justo lo que él ocupa: ahí un `justify-self: end` no lo mueve, porque no hay hueco dentro de la celda que recorrer. Poniendo el 1fr en su columna, el sobrante se queda a su izquierda y él cae contra la llamada. */ display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--e12); align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background-color .28s ease-out, border-color .28s ease-out, box-shadow .28s ease-out; } /* El estado de bajada. La clase la pone maqueta.js a partir de 24 px. */ /* ⚠️ ERA BLANCO AL 80 % CON DESENFOQUE DETRÁS, Y ESE ERA EL TEMBLOR. Medido: el borde superior de la barra se queda clavado en 0 durante todo el scroll, así que NO se movía de sitio. Lo que temblaba era lo que se pintaba: un `backdrop-filter` toma lo que hay detrás, y detrás hay una página moviéndose. El contenido se desplaza en el compositor y el desenfoque se recalcula en el hilo principal: van desacompasados un fotograma, y la mancha borrosa de debajo de la barra va y viene mientras todo lo demás baja liso. Blanco macizo. Sin nada que volver a muestrear, no hay nada que pueda temblar. Y se pierde poco: con la portada en blanco casi no se notaba que fuera translúcida. */ .barra--bajada { background: var(--papel-2); border-bottom-color: rgba(0, 0, 0, .06); box-shadow: 0 4px 24px -8px rgba(0, 0, 0, .08); } /* Con el menú abierto, la barra y el panel son la misma superficie. */ .barra--abierto { background: var(--papel-2); border-bottom-color: transparent; } /* Quien haya pedido menos movimiento no tiene por qué ver el desvanecido. */ @media (prefers-reduced-motion: reduce) { .barra { transition: none; } } /* ⚠️ LA MARCA YA NO SE COMPONE CON TEXTO. «TrainBee» se estaba escribiendo en Poppins y esa no es la letra del logotipo. Ahora se pinta el logo horizontal entero, que trae la letra correcta dibujada. El texto sigue en el HTML y solo se oculta a la vista: un lector de pantalla y un buscador tienen que poder leer «TrainBee», y si se quitara, el enlace de la marca se quedaría sin nombre. */ .barra__marca { display: flex; align-items: center; text-decoration: none; color: var(--tinta); font-size: 0; /* oculta el texto, no lo borra */ line-height: 0; } /* Aitor, 2026-09-25: a la derecha, no centrado. Los 48 px de separación con la llamada los pone el `column-gap` de la barra. */ .barra__nav { display: flex; gap: var(--e6); justify-self: end; } .barra__nav a { font-size: 14px; font-weight: 600; letter-spacing: -0.03em; color: var(--tinta); text-decoration: none; } .barra__nav a:hover { color: var(--tinta-70); } .barra__fin { justify-self: end; display: flex; align-items: center; gap: var(--e3); } /* Sin el nav, las tres columnas dejan un hueco en medio: pasan a dos. */ /* ══ EL DESPLEGABLE DE MÓVIL Y TABLET ════════════════════════════════════ Por debajo de 1040 px el nav de arriba no cabe. Antes simplemente se escondía y no lo sustituía nada: desde el móvil no había forma de llegar a Funcionalidades, Precios ni Sectores. */ /* Las tres barritas. Se dibujan con la de en medio y dos sombras, para no meter tres elementos en el marcado por algo que es decoración. */ .barra__botonmenu { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; /* A LA DERECHA DEL TODO. Aitor, 2026-09-25: el logo a la izquierda y las rayas al final. En iPad caen justo a la izquierda de «Probar gratis», que es lo que pidió, porque la llamada es la columna siguiente. Se quita el `order: -1` del 24, que las ponía delante del logo. Sin él la rejilla las coloca en el orden del marcado, que ya es el bueno: y así lo que se ve y el orden de tabulación vuelven a coincidir. */ justify-self: end; margin-left: var(--e3); /* ⚠️ SIN MARGEN NEGATIVO AQUÍ. La caja es 24 px más ancha que el icono, y compensarlo solo tiene sentido cuando la raya está contra el BORDE de la pantalla, que es el caso del móvil. En iPad tiene «Probar gratis» al lado, y ahí el negativo se comía 12 de los 16 de separación: las rayas quedaban pegadas al botón. Medido: 4 px. */ margin-right: 0; } .barra__rayas, .barra__rayas::before, .barra__rayas::after { display: block; width: 20px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform .22s ease, opacity .16s ease; } .barra__rayas::before, .barra__rayas::after { content: ""; position: absolute; } .barra__rayas { position: relative; } .barra__rayas::before { transform: translateY(-6px); } .barra__rayas::after { transform: translateY(6px); } /* Abierto: la de arriba y la de abajo se cruzan, la de en medio se va. Es la señal de «esto ahora cierra», y sale gratis. */ [aria-expanded="true"] .barra__rayas { background: transparent; } [aria-expanded="true"] .barra__rayas::before { transform: rotate(45deg); } [aria-expanded="true"] .barra__rayas::after { transform: rotate(-45deg); } @media (max-width: 1040px) { /* El hueco entre columnas es lo que impide que el logo y la llamada se lleguen a TOCAR cuando la pantalla aprieta. Sin él, la rejilla los deja pegados antes de desbordar, y eso se ve peor que desbordar. */ .barra { grid-template-columns: auto 1fr auto; column-gap: var(--e4); } .barra__botonmenu { display: grid; } /* El panel cuelga de la barra y va POR ENCIMA: al abrirlo la página no se mueve ni un píxel. */ .barra__nav { display: grid; gap: 0; /* ⚠️ FIJO AL HUECO, no colocado dentro de la barra, y costó dos intentos llegar aquí. Dentro de la barra el panel se ancla a SU CELDA de la rejilla -salía una tira de 203 px en medio- y aunque se estire, el relleno lateral de la barra lo deja corto por los dos lados. Fijo al hueco cruza de borde a borde y siempre mide lo mismo. Los 73 px son el alto de la barra, que está pegada arriba. */ position: fixed; top: var(--barra-alto); left: 0; right: 0; /* ⚠️ Y HAY QUE DESHACER EL `justify-self: center` que la barra le pone cuando es una entrada de la rejilla. Sigue aplicándose aunque el panel esté colocado en fijo, y con él NO SE ESTIRA aunque tenga left:0 y right:0: se encoge a su contenido y se centra. Era eso -no el left/right- lo que lo dejaba en 203 px. */ justify-self: stretch; background: var(--papel-2); border-bottom: 1px solid var(--linea); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .14); padding: var(--e2) max(var(--e4), (100% - var(--caja)) / 2) var(--e6); /* Cerrado no es `display: none`: así puede animarse la apertura. Y `visibility` es lo que impide que se pueda tabular a un enlace que no se ve. */ visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .barra__nav[data-abierto] { visibility: visible; opacity: 1; transform: none; } .barra__nav a { padding: var(--e4) 0; font-size: 17px; border-bottom: 1px solid var(--linea); } .barra__nav-cta { margin-top: var(--e6); justify-content: center; } /* El relleno lateral vuelve: a cero, el texto del botón tocaba el borde. */ .barra__nav a.barra__nav-cta { border-bottom: 0; padding: 0 var(--e4); font-size: 12px; } } /* Arriba de 1040 las dos llamadas del panel sobran: ya están en la barra. */ @media (min-width: 1041px) { .barra__nav-cta { display: none; } } @media (prefers-reduced-motion: reduce) { .barra__nav, .barra__rayas, .barra__rayas::before, .barra__rayas::after { transition: none; } } /* ⚠️ A 390 px los dos botones se montaban ENCIMA del logo. No caben, y no es cuestión de apretarlos: «Hablar con nosotros» ya ocupa media pantalla. Se queda la llamada principal, que es la única que Iván dejó en la portada. El enlace a contacto sigue en el pie y en el propio DOM: solo se oculta en esta anchura. */ /* ══ LA BARRA EN MÓVIL ════════════════════════════════════════════════════ Aitor, 2026-09-25: el logo a la IZQUIERDA del todo y las rayas a la derecha del todo. Antes el logo iba centrado, con la columna de la derecha haciendo de hueco para que no saliera torcido. Ese hueco ya no hace falta y ADEMÁS estorba: con él, las rayas se quedarían a 40 px del borde en vez de pegadas. La llamada se va del todo -`display: none`-, la barra se queda en dos piezas y el sobrante entero cae entre ellas. Y la llamada no se pierde: sigue dentro del desplegable. */ @media (max-width: 600px) { /* ⚠️ Y DOS COLUMNAS, NO TRES. Con la llamada fuera, la tercera columna se queda a cero pero SU HUECO NO: los 16 px del `column-gap` siguen ahí y empujan las rayas hacia dentro. Medido: acababan a 32 px del borde en vez de a 16, que es donde está el logo por el otro lado. */ .barra { padding: 0 var(--e4); grid-template-columns: auto 1fr; } /* ⚠️ AQUÍ SÍ SOBRA EL MARGEN NEGATIVO, y no por geometría. Con él la raya quedaba a 16 px del borde, la misma distancia que el logo por el otro lado: cuadra midiendo y Aitor lo ve «muy pegado». Quitándolo entra la caja entera y la raya se va a 26. */ .barra__botonmenu { width: 40px; margin-right: 0; } .barra__fin { display: none; } /* Con la llamada fuera sobra sitio, así que el logo vuelve a los 34 px de las otras dos anchuras: un solo tamaño en toda la web. `.barra .abeja` y no `.abeja`: la regla base está MÁS ABAJO en el fichero y, a igual fuerza, gana la última. */ .barra .abeja { height: 34px; width: calc(34px * 2365 / 428); } } /* El sello de la abeja, dibujado: dos rayas. Sin fichero de imagen. */ /* El mismo `` vacío del marcado, pero ahora lleva el LOGO ENTERO -símbolo y nombre-, no solo el símbolo. Proporción real del fichero: 2365 × 428. */ .abeja { height: 34px; width: calc(34px * 2365 / 428); flex: none; background: url('marca/trainbee-horizontal.svg') left center / contain no-repeat; } /* ══ EL SWITCHER DE PRODUCTO ══════════════════════════════════════════════ El patrón de la portada de Calendly. Su nombre en el HTML es literalmente `product-switcher-gradient`. Aquí son las TRES ramas del mapa: Coaching · Management · Payments. ⚠️ En Calendly el cambio lo dispara el SCROLL (33 apariciones de `sticky`). Aquí va por clic, que es el 80% del efecto por el 10% del coste. Pasar a scroll es la mejora cara, y hay que decidirla aparte. */ /* El switcher va DENTRO de un escenario de malla, y la tarjeta blanca flota encima. Eso —panel de malla + tarjeta blanca dentro— es el patrón entero de Calendly; sin la tarjeta blanca es solo un fondo bonito. */ /* ⚠️ EL TITULAR, FUERA DE LA TARJETA Y EN DOS LÍNEAS EN ESCRITORIO. Aitor, 2026-09-25. La frase tiene 101 caracteres, así que para que caiga en dos y no en tres hay que DARLE ANCHO: con los 760 px que tenía dentro de la tarjeta salían tres. El `balance` es lo que reparte las dos parejo en vez de dejar una línea larga y una corta. Los `mark` llevan el subrayado amarillo que ya tenían en línea. Pasan a CSS porque ahora son dos y se repetían enteros en el marcado. */ .switcher__titular { font-family: var(--tipo); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); /* ⚠️ 1,45 Y NO 1,25, Y ES POR LA PASTILLA AMARILLA. La frase resaltada va a 1,22 em, así que su pastilla es MÁS ALTA que el hueco entre líneas: con 1,25 se montaba sobre la de arriba y se comía la cola de la «g» de «gratis». Medido a 390, donde la frase parte en dos. */ line-height: 1.45; letter-spacing: -.02em; text-align: center; text-wrap: balance; max-width: 1000px; margin: 0 auto var(--e8); } /* ⚠️ TODA LA FRASE, Y EN EL AMARILLO DEL BOTÓN. Aitor, 2026-09-25 (tarde): «"gratis para tus tres primeros clientes", toda esa frase en amarillo, pero amarillo del botón, por favor». VA COMO EL BOTÓN: FONDO amarillo con la tinta encima, no letras amarillas. Y no es una licencia, es la única forma de que se lea: el #ffd21f como TINTA sobre el papel da 1,45:1 -el listón son 4,5:1-, así que en letras ese amarillo no existe. De fondo, con la tinta encima, da 14,49:1, que es exactamente lo que hace el botón y de donde sale el color que él reconoce. Antes eran DOS trozos sueltos -«gratis» y «3 primeros clientes»- en `--amarillo-tinta`, el amarillo apagado que sí pasa como letra. Ahora es una sola frase seguida, que es lo que pidió. ⚠️ `box-decoration-break: clone` NO ES UN ADORNO. La frase parte en dos líneas y sin esto el relleno y las esquinas solo salen al principio y al final del todo: el trozo de la primera línea acaba a hueso y el de la segunda empieza a hueso. Con `clone`, cada línea lleva su pastilla entera. */ .switcher__titular mark { background: var(--amarillo); color: var(--tinta); font-size: 1.22em; font-weight: 700; padding: .06em .28em; border-radius: var(--r-boton); -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ⚠️ EN MÓVIL, TODO AL MISMO TAMAÑO Y LA FRASE EN UN RENGLÓN. Aitor, 2026-09-26: «si lo podemos bajar y poner en una sola línea; el texto tiene que ser del mismo tamaño que el resto del texto […] aunque sea más pequeño, se va a leer bien en el móvil». El 1,22 em del resaltado se va: ahí arriba sirve para que la frase pese más que el resto, pero en un ancho de teléfono lo único que hace es partir la pastilla en dos renglones. ⚠️ Y EL TAMAÑO SALE DE UNA MEDIDA, no del ojo. Son DOS medidas y manda la mayor: la pastilla «gratis para tus 3 primeros clientes» pide 17,25 em -16,69 de texto más 0,28 de relleno por lado-, y la frase negra en DOS renglones pide 18,24. Ese 18,24 es el renglón más largo del mejor corte posible -«Todo lo que necesitas en un software» / «de entrenamiento personal,»-, y no se calcula: se busca bajando el tamaño de cuarto en cuarto hasta que el navegador deja de usar tres renglones. Sale a 18,75 px en una caja de 342, o sea 18,24 em. Y vale en cualquier anchura porque el corte es el mismo: el renglón largo siempre mide 18,24 em, encoja lo que encoja la caja. Los 52 px que se restan son los 48 de la caja más 4 de holgura. El tope de 19 px es el cuerpo normal de la página: por encima de 390 px de pantalla no hace falta bajar más. */ @media (max-width: 700px) { .switcher__titular { font-size: min(19px, calc((100vw - 52px) / 18.24)); line-height: 1.5; /* ⚠️ SIN `balance`, Y ES LO QUE DEJA EL NEGRO EN DOS RENGLONES. Aitor, 2026-09-26: «quiero que todo lo que necesitas en un software de entrenamiento personal quede en dos líneas solamente». La frase negra mide 31,9 em y en un teléfono caben 18 por renglón, o sea que en dos entra. Lo que la partía en tres era el `balance`: la pastilla amarilla no se parte -17,25 em de una pieza-, así que al repartir los renglones parejo el navegador igualaba los cuatro contra el largo de ella y dejaba el negro en tres cortos. Llenando de arriba abajo, entra en dos. */ text-wrap: wrap; } /* ⚠️ `nowrap` ES LO QUE LA DEJA EN UN RENGLÓN, no el tamaño. La frase va dentro de otra más larga, así que empieza donde acabe la anterior y se parte ahí mismo aunque quepa de sobra. Con `nowrap` el navegador la baja entera al renglón siguiente, y cabe: 17,25 em contra los 18 que hay a 390 px. */ .switcher__titular mark { font-size: 1em; font-weight: 600; white-space: nowrap; } } .switcher { } .switcher__pestanas { display: flex; justify-content: center; gap: var(--e3); margin-bottom: var(--e8); } /* ⚠️ FUERA EL DESENFOQUE DE DETRÁS. Estaba pensado para cuando las pestañas iban sobre la malla amarilla; sobre una tarjeta blanca no desenfoca nada -no hay nada detrás- y cuesta una capa de compositor por pestaña. Es el mismo gasto que se quitó de la barra el día 24. Y pasan a píldora: gris muy claro apagadas, negro con letra amarilla la que manda. Medido: 14,49:1 la encendida y 18,93:1 las otras. */ .switcher__pestana { display: inline-flex; align-items: center; gap: var(--e2); height: 44px; padding: 0 var(--e6); border: 0; border-radius: 999px; background: rgba(20, 20, 20, .05); color: var(--tinta); font: 600 14px/1 var(--tipo); letter-spacing: -0.02em; cursor: pointer; transition: background-color .16s ease, color .16s ease; } .switcher__pestana:hover { background: rgba(20, 20, 20, .10); } .switcher__pestana[aria-selected="true"] { background: var(--tinta); color: var(--amarillo); } /* ⚠️ EL MISMO HUECO QUE EL RELLENO DE LA TARJETA, no un valor suelto. Aitor, 2026-09-25: quiere los huecos de dentro cuadrados. Eran 48 fijos contra un relleno de 37 en escritorio y de 21 en iPad: se veia que no cuadraba y no se sabia por que. */ .switcher__pestanas { margin-bottom: var(--pad-esc); } .switcher__panel { display: none; } /* ⚠️ EL MOCKUP A LA IZQUIERDA Y EL TEXTO A LA DERECHA, que es la distribución de las referencias que pasó Aitor el 25. Antes era al revés y el texto se llevaba la mitad ancha. Y se hace con `order` y NO cambiando el marcado: en el HTML el texto sigue yendo primero, que es como tiene que leerlo un lector de pantalla y como se lee sin estilos. El mockup no tiene nada donde se pueda entrar con el tabulador, así que moverlo de sitio no descoloca el orden de tabulación. */ .switcher__panel[data-activo] { display: grid; grid-template-columns: 1.45fr 1fr; /* ⚠️ DOS RELLENOS DE HUECO, Y NO ES ARBITRARIO: el móvil se sale UNO por la derecha, así que lo que le queda hasta el texto es el otro. Con un número suelto había que volver a cuadrarlo cada vez que cambiaba el relleno, y por eso estaba en 4 px a 810. */ gap: calc(var(--pad-esc) * 2); align-items: center; } .switcher__panel[data-activo] > .switcher__texto { order: 2; } /* ⚠️ EL TEXTO SE ACERCA AL BORDE DERECHO, Y ES A PROPOSITO. Aitor, 2026-09-30: «tenemos que acercar el texto mas a la derecha, lo siento muy pegado a la izquierda». Los tres huecos estaban simetricos y medidos -54 a la izquierda, 56 entre la tarjeta flotante y el texto, 54 a la derecha-, asi que esto NO corrige un fallo: cambia el equilibrio a mano. Se le enseno la medicion y eligio esto sabiendo que los margenes dejan de ser iguales. El valor va atado a `--pad-esc` y no escrito en pixeles: asi el texto conserva SIEMPRE el 55 % del relleno de la tarjeta, en cualquier ancho, y nunca llega a tocar el borde. Solo de 1041 para arriba; en tablet el relleno ya es de 30 px y comerse la mitad lo dejaria pegado. */ @media (min-width: 1041px) { .switcher__panel[data-activo] > .switcher__texto { /* ⚠️ LOS DOS MARGENES, O NO SE MUEVE NADA. Con solo el derecho negativo la columna no se desplaza: se ENSANCHA hacia la derecha, porque su borde izquierdo lo fija el grid y no el margen. El izquierdo positivo es lo que empuja la caja entera; el derecho negativo, lo que le deja sitio para llegar. */ margin-left: calc(var(--pad-esc) * .45); margin-right: calc(var(--pad-esc) * -.45); } } /* ⚠️ EN TABLET TAMBIÉN VAN LAS DOS COLUMNAS. Aitor pidió esta distribución «para tablet y para escritorio», y el corte estaba en 900, así que el iPad vertical -810- se caía a una sola. Baja a 700. Lo que sí cambia en tablet es el reparto: con 1,45 a 1 la columna del texto se quedaba en 252 px y ahí un h3 no se lee. Con 1,2 a 1 y el hueco más corto sube a 291. */ @media (max-width: 1040px) and (min-width: 701px) { .switcher__panel[data-activo] { /* El hueco lo hereda de la regla de arriba -dos rellenos-; aquí solo cambia el reparto, porque a 810 px la columna del texto con 1,45 a 1 se quedaba en 252 px y ahí un h3 no se lee. */ grid-template-columns: 1.2fr 1fr; } } /* En una columna manda el orden del marcado otra vez: el texto primero, que es lo que dice de qué va lo que viene debajo. */ @media (max-width: 700px) { .switcher__panel[data-activo] { grid-template-columns: 1fr; gap: var(--e8); } .switcher__panel[data-activo] > .switcher__texto { order: 0; } } /* ⚠️ EL h3 BAJA DE TAMAÑO AL CAMBIAR DE COLUMNA. Con el mockup a la izquierda, el texto pasa de la mitad ancha a 398 px, y al tamaño que traía se partía en CINCO líneas de tres palabras. Solo cambia el tamaño: el nivel del encabezado y el texto se quedan igual. */ .switcher__texto h3 { font-size: clamp(21px, 1.7vw, 26px); line-height: 1.18; letter-spacing: -.015em; text-wrap: balance; } .switcher__texto p { margin-top: var(--e4); color: var(--tinta-70); } .switcher__lista { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; gap: var(--e3); } .switcher__lista li { display: flex; gap: var(--e3); align-items: center; font-size: 15px; } .switcher__lista li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--amarillo); flex: 0 0 7px; box-shadow: 0 0 0 3px rgba(255,195,0,.25); } /* ⚠️ EL MOCKUP SE SALE POR EL BORDE IZQUIERDO Y LA TARJETA LO RECORTA. Es lo que hace la referencia que pasó Aitor, y no es un capricho: con el mockup metido dentro del relleno, la tarjeta se lee como una caja con una foto pequeña; saliéndose, se lee como una ventana ASOMADA a algo más grande, que es lo que tiene que parecer un producto. El desplazamiento es exactamente el relleno de la tarjeta, por eso ese valor vive en `--pad-esc` y no escrito dos veces. Y el radio se va solo por la izquierda: lo que toca el borde tiene que ir a escuadra o se ve que es un recorte. */ /* El envoltorio del mockup: existe para que el móvil tenga contra qué colocarse. Y es él quien se sale por la izquierda, no la ventana. */ /* ⚠️ SIN MARGEN NEGATIVO DESDE QUE HAY PIEZAS. Ese margen existia para que la VENTANA se saliera por la izquierda y la cortara el borde del panel. Con recortes sueltos el efecto se vuelve un descuido: la pieza de base se quedaba partida por la mitad y no se leia. */ .switcher__visual { position: relative; } .switcher__visual > .tarjeta--cera { border-radius: 0 var(--r-panel) var(--r-panel) 0; } /* ⚠️ PIEZAS SUELTAS Y NO UN PANTALLAZO. Aitor, 2026-09-29: «me decanto mas por elementos sueltos si los presentamos de una manera chula». Antes aqui habia una ventana dibujada a mano con tres puntos y filas inventadas; lo que hay ahora son recortes REALES de la app: una pieza de base ancha y otra encima, descolocada. El patron es el mismo que ya funciona en la seccion de descarga -uno de fondo y otro delante-, y por la misma razon: dos planos cuentan una relacion que una sola imagen plana no cuenta. */ /* ⚠️ AQUI HUBO UN HALO AMARILLO Y SE QUITO. Aitor, 2026-09-30: «quiero quitar el destello amarillo al fondo de los mockups». Estaba puesto para que el `backdrop-filter` del marco tuviera algo que refractar; sin el, el cristal sobre blanco se lee simplemente como un marco blanco con sombra. Se acepta: el marco sigue funcionando y la seccion queda limpia. Si algun dia se quiere recuperar el efecto, el halo esta en el commit anterior a esta linea. ⚠️ Y LA BASE NO SE SALE POR LA IZQUIERDA. Se probo el 2026-09-30, a peticion de Aitor -«que el mockup del fondo sea mas grande y que lo agrandemos pegandolo a la izquierda, aunque se corte»- y se revirtio el mismo dia: «no me gusta como queda cortado». El corte se comia la primera letra de cada ejercicio y, en Pagos, la mitad de la cifra. Una cifra cortada no se lee como recorte, se lee como error. */ .switcher__piezas { position: relative; padding-block: clamp(10px, 1.8vw, 24px); } /* ── EL MARCO DE CRISTAL ──────────────────────────────────────────────── Cuatro capas, y las cuatro hacen falta: 1 · `backdrop-filter` desenfoca y satura lo de detras. Es el cristal. 2 · un fondo blanco a media opacidad, que es el esmerilado. 3 · un borde de 1 px CLARO ARRIBA y OSCURO ABAJO, con `border-image` en degradado: es el canto, y es lo que lo hace parecer grueso. 4 · un brillo interior arriba, el reflejo de la luz. ⚠️ El radio del marco es MAYOR que el de la pieza de dentro, y no por capricho: dos radios iguales con relleno entre medias se ven mal, porque la curva de fuera queda visualmente mas cerrada que la de dentro. */ .vidrio { display: block; position: relative; /* ⚠️ EL MARCO ES MAS FINO QUE ANTES, Y VA EN LAS CINCO PIEZAS. Aitor, 2026-09-30: «le vamos a poner al borde de la tarjeta un liquid glass de menos grosor del que tiene ahora en los dos recortes de nutricion. Un poquito menos grueso, y se lo aplicamos a las de Entreno, nutricion y pagos». Esto DESHACE lo del 2026-09-30 por la manana, cuando se quito el marco a las piezas que ya eran una tarjeta en la app -«esas secciones ya en si son tarjetas»-. Lo dijo el mismo al pedirlo: «vamos a hacer un poco de contradiccion». Con el aparato grande detras, el marco ya no compite con nada: separa la pieza del movil. De 9-15 px a 6-10. `.vidrio` solo lo usan estas cinco piezas, asi que bajarlo aqui no toca nada mas de la web. */ padding: clamp(6px, .62vw, 10px); /* ⚠️ EL MISMO RADIO QUE LA TARJETA DE FUERA, Y NO UNO INVENTADO. Aitor, 2026-09-29: «revisa los bordes de todas las secciones para que coincidan con la redondez de los bordes de la tarjeta de afuera». Aqui habia un clamp que llegaba a 30 px; el sistema entero va a 14 (`--r-grande`, el del escenario) y a 10 (`--r-panel`). Con 30 el marco parecia de otra web. */ border-radius: var(--r-grande); background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.42)); backdrop-filter: blur(16px) saturate(165%); -webkit-backdrop-filter: blur(16px) saturate(165%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(20,22,28,.07), inset 0 0 0 1px rgba(255,255,255,.55), 0 2px 4px -2px rgba(20,22,28,.10), 0 12px 22px -10px rgba(20,22,28,.14), 0 34px 54px -24px rgba(20,22,28,.22); } /* El reflejo de arriba. Va en `::before` y no en el fondo para que no se mezcle con el `backdrop-filter`, que se aplica al elemento entero. */ .vidrio::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(170deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 38%); pointer-events: none; } /* ⚠️ EL RADIO LO PONE EL CSS, NO EL PNG. Antes venia redondeado desde Pillow, y eso ata el radio al tamano en que se guardo la imagen: al escalarla, la curva se escala con ella y deja de coincidir con el marco. Redondeado aqui, el navegador lo dibuja con antialiasing al tamano real. Y es `--r-panel` (10) contra los 14 del marco: el de dentro siempre menor, o la curva de fuera se ve mas cerrada que la de dentro. */ .switcher__pieza { display: block; width: 100%; height: auto; position: relative; z-index: 1; border-radius: var(--r-panel); /* ⚠️ AQUI HABIA UN `image-rendering: -webkit-optimize-contrast` Y HACIA LO CONTRARIO DE LO QUE PRETENDIA. Esa propiedad sirve para AMPLIAR sin que se emborrone; en REDUCCION -que es lo que pasa aqui, y sobre todo en movil- desactiva el suavizado y saca dientes de sierra en cada linea de 1 px. Sin ella el navegador reduce con mipmaps, que es lo correcto. */ } .vidrio--encima { position: absolute; width: 56%; right: -9%; bottom: -4%; z-index: 2; /* Un pelin mas de cristal y de sombra: es el que esta mas cerca. */ backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(20,22,28,.08), inset 0 0 0 1px rgba(255,255,255,.6), 0 3px 6px -3px rgba(20,22,28,.14), 0 18px 30px -12px rgba(20,22,28,.18), 0 48px 70px -28px rgba(20,22,28,.28); } /* ══ LO QUE YA ES UNA TARJETA NO LLEVA MARCO ═══════════════════════════════ Aitor, 2026-09-30: «la de pagos ya vemos que es una tarjeta con todos los bordes, o el de banca con barra […] esas secciones no quiero ponerles los bordes blancos porque esas secciones ya en si son tarjetas. Pero cosas como alergenos o dieta sin nombre, como no tienen la tarjeta ya dibujada alrededor, tenemos que ponerle ese bordecito blanco». Y es exacto: el marco de cristal existe para DAR borde a un recorte que no lo tiene. Puesto sobre algo que ya lo trae, son dos bordes, uno dentro de otro, y se lee como un descuido. Lo que se quita: el relleno, el fondo esmerilado, el cristal y el reflejo. Lo que se QUEDA: las tres capas de sombra. Son las que separan un plano del otro, y sin ellas las dos piezas se ven pegadas al papel. Quien lleva marco -> nutricion-base · nutricion-encima · pagos-encima Quien no lo lleva -> entreno-base · entreno-encima · pagos-base */ /* ⚠️ SIN USO DESDE EL 2026-09-30 POR LA TARDE. Lo llevaban las piezas que ya eran tarjeta en la app; Aitor pidio devolverles el marco. Se deja por si se vuelve atras: no estorba, porque ya no lo pide nadie en el marcado. */ .vidrio--limpio { padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; /* El radio del contenedor iguala al de la imagen, o la sombra saldria por fuera de la curva en las cuatro esquinas. */ border-radius: var(--r-panel); /* ⚠️ EL CANTO LO PONE EL CSS, Y ES UNO SOLO. Aitor, 2026-09-30: «esos bordes tienen un recorte blanco muy pequeno alrededor, eso es lo que quiero quitar […] si tenemos que hacer ese borde exterior negro, sin problema, que sea un pelin mas grueso y negro». El halo blanco venia DENTRO de la imagen -era fondo de la app que el recorte se traia-, y se ha quitado de los ficheros. Con el filete de la app comido tambien, la pieza se quedaba sin canto: esta linea de 1 px se lo devuelve, igual en las seis y a nuestro color, no al de la app. */ box-shadow: inset 0 0 0 1px rgba(20,22,28,.16), 0 2px 4px -2px rgba(20,22,28,.10), 0 12px 22px -10px rgba(20,22,28,.14), 0 34px 54px -24px rgba(20,22,28,.22); } /* El reflejo de arriba es del cristal: sin cristal, no pinta nada. */ .vidrio--limpio::before { display: none; } /* La combinacion gana por especificidad (dos clases) a `.vidrio--encima`, que va antes y solo tiene una. */ .vidrio--encima.vidrio--limpio { box-shadow: inset 0 0 0 1px rgba(20,22,28,.16), 0 3px 6px -3px rgba(20,22,28,.14), 0 18px 30px -12px rgba(20,22,28,.18), 0 48px 70px -28px rgba(20,22,28,.28); } @media (max-width: 780px) { /* ⚠️ TAMBIEN SUPERPUESTAS EN MOVIL. Aitor, 2026-09-29: «ahora me aparecen las dos tarjetas flotando separadas; me gustaria algo parecido a como hicimos con la tablet o con el ordenador». Antes aqui se ponian en fila porque en 342 px no parecia caber un segundo plano: si cabe, con la de encima mas ancha en proporcion -66 % frente al 56 % de escritorio- y pegada al borde de abajo. El relleno de abajo del contenedor es lo que le hace sitio: sin el, la que asoma se metia por debajo del titular de la seccion siguiente. */ .switcher__piezas { padding-bottom: 22%; } .vidrio--encima { width: 66%; right: -4%; bottom: 2%; } } /* ⚠️ ESTE BLOQUE VA DESPUES DE `.vidrio`, Y NO PUEDE IR ANTES. Se probo arriba, junto a `.switcher__piezas`, y no se aplicaba NADA: ni el `position: absolute` ni el `display: none` de movil. Misma especificidad -una clase contra una clase- y, a igualdad, manda el que va DESPUES en el fichero. Se vio midiendo: las tarjetas caian en fila debajo del aparato y la escena media 1035 px de alto en vez de 560. */ /* ── LA ESCENA DEL SWITCHER: UN APARATO GRANDE Y CORTADO ─────────────── Aitor, 2026-09-30, la segunda vuelta: «que se vea mas grande [...] en escritorio y en tablet mas grande, aunque salga cortada a la mitad de la pantalla [...] las tarjetitas flotantes, que no esten al lado: pueden estar por encima del movil». Y para movil: «que salga como se ve en el movil, pero con el mockup del iPhone bien y tambien cortado [...] no a la mitad de la pantalla, sino a dos tercios». La referencia es la tarjeta amarilla de descarga, donde el aparato asoma y se corta por abajo. Aqui igual: el aparato vale casi el doble que antes y la escena le corta el pie. ⚠️ EL MARCO NO PARECIA UN IPHONE, Y NO ERA COSA DE GUSTO. `.iphone` trae `--radio: min(38px, 3.8vw)` y `--bisel: clamp(4px,.7vw,7px)`: medidas ABSOLUTAS, calibradas para un aparato de 250 px. En uno de 390 esas esquinas se quedan cortas y el canto, fino; a 188 px pasa lo contrario. Un iPhone tiene la esquina en el 15 % de su ancho SIEMPRE. Por eso el aparato va dentro de un envoltorio con `container-type`: asi `1cqw` es el 1 % del ancho DEL APARATO y las tres medidas se pueden escribir en proporcion. Deja de haber que recalibrar por breakpoint. */ .switcher__escena { position: relative; /* ⚠️ `clip-path`, NO `overflow: hidden`. Hace falta cortar por ABAJO pero dejar salir las tarjetas por los LADOS, y con `overflow` no se puede: en cuanto un eje es `hidden`, el otro deja de ser `visible`. ⚠️ Y CON `polygon`, NO CON `inset`. Se escribio `inset(0 -22% 0 -22%)` y NO CORTABA NADA: `inset()` no admite medidas negativas, asi que la declaracion entera se descarta sin avisar. `polygon` si acepta puntos fuera del 0-100 %, que es justo lo que hace falta. */ clip-path: polygon(-22% 0, 122% 0, 122% 100%, -22% 100%); /* Lo que decide cuanto aparato se ve. El alto del aparato es 2,22 veces su ancho, y su ancho es el 68 % de la escena: 1,51 anchos de escena. A 0,91 se ve el 60 %, que es donde la barra de pestanas de la app todavia asoma y se entiende que hay mas abajo. */ aspect-ratio: 1 / .91; /* ⚠️ EL APARATO LLEGA AL BORDE DE LA TARJETA, NO SE QUEDA FLOTANDO. Aitor, 2026-09-30: «el corte del movil, hasta abajo de todo; si te fijas, esta flotando la tarjeta. Eso no me gusta». Tenia razon y era el relleno de la tarjeta blanca: el aparato se cortaba y debajo quedaban 54 px de blanco, asi que el corte se leia como un aparato mutilado en el aire en vez de como un aparato que sigue por debajo del borde. El margen negativo se come ese relleno por abajo, y quien corta pasa a ser el `overflow: hidden` de la propia tarjeta. Asi el corte cae EXACTAMENTE en su borde, con su curva incluida. */ margin-bottom: calc(var(--pad-esc) * -1); } /* El envoltorio: mide y hace de contenedor de consulta. No pinta nada. */ .switcher__tel { position: absolute; top: 0; left: 16%; width: 68%; container-type: inline-size; } /* ⚠️ `position: relative` NO ES DECORATIVO: sin el, los cuatro botones del canto -que son `.iphone::before` y `::after`, absolutos- se cuelgan del ancestro posicionado mas cercano y aparecen como una raya negra flotando en medio de la escena. Pasó, y costo un rato verlo. */ .switcher__aparato { position: relative; width: 100%; /* ⚠️ SIN `aspect-ratio`: el de `.iphone` es 248/506 porque los otros cuatro marcos envuelven una pantalla dibujada en HTML. Aqui dentro va una CAPTURA, y si el marco impone su proporcion sobra o falta pantalla. En `auto`, la altura la marca la imagen. */ aspect-ratio: auto; /* Las tres medidas del iPhone, en proporcion a SU ancho. */ --canto: 1cqw; --bisel: 2.4cqw; --radio: 15cqw; } .switcher__pantalla { overflow: hidden; } /* Sin radio propio: lo hereda de la pantalla, que ya lo calcula restando canto y bisel al radio exterior. */ .switcher__captura { display: block; width: 100%; height: auto; } /* ── LAS TARJETAS, ENCIMA DEL APARATO ────────────────────────────────── Una asoma arriba por la derecha y otra abajo por la izquierda, como las dos fichas del escaparate de la seccion 1. Salen del aparato a proposito: es lo que las hace leerse como piezas sueltas de la app y no como parte de la pantalla que hay debajo. La de abajo ademas TAPA EL CORTE, que es donde mas canta. */ .switcher__suelta { position: absolute; width: 52%; z-index: 3; } /* Abajo del todo del encabezado de la app, para no taparle el titulo. */ .switcher__suelta--alta { top: 14%; right: -10%; } /* ⚠️ SOLO -6 % A LA IZQUIERDA, Y ESTA MEDIDO: entre la escena y el borde de la tarjeta blanca hay 54 px a 1440 y 30 a 810, o sea el 9 % de la escena. Estaba en -10 % y el borde le cortaba la primera cifra. A la derecha hay 557 px, por eso la de arriba si puede salir el doble. */ .switcher__suelta--baja { bottom: 5%; left: -6%; } /* ⚠️ EN MOVIL SE VAN LAS TARJETAS, NO EL APARATO. Es lo contrario de lo que hace el escaparate, y esta pedido asi: «en la version de movil, no». A 390 px una tarjeta de media escena son 150 px y no se lee nada; el aparato, en cambio, es justo lo que mejor se ve en un movil. El corte va en 700 porque es donde el panel pasa a una columna: el aparato deja de compartir sitio con el texto y lo tiene todo para el. */ @media (max-width: 700px) { .switcher__suelta { display: none; } /* Dos tercios, no la mitad: 0,88 de ancho por 2,22 son 1,96 anchos de escena, y 1,3 de eso es el 66 %. */ .switcher__escena { aspect-ratio: 1 / 1.3; } .switcher__tel { left: 6%; width: 88%; } } /* ⚠️ EL MÓVIL, QUE FALTABA. Aitor, 2026-09-25: «le falta la versión móvil». Y tenía razón: en el escaparate de arriba están los dos aparatos y aquí solo estaba la ventana. Las proporciones salen de medir su referencia: ancho del móvil ~31 % del de la ventana proporción 0,49 · la misma del escaparate, ya medida se monta sobre la esquina y SOBRESALE por la derecha ⚠️ Y lo que sobresale tiene tope: el hueco entre las dos columnas. Con un 7 % son 40 px sobre un hueco de 64, así que no llega a pisar el texto. Más que eso y se le monta encima. */ .switcher__movil { position: absolute; /* ⚠️ ACABA DONDE ACABA LA VENTANA, y por eso va por `bottom` y no por `top`. Colgado de arriba sobresalía por abajo y se comía parte del relleno de la tarjeta -medido: 25 px en escritorio y 9 en iPad, donde tenían que ser 37 y 21-. Anclado abajo, el hueco hasta el borde es el mismo que el de la ventana, que es lo que pidió Aitor. Y sale por la derecha EXACTAMENTE un relleno, que es lo que hace que lo que le queda hasta el texto sea otro relleno. */ bottom: 0; height: 92%; right: calc(-1 * var(--pad-esc)); aspect-ratio: 248 / 506; background: var(--tinta); padding: 5px; border-radius: 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); } .switcher__movil-pantalla { height: 100%; overflow: hidden; background: var(--papel-2); border-radius: 17px; /* el de fuera menos el marco */ padding: 11px 8px 6px; display: flex; flex-direction: column; gap: 5px; } .switcher__movil-titulo { font-size: 11px; font-weight: 700; letter-spacing: -.01em; color: var(--tinta); padding: 0 4px 5px; } /* ⚠️ LAS FILAS SON LAS MISMAS DE LA VENTANA, TRES DE LAS CUATRO. A 8,5 px el marco se quedaba medio vacío: un teléfono con la pantalla en blanco por abajo no parece un mockup, parece un fallo. A 11 px y partiendo en dos renglones llenan el alto, y la tercera queda cortada por abajo, que es lo que hace una lista que sigue. Y no se inventa nada: son literalmente las filas de al lado, sin el dato de la derecha, que en 155 px no cabe. */ .switcher__movil .fila { padding: 9px 7px; gap: 7px; border-radius: 8px; } .switcher__movil .fila__avatar { width: 20px; height: 20px; flex: 0 0 20px; } .switcher__movil .fila__t { font-size: 11px; } .switcher__movil .fila__s { font-size: 9px; } /* La barra de inicio, la rayita de abajo de cualquier móvil. No dice nada -por eso el bloque va `aria-hidden`- pero es lo que hace que el marco se lea como un teléfono y no como un rectángulo estrecho. Y de paso ocupa el blanco que quedaba debajo de las filas. */ .switcher__movil-inicio { margin: auto auto 2px; width: 34%; height: 3px; border-radius: 2px; background: rgba(20, 20, 20, .22); } /* En una columna se va: a ese ancho la ventana ya es pequeña y ponerle otro aparato encima tapa justo lo que se quiere enseñar. Es la misma decisión que se tomó en el escaparate de arriba. */ @media (max-width: 700px) { .switcher__visual { margin-left: 0; } .switcher__visual > .tarjeta--cera { border-radius: var(--r-panel); } .switcher__movil { display: none; } } /* ══ LA PANTALLA DEL PRODUCTO ═════════════════════════════════════════════ Owner mete la captura en una caja de radio 32 (escritorio) o 112-128 (bisel de móvil). Aquí la UI está DIBUJADA en HTML, no es una imagen: cero peso en el repo y se puede corregir. La UI de dentro sigue la HIG de Apple (layout.md, lists-and-tables.md): filas de 44px de alto mínimo y texto de cuerpo a 17px equivalente. */ .pantalla { background: var(--papel); border-radius: var(--r-panel); padding: var(--e4); box-shadow: var(--sombra); } .pantalla__barra { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3) var(--e4); } .pantalla__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--linea); } .pantalla__titulo { margin-left: var(--e2); font-size: 13px; font-weight: 600; color: var(--tinta-70); } .movil { border-radius: 44px; background: var(--tinta); padding: 10px; width: 290px; box-shadow: var(--sombra); } .movil__cara { background: var(--papel); border-radius: 36px; overflow: hidden; padding: var(--e4) var(--e3); } .movil__muesca { width: 74px; height: 22px; border-radius: 999px; background: var(--tinta); margin: 0 auto var(--e3); } .fila { display: flex; align-items: center; gap: var(--e3); min-height: 44px; padding: var(--e2) var(--e3); border-radius: var(--e3); } .fila + .fila { box-shadow: inset 0 1px 0 var(--linea-suave); } .fila--marcada { background: var(--amarillo-pal); } .fila__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--papel-2); flex: 0 0 34px; box-shadow: inset 0 0 0 1px var(--linea); } .fila__cuerpo { flex: 1; min-width: 0; } .fila__t { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .fila__s { display: block; font-size: 13px; color: var(--tinta-70); margin-top: 2px; } .fila__d { font-size: 14px; font-weight: 600; } /* Barras de una gráfica, dibujadas. Máximo 4 series (regla de la casa). */ .barras { display: flex; align-items: flex-end; gap: 6px; height: 86px; } .barras span { flex: 1; background: var(--amarillo); border-radius: 4px 4px 2px 2px; } .barras span:nth-child(even) { background: var(--amarillo-pal); } /* ══ EL ACORDEÓN CON PANEL ════════════════════════════════════════════════ El patrón de Calendly: funciones a la izquierda separadas por líneas al 5%, y el panel de la derecha cambia con la que está abierta. */ .acordeon { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--e16); align-items: start; } @media (max-width: 900px) { .acordeon { grid-template-columns: 1fr; gap: var(--e8); } } .acordeon__item { padding: var(--e6) 0; box-shadow: inset 0 -1px 0 var(--linea); cursor: pointer; } .acordeon__item:first-child { box-shadow: inset 0 -1px 0 var(--linea), inset 0 1px 0 var(--linea); } .acordeon__cabeza { display: flex; align-items: center; gap: var(--e3); } /* h3 Y h4: la home pone las preguntas en h4 y precios en h3, y el nivel de un encabezado no se toca. La estética sí es la misma. */ .acordeon__cabeza h3, .acordeon__cabeza h4 { flex: 1; } .acordeon__cuerpo { display: none; margin-top: var(--e3); max-width: 46ch; } .acordeon__item[data-abierto] .acordeon__cuerpo { display: block; } .acordeon__item:not([data-abierto]) .acordeon__cabeza h3, .acordeon__item:not([data-abierto]) .acordeon__cabeza h4 { color: var(--tinta-40); } /* ══ LA PORTADA DE PRECIOS ═══════════════════════════════════════════════ Los tres remates que pidió Aitor el 2026-09-26: fuera la cejilla, el titular en dos líneas y la bajada en una. ⚠️ LAS DOS LÍNEAS DEL TITULAR NO LAS DA EL ANCHO. Las da `.malla--tenue h1 > .apagado { display: block }`, que ya estaba: el segundo tono ocupa su propia línea siempre, a cualquier anchura. Lo que hay que garantizar aquí es que CADA UNA quepa entera, y la larga es la de abajo: «para cada etapa de tu negocio» mide 14,88 em, MEDIDO en el navegador -a ojo le había echado 13,5 y se quedaba corto-. De ahí el `min`, que solo entra cuando la pantalla no da para el tamaño normal. Y la cabeza pasa de 780 a 1000 px de ancho: a 62 px esa línea mide 837 y en 780 no cabía. Antes se ensancha la caja que se encoge la letra. ⚠️ Y LA BAJADA PIERDE EL `max-width: 600px`. Con él no cabía en un renglón ni en un monitor: la frase mide 470 px y la caja eran 600, pero el corte caía antes. Sin tope va de una pieza donde quepa. */ .precios__titular { font-size: min(clamp(36px, 4.4vw, 62px), calc((100vw - 52px) / 14.88)); } .precios__bajada { max-width: none; margin-inline: auto; } /* ── El interruptor de periodo ─────────────────────────────────────────── El del código que pasó Aitor: etiqueta, interruptor, etiqueta, con el ahorro entre paréntesis. Sustituye a los dos botones. ⚠️ EL ESTADO SE PINTA DESDE `aria-checked`, no desde una clase. Así no hay dos verdades que puedan separarse: lo que ve quien mira y lo que oye quien escucha salen del mismo atributo. */ .periodo { display: inline-flex; align-items: center; gap: var(--e3); margin-top: var(--e8); } .periodo__eti { font-size: 15px; font-weight: 500; color: var(--tinta-70); } .periodo__eti--on { color: var(--tinta); font-weight: 600; } .periodo__nota { color: var(--tinta-40); font-weight: 500; } .periodo__eti--on .periodo__nota { color: var(--tinta-70); } .conmutador { flex: 0 0 auto; width: 46px; height: 26px; padding: 3px; border: 0; border-radius: 999px; background: var(--gris); cursor: pointer; /* Sin transición: esta página se mira, no se juega con ella, y Aitor lleva tres tandas quitando movimiento. */ } .conmutador__bola { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--papel-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .28); } .conmutador[aria-checked="true"] { background: var(--tinta); } .conmutador[aria-checked="true"] .conmutador__bola { margin-left: 20px; } .conmutador:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; } /* ── La fila de planes ─────────────────────────────────────────────────── Aitor, 2026-09-26: «quiero que el gratis sea algo más ancho que el plan pro y el pro+, y que los botones estén alineados». EL ANCHO es una columna de 1,22 contra dos de 1. `minmax(0, …)` y no `1,22fr` a secas: un `fr` no encoge por debajo de su contenido y es de donde salen los desbordes. ⚠️ LOS BOTONES NO SE ALINEAN A MANO, NI CON UN HUECO MEDIDO. Las seis filas las reparte ESTA rejilla y cada tarjeta se engancha a ellas con `grid-template-rows: subgrid`, así que la fila del botón empieza a la misma altura en las tres y mide lo mismo. Si mañana cambia un texto, la fila crece en las tres a la vez. Las seis filas son: cabecera · precio · chip e impuestos · botón · lista · pie. La quinta lleva `1fr` para que la lista estire y el pie quede abajo del todo. ⚠️ Y EL HUECO VA SOLO EN HORIZONTAL -`gap: 0 20px`-. Un `gap` a secas se lo come también la subrejilla y mete 20 px entre CADA fila de dentro de la tarjeta, que son 100 px de aire que nadie pidió. */ .planes { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto; gap: 0 20px; } .plan { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; } /* Apiladas, la subrejilla sobra: cada tarjeta vuelve a ser un bloque normal y los huecos vacíos se quedan a cero. */ @media (max-width: 900px) { .planes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 20px; } .plan { grid-row: auto; grid-template-rows: none; display: block; } } /* Al estrechar la tarjeta, la cejilla y su texto ya no caben en un renglón y «artificial» se quedaba colgando sola. En fila flexible el texto baja ENTERO debajo de la cejilla, que se lee mucho mejor que una palabra suelta. */ .plan__proximo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e4); } /* ── El filete de las tarjetas, con el corte de esquina ────────────────── Aitor, 2026-09-26: «que la tarjeta de gratis tenga un borde negro más grueso, y que las tarjetas tengan el borde derecho inferior como los botones». ⚠️ LAS DOS COSAS A LA VEZ NO SALEN CON UN BORDE NORMAL, y es la trampa de siempre: `clip-path` corta la caja pero NO repinta el borde en el corte, así que el filete se ve en las tres esquinas buenas y DESAPARECE justo en la diagonal. Con una línea al 8 % casi no se nota; con 3 px de negro canta. Se pinta con DOS CAPAS, igual que el botón de contorno: el fondo de la tarjeta ES el filete, y un `::before` metido hacia dentro pone el papel encima. Las dos llevan el corte, la de dentro con el bisel reducido. ⚠️ EL BISEL DE DENTRO NO ES EL DE FUERA MENOS EL GROSOR. La diagonal va a 45°, así que un filete de grosor g le come g·0,586 al bisel. Es la misma cuenta del botón. ⚠️ Y SIN `isolation: isolate` NO SE VE NADA: un `::before` con `z-index: -1` se va detrás del fondo de su propio elemento. El PRO+ no entra aquí: va en amarillo macizo y nunca tuvo filete. */ .plan--filete { --grosor: 1px; --filete: var(--linea); position: relative; isolation: isolate; box-shadow: none; background: var(--filete); } .plan--filete::before { content: ""; position: absolute; inset: var(--grosor); --bisel-int: calc(var(--bisel-tarjeta) - var(--grosor) * 0.586); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bisel-int)), calc(100% - var(--bisel-int)) 100%, 0 100%); background: var(--papel); border-radius: calc(var(--r-grande) - var(--grosor)); z-index: -1; } /* El Gratis, con marco: el mismo mecanismo con otros dos números. */ .plan--marco { --grosor: 3px; --filete: var(--tinta); } /* ── El plan destacado, en amarillo ────────────────────────────────────── Aitor, 2026-09-26: «el pro+ lo quiero resaltar en amarillo como el botón». Antes era la tarjeta negra. ⚠️ SOBRE AMARILLO CAMBIA TODO LO QUE ERA CLARO. La tarjeta negra tenía seis cosas en blanco o en amarillo -tinta, apagados, importe, chips, checks y el filete-; aquí las seis vuelven a tinta. Van en la clase y no en estilos en línea justamente por eso: repetidas a mano se despista una y se queda ilegible sin que nadie lo vea. Los apagados pasan de `--tinta-70` a negro al 68 %: sobre el amarillo ese gris da 3,5:1 y no llega al listón de 4,5 para texto pequeño. */ .plan-destacado { background: var(--amarillo); color: var(--tinta); box-shadow: none; } .plan-destacado .menudo, .plan-destacado .precio__u { color: rgba(20, 20, 20, .68); } .plan-destacado .chip { background: var(--papel-2); } .plan-destacado .lista-si li::before { color: var(--tinta); } /* ══ TABLA DE PRECIOS ═════════════════════════════════════════════════════ */ .precio { display: flex; align-items: baseline; gap: 6px; margin: var(--e4) 0 var(--e2); } .precio__n { font-size: 52px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .precio__u { font-size: 15px; color: var(--tinta-70); } .lista-si { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; gap: var(--e3); } .lista-si li { display: flex; gap: var(--e3); font-size: 15px; line-height: 1.35; } .lista-si li::before { content: "✓"; font-weight: 700; color: var(--tinta); flex: 0 0 auto; } .tarjeta--negra .lista-si li::before, .tarjeta--negra .lista-si li { color: var(--papel); } .lista-no li::before { content: "—"; color: var(--tinta-40); } .lista-no li { color: var(--tinta-40); } /* El interruptor de dos modelos */ .interruptor { display: inline-flex; padding: var(--e1); border-radius: var(--r-boton); background: rgba(20,20,20,.05); } .interruptor button { height: 40px; padding: 0 var(--e4); border: 0; border-radius: var(--e3); background: transparent; font: 600 14px/1 var(--tipo); letter-spacing: -0.02em; color: var(--tinta-70); cursor: pointer; } .interruptor button[aria-selected="true"] { background: var(--tinta); color: var(--papel); } /* ══ LA TABLA COMPARATIVA DE PLANES ══════════════════════════════════════ La de la referencia que pasó Aitor el 2026-09-26: filas por funcionalidad, una columna por plan y la primera resaltada. ⚠️ LA COLUMNA RESALTADA ES LA PRIMERA, no la del medio. En la referencia el gris marca «el más elegido»; aquí marca el plan gratis, que es la puerta de entrada. Y por eso la cejilla dice lo que dice. */ /* ⚠️ «TODOS LOS PLANES INCLUYEN», EN UNA SOLA LÍNEA. Aitor, 2026-09-26. El texto mide 12,7 em -medido en el navegador, no estimado-, así que el techo del tamaño es el ancho de la caja partido por 12,8. La caja es la menor de dos: los 780 px de `hoja__cabeza--centro` o la pantalla menos sus 48 px de margen. ⚠️ Y LLEVA `nowrap` porque el cálculo solo evita el corte si el navegador no decide partir igualmente por `text-wrap: balance`. */ .incluye__titular { font-size: min(clamp(34px, 4.6vw, 62px), calc(min(780px, 100vw - 48px) / 12.8)); white-space: nowrap; text-wrap: nowrap; } .comparativa { position: relative; margin-top: var(--e12); } /* ⚠️ LAS PESTAÑAS SON SOLO DE MÓVIL. Aitor, 2026-09-26: «en móvil tenemos que buscar una manera más creativa». Arriba de 700 px no existen; abajo son las que eligen qué columna se ve, y por eso la tabla deja de rodar. Interruptor de tres, como el de ajustes del teléfono: la elegida es la que sube en blanco, no la que se pinta de negro. */ .comparativa__pestanas { display: none; } .comparativa__pestana { border: 0; background: none; cursor: pointer; padding: 10px 6px; border-radius: 999px; font: 600 15px/1 var(--tipo); letter-spacing: -.01em; color: var(--tinta-70); } .comparativa__pestana[aria-pressed="true"] { background: var(--papel-2); color: var(--tinta); box-shadow: 0 1px 3px rgba(20, 20, 20, .14); } .comparativa__pestana:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; } /* EL MARCO. Filete de 1 px y la esquina de abajo a la derecha cortada, como las tarjetas de plan y los botones. ⚠️ SON DOS CAPAS Y NO UN BORDE: `clip-path` corta la caja pero no repinta el borde en el corte, así que un `border` o un `box-shadow: inset` dejan el bisel pelado. El filete es el FONDO de este div y la caja se mete un píxel hacia dentro con el relleno. */ .comparativa__marco { --grosor: 1px; padding: var(--grosor); background: rgba(20, 20, 20, .12); border-radius: var(--r-grande); } /* ⚠️ RUEDA DE LADO EN ESCRITORIO Y TABLETA cuando las cuatro columnas no caben: encogerlas deja las palabras partidas letra a letra. Lleva `tabindex` porque una zona que rueda tiene que poder recorrerse con el teclado, no solo con el dedo. En móvil ya no rueda: mandan las pestañas. */ .comparativa__caja { overflow-x: auto; background: var(--papel-2); border-radius: calc(var(--r-grande) - 1px); /* El bisel de dentro es el de fuera menos el grosor por 0,586: es lo que mide el corte a 45° de un filete de 1 px. */ --bisel-int: calc(var(--bisel-tarjeta) - 1px * 0.586); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bisel-int)), calc(100% - var(--bisel-int)) 100%, 0 100%); } .comparativa__caja:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; } /* ⚠️ `separate` Y NO `collapse`: con los bordes colapsados una celda no puede tener esquinas redondeadas, y el sombrero de la columna destacada las necesita. Con `border-spacing: 0` se ve igual de continua. */ .comparativa__tabla { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; text-align: center; font-size: 15px; } .comparativa__tabla th, .comparativa__tabla td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea-suave); font-weight: 400; } /* Los separadores entre planes. Se cortan en las bandas de grupo, que son una sola celda de cuatro: ahí la banda hace de separador. */ .comparativa__tabla tr:not(.comparativa__grupo) > :nth-child(3), .comparativa__tabla tr:not(.comparativa__grupo) > :nth-child(4) { border-left: 1px solid var(--linea-suave); } /* La columna de nombres: a la izquierda y PEGADA, para saber siempre de qué fila se trata mientras la tabla rueda. */ .comparativa__tabla tbody th[scope="row"], .comparativa__eti { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 500; /* El mismo blanco que la caja: si no, al rodar se ve la columna pegada de otro color sobre las filas. */ background: var(--papel-2); min-width: 190px; } .comparativa__eti { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-70); vertical-align: bottom; } .comparativa__plan { padding-top: var(--e6); display: table-cell; min-width: 164px; } .comparativa__nombre, .comparativa__precio, .comparativa__nota { display: block; } /* ⚠️ EL NOMBRE MANDA SOBRE EL PRECIO, y antes era al revés. Aitor, 2026-09-26: «que los nombres de los planes se vean más grandes». El precio baja a 17 para que no compitan. */ .comparativa__nombre { font-size: 21px; font-weight: 700; letter-spacing: -.025em; } .comparativa__precio { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; } .comparativa__nota { font-size: 13px; color: var(--tinta-70); margin-top: 2px; } /* La columna resaltada, de arriba abajo. Se elige por `nth-child(2)` y no con una clase por celda: son veinte celdas y una clase repetida veinte veces se despista. ⚠️ LA RESALTADA VA EN GRIS Y EL RESTO EN BLANCO, no al revés. Al principio lo tenía cambiado -tabla en papel, columna en blanco- y la columna se leía como un hueco en vez de como la elegida. */ .comparativa__tabla thead th:nth-child(2), .comparativa__tabla tbody td:nth-child(2), .comparativa__tabla tfoot td:nth-child(2) { background: color-mix(in srgb, var(--gris) 24%, #fff); } /* ⚠️ LA COLUMNA SE MARCA CON EL GRIS Y NADA MÁS. Aitor, 2026-09-26: «quita esto de la sección de precios, que quede gris solo». Antes llevaba un sombrero negro de 3 px, y antes de eso la cejilla. Las dos sobraban: el gris ya la separa de las otras dos, y lo negro pesaba demasiado para lo que es -la puerta de entrada, no el plan que empujamos. ⚠️ Y SIN ESQUINAS REDONDEADAS. Aitor, 2026-09-26: «quita los bordes redondeados». La banda de gris va de canto a canto de la tabla, como una columna y no como una tarjeta metida dentro de otra. */ /* Las cabeceras de grupo: Entreno, Nutrición, Gestión, Finanzas, IA. */ .comparativa__grupo th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-70); background: color-mix(in srgb, var(--gris) 28%, #fff); padding-top: var(--e2); padding-bottom: var(--e2); } /* ⚠️ La fila de grupo NO lleva la columna pegada: es una sola celda que ocupa las cuatro, y dejándola pegada se quedaba a la izquierda y el resto de la banda se veía en blanco al rodar. */ .comparativa__grupo th { position: static; } /* El ✓ y el ✗. Cuadrado negro el que está, aspa pálida el que no: es lo que hace que la columna se lea de un vistazo sin ir leyendo. */ .marca { display: inline-block; width: 22px; height: 22px; border-radius: 6px; position: relative; } .marca--si { background: var(--tinta); } .marca--si::before { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--papel); border-width: 0 2px 2px 0; transform: rotate(45deg); } .marca--no { background: rgba(20,20,20,.04); } .marca--no::before, .marca--no::after { content: ""; position: absolute; left: 10px; top: 5px; width: 2px; height: 12px; background: var(--tinta-40); } .marca--no::before { transform: rotate(45deg); } .marca--no::after { transform: rotate(-45deg); } .comparativa__tabla tfoot td { padding-top: var(--e6); padding-bottom: var(--e6); border-bottom: 0; } .comparativa__tabla tfoot .btn { width: 100%; justify-content: center; } @media (max-width: 700px) { .comparativa__pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: var(--e4); background: color-mix(in srgb, var(--gris) 42%, #fff); border-radius: 999px; } /* Con dos columnas ya no hace falta rodar, pero `overflow-x: auto` se queda de red: si un día una fila trae un nombre largo, rueda la caja y no desborda la página. */ .comparativa__tabla { min-width: 0; font-size: 15px; } .comparativa__tabla tbody th[scope="row"], .comparativa__eti { position: static; min-width: 0; } .comparativa__tabla th, .comparativa__tabla td { padding: var(--e3); } .comparativa__plan { min-width: 0; } /* Las dos columnas que no toca, fuera. `display: none` y no `visibility`: una celda invisible sigue ocupando su ancho. */ .comparativa[data-plan="2"] .comparativa__tabla tr > :nth-child(3), .comparativa[data-plan="2"] .comparativa__tabla tr > :nth-child(4), .comparativa[data-plan="3"] .comparativa__tabla tr > :nth-child(2), .comparativa[data-plan="3"] .comparativa__tabla tr > :nth-child(4), .comparativa[data-plan="4"] .comparativa__tabla tr > :nth-child(2), .comparativa[data-plan="4"] .comparativa__tabla tr > :nth-child(3) { display: none; } /* ⚠️ EL BOTÓN DE ABAJO, A TODO LO ANCHO. Con la tabla en dos columnas se quedaba en la mitad derecha y la izquierda vacía. `colspan` no se puede cambiar desde CSS, y `display: block` a secas no vale: el navegador mete el pie en una celda anónima del ancho de la PRIMERA columna -medido, 215 de 340. `table-caption` con `caption-side: bottom` sí ocupa el ancho de la tabla, y dentro el botón se estira. Va DESPUÉS de las columnas ocultas porque si no, este `display: block` les ganaría por orden de fichero. */ .comparativa__tabla tfoot { display: table-caption; caption-side: bottom; } .comparativa__tabla tfoot tr, .comparativa__tabla tfoot td { display: block; } .comparativa__tabla tfoot tr > :first-child { display: none; } .comparativa[data-plan="2"] .comparativa__tabla tfoot tr > :nth-child(3), .comparativa[data-plan="2"] .comparativa__tabla tfoot tr > :nth-child(4), .comparativa[data-plan="3"] .comparativa__tabla tfoot tr > :nth-child(2), .comparativa[data-plan="3"] .comparativa__tabla tfoot tr > :nth-child(4), .comparativa[data-plan="4"] .comparativa__tabla tfoot tr > :nth-child(2), .comparativa[data-plan="4"] .comparativa__tabla tfoot tr > :nth-child(3) { display: none; } } /* A 900 px las cuatro columnas caben justas: con 164 se pasaban 3 px y la caja pedía rodar sin necesidad. */ @media (max-width: 900px) and (min-width: 701px) { .comparativa__plan { min-width: 148px; } .comparativa__tabla tbody th[scope="row"], .comparativa__eti { min-width: 168px; } } /* Los teléfonos estrechos. Sin esto la tabla pide 333 px en una pantalla de 320 y desborda la página entera. */ @media (max-width: 420px) { .comparativa__tabla { font-size: 14px; } .comparativa__tabla th, .comparativa__tabla td { padding: var(--e3) var(--e2); } .comparativa__nombre { font-size: 19px; } .comparativa__precio { font-size: 16px; } .comparativa__pestana { font-size: 14px; padding: 9px 4px; } /* A 320 px «Hasta 100 clientes» y «Próximamente» eran los dos renglones que pedían 22 px de más y hacían rodar la caja. */ .comparativa__nota { font-size: 12px; } .comparativa__tabla .chip { font-size: 11px; letter-spacing: 0; padding: 4px 8px; } } /* ══ CONTRATAR ═════════════════════════════════════════════════ Aitor, 2026-09-26: «me gustaría que la página de contratar tenga también la estética parecida a la página de pricing, y que esté bien hecha y cuadrada para móvil y tablet». ⚠️ TODO ESTO VIVÍA EN `style=` DENTRO DEL HTML, y ese era el fallo: un estilo en línea le gana a la media query, así que a 320 px la página seguía pidiendo dos columnas de 89 y 134 px y desbordaba 142. Medido. */ /* La portada de la página. El relleno de arriba vivía en un `style` en el HTML; baja aquí para poder encogerlo en móvil, donde 96 px es casi un tercio de pantalla en blanco. */ .contratar__portada { padding-top: clamp(64px, 7vw, 96px); } .contratar__titular { /* 29,5 em en una línea -medido-. Por debajo de eso se parte en dos, que es lo correcto: es un título largo y no una etiqueta. */ font-size: clamp(30px, 3.6vw, 48px); /* ⚠️ CENTRADO Y CON AIRE. Aitor, 2026-09-26: «revisa el espacio del título, está muy pegado, debería ir centrado también». Antes iba a la izquierda y la reja empezaba 40 px más abajo. */ text-align: center; max-width: 18ch; margin-inline: auto; text-wrap: balance; } @media (min-width: 701px) { .contratar__titular { max-width: none; } } .contratar__reja { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--e12); align-items: start; margin-top: clamp(32px, 4.4vw, 64px); } /* ⚠️ A UNA COLUMNA EN TABLETA, no solo en móvil. A 834 px las dos columnas dejaban las tarjetas de plan tan estrechas que «Hasta 30 clientes activos» salía en tres renglones. */ @media (max-width: 900px) { .contratar__reja { grid-template-columns: minmax(0, 1fr); gap: var(--e8); } } .contratar__resumen { padding: var(--e8); } /* ⚠️ EL RESUMEN SE QUEDA PEGADO SOLO CUANDO HAY DOS COLUMNAS. Apilado, un `sticky` lo deja clavado y el formulario le pasa POR ENCIMA al bajar: se comía las dos últimas líneas del resumen. Aitor lo vio el 2026-09-26. ⚠️ Y VA EN `min-width` Y NO EN UN `static` DENTRO DE LA MEDIA QUERY DE ARRIBA, que fue el primer intento y no hizo nada: la regla base se escribe después en el fichero y le gana por orden. Mismo fallo que ya pasó con el titular del switcher de la home. */ @media (min-width: 901px) { .contratar__resumen { position: sticky; top: 112px; } } .formulario { padding: clamp(24px, 3vw, 40px); } .contratar__periodo { margin-top: var(--e4); } .contratar__planes { display: grid; gap: 10px; margin-top: var(--e5, 20px); } /* La tarjeta de plan. Filete de 1 px y esquina cortada, como en precios. `all: unset` no vale aquí: se llevaba por delante el `box-sizing` y el `cursor`, que había que devolver uno a uno. */ .contratar__plan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; margin: 0; padding: 18px 20px; border: 0; border-radius: var(--r-grande); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease; /* ⚠️ EL FILETE LO PONE `plan--filete` Y NO UN `box-shadow: inset`. Con el bisel, un inset deja el corte pelado: `clip-path` recorta la caja pero no repinta el borde en la diagonal. La receta son dos capas: el fondo es el filete y el `::before` mete el papel un píxel hacia dentro. */ --filete: rgba(20, 20, 20, .12); } .contratar__plan:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; } /* ⚠️ EL ELEGIDO, EN AMARILLO PLENO, como el PRO+ de la tabla de precios. Antes era amarillo pálido con un filete amarillo, y no se leía como «elegido» sino como «resaltado». Negro sobre amarillo: 14,49:1. */ .contratar__plan--on { --filete: var(--amarillo); } .contratar__plan--on::before { background: var(--amarillo); } .contratar__plan--on .menudo { color: rgba(20, 20, 20, .68); } .contratar__marca { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--linea); display: grid; place-items: center; } .contratar__plan--on .contratar__marca { box-shadow: inset 0 0 0 6px var(--tinta); } .contratar__plan-texto { display: block; min-width: 0; } .contratar__plan-nombre { display: block; font-weight: 600; font-size: 17px; letter-spacing: -.02em; } .contratar__plan-limite { display: block; margin-top: 2px; } .contratar__plan-precio { display: block; text-align: right; } .contratar__plan-cifra { font-weight: 700; font-size: 22px; letter-spacing: -.02em; } .contratar__plan-precio .menudo { display: block; } .contratar__desglose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: var(--e6) 0 0; padding-top: var(--e5, 20px); box-shadow: inset 0 1px 0 var(--linea); } .contratar__desglose dd { margin: 0; } .contratar__total { font-weight: 600; } .contratar__nota { margin: var(--e5, 20px) 0 0; } .contratar__nota + .contratar__nota { margin-top: 8px; } /* ⚠️ SIN `margin-top`: va dentro de `.formulario__campos`, que es una rejilla con su propio hueco. El margen se SUMABA al hueco y dejaba 44 px donde el resto lleva 20. */ /* ── GOOGLE Y APPLE ── Aitor, 2026-09-26: «no se ven bien, no necesitan tener el efecto al pasar el cursor». ⚠️ NO SON BOTONES DE TRAINBEE Y POR ESO SALEN DEL SISTEMA `.btn`: ni el bisel, ni las mayusculas con tracking, ni el vuelco de color al pasar el raton. Google y Apple tienen guia de marca para los suyos y lo que piden es justo lo contrario: caja sobria, texto normal y su logotipo. ⚠️ Y ADEMAS EL BISEL LOS ROMPIA: el de Google llevaba el filete con un `box-shadow: inset`, que `clip-path` corta sin repintar, y la esquina de abajo a la derecha quedaba abierta. */ .formulario__social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .formulario__social .btn { clip-path: none; height: 48px; width: 100%; padding: 0 var(--e4); gap: 10px; justify-content: center; border-radius: var(--r-boton); font: 500 15px/1 var(--tipo); letter-spacing: 0; text-transform: none; transition: none; } .formulario__social .btn::before { display: none; } .formulario__social .btn:hover { background: inherit; color: inherit; } .formulario__social .btn:active { transform: none; } .formulario__social .btn svg { flex: 0 0 auto; } .formulario__social .btn--blanco { background: var(--papel-2); color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .18); } .formulario__social .btn--blanco:hover { background: var(--papel-2); color: var(--tinta); } .formulario__social .btn--negro { background: var(--tinta); color: var(--papel); box-shadow: none; } .formulario__social .btn--negro:hover { background: var(--tinta); color: var(--papel); } .formulario__social .btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; } /* ⚠️ UN `select` NO ENCOGE POR DEBAJO DE SU OPCIÓN MÁS LARGA, y «Running, Hyrox y atletas híbridos» pide 311 px. Dentro de `.campo`, que es una rejilla, ese min-content se convierte en el ancho de la columna y empuja el formulario entero: a 320 px desbordaba 39. `1fr` no encoge por debajo de su contenido; `minmax(0, 1fr)` sí. ⚠️ VA CON EL ALCANCE DE ESTA PÁGINA y no en `.campo` a secas, aunque el mismo fallo esté en `alta` y en `contacto`: esas dos no se han pedido. */ .formulario .campo { grid-template-columns: minmax(0, 1fr); } .formulario select, .formulario input, .formulario textarea { max-width: 100%; } /* Un `fieldset` trae borde y relleno del navegador. Antes se le quitaban con un `style` en cada uno de los cuatro. */ .formulario fieldset { border: 0; padding: 0; margin: 0; } /* ── VER LOS CUATRO PASOS DEL TIRÓN ── `contratar.html?pasos=todos`. Aitor, 2026-09-26: «si me puedes enseñar cómo quedarían todos los pasos del relleno de datos para no tener que acceder con una cuenta de prueba». ⚠️ ES UNA VISTA DE REVISIÓN, NO UNA PANTALLA DEL PRODUCTO. Sin el parámetro la página se comporta igual que siempre, de uno en uno. */ /* ── `?pasos=todos` · LOS CUATRO PASOS APILADOS ─────────────────── Cuatro tarjetas de verdad, una por paso, con la forma final. Lo único que hace falta es el hueco entre ellas. */ .contratar__pila { display: grid; gap: clamp(32px, 4vw, 56px); } /* ── LOS CONTROLES ── Aitor, 2026-09-26: «que las barras y las casillas seleccionables estén más suavizadas y que se vean más pulidas, también los selectores». Todos van a medida: el nativo cambia de forma en cada sistema y no hay manera de que case con el resto de la página. ⚠️ DE MOMENTO SOLO EN CONTRATAR. `alta` y `contacto` llevan los mismos controles y se quedan con los del navegador hasta que se pida. */ /* Los campos de texto y los desplegables. Filete algo más presente que el `--linea` de las tarjetas -aquí hay que ver dónde se escribe- y al enfocar un aro suave en vez del salto seco de 1 a 2 píxeles de negro. */ .formulario .campo input:not([type="range"]), .formulario .campo select, .formulario .campo textarea { box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .14); transition: box-shadow .15s ease, background-color .15s ease; } .formulario .campo input:not([type="range"]):hover, .formulario .campo select:hover, .formulario .campo textarea:hover { box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .26); } .formulario .campo input:not([type="range"]):focus, .formulario .campo select:focus, .formulario .campo textarea:focus { box-shadow: inset 0 0 0 1.5px var(--tinta), 0 0 0 4px rgba(20, 20, 20, .08); background: var(--papel-2); } .formulario ::placeholder { color: var(--tinta-40); } /* EL DESPLEGABLE. La flecha del sistema es de otra tipografía y de otro tamaño en cada navegador; esta es la misma en todos. */ .formulario .campo select { appearance: none; -webkit-appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23141414' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px; cursor: pointer; } /* ── EL DESPLEGABLE PROPIO ── La caja se puede vestir, pero la lista que se abre la pinta el sistema operativo y no hay CSS que la alcance. Este es nuestro, y solo aparece con puntero fino: en un teléfono el nativo es la rueda del sistema, que se maneja mejor con el pulgar. */ .selector { position: relative; } /* El `select` de verdad se queda debajo, invisible pero enfocable: es el que guarda el valor y el que enseña el globo de «rellena este campo». */ .formulario .campo .selector__nativo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .selector__boton { display: flex; align-items: center; width: 100%; height: 48px; padding: 0 46px 0 var(--e4); border: 0; border-radius: var(--r-boton); background: var(--papel); box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .14); font: 400 16px/1 var(--tipo); color: var(--tinta); text-align: left; cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23141414' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px; } .selector__boton:hover { box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .26); } .selector__boton:focus-visible, .selector[data-abierto] .selector__boton { outline: 0; box-shadow: inset 0 0 0 1.5px var(--tinta), 0 0 0 4px rgba(20, 20, 20, .08); background-color: var(--papel-2); } .selector--vacio .selector__valor { color: var(--tinta-40); } .selector__valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .selector__lista { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 264px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: var(--r-grande); background: var(--papel-2); box-shadow: 0 1px 2px rgba(20, 20, 20, .08), 0 12px 32px rgba(20, 20, 20, .16), inset 0 0 0 1px rgba(20, 20, 20, .1); } .selector[data-abierto] .selector__lista { display: block; } /* Mientras esta abierta cuelga del `body`, asi que ya no es descendiente de `.selector[data-abierto]` y necesita su propia clase. */ .selector__lista--suelta { display: block; position: fixed; } .selector__opcion { padding: 11px var(--e3); border-radius: 9px; font-size: 15px; color: var(--tinta); cursor: pointer; } .selector__opcion:hover { background: color-mix(in srgb, var(--gris) 34%, #fff); } .selector__opcion[aria-selected="true"] { background: var(--tinta); color: var(--papel); font-weight: 600; } /* El texto guía -«Elige una opción»- no es una opción: no se puede elegir. */ .selector__opcion[aria-disabled="true"] { display: none; } /* LAS CASILLAS Y LOS REDONDELES. `accent-color` solo cambia el color: la forma, el tamaño y el aro de foco los seguía poniendo el sistema. */ .formulario input[type="checkbox"], .formulario input[type="radio"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 7px; background: var(--papel-2); box-shadow: inset 0 0 0 1.5px rgba(20, 20, 20, .22); display: grid; place-items: center; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; } .formulario input[type="radio"] { border-radius: 50%; } .formulario input[type="checkbox"]:hover, .formulario input[type="radio"]:hover { box-shadow: inset 0 0 0 1.5px rgba(20, 20, 20, .4); } .formulario input[type="checkbox"]:checked, .formulario input[type="radio"]:checked { background: var(--tinta); box-shadow: none; } .formulario input[type="checkbox"]:focus-visible, .formulario input[type="radio"]:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--tinta), 0 0 0 4px rgba(20, 20, 20, .14); } .formulario input[type="checkbox"]:checked:focus-visible, .formulario input[type="radio"]:checked:focus-visible { box-shadow: 0 0 0 4px rgba(20, 20, 20, .14); } /* La marca de dentro crece en vez de aparecer de golpe. */ .formulario input[type="checkbox"]::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid var(--papel); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .14s ease; } .formulario input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); } .formulario input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--papel); transform: scale(0); transition: transform .14s ease; } .formulario input[type="radio"]:checked::after { transform: scale(1); } /* LA BARRA DE CLIENTES. `--relleno` lo pone el JS: es el único dato que el CSS no puede saber, porque la barra va en curva. */ /* ⚠️ CON `.formulario` DELANTE, o no gana. `.campo input` es una clase más un tipo y pesa más que `.formulario__barra` a secas: le colaba los 48 px de alto, el relleno y el filete de un campo de texto, y la barra salía metida en una caja. */ .formulario .formulario__barra { appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 0; height: 24px; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; cursor: pointer; } .formulario .formulario__barra::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(var(--amarillo), var(--amarillo)) 0 0 / var(--relleno, 0%) 100% no-repeat, color-mix(in srgb, var(--gris) 72%, #fff); } .formulario .formulario__barra::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: var(--papel-2); box-shadow: 0 1px 4px rgba(20, 20, 20, .3), inset 0 0 0 1px rgba(20, 20, 20, .12); transition: transform .12s ease; } .formulario .formulario__barra:active::-webkit-slider-thumb { transform: scale(1.08); } .formulario .formulario__barra::-moz-range-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--gris) 72%, #fff); } .formulario .formulario__barra::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--amarillo); } .formulario .formulario__barra::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--papel-2); box-shadow: 0 1px 4px rgba(20, 20, 20, .3), inset 0 0 0 1px rgba(20, 20, 20, .12); } /* ⚠️ EL ARO VA EN EL PULGAR, NO EN LA BARRA. Con `outline` sobre la barra salian DOS cercos negros: el mio y el `box-shadow: inset` que le pone `.campo input:focus`, que es global y tambien alcanza al `range`. Aitor lo vio el 2026-09-26. Se apagan los dos y se marca solo el pulgar. */ .formulario .formulario__barra:focus { outline: 0; box-shadow: none; } .formulario .formulario__barra:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(20, 20, 20, .3), 0 0 0 4px rgba(20, 20, 20, .2); } .formulario .formulario__barra:focus-visible::-moz-range-thumb { box-shadow: 0 1px 4px rgba(20, 20, 20, .3), 0 0 0 4px rgba(20, 20, 20, .2); } /* LAS PASTILLAS DE «FACTURAS COMO». Una etiqueta entera que se pulsa, no un redondel con texto al lado. */ .formulario__opciones { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .formulario__opcion { height: 44px; padding: 0 var(--e4); gap: 10px; border-radius: 999px; background: var(--papel-2); box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .14); font-size: 15px; cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease; } .formulario__opcion:hover { box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .3); } .formulario__opcion:has(input:checked) { background: var(--papel); box-shadow: inset 0 0 0 2px var(--tinta); font-weight: 600; } /* ── LOS MÁRGENES ── Un solo ritmo, y antes eran cinco números sueltos en `style=`: 24 arriba del grupo, 20 entre campos, 16 en las parejas, 4 y 12 en los botones. Ahora sale todo de la misma escala. */ .formulario__titulo { font: 600 24px/1.2 var(--tipo); letter-spacing: -.02em; margin: 0; } .formulario__paso { margin: 6px 0 0; } .formulario__progreso { height: 6px; margin-top: var(--e4); border-radius: 999px; background: color-mix(in srgb, var(--gris) 60%, #fff); overflow: hidden; } .formulario__progreso-relleno { height: 100%; border-radius: 999px; background: var(--amarillo); transition: width .3s ease; } .formulario__campos { display: grid; gap: var(--e5, 20px); margin-top: var(--e6); } .formulario__par { gap: var(--e4); } .formulario__acciones { display: flex; gap: 12px; margin-top: 8px; } .formulario__acepto { padding-left: 0; align-items: flex-start; gap: 12px; } .formulario__ayuda { margin: 0 0 8px; } .formulario__pie-nota { margin: 0; text-align: center; } .formulario__enviar { width: 100%; justify-content: center; } /* Las filas con casilla que no van dentro de un `.campo`: el `.fila` normal lleva sangría a la izquierda y aquí la casilla ya hace ese trabajo. */ .formulario__fila { padding-left: 0; } /* La pastilla pequeña, para los grupos de cinco o seis de `alta`: a 44 px no caben en una pantalla de teléfono ni partiendo en dos filas. */ .formulario__opcion--peq { height: 38px; padding: 0 14px; gap: 8px; font-size: 14px; } .formulario__rango { display: flex; align-items: center; gap: var(--e4); } .formulario__rango-num { width: 96px; text-align: center; flex: 0 0 auto; } .formulario__linea { display: flex; gap: 10px; align-items: center; } .formulario__codigo { width: 148px; letter-spacing: .3em; text-align: center; } /* El separador pide un poco más de aire que un campo: 4 px arriba y abajo sobre los 20 de la rejilla, o sea 24. */ .formulario__o { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--tinta-70); font-size: 13px; } .formulario__o > span { flex: 1; height: 1px; background: var(--linea); } /* En un teléfono, «Atrás» y el botón largo no caben en fila con holgura. */ @media (max-width: 430px) { .formulario__rango { gap: var(--e3); } .formulario__rango-num { width: 76px; } } /* ── MÓVIL ── Nada de esto es por el desborde, que ya está resuelto: es por cuadrarlo. A 390 px «Anual (2 meses gratis)» y «Hasta 30 clientes activos» se partían en dos y tres renglones y descuadraban las dos piezas. */ @media (max-width: 560px) { /* EL INTERRUPTOR. De `inline-flex` a `flex` a todo lo ancho, para que la etiqueta de la derecha se lleve el resto y la nota quepa debajo. */ .contratar__periodo { display: flex; width: 100%; gap: 10px; } .contratar__periodo .periodo__eti { font-size: 14px; } .contratar__periodo [data-r-periodo-eti="ano"] { flex: 1 1 auto; min-width: 0; } .contratar__periodo .periodo__nota { display: block; font-size: 12px; } /* LA TARJETA DE PLAN. El precio baja a su propia línea en vez de pelearse con el nombre por el ancho, y con eso el límite de clientes cabe en un renglón. */ .contratar__plan { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; } .contratar__plan-precio { grid-column: 2; text-align: left; } .contratar__plan-precio .menudo { display: inline; } .contratar__plan-cifra { font-size: 19px; } } /* Los teléfonos estrechos. Con 20 px de relleno a cada lado no quedaba sitio. */ @media (max-width: 430px) { .contratar__resumen { padding: var(--e6); } .contratar__plan { padding: 16px; gap: 12px; } /* Una sola columna para Google y Apple: en fila no caben con su icono. */ .formulario__social { grid-template-columns: minmax(0, 1fr); } } /* A 360 px quedaban los dos últimos partos: «(2 meses gratis)» en dos renglones y «Hasta 100 clientes activos» también. Son los tamaños justos para que las dos frases quepan de una pieza —medidos, no estimados. */ @media (max-width: 380px) { .contratar__resumen { padding: var(--e5, 20px); } .contratar__periodo { gap: 8px; } .contratar__periodo .periodo__eti { font-size: 13px; } .contratar__periodo .periodo__nota { font-size: 11px; } .contratar__plan { padding: 14px; } .contratar__plan-nombre { font-size: 16px; } .contratar__plan-limite { font-size: 13px; letter-spacing: -.01em; } } /* ══ PROBAR GRATIS · LA PORTADA ═══════════════════════════════ Las mismas piezas que `descarga-app` de la home, pero apiladas: aquí la portada es media pantalla y el texto al lado de los móviles no cabe. */ .alta__hoja { padding-top: clamp(64px, 7vw, 96px); } /* `stretch` y no `start`: Aitor quiere la tarjeta amarilla del mismo alto que el formulario en escritorio. Medía 591 contra 621. */ .alta__reja { gap: clamp(32px, 4vw, 64px); align-items: stretch; } .alta__portada { position: relative; overflow: hidden; /* ⚠️ LA FILA DE LOS APARATOS ES `1fr` Y EL ABANICO VA A `end`. La tarjeta se estira a la altura del formulario de al lado, así que con `align-content: start` el abanico se quedaba flotando a media altura con un palmo de amarillo debajo, y el margen negativo no cortaba nada. Pegado al fondo, el corte vuelve a ser el borde de la tarjeta. Medido a 1440: se veían 349 px de teléfono de los 180 previstos. */ display: grid; grid-template-rows: auto 1fr; gap: clamp(18px, 2.2vw, 28px); padding: clamp(28px, 3vw, 44px); /* Sin relleno abajo: los móviles se cortan contra el borde, como en la home. Es lo que dice «hay más» sin escribirlo. */ padding-bottom: 0; } .alta__texto { display: grid; gap: clamp(18px, 2.2vw, 28px); } /* ⚠️ EL TITULAR BAJA DE TAMAÑO porque ahora vive dentro de una tarjeta de media pantalla, no a lo ancho. El texto y el nivel no se tocan. */ .alta__titular { margin: 0; font-size: clamp(28px, 2.5vw, 42px); } /* ⚠️ CON `.alta__portada` DELANTE, o no gana. `.descarga__tiendas` las pone en columna y se escribe DESPUÉS en este fichero: con una sola clase pierde por orden y las insignias seguían apiladas a todo lo ancho. Tercera vez que pica el orden de fichero. */ .alta__portada .descarga__tiendas { flex-direction: row; flex-wrap: wrap; gap: 12px; } .alta__titular { text-wrap: balance; } /* ⚠️ DOS LÍNEAS EN ESCRITORIO, Y EL TOPE SE MIDE CONTRA LA CAJA, NO CONTRA LA VENTANA. Con `vw` no hay número que valga: `.caja` tiene tope de ancho, así que pasados los ~1500 la letra seguía creciendo cuando la columna ya no, y el titular se iba a tres líneas otra vez. Medido con tres clamps distintos: los tres fallaban, unos por abajo y otros por arriba. `cqw` lo resuelve porque mide el ancho de ESTA caja. La frase entera son 27,6 em, así que partida en dos la línea larga ronda 13,5; con el tope en 7,2 % del ancho quedan 13,9 em por línea y siempre caben dos. El contenedor es `.alta__texto` y no `.alta__portada`: `container-type` impone contención, y la portada lleva la fila `1fr` que empuja el abanico al fondo. En un div normal no hay nada que contener. Y solo de 901 para arriba, que es donde la reja va en dos columnas: por debajo la caja mide 286 px y el tope dejaría el h1 en 20 px. */ @media (min-width: 1101px) { .alta__texto { container-type: inline-size; } .alta__titular { font-size: min(clamp(26px, 2.5vw, 42px), 7.2cqw); } } /* ⚠️ Y ALTA SE PARTE EN 1100, NO EN EL CORTE GENERAL DE 900. Entre 901 y 1100 la columna amarilla se queda en 243 px de texto, y con el tope de arriba el h1 caía a 18 px: más pequeño que el h2 del formulario de al lado. Apilada desde 1100 la caja es ancha y el titular vuelve a sus 28. Va aquí y no en `.rejilla--2`, que es de toda la web. */ @media (max-width: 1100px) { .alta__reja { grid-template-columns: minmax(0, 1fr); } } .alta__nota { margin: 0; } /* ══ CONTACTO ═══════════════════════════════════════════════════ La página llevaba todo el maquetado en `style=` y no tenía ni una clase propia. Es la quinta en la que aparece lo mismo, y siempre trae lo mismo detrás: un estilo en línea le gana a cualquier media query, así que en cuanto la pantalla se estrecha no hay dónde corregirlo. */ .contacto__hoja { padding-top: clamp(64px, 7vw, 96px); } .contacto__reja { gap: clamp(32px, 4vw, 64px); align-items: start; } /* ⚠️ LA COLUMNA DE LA IZQUIERDA SE PEGA AL DESPLAZAR, como el resumen de contratar y con el mismo `top`. No es adorno: el formulario mide 804 px y los datos 450, así que sobraban 354 de blanco, y ensanchar la columna no arregla nada -probadas cuatro proporciones y el alto del formulario no se mueve, porque sus campos son de alto fijo-. ⚠️ Y VA EN `min-width`, NO DENTRO DE UN `max-width`. La regla base se escribe DESPUÉS en el fichero y con la misma especificidad gana el orden: es el fallo que ya se coló en `.switcher__titular` y en `.contratar__resumen`. */ @media (min-width: 901px) { .contacto__texto { position: sticky; top: 112px; } } /* ⚠️ `minmax(0, 1fr)` Y NO EL `1fr` DE `.rejilla--2`, que es el mismo desborde del pie. Un `1fr` pelado no puede encoger por debajo del contenido de su columna, y al subir el dato a 17 px en negrita la columna se plantó en 319 px dentro de una pantalla de 320: 23 px de desborde horizontal en toda la página. Con el texto pequeño de antes no llegaba a empujar, así que apareció al agrandarlo. */ @media (max-width: 700px) { .contacto__reja { grid-template-columns: minmax(0, 1fr); } } /* ⚠️ EN PANTALLA ESTRECHA, EL DATO MÁS CORTO Y EL ICONO MÁS PEQUEñO, para que «admin@trainbee.app» quepa en una línea. A 320 el hueco del texto es de 138 px y el correo pedía 156, así que `anywhere` -que ya hacía falta para que la tarjeta encogiera- lo partía en «admin@trainbe / e.app». Bajando el icono 4 px y el dato a 15 se lee entero con holgura. */ @media (max-width: 400px) { .contacto__icono { width: 44px; height: 44px; } .contacto__valor { font-size: 15px; } .contacto__dato { padding-inline: 14px; } } .contacto__titular { margin-top: var(--e4); font-size: clamp(34px, 4vw, 54px); } /* La segunda línea del titular, en negro como la primera. Aitor: «todo el texto en negro». Era `.apagado` -gris- y de ahí saca también el `display: block` que la baja de línea, así que se lo pone ella. */ .contacto__segunda { display: block; } /* ⚠️ LOS TRES DATOS, UNA TARJETA CADA UNO DENTRO DE UN PANEL. Es la referencia que pasó Aitor: panel de fondo, y encima una tarjeta por dato con el rótulo pequeño arriba y el dato grande debajo. Así se va además el filete roto que había: usaban `.fila`, cuyo separador `.fila + .fila` solo funciona con las filas pegadas, y sueltas sobre el fondo la línea quedaba flotando por encima de cada una. El relieve lo hace el papel: el panel es `--papel` (#fafafa) y las tarjetas `--papel-2` (#ffffff), que es la misma pareja con la que alterna el resto de la web. Nada de un gris nuevo. */ .contacto__datos { /* El mismo relleno que `.formulario`, que va al lado: son dos tarjetas de la misma fila y su contenido tiene que arrancar a la misma distancia del borde. Medido, el formulario empezaba a 40 px y esta a 24. */ --relleno-tarjeta: clamp(20px, 2.2vw, 28px); margin-top: var(--e8); padding: var(--relleno-tarjeta); display: grid; gap: clamp(10px, 1vw, 14px); } .contacto__dato { /* Hijo de un grid: sin esto su mínimo es el `min-content` del texto y no encoge. Va con el `anywhere` de abajo; uno sin el otro no basta. */ min-width: 0; display: flex; align-items: center; gap: clamp(14px, 1.4vw, 18px); padding: clamp(14px, 1.5vw, 18px) clamp(16px, 1.7vw, 22px); background: var(--papel-2); border-radius: var(--r-grande); /* 14, el del escenario */ box-shadow: inset 0 0 0 1px var(--linea); } /* ⚠️ EL ICONO SUBE A AMARILLO PLENO. «Que se vea más llamativo»: estaba en `--amarillo-pal`, que sobre el blanco de la tarjeta casi no existe. El pleno solo vale de FONDO, y eso es justo lo que es aquí: el trazo va en tinta y da 12:1. */ .contacto__icono { display: inline-grid; place-items: center; width: clamp(48px, 4.4vw, 56px); height: clamp(48px, 4.4vw, 56px); border-radius: 14px; background: var(--amarillo); flex: 0 0 auto; } .contacto__icono svg { width: 24px; height: 24px; } .contacto__cuerpo { display: grid; gap: 3px; min-width: 0; } .contacto__rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-70); } /* El dato, grande: es lo que se viene a buscar a esta página. ⚠️ Y `anywhere`, NO `break-word`. Los dos parten la palabra igual, pero `break-word` NO baja el ancho mínimo intrínseco del elemento, así que la tarjeta seguía pidiendo el ancho de «admin@trainbee.app» entero y se salía 3 px a 320. `anywhere` sí cuenta para ese mínimo. */ .contacto__valor { font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; } .campo__opcional { font-weight: 400; color: var(--tinta-70); } .enlace-heredado { color: inherit; } /* El abanico asoma por debajo y la tarjeta lo corta, como en la home. ⚠️ PERO AQUÍ LOS APARATOS VAN EN PX, NO EN %. En la home los dos miden un % de su columna y eso funciona porque la columna sigue al ancho de la ventana. Aquí no: la portada es media reja en escritorio y la reja ENTERA por debajo de 900, así que al estrechar la ventana la portada se ENSANCHA de 563 a 762 y los móviles crecían con ella. Medido: 318 px de alto a 1440 y 512 a 600, con el corte de abajo descuadrado. Y el `-67,3 %` con el que la home corta el aparato por la mitad tampoco sirve: un margen en % se mide contra el ANCHO DEL PADRE, no contra esta caja, así que al ponerle techo dejaba de ser medio teléfono. Con `--aparato` en px el abanico mide lo mismo en las tres anchuras y asoma siempre lo mismo. El alto sale de la proporción 248/506: el de delante mide `1,12 × --aparato` de ancho, o sea `2,29 ×` de alto, y con `-1,15 ×` de margen se ve algo más de la mitad de la pantalla. */ .alta__aparatos { --aparato: clamp(118px, 40vw, 158px); position: relative; align-self: end; width: min(100%, 360px); margin-inline: auto; margin-top: clamp(8px, 1.6vw, 20px); margin-bottom: calc(var(--aparato) * -1.15); } /* ⚠️ LOS CUATRO CON `.alta__portada`/`.alta__aparatos` DELANTE. A ≤780 la home deja UN solo aparato al 66 % cortado por la mitad; esas reglas se escriben después en el fichero y con una sola clase ganaban por orden. Medido a 600: se veían 46 px de teléfono en vez de 180. */ .alta__portada .descarga__aparatos { margin-bottom: calc(var(--aparato) * -1.15); } .alta__aparatos .descarga__movil { width: var(--aparato); } /* El marcador de hueco, arriba: centrado en la pantalla entera caía por debajo del corte y salía partido, sobre todo en el de atrás, que va girado y queda más bajo. */ .alta__portada .descarga__pantalla { align-content: start; padding-top: 26%; } /* ⚠️ EL DE ATRÁS SE MIDE EN PX Y NO EN %, por lo mismo que los anchos, y con holgura: girado -8° sobre su base saca la esquina de arriba unos 44 px a la IZQUIERDA de donde empieza. Con `left: 4 %` (11 px a 390) se salía 33 px por el borde y aparecía descabezado. */ .alta__aparatos .descarga__movil--fondo { left: calc(var(--aparato) * .34); display: block; } .alta__aparatos .descarga__movil--frente { width: calc(var(--aparato) * 1.12); margin-left: 42%; margin-right: 0; } /* ══ FORMULARIO ═══════════════════════════════════════════════════════════ */ .campo { display: grid; gap: 6px; } .campo > span { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; } .campo input, .campo textarea, .campo select { height: 48px; padding: 0 var(--e4); border: 0; border-radius: var(--r-boton); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); font: 400 16px/1 var(--tipo); color: var(--tinta); } .campo textarea { height: auto; min-height: 132px; padding: var(--e3) var(--e4); line-height: 1.45; resize: vertical; } .campo input:focus, .campo textarea:focus, .campo select:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--tinta); } /* ══ EL PIE ═══════════════════════════════════════════════════════════════ */ /* ⚠️ NEGRO ENTERO Y SIN ESQUINAS REDONDEADAS. Aitor, 2026-09-25 (tarde): «quiero que el pie de página siga siendo completamente negro, quiero quitarle las esquinas redondeadas». Llevaba `r-hoja` arriba. */ .pie { --insignia: 56px; background: var(--tinta); color: var(--papel); border-radius: 0; padding: var(--e24) 0 var(--e8); } .pie a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 15px; } .pie a:hover { color: var(--papel); } /* ⚠️ Y UN BOTÓN NO ES UN ENLACE DEL PIE. `.pie a` pesa más que `.btn--amarillo` -una clase y un tipo contra una clase- así que le pisaba el color Y el tamaño: la llamada amarilla salía con la letra BLANCA AL 72 % encima del amarillo, o sea 1,53:1, y a 15 px en vez de 16. Venía de antes de rehacer el pie: el botón ya estaba ahí dentro. Se caza midiendo el color que sale de verdad, no leyendo la regla que uno cree que manda. */ .pie .btn { font-size: 16px; } .pie .btn--amarillo { color: var(--tinta); } .pie .btn--amarillo:hover { color: var(--amarillo); } /* ⚠️ EL 0,52 ES UN MÍNIMO, NO UN GUSTO. Blanco al 45 % sobre el negro da 4,43:1 y a 13 px el listón son 4,5: se quedaba por debajo por siete centésimas. Resuelto: hace falta alfa ≥ 0,4553; con 0,52 sale 5,66:1 y queda margen. Venía de antes de rehacer el pie. */ .pie h5 { margin: 0 0 var(--e4); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.52); } .pie__lista { display: grid; gap: var(--e3); } /* ⚠️ UNA SOLA REJILLA PARA TODO EL PIE, y por eso la pregunta a la IA también entra en ella. Aitor, 2026-09-25 (tarde), pidió tres órdenes distintos -escritorio, tableta y móvil-; con una rejilla y la propiedad `order` se resuelven los tres sin duplicar marcado. El marcado va en el orden que manda el árbol de encabezados -los dos h5 antes que el h4- y la colocación la pone esto. */ .pie__alto { display: grid; grid-template-columns: 1.25fr 1.1fr .85fr; gap: var(--e10, 40px) var(--e12); align-items: start; } .pie__contacto { grid-column: 1; grid-row: 1; } /* Los créditos, debajo del correo y el teléfono y POR ENCIMA del divisor de la pregunta a la IA. Aitor: «tienen que ir debajo del correo». */ .pie__fin { grid-column: 1; grid-row: 2; } .pie__enlaces { grid-column: 2; grid-row: 1 / span 2; } .pie__tiendas { grid-column: 3; grid-row: 1 / span 2; } /* ⚠️ EL CORREO Y EL TELÉFONO EN GRANDE, Y NO SON ENCABEZADOS. En la referencia tienen tamaño de titular, pero aquí son dos párrafos: meter un encabezado en el pie cambiaría el árbol, y eso no se toca. */ /* ⚠️ `.pie .pie__grande` Y NO `.pie__grande`, Y ES LA SEGUNDA VEZ QUE PICA LO MISMO EN ESTE FICHERO. `.pie a` es una clase MÁS UN TIPO, así que pesa más que una clase sola: en cuanto el correo y el teléfono pasaron de `

` a `` -para poder pulsarlos-, `.pie a` les impuso sus 15 px y los dos se fueron a la misma línea, pequeños. Antes había pasado igual con la llamada amarilla. Dos clases lo resuelven. `display: block` va aquí por lo mismo: un enlace es en línea. */ .pie .pie__grande { display: block; /* ⚠️ QUICKSAND ES PROVISIONAL. LA BUENA ES TT ROUNDS PRO. Aitor, 2-oct-2026: «si lo ponemos con la tipografía del logo de TrainBee, mejora» y «la tipografía ES RQND PRO». ❌ FALTA EL FICHERO DE LA FUENTE. Lo único que hay de TT Rounds Pro en todo el material es el subset incrustado en `brand-dna/logo/ trainbee-horizontal-origen.pdf`, y un subset solo lleva los glifos que el documento usa. Medido el 2-oct-2026 leyendo su tabla `cmap`: 141 glifos declarados · 8 con contorno de verdad caracteres: A B E I N R T (o sea, los de «TRAINBEE») Sin minúsculas, sin cifras, sin `@` ni `.`: no se puede escribir con él ni «admin@trainbee.app» ni «689 32 83 43». Hace falta el `.otf` o el `.woff2` con su licencia web, que tiene quien hizo el logo. Hasta que llegue, Quicksand: de las libres es la que más se le acerca -geométrica, terminales redondeados-, pero no es la misma. Cuando esté el fichero se cambia AQUÍ, en esta línea, y se añade su `@font-face`. Se usa en el correo y el teléfono y en nada más: es el guiño al logo, no una familia nueva para la web. */ font-family: 'Quicksand', var(--tipo); font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--papel); } .pie .pie__grande:hover { color: var(--amarillo); } .pie .pie__grande + .pie__grande { margin-top: .12em; } .pie__contacto .nota { margin-top: var(--e4); } /* ⚠️ LA PREGUNTA A LA IA, ABAJO DEL TODO Y A TODO EL ANCHO. Aitor, 2026-09-25 (tarde): «lo bajamos, ponemos el divisor debajo de todo, toda la sección, y ahí ponemos menos alto todo ese apartado». ⚠️ Y SU h4 SIGUE YENDO DESPUÉS DE LOS DOS h5 EN EL MARCADO, que es el orden que ya tenía el árbol de encabezados. Puesto donde se ve -antes que las columnas- el h4 los adelantaba y el árbol cambiaba sin que se notara: la cuenta seguía dando 79 encabezados y 5 negritas, así que la huella NO lo caza. Se cazó comparando el ORDEN, no el número. ⚠️ Y CADA COSA EN UNA LÍNEA, que es lo que lo hace bajo: sin `max-width` en el texto y con los cuatro enlaces en fila. A todo lo ancho de la caja caben de sobra; por debajo de 1040 ya se dejan partir. */ /* ⚠️ DOS DIVISORES, uno arriba y otro abajo. Aitor, 2026-09-25 (tarde): «quiero otro divisor por debajo de lo de preguntar a la IA, hasta abajo de todo, que separe el loguito de TrainBee». Los dos van con `inset` en la misma caja, que es lo que los deja del ancho del contenido y no del ancho de la pantalla. */ .pie__ia { grid-column: 1 / -1; margin-top: var(--e6); padding: var(--e6) 0; box-shadow: inset 0 1px 0 var(--linea-clara), inset 0 -1px 0 var(--linea-clara); } .pie__ia h4 { color: var(--papel); } .pie__ia-texto { margin-top: 6px; color: rgba(255,255,255,.72); font-size: 16px; } .pie__chips { display: flex; gap: var(--e3); margin-top: var(--e4); flex-wrap: wrap; } .pie__chips .chip { height: 38px; padding: 0 var(--e4); text-decoration: none; } @media (min-width: 1041px) { .pie__ia h4, .pie__ia-texto { white-space: nowrap; } .pie__chips { flex-wrap: nowrap; } } /* ⚠️ `minmax(0, 1fr)` Y NO `1fr`, Y ESTE ERA EL DESBORDE DE MÓVIL. Un `1fr` pelado no puede encoger por debajo del contenido de su columna: a 390 px la primera se plantaba en 252 px y la segunda se salía 43 por la derecha, y eso era el desborde horizontal de toda la web. Medido. */ .pie__enlaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e8); } .pie__tiendas { display: flex; flex-direction: column; align-items: stretch; gap: var(--e3); } /* El pie ya no las alinea a mano: la insignia es una sola en toda la web. */ /* ⚠️ EL MISMO GROSOR QUE LAS INSIGNIAS, y por eso lee la misma variable en vez de llevar su número. Aitor: «que el grosor del botón de Probar gratis sea el mismo que el de los botones de App Store y Google Play». Un botón mide 48 de serie y la insignia 56: se veían distintos. El filete de la insignia va por DENTRO, así que las dos cajas acaban midiendo lo mismo por fuera sin sumarle nada. */ .pie__cta { justify-content: center; margin-top: var(--e3); height: var(--insignia); } .pie__fin { display: flex; flex-direction: column; gap: 2px; align-self: end; } .pie__fin .menudo { color: rgba(255,255,255,.6); } /* ⚠️ EL ENLACE YA NO ES TEXTO SINO EL LOGO. Aitor, 2026-09-30: «meter el logo de GRAFS entre las dos, arriba del 2026 […] y que sea el propio link a la página de GRAFS». El subrayado y el color se caen con él: eran para una palabra. Y `block` hace falta o la imagen arrastra el hueco del renglón. */ .pie__grafs { display: block; line-height: 0; margin: 6px 0 4px; } .pie__grafs-logo { display: block; height: auto; /* «Un poco grandecito, que se aprecie bien». El texto de al lado mide 14 px; con 150 de ancho el logo sale a 23 de alto, grande a su lado sin competir con la marca de TrainBee que va debajo a todo el ancho del pie. */ width: 150px; } /* El logo ya es blanco: al pasar el ratón solo se atenúa, como el resto de enlaces del pie. */ .pie__grafs:hover .pie__grafs-logo { opacity: .78; } .pie__grafs:focus-visible { outline: 2px solid var(--papel); outline-offset: 3px; } /* ⚠️ LA MARCA VA FUERA DE LA CAJA, de borde a borde menos un respiro. En la referencia la palabra se sale por los lados; Aitor la quiere ENTERA, así que en vez de recortarla se le da todo el ancho que hay. `display: block` no es cosmético: una imagen es en línea y arrastra el hueco del renglón, que aquí serían ~20 px de negro de más debajo. */ /* ⚠️ MÁS AIRE A LOS LADOS. Aitor, 2026-09-25 (tarde): «tiene que tener un poco más de margen en los laterales porque se lo comen parte de los laterales». Pasa de un respiro de 24 px a los mismos huecos que el resto del pie, y con el tope de la caja para que en un monitor ancho no crezca sin fin. */ .pie__marca { display: block; width: 100%; max-width: var(--caja); height: auto; /* Pegado al divisor, Aitor 2026-09-26: «si subimos un poco el logo y lo pegamos un poco más al divisor, mejor». Eran 64 px. */ margin: var(--e8) auto 0; padding: 0 var(--e12); box-sizing: border-box; } /* ── TABLETA ──────────────────────────────────────────────────────────── Aitor: «vamos a la sección del botón de App Store, de Google Play y de Probar gratis; los vamos a poner uno al lado de otro en paralelo y así acortamos». Dos columnas, y las tres llamadas en fila debajo. */ @media (max-width: 1040px) { .pie__alto { grid-template-columns: 1fr 1fr; } .pie__contacto { grid-column: 1; grid-row: 1; } /* ⚠️ LOS ENLACES ABARCAN LAS DOS FILAS, como en escritorio, y es lo que sube los créditos. Aitor: «que esté más arriba el "web hecha con cariño por GRAFS" y el 2026 en tablet, tal y como aparece en ordenador». Ocupando solo la primera, esa fila se estiraba hasta el alto de la lista de enlaces y los créditos caían 380 px por debajo del teléfono, en mitad de un socavón negro. */ .pie__enlaces { grid-column: 2; grid-row: 1 / span 2; } .pie__fin { grid-column: 1; grid-row: 2; align-self: start; } .pie__tiendas { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: stretch; } /* Ya no se estiran: la insignia tiene ancho propio. */ .pie__tiendas > * { flex: 0 0 auto; } .pie__cta { margin-top: 0; } .pie__ia { grid-row: 4; } .pie__marca { padding: 0 var(--e8); } } /* ── MÓVIL ────────────────────────────────────────────────────────────── Aitor: «tenemos que subir los tres botones, centrarlos antes que nada y subirlos por encima del producto». Así que el orden deja de ser el del marcado y lo pone `order`: contacto · las tres llamadas · las dos columnas de enlaces · la pregunta a la IA · los créditos. */ @media (max-width: 700px) { .pie { padding-top: var(--e16); } .pie__alto { grid-template-columns: 1fr; gap: var(--e10, 40px); } .pie__contacto, .pie__fin, .pie__enlaces, .pie__tiendas, .pie__ia { grid-column: 1; grid-row: auto; } .pie__contacto { order: 1; } /* «Centrarlos antes que nada»: a lo ancho de la columna y con lo de dentro en el medio, que es lo que hace que se lean como un bloque. */ .pie__tiendas { order: 2; flex-direction: column; } .pie__tiendas > * { flex: 0 0 auto; } .pie__enlaces { order: 3; } .pie__ia { order: 4; } .pie__fin { order: 5; } .pie__marca { margin-top: var(--e6); padding: 0 var(--e6); } } /* ══ EL AVISO DE MAQUETA ══════════════════════════════════════════════════ OBLIGATORIO. La fase 2 del método tiene puerta de «cero relleno»: si esto se confunde con contenido aprobado, el fallo es grave. Se ve siempre. */ .aviso-maqueta { position: fixed; left: var(--e4); bottom: var(--e4); z-index: 999; display: flex; align-items: center; gap: var(--e2); padding: 10px var(--e4); border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: 12px; font-weight: 600; letter-spacing: -0.01em; box-shadow: var(--sombra); opacity: .92; transition: opacity .15s ease; } .aviso-maqueta:hover { opacity: .25; } .aviso-maqueta b { color: var(--amarillo); } .aviso-maqueta button { border: 0; background: transparent; color: rgba(255,255,255,.5); cursor: pointer; font-size: 14px; padding: 0 0 0 4px; } /* Marca lo que es dato inventado. Se enciende con la tecla R. */ body.ver-relleno [data-relleno] { background: rgba(255,195,0,.35); box-shadow: 0 0 0 2px rgba(255,195,0,.5); border-radius: 3px; } /* Nota para Aitor DENTRO de la maqueta. No es texto de la web: se distingue a propósito, para que nadie la confunda con copy aprobado. */ .nota { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; /* Era #8a6a00, y sobre el amarillo pálido NUEVO se queda en 4,30:1. A 11 px el mínimo es 4,5. Este da 5,03:1 y mantiene el tono. */ color: #7d6000; background: var(--amarillo-pal); padding: 3px 8px; border-radius: 6px; margin-top: 4px; } .nota::before { content: "✎"; } .tarjeta--negra .nota { color: var(--amarillo); background: rgba(255,195,0,.14); } /* ══ DESCARGA LA APP ══════════════════════════════════════════════════════ Aitor, 2026-09-25 (tarde), con su referencia delante: tres móviles en abanico cortados por el borde de la tarjeta, el QR en su cuadro blanco, los dos botones de tienda, y el titular partido en dos tamaños. ⚠️ EL RELLENO DE LA DERECHA ES CERO Y ESO ES LO QUE HACE EL EFECTO. Los móviles tienen que llegar al borde y que la tarjeta los corte; con relleno a la derecha se quedan flotando dentro y parece un descuido. */ /* ⚠️ `.escenario.descarga` Y NO `.descarga` A SECAS, Y ESTO YA HABÍA MORDIDO ANTES. `.escenario` pone `padding: var(--pad-esc)` y vive MÁS ABAJO en el fichero; con la misma especificidad -una clase cada una- manda el orden y ganaba él. Resultado medido: el relleno de la derecha salía 54 px en vez de 0 y los móviles no llegaban al borde, que es todo el efecto. Con las dos clases juntas son dos contra una. */ .escenario.descarga { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); /* ⚠️ ARRIBA Y NO CENTRADO. Aitor, 2026-09-29: «que el texto de descargar la app esté justificado arriba, junto con los botones, si tiene que sobrar espacio hacia abajo». Con `center` el bloque de texto flotaba a media altura en cuanto los móviles crecieron y la tarjeta se hizo más alta. Los aparatos no se enteran: llevan su propio `align-self: end`. */ align-items: start; gap: clamp(24px, 3vw, 56px); padding: clamp(40px, 4.2vw, 68px); padding-right: 0; padding-bottom: 0; } /* ⚠️ SIN RELLENO ABAJO. La rejilla ya centra la columna en vertical (`align-items: center`); el relleno solo hacía la caja del texto más alta de lo que ocupa, así que su centro real quedaba por encima del de la tarjeta y todo el bloque se veía subido. */ .descarga__texto { padding-bottom: 0; } /* ⚠️ LA COLA BAJA DE LÍNEA Y ENCOGE, PERO SIGUE DENTRO DEL MISMO `em` Y DEL MISMO h2. Aitor: «"Descarga la app" también en grande y, abajo, "para entrenadores personales gratis"». Es un cambio de tamaño, no de estructura: el encabezado dice exactamente lo mismo que decía. `font-style: normal` porque a ese tamaño la cursiva de una línea larga se lee peor, y el énfasis ya lo lleva «app», que se queda en cursiva. */ .descarga__cola { display: block; margin-top: .28em; /* ⚠️ EL 0,449 NO ES UN NÚMERO A OJO: es el que hace que la cola mida EXACTAMENTE lo mismo que «Descarga la app». Aitor, 2026-09-25 (tarde): «le aumentemos el tamaño hasta que llegue a ocupar el mismo ancho que la de Descarga la app». Medido a 1440, 1180, 900 y 810: la línea de arriba mide 505,9 · 442,9 · 337,8 · 304 y la cola 428 · 374,6 · 285,8 · 257,1 con el 0,38 que había. La proporción sale 0,449 en las CUATRO, que es lo que tenía que pasar: las dos van en `em` del mismo h2, así que el ajuste vale para cualquier anchura y no hay que repetirlo por tramos. */ font-size: .449em; font-style: normal; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; } .descarga__bajada { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--e4); margin-top: clamp(24px, 2.6vw, 40px); } /* ⚠️ EL CUADRO DEL QR MIDE LO QUE MIDEN LAS DOS INSIGNIAS JUNTAS. Aitor, 2026-09-25 (tarde): «que sea del mismo largo y ancho, ya que es cuadrado, de lo que ocupa el botón de App Store y de Google Play en conjunto». ⚠️ Y SALE DE UNA CUENTA, NO DE UN NÚMERO COPIADO: dos insignias más su hueco. Las tres medidas viven arriba, en las variables, así que cambiando el alto de una insignia el cuadro la sigue sola. ⚠️ NO SE HACE CON `align-items: stretch`, que fue el primer intento y salió un cuadro de 320 px. En un contenedor flexible el ancho de una pieza se resuelve ANTES que el estirado del alto: el `aspect-ratio` sacaba el ancho de una altura que todavía no era la definitiva. La cuenta explícita no tiene ese problema. Y «con un bordecito»: relleno pequeño y nada más dentro. La nota se fue fuera, debajo de la fila. */ .descarga__bajada { --insignia: 56px; --hueco-insignias: 12px; --lado-qr: calc(2 * var(--insignia) + var(--hueco-insignias)); } .descarga__qr { flex: 0 0 auto; width: var(--lado-qr); height: var(--lado-qr); padding: clamp(7px, .7vw, 11px); border-radius: 12px; background: var(--papel-2); box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .3); } .descarga__qr img { display: block; width: 100%; height: 100%; } .descarga__aviso { margin-top: var(--e3); } .descarga__tiendas { display: flex; flex-direction: column; gap: var(--hueco-insignias, 12px); } /* La insignia sobre el amarillo: negra, como en la referencia de Aitor. El filete claro es lo que la separa del fondo cuando el degradado se oscurece por detrás. */ /* ⚠️ `min-height` LEE LA MISMA VARIABLE QUE EL CUADRO DEL QR. Si se escribieran los dos a mano, el día que cambie uno el cuadro deja de ser del alto de las insignias y nadie se entera. */ /* ⚠️ LA INSIGNIA ES LA MISMA EN LAS CINCO PÁGINAS Y EN TODAS LAS ANCHURAS. Aitor: «los botones de appstore y google play que sean siempre los mismos». Antes medían 56 de alto en unas y 50 en otras, con dos rellenos distintos según la anchura, y las dos de un par no eran iguales entre sí: 167 y 184 en alta. Lo que las iguala son tres cosas, y las tres hacían falta: · `height` fijo, no `min-height`: con mínimo, el par de la home se estiraba a lo que pidiera el contenedor · `width` fijo y no `min-width`: el pie las estiraba a la columna -289 px a 1440, 552 a 600- porque va en `align-items: stretch`, y un mínimo no lo impide. 192 es lo que pide Google Play, que es la larga: 188 de contenido más holgura · la caja del icono fija, y ahí va el último defecto: la manzana se dibuja a 26 y el triángulo a 24, así que el texto arrancaba 2 px más a la derecha en una que en otra. Los dibujos se quedan como están -la manzana es alta y estrecha y a 24 se ve más pequeña- y lo que se iguala es la CAJA que ocupan. */ .tienda--negra { background: #000; color: var(--papel); border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; height: var(--insignia, 56px); min-height: var(--insignia, 56px); width: 192px; flex: 0 0 auto; /* Centrado, no a la izquierda: con el ancho ya fijo, alinear a la izquierda dejaba un palmo de negro a la derecha del «App Store», que es la corta, y el par no se veía a plomo. Centradas, cada una queda equilibrada en su caja, como las insignias oficiales. */ justify-content: center; gap: 12px; padding: 0 18px; } .tienda--negra > svg { flex: 0 0 26px; width: 26px; display: block; } /* ⚠️ Y NO PARTE SU TEXTO. Sin esto, a 810 la insignia se quedaba estrecha y salía «Descárgalo en el / App / Store» en tres líneas, con el botón del alto de una tarjeta. Un nombre de tienda no se parte nunca. */ .tienda--negra > span { white-space: nowrap; } .tienda--negra .tienda__arriba { color: rgba(255, 255, 255, .82); font-size: 11px; line-height: 1.2; } .tienda--negra .tienda__nombre { color: var(--papel); font-size: 19px; line-height: 1.15; } /* ── Los tres móviles ──────────────────────────────────────────────────── /* ⚠️ LA CAJA NO LLEVA ALTO PROPIO: SE LO DA EL MÓVIL DE EN MEDIO, que es el único de los tres que va EN FLUJO. Darle un alto a mano -un clamp sobre vw- fue el fallo de las dos vueltas anteriores: el alto crecía con la ventana y el ancho de los móviles con el de la COLUMNA, que no es lo mismo, y a 1180 el de en medio ya medía 19 px más que su caja y la tarjeta le cortaba la cabeza. Atado al de en medio no puede pasar: la caja mide exactamente lo que él. El margen de abajo en negativo es lo que hace que el abanico asome por debajo del borde y la tarjeta lo corte, como en la referencia. */ .descarga__aparatos { position: relative; align-self: end; margin-bottom: calc(-1 * clamp(44px, 4.6vw, 86px)); } /* ⚠️ EL TAMAÑO SALE DEL ANCHO DE LA COLUMNA, no de su alto, y las dos veces anteriores estaba mal por aquí. Con el ancho en % de la columna, los dos crecen y encogen JUNTOS y el abanico mantiene su forma en cualquier anchura; el alto lo pone la proporción sola. Midiéndolos por alto, en cambio, el ancho quedaba atado a la altura de la caja y la fila se estrechaba o se desparramaba según lo largo que fuera el titular de al lado. ⚠️ Y AHORA SON DOS, NO TRES. Aitor: «vamos a dejar solo dos en vez de tres, los dejamos que se vean mejor». Con tres, cada uno se quedaba en una rebanada de 130 px y no se leía qué era. ⚠️ EL DE DELANTE MANDA EN EL ALTO DE LA TARJETA, así que su ancho no es libre. Al 52 % la tarjeta se iba a 587 px de alto -proporción 2,0- y quedaba un ladrillo; al 41 % baja a ~460 y vuelve a la proporción de la referencia. ⚠️ Y EL ABANICO VA CENTRADO EN SU COLUMNA, NO PEGADO AL BORDE. Aitor, 2026-09-25 (tarde): «no quiero que estén tirados así en una esquina […] que esté centrado tanto el borde derecho como la palabra app». Antes el de delante asomaba por la derecha y quedaba todo el peso a un lado; ahora los dos juntos se reparten el hueco entre donde acaba el titular y el borde de la tarjeta. ⚠️ Y LOS DOS SE CORTAN POR ABAJO. «No quiero que se vea el borde de abajo del mockup más pequeño». El de detrás llevaba `bottom: 9%`, o sea por ENCIMA del borde, y se le veía la curva de abajo entera. Con un valor negativo baja de la línea de corte, igual que el otro. */ /* Lo de la sección de descarga que NO es el aparato. El marco, los botones y el cristal los pone `.iphone`, la misma pieza que usa el escaparate. ⚠️ AQUÍ HABÍA UN SEGUNDO MARCO, Y ESE ERA EL PROBLEMA. Aitor, 2026-09-30: «no están bien hechos […] quiero utilizar ese para todos porque ese ya está bien hecho, se ven incluso los botones». Era un rectángulo `#0d0d10` con un filo gris plano de 1,5 px y dos botones lisos; al lado del canto de titanio del escaparate se veía que eran dos piezas distintas. */ .descarga__movil { position: absolute; bottom: -5%; /* ⚠️ 42 Y NO 35. Aitor, 2026-09-29: «que los mockups sean un poco más grandes, que se note más». Ahora que dentro hay captura y no un cartel de «pendiente», el tamaño de antes se quedaba corto para leer nada. */ width: 42%; /* ⚠️ LA CAJA YA NO ES EL APARATO: DENTRO VA UN `.descarga__aparato`, y la sombra se fue con el. Aitor, 2026-09-30: «revisa el mockup de descarga en la version movil, porque no esta el iPhone ahi». Tenia razon, y se midio: a 390 px el radio era el 7 % del ancho cuando un iPhone lo tiene al 15 %. La mitad de curva, de ahi que se leyera como un rectangulo. La culpa es de `.iphone`, que trae radio y bisel en MEDIDAS ABSOLUTAS -`min(38px, 3.8vw)`- calibradas para un aparato de 250 px: a 212 se quedan cortas y a 174 se pasan (17,7 % medido a 810). Con el envoltorio, `1cqw` es el 1 % del ancho DEL APARATO y las tres medidas van en proporcion. Mismo arreglo que en el switcher. */ container-type: inline-size; } /* ⚠️ LA PANTALLA, SIN NADA DENTRO. Aitor: «quitamos el punto negro dentro de la pantalla, no me gusta». Era la muesca. El aparato se entiende por el canto y los botones, no por lo que haya en el cristal. */ /* ⚠️ SIN `height` NI `border-radius`: los pone `.iphone > *`, y aquí los pisaba por ir después en el fichero con la misma especificidad. El radio de antes era un `calc` propio que no coincidía con el del marco nuevo, y dejaba el cristal con una curva distinta a la del aparato. */ /* El aparato de verdad. El padre `.descarga__movil` solo lo coloca y lo dimensiona; aqui viven el marco y su sombra. */ .descarga__aparato { position: relative; width: 100%; /* Las tres medidas del iPhone, en proporcion a SU ancho. */ --canto: 1cqw; --bisel: 2.4cqw; --radio: 15cqw; /* Mas sombra que en el escaparate, y no por gusto: estos van sobre el amarillo de marca, donde una sombra suave no despega nada. ⚠️ VA AQUI Y NO EN EL PADRE: el radio lo tiene este, asi que alli la sombra saldria con las esquinas en angulo recto. */ box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .55); } .descarga__pantalla { position: relative; display: grid; place-items: center; padding: var(--e3); overflow: hidden; } .descarga__pantalla .nota { font-size: 9px; letter-spacing: .04em; } /* ⚠️ EN MOVIL LA PANTALLA VIVA SE VA Y VUELVE LA CAPTURA. A 259 px de aparato, el texto de 14 px de la app queda en 9,3: dibujado se lee peor que una captura, porque la captura al menos se reduce con suavizado. Y no se puede tocar nada util con el dedo a ese tamano. */ @media (max-width: 700px) { } /* ⚠️ LA PANTALLA VIVA NO VA EN EL SWITCHER. Se monto ahi el 2026-09-30 y Aitor lo corrigio: «la seccion donde hiciste el interactivo no quiero que sea interactivo [...] tiene que estar en el escaparate, que es la seccion 1». Las reglas `.app*` de arriba se quedan porque son las que va a usar el escaparate; lo que se fue es el enganche al aparato del switcher. */ /* ══ LA BARRA DE ESTADO DE iOS ════════════════════════════════════════════ Aitor, 2026-09-30: «necesito trabajar el Dynamic Island de todos los mockups de moviles de toda la web, que aparezca tanto la hora como el Dynamic Island del iPhone, la bateria y todo lo que hay a la derecha. Que haya suficiente espacio realista de margen arriba, porque muchos de los mockups empiezan hasta arriba de todo, cuando en la mayoria de los moviles no es asi». ⚠️ LAS CAPTURAS NO LA TRAEN, y no es un descuido: se hicieron con un navegador, que no dibuja la barra de iOS. Por eso la app empezaba pegada al borde de arriba, que es justo lo que nunca se ve en un telefono. Va DIBUJADA, no capturada: asi escala a cualquier tamano sin emborronarse y sirve igual para el movil del escaparate, que ni siquiera tiene captura. ── Las medidas ────────────────────────────────────────────────────────── Salen del iPhone 15 Pro, 393 x 852 pt, y van todas en `cqw` -porcentaje del ANCHO DE LA PANTALLA- para que el dibujo sea el mismo a cualquier escala. Un `px` fijo aqui se rompe: el mismo movil mide 248 px en la seccion de descarga y 140 en el escaparate. barra de estado 59 pt de alto -> 15,0 cqw Dynamic Island 125 x 36 pt -> 31,8 x 9,2 cqw, a 2,8 del borde la hora 17 pt -> 4,3 cqw, en semibold los iconos 13 pt de alto -> 3,3 cqw ⚠️ Y EL FONDO ES #FAFAFA POR MEDICION, no por gusto: es el color de la primera fila de las nueve capturas de cliente, al 100 %. Con cualquier otro se veria la costura entre la barra dibujada y la app fotografiada. */ /* ⚠️ EL MISMO FONDO QUE LA BARRA, o se ve la costura. La pantalla del escaparate era `--papel-2` (#fff) y la barra `--papel` (#fafafa): sobre una pantalla con captura no se notaba -la imagen lo tapa-, pero la del escaparate esta vacia y salia una linea a 15 cqw del borde. */ .ios-pantalla { container-type: inline-size; background: var(--papel); } .ios-estado { position: absolute; inset: 0 0 auto 0; height: 15cqw; z-index: 2; background: var(--papel); /* #fafafa · el de las capturas */ display: flex; align-items: center; /* La hora y los iconos van a los lados; la isla, encima y centrada. */ justify-content: space-between; padding: 2.4cqw 7.1cqw 0; border-radius: inherit; border-end-start-radius: 0; border-end-end-radius: 0; pointer-events: none; } .ios-hora { font: 600 4.3cqw/1 var(--tipo); letter-spacing: -.01em; color: var(--tinta); /* Centrada en el hueco que deja la isla a su izquierda, como en el sistema. */ min-width: 17cqw; text-align: center; } .ios-iconos { display: block; width: 19.8cqw; height: 3.3cqw; color: var(--tinta); } .ios-iconos svg { display: block; width: 100%; height: 100%; } /* La isla: una pildora negra, centrada respecto a la PANTALLA y no respecto a lo que quede entre la hora y los iconos. Por eso va absoluta. */ .ios-isla { position: absolute; left: 50%; transform: translateX(-50%); top: 2.8cqw; width: 31.8cqw; height: 9.2cqw; border-radius: 9.2cqw; background: #000; } /* La captura baja para dejarle sitio: la app empieza DEBAJO de la barra, que es donde empieza en el telefono. */ .ios-pantalla img { padding-top: 15cqw; background: var(--papel); } /* ⚠️ LA CAPTURA DENTRA DEL CRISTAL. `cover` y no `contain`: la captura es 390x844 y el cristal 248x506 con su relleno, así que las proporciones no coinciden y `contain` dejaría dos bandas de papel arriba y abajo. Con `cover` el navegador recorta, y `object-position: top` decide POR DÓNDE: por abajo, que es donde va la barra de pestañas, y no por el titular. El `display:block` quita el hueco de línea base que deja una img en línea, que aquí se veía como una raya clara en el borde de abajo. */ .descarga__pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; border-radius: inherit; } /* Con captura dentro, el relleno del cristal sobra: la pantalla llega al borde, como en el aparato de verdad. */ .descarga__pantalla:has(img) { padding: 0; } .descarga__qr img { display: block; width: 100%; height: 100%; } .descarga__aviso { margin-top: var(--e3); } .descarga__tiendas { display: flex; flex-direction: column; gap: var(--hueco-insignias, 12px); } .descarga__movil--fondo { left: 12%; z-index: 1; transform: rotate(-8deg); transform-origin: 50% 100%; } /* El de delante, en flujo: `margin-left` y no `left`, que es lo que le deja seguir ocupando sitio y dando el alto a la caja. */ .descarga__movil--frente { position: relative; /* El margen baja de 48 a 42 porque los dos son más anchos: con el de antes, el de delante se salía por la derecha en vez de quedar cortado justo por el borde. Y su ancho manda en el alto de la tarjeta. */ margin-left: 33%; width: 49%; z-index: 2; } /* ── A 1040 y por debajo ──────────────────────────────────────────────── Cabe igual, solo que más apretado: el titular ya no compite con los móviles por el ancho porque los dos encogen a la vez. */ @media (max-width: 1040px) { /* ⚠️ NI UNA LÍNEA DE ALTO AQUÍ. Lo que había era `height` sobre la caja de los móviles, de cuando se medían así, y se quedó: forzaba 243 px a 810 mientras el de en medio pedía 300 y lo dejaba desbordando por abajo con un socavón amarillo encima. El alto lo pone él y ya. */ .escenario.descarga { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); } /* ⚠️ Y EL QR Y LAS INSIGNIAS TIENEN QUE CABER EN UNA FILA. A 810 la columna del texto mide 350 px y los tres trozos sumaban 344: bastaba un píxel para que el QR se fuera a una fila él solo y la tarjeta creciera 120 px de golpe. Encogiendo los tres, sobran 36. */ .descarga__bajada { gap: var(--e4); flex-wrap: nowrap; } .descarga__qr { padding: 8px; } /* ⚠️ AQUÍ BAJABAN LA INSIGNIA A 50 Y SU RELLENO, y ya no: la insignia es una sola en toda la web. La cuenta de arriba sigue saliendo con las tres piezas a su tamaño entero, porque las dos insignias van en COLUMNA y no en fila: 184 de la columna + 12 + 124 del QR son 320 en una de 350. Lo que no cabía eran los tres EN FILA. */ /* Más grandes en proporción, que la columna es más estrecha. */ /* ⚠️ LOS DOS SE CORREN A LA DERECHA, y no es estética: girado -8°, el de detrás saca su esquina de abajo unos 45 px por fuera de donde empieza, y ahí se comía el borde de la insignia del App Store. Medido a 810: la insignia acaba en 432 y él llegaba a 415. */ /* Mismo ajuste que arriba: los dos a la izquierda, que es donde Aitor los quiere. En tablet es donde mas se notaba el arrinconamiento. */ .descarga__movil { width: 46%; } .descarga__movil--fondo { left: 8%; } .descarga__movil--frente { margin-left: 38%; width: 52%; } } /* ── A 780 y por debajo · PROVISIONAL ─────────────────────────────────── ⚠️ Aitor, 2026-09-25: «de momento la tocamos en tablet y escritorio […] en móvil probablemente la retocamos». Esto NO es el diseño de móvil: es lo mínimo para que no se rompa mientras se decide. ⚠️ Y CORTA EN 780, NO EN 700. Medido: entre 701 y 780 seguían las dos columnas y la del texto se quedaba tan estrecha que el móvil girado de la izquierda se montaba encima de la insignia del App Store. Ahí ya no caben dos columnas, así que se apilan. ⚠️ NI UN `height` EN LA CAJA DE LOS MÓVILES. Es el mismo fallo que en el bloque de tablet: forzarle un alto mientras el de en medio va en flujo lo hace desbordar HACIA ARRIBA, encima del texto. */ /* ⚠️ EN MÓVIL: SIN QR Y CON UN SOLO APARATO. Aitor, 2026-09-26: «el QR en móvil nos lo quitamos, solo el móvil; dejamos simplemente los dos botones y, en vez de meter dos mockups, vamos a meter uno grande que esté cortado a la mitad». Y el QR sobra por lo que es: un QR existe para escanearlo DESDE OTRO aparato. En el teléfono que ya tiene la web abierta no sirve de nada, mientras que las dos insignias llevan a la tienda de un toque. Con él fuera se va también su aviso de «QR de prueba», que sin QR no explica nada. */ @media (max-width: 780px) { .escenario.descarga { grid-template-columns: 1fr; padding: var(--e8) var(--e6) 0; gap: var(--e6); } .descarga__texto { padding-bottom: 0; } .descarga__bajada { flex-wrap: wrap; } .descarga__qr, .descarga__aviso { display: none; } /* Aitor, 2026-09-26: «quiero centrar los dos botones». Con el QR fuera, las insignias se quedaban arrinconadas a la izquierda de una caja mucho más ancha que ellas. */ .descarga__bajada { justify-content: center; } /* Uno solo, grande y centrado. El de atrás se va: con un aparato a este tamaño, el segundo solo estorba. */ .descarga__movil--fondo { display: none; } /* ⚠️ CENTRADO, Y ESTO SE PROBO EN LAS DOS DIRECCIONES. Aitor pidio primero traerlo a la izquierda, lo vio montado y dijo «centra esto»: en una columna sola, con el titular y los dos botones centrados, el aparato descolgado rompia el eje. En escritorio y tablet, donde el texto va a la izquierda y el aparato a la derecha, si esta descolgado y asi se queda. */ .descarga__movil--frente { margin-left: auto; margin-right: auto; width: 72%; } /* ⚠️ CORTADO POR LA MITAD, Y EL NÚMERO ES UNA CUENTA. El aparato mide 248 x 506, o sea que su alto es su ancho entre 0,4901. A un 66 % de ancho, su alto es 66 / 0,4901 = 134,7 % del ancho de la caja, y la mitad son 67,3 %. Un margen negativo se mide contra el ANCHO del padre, así que ese 67,3 % es exactamente medio teléfono. Lo que lo recorta es el `overflow: hidden` de la tarjeta, que ya estaba. */ /* ⚠️ SE VE MAS TELEFONO Y LA SECCION SE ALARGA. Aitor, 2026-09-29: «haz la seccion de descarga del movil mas larga para que se vea un poco mas como una aplicacion». Antes se cortaba justo por la mitad y parecia un recorte; ahora se ve cerca de tres cuartos y se lee como un aparato. La cuenta, con el ancho nuevo: el aparato mide 248 x 506, o sea alto = ancho / 0,4901. Al 72 % de ancho su alto es 72 / 0,4901 = 146,9 % del ancho de la caja. Cortar un cuarto son 146,9 / 4 = 36,7 %. Y el margen negativo se mide contra el ANCHO del padre, no contra el alto. */ .descarga__aparatos { margin-bottom: -36.7%; } /* Y el aviso de hueco sube a la mitad que SE VE: centrado en la pantalla entera caía justo sobre el corte y salía partido. */ .descarga__pantalla { align-content: start; padding-top: 22%; } } /* ══ LAS PREGUNTAS FRECUENTES ════════════════════════════════════════════ Aitor, 2026-09-25 (tarde): una sola columna centrada, sin cejilla y sin subtítulo, con el bloque de «¿te queda otra?» al final. */ /* 880 y no 820: el titular no se parte y a 1440 mide 757 px; con 820 la columna le quedaba justa. */ .faq { max-width: 880px; margin: 0 auto; } .faq__titular { text-align: center; margin-bottom: var(--e12); /* ⚠️ EL TAMAÑO LO MANDA EL ANCHO QUE HAY, no la escala normal de los h2, porque LA LÍNEA NO SE PARTE. Sube de tope 62 a tope 72 -Aitor, 2026-09-26: «un poco más grande»-, y puede subir porque ya no tiene que igualar el ancho de ningún logotipo: son 20 letras donde antes había 26 más el dibujo. El `min` es lo que garantiza que quepa en cualquier anchura. Sin él, por debajo de 600 px la línea se salía de la pantalla. */ font-size: min(clamp(34px, 5.4vw, 72px), 7.8vw); text-wrap: nowrap; } /* ⚠️ EL TITULAR LARGO NO PUEDE IR EN UN RENGLÓN. El de la home mide 10,64 em y cabe; el de precios -«Preguntas frecuentes sobre los precios»- mide 19,18, y forzarlo a un renglón a 320 px lo dejaría en 13,7 px, por debajo del cuerpo de texto. Así que ahí SÍ se parte, y `balance` reparte los dos renglones parejo. El 44 del tope sale de la cuenta, no del ojo: 19,18 em a 44 px son 844, y la columna de la FAQ mide 880. Un punto más y se parte ya a 1440. */ .faq--larga .faq__titular { white-space: normal; text-wrap: balance; font-size: clamp(30px, 3.4vw, 44px); } .faq__lista { display: block; } /* Las preguntas, a lo ancho de la columna: el cuerpo ya no compite con nada a su lado, así que puede ocupar más renglón. */ .faq__lista .acordeon__cuerpo { max-width: 62ch; } /* El «Still have a question» de su referencia, rehecho el 2026-09-26. Aitor: «quiero que este cuadro se note un poco más, que tenga la forma del resto de cuadros, con la esquina inferior derecha cortada, que sea un poco más llamativo, como si le subimos una tonalidad de gris. Lo quiero en una sola línea». Así que tres cosas a la vez: EN FILA -texto y botón a su derecha-, con el CORTE de esquina de las demás tarjetas -la clase `bisel-tarjeta` va en el marcado- y un GRIS de verdad debajo. ⚠️ EL GRIS NO ES UN TONO INVENTADO: es la mezcla a partes iguales de los dos grises que ya hay en la hoja de marca, `--gris` y `--papel`. El blanco de antes no se distinguía del papel -que es justo lo que Aitor veía-, y el `--gris` a pelo se le hizo fuerte: «baja un poco el tono», 2026-09-26. Así que queda en medio de los dos, escrito como la cuenta que es y no como un hex suelto. ⚠️ Y SE VA EL FILETE DE 1 px. No es un descuido: `clip-path` corta la caja pero NO repinta el borde en el corte, así que la sombra interior se quedaba en las tres esquinas buenas y desaparecía justo en la diagonal. Con el fondo gris el filete ya no hace falta. */ .faq__cierre { margin-top: var(--e12); padding: var(--e8); border-radius: var(--r-grande); background: color-mix(in srgb, var(--gris), var(--papel)); display: flex; align-items: center; justify-content: center; gap: var(--e6); text-align: center; } .faq__cierre-texto { font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; letter-spacing: -.01em; } /* En fila, el botón no puede encogerse: es lo que empuja al texto a partirse antes que él. */ .faq__cierre .btn { flex: 0 0 auto; } /* ⚠️ EL MÓVIL SE QUEDA COMO ESTABA, apilado. Aitor: «móvil, igual no es posible; lo que tenemos que hacer es dejarlo como está ahora mismo, que está bien, solo con el tema de la esquina». Lo único que hereda es el corte y el gris. */ @media (max-width: 700px) { .faq__titular { margin-bottom: var(--e8); } .faq__cierre { margin-top: var(--e8); padding: var(--e6) var(--e4); flex-direction: column; gap: var(--e4); } .faq__cierre-texto { max-width: 34ch; } } /* ══ LAS DOS CINTAS DE RESEÑAS ═══════════════════════════════════════════ El `Marquee` que pasó Aitor el 2026-09-25, en CSS puro: dos filas que corren en sentidos contrarios, se paran al pasar el cursor y se desvanecen por los lados. Sin JavaScript: es una animación y ya. ⚠️ LA CINTA VA FUERA DE LA CAJA, de borde a borde. Metida dentro, las tarjetas se cortarían contra el margen de la caja y se vería la raya; lo que tiene que parecer es que siguen más allá de la pantalla. */ .cinta { --hueco: var(--e4); --vuelta: 52s; overflow: hidden; /* ⚠️ EL DESVANECIDO DE LOS LADOS VA CON MÁSCARA Y NO CON UN DEGRADADO DE COLOR. Un degradado del color del papel encima taparía el panal del fondo y dejaría dos bandas lisas donde el patrón desaparece. La máscara vuelve transparente la propia cinta, así que por los lados se ve lo que haya detrás, panal incluido. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%); } /* ⚠️ `width: max-content` es lo que deja que el carril mida lo que miden sus tarjetas en vez de encogerse al ancho de la sección. Sin eso, las tarjetas se apretarían y no habría nada que correr. */ .cinta__carril { display: flex; gap: var(--hueco); width: max-content; animation: cinta var(--vuelta) linear infinite; } .cinta__carril + .cinta__carril { margin-top: var(--hueco); } .cinta__carril--reves { animation-direction: reverse; } .cinta__tren { display: flex; gap: var(--hueco); list-style: none; margin: 0; padding: 0; } /* ⚠️ EL RECORRIDO NO ES EL 50 %, Y ESTE MEDIO HUECO ES TODO EL ASUNTO. El carril lleva DOS tandas iguales separadas por un hueco, así que mide 2T + h y hay que correr T + h -de donde empieza una a donde empieza la siguiente-, que es el 50 % MÁS medio hueco. Con el 50 % pelado el bucle pega un salto de medio hueco en cada vuelta. */ @keyframes cinta { to { transform: translateX(calc(-50% - var(--hueco) / 2)); } } /* Se para al pasar el cursor, que es el `pauseOnHover` del componente. */ .cinta:hover .cinta__carril { animation-play-state: paused; } /* A quien pidió menos movimiento, las cintas quietas. Se ven las primeras tarjetas de cada fila y no se pierde nada: son todas iguales. */ @media (prefers-reduced-motion: reduce) { .cinta__carril { animation: none; } } .resena { flex: 0 0 auto; width: 264px; padding: var(--e4); border-radius: var(--r-grande); background: var(--papel-2); /* el filete por dentro, que no suma tamaño como haría un `border` */ box-shadow: inset 0 0 0 1px var(--linea); } .resena__quien { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); } .resena__avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); } .resena__pie { display: flex; flex-direction: column; min-width: 0; } .resena__nombre { font-size: 14px; font-weight: 500; letter-spacing: -.01em; } .resena__mote { font-size: 12px; font-weight: 500; color: var(--tinta-70); } /* ⚠️ TRES LÍNEAS Y NO LAS DOS DEL COMPONENTE. En inglés dos líneas dan para una frase; en español, no: la misma reseña ocupa más y se cortaba a mitad de la primera idea. Cuando lleguen las de verdad habrá que volver a mirarlo con el texto real delante. */ .resena__texto { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 700px) { .cinta { --hueco: var(--e3); } .resena { width: 232px; } } /* ══════════════════════════════════════════════════════════════════════════ ⚠️ LA MALLA VA AL FINAL DEL FICHERO, Y NO ES CAPRICHO. `.hoja` y `.tarjeta` ponen el fondo con la propiedad CORTA (`background: var(--papel)`), que reinicia también `background-image`. Como los dos selectores tienen la misma especificidad —una clase—, manda el ORDEN. Medido el 2026-09-10: con la malla arriba, el panel de datos salía en blanco con el texto amarillo encima, ilegible. ══════════════════════════════════════════════════════════════════════════ */ /* ══ LA MALLA DE DEGRADADO ═══════════════════════════════════════════════ ⚠️ ESTO ES LO QUE FALTABA. Aitor citó «degradados» como lo primero que le gusta de Calendly, y su portada entera es un panel de malla. Medido: Calendly tiene 0 degradados CSS — los sirve como PNG desde su CDN (`book-active-bg-gradient-1.png`). Aquí van con radial-gradient apilados: se acerca mucho, pesa cero y se cambia editando cuatro líneas. Si hace falta la calidad de una plancha de verdad, se dibuja y se sustituye. */ /* ⚠️ SIN DEGRADADO. Aitor, 2026-09-25 (tarde): «al final no me gusta cómo queda el degradado, así que vamos a quitar el degradado […] necesito que sea un amarillo como el del botón, o sea, un amarillo principal». Así que es EL MISMO `--amarillo` del botón, plano. Historia de esta regla en dos vueltas del mismo día: eran cinco manchas radiales, pasaron a dos, y ahora a ninguna. ⚠️ Y AQUÍ EL #ffd21f SÍ ES LEGAL, que es lo de siempre al revés: la regla de la casa es que este amarillo solo vale de FONDO, nunca de tinta. Esto es fondo, con la tinta negra encima: 14,49:1. Esta regla solo la usa la sección de descarga: `malla--tenue` y `malla--oscura` son otras y no se tocan. */ .malla { background-color: var(--amarillo); background-image: none; } /* La variante oscura: el panel negro con la luz amarilla detrás. Es lo que en Calendly hace el azul, y en la abeja lo hace el negro. */ .malla--oscura { background-color: var(--tinta); background-image: radial-gradient(at 18% 18%, rgba(255,195,0,.30) 0px, transparent 55%), radial-gradient(at 86% 82%, rgba(255,195,0,.16) 0px, transparent 50%), radial-gradient(at 62% 8%, rgba(255,232,150,.12) 0px, transparent 48%), radial-gradient(at 40% 95%, rgba(255,140,0,.10) 0px, transparent 45%); } /* Y la tenue, para secciones enteras: casi no se ve, y eso es el punto. */ /* ⚠️ APAGADA A PROPÓSITO, Aitor 2026-09-24: «el fondo lo ponemos blanco para ver en verdad cómo se vería». Eran tres manchas de amarillo muy diluido, y con ellas no se puede juzgar el resto. No se borra: se deja la receta comentada debajo, porque volver a encenderla es descomentar, y volver a inventarla no. */ /* El panal ya no vive aquí: subió al cuerpo de la página, para que no se corte en las junturas. Esta sección se queda transparente como el resto y deja ver el de debajo. */ .malla--tenue { background: transparent; } /* .malla--tenue { background-color: var(--papel); background-image: radial-gradient(at 10% 0%, rgba(255,195,0,.16) 0px, transparent 45%), radial-gradient(at 92% 6%, rgba(255,238,170,.30) 0px, transparent 42%), radial-gradient(at 60% 100%, rgba(255,249,224,.55) 0px, transparent 50%); } */ /* ══ EL ESCENARIO ════════════════════════════════════════════════════════ El patrón de Calendly, entero: panel de malla con radio grande, y DENTRO una tarjeta blanca flotando con la única sombra del sistema. Sin la tarjeta blanca dentro, el degradado se queda en fondo bonito y no es el patrón. */ /* ⚠️ EL RELLENO VA EN UNA VARIABLE porque lo necesita DOS sitios: la propia tarjeta y el mockup, que se sale por el borde justo esa medida. Escrito dos veces se descuadrarían en cuanto uno cambiase. */ /* ⚠️ SUBE UN 40 %, Y SUBE UNA SOLA VEZ. Aitor, 2026-09-25: «siento que ahora está todo muy apretado». Los cinco huecos de la tarjeta -arriba del mockup, debajo, del móvil al texto, del texto al borde derecho- son TODOS este número, así que se respiran los cinco tocando uno. Medido antes: 38 en escritorio, 31 en iPad horizontal, 21 en vertical. Despues: 54, 44 y 30. Y el mockup se estrecha solo, que es lo que dijo que no le importaba: «si tenemos que hacerlo más estrecho, no hay problema». El suelo se queda en 24 y no sube a 30: por debajo de 700 la tarjeta va a una columna y a 390 px de pantalla 30 de relleno por lado se comen el ancho de las filas del mockup. */ .escenario { --pad-esc: clamp(24px, 3.75vw, 54px); border-radius: var(--r-grande); padding: var(--pad-esc); } /* La tarjeta blanca. Aitor, 2026-09-25: «la quiero blanca en vez de amarilla». Era el panel de malla amarilla desde el 23. El filete hace falta: sobre una sección que ya es blanca, sin él la tarjeta no existe. Y la sombra es la de los mockups -muy abierta y muy suave- y no la del sistema, porque lo que tiene que hacer es separarla del fondo, no marcarla. `overflow: hidden` NO es cosmético: es lo que recorta el mockup contra el borde izquierdo. ⚠️ Y ES LA ÚNICA DE LAS DIEZ QUE NECESITA DOS CAPAS PARA EL CORTE, porque es la única con filete. Con un solo recorte, `clip-path` se lleva por delante el trozo de borde que tocaría la diagonal y la esquina sale ABIERTA. Así que el filete se pinta como en el botón de contorno: el fondo del elemento ES la línea, y un `::before` metido 1 px lo tapa todo menos ese milímetro. ⚠️ Y LA SOMBRA PASA DE `box-shadow` A `drop-shadow`. `clip-path` recorta la sombra de caja junto con el elemento y la sombra desaparecía. El filtro la calcula sobre la silueta YA recortada. ⚠️ `isolation: isolate` NO ES OPCIONAL. Sin un contexto de apilado propio, un `::before` con `z-index: -1` se va DETRÁS del fondo del propio elemento y no se ve nada. */ .escenario--blanco { position: relative; isolation: isolate; border: 0; background: var(--linea); /* esto es lo que se ve como filete */ box-shadow: none; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .10)); overflow: hidden; } .escenario--blanco::before { content: ""; position: absolute; inset: 1px; /* el bisel de dentro, con la cuenta del botón: bisel − grosor·0,586 */ --bisel-int: calc(var(--bisel-tarjeta) - 1px * 0.586); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bisel-int)), calc(100% - var(--bisel-int)) 100%, 0 100%); background: var(--papel-2); border-radius: calc(var(--r-grande) - 1px); z-index: -1; } .escenario__tarjeta { background: var(--papel); border-radius: var(--r-tarjeta); padding: clamp(24px, 2.6vw, 48px); box-shadow: var(--sombra); } /* Un hueco tiene que VERSE como hueco. Lo pinta el generador. */ .falta { background: #ffe0e0; color: #8a1c1c; font-weight: 700; padding: 1px 6px; border-radius: 4px; font-size: .85em; } /* ══ LISTA DE ✓ CON TÍTULO Y EXPLICACIÓN ═════════════════════════════════ El patrón de los bloques de sector de harbiz: check, título en negrita y una línea de explicación debajo. Virtuagym usa la versión corta, de una sola línea. Medido el 2026-09-10 en /app-entrenamiento-personal. */ .lista-detalle { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; gap: var(--e4); } .lista-detalle li { display: grid; grid-template-columns: 22px 1fr; gap: var(--e3); } .lista-detalle li::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; background: var(--amarillo); color: var(--tinta); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 2px; } .lista-detalle b { display: block; font-size: 16px; letter-spacing: -0.01em; } .lista-detalle span { display: block; font-size: 15px; color: var(--tinta-70); line-height: 1.4; margin-top: 3px; } /* Aviso de VARIANTE: dos formas de hacer lo mismo, para elegir viéndolas. */ .variante { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--papel); background: var(--tinta); padding: 5px 12px; border-radius: 999px; margin-bottom: var(--e4); } .variante--b { background: #6b4f00; } /* ══ PÁGINAS LEGALES ═════════════════════════════════════════════ Seis documentos, 17.300 palabras, y el cuerpo entra TAL CUAL desde el paquete de textos legales. Por eso este bloque estiliza por ETIQUETA y no por clase: el HTML de un texto legal no se toca para meterle clases, porque cada retoque lo aleja del documento que revisa la abogada. El ancho se queda en 72 caracteres: son textos largos y seguidos, y a lo ancho de la caja se leen fatal. */ .legal { padding-top: clamp(64px, 7vw, 96px); } .legal__doc { max-width: 72ch; margin-inline: auto; } .legal__doc h1 { font-size: clamp(30px, 3.4vw, 44px); margin: 0 0 var(--e3); } .legal__doc h2 { font-size: clamp(19px, 1.6vw, 23px); margin: var(--e10, 40px) 0 var(--e3); } .legal__doc h3 { font-size: 18px; margin: var(--e6) 0 var(--e2); } .legal__doc p, .legal__doc li { color: var(--tinta-70); line-height: 1.7; } .legal__doc p { margin: 0 0 var(--e4); } .legal__doc strong { color: var(--tinta); } .legal__doc ul { margin: 0 0 var(--e4); padding-left: var(--e5, 20px); } .legal__doc li { margin-bottom: 8px; } .legal__doc a { color: var(--tinta); text-underline-offset: 3px; } .legal__doc hr { border: 0; border-top: 1px solid var(--linea); margin: var(--e12) 0; } .legal__doc code { font-size: .92em; background: var(--papel-2); padding: 2px 6px; border-radius: 6px; } /* La fecha de versión, bajo el título. */ .legal__doc h1 + p em { font-style: normal; color: var(--tinta-40); font-size: 15px; } /* ⚠️ LAS TABLAS, CON SU PROPIO SCROLL. La de cookies trae cinco columnas y a 390 px no hay forma de que quepan: o se parten las palabras hasta ser ilegibles o desbordan la página entera. `display: block` + `overflow-x` deja que ruede solo la tabla. */ .legal__doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 var(--e4); display: block; overflow-x: auto; } .legal__doc th, .legal__doc td { border: 1px solid var(--linea); padding: 10px 12px; text-align: left; vertical-align: top; } .legal__doc th { background: var(--papel-2); color: var(--tinta); font-weight: 600; } /* ══ 404 ═══════════════════════════════════════════════════════════ La misma planta que gracias -página de una sola tarea, centrada-, con la barra y el pie de siempre para que desde aquí se pueda seguir. */ .error404 { padding-top: clamp(96px, 10vw, 140px); text-align: center; } .error404__caja { max-width: 640px; margin-inline: auto; } .error404__marca { height: 60px; width: 60px; border-radius: 20px; justify-content: center; font-size: 19px; font-weight: 700; letter-spacing: .02em; } .error404__titular { margin-top: var(--e6); font-size: clamp(30px, 3.6vw, 48px); } .error404__segunda { display: block; color: var(--tinta-40); } .error404__texto { margin-top: var(--e5, 20px); } .error404__acciones { display: flex; gap: 12px; justify-content: center; margin-top: var(--e8); flex-wrap: wrap; } /* ⚠️ LA INSIGNIA DE APP STORE, TODAVÍA SIN DESTINO. La de Google Play sí tiene URL definitiva -se construye del `package` de la app, `com.grafs.trainme`, que está en su `app.json`-, pero la de Apple necesita el ID numérico que solo asigna App Store Connect al crear la ficha, y la ficha está pendiente. Mientras, el `` se queda SIN `href`: así no hay enlace roto, se marca como hueco y el día que llegue el ID basta con devolverle el `href`. Lo que se apaga es lo que promete un clic que no pasa. */ .tienda[aria-disabled="true"] { cursor: default; } .tienda[aria-disabled="true"]:hover { filter: none; } .tienda[aria-disabled="true"]:active { transform: none; } /* ══════════════════════════════════════════════════════════════════════════ EL MINI DEMO DEL ESCAPARATE · las dos pantallas, vivas y enlazadas ═══════════════════════════════════════════════════════════════════════ Aitor, 2026-10-01: «Tiene que estar en el escaparate, que es la sección 1. Esos dos mockups, tanto el de la versión de escritorio como la versión de móvil, son los que tienen que ser interactivos. La de móvil es la versión del cliente, lo mismo que hay en la versión web, o sea, en el mockup web del entrenador.» Tres secciones, y cada una es una pareja real de la app: escritorio (entrenador) móvil (cliente) ───────────────────────── ───────────────────────── Entreno Entrenar Nutrición Nutrición Seguimiento Diario ⚠️ LAS DOS PANTALLAS ESTÁN ENLAZADAS EN LOS DOS SENTIDOS. Pulsar una pestaña arriba cambia las dos; y lo que se toca en el móvil -empezar el entreno, registrar una comida, mandar el check-in- se refleja en el escritorio. Esa es la demostración: no son dos capturas al lado, es un entrenador y un cliente en la misma app. ⚠️ TODAS LAS CIFRAS SON REALES, leídas de la cuenta de demo el 2026-10-01 (entrenador Álex Moreno · clienta Lucía Martín, gimnasio Fuerza Norte). Rutina «Torso / pierna 4 días», dieta «Mantenimiento activo» 1780 kcal -121 P · 196 CH · 57 G-, peso 63,8 kg con meta 62, 7 check-ins hechos y 1 pendiente. Nada está inventado y nada debe inventarse al tocarlo. ⚠️ TODO EN `cqw`, Y SOBRE DOS CONTENEDORES DISTINTOS. El lienzo de la ventana y la pantalla del móvil declaran cada uno `container-type`, así que `1cqw` es el 1 % de SU ancho. Es lo que deja que las dos pantallas encojan enteras con la escena sin una sola media query de tamaño. La referencia del lienzo son 823 px: un valor en px se pasa a cqw con `px / 823 * 100` -13 px son 1,58cqw-. */ .escaparate__lienzo { container-type: inline-size; /* ⚠️ Y `position: relative`, QUE NO SOBRA. La pantalla va `absolute` con `inset: 0`, y sin esto se cuelga del ancestro posicionado más cercano, que es `.escaparate__escena`: medía 991 px -la escena entera- en vez de los 821 del lienzo, y se salía por la derecha por debajo del móvil. `container-type` no crea contexto de posición; solo de consulta. */ position: relative; /* Deja de centrar la nota del hueco: ahora dentro va una pantalla que ocupa el lienzo entero. `place-items:center` la encogía al contenido. */ place-items: stretch; } /* ══ LAS CAPTURAS DE LA APP ════════════════════════════════════════════ ⚠️ POR QUÉ UNA FOTO Y NO CSS. La app está hecha en React Native y sus iconos son de Lucide; redibujarla a mano aquí obligaba a inventar cada trazo, y eso se nota: unas piezas salían y otras no. Aitor, 2026-10-01: «si luego ellos entran y no se ve de esa forma, es un error fatal». Con la captura eso es imposible por construcción, porque ES la app. Encima van zonas pulsables para que siga navegándose. */ .foto { display: none; position: absolute; inset: 0; } .escaparate__lienzo[data-modo="foto"] .foto { display: block; } .foto__img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; /* `cover` anclado arriba: con el marco ya en 16:10 y la captura hecha a 1440 × 900 no sobra nada. Si una captura viene más apaisada, lo que se pierde es el pie de la pantalla y nunca la tira ni una columna. */ object-fit: cover; object-position: left top; background: #ececed; } .foto__img[data-activa] { display: block; } /* Una zona pulsable: invisible, sobre la captura y en % de ella, para que siga cuadrando cuando el marco cambia de tamaño. */ .foto__zona { position: absolute; background: none; border: 0; padding: 0; border-radius: .94cqw; cursor: pointer; } .foto__zona:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; } /* ══ LA MISMA IDEA, EN EL TELEFONO ═══════════════════════════════════════ Las cuatro pantallas de la clienta, capturadas de la app. Van DEBAJO de la barra de estado -15cqw, lo mismo que usa `.app`-, porque la hora, la isla y los iconos los pone el mockup y no la captura. */ /* ⚠️ LA CAPTURA OCUPA LA PANTALLA ENTERA, no el hueco bajo la barra de estado, y es a proposito: en un iPhone la barra de estado va ENCIMA del contenido -la app le reserva el sitio con la safe area-, asi que la captura ya la trae reservada. `.ios-estado` se pinta encima con su `z-index: 2` y tapa la hora y el «◀ TestFlight» del aparato de verdad. ❌ Recortarle la barra a la captura fue un error: subia el contenido hasta la curva de la esquina y partia la insignia de la campana. */ .fotom { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; /* Por si una captura no cubriera el hueco entero. */ background: var(--papel); } /* ⚠️ AHORA LA PANTALLA UTIL ES TODO EL HUECO, y ya no recorta nada por abajo. Hizo falta mientras las capturas salian de un navegador, que no reserva el borde del home indicator. Estas vienen de un iPhone y lo traen puesto: la pildora flotante ya tiene sus 10 px de aire debajo. */ .fotom__util { position: absolute; inset: 0; } .fotom__img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; background: var(--papel); } .fotom__img[data-activa] { display: block; } /* ⚠️ Y HAY QUE ANULAR EL RELLENO DE ARRIBA, con un selector mas fuerte: `.ios-pantalla img` se lo pone a CUALQUIER imagen de dentro, porque lo necesitan las capturas sueltas de las otras secciones. Aqui el hueco ya empieza debajo de la barra de estado, asi que el relleno se sumaria dos veces: la pantalla bajaba 45 px y se comia la barra de pestañas. */ .ios-pantalla .fotom__img { padding-top: 0; } .fotom__zona { position: absolute; background: none; border: 0; padding: 0; border-radius: 2cqw; cursor: pointer; } .fotom__zona:focus-visible { outline: 2px solid var(--amarillo); outline-offset: -2px; } @keyframes demo-llega { from { opacity: 0; transform: translateY(-0.514cqw); } to { opacity: 1; transform: none; } } /* ══ EL MÓVIL DEL CLIENTE · las tres vistas enlazadas ═══════════════════ Reutiliza el bloque `.app` de más arriba -cabecera, tarjeta, días, ejercicios y barra de pestañas-, que se montó para esto. Aquí va lo que le faltaba: el conmutador de vistas y las pantallas de Nutrición y Diario. ⚠️ LA PANTALLA ES EL CONTENEDOR. `1cqw` pasa a ser el 1 % del ancho del cristal, no de la escena, que es lo que deja escribir toda la app en proporción y que encoja entera con el aparato. */ /* ⚠️ `container-type` AQUI, Y HACE FALTA: de el salen todos los `cqw` de la barra de estado y de la capa de capturas. Antes colgaba de `:has(.app)`, la app dibujada a mano; al quitarla el 1-oct-2026 habria desaparecido sin avisar y la hora, la isla y la pantalla se habrian ido de sitio. */ .escaparate__pantalla { display: block; padding: 0; container-type: inline-size; } /* ⚠️ `--pct` SE REGISTRA PARA PODER ANIMARSE. Una variable sin declarar es texto para el navegador, y un texto no se interpola: el aro y las barras saltaban de golpe. Registrada como ``, la transición funciona. Donde `@property` no exista, el valor se pone igual y lo que se pierde es solo el viaje. */ @property --pct { syntax: ''; inherits: false; initial-value: 0; } /* ── Lo que pasa en móvil ─────────────────────────────────────────────── */ /* ⚠️ EN MÓVIL LAS DOS PANTALLAS VIVAS SE VAN. La ventana del entrenador ya no estaba -`.escaparate__marco` se oculta a 700-, y el teléfono baja a `min(208px, 58%)`: dentro del cristal quedan unos 196 px, así que el texto de 14 px de la app se queda en 7. No se lee, y con el dedo no se puede tocar nada útil. Se cambia por una captura de la misma pantalla, que a ese tamaño se lee mejor porque el navegador la reduce con suavizado. Es la misma decisión que ya se tomó para el cristal de las tarjetas del switcher: lo que no funciona a 390 px no se enseña roto, se enseña de otra forma. ⚠️ Y LAS DOS TARJETAS FLOTANTES SIGUEN SALIENDO, que es lo que da la pieza de harbiz en móvil. */ /* ⚠️ Y AQUÍ VIVÍA UNA CAPTURA FIJA QUE TAPABA EL MOCKUP EN MÓVIL. Tenía sentido mientras la pantalla era un dibujo: a 208 px no se leía. Ahora la pantalla ES una captura de la app, así que se lee igual de bien a cualquier tamaño y el mockup se queda vivo también en el teléfono. Aitor, 2-oct-2026: «ponemos el interactivo parecido a como está ahora mismo en la versión de escritorio». */