— por eso el selector depende de que sean hermanos de

, no ancestros de los mensajes. Alcanza cualquier .mensaje-error--email/--alta/--mas sin importar cuán adentro de

esté, así que llega a los dos formularios por igual. */ #error-email:target ~ main .mensaje-error--email, #error-alta:target ~ main .mensaje-error--alta, #error-mas:target ~ main .mensaje-error--mas { display: block; } @media (min-width: 720px) { /* Input y botón, dos elementos independientes lado a lado — ya no una píldora con borde compartido. Separación clara entre los dos (--e-3), cada uno con su propia forma: el input se queda con la mayor parte del ancho (flex:1), el botón mide lo que le pide su etiqueta más el padding normal (flex:0 0 auto). El foco vuelve a ser individual: sin contenedor bordeado que envolver, no hace falta focus-within — cada uno marca el suyo con el :focus-visible global de base.css, sin overrides acá. */ .campo-email { /* 28rem dejaba al input compitiendo con el botón por lo que sobraba de una caja chica (algo así como 280px reales) — se ve como un campo secundario cuando es el elemento más importante de la página. 40rem le da al input flex:1 casi el doble de ancho real, y sigue entrando cómodo dentro de los 60rem del contenedor (hero y bloque-cierre) con margen visible a los costados. width:100% además del max-width: en el hero no hacía falta (el contenedor no fija align-items, así que estira por defecto), pero .bloque-cierre__contenido sí usa align-items:center para centrar la firma, y sin un ancho explícito el campo se encoge a su contenido en vez de crecer hasta el tope — medido: sin esto quedaba en 237px en el bloque 8 contra 640px en el hero, dos formularios con ancho distinto por el mismo cambio. */ flex-direction: row; align-items: center; gap: var(--e-3); width: 100%; max-width: 40rem; } .campo-email input { flex: 1; min-width: 0; } .boton { /* Reset del align-self:flex-start de mobile: en la fila horizontal el centrado vertical lo da el align-items:center de .campo-email de acá arriba. */ align-self: auto; flex: 0 0 auto; } } /* La foto de Diego todavía no existe (docs/PAGINAS.md). Vive en el bloque 6 ahora, junto a la columna de Diego — ya no en el hero. Mismo lenguaje de placeholder que el logo y la ilustración de /confirmacion: borde punteado, sin relleno. Proporción y alto son los mismos ya definidos antes (4:5, hasta 26rem en desktop): no se reinventan solo porque cambió de lugar. Cuando exista el archivo real, además del hace falta el contorno de docs/DETALLES.md #8 (1px al 10% de opacidad, outline-offset:-1px) — eso es para la foto de verdad, no para este placeholder punteado. */ .foto-placeholder { aspect-ratio: 4 / 5; border: var(--trazo) dashed var(--contorno); border-radius: var(--radio-control); width: 100%; max-width: 16rem; } /* ===== Bloques de puro texto (2 y 5) ===== Dos y cinco son "unas frases, nada más": mismo tratamiento para las dos, así que comparten una clase en vez de repetir la regla. Mismo ancho de contenedor y mismo padding lateral que el hero y el bloque 3 (medida-ancha, no medida-texto): centrado en su propia medida quedaba en un eje distinto al resto de la página, se leía de otra sección. El texto sigue con una medida de lectura acotada (34rem) para no estirarse a lo ancho de los 60rem del contenedor, pero arranca en el mismo borde izquierdo que todo lo demás, no centrado sobre sí mismo. */ .bloque-texto { max-width: var(--medida-ancha); margin-inline: auto; padding-inline: var(--e-4); padding-block: var(--ritmo-bloque); display: flex; flex-direction: column; gap: var(--e-4); text-align: left; } .bloque-texto p { max-width: var(--medida-texto); font-size: var(--t-l); line-height: var(--interlineado-subtitulo); color: var(--texto); } /* ===== Bloque 2 — El problema ===== Los cinco bloques de texto compartían ancho, tamaño y quedaban planos. Este es lo primero que se lee después del hero, pero en la jerarquía completa de la página pesa un escalón menos que los bloques 4 y 5 (que son la afirmación central) — t-2xl se queda como está, ya no es el bloque de texto más grande de la landing. Más ancho de línea igual (42rem contra los 34rem del resto) para que no se lea chico por comparación pese al escalón de menos. Sigue arrancando en el mismo borde izquierdo que todo lo demás: la asimetría es de tamaño y de ancho, no de eje. */ .bloque-problema p { max-width: 42rem; font-size: var(--t-2xl); line-height: var(--interlineado-titulo); } /* ===== Bloque 4 — Lo que no vas a encontrar ===== Único fondo distinto de toda la landing: es la excepción a propósito (docs/BRIEF-LANDING.md, bloque 4). El color se lo da la sección entera (full-bleed), el contenido adentro usa la misma clase .bloque-texto que el resto — mismo eje, mismo ritmo, la diferencia la hace el color, no la maqueta. */ .bloque-encontraras { background: var(--fondo-alterno); } /* Es el bloque que la persona tiene que recordar, y la jerarquía de la página lo pone al mismo peso que el bloque 5 (ver esa regla más abajo): --t-bloque-par en los dos, mismo valor a propósito, no una coincidencia. Antes usaba t-xl y quedaba por debajo del bloque 5 sin motivo — los dos son afirmaciones centrales, tienen que pesar igual. Ancho de línea (40rem) sin llegar a los 42rem del bloque 2: la jerarquía de tamaño ya los distingue (bloque 2 es un escalón más chico), no hace falta que el ancho también compita. No toca el padding-block: esa es la separación con el bloque 3, que quedó bien en una ronda anterior y no se toca. */ .bloque-encontraras .bloque-texto p { max-width: 40rem; font-size: var(--t-bloque-par); } /* ===== Bloque 5 — La promesa honesta ===== Rediseño completo, no ajuste sobre el anterior (que era un párrafo angosto de 24rem — esa idea se descarta entera). Las tres frases del copy son tres afirmaciones distintas, no un párrafo continuo, así que se maquetan como tal: cada una en su propio bloque, apiladas, separadas por mucho aire. El ritmo lento sale del espacio entre ellas, no del tamaño de letra ni de acortar la línea — por eso el ancho de lectura corre libre hasta donde el contenedor lo deja (mismo eje, mismo --medida-ancha que el resto de la página). Sin caja, sin fondo, sin motivo: eso ya se descartó en la ronda anterior y sigue descartado acá. */ .bloque-promesa { max-width: var(--medida-ancha); margin-inline: auto; padding-inline: var(--e-4); padding-block: var(--ritmo-bloque); display: flex; flex-direction: column; /* El espacio entre afirmaciones es el doble del ritmo entre bloques: acá el aire es el mensaje ("esto no es un párrafo, son tres cosas distintas"), no un simple separador de sección. */ gap: clamp(4rem, 2.8rem + 6vw, 8rem); text-align: left; } /* Cada afirmación con su cifra: mobile la cifra va encima (columna), desktop cuelga a la izquierda (fila, ver el media query de abajo). No son bullets ni tarjetas — sigue siendo prosa, el numeral es solo un ancla visual, por eso no hay lista ni caja acá. */ .bloque-promesa__item { display: flex; flex-direction: column; gap: var(--e-2); } /* La ronda anterior la dejó en 56-96px: terminó siendo lo más grande de toda la página, por encima incluso del título del hero, y eso invierte la jerarquía — el numeral tiene que anclar la frase, no dominarla. Ahora es un escalón real pero acotado sobre el párrafo que acompaña (--t-bloque-par, 31-42px): un ~12% más grande en desktop, apenas un poco más en mobile donde hay menos margen debajo del hero. Sigue por debajo del título del bloque 3 y de la firma del bloque 8 en todo el rango. --acento-texto, no el coral crudo de marca: a este tamaño sigue siendo texto grande a efectos de WCAG, pero el coral de marca (2.67:1) no llega ni al mínimo relajado de 3:1 — mismo criterio que el resto del sitio, nunca color de marca crudo como texto. */ .bloque-promesa__numero { font-size: clamp(1.9375rem, 1.3375rem + 2.67vw, 2.9375rem); /* 31 → 47 */ font-weight: var(--peso-titulo); line-height: 1; color: var(--acento-texto); } /* Mismo tamaño que el bloque 4 (--t-bloque-par): los dos pesan igual en la jerarquía de la página, ninguno le gana al otro. Antes era t-3xl y le ganaba al título del bloque 3 (el elemento firma), invirtiendo el orden — bajó un escalón para volver a quedar debajo. */ .bloque-promesa p { max-width: 42rem; font-size: var(--t-bloque-par); line-height: var(--interlineado-titulo); color: var(--texto); } @media (min-width: 720px) { /* Acá no hace falta esperar a un ancho mayor como en el bloque 6: el numeral es un carácter, no una etiqueta de varias palabras, así que entra cómodo al costado desde el mismo quiebre que usa el resto del sitio. */ .bloque-promesa__item { flex-direction: row; align-items: baseline; gap: var(--e-5); } .bloque-promesa__numero { flex: 0 0 auto; } } /* ===== Bloque 6 — Quién te habla · Para quién no es ===== Rediseño completo, no ajuste sobre las columnas iguales de la ronda anterior. La foto de Diego sangra por el borde izquierdo de la ventana — el único elemento de toda la landing que toca el borde — y por eso .bloque-quien no puede llevar el max-width/margin-inline /padding-inline que usa el resto de los bloques: ese contenedor centrado es justamente lo que hay que romper acá. El texto, en cambio, sigue viviendo dentro de su propio padding (.bloque-quien__ texto), así que solo la foto rompe el margen, no el bloque entero. */ .bloque-quien { display: flex; flex-direction: column; gap: var(--e-6); padding-block: var(--ritmo-bloque); } /* La foto ocupa el ancho completo de su columna en los dos layouts (mobile: todo el ancho de la ventana; desktop: el tercio que le da la grilla de abajo). El placeholder pierde acá el max-width:16rem y el border-radius que tiene en el resto del sitio: los dos son detalles de "objeto contenido" y esta foto, a propósito, no lo es. */ .bloque-quien__foto { width: 100%; } .bloque-quien__foto .foto-placeholder { width: 100%; max-width: none; border-radius: 0; } .bloque-quien__texto { padding-inline: var(--e-4); display: flex; flex-direction: column; gap: var(--e-6); } /* Cada etiqueta ("Quién te habla", "Para quién no es") va con su párrafo en un mismo grupo: mobile los apila (etiqueta encima), desktop ancho los pone lado a lado (etiqueta colgando a la izquierda, ver el media query de 960px más abajo). */ .bloque-quien__grupo { display: flex; flex-direction: column; gap: var(--e-2); } .bloque-quien__etiqueta { /* h3 en base.css viene en t-l/700 (pensado para subtítulos de sección); acá es una etiqueta chica, no un título. --acento-texto, no el coral crudo de marca (2.67:1, no sirve para texto). */ font-size: var(--t-s); font-weight: var(--peso-enfasis); color: var(--acento-texto); letter-spacing: var(--tracking-etiqueta); } .bloque-quien__grupo p { font-size: var(--t-m); line-height: var(--interlineado-cuerpo); color: var(--texto); max-width: var(--medida-texto); } /* Línea fina entre los dos grupos, en el color de contorno (no una opacidad reducida: el pedido fue "en el color de contorno", así nomás). Ancho completo del bloque de texto, no acotada a la medida de lectura del párrafo: separa las dos secciones, no una frase. */ .bloque-quien__separador { height: 1px; border: none; background: var(--contorno); } @media (min-width: 720px) { /* La foto pasa a ocupar un tercio de la ventana (1fr de 1fr+2fr) y sigue sin padding-inline propio, así que ese tercio izquierdo sigue tocando el borde. El texto se queda con los dos tercios restantes; column-gap es el único aire entre los dos, ya que .bloque-quien__texto no tiene padding-inline-start. */ .bloque-quien { display: grid; grid-template-columns: 1fr 2fr; column-gap: var(--e-6); row-gap: 0; align-items: start; } .bloque-quien__texto { padding-inline: 0 var(--e-4); } } /* Recién acá, no antes: a 720-959px la columna de texto (dos tercios de la ventana, menos la foto y el padding) todavía es angosta para colgar la etiqueta al costado sin apretar el párrafo. Se prueba primero al costado como pide la ronda, pero el ancho real donde entra cómodo empieza más tarde — medido, no supuesto. */ @media (min-width: 960px) { .bloque-quien__grupo { flex-direction: row; align-items: baseline; gap: var(--e-5); } .bloque-quien__etiqueta { flex: 0 0 8rem; } .bloque-quien__grupo p { flex: 1; min-width: 0; } } /* ===== Bloque 7 — Fechas ===== Rediseño completo: era una línea al tamaño de cuerpo con el mismo tratamiento (alineado a la izquierda) que los bloques de puro texto, y se perdía entre el bloque 6 (mucho peso visual) y la banda de cierre. Es la única información accionable de la página — el dato que la persona anota — así que deja de compartir .bloque-texto y pasa a tener su propia regla: centrado, un escalón de tamaño real (t-2xl, el mismo que el bloque 2) y mucho más aire arriba y abajo que el ritmo estándar entre bloques. */ .bloque-fechas { max-width: var(--medida-ancha); margin-inline: auto; padding-inline: var(--e-4); padding-block: clamp(5rem, 3rem + 5vw, 9rem); display: flex; justify-content: center; text-align: center; } .bloque-fechas p { max-width: 36rem; font-size: var(--t-2xl); line-height: var(--interlineado-titulo); color: var(--texto); } /* Las dos fechas son el dato en sí, no el resto de la frase: mismo --acento-texto que el resto de los acentos coral del sitio, con más peso (peso-titulo) para que se lean como el número que hay que anotar, no como una palabra más de la oración. */ .bloque-fechas__dato { color: var(--acento-texto); font-weight: var(--peso-titulo); } /* ===== Bloque 8 — Cierre ===== Pasa a ser una banda de coral pleno a todo el ancho, como el bloque 4 lo es en lino: el color lo pone la sección entera (full-bleed), el contenido adentro queda en su propio div centrado. Es la última superficie de color de la página, así que el padding-block es más generoso que el ritmo-bloque estándar — "aire real arriba y abajo", no el mismo respiro que separa cualquier otro par de secciones. */ .bloque-cierre { background: var(--acento); } .bloque-cierre__contenido { max-width: var(--medida-ancha); margin-inline: auto; padding-inline: var(--e-4); padding-block: clamp(5rem, 3rem + 6vw, 9rem); display: flex; flex-direction: column; align-items: center; gap: var(--e-6); text-align: center; } /* Redonda, no itálica: el asterisco del brief marca "esto es la firma de marca", no una instrucción tipográfica. --texto es el mismo par oscuro-sobre-coral que ya usa el botón en todo el proyecto — con la banda ahora en coral pleno (no una tarjeta chica), es el único color de la paleta que pasa contraste ahí. Números exactos, medidos: ver el mensaje de esta ronda. */ .bloque-cierre__firma { /* Tercero en la jerarquía de la página, detrás del hero y del bloque 3 — t-2xl (30-38) la dejaba igual de grande que el bloque 2 y las fechas, que están un escalón por debajo. --t-firma-cierre es su propio tamaño, entre el bloque 3 y los bloques 4/5. */ font-size: var(--t-firma-cierre); font-weight: var(--peso-titulo); line-height: var(--interlineado-titulo); color: var(--texto); max-width: var(--medida-texto); text-wrap: balance; } /* El input ya trae su propio fondo crema sólido siempre (regla base de .campo-email input, sin overrides acá): eso alcanza para que se distinga de la banda de coral, sin necesitar nada especial en este bloque. El botón sí necesita un color propio: coral sobre coral (el fondo normal de .boton) se funde con la banda entera. Oscuro lo separa del coral, y sigue siendo el mismo botón (mismo padding, radio, tipografía) que el del hero — cambia de color, no de forma. */ /* .bloque-cierre__contenido usa align-items:center para centrar la firma. Sin ancho propio, .hero__form se ve arrastrado por eso: en vez de estirarse, se encoge a su contenido (medido: 421px en vez de los 960px disponibles a 1280px de ancho), y el width:100% de .campo-email de más arriba termina resolviendo contra ese padre ya angosto — por eso el input dio corto acá aunque en el hero (que sí estira por defecto) funcionó. align-self:stretch fuerza a .hero__form a ocupar el ancho completo de .bloque-cierre__contenido pese al align-items:center del padre; align-items:center acá adentro (nuevo, propio de .hero__form) es lo que efectivamente centra .campo-email una vez que ya tiene ancho de sobra para hacerlo. */ .bloque-cierre .hero__form { align-self: stretch; align-items: center; } .bloque-cierre .boton { align-self: center; background: var(--oscuro); color: var(--fondo); } .bloque-cierre .boton:hover { background: color-mix(in srgb, var(--oscuro) 85%, white 15%); } /* .hero__nota (compartida con el hero) usa --texto-secundario, que sobre coral pleno mide ~2.08:1. Una píldora propia lo resolvía, pero son tres cajas apiladas (input, botón, nota) y la nota se leía como un botón secundario, no como pie de página. Se saca la caja: el color de texto directo tiene que llegar a 4.5:1 solo (texto chico, no cuenta como grande). --texto (oscuro) da 4.45:1, justo por debajo — un empujón mínimo hacia negro alcanza sin salirse de la familia de --oscuro: 4.75:1, medido. */ .bloque-cierre .hero__nota { color: color-mix(in srgb, var(--oscuro) 90%, black 10%); } /* Mismo problema que .hero__nota acá arriba, mismo arreglo: --acento- texto es un coral oscurecido, calibrado contra crema — sobre la banda de coral pleno del bloque 8 pierde casi todo el contraste contra su propio fondo. Se reemplaza por el mismo tono ya medido (4.75:1) en vez de inventar uno nuevo. */ .bloque-cierre .mensaje-error { color: color-mix(in srgb, var(--oscuro) 90%, black 10%); }