/* ================================================================ SINACNÉ — SUCURSAL MONTERREY ---------------------------------------------------------------- Landing page de destino para Google Ads. Arquitectura siguiendo SytezAgent Web Standards (ver .claude/skills/web-standards/SKILL.md). Identidad visual extraída del código embebido real del sitio en Hostinger (sinacne.mx): teal de marca, rojo de marca, tipografía Manrope, radios grandes, botones píldora con sombra de color. La marca no define dark mode (bg fijo #E8F3F5) — se respeta esa decisión: el sitio es de tema claro fijo, no reacciona a prefers-color-scheme. Es una landing de campaña: la constancia de marca importa más que soportar dark mode. Orden: 1. Reset 2. Variables (custom properties / design tokens) 3. Base 4. Layout 5. Componentes 6. Utilities ================================================================ */ /* ================================================================ 1. RESET MODERNO ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; text-wrap: balance; } p { overflow-wrap: break-word; text-wrap: pretty; } /* ================================================================ 2. VARIABLES — Design Tokens (identidad real de SinAcné) ================================================================ */ :root { /* ── Colores ──────────────────────────────────── */ --color-primary: #02afca; /* teal de marca — headings, eyebrows, nav, CTA principal */ --color-primary-hover: #029ab2; --color-secondary: #101718; /* tinta oscura de marca — nombres, texto fuerte */ --color-heading: #061B50; /* azul marino — color fijo de todos los títulos (h1–h6) */ --color-accent: #BA2027; /* rojo de marca — CTA "Agendar", tags, foco */ --color-accent-hover: #a01b21; /* Verde de WhatsApp — color funcional de la plataforma, no de marca. Se mantiene separado del acento para no confundir "CTA urgente" (rojo) con "canal de contacto" (verde). */ --color-whatsapp: #25D366; --color-whatsapp-hover: #20bd5a; --color-bg: #ffffff; --color-bg-alt: #E8F3F5; /* teal claro de marca — fondo alterno de secciones */ --color-bg-elevated: #ffffff; --color-text: #101718; --color-text-muted: #4b5563; --color-text-secondary: #6b7280; --color-text-inverse: #ffffff; --color-border: #e5e7eb; --color-border-subtle: #f3f4f6; /* ── Tipografía ───────────────────────────────── */ --font-display: "Manrope", "Noto Sans", system-ui, -apple-system, sans-serif; --font-body: "Manrope", "Noto Sans", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* Escala tipográfica fluida con clamp() */ --text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.2vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); --text-lg: clamp(1.25rem, 1rem + 0.5vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); --text-2xl: 1.875rem; /* tamaño de título de sección — igual al de "Equipo" (.sn-team__title) */ --text-hero: clamp(2.25rem, 1.8rem + 2.2vw, 4rem); /* ── Espaciado ────────────────────────────────── Escala consistente. No inventar valores fuera de esta escala. */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ /* ── Radios ───────────────────────────────────── Marca usa esquinas grandes y píldoras — todo redondeado, sin mezclar. */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ── Sombras ──────────────────────────────────── Ink de marca (16,23,24) en vez de negro puro + sombra de color para CTAs, como en el sitio real. */ --shadow-sm: 0 1px 2px rgba(16, 23, 24, 0.05); --shadow-md: 0 8px 20px rgba(16, 23, 24, 0.10); --shadow-lg: 0 20px 30px rgba(16, 23, 24, 0.12); --shadow-xl: 0 25px 50px rgba(16, 23, 24, 0.18); --shadow-primary: 0 10px 25px rgba(2, 175, 202, 0.25); --shadow-accent: 0 10px 25px rgba(186, 32, 39, 0.25); /* ── Transiciones ─────────────────────────────── Duraciones según tipo de interacción (ver SKILL.md sección 5). */ --transition-fast: 150ms ease-out; --transition-base: 250ms ease-out; --transition-slow: 400ms ease-out; /* ── Layout — Contenedores ──────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1400px; /* ancho real de marca (--sn-container) */ /* ── Barra sticky (S0) ──────────────────────── */ --header-height: 90px; --header-margin: 0.75rem; /* separación de la cápsula respecto al borde */ --mobile-cta-bar-height: 76px; } /* Título de sección (h2): mismo salto de tamaño de dos pasos que usa "Equipo" (.sn-team__title) — 1.875rem en mobile, 2.25rem desde tablet. */ @media (min-width: 768px) { :root { --text-2xl: 2.25rem; } } /* ── Prefers reduced motion — accesibilidad ─────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================ 3. BASE — Estilos globales del documento ================================================================ */ body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; color: var(--color-text); background-color: var(--color-bg); /* Sin padding-top: el header flota sobre la foto del hero — no reserva su propio espacio (el hero se encarga de despegar su contenido, ver .hero__inner). */ } @media (max-width: 767px) { body:has(.mobile-cta-bar) { /* Espacio para que la barra fija de contacto (.mobile-cta-bar) no tape el final de la página. */ padding-bottom: calc(var(--mobile-cta-bar-height) + env(safe-area-inset-bottom)); } } /* Compensa el header fijo al saltar a un ancla (nav del footer, CTAs "Agendar", etc.). */ section[id], #agenda { scroll-margin-top: calc(var(--header-height) + var(--header-margin) * 2); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; color: var(--color-heading); letter-spacing: -0.02em; } h1 { font-size: var(--text-hero); line-height: 1.08; } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); line-height: 1.25; letter-spacing: -0.01em; } p { color: var(--color-text-muted); } strong { color: var(--color-text); font-weight: 700; } /* Focus visible — accesibilidad para navegación con teclado */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* Selección de texto */ ::selection { background-color: var(--color-primary); color: var(--color-text-inverse); } /* Iconografía de marca (Material Symbols Outlined) */ .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; font-size: 1.5em; line-height: 1; vertical-align: middle; flex-shrink: 0; } /* ================================================================ 4. LAYOUT — Contenedores y grids de página ================================================================ */ .container { width: 100%; max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--space-md); } @media (min-width: 768px) { .container { padding-inline: var(--space-xl); } } /* Fondo decorativo — halo radial sutil de marca, reutilizado en varias secciones */ .section--halo { position: relative; overflow: hidden; } .section--halo::before { content: ""; position: absolute; top: -10%; left: -8%; width: 540px; height: 540px; max-width: 60vw; max-height: 60vw; border-radius: 50%; background: radial-gradient(circle, rgba(2, 175, 202, 0.10) 0%, transparent 70%); pointer-events: none; z-index: 0; } .section--halo > * { position: relative; z-index: 1; } /* Reveal on scroll — usado en casi todas las secciones. Oculto solo si JS confirma que va a animarlo (clase .no-js se quita en script.js apenas carga) — sin JS, el contenido es visible siempre. */ .reveal { transition: opacity var(--transition-slow), transform var(--transition-slow); } html:not(.no-js) .reveal { opacity: 0; transform: translateY(32px); } /* Especificidad igual a la regla anterior (html + clase + clase) para ganarle en cascada sin depender del orden de aparición. */ html:not(.no-js) .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ================================================================ 5. COMPONENTES ================================================================ */ /* ────────────────────────────────────────────────── S0 · BARRA STICKY (header) Elemento permanente: sólida, siempre visible, nunca desaparece (flota sobre el scroll). Sin menú hamburguesa: landing page de una sola página — el