/** * brand.css — Identidad del sitio original (thinkws.mx) * ------------------------------------------------------ * Se activa con class="brand" en . Las páginas sin esa * clase (index viejo) conservan los tokens por defecto de * styles.css, así el demo anterior no cambia un píxel. * * Tokens extraídos del sitio en producción: * verde #008042 · Circular STD (cuerpo) · Gilroy (display) * radios dominantes 6px / 10px — nada de pills. */ /* ── Fuentes de marca (auto-alojadas, mismas del cliente) ── */ @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Light.woff2') format('woff2'); font-weight: 100 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-ExtraBold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Circular STD'; src: url('../fonts/CircularStd-Book.woff2') format('woff2'); font-weight: 300 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Circular STD'; src: url('../fonts/CircularStd-Bold.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; } /* ── Tokens ── */ body.brand { /* color */ --green: #008042; --green-dark: #005e31; --green-glow: rgba(0, 128, 66, 0.15); --green-soft: rgba(0, 128, 66, 0.06); --shadow-glow: 0 0 40px rgba(0, 128, 66, 0.12); /* tipografía */ --font-display: 'Gilroy', 'Plus Jakarta Sans', sans-serif; --font-body: 'Circular STD', 'Inter', sans-serif; /* radios — escala del sitio original */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-btn: 8px; font-family: var(--font-body); } /* ── Tipografía aplicada ── */ .brand h1, .brand h2, .brand h3, .brand h4, .brand h5, .brand h6, .brand .stat-number { font-family: var(--font-display); } .brand button, .brand input, .brand select, .brand textarea { font-family: inherit; } /* Gilroy solo trae Light y ExtraBold: los títulos suben a 800 para caer siempre en la ExtraBold, nunca en un peso sintético. */ .brand h1, .brand h2, .brand h3 { font-weight: 800; } /* ── Radios: pills → botón de esquina suave ── */ .brand .nav-cta, .brand .nav-cta-outline, .brand .nav-mobile-reserve, .brand .mobile-nav .btn-outline-mobile, .brand .hero-badge, .brand .btn-primary, .brand .btn-secondary, .brand .hero-campus-label, .brand .btn-ubi, .brand .form-submit, .brand .svc-cue, .brand #espacios-detalle .svc-cta, .brand .svc-cta, .brand #espacios-detalle .svc-room, .brand .sucursal-enter, .brand .home-map-tag, .brand .home-map-reset { border-radius: var(--radius-btn); } /* ── Radios: íconos y bloques chicos ── */ .brand .beneficio-icon, .brand .contacto-feature-icon, .brand .float-btn, .brand .sucursal-pin { border-radius: var(--radius-lg); } .brand .form-group input, .brand .form-group select, .brand .form-group textarea { border-radius: var(--radius-md); } /* ── Radios: marcos grandes (20px → 12px) ── */ .brand .campus-hero .hero-image-wrap .campus-hero-img, .brand .campus-hero .hero-media .campus-hero-video, .brand .svc-tour-frame { border-radius: var(--radius-xl); } /* ── Verdes traslúcidos que estaban fuera de la variable ── */ .brand .nav-cta:hover { box-shadow: 0 8px 24px rgba(0, 128, 66, 0.3); } .brand .btn-primary:hover { box-shadow: 0 12px 32px rgba(0, 128, 66, 0.35); } .brand .form-submit:hover { box-shadow: 0 12px 32px rgba(0, 128, 66, 0.3); } .brand .hero-badge { border-color: rgba(0, 128, 66, 0.15); } .brand .form-group input:focus, .brand .form-group select:focus, .brand .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(0, 128, 66, 0.1); } .brand .sucursal-card:hover { border-color: rgba(0, 128, 66, 0.35); } .brand .campus-hero .hero-image-wrap .campus-hero-img, .brand .campus-hero .hero-media .campus-hero-video { box-shadow: 0 32px 80px rgba(0, 128, 66, 0.12); } /* ── Ticker — fondo gris claro ── */ .brand .promo-banner { background: var(--gray-light); color: var(--text-secondary); } .brand .promo-banner strong { color: var(--text); } .brand .promo-banner a { color: var(--green); } .brand .promo-banner a:hover { color: var(--text); } .brand .ticker-dot { color: var(--green); } /* ── Contacto — fondo gris claro ── */ .brand .contacto { background: var(--gray-light); } .brand .contacto::before { display: none; } .brand .contacto-text { color: var(--text); } .brand .contacto-text .section-label { color: var(--green); } .brand .contacto-text .section-title { color: var(--text); } .brand .contacto-text .section-desc { color: var(--text-secondary); } .brand .contacto-feature h4 { color: var(--text); } .brand .contacto-feature p { color: var(--text-secondary); } .brand .contacto-feature-icon { background: rgba(0, 128, 66, 0.08); } .brand .contacto-form-wrap { background: #fff; border-color: var(--gray-light); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .brand .contacto-form-title { color: var(--text); } .brand .contacto-form-sub { color: var(--text-secondary); } .brand .form-group label { color: var(--text-secondary); } .brand .form-group input, .brand .form-group select, .brand .form-group textarea { background: var(--gray-light); border-color: #dde0e4; color: var(--text); } .brand .form-group input::placeholder, .brand .form-group textarea::placeholder { color: #999; } .brand .form-group select option { background: #fff; color: var(--text); }