/* ==========================================================================
DENTIQUE — By Dra. Cinthia Borbón
Hoja de estilos — Landing Page
Índice:
1. Variables (colores, tipografía) -> AQUÍ SE PERSONALIZA LA MARCA
2. Reset y base
3. Utilidades y layout
4. Navbar
5. Hero
6. Servicios
7. Sucursales
8. Testimonios
9. CTA final
10. Footer
11. Responsivo
========================================================================== */
/* ==========================================================================
1. VARIABLES DE MARCA
Cambia los códigos hexadecimales aquí para ajustar toda la identidad
visual de la landing page. El resto del archivo solo consume estas
variables, nunca colores "sueltos".
========================================================================== */
:root {
/* ---- ACENTO CLÍNICO (turquesa / cian de marca) ---- */
--color-accent: #00AEC7;
--color-accent-dark: #00889C;
--color-accent-light: #E3F7FA;
/* ---- FONDOS OSCUROS (antracita) ---- */
--color-dark: #121212;
--color-dark-alt: #1A1A1A;
--color-dark-card: #202020;
--color-dark-border: #2C2C2C;
/* ---- FONDOS CLAROS ---- */
--color-light: #FFFFFF;
--color-light-alt: #F4F5F6;
/* ---- TEXTO ---- */
--color-text-dark: #1A1A1A; /* texto principal sobre fondos claros */
--color-text-muted: #6B7280; /* texto secundario sobre fondos claros */
--color-text-light: #F5F5F5; /* texto principal sobre fondos oscuros */
--color-text-light-muted: #A8ADB4; /* texto secundario sobre fondos oscuros */
/* ---- DETALLES CÁLIDOS (madera / arena, uso puntual) ---- */
--color-warm: #D8C3A5;
--color-warm-dark: #B99C74;
/* ---- TIPOGRAFÍA: CAMBIAR AQUÍ ----
Recuerda actualizar también el de Google Fonts en el
de index.html si cambias las familias tipográficas. */
--font-display: 'Montserrat', 'Segoe UI', sans-serif; /* Títulos */
--font-body: 'Inter', 'Segoe UI', sans-serif; /* Párrafos */
/* ---- RADIOS Y SOMBRAS ---- */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 26px;
--section-padding: 6rem;
--shadow-card: 0 6px 24px rgba(0, 0, 0, 0.08);
--shadow-accent: 0 10px 30px -10px rgba(0, 174, 199, 0.45);
--max-width: 1180px;
}
/* ==========================================================================
2. RESET Y BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--color-text-dark);
background-color: var(--color-light);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--font-display);
line-height: 1.15;
margin: 0 0 0.6em;
font-weight: 700;
}
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ==========================================================================
3. UTILIDADES Y LAYOUT
========================================================================== */
.container {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: 1.5rem;
}
.eyebrow {
display: inline-block;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent-dark);
margin-bottom: 0.75rem;
}
.eyebrow--light { color: var(--color-accent); }
.text-accent { color: var(--color-accent); }
.text-on-dark { color: var(--color-text-light); }
.section-heading {
max-width: 620px;
margin: 0 auto 3.5rem;
text-align: center;
}
.section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.section-heading__desc { color: var(--color-text-muted); }
.section-heading__desc--light { color: var(--color-text-light-muted); }
/* ---- Botones ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.6rem;
border-radius: 999px;
font-weight: 600;
font-size: 0.92rem;
border: 2px solid transparent;
transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
}
.btn--accent {
background-color: var(--color-accent);
color: #ffffff;
box-shadow: var(--shadow-accent);
}
.btn--accent:hover {
background-color: var(--color-accent-dark);
transform: translateY(-2px);
}
.btn--outline-light {
background-color: transparent;
color: var(--color-text-light);
border-color: rgba(245, 245, 245, 0.35);
}
.btn--outline-light:hover {
border-color: var(--color-accent);
color: var(--color-accent);
transform: translateY(-2px);
}
.btn--lg { padding: 1rem 2.1rem; font-size: 1rem; }
.btn--nav { display: inline-flex; }
/* ---- Marcador de posición de imagen ----
Sustituye por ![]()
reales cuando tengas las fotografías del consultorio. */
.media-placeholder {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(145deg, #EFEAE1, var(--color-warm));
color: var(--color-text-dark);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.03em;
border-radius: var(--radius-md);
border: 1px dashed var(--color-warm-dark);
aspect-ratio: 16 / 10;
}
/* ==========================================================================
4. NAVBAR
========================================================================== */
.navbar {
position: sticky;
top: 0;
z-index: 50;
background-color: rgba(18, 18, 18, 0.55);
backdrop-filter: blur(10px);
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.navbar.is-scrolled {
background-color: rgba(53, 50, 50, 0.808);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding-block: 1rem;
}
.logo {
display: flex;
height: 80px;
width: auto;
flex-direction: column;
align-items: flex-start;
line-height: 1;
position: relative;
}
.logo__text {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.3rem;
letter-spacing: 0.02em;
color: var(--color-text-light);
display: inline-flex;
align-items: center;
}
/* Barra que sustituye la "E" central, como en el logotipo real */
.logo__bar {
display: inline-block;
width: 0.62em;
height: 0.2em;
background-color: currentColor;
margin-inline: 0.12em;
border-radius: 1px;
}
.logo__smile {
width: 34px;
height: 13px;
color: var(--color-accent);
margin-top: 2px;
}
.logo__sub {
font-size: 0.6rem;
letter-spacing: 0.04em;
color: var(--color-text-light-muted);
margin-top: 2px;
}
.nav__list {
display: flex;
gap: 2rem;
}
.nav__list a {
font-weight: 500;
font-size: 0.92rem;
color: var(--color-text-light-muted);
transition: color 0.15s ease;
}
.nav__list a:hover { color: var(--color-accent); }
.nav__toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
padding: 0.4rem;
}
.nav__toggle span {
width: 24px;
height: 2px;
background-color: var(--color-text-light);
border-radius: 2px;
}
/* ==========================================================================
5. HERO
========================================================================== */
.hero {
position: relative;
padding-top: 8rem;
padding-bottom: 8rem;
color: var(--color-text-light);
text-align: center;
overflow: hidden;
/*
IMAGEN DE FONDO DEL HERO — CAMBIAR AQUÍ
Reemplaza la url() de abajo por una fotografía real del consultorio
o de un procedimiento dental. Se recomienda una imagen en escala de
grises o de tonos fríos para conservar el contraste con el texto.
Ejemplo:
background-image: linear-gradient(180deg, rgba(18,18,18,.75), rgba(18,18,18,.92)), url('assets/img/hero-dentique.jpg');
*/
background-image:
linear-gradient(180deg, rgba(18,18,18,.80), rgba(18,18,18,.94)),
radial-gradient(circle at 20% 20%, #2a2a2a, transparent 60%),
radial-gradient(circle at 80% 0%, #1c2e30, transparent 55%);
background-color: var(--color-dark);
background-size: cover;
background-position: center;
}
.hero__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
.hero__title {
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 800;
color: var(--color-text-light);
}
.hero__subtitle {
color: var(--color-text-light-muted);
font-size: 1.08rem;
max-width: 48ch;
margin-inline: auto;
}
.hero__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1.75rem;
}
/* Divisor decorativo "sonrisa" — elemento de firma visual entre secciones,
inspirado en la curva del logotipo de la marca */
.smile-divider {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
line-height: 0;
}
.smile-divider svg { width: 100%; height: 60px; display: block; }
.smile-divider svg path { fill: var(--color-light); }
/* ==========================================================================
6. SERVICIOS (sección clara — rompe el fondo oscuro)
========================================================================== */
.services {
padding-block: var(--section-padding);
background-color: var(--color-light);
}
.services__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.75rem;
}
.service-card {
background-color: var(--color-light-alt);
border: 1px solid #E7E9EC;
border-radius: var(--radius-md);
padding: 2.2rem 1.6rem;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-card);
border-color: var(--color-accent);
}
/* Este controla el tamaño del sombreado/círculo exterior */
.service-card__icon {
width: 90px; /* Ajusta este valor para hacer el sombreado más grande o chico */
height: 90px; /* Manténlo igual que el width */
margin: 0 auto 1.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-accent-light); /* Aquí se genera el sombreado extra */
overflow: hidden; /* Evita que la imagen se salga si es muy grande */
}
/* Este nuevo bloque congela el tamaño del icono interno */
.service-card__icon .icon-wrapper,
.service-card__icon img {
width: 56px !important; /* Obliga a la muela a quedarse de este tamaño */
height: 56px !important;
display: flex;
align-items: center;
justify-content: center;
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.05rem; }
.service-card p { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 0; }
/* ==========================================================================
7. SUCURSALES (regresa al fondo oscuro antracita)
========================================================================== */
.branches {
padding-block: var(--section-padding);
background-color: var(--color-dark);
}
.branches__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.branch-card {
background-color: var(--color-dark-card);
border: 1px solid var(--color-dark-border);
border-radius: var(--radius-lg);
padding: 2rem;
/* Detalle cálido: borde inferior en tono madera/arena */
border-bottom: 4px solid var(--color-warm);
}
.branch-card__header h3 {
color: var(--color-text-light);
font-size: 1.3rem;
}
.branch-card__details {
display: flex;
flex-direction: column;
gap: 0.85rem;
font-size: 0.92rem;
color: var(--color-text-light-muted);
margin: 1rem 0 1.5rem;
}
.branch-card__details strong {
display: block;
color: var(--color-accent);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.2rem;
}
.branch-card__details a:hover { color: var(--color-accent); }
.branch-card__map {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-sm);
overflow: hidden;
background-color: var(--color-dark-alt);
margin-bottom: 1rem;
}
.branch-card__map iframe { width: 100%; height: 100%; }
/* Modifica tu clase actual agregando estas propiedades */
.branch-card__photo {
margin-bottom: 1rem;
/* 1. Control del contenedor */
width: 100%; /* Ocupa el ancho total de la tarjeta */
border-radius: 12px; /* Aplica el mismo redondeado que tienen tus mapas */
overflow: hidden; /* ¡CLAVE! Corta las esquinas de la imagen para que no sobresalgan */
display: block; /* Asegura el comportamiento de bloque */
}
/* 2. Añade esta nueva regla para controlar la imagen interna */
.branch-card__photo img {
width: 100%;
/* Forzamos a que ambas imágenes tengan la misma proporción exacta */
aspect-ratio: 16 / 10; /* Proporción rectangular perfecta para fachadas */
/* Hace que la imagen se adapte al contenedor rellenándolo sin deformarse ni estirarse */
object-fit: cover;
display: block; /* Elimina espacios fantasmas debajo de la imagen */
object-position: 50% 60%;
}
/* ==========================================================================
8. TESTIMONIOS
========================================================================== */
.testimonials {
padding-block: var(--section-padding);
background-color: var(--color-light-alt);
}
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
.testimonial-card {
background-color: var(--color-light);
border-radius: var(--radius-md);
padding: 2rem;
text-align: center;
box-shadow: var(--shadow-card);
}
.avatar-placeholder {
width: 60px;
height: 60px;
margin: 0 auto 1.25rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-accent);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
}
.testimonial-card__quote {
font-size: 0.92rem;
color: var(--color-text-muted);
font-style: italic;
}
.testimonial-card__name {
font-weight: 700;
margin-bottom: 0.1rem;
}
.testimonial-card__role {
font-size: 0.82rem;
color: var(--color-accent-dark);
margin-bottom: 0;
}
/* ==========================================================================
9. CTA FINAL
========================================================================== */
.cta-final {
padding-block: 5.5rem;
background-color: var(--color-dark-alt);
color: var(--color-text-light);
text-align: center;
}
.cta-final h2 { color: var(--color-text-light); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-final p {
color: var(--color-text-light-muted);
max-width: 480px;
margin-inline: auto;
margin-bottom: 1.75rem;
}
/* ==========================================================================
10. FOOTER
========================================================================== */
.footer {
background-color: var(--color-dark);
color: var(--color-text-light-muted);
padding-top: 3rem;
}
.footer__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid var(--color-dark-border);
}
.logo__text--footer { color: var(--color-text-light); }
.footer__sub { font-size: 0.78rem; margin: 0.35rem 0 0; }
.footer__links {
display: flex;
gap: 1.75rem;
flex-wrap: wrap;
font-size: 0.9rem;
}
.footer__links a:hover { color: var(--color-accent); }
.footer__social {
display: flex;
gap: 0.9rem;
}
.footer__social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-dark-card);
color: var(--color-text-light-muted);
transition: background-color 0.15s ease, color 0.15s ease;
}
.footer__social a:hover {
background-color: var(--color-accent);
color: #fff;
}
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom {
padding-block: 1.5rem;
font-size: 0.8rem;
text-align: center;
}
/* ==========================================================================
11. RESPONSIVO
========================================================================== */
@media (max-width: 1024px) {
.services__grid { grid-template-columns: repeat(2, 1fr); }
.testimonials__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 860px) {
:root { --section-padding: 4rem; }
.nav { display: none; }
.nav.is-open {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgba(18, 18, 18, 0.98);
padding: 1rem 1.5rem 1.5rem;
}
.nav.is-open .nav__list { flex-direction: column; gap: 1rem; }
.btn--nav { display: none; }
.nav__toggle { display: flex; }
.branches__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.services__grid { grid-template-columns: 1fr; }
.hero__actions { flex-direction: column; align-items: stretch; }
.hero__actions .btn { width: 100%; }
.footer__inner { flex-direction: column; }
}