/* ============================================================ BOLETÍN · SELECTOR DE BLOQUES DEL PARTE (27-ago-2026) ============================================================ Reemplaza al formulario de una sola línea (correo + botón) que vivía en home.v7.css §8. Ahora la persona ARMA su parte: marca los bloques que quiere recibir, ve un ejemplo de cada uno, y recién después escribe el correo. Va DESPUÉS de tema-noche.v2.css en el a propósito, rompiendo la regla de "el tema va último": tema-noche estiliza el input del boletín con `.pagina-landing .boletin input[type="email"]` (0,3,1) y los estados nuevos (:focus, .err) tienen que poder ganarle. Todo lo de este archivo está acotado a #bloque-boletin, así que no afecta al resto del tema. Es noche-nativo: usa las variables --noche-* que declara tema-noche.v2.css sobre .pagina-landing, siempre con fallback al valor claro por si alguien ejecuta el revertir documentado allá (borrar el del tema) — sin el fallback esta sección quedaría con colores vacíos, que es peor que quedar clara. ============================================================ */ /* La cabecera del bloque sigue centrada (.boletin de home.v7.css); la lista de opciones no: son filas de lectura, van a la izquierda. */ .boletin__form { max-width: 640px; /* 480px era para una sola línea; ya no */ text-align: left; } /* ===== LISTA DE BLOQUES ===== */ .parte-bloques { margin: 0; padding: 0; border: 0; } .parte-bloques__legend { display: block; padding: 0; margin: 0 0 .85rem; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--noche-cian, #2E7D7B); } .parte-bloques__vacio { margin: 0; font-size: .9rem; color: var(--color-niebla); } /* ===== UNA OPCIÓN ===== */ .parte-op { margin-bottom: .55rem; border: 1px solid var(--noche-borde, rgba(21, 59, 56, .14)); border-radius: 12px; background: var(--noche-tarjeta, #ffffff); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .parte-op.is-activa { border-color: var(--noche-borde-vivo, rgba(46, 125, 123, .55)); box-shadow: 0 0 0 1px var(--noche-borde, rgba(21, 59, 56, .14)), 0 10px 28px rgba(4, 12, 11, .35); } .parte-op__fila { display: flex; align-items: flex-start; gap: .8rem; padding: .95rem 1.05rem; cursor: pointer; } /* El checkbox real sigue en el DOM y sigue siendo focusable: se esconde a la vista, no a la navegación por teclado ni al lector de pantalla. */ .parte-op__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .parte-op__caja { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 2px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--noche-borde-vivo, rgba(21, 59, 56, .3)); border-radius: 6px; background: transparent; transition: background .18s var(--ease), border-color .18s var(--ease); } .parte-op.is-activa .parte-op__caja { background: var(--noche-cian, #2E7D7B); border-color: var(--noche-cian, #2E7D7B); } .parte-op__caja svg { width: 12px; height: 12px; opacity: 0; transition: opacity .18s var(--ease); } .parte-op.is-activa .parte-op__caja svg { opacity: 1; } /* Foco: mismo cian del resto del sitio, pero dibujado sobre la caja porque el input real es invisible. */ .parte-op__input:focus-visible + .parte-op__caja { outline: 2px solid var(--noche-cian, #2E7D7B); outline-offset: 2px; } /* Ícono del bloque: SVG de trazo, no emoji — ninguna página del sitio usa emoji. El worker sí los usa en el correo de confirmación; ahí el trazo no sobrevive a los clientes de correo. */ .parte-op__icono { flex: 0 0 auto; display: flex; width: 22px; height: 22px; margin-top: 1px; color: var(--noche-cian, #2E7D7B); } .parte-op__icono svg { width: 100%; height: 100%; } .parte-op__texto { flex: 1 1 auto; min-width: 0; } .parte-op__titulo { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.35; letter-spacing: -0.015em; font-feature-settings: "ss01", "ss02"; color: var(--color-crema); } .parte-op__detalle { display: block; margin-top: .15rem; font-size: .86rem; line-height: 1.5; color: var(--color-niebla); } /* ===== VISTA PREVIA (solo al marcar) ===== */ .parte-op__previa { display: none; padding: .9rem 1.05rem 1rem 3.4rem; border-top: 1px solid var(--noche-borde, rgba(21, 59, 56, .14)); background: rgba(93, 231, 214, .05); } .parte-op.is-activa .parte-op__previa { display: block; } .parte-op__rotulo { margin: 0 0 .45rem; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--noche-cian, #2E7D7B); } .parte-op__dato { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--color-crema); } .parte-op__consejo { margin: .5rem 0 0; padding-left: .75rem; border-left: 2px solid var(--noche-borde-vivo, rgba(46, 125, 123, .55)); font-size: .88rem; line-height: 1.55; color: var(--color-niebla); } /* ===== CIERRE: CORREO Y ENVÍO ===== */ .parte-cierre { margin-top: 1.4rem; padding: 1.3rem 1.3rem 1.4rem; border: 1px solid var(--noche-borde, rgba(21, 59, 56, .14)); border-radius: 12px; background: var(--noche-tarjeta, #ffffff); } .parte-cierre__label { display: block; margin-bottom: .5rem; font-size: .85rem; font-weight: 600; color: var(--color-crema); } /* Fondo y borde los pone tema-noche (`.pagina-landing .boletin input[type="email"]`); acá van forma y tipografía, que el tema no toca. El .err necesita (0,4,0) para ganarle a ese borde: por eso lleva .pagina-landing delante. */ .boletin__correo { width: 100%; padding: .85rem 1rem; font-family: var(--font-body); font-size: 1rem; border-radius: 8px; transition: border-color .2s var(--ease); } .pagina-landing .boletin .boletin__correo.err { border-color: #FF7A6B; /* 4.6:1 sobre #0F2725 — el rojo del tema claro no se ve de noche */ } .parte-cierre__conteo { margin: .85rem 0 0; font-size: .85rem; color: var(--color-niebla); } .parte-cierre__btn { display: block; width: 100%; margin-top: .9rem; border: none; cursor: pointer; font-family: var(--font-body); text-align: center; } .parte-cierre__btn:disabled, .boletin__correo:disabled { opacity: .55; cursor: not-allowed; } .boletin__msg { margin: .8rem 0 0; font-size: .85rem; } .boletin__msg.is-error { color: #FF7A6B; } /* ===== CONFIRMACIÓN ===== home.v7.css pintaba este bloque para fondo claro: texto --color-bosque-profundo (#153B38) sobre el panel noche daba ~1.3:1, o sea invisible. Acá se repinta entero para la noche. Es el estado más importante del flujo: dice que falta apretar el botón del correo, y si no se lee, la persona cree que ya quedó suscrita. */ .boletin__ok { max-width: 640px; margin: 1.75rem auto 0; padding: 1.2rem 1.4rem; border-radius: 12px; text-align: left; background: rgba(93, 231, 214, .07); border: 1px solid var(--noche-borde-vivo, rgba(46, 125, 123, .55)); color: var(--color-crema); font-size: .98rem; font-weight: 400; line-height: 1.6; } .boletin__ok::before { content: none; } /* el ✓ heredado desalineaba el título */ .boletin__ok-titulo { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em; font-feature-settings: "ss01", "ss02"; color: var(--noche-cian, #2E7D7B); } .boletin__ok-titulo::before { content: '✓'; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--noche-cian, #2E7D7B); color: #071615; font-size: .8em; font-weight: 700; } .boletin__ok p { margin: 0 0 .55rem; } .boletin__ok p:last-child { margin-bottom: 0; } .boletin__ok strong { color: var(--color-crema); font-weight: 600; } .boletin__ok-fino { font-size: .86rem; color: var(--color-niebla); } /* ===== MÓVIL ===== */ @media (max-width: 560px) { .parte-op__fila { padding: .85rem .9rem; gap: .7rem; } .parte-op__previa { padding: .85rem .9rem .9rem 1.1rem; } .parte-cierre { padding: 1.1rem 1rem 1.2rem; } } /* La transición de las tarjetas es la única animación nueva; el resto de la sección revela con .rev, ya cubierto en secciones.v1.css. */ @media (prefers-reduced-motion: reduce) { .parte-op, .parte-op__caja, .parte-op__caja svg, .boletin__correo { transition: none; } }