/* ========================================================================= KAIRIS — Newsletter (captura de correo) Componente aislado: se carga solo en las páginas que llevan el formulario. Depende de los tokens de css/styles.css (colores, radios, tipos), así que este archivo va SIEMPRE después de styles.css en el . ========================================================================= */ .newsletter { background: var(--bg-paper); padding: var(--section-y-sm) 0; } .newsletter__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; background: var(--bg-canvas); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); } .newsletter__eyebrow { display: inline-block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-primary); opacity: 0.72; margin-bottom: 14px; } .newsletter__titulo { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 12px; } .newsletter__titulo em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-human-deep); } .newsletter__texto { margin: 0; color: var(--text-secondary); max-width: 46ch; } /* ------------------------------------------------------------------------- Formulario ------------------------------------------------------------------------- */ .newsletter-form { margin: 0; } .newsletter-form__campo { display: block; margin-bottom: 12px; } .newsletter-form__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); } .newsletter-form__input { width: 100%; min-height: 52px; padding: 0 16px; /* --line-soft (1,32:1) vale para tarjetas, no para un control: el borde es el único límite visible del campo y necesita 3:1 (WCAG 1.4.11). rgba(23,23,20,.5) sobre --bg-canvas = 3,31:1. */ border: 1.5px solid rgba(23, 23, 20, 0.5); border-radius: var(--radius-sm); background: var(--bg-paper); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; /* 16px evita el zoom automático de iOS al enfocar */ line-height: 1.4; } .newsletter-form__input::placeholder { /* Sin opacity: con .8 el color efectivo caía a 4,24:1 sobre --bg-paper. El token solo ya da 6,86:1. */ color: var(--text-secondary); } .newsletter-form__input:hover { border-color: var(--text-secondary); } /* Marca de error solo cuando el navegador ya ha validado (no al escribir) */ .newsletter-form__input:user-invalid { border-color: var(--accent-human-solid); } .newsletter-form__boton { width: 100%; min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill); background: var(--bg-ink); color: var(--text-on-ink); font-family: var(--font-display); font-size: 15px; font-weight: 650; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .newsletter-form__boton:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(23, 23, 20, 0.22); } .newsletter-form__boton[disabled] { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; } /* Trampa para bots: fuera de la pantalla. No se usa display:none porque muchos bots lo detectan y saltan el campo. OJO: esto solo la esconde de la VISTA; sacarla del tabulador y de los lectores es responsabilidad del markup (tabindex="-1" aria-hidden="true" autocomplete="off"), si no un usuario de lector de pantalla la rellenaría y sería rechazado como bot. */ .newsletter-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .newsletter-form__legal { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); } .newsletter-form__legal a { color: var(--accent-tech-deep); text-decoration: underline; text-underline-offset: 2px; } /* Respuesta del envío por fetch. Vacío no ocupa sitio. El markup DEBE llevar role="status" (aria-live="polite" implícito): el aviso aparece sin mover el foco y si no es región viva no se anuncia (WCAG 4.1.3). */ .newsletter-form__aviso { margin: 14px 0 0; font-size: 14px; line-height: 1.5; } .newsletter-form__aviso:empty { margin: 0; } .newsletter-form__aviso--ok { /* sage-deep a 14px da 3,47:1 sobre canvas: NO vale como texto (1.4.3). El color se queda como marca a la izquierda y el texto va en tinta. */ color: var(--text-primary); border-left: 3px solid var(--accent-sage-deep); padding-left: 12px; } .newsletter-form__aviso--error { color: var(--accent-human-solid); } /* ------------------------------------------------------------------------- Variante sobre banda oscura (dentro de .section-ink o del pie) ------------------------------------------------------------------------- */ .newsletter--ink .newsletter__inner { background: transparent; border-color: rgba(247, 245, 239, 0.22); } .newsletter--ink .newsletter__eyebrow, .newsletter--ink .newsletter__titulo, .newsletter--ink .newsletter-form__label { color: var(--text-on-ink); } .newsletter--ink .newsletter__titulo em { color: var(--accent-lime); } .newsletter--ink .newsletter__texto, .newsletter--ink .newsletter-form__legal { color: var(--text-on-ink-dim); } .newsletter--ink .newsletter-form__input { background: rgba(247, 245, 239, 0.06); /* .28 daba 2,40:1 sobre tinta; .42 da 3,88:1 (WCAG 1.4.11 pide 3:1) */ border-color: rgba(247, 245, 239, 0.42); color: var(--text-on-ink); } .newsletter--ink .newsletter-form__input::placeholder { color: var(--text-on-ink-dim); } .newsletter--ink .newsletter-form__boton { background: var(--bg-paper); color: var(--text-primary); } .newsletter--ink .newsletter-form__boton:hover { background: var(--accent-lime); } /* Sobre tinta el deep se queda en 3,10:1; lime da 6,32:1 (igual que en styles.css) */ .newsletter--ink :focus-visible { outline-color: var(--accent-lime); } .newsletter--ink .newsletter-form__legal a { color: var(--accent-lime); } .newsletter--ink .newsletter-form__aviso--ok { color: var(--accent-lime); } .newsletter--ink .newsletter-form__aviso--error { color: var(--tint-human); } /* ------------------------------------------------------------------------- Adaptaciones ------------------------------------------------------------------------- */ @media (max-width: 860px) { .newsletter__inner { grid-template-columns: 1fr; gap: 24px; } } @media (prefers-reduced-motion: reduce) { .newsletter-form__boton { transition-duration: 0.01ms; } .newsletter-form__boton:hover { transform: none; } }