*{box-sizing:border-box;margin:0;padding:0} /* ══════════════ PALETA · muestreada de la ilustración ══════════════ Los diez colores salen literal de los píxeles de la imagen de referencia. Nada de lima Linktree: el verde acá es pasto (#83CE57), no neón. */ :root{ --crema:#F4EFE0; /* fondo de la ilustración · 49% */ --verde:#83CE57; /* la loma · 14% */ --coral:#FF6553; /* el sweater rojo · 8% */ --amarillo:#F4DE12; /* la falda · 6% */ --azul:#2696FF; /* las mangas · 5% */ --lila:#E8B9FF; /* la polera lila · 4% */ --arena:#DCD6C7; /* el pantalón beige · 3% */ --tinta:#272925; /* la línea negra · 3% */ --durazno:#FFB695; /* la piel · 2% */ --tierra:#B74C1F; /* las manos y el pelo · 1% */ /* El papel de las dos secciones sin color. Único valor de todo el archivo que no sale de la ilustración: es neutro frío (R-B=+2) donde el resto de la paleta es warm (crema y arena están en +20). Contra crema da 1.03:1 —misma luminancia, distinta temperatura— y eso normalmente se lee como un error. Acá no, y el motivo es el orden: el lema coral separa el hero (crema) de Cómo funciona (papel), y la banda verde separa Estilos (papel) de Preguntas (crema). Los dos papeles nunca se tocan, así que el ojo nunca los compara. Si algún día se reordenan las secciones y quedan pegados, esto se rompe. */ --papel:#F3F3F1; /* El verde de "Conoce". Mismo matiz que tu verde #83CE57 —97° contra 98°— pero llevado a 96% de luz: es el verde vuelto papel. */ --verde-papel:#F2FFEA; /* El papel del FAQ. A dE 0.8 de crema, o sea es prácticamente el mismo — pero crema ya no es fondo de ninguna sección, así que no choca con nada. Contra Crea (papel) da dE 6.7, y esas dos están en la 2 y la 6: no se tocan. */ --faq-papel:#F2EDDF; /* El fondo de "Crea": tu lila #E8B9FF llevado al 15% de luz, mismo matiz. Oscuro pero con temperatura — la sección tiene color propio en vez de ser un agujero. Lo medí: sobre este fondo las ocho muestras dan dE 92 contra él; sobre el arena que tenía, 55. El oscuro no tiene matiz que competirles; el beige sí, y les robaba. */ --lila-noche:#2E0F3D; /* El hero y la franja del nav, en un solo lugar. Ahora amarillo: sat 91%, tal cual sale de la ilustración, sin desaturar. El titular es tu #0E61AD — 4.59 sobre él, pasa. El corte con Crea (arena) da 1.06 de luminancia y eso asusta, pero miente: entre cromáticos el corte lo hace el croma, y el dE es 78. Se separan de sobra. */ --hero-bg:var(--amarillo); /* Los dos oscuros de los titulares. No son colores nuevos: son el azul y el tierra de la ilustración bajados de luz hasta pasar 5:1 contra su fondo más profundo (coral y azul). Sobre los fondos claros sobra contraste, y sobrar no es problema. */ --ease:cubic-bezier(.22,1,.36,1); --resorte:cubic-bezier(.34,1.56,.64,1); } /* ══════════════ EL SISTEMA: DOS COLORES POR SECCIÓN ══════════════ Cada sección declara --bg (el bloque) y --pop (el acento). Nada más. Todo lo de adentro — títulos, botones, tarjetas, blobs — se sirve de esas dos variables. La tinta no cuenta como color: es la línea negra que en la ilustración envuelve absolutamente todo. 1 HERO lima + bosque FUERTE 2 TIENDA VIVA faq-papel + verde calma 3 PREGUNTAS faq-papel + verde calma 4 FOOTER lima + bosque EL PUNTO FINAL Las dos del medio comparten papel Y acento: se leen como un solo bloque de papel entre los dos limas. Es una decisión tomada a propósito, no un descuido — pero si algún día molesta, la salida es mover Preguntas a --papel (#F3F3F1). Eran siete. Crea, Comparte y Vitrinas se fueron y en su lugar quedó una sola: la tienda de verdad adentro de un teléfono. Con cuatro secciones la regla se lee distinta pero es la misma: lima abre, lima cierra, y en el medio un solo bloque de papel que descansa. UNA sola regla para todas: fuerte, calma, fuerte, calma. Cada bloque de color descansa en uno de papel — es lo que hace legible a una revista. Antes no estaban al azar: estaban AMONTONADOS, que es peor. Las tres primeras eran fuertes y las tres siguientes apagadas. La página gritaba tres pantallas y susurraba tres. Pasaba porque cada fondo se decidió solo, respondiendo a algo distinto, y mi regla solo miraba que cada vecino cortara con el anterior. Eso atrapa errores pero no compone. Y resuelve sola la tensión de fondo: las secciones con color ADENTRO —Crea (las muestras) y Vitrinas (las plantillas)— ya no quedan pegadas. EL MARCO: amarillo abre y cierra. En el hero es el fondo con letra oscura; en el footer es la letra sobre fondo oscuro. Mismo par, dado vuelta, en los dos extremos. Y amarillo sobre tinta da 10.70 — el par de más contraste de toda la paleta, justo donde hace falta. ══════════════════════════════════════════════════════════════════ */ /* EL HERO · lima y bosque. --dark era #0E61AD (el azul) y --pop el coral. Los dos cambian: el fondo #F4DE12 → #CCE31A (lima) el titular #0E61AD → #204C14 (bosque) Medido sobre el lima: el titular 6.92, el nombre en tinta 10.19, el botón blanco sobre bosque 9.97. Los siete pasan. ══ Y EL --pop DEJA DE SER CORAL ══ El resalte del titular usa --pop de fondo. El coral sobre el lima da 2.11 — y el mínimo para un BLOQUE es 3. No se separa del fondo. Y como letra tampoco: 2.11 igual. El coral no sirve acá ni de fondo ni de letra. Va el bosque: el bloque se separa (6.92) y la letra crema se lee (8.68). El resalte es una INVERSIÓN del titular, no otro color — y eso lo hace más fuerte. */ .s-hero {--bg:#CCE31A; --pop:#204C14; --fg:var(--tinta); --dark:#204C14} .s-comparte{--bg:var(--azul); --pop:var(--amarillo);--fg:var(--tinta); --dark:#CCE31A} .s-estilos{--bg:#c74444; --pop:#c74444; --fg:#ffdcdc; --dark:#2E0F3D} .s-ana {--bg:var(--verde-papel);--pop:var(--verde); --fg:var(--tinta); --dark:#2A6408} .s-faq {--bg:var(--faq-papel);--pop:var(--verde); --fg:var(--tinta); --dark:#312B1E} .s-vit {--bg:var(--coral); --pop:var(--lila); --fg:var(--tinta); --dark:#004484} .s-foot {--bg:#CCE31A; --pop:#204C14; --fg:#272925} html{scroll-behavior:smooth} /* overflow-x:clip en vez de hidden — hidden convierte al body en contenedor de scroll y mata el position:sticky del nav y del índice lateral. clip recorta igual pero no crea contenedor. La línea 'hidden' queda de respaldo para navegadores sin soporte de clip. El fondo del body NO es decorativo: el nav vive fuera del hero y se lleva 14px de margen más su propia altura (~63px), así que arriba de todo queda una franja de ~77px donde no hay ninguna sección — se ve el body y nada más. Con el hero en crema y el body en crema eso era invisible; con el hero verde apareció la franja beige. El body toma el color del hero. */ body{font-family:'Montserrat',sans-serif;color:var(--tinta);background:var(--hero-bg); overflow-x:hidden;overflow-x:clip} .wrap{max-width:1180px;margin:0 auto;padding:0 22px;position:relative;z-index:2} .big{font-weight:900;letter-spacing:-.035em;line-height:1.02;color:var(--dark,var(--tinta))} .display{font-weight:900;letter-spacing:-.04em;line-height:.98;color:var(--dark,var(--tinta))} /* Titular relleno de color + contorno de tinta: así resuelve la ilustración los colores que solos no contrastarían (coral sobre crema = 2.5:1). */ /* El contorno de letra se fue. Estaba ahí para rescatar contraste —coral sobre crema da 2.52:1— pero ensuciaba cada titular. El reemplazo es el marcador: la palabra clave se apoya en una mancha del --pop y la letra vuelve a ser tinta plana (5:1 y más). El resto de los titulares van en tinta a secas: el color ya lo pone el bloque entero de la sección. */ /* Los marcadores del hero y del lema llevan color propio, distinto del resto de su titular: "en un link" en blanco y "Tuya de verdad" en coral. */ /* EL RESALTE · la letra en crema, no en blanco. ══ ESTO ESTABA MAL EN PRODUCCIÓN Y NUNCA LO MEDÍ ══ El HTML decía: con --pop:var(--coral). Blanco sobre coral = 2.9. El mínimo es 4.5. NO PASABA. Y es LA PALABRA del titular — la que resaltamos justamente porque es la más importante. Llevaba ahí desde que armamos la landing, porque "coral con blanco" suena bien. Pero el coral es CLARO: blanco sobre claro no se lee. Ahora --pop es el bosque y la letra va crema: 8.68. */ /* EL RESALTE · monocromo. Sin caja y sin subrayado: "en 2 minutos" es el mismo verde que "Tu tienda online," y —abajo— del mismo tamaño. El énfasis lo dan el salto de línea y el peso, nada más. El .mark queda como gancho por si más adelante vuelve algún tratamiento. */ .mark{color:var(--pop)} /* ══════════════ ESCALA FLUIDA ══════════════ Antes la tipografía daba un salto seco en 820px: 74px de titular pasaban a 42px de golpe, y entre 820 y 500 el texto quedaba con tamaño de escritorio en un ancho de teléfono. Ahora cada titular interpola solo entre 375px (el iPhone más chico que importa) y 1180px (el ancho del contenido). Los px del clamp son el mínimo real, no una sugerencia. */ /* El máximo bajó de 74 a 62 por una cuenta, no por gusto: la columna del texto mide ~560px y "en tu WhatsApp" en Montserrat Black a 74px mide 642. Se pasaba SIEMPRE a dos líneas. A 62 mide 538 y entra con aire. */ /* EL TITULAR · 92px de máximo, y el número lo medí, no lo elegí. Bajé a 62 hace días porque "Tu negocio," se partía en dos líneas. Pero lo estimé a ojo. Ahora bajé Montserrat, la instancié en peso 900 y medí la cadena de verdad: la columna del hero mide 575px "Tu negocio," a 62px → 368px ← estaba sobrando 200px "Tu negocio," a 92px → 546px "Tu negocio," a 97px → 576px ← acá se parte El techo real es 97. Voy a 92 y no a 97 porque a 97 el margen es de 1px: un navegador que redondee distinto, una versión de la fuente que cambie medio punto, y se parte. A 92 hay 29px, y eso aguanta. Probado en los 8 anchos, de 1440 a 375: entra en todos. */ /* EL TITULAR · 58px, no 92. El campo va a 86px. Medido, el titular entra hasta 86 en esta columna — pero si los dos miden lo mismo, no manda ninguno. El campo ES la acción. El titular es el contexto. */ .t-hero{font-size:clamp(36px,4.4vw + 10px,74px);line-height:1.0;margin-bottom:28px} /* > span y no span a secas. Con "span" agarraba TODOS los span de adentro — incluido el .mark del resalte. Eso lo volvía block, y su fondo es background-size:100%: el 100% pasaba a ser todo el ancho de la columna, no el del texto. Por eso el bloque verde se estiraba media pantalla a la derecha. Con "> span" toco solo los dos hijos directos —las dos líneas—. El .mark es nieto y se queda inline; un inline ajusta su fondo al texto, que es lo que hace falta. Y .rota{display:inline-block} pierde contra esto (0,2,1 vs 0,1,0), que es lo que quiero: la segunda línea tiene que ser un renglón propio. */ .t-hero > span{display:block} .t-band {font-size:clamp(32px, 2.73vw + 21.8px, 54px)} .t-foot {font-size:clamp(46px, 5.22vw + 26.4px, 88px)} .t-faq {font-size:clamp(28px, 1.49vw + 22.4px, 40px)} /* ══════════════ MOVIMIENTO ══════════════ Acá había un error silencioso. El revelado usaba `transform:translateY()`, pero las tres tarjetas de los pasos ya tienen `transform:rotate()` para abanicarse, y `.step:nth-child(1)` (0,2,0) le gana a `.reveal` (0,1,0): la traslación nunca se aplicaba. Las tarjetas solo hacían fundido, sin subir. Se veía flojo y no era obvio por qué. La solución no es pelear especificidad, es no usar `transform`: hoy `translate` y `scale` son propiedades independientes y se componen con el `transform` que ya esté puesto. La tarjeta rota y sube a la vez. */ .reveal{opacity:0;translate:0 26px; transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:var(--d,0ms)} .reveal.in{opacity:1;translate:none} .reveal-s{opacity:0;scale:.92; transition:opacity .6s var(--ease),scale .6s var(--ease);transition-delay:var(--d,0ms)} .reveal-s.in{opacity:1;scale:none} /* Las tarjetas entran con las dos cosas: suben y crecen. Es más movimiento que el del texto a propósito — un objeto llega, una frase se escribe. */ .reveal-c{opacity:0;translate:0 32px;scale:.96; transition:opacity .65s var(--ease),translate .65s var(--ease),scale .65s var(--ease); transition-delay:var(--d,0ms)} .reveal-c.in{opacity:1;translate:none;scale:none} @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} /* ENTRADA DEL HERO · en orden de lectura. Las dos líneas del título entran por separado —primero "Tu tienda online,", después "en 2 minutos"—. Luego la barra (la acción) y por último la microcopia. El teléfono llega en paralelo, un pelo después del título, como el producto que aparece cuando el mensaje ya se leyó. */ .hero .t-hero>span,.hero .claim-bar,.hero .cta-nota{animation:rise .85s var(--ease) both} .hero .t-hero>span:nth-child(1){animation-delay:0s} .hero .t-hero>span:nth-child(2){animation-delay:.12s} .hero .claim-bar{animation-delay:.34s} .hero .cta-nota{animation-delay:.52s} @keyframes float{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-14px) rotate(.6deg)}} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} .reveal,.reveal-s,.reveal-c{opacity:1;translate:none;scale:none} html{scroll-behavior:auto} } /* ══════════════ FORMAS · el vocabulario de la ilustración ══════════════ Manchas planas de borde orgánico, sin sombra ni degradado, en el --pop de su sección. Puro relleno, como las nubes y la loma del dibujo. */ .blob{position:absolute;background:var(--pop);pointer-events:none;z-index:0} .blob-a{border-radius:58% 42% 47% 53%/44% 51% 49% 56%} .blob-b{border-radius:41% 59% 62% 38%/54% 39% 61% 46%} .dot{position:absolute;border-radius:50%;background:var(--pop);pointer-events:none;z-index:0} /* ══════════════ NAV · vidrio ══════════════ El nav tenía blur pero encima un borde de tinta de 2px y sombra dura: eso es un sticker, no un vidrio. Y al hacer scroll se iba a crema al 90%, o sea dejaba de ser translúcido justo cuando más lo necesita. Un vidrio creíble son cuatro capas, no una: el blur que difumina lo de atrás, la saturación que revive el color que el blur apaga, un borde de luz blanca (el canto del vidrio) y un brillo interno arriba (el reflejo). La sombra pasa a ser difusa y separada — un vidrio flota, no se pega. */ /* padding-top respeta la muesca/isla de los iPhone en horizontal */ /* FIXED Y NO STICKY, y no es un cambio de comportamiento. Con top:14px y margin-top:14px el nav ya estaba pegado desde el primer píxel: se comportaba como fixed. La diferencia es que OCUPABA LUGAR en el flujo, y ese lugar era una franja del — amarillo puro, sin nubes, porque .hero{overflow:clip} las recortaba en su borde. Se veía la costura: una banda de amarillo más fuerte arriba, y del lado izquierdo se notaba más porque ahí no hay blob que disimule. Fuera del flujo, el hero arranca en el tope, reserva el espacio del nav con su propio padding-top, y las nubes llegan hasta arriba. No hay costura porque ya no hay dos fondos. */ .nav{position:fixed;top:14px;left:0;right:0;z-index:50;margin:0 auto;max-width:1180px; padding:0 max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left))} /* ══════════════════════════════════════════════════════════════════════ EL NAV · BLANCO ARRIBA, VIDRIO AL BAJAR Antes era vidrio siempre. Y arriba del todo el vidrio no hace nada: detrás solo tiene el amarillo liso del hero, así que no hay nada que difuminar. Un efecto que no tiene qué atrapar se paga sin cobrar — y backdrop-filter cuesta caro en un teléfono: obliga a componer una capa de más en cada cuadro. Blanco arriba. Vidrio cuando empieza a pasar contenido por debajo, que es cuando el vidrio recién tiene trabajo. El disparador es .stuck, que ya existía a los 30px de scroll. No inventé mecanismo: invertí qué hace cada estado. ══════════════════════════════════════════════════════════════════════ */ .nav-in{ position:relative;isolation:isolate;overflow:hidden;border-radius:999px; padding:12px 14px 12px 26px;display:flex;align-items:center;justify-content:space-between; background:#fff; border:1px solid rgb(39 41 37/.1); box-shadow:0 8px 26px rgb(39 41 37/.1); transition:padding .35s var(--ease),background .35s var(--ease), border-color .35s var(--ease),box-shadow .35s var(--ease)} /* El reflejo: una luz que cae desde el vértice superior izquierdo */ .nav-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background:radial-gradient(115% 80% at 12% -10%,rgb(255 255 255/.6),transparent 55%)} /* Al hacer scroll se compacta y el vidrio se espesa — pero sigue siendo vidrio: el fondo de la sección que pasa por debajo lo tiñe. Ahí está la gracia. */ /* AL BAJAR · el vidrio, que ahora sí tiene qué atrapar. Y se achica: 12→9px de relleno. Arriba el nav es un objeto; abajo es una herramienta que no debe estorbar. */ .nav.stuck .nav-in{padding:9px 12px 9px 22px; background:linear-gradient(135deg,rgb(255 255 255/.62),rgb(255 255 255/.34)); backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%); border-color:rgb(255 255 255/.55); box-shadow:inset 0 1px 0 rgb(255 255 255/.75),inset 0 -1px 0 rgb(255 255 255/.18), 0 10px 34px rgb(39 41 37/.11)} /* Respaldo: si el sistema pide menos transparencia, o si el navegador no soporta backdrop-filter, el vidrio se cae y hay que darle fondo sólido. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav-in,.nav.stuck .nav-in{background:rgb(244 239 224/.97)} } @media(prefers-reduced-transparency:reduce){ .nav-in,.nav.stuck .nav-in{background:var(--crema);border-color:rgb(39 41 37/.14); backdrop-filter:none;-webkit-backdrop-filter:none} } /* ══════════════ LA MARCA ══════════════ El logo es la palabra, y el punto del dominio es la marca. Ese punto no es decorativo: es el que separa "abre" de "tienda" y el que convierte el nombre en la URL. Va en el lugar EXACTO donde va el punto de abretienda.com — quien conoce el dominio lee la URL; quien no, lee "Abretienda" con un punto lindo. Nadie lee algo mal. Va en minúsculas porque así se escriben los dominios. EL PUNTO ES VERDE, Y NO POR GUSTO: "abre" + punto verde = ABIERTO. Todo local del mundo tiene un cartel que dice ABIERTO o CERRADO, y el verde es abierto. El punto deja de ser un color y pasa a significar algo. Y de paso el "punto verde = en línea" de WhatsApp juega a favor: tu producto promete que la tienda está viva en dos minutos. El coral se fue por lo contrario: está a dE 18.6 del rojo de error. No es el mismo color, pero a 9px con un anillo negro el ojo no mide dE — lee "punto rojo chico" y eso significa notificación o falla. El costo, medido: sobre el amarillo del hero el verde da dE 50 y el coral daba 85. Verde y amarillo son vecinos en el círculo, así que el punto salta menos. Vale igual — el argumento del "abierto" pesa más. EL ANILLO NO ES OPCIONAL: verde sobre el amarillo del hero da 1.40 de luminancia — el punto solo se disolvería. Con el canto de tinta se define igual. Es la misma regla de la ilustración: color plano, línea negra. Y sobre el negro del footer la línea se invierte a papel. Los dos números para tocar están acá: el tamaño del punto y el grosor del anillo. A .3em el punto mide ~2.3 veces un punto tipográfico — se lee como marca y no como puntuación. */ /* EL AIRE ENTRE LAS LETRAS: −0.02em, no −0.045em. El −0.045 lo elegí mirando el hero, a 34px, donde el apretado se ve bien. Pero un logo no se elige en un tamaño: se elige en el PEOR. Y el peor es 13px, en el pie de cada tienda — que es donde más gente lo ve: los 300 clientes de Camila, no los que entran al panel. Ahí −0.045em pega la "e" con la "n". La diferencia a 13px es medio píxel por letra. Suena a nada; son 10 letras, o sea 5px, y el ojo lo ve. No fui a 0: ahí pierde la densidad que hace que un logo se lea como un objeto y no como una palabra suelta. −0.02 es lo justo. */ .marca{--punto:.3em; --anillo:1.5px; --anillo-color:var(--tinta); display:inline-flex;align-items:baseline;font-weight:900;font-size:21px; letter-spacing:-.02em;color:var(--tinta);text-decoration:none} .marca .p{flex:none;box-sizing:content-box; width:var(--punto);height:var(--punto);border-radius:50%; background:var(--verde);border:var(--anillo) solid var(--anillo-color); margin:0 .1em; transition:transform .4s var(--ease)} .marca:hover .p{transform:scale(1.35)} .nav-links{display:flex;gap:26px;font-size:14.5px;font-weight:700} .nav-links a{color:var(--tinta);text-decoration:none;position:relative} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;background:var(--coral); transform:scaleX(0);transform-origin:right;transition:transform .32s var(--ease)} .nav-links a:hover::after{transform:scaleX(1);transform-origin:left} .nav-cta{display:flex;gap:10px;align-items:center} /* Dentro del vidrio los botones también se ablandan: el borde de tinta y la sombra dura del resto de la página le devolverían el aspecto de sticker. */ .nav .btn{border-color:rgb(39 41 37/.16);box-shadow:none} .nav .btn:hover{box-shadow:0 4px 12px rgb(39 41 37/.16)} .nav .btn:active{transform:scale(.97);box-shadow:none} .nav .btn-ghost{background:rgb(255 255 255/.4)} .nav .btn-ghost:hover{background:rgb(255 255 255/.7)} .nav .btn-ink{border-color:transparent} /* ══════════════ BOTONES · relleno plano + línea + sombra dura ══════════════ */ .btn{border:2px solid var(--tinta);border-radius:999px;font-family:inherit;font-weight:800;cursor:pointer; text-decoration:none;display:inline-flex;align-items:center;justify-content:center;position:relative; overflow:hidden;color:var(--tinta);box-shadow:0 4px 0 var(--tinta); transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .25s} .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tinta)} .btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--tinta)} .btn-ghost{background:transparent;padding:9px 18px;font-size:14px} .btn-ghost:hover{background:rgb(39 41 37/.07)} .btn-ink{background:var(--tinta);color:var(--crema);padding:9px 20px;font-size:14px;box-shadow:0 4px 0 rgb(39 41 37/.35)} .btn-ink:hover{box-shadow:0 6px 0 rgb(39 41 37/.35)} .btn-ink:active{box-shadow:0 0 0 rgb(39 41 37/.35)} /* El CTA siempre viste el --pop de su sección: la acción cambia de color al bajar */ /* EL BOTÓN DEL HERO · bosque con letra blanca, sin canto. El canto de tinta y la sombra dura eran para el CORAL, que sobre el amarillo daba 2.11 y necesitaba ayuda para separarse del fondo. Un botón bosque sobre lima da 6.92: se separa solo. El canto ya no trabaja — decora. */ .btn-pop{background:var(--pop);padding:14px 26px;font-size:16px} .cta-hero{background:#204C14;color:#fff;border:0;border-radius:999px; padding:17px 34px;font-family:inherit;font-size:16.5px;font-weight:900;cursor:pointer; box-shadow:0 6px 22px -4px rgb(32 76 20/.45);margin-top:24px; transition:transform .18s var(--resorte),box-shadow .18s var(--ease)} .cta-hero:hover{transform:translateY(-3px);box-shadow:0 12px 30px -6px rgb(32 76 20/.55)} .cta-hero:active{transform:translateY(0)} /* La microcopia que remata el botón: una línea. El ícono de WhatsApp junto al texto, quieto —un ícono de marca que late se ve raro—. Antes había una segunda línea ("sin web, sin diseñador"), pero repetía lo que el titular ya dice; se fue para que quede una sola idea de apoyo. */ .cta-nota{display:flex;align-items:center;gap:7px;margin-top:13px; font-size:14px;font-weight:700;letter-spacing:-.01em;color:#2C4A1C} .cta-nota-ic{width:16px;height:16px;flex:none} .btn-big{padding:16px 32px;font-size:17px} .btn-shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgb(255 255 255/.5),transparent);transform:skewX(-20deg)} .btn-shine:hover::after{animation:shine .85s var(--ease)} @keyframes shine{to{left:130%}} /* ══════════════ MENÚ MÓVIL ══════════════ Bajo 820px v3 hacía .nav-links{display:none} y listo: cuatro secciones de la página quedaban sin navegación en el 60% del tráfico. El panel es del mismo vidrio que la píldora — misma receta de blur, saturación y canto de luz — para que se lea como si la píldora se desplegara. */ .nav-burger{display:none;flex:none;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer; background:rgb(255 255 255/.4);position:relative;transition:background .25s} .nav-burger:hover{background:rgb(255 255 255/.7)} .nav-burger i{position:absolute;left:13px;width:18px;height:2.5px;border-radius:2px;background:var(--tinta); transition:transform .34s var(--ease),opacity .2s var(--ease)} .nav-burger i:nth-child(1){top:15px} .nav-burger i:nth-child(2){top:21px} .nav-burger i:nth-child(3){top:27px} .nav.open .nav-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav.open .nav-burger i:nth-child(2){opacity:0} .nav.open .nav-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .nav-sheet{ position:absolute;left:22px;right:22px;top:calc(100% + 8px);z-index:-1; border-radius:26px;padding:10px;overflow:hidden; background:linear-gradient(135deg,rgb(255 255 255/.62),rgb(255 255 255/.34)); backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%); border:1px solid rgb(255 255 255/.55); box-shadow:inset 0 1px 0 rgb(255 255 255/.8), 0 14px 44px rgb(39 41 37/.18); /* Cerrado no basta con opacity:0 — visibility saca el panel del foco del teclado y del lector de pantalla, que si no siguen navegando algo invisible. */ opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center; transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s .28s} .nav.open .nav-sheet{opacity:1;visibility:visible;transform:none;transition-delay:0s} .nav-sheet a:not(.btn){display:block;padding:14px 16px;border-radius:16px;text-decoration:none; color:var(--tinta);font-size:16px;font-weight:700;transition:background .2s} .nav-sheet a:not(.btn):active{background:rgb(255 255 255/.6)} .nav-sheet .sep{height:1px;background:rgb(39 41 37/.1);margin:8px 12px} .nav-sheet .btn{width:100%;margin-top:6px;padding:13px 18px;font-size:15px} @media(min-width:821px){.nav-sheet,.nav-burger{display:none}} @media(max-width:820px){ .nav-links{display:none} .nav-burger{display:block} /* "Iniciar sesión" se va al panel; "Crear gratis" se queda a la vista. Esto es una landing: el CTA persistente en el encabezado paga. Hice la cuenta a 400px — 18 de relleno + 112 de marca + 112 de botón + 44 de hamburguesa + 26 de huecos = 312 sobre 356 disponibles. Entra. */ .nav-cta .btn-ghost{display:none} .nav-cta{gap:8px} .nav-cta .btn-ink{padding:9px 16px;font-size:13.5px} .nav-in{padding:8px 8px 8px 18px;gap:8px} .nav.stuck .nav-in{padding:8px 8px 8px 18px} } /* Bajo 400px ya no entra: el botón se va al panel y queda solo la hamburguesa. El CTA del hero está a un dedo de distancia igual. */ @media(max-width:400px){ .nav-cta{display:none} .logo{font-size:19px} } /* Pastilla de acento: sobre fondo pálido, el coral/verde/azul no dan contraste para texto chico (verde sobre crema = 1.67:1). Por eso el color nunca es la letra: es la mancha, y la letra va en tinta. */ .pill{display:inline-block;background:var(--pop);border:2px solid var(--tinta);border-radius:999px; padding:6px 14px;font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta)} /* ══════════════ HERO · crema + coral ══════════════ */ /* EL HERO EMPIEZA ARRIBA DE TODO, y el nav flota encima. Antes el nav era hermano del hero, así que la franja donde vive era el fondo del — amarillo puro. Y el hero, abajo, estaba aclarado por las nubes. Se veía la costura: una banda de amarillo más fuerte arriba, y del lado izquierdo se notaba más porque ahí no hay blob que disimule. Las nubes las tenía en .cielo{inset:-10%} justamente para que se salieran por arriba y taparan eso. Pero .hero tiene overflow:clip y las recortaba en su propio borde: el -10% no hacía nada. Ahora el hero arranca en el tope y reserva el lugar del nav con su relleno. El nav flota sobre las nubes, no sobre el body. No hay costura porque no hay dos fondos. */ .hero{padding:118px 0 104px;position:relative;background:var(--bg); overflow:hidden;overflow:clip} /* ACÁ VIVÍAN LOS DOS BLOBS DEL HERO Y LOS SAQUÉ. Estaban al 42% y al 32%. Todos los demás de la página andan entre 16% y 22% — estos dos eran los únicos gritados, y la razón está escrita en el comentario que borré con ellos: "Sobre amarillo se evapora —los dos son claros— así que sube a 42%" O sea: los subí porque no se veían sobre el amarillo PLANO. Y el amarillo dejó de ser plano el día que le puse nubes. El número sobrevivió a su motivo, y el comentario que lo justificaba pasó a ser mentira. Peor: el blob-a de 420px estaba justo detrás del teléfono. Era lo primero que te llevaba el ojo, compitiendo con lo único que la primera pantalla tiene que mostrar. No los bajé al 12%: un elemento al 12% es un elemento que no te animaste a borrar. Queda ahí, no se ve, y en un mes nadie sabe por qué está. Si la esquina queda vacía, volver a ponerlos son treinta segundos. Nunca al revés. */ .hero .d1{width:14px;height:14px;left:52%;top:44px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center} .hero h1{color:var(--dark)} /* El titular ya no rota: se lee. Dejo el .rota porque el HTML lo usa — si algún día vuelve el temporizador, el nowrap y el min-width ya están resueltos. */ /* UN SOLO TAMAÑO. Las dos líneas van iguales: "Tu tienda online," y "en 2 minutos" al mismo cuerpo. La primera línea es la más larga, así que manda el ancho: con el techo del titular en 58px entra en un renglón con margen en la columna. Sigue siendo una frase; el salto de línea y el peso alcanzan sin jerarquía de cuerpo. */ .rota{display:inline-block;position:relative;white-space:nowrap; font-size:1em;letter-spacing:-.03em} /* ══════════════════════════════════════════════════════════════════════ EL CAMPO · lo más grande de la página Antes era un input de 18px al final de una pastilla, con "abretienda.com/" delante. El campo es LA ACCIÓN de este hero — y medía menos que el subtítulo. Ahora mide 86px y no tiene la dirección delante: la dirección aparece abajo, escrita entera, mientras teclea. Decirla dos veces era repetirse. ══ ANCHO FIJO ══ 6.5em, siempre. Antes crecía con el texto y tenía un bug: en reposo usaba 8ch y con la primera letra caía a 2ch — se achicaba a un cuarto y arrastraba todo lo de abajo. Y el ch era una trampa además: ch = el ancho del "0", que en Montserrat Black mide 64px a 92px, mientras las minúsculas miden la mitad. Medido con nombres reales a 86px: ana 157 · camila 282 · hilorojo 324 · tallergreda 468. 6.5em = 559. Los más largos se desplazan adentro, como en cualquier campo, y la línea de abajo los muestra enteros. Un campo que cambia de tamaño mientras escribís no se ve profesional: se ve roto. Los campos no respiran. ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ LA ETIQUETA DEL CAMPO El campo se quedó sin etiqueta y fue mi error: la teníamos y la perdí entre dos cambios que eran correctos por separado. antes → "Crea tu tienda en 2 minutos:" ← esa ERA la etiqueta [tunegocio] "Escribe el NOMBRE DE TU NEGOCIO y ya tienes dónde…" Volvió "Tu negocio, en un solo link" (el titular tiene que decir tu diferencia) y volvió WhatsApp al subtítulo (es lo único que te separa de Linktree). Los dos cambios estaban bien. Pero entre los dos se llevaron la etiqueta puesta. Y quedó un campo donde lo único que dice qué va ahí es el placeholder que se escribe solo — que es una PISTA, no una instrucción: si no lo mirás en el momento justo, no hay nada. Un campo sin etiqueta es un campo roto. No es una opinión de diseño: es lo primero de cualquier formulario. ══ Y ES UN