/* ========================================================================= Top Dental Care — main.css Tokens de diseño VERIFICADOS del sitio en vivo (Astra) + base global. Azul de marca #0170B9. Tipografía Roboto / Roboto Slab. ========================================================================= */ :root { /* Marca */ --td-primary: #0170B9; --td-primary-dark: #015A94; --td-primary-050: #EEF5FB; --td-primary-100: #D9EAF6; /* Texto y fondos (Astra global colors reales) */ --td-ink: #3A3A3A; --td-ink-soft: #4B4F58; --td-bg: #F5F5F5; --td-bg-tint: #F2F5F7; --td-white: #FFFFFF; --td-line: #E2E8EE; /* Acento cálido (neuromarketing: foco visual en el CTA principal). Ajustable. */ --td-accent: #E9A63C; --td-accent-dark: #cf8f28; --td-accent-050: #fdf6e9; --td-navy: #012D50; /* Tipografía */ --td-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --td-font-head: "Roboto Slab", Georgia, "Times New Roman", serif; /* Formas */ --td-radius: 14px; --td-radius-lg: 22px; --td-shadow: 0 10px 30px rgba(1, 112, 185, .10); --td-shadow-sm: 0 4px 14px rgba(20, 40, 60, .08); --td-maxw: 1180px; } /* ---------- Base tipográfica ---------- */ body { font-family: var(--td-font-body); color: var(--td-ink); font-size: 17px; line-height: 1.65; } h1, h2, h3, h4, h5, h6, .entry-title, .wp-block-heading { font-family: var(--td-font-head); color: var(--td-ink); font-weight: 600; line-height: 1.18; } a { color: var(--td-primary); text-decoration: none; } a:hover { color: var(--td-primary-dark); text-decoration: underline; } /* ---------- Botones (Gutenberg + Astra) ---------- */ .wp-block-button__link, .ast-button, .ast-custom-button { background-color: var(--td-primary); border-radius: 999px; font-weight: 600; letter-spacing: .01em; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; } .wp-block-button__link:hover, .ast-button:hover { background-color: var(--td-primary-dark); transform: translateY(-2px); box-shadow: var(--td-shadow); } .wp-block-button.is-style-outline .wp-block-button__link { color: var(--td-primary); border-color: var(--td-primary); background: transparent; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--td-primary); color: #fff; } /* ---------- Utilidades de layout ---------- */ .td-wrap { max-width: var(--td-maxw); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); } .td-section { padding-block: clamp(48px, 7vw, 96px); } .td-bg-tint { background: var(--td-bg-tint); } .td-bg-primary { background: var(--td-primary); color: #fff; } /* ---------- Animaciones ligeras (Fase 5) ---------- .td-reveal = fade-in + subida al entrar al viewport (dispara reveal.js). Respeta prefers-reduced-motion y NO afecta al hero (que no lleva la clase). */ .td-reveal { transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); } /* El estado OCULTO solo aplica cuando hay JS (html.td-js lo marca al inicio del ). Sin JS, o si el JS falla, el contenido queda visible por defecto. */ .td-js .td-reveal { opacity: 0; transform: translateY(26px) scale(.985); } /* Variantes direccionales (entran desde el lado), también gated por JS. */ .td-js .td-reveal--left { transform: translateX(-32px); } .td-js .td-reveal--right { transform: translateX(32px); } .td-js .td-reveal--zoom { transform: scale(.93); } /* Al hacerse visible, .is-visible (misma especificidad, va después) gana → transform:none. */ .td-reveal.is-visible { opacity: 1; transform: none; } /* Botón de acento cálido (foco de conversión) */ .hm-btn--accent, .ip-btn--accent, .ab-btn--accent, .rv-btn--accent, .sv-btn--accent { background: var(--td-accent); color: var(--td-navy); } .hm-btn--accent:hover, .ip-btn--accent:hover, .ab-btn--accent:hover, .rv-btn--accent:hover, .sv-btn--accent:hover { background: var(--td-accent-dark); color: var(--td-navy); box-shadow: 0 10px 26px rgba(0, 0, 0, .22); } .td-reveal[data-td-delay="1"] { transition-delay: .08s; } .td-reveal[data-td-delay="2"] { transition-delay: .16s; } .td-reveal[data-td-delay="3"] { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .td-reveal, .wp-block-button__link, .ast-button { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Foco visible accesible (teclado) ---------- */ .main-header-menu .menu-link:focus-visible { outline: 3px solid var(--td-navy); outline-offset: 2px; border-radius: 4px; } .td-short:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* ---------- Franja de confianza reutilizable (td_trust_strip) ---------- */ .td-trust { background: var(--td-bg-tint); border-bottom: 1px solid var(--td-line); } .td-trust__wrap { max-width: var(--td-maxw); margin-inline: auto; padding: 1rem clamp(18px, 5vw, 40px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem clamp(1.1rem, 3.4vw, 2.4rem); } .td-trust__item { display: inline-flex; align-items: center; gap: .55rem; color: var(--td-ink); font-weight: 600; font-size: .92rem; } .td-trust__item svg { width: 22px; height: 22px; color: var(--td-primary); flex: none; } .td-trust__item + .td-trust__item { position: relative; } @media (min-width: 720px) { .td-trust__item + .td-trust__item::before { content: ""; position: absolute; left: calc(-1 * clamp(1.1rem, 3.4vw, 2.4rem) / 2); top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: var(--td-line); } } @media (max-width: 560px) { .td-trust__item { font-size: .82rem; gap: .4rem; } .td-trust__item svg { width: 18px; height: 18px; } } /* ---------- Cabecera: logo solo (sin texto redundante) ---------- */ .ast-site-title-wrap .site-title, .ast-site-title-wrap .site-description, .site-header .site-title, .site-header .site-description { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* oculto visual, accesible para lectores */ .site-logo-img img, .custom-logo { max-height: 52px; width: auto; transition: max-height .3s ease; } /* ---------- Header compacto y prolijo (ocupa menos alto, se ve más limpio) ---------- */ .main-header-bar { padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--td-line); } .ast-primary-header-bar { background: #fff; } /* Ítems del menú principal: aire vertical justo + tipografía consistente */ .main-header-menu > .menu-item > .menu-link, .ast-nav-menu > .menu-item > .menu-link { font-family: var(--td-font-body); font-weight: 500; font-size: .98rem; letter-spacing: .005em; color: var(--td-ink); padding-top: .5em; padding-bottom: .5em; transition: color .2s ease; } /* Subrayado animado en hover + estado activo */ .main-header-menu > .menu-item > .menu-link { position: relative; } .main-header-menu > .menu-item > .menu-link::after { content: ""; position: absolute; left: .9em; right: .9em; bottom: .18em; height: 2px; background: var(--td-primary); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .main-header-menu > .menu-item:hover > .menu-link::after, .main-header-menu > .menu-item.current-menu-item > .menu-link::after { transform: scaleX(1); } .main-header-menu > .menu-item:hover > .menu-link, .main-header-menu > .menu-item.current-menu-item > .menu-link { color: var(--td-primary); } /* ---------- Botón WhatsApp del menú: compacto, con ícono, sin el número largo ---------- */ li.td-nav-cta { display: flex !important; align-items: center; } .main-header-menu .td-nav-cta > a, .ast-nav-menu .td-nav-cta > a, li.td-nav-cta > a { position: relative; display: inline-flex !important; align-items: center; align-self: center; height: 40px !important; min-height: 0 !important; box-sizing: border-box; background: #E9A63C; color: #1a1a1a !important; border-radius: 999px; padding: 0 1.5em !important; font-weight: 700; font-size: .9rem; line-height: 1.1; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } li.td-nav-cta > a::after { display: none; } /* sin subrayado en el pill */ li.td-nav-cta > a::before { display: none; } /* CTA de EE.UU.: sin ícono de WhatsApp */ li.td-nav-cta > a:hover { background: #d8952e; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.15); } /* ---------- Footer copyright legible + quitar "Powered by Astra" ---------- */ .ast-footer-copyright { font-size: .9rem; line-height: 1.6; } .ast-footer-copyright a { color: var(--td-primary); } .ast-small-footer-section-2 { display: none !important; } /* ---------- Sticky header (se compacta al hacer scroll) ---------- */ .site-header, #masthead.site-header { position: sticky; top: 0; z-index: 99; background: #fff; transition: box-shadow .3s ease; } body.td-scrolled .site-header, body.td-scrolled #masthead.site-header { box-shadow: 0 4px 20px rgba(20, 40, 60, .10); } body.td-scrolled .custom-logo { max-height: 42px; } body.td-scrolled .main-header-bar { padding-top: 3px; padding-bottom: 3px; } /* ---------- Formulario de lead (td-form) ---------- */ .td-form { display: grid; gap: 1rem; text-align: left; } .td-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .td-field { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; font-weight: 600; color: var(--td-ink); } .td-field input, .td-field select, .td-field textarea { font: inherit; font-weight: 400; padding: .7rem .9rem; border: 1px solid var(--td-line); border-radius: 10px; background: #fff; color: var(--td-ink); width: 100%; box-sizing: border-box; transition: border-color .2s ease, box-shadow .2s ease; } .td-field input:focus, .td-field select:focus, .td-field textarea:focus { outline: none; border-color: var(--td-primary); box-shadow: 0 0 0 3px var(--td-primary-050); } .td-hp { position: absolute !important; left: -9999px; height: 0; width: 0; overflow: hidden; } .td-form__submit { background: var(--td-primary); color: #fff; border: 0; border-radius: 999px; padding: .95rem 1.8rem; font-weight: 700; font-size: 1rem; cursor: pointer; justify-self: start; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; } .td-form__submit:hover { background: var(--td-primary-dark); transform: translateY(-2px); box-shadow: var(--td-shadow); } .td-form__submit:disabled { opacity: .7; cursor: default; transform: none; } .td-form__msg { margin: 0; color: #c0392b; font-size: .9rem; min-height: 1em; } .td-form__thanks { background: var(--td-primary-050); border: 1px solid var(--td-primary-100); border-radius: var(--td-radius); padding: 1.4rem; color: var(--td-primary-dark); font-weight: 600; text-align: center; } @media (max-width: 560px) { .td-form__row { grid-template-columns: 1fr; } .td-form__submit { justify-self: stretch; text-align: center; } } /* ---------- YouTube Shorts verticales (facade 9:16) ---------- */ .td-shorts-row { display: flex; flex-wrap: wrap; gap: 1.3rem; justify-content: center; margin-top: 1.6rem; } .td-short { position: relative; display: block; aspect-ratio: 9 / 16; width: 100%; max-width: 260px; border-radius: var(--td-radius); overflow: hidden; cursor: pointer; border: 0; padding: 0; background: #0a2540 center/cover no-repeat; box-shadow: var(--td-shadow); margin: 0 auto; } .td-short::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.5)); transition: background .3s; } .td-short:hover::before { background: linear-gradient(180deg, rgba(1,112,185,.22), rgba(0,0,0,.55)); } .td-short__play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; transition: transform .3s; } .td-short:hover .td-short__play { transform: scale(1.08); } .td-short__play svg { width: 24px; height: 24px; color: var(--td-primary); margin-left: 3px; } .td-short__label { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .9rem; color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.3; z-index: 1; text-align: left; } .td-short iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }