@import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla:ital@1&display=swap'); /** * 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: #038442; --green-dark: #18522F; --green-glow: rgba(3, 132, 66, 0.15); --green-soft: rgba(3, 132, 66, 0.06); --shadow-glow: 0 0 40px rgba(3, 132, 66, 0.12); --graphite: #1E1E1E; --warm-white: #F4F2F0; --forest-green: #18522F; --stone-gray: #F1F1F1; /* tipografía */ --font-display: 'Gilroy', 'Plus Jakarta Sans', sans-serif; --font-body: 'Circular STD', 'Inter', sans-serif; --font-accent: 'Tiro Bangla', 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(3, 132, 66, 0.3); } .brand .btn-primary:hover { box-shadow: 0 12px 32px rgba(3, 132, 66, 0.35); } .brand .form-submit:hover { box-shadow: 0 12px 32px rgba(3, 132, 66, 0.3); } .brand .hero-badge { border-color: rgba(3, 132, 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(3, 132, 66, 0.1); } .brand .sucursal-card:hover { border-color: rgba(3, 132, 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(3, 132, 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(3, 132, 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); } /* ══ Restyling 2026 ══════════════════════════════════════════════════════ Nuevo lenguaje visual: Tiro Bangla para acentos itálicos, Circular Std Book para títulos (peso normal), Gilroy ExtraBold para labels y stats, paleta actualizada con Graphite/Warm White/Forest Green/Stone Gray. ════════════════════════════════════════════════════════════════════════ */ /* ── Accent typography — Tiro Bangla italic ── */ .brand .section-title em, .brand h1 em, .brand h2 em { font-family: var(--font-accent); font-style: italic; font-weight: normal; } .brand .section-title em.accent, .brand .section-title .accent { color: var(--forest-green); } /* ── Section labels — Gilroy ExtraBold + green underline ── */ .brand .section-label { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.2em; font-size: 0.7rem; color: var(--graphite); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .brand .section-label::before { order: 2; width: 48px; height: 4px; } /* ── Section titles — Circular Std Book (lighter weight) ── */ .brand .section-title { font-family: var(--font-body); font-weight: 400; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--graphite); letter-spacing: -0.01em; } .brand .section-title .accent { color: var(--green); font-weight: 400; } /* ── Nav — always white, outline CTA ── */ .brand .nav { background: rgba(255,255,255,0.97); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .brand .nav:not(.scrolled) .nav-links a { color: var(--graphite); } .brand .nav:not(.scrolled) .nav-links a:hover { color: var(--green); } .brand .nav-logo img { height: 42px; } .brand .nav:not(.scrolled) .nav-logo img { filter: none; } .brand .nav:not(.scrolled) .hamburger span { background: var(--graphite); } .brand .nav:not(.scrolled) .nav-mobile-reserve { color: var(--graphite); border-color: var(--graphite); } .brand .nav-cta { background: transparent; border: 1.5px solid var(--graphite); color: var(--graphite) !important; padding: 9px 22px; font-family: var(--font-body); font-weight: 600; } .brand .nav-cta::after { display: none !important; } .brand .nav-cta:hover { background: var(--green); border-color: var(--green); color: #fff !important; box-shadow: 0 8px 24px rgba(3, 132, 66, 0.3); } .brand .nav-links a { font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--graphite); } .brand .nav-links a:hover { color: var(--green); } /* ── Hero title ── */ .brand .hero--fs h1 { font-family: var(--font-body); font-weight: 400; font-size: clamp(2.4rem, 3.8vw, 3.2rem); letter-spacing: -0.01em; line-height: 1.15; } .brand .hero--fs h1 em { font-family: var(--font-accent); font-style: italic; } .brand .hero--fs h1 .green { font-family: var(--font-display); font-weight: 700; color: var(--green); } .brand .hero--fs h1 .hero-logo-inline { height: 1.3em; vertical-align: -0.20em; display: inline; filter: invert(40%) sepia(52%) saturate(1800%) hue-rotate(120deg) brightness(92%) contrast(90%); } .brand .hero--fs h1::before { background: var(--green); } .brand .hero-subtitle { font-family: var(--font-display); font-weight: 300; font-size: 0.95rem; } .brand .hero--fs .hero-subtitle { color: var(--warm-white); } .brand .campus-hero .hero-subtitle { color: var(--graphite); opacity: 0.7; } /* ── Descriptive text — Gilroy Light ── */ .brand .section-desc, .brand .contacto-form-sub, .brand .contacto-feature p, .brand .beneficio-tag span, .brand .campus-address, .brand .sucursal-dir, .brand .sucursal-zona, .brand .espacio-card p { font-family: var(--font-display); font-weight: 300; } /* ── Campus hero title ── */ .brand .campus-hero h1 { font-family: var(--font-body); font-weight: 400; letter-spacing: -0.01em; } .brand .campus-hero h1 .green { font-family: var(--font-display); font-weight: 700; color: var(--green); } .brand .campus-hero .hero-badge { font-family: var(--font-body); border-color: rgba(3, 132, 66, 0.2); color: var(--forest-green); } /* ── Campus hero — "espacio" in Tiro Bangla ── */ .brand .campus-hero h1 em.green { font-family: var(--font-accent); font-style: italic; color: var(--forest-green); } /* ── Service titles — Tiro Bangla + Gilroy combo ── */ .brand #espacios-detalle .svc-title { font-family: var(--font-accent); font-style: italic; font-weight: normal; color: var(--forest-green); } .brand #espacios-detalle .svc-title strong { font-family: var(--font-display); font-style: normal; font-weight: 800; color: var(--graphite); } .brand #espacios-detalle .svc-scrub-copy .svc-title, .brand #espacios-detalle .svc-scrub-copy .svc-title strong { color: #fff; } /* ── Stats bar — Gilroy ── */ .brand .stat-number { font-family: var(--font-display); font-weight: 800; color: var(--green); font-size: 2.2rem; } .brand .stat-label { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 2px; font-size: 0.72rem; color: var(--text-secondary); } .brand .hero-stats { background: var(--warm-white); } /* ── Ubicaciones — new heading style ── */ .brand .ubicaciones-header .section-label { justify-content: flex-start; } .brand .ubicaciones-header { text-align: left; max-width: none; margin-left: 0; margin-right: 0; } .brand .ubicaciones-header .section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); } .brand .ubicaciones-subtitle { font-family: var(--font-body); font-size: 0.92rem; color: var(--text-secondary); line-height: 1.7; max-width: 600px; margin-top: 12px; } /* Campus cards — forest green body, outline buttons */ .brand .ubicacion-card { border-radius: var(--radius-lg); border: none; overflow: hidden; } .brand .ubicacion-card-body { background: var(--forest-green); padding: 20px 24px 24px; } .brand .ubicacion-card-body h3 { font-family: var(--font-display); font-weight: 800; color: #fff; } .brand .ubicacion-plaza { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.7); margin-bottom: 2px; } .brand .ubicacion-address { font-family: var(--font-body); font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-bottom: 16px; } .brand .btn-ubi.maps { background: transparent; border: 1.5px solid rgba(255,255,255,0.6); color: #fff; border-radius: var(--radius-btn); } .brand .btn-ubi.maps:hover { background: rgba(255,255,255,0.15); border-color: #fff; box-shadow: none; } .brand .btn-ubi.maps svg { stroke: #fff; } .brand .btn-ubi.whatsapp { background: transparent; border: 1.5px solid rgba(255,255,255,0.6); color: #fff; border-radius: var(--radius-btn); } .brand .btn-ubi.whatsapp:hover { background: rgba(255,255,255,0.15); border-color: #fff; } .brand .ubicacion-badge { display: none; } /* ── Espacios — card typography + title below image ── */ .brand .espacios { background: var(--warm-white); padding-top: 60px; } .brand .espacios-header .section-label { justify-content: center; align-items: center; } .brand .espacios-header { flex-direction: column; align-items: center; text-align: center; } .brand .espacios-header .section-desc { display: none; } /* Move title out of image overlay into card body flow */ .brand .espacio-card-img { height: auto; } .brand .espacio-card-img img { height: 200px; } .brand .espacio-card-img::after { display: none; } .brand .espacio-card-img-overlay { position: relative; inset: auto; padding: 20px 24px 4px; justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 2px; } .brand .espacio-card h3 { font-family: var(--font-accent); font-style: italic; font-weight: normal; text-transform: lowercase; letter-spacing: 0; color: var(--forest-green); font-size: 1.32rem; margin-bottom: 0; } .brand .espacio-card h3 strong { font-family: var(--font-display); font-style: normal; font-weight: 800; text-transform: uppercase; color: var(--graphite); letter-spacing: 1px; font-size: 0.9em; } .brand .espacio-subtitle { background: none; color: var(--text-secondary); padding: 0; font-style: italic; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0; text-transform: none; font-weight: 400; border-radius: 0; } .brand .espacio-tag { background: var(--green); border-color: var(--green); } .brand .espacio-card-body { padding: 16px 24px 24px; } .brand .espacio-card-body p { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-secondary); } /* ── Beneficios / ¿Por qué Think? — photo bg + service tags ── */ .brand .beneficios { background: var(--graphite); padding: 0; min-height: 520px; overflow: hidden; border-top: none; } .brand .beneficios::before { display: none; } .brand .beneficios-bg { position: absolute; inset: 0; z-index: 0; } .brand .beneficios-bg img { width: 100%; height: 100%; object-fit: cover; } .brand .beneficios-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,30,30,0.85) 0%, rgba(30,30,30,0.55) 50%, rgba(30,30,30,0.35) 100%); } .brand .beneficios > .container { position: relative; z-index: 1; } .brand .beneficios-layout { grid-template-columns: 1fr; gap: 48px; padding: clamp(60px, 8vw, 100px) 0; align-items: start; } .brand .beneficios .section-label { color: rgba(255,255,255,0.8); } .brand .beneficios .section-label::before { background: var(--green); } .brand .beneficios .section-title { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); } .brand .beneficios .section-title em { color: #fff; } .brand .beneficios .section-title em.accent { color: var(--forest-green); } /* Service tag grid — frosted glass */ .brand .beneficios-grid { grid-template-columns: repeat(3, 1fr); gap: 0; } .brand .beneficio-tag { padding: 32px 24px; border: 1px solid rgba(255,255,255,0.2); color: var(--graphite); background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.3s; display: flex; flex-direction: column; gap: 6px; } .brand .beneficio-tag svg { width: 24px; height: 24px; stroke: var(--green); flex-shrink: 0; margin-bottom: 4px; } .brand .beneficio-tag strong { font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; } .brand .beneficio-tag span { font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; color: var(--text-secondary); letter-spacing: 0; text-transform: none; } .brand .beneficio-tag:hover { background: rgba(255,255,255,0.92); } /* ── Amenidades — hidden ── */ .brand .amenidades { display: none; } /* ── Servicios strip — compact ── */ .brand .servicios-strip { padding: 0; display: flex; align-items: center; height: 44px; } .brand .marquee-track { align-items: center; animation-duration: 40s; } .brand .amenidades-header .section-label { align-items: center; } /* ── Testimonios — restructured cards ── */ .brand .testimonios .section-label { justify-content: center; align-items: center; color: var(--graphite); } .brand .testimonios-header { text-align: center; } .brand .testimonios-header .section-label::before { order: 0; align-self: center; } /* Card restructure: author top, text bottom with green strip */ .brand .testimonio-card { border-radius: var(--radius-lg); padding: 0; display: flex; flex-direction: column; gap: 0; overflow: hidden; border: none; } .brand .testimonio-stars { order: -2; padding: 24px 24px 0; } .brand .testimonio-author { padding: 24px 24px 16px; order: -1; margin: 0; flex-direction: row; align-items: center; gap: 14px; } .brand .testimonio-avatar { width: 56px; height: 56px; font-size: 1rem; border-radius: 8px; background: var(--graphite); } .brand .testimonio-author strong { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; color: var(--graphite); } .brand .testimonio-author span { font-size: 0.72rem; color: var(--text-secondary); font-family: var(--font-body); } .brand .testimonio-text { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.6; background: var(--forest-green); color: #fff; padding: 20px 24px; margin: 0; flex: 1; display: flex; align-items: flex-start; } .brand .testimonios-badge { font-family: var(--font-body); } /* ── Contacto — forest green bg, light form (home only via .contacto-icon) ── */ .brand .contacto:has(.contacto-icon) { background: var(--forest-green); } .brand .contacto::before { display: none; } .brand .contacto-icon { width: 48px; height: auto; margin-bottom: 16px; } .brand .contacto:has(.contacto-icon) .contacto-text .section-label { color: rgba(255,255,255,0.8); } .brand .contacto:has(.contacto-icon) .contacto-text .section-label::before { background: var(--green); } .brand .contacto:has(.contacto-icon) .contacto-text .section-title { color: #fff; } .brand .contacto:has(.contacto-icon) .contacto-text .section-title em { color: #fff; } .brand .contacto:has(.contacto-icon) .contacto-text .section-desc { color: rgba(255,255,255,0.65); } .brand .contacto:has(.contacto-icon) .contacto-feature h4 { color: #fff; } .brand .contacto:has(.contacto-icon) .contacto-feature p { color: rgba(255,255,255,0.55); } .brand .contacto:has(.contacto-icon) .contacto-feature-icon { background: rgba(255,255,255,0.12); } .brand .contacto:has(.contacto-icon) .contacto-feature-icon svg { stroke: #fff; } /* ── Contacto-lugar — dark text for campus pages (light bg) ── */ .brand .contacto-lugar { border-top-color: var(--gray-light); } .brand #contacto .contacto-lugar-title { color: var(--graphite); } .brand .campus-address { color: var(--text-secondary); } .brand .campus-address svg { color: var(--green); } .brand .contacto-lugar .btn-ubi.whatsapp { background: transparent; border: 1.5px solid var(--graphite); color: var(--graphite); } .brand .contacto-lugar .btn-ubi.whatsapp:hover { background: var(--graphite); color: #fff; } .brand .contacto-lugar .btn-ubi.whatsapp svg { fill: currentColor; } .brand .contacto-lugar .btn-ubi.maps { background: transparent; border: 1.5px solid var(--graphite); color: var(--graphite); } .brand .contacto-lugar .btn-ubi.maps:hover { background: var(--graphite); color: #fff; } .brand .contacto-lugar .btn-ubi.maps svg { stroke: currentColor; } .brand .contacto-form-wrap { background: var(--warm-white); border-color: transparent; box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .brand .contacto-form-title { color: var(--graphite); } .brand .contacto-form-sub { color: var(--text-secondary); } .brand .contacto .form-group label { color: var(--text-secondary); } .brand .contacto .form-group input, .brand .contacto .form-group select, .brand .contacto .form-group textarea { background: #fff; border-color: #ddd; color: var(--graphite); } .brand .contacto .form-group input::placeholder, .brand .contacto .form-group textarea::placeholder { color: #aaa; } .brand .contacto .form-group input:focus, .brand .contacto .form-group select:focus, .brand .contacto .form-group textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(3, 132, 66, 0.1); } .brand .contacto .form-group select option { background: #fff; color: var(--graphite); } /* ── Responsive adjustments for restyled sections ── */ @media (max-width: 1024px) { .brand .beneficios-layout { padding: 60px 0; } .brand .beneficios-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .brand .beneficios-grid { grid-template-columns: repeat(2, 1fr); } .brand .beneficio-tag { padding: 24px 16px; font-size: 0.65rem; } .brand .hero--fs h1 { font-size: clamp(1.7rem, 6.5vw, 2.8rem); } }