/* ========================================================================== Paradise Weeks — pw-base.css Tokens de :root, reset, tipografía base y componentes transversales. Orden del archivo: 1. @font-face 2. Tokens de color 3. Tokens de tipografía 4. Tokens de espaciado, contenedor, radios, tiempos y capas 5. Reset 6. Tipografía base 7. Chasis (contenedor, sección, pieles clara/oscura) 8. Utilidades (.pw-vo, .pw-filete, .pw-saltar) 9. Foco visible 10. Botones 11. Revelado al scroll y prefers-reduced-motion Regla del proyecto: ningún componente lleva un hex hardcodeado. Todo color sale de una variable declarada acá (CLAUDE.md §2.2). ========================================================================== */ /* ========================================================================== 1. @font-face Fuentes VARIABLES: un archivo por estilo, no por peso. El font-weight es un RANGO — declarar un valor suelto desperdicia el eje variable y el navegador deja de interpolar (PROCEDENCIA-LIBS.md, en la raíz del proyecto — un nivel arriba de public/, fuera de la raíz web). Servidas locales desde libs/. Nunca desde Google Fonts (CLAUDE.md §1.3). ========================================================================== */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; src: url('../libs/fuentes/cormorant-garamond-variable-latin.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; src: url('../libs/fuentes/cormorant-garamond-variable-latin-italica.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; src: url('../libs/fuentes/jost-variable-latin.woff2') format('woff2'); font-display: swap; } /* No hay archivo de itálica para Jost: si hace falta cuerpo en cursiva, el navegador sintetiza la oblicua. NUNCA declarar un @font-face de Jost con font-style: italic apuntando al archivo normal. */ /* ========================================================================== 2. Tokens de color ========================================================================== */ :root { /* --- Paleta oficial (CLAUDE.md §2.2, sin tocar) --- */ --pw-azul-marino: #0E2A4E; /* fondo oscuro principal */ --pw-azul-noche: #081D38; /* fondo oscuro profundo · texto sobre dorado */ --pw-dorado: #C9A24B; /* SOLO relleno, filete y borde sobre oscuro */ --pw-dorado-claro: #E3C579; /* texto y detalle SOLO sobre fondo oscuro */ --pw-hueso: #FBF9F4; /* fondo de secciones claras */ --pw-texto: #0E2A4E; /* texto sobre fondo claro */ --pw-blanco: #FFFFFF; /* --- Derivados: texto --- */ --pw-texto-sobre-oscuro: #FFFFFF; /* 14.38 / marino · 16.89 / noche */ --pw-texto-suave-oscuro: #C7D3E2; /* 9.48 / marino · 11.14 / noche · 8.46 / superficie-oscura */ --pw-texto-suave-claro: #4C5F79; /* 6.20 / hueso · 6.52 / blanco · 4.92 / borde-sutil-claro */ /* --- Derivados: superficies de tarjeta --- */ --pw-superficie-clara: #FFFFFF; /* texto 14.38 · texto-suave 6.52 */ --pw-superficie-oscura: #12325C; /* blanco 12.83 · suave 8.46 · dorado-claro 7.66 · dorado 5.35 */ /* --- Bordes DECORATIVOS (no transmiten información, no son controles) --- */ --pw-borde-sutil-claro: #E7DFCF; /* 1.26 / hueso · 1.32 / blanco */ --pw-borde-sutil-oscuro: #35507A; /* 1.77 / marino · 1.58 / superficie-oscura */ /* --- Bordes FUNCIONALES (inputs, botón secundario, cualquier borde que sea el único indicador de un control) — exigen >= 3.0 --- */ --pw-borde-ui-claro: #4C5F79; /* 6.20 / hueso · 6.52 / blanco */ --pw-borde-ui-oscuro: #C7D3E2; /* 9.48 / marino · 11.14 / noche */ /* --- Estado --- */ --pw-error-claro: #8A2E2E; /* sobre fondo claro: 7.95 / hueso · 8.36 / blanco */ --pw-error-oscuro: #F2B8B8; /* sobre fondo oscuro: 8.44 / marino · 9.91 / noche */ --pw-exito-claro: #1F5C3D; /* 7.51 / hueso */ --pw-exito-oscuro: #7FD1A6; /* 7.93 / marino */ --pw-dorado-apagado: #8A6D2E; /* botón en espera; lleva texto BLANCO: 4.88 */ /* --- Foco (§4.7 de la spec) --- */ --pw-foco-interno: #FBF9F4; /* 16.05 / noche · 13.67 / marino · 12.20 / superficie-oscura */ --pw-foco-externo: #081D38; /* 16.05 / hueso · 16.89 / blanco · 7.04 / botón dorado */ /* --- Aviso de maqueta (PW_CONTENIDO_APROBADO = false) --- DELIBERADAMENTE FUERA DE LA MARCA. Amarillo de señalización y negro: si la franja se pareciera al sitio dejaría de leerse como advertencia y en dos días nadie la vería. Estos tres colores NO son paleta del proyecto y no se pueden usar en ninguna otra parte: existen solo para la franja, y desaparecen con ella el día que el contenido quede aprobado. */ --pw-aviso-fondo: #FFD400; /* amarillo de señalización */ --pw-aviso-texto: #1A1A1A; /* 12.16 sobre el amarillo — medido */ --pw-aviso-borde: #1A1A1A; /* filo negro: le da límite sobre cualquier piel */ } /* -------------------------------------------------------------------------- Colores de BANDERA. Son CONTENIDO, no paleta de marca. Prohibido usarlos en fondos, textos, bordes o estados de la interfaz. -------------------------------------------------------------------------- */ :root { --pw-bandera-blanco: #FFFFFF; --pw-bandera-rojo: #CE1126; /* CR · MX · CO */ --pw-bandera-azul-cr: #002B7F; --pw-bandera-verde-mx: #006847; --pw-bandera-azul-do: #002D62; --pw-bandera-amarillo-co: #FCD116; --pw-bandera-azul-co: #003893; --pw-bandera-azul-pa: #005293; --pw-bandera-rojo-pa: #D21034; --pw-bandera-rojo-us: #B22234; --pw-bandera-azul-us: #3C3B6E; --pw-bandera-rojo-es: #AA151B; --pw-bandera-amarillo-es: #F1BF00; --pw-bandera-verde-it: #008C45; --pw-bandera-rojo-it: #CD212A; --pw-bandera-azul-fr: #000091; --pw-bandera-rojo-fr: #E1000F; } /* -------------------------------------------------------------------------- Variables de CONTEXTO: así un componente no sabe si está sobre claro u oscuro, y no hay que duplicarlo en dos versiones. Los valores por defecto son la piel CLARA completa: si a una sección se le olvida su modificador, se ve legible igual — nunca transparente ni negro sobre negro. No hay @media (prefers-color-scheme) ni toggle en NINGÚN archivo del proyecto: la clase la escribe el autor en el markup de cada
. -------------------------------------------------------------------------- */ :root { --pw-fondo-actual: var(--pw-hueso); --pw-txt-actual: var(--pw-texto); --pw-txt-suave: var(--pw-texto-suave-claro); --pw-superficie: var(--pw-superficie-clara); --pw-borde-sutil: var(--pw-borde-sutil-claro); --pw-borde-ui: var(--pw-borde-ui-claro); --pw-acento-texto: var(--pw-texto); /* sobre claro el acento NO es dorado */ --pw-error-actual: var(--pw-error-claro); } /* ========================================================================== 3. Tokens de tipografía ========================================================================== */ :root { --pw-fuente-titulo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --pw-fuente-cuerpo: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Escala — mobile first; el clamp hace el resto sin media queries */ --pw-txt-xs: 0.8125rem; /* 13px fijo: notas legales */ --pw-txt-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --pw-txt-base: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); --pw-txt-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --pw-txt-xl: clamp(1.375rem, 1.20rem + 0.80vw, 1.75rem); /* h3 */ --pw-txt-2xl: clamp(1.75rem, 1.40rem + 1.60vw, 2.5rem); /* h2 */ --pw-txt-3xl: clamp(2.25rem, 1.60rem + 3.00vw, 4rem); /* h1 */ /* --pw-txt-numero ELIMINADO (fase 2 §0.2): su único consumidor era el número de paso gigante y el hilo conector. El número vive ahora dentro de un círculo a --pw-txt-xl y el hilo ya no existe. */ /* Pesos */ --pw-peso-ligero: 300; --pw-peso-cuerpo: 400; --pw-peso-medio: 500; --pw-peso-titulo: 600; /* Cormorant a 600 en h1/h2 */ --pw-peso-fuerte: 700; /* Alturas de línea */ --pw-lh-titulo: 1.12; --pw-lh-subtitulo: 1.25; --pw-lh-compacto: 1.40; --pw-lh-cuerpo: 1.65; /* Tracking */ --pw-track-titulo: -0.01em; --pw-track-cuerpo: 0; --pw-track-etiqueta: 0.16em; /* la "cejilla" en versalitas sobre cada h2 */ } /* ========================================================================== 4. Espaciado, contenedor, radios, tiempos, capas ========================================================================== */ :root { /* Espaciado — múltiplos de 4 */ --pw-e-1: 0.25rem; /* 4 */ --pw-e-2: 0.5rem; /* 8 */ --pw-e-3: 0.75rem; /* 12 */ --pw-e-4: 1rem; /* 16 */ --pw-e-5: 1.25rem; /* 20 */ --pw-e-6: 1.5rem; /* 24 */ --pw-e-8: 2rem; /* 32 */ --pw-e-10: 2.5rem; /* 40 */ --pw-e-12: 3rem; /* 48 */ --pw-e-16: 4rem; /* 64 */ --pw-e-20: 5rem; /* 80 */ --pw-e-24: 6rem; /* 96 */ --pw-e-32: 8rem; /* 128 */ --pw-seccion-y: clamp(4rem, 3rem + 5vw, 8rem); /* padding vertical de sección */ /* Contenedor */ --pw-ancho-contenedor: 1160px; --pw-ancho-estrecho: 720px; /* FAQ, misión/visión, CTA */ --pw-ancho-lectura: 62ch; /* párrafos largos */ --pw-margen-lateral: clamp(1.25rem, 1rem + 2vw, 2.5rem); /* Radios */ --pw-radio-xs: 2px; --pw-radio-sm: 4px; /* botones y campos: filo editorial, no pastilla */ --pw-radio-md: 8px; --pw-radio-lg: 14px; /* tarjetas */ --pw-radio-circulo: 50%; /* Tiempos */ --pw-dur-rapida: 140ms; --pw-dur-media: 240ms; --pw-dur-lenta: 520ms; /* solo la aparición al scroll */ --pw-ease: cubic-bezier(.22,.61,.36,1); --pw-ease-salida: cubic-bezier(.4,0,.2,1); /* Sombras (los rgba viven acá, nunca en un componente) */ --pw-sombra-suave: 0 1px 2px rgba(14,42,78,.06), 0 8px 24px rgba(14,42,78,.07); --pw-sombra-alta: 0 2px 4px rgba(14,42,78,.08), 0 16px 40px rgba(14,42,78,.12); --pw-sombra-header: 0 1px 0 rgba(201,162,75,.28), 0 6px 20px rgba(8,29,56,.28); /* --pw-tramado-hueco se borró el 2026-08-02 junto con .pw-hueco-foto: el cliente confirmó que no hay fotos que esperar, así que su único uso se convirtió en ilustración definitiva. El valor está anotado en el comentario que quedó en pw-componentes.css, por si vuelve a hacer falta. */ /* Resplandor decorativo del hero */ --pw-hero-resplandor: rgba(201,162,75,.13); /* Capas */ --pw-z-base: 1; --pw-z-elevado: 2; /* filetes, comillas, número de paso */ --pw-z-pegajoso: 10; /* .pw-flotantes (WhatsApp y volver arriba). Queda muy por debajo del panel del menú (95): con el menú abierto los flotantes quedan tapados — y además inertes, que el z-index solo no los saca del foco */ /* --pw-z-fondo-menu: 90 — ELIMINADO A PROPÓSITO. Era el velo del menú móvil, y este panel no lleva velo: es opaco y ocupa toda la pantalla. Se saca porque dejarlo es una trampa — 90 queda DEBAJO del panel (95), así que quien algún día agregue un velo y tome el token "que ya estaba" se lo encontraría tapado. Si hace falta un velo, va con un valor nuevo ENTRE el contenido y el panel, y se recalcula la escala. */ --pw-z-menu: 95; /* panel del menú móvil */ --pw-z-menu-cierre: 96; /* la hamburguesa/X, que tiene que quedar por encima del panel. Se compara contra --pw-z-menu y contra NADA MÁS: los dos viven dentro del contexto de apilamiento que crea la cabecera, así que el número solo compite ahí adentro. Por eso 96 y no 101 — subirlo no lo sacaría del contexto, solo confundiría. */ --pw-z-header: 100; /* Ordena la CABECERA contra el resto de la página: contenido, flotantes, saltar. NO ordena la cabecera contra el panel del menú: el panel es HIJO de la cabecera, así que los dos números nunca se comparan. Este comentario decía lo contrario —"el header queda arriba del panel"— y ese modelo falso es lo que dejó la X intocable durante toda la fase: dentro del contexto de la cabecera, el panel (posicionado, 95) pintaba encima del botón (estático). Quien tenga que ganarle al panel se ordena con --pw-z-menu-cierre. */ --pw-z-saltar: 200; /* enlace "saltar al contenido" */ --pw-z-aviso: 300; /* franja de maqueta: por encima de TODO, incluido el panel del menú abierto. Es una advertencia: si algo la puede tapar, no sirve */ /* Medidas de chasis */ --pw-alto-header: 68px; --pw-tactil: 44px; /* área táctil mínima, no negociable */ --pw-foco-grosor-interno: 2px; --pw-foco-grosor-externo: 3px; --pw-foco-offset: 2px; /* --- Ilustraciones de destino (fase 2 §1) --- Van SIN unidad a propósito: se consumen como stroke-width (unidades del viewBox) y como opacity. */ --pw-ilus-trazo: 2; --pw-ilus-trazo-fino: 1.25; --pw-ilus-atmosfera: .45; /* --- Paso numerado (fase 2 §2) --- */ --pw-paso-circulo: 52px; /* --- Botones flotantes (fase 2 §3) --- */ --pw-flotante-wa: 56px; --pw-flotante-subir: 48px; --pw-flotante-margen: var(--pw-e-4); /* separación del borde de la ventana */ --pw-flotante-hueco: var(--pw-e-4); /* separación entre los dos botones */ /* --- Placas del logo (fase 2 §4) --- */ --pw-placa-emblema: 44px; --pw-placa-emblema-pad: var(--pw-e-1); /* 4px */ --pw-placa-pie-ancho: 200px; --pw-placa-pie-pad: var(--pw-e-4); /* 16px — OBLIGATORIO: la tinta del JPEG llega a los cuatro bordes */ /* --- Marca grande de la tarjeta de la sección 9 (fase 2 §5) --- Se llamaba --pw-comillas-tam y dimensionaba la comilla del testimonio. Los testimonios se fueron el 2026-08-02 y en esa misma esquina quedó el número del compromiso, con el mismo tamaño a propósito. El token cambió de nombre porque el viejo describía un glifo que ya no existe: buscar "comillas" en el proyecto no debe encontrar nada. */ --pw-marca-tam: 3.25rem; /* --- Alto reservado por la franja de maqueta --- Es alto FIJO por la misma razón que --pw-alto-header lo es: la cabecera va fija y algo tiene que reservarle el hueco sin depender de JS. Los dos valores están MEDIDOS contra el texto real de la franja (ver el bloque .pw-aviso-maqueta en pw-componentes.css). Si el texto crece, hay que volver a medir: pruebas/banco-menu.php falla si la franja no entra o si le sobran menos de 8px. El alto natural depende del ancho, y bastante: 80px a 752 de contenido, 116 a 485, 136 a 405, 154 a 345, 172 a 305, 190 a 260. Por eso hay tres tramos y no uno: con un solo valor, o sobra un tercio de pantalla de amarillo en tableta, o falta en teléfono chico y la franja le pinta encima a la cabecera. La primera versión reservaba 172 en todo el tramo móvil, que a 320 dejaba margen CERO — una palabra más en el texto y se rompía sin que nadie lo notara. Ahora cada tramo tiene entre 10 y 36px de aire. LÍMITE CONOCIDO: por debajo de ~260 de contenido el natural se dispara (209px a 245, 265px a 215) y la franja vuelve a pisar la cabecera. Eso es zoom muy alto en pantalla chica, por debajo del piso de 320 que sostiene el proyecto; cubrirlo pediría reservar media pantalla. */ --pw-alto-aviso: 200px; } @media (min-width: 480px) { :root { --pw-alto-aviso: 152px; } } @media (min-width: 768px) { :root { --pw-alto-header: 84px; --pw-paso-circulo: 56px; --pw-flotante-margen: var(--pw-e-6); /* 24px */ --pw-placa-emblema: 52px; --pw-alto-aviso: 96px; /* natural 80px, constante de 768 a 1600 */ } } /* ========================================================================== 5. Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* El header fijo no debe tapar el hero. */ padding-top: var(--pw-alto-header); /* Azul noche a propósito: la franja de padding que queda arriba del hero es lo que se ve a través del header cuando el JS lo vuelve transparente en el tope. Si el body fuera claro, ahí aparecería una banda clara. */ background-color: var(--pw-azul-noche); } img, picture, svg, video { max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } ul[role="list"], ol[role="list"] { list-style: none; } :target { scroll-margin-top: calc(var(--pw-alto-header) + var(--pw-e-4)); } /* ========================================================================== 6. Tipografía base ========================================================================== */ body { font-family: var(--pw-fuente-cuerpo); font-size: var(--pw-txt-base); line-height: var(--pw-lh-cuerpo); font-weight: var(--pw-peso-cuerpo); letter-spacing: var(--pw-track-cuerpo); color: var(--pw-texto); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--pw-fuente-titulo); font-weight: var(--pw-peso-titulo); line-height: var(--pw-lh-titulo); letter-spacing: var(--pw-track-titulo); margin: 0 0 var(--pw-e-4); text-wrap: balance; } h1 { font-size: var(--pw-txt-3xl); } h2 { font-size: var(--pw-txt-2xl); } h3 { font-size: var(--pw-txt-xl); font-weight: var(--pw-peso-medio); } p { margin: 0 0 var(--pw-e-4); } p:last-child { margin-bottom: 0; } a { color: inherit; } /* La itálica de Cormorant tiene DOS usos y solo dos: el énfasis dentro del h1 del hero, y el texto de los testimonios. No es decoración suelta. */ h1 em { font-style: italic; font-weight: var(--pw-peso-ligero); } /* Cejilla en versalitas sobre cada h2. Nunca dorada sobre fondo claro: toma --pw-acento-texto, que sobre claro es --pw-texto (13.67). */ .pw-cejilla { margin: 0; font-size: var(--pw-txt-sm); font-weight: var(--pw-peso-medio); letter-spacing: var(--pw-track-etiqueta); text-transform: uppercase; color: var(--pw-acento-texto); } /* ========================================================================== 7. Chasis: contenedor, sección y pieles ========================================================================== */ .pw-contenedor { width: 100%; max-width: var(--pw-ancho-contenedor); margin-inline: auto; padding-inline: var(--pw-margen-lateral); } .pw-contenedor--estrecho { max-width: var(--pw-ancho-estrecho); } .pw-seccion { padding-block: var(--pw-seccion-y); scroll-margin-top: calc(var(--pw-alto-header) + var(--pw-e-4)); color: var(--pw-txt-actual); } .pw-seccion--clara { background-color: var(--pw-hueso); /* hereda los valores de :root; se declara igual, explícito */ } .pw-seccion--oscura, .pw-seccion--profunda { --pw-txt-actual: var(--pw-texto-sobre-oscuro); --pw-txt-suave: var(--pw-texto-suave-oscuro); --pw-superficie: var(--pw-superficie-oscura); --pw-borde-sutil: var(--pw-borde-sutil-oscuro); --pw-borde-ui: var(--pw-borde-ui-oscuro); --pw-acento-texto: var(--pw-dorado-claro); /* 8.58 / marino · 10.08 / noche */ --pw-error-actual: var(--pw-error-oscuro); } .pw-seccion--oscura { --pw-fondo-actual: var(--pw-azul-marino); background-color: var(--pw-azul-marino); } .pw-seccion--profunda { --pw-fondo-actual: var(--pw-azul-noche); background-color: var(--pw-azul-noche); } /* Bloque de encabezado de sección: cejilla + filete + h2 + entrada */ .pw-seccion__encabezado { margin-bottom: var(--pw-e-10); } .pw-seccion__encabezado--centrado { text-align: center; max-width: var(--pw-ancho-estrecho); margin-inline: auto; } .pw-seccion__entrada { color: var(--pw-txt-suave); font-size: var(--pw-txt-lg); max-width: var(--pw-ancho-lectura); } .pw-seccion__encabezado--centrado .pw-seccion__entrada { margin-inline: auto; } /* ========================================================================== 8. Utilidades ========================================================================== */ /* Texto solo para lector de pantalla */ .pw-vo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Línea fina dorada DECORATIVA. CLAUDE.md §2.2 regla 1 autoriza el dorado sobre hueso solo como decoración de relleno. Este componente es exactamente eso y nada más: - nunca es borde de un control, - nunca es anillo de foco, - nunca cambia de estado ni marca cuál elemento está activo, - nunca es lo único que separa dos bloques de contenido. */ .pw-filete { display: block; width: 56px; height: 2px; background-color: var(--pw-dorado); border-radius: 1px; margin-block: var(--pw-e-4) var(--pw-e-6); } .pw-filete--centrado { margin-inline: auto; } .pw-filete--ancho { /* divisor a todo el ancho: SOLO sobre fondo oscuro */ width: 100%; height: 1px; opacity: .45; margin-block: var(--pw-e-8); } /* Saltar al contenido */ .pw-saltar { position: absolute; left: var(--pw-e-4); top: var(--pw-e-4); z-index: var(--pw-z-saltar); transform: translateY(-200%); background-color: var(--pw-hueso); color: var(--pw-texto); /* 13.67 */ padding: var(--pw-e-3) var(--pw-e-5); border-radius: var(--pw-radio-sm); text-decoration: none; font-weight: var(--pw-peso-medio); } .pw-saltar:focus { transform: translateY(0); } /* ========================================================================== 9. Foco visible — un único estilo para todo el sitio Anillo bicolor: aro interior hueso + aro exterior azul noche. Sea cual sea el fondo, uno de los dos aros contrasta fuerte. Peor caso medido: 7.04 (sobre el botón dorado), muy por encima del mínimo de 3.0. NUNCA escribir `outline: none` suelto en ninguna parte del proyecto. ========================================================================== */ :where(a, button, input, textarea, select, summary, [tabindex]):focus { outline: none; } :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible, .pw-tarjeta-destino:focus-within { outline: var(--pw-foco-grosor-externo) solid transparent; /* ancla para forced-colors */ outline-offset: var(--pw-foco-offset); box-shadow: 0 0 0 var(--pw-foco-grosor-interno) var(--pw-foco-interno), 0 0 0 calc(var(--pw-foco-grosor-interno) + var(--pw-foco-grosor-externo)) var(--pw-foco-externo); } @media (forced-colors: active) { :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible, .pw-tarjeta-destino:focus-within { outline-color: Highlight; box-shadow: none; /* el box-shadow desaparece en alto contraste; el outline no */ } } /* ========================================================================== 10. Botones ========================================================================== */ .pw-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--pw-e-2); min-height: 48px; min-width: var(--pw-tactil); padding: var(--pw-e-3) var(--pw-e-8); font-family: var(--pw-fuente-cuerpo); font-size: var(--pw-txt-base); font-weight: var(--pw-peso-medio); letter-spacing: .03em; line-height: 1.2; text-decoration: none; text-align: center; border: 1px solid transparent; border-radius: var(--pw-radio-sm); cursor: pointer; transition: background-color var(--pw-dur-rapida) var(--pw-ease), color var(--pw-dur-rapida) var(--pw-ease), border-color var(--pw-dur-rapida) var(--pw-ease), transform var(--pw-dur-rapida) var(--pw-ease); } /* El botón primario es EL MISMO sobre claro y sobre oscuro: la acción principal del sitio tiene una sola cara en toda la página. */ .pw-boton--primario { background-color: var(--pw-dorado); color: var(--pw-azul-noche); /* 7.04 — NUNCA blanco: blanco sobre dorado da 2.40 */ } @media (hover: hover) { .pw-boton--primario:hover { background-color: var(--pw-dorado-claro); color: var(--pw-azul-noche); /* 10.08 */ transform: translateY(-1px); } } .pw-boton--primario:active { background-color: var(--pw-dorado); transform: translateY(0); } /* Estado de espera del formulario. Texto BLANCO: azul noche sobre este dorado apagado da 3.46 y no llega a 4.5. Blanco da 4.88. El estado no se comunica solo por color: el texto cambia a "Abriendo WhatsApp…". */ .pw-boton--primario[aria-disabled="true"] { background-color: var(--pw-dorado-apagado); color: var(--pw-blanco); cursor: default; transform: none; } .pw-boton--secundario-oscuro { background-color: transparent; color: var(--pw-dorado-claro); /* 8.58 / marino · 10.08 / noche */ border-color: var(--pw-dorado); /* 6.00 / marino — muy por encima del 3.0 de UI */ } @media (hover: hover) { .pw-boton--secundario-oscuro:hover { background-color: var(--pw-dorado); color: var(--pw-azul-noche); /* 7.04 */ } } .pw-boton--secundario-oscuro:active { background-color: var(--pw-dorado-claro); color: var(--pw-azul-noche); } /* El borde dorado está PROHIBIDO acá: sobre hueso da 2.28, por debajo del 3.0 que exige un borde que sea el único límite del control. */ .pw-boton--secundario-claro { background-color: transparent; color: var(--pw-texto); /* 13.67 sobre hueso */ border-color: var(--pw-borde-ui-claro); /* 6.20 sobre hueso */ } @media (hover: hover) { .pw-boton--secundario-claro:hover { background-color: var(--pw-azul-marino); color: var(--pw-texto-sobre-oscuro); /* 14.38 */ border-color: var(--pw-azul-marino); } } .pw-boton--secundario-claro:active { background-color: var(--pw-azul-noche); color: var(--pw-texto-sobre-oscuro); } /* Ancho completo en móvil, natural desde 768px */ .pw-boton--bloque { width: 100%; } @media (min-width: 768px) { .pw-boton--bloque { width: auto; } } .pw-grupo-botones { display: flex; flex-wrap: wrap; gap: var(--pw-e-4); } /* ========================================================================== 11. Revelado al scroll El estado base es VISIBLE. Un opacity:0 esperando a un IntersectionObserver deja la página en blanco cuando el observer no corre (CLAUDE.md §2.5). El ocultamiento existe SOLO bajo .pw-anim, que el script en línea del agrega únicamente si hay JS y el usuario no pidió menos movimiento. ========================================================================== */ .pw-revelar { opacity: 1; transform: none; } .pw-anim .pw-revelar { opacity: 0; transform: translateY(16px); transition: opacity var(--pw-dur-lenta) var(--pw-ease), transform var(--pw-dur-lenta) var(--pw-ease); transition-delay: calc(var(--pw-indice, 0) * 70ms); will-change: opacity, transform; } .pw-anim .pw-revelar.pw-visible { opacity: 1; transform: none; } /* prefers-reduced-motion DESACTIVA, no atenúa (CLAUDE.md §2.5). */ @media (prefers-reduced-motion: reduce) { .pw-anim .pw-revelar, .pw-revelar { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0s !important; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } /* Los desplazamientos de hover/active se ANULAN, no se aceleran: sin esto el translateY seguiría ocurriendo, solo que de golpe. */ .pw-boton:hover, .pw-boton:active, .pw-tarjeta-destino:hover, .pw-tarjeta-destino:active, .pw-faq__disparador:active { transform: none !important; } /* El menú móvil abre y cierra igual, sin deslizamiento. */ .pw-js .pw-nav { transition: none !important; } }