/* ============================================
Dermatología Avanzada · Dra. Raisa Acosta
Design system: Editorial Reverence
============================================ */
:root {
--verde: #4a6b5c;
--verde-claro: #e8efe9;
--verde-oscuro: #2f4a3e;
--crema: #f7f3ec;
--crema-suave: #fbf8f2;
--tinta: #1f2422;
--gris: #6b6e6c;
--gris-claro: #a8aba9;
--acento: #c9a87a;
--acento-oscuro: #a68852;
--whatsapp: #25d366;
--pad-section: 96px;
--pad-section-sm: 64px;
--max-w: 1120px;
--radius: 12px;
--radius-sm: 6px;
--shadow: 0 12px 40px rgba(47, 74, 62, 0.08);
--shadow-lg: 0 30px 80px rgba(47, 74, 62, 0.15);
--transition: all 0.25s ease;
}
* { box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: var(--tinta);
background: var(--crema);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 500;
line-height: 1.12;
margin: 0 0 0.5em;
color: var(--verde-oscuro);
letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
h3 { font-size: 1.55rem; }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--verde-oscuro); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--verde); }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.eyebrow {
display: inline-block;
text-transform: uppercase;
font-size: 0.78rem;
letter-spacing: 0.28em;
color: var(--acento-oscuro);
font-weight: 500;
margin-bottom: 16px;
}
/* ============================================
HEADER
============================================ */
header.top {
position: sticky;
top: 0;
z-index: 100;
padding: 14px 0;
background: rgba(247, 243, 236, 0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(74, 107, 92, 0.12);
}
header.top .wrap {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
header.top .logo { display: block; height: 42px; width: auto; }
header.top .nav-wrap { display: flex; align-items: center; gap: 28px; }
header.top ul.nav {
list-style: none; padding: 0; margin: 0;
display: flex; gap: 28px; align-items: center;
}
header.top ul.nav a {
font-size: 0.94rem;
color: var(--tinta);
font-weight: 500;
transition: var(--transition);
}
header.top ul.nav a:hover, header.top ul.nav a.active { color: var(--verde); }
header.top ul.nav li.dropdown { position: relative; }
header.top ul.nav li.dropdown > a::after {
content: "▾"; font-size: 0.72em; margin-left: 4px; color: var(--gris);
}
header.top ul.nav li.dropdown ul {
position: absolute;
top: calc(100% + 12px);
left: -16px;
background: white;
border: 1px solid #ece6db;
border-radius: var(--radius-sm);
padding: 8px 0;
min-width: 240px;
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: var(--transition);
list-style: none;
margin: 0;
display: block;
}
header.top ul.nav li.dropdown:hover > ul,
header.top ul.nav li.dropdown:focus-within > ul {
opacity: 1; visibility: visible; transform: translateY(0);
}
header.top ul.nav li.dropdown ul li { padding: 0; }
header.top ul.nav li.dropdown ul a {
display: block; padding: 10px 18px; font-size: 0.92rem;
}
header.top ul.nav li.dropdown ul a:hover { background: var(--verde-claro); }
header.top a.cta-mini {
background: var(--verde);
color: white;
padding: 10px 22px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 500;
}
header.top a.cta-mini:hover { background: var(--verde-oscuro); color: white; }
button.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 6px;
}
button.nav-toggle span {
display: block;
width: 24px; height: 2px;
background: var(--verde-oscuro);
margin: 5px 0;
transition: var(--transition);
}
/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-block;
background: var(--verde-oscuro);
color: white;
text-decoration: none;
padding: 16px 36px;
border-radius: 999px;
font-weight: 500;
font-size: 1rem;
border: none;
cursor: pointer;
transition: var(--transition);
}
.btn:hover { background: var(--verde); color: white; transform: translateY(-1px); }
.btn--ghost {
background: transparent;
color: var(--verde-oscuro);
border: 1.5px solid var(--verde-oscuro);
}
.btn--ghost:hover { background: var(--verde-oscuro); color: white; }
.btn--wa {
background: var(--whatsapp);
display: inline-flex; align-items: center; gap: 10px;
}
.btn--wa:hover { background: #1ebe57; }
.btn--wa::before {
content: "";
width: 20px; height: 20px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
/* ============================================
WHATSAPP FLOAT
============================================ */
.whatsapp-float {
position: fixed;
bottom: 24px; right: 24px;
width: 56px; height: 56px;
background: var(--whatsapp);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
z-index: 90;
transition: var(--transition);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; fill: white; }
/* ============================================
STICKY BANNER · DÍA DE LAS MADRES
============================================ */
/* ============================================
HERO
============================================ */
.hero {
background: linear-gradient(180deg, var(--crema) 0%, var(--verde-claro) 100%);
padding: 80px 0 96px;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 72px;
align-items: center;
}
.hero-text h1 { margin-bottom: 28px; }
.hero-text .subhead {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.32rem;
color: var(--gris);
line-height: 1.45;
margin-bottom: 40px;
max-width: 480px;
}
.hero-text .attribution { font-size: 0.92rem; color: var(--gris); margin-bottom: 28px; }
.hero-text .attribution strong { color: var(--verde-oscuro); font-weight: 600; }
.hero-image {
aspect-ratio: 4/5;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* ============================================
SECTIONS
============================================ */
section { padding: var(--pad-section) 0; }
section.alt { background: var(--crema-suave); }
.section-eyebrow { text-align: center; margin-bottom: 56px; }
.section-eyebrow .label {
display: inline-block;
text-transform: uppercase;
font-size: 0.78rem;
letter-spacing: 0.3em;
color: var(--verde);
font-weight: 500;
position: relative;
padding: 0 28px;
}
.section-eyebrow .label::before,
.section-eyebrow .label::after {
content: ""; position: absolute; top: 50%;
width: 64px; height: 1px; background: var(--verde); opacity: 0.4;
}
.section-eyebrow .label::before { right: 100%; }
.section-eyebrow .label::after { left: 100%; }
.section-intro {
text-align: center;
max-width: 720px;
margin: 0 auto 60px;
color: var(--gris);
}
.section-intro h2 { color: var(--verde-oscuro); margin-bottom: 14px; }
.section-intro p { font-size: 1.08rem; line-height: 1.7; }
/* ============================================
SERVICIOS GRID (3 columnas)
============================================ */
.servicios-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.servicio-card {
background: white;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid #ece6db;
display: flex; flex-direction: column;
transition: var(--transition);
}
.servicio-card:hover {
box-shadow: var(--shadow);
transform: translateY(-3px);
}
.servicio-card-image {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--verde-claro);
}
.servicio-card-image img { width: 100%; height: 100%; object-fit: cover; }
.servicio-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.servicio-card-body h3 { font-size: 1.4rem; margin-bottom: 12px; }
.servicio-card-body p { color: var(--gris); font-size: 0.96rem; line-height: 1.6; margin-bottom: 20px; flex: 1; }
.servicio-card-body .link-more {
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--verde);
font-weight: 500;
}
.servicio-card-body .link-more::after { content: " →"; transition: var(--transition); }
.servicio-card:hover .link-more::after { margin-left: 4px; }
/* ============================================
PERFIL DE LA DRA
============================================ */
.perfil-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.perfil-image {
aspect-ratio: 4/5;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow);
}
.perfil-image img { width: 100%; height: 100%; object-fit: cover; }
.perfil-text p {
color: var(--gris);
font-size: 1.05rem;
line-height: 1.75;
margin-bottom: 1.1em;
}
.perfil-text p:last-child { margin-bottom: 0; }
.perfil-text .credenciales {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #ece6db;
}
.perfil-text .credenciales h4 {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--verde);
font-weight: 600;
margin-bottom: 12px;
}
.perfil-text .credenciales ul {
list-style: none; padding: 0; margin: 0;
font-size: 0.95rem; color: var(--tinta); line-height: 1.7;
}
.perfil-text .credenciales li::before {
content: "— "; color: var(--acento); font-weight: 600;
}
/* ============================================
DÍA DE LAS MADRES BANNER (en home)
============================================ */
/* ============================================
CTA FINAL
============================================ */
.cta-final {
background: var(--verde-claro);
text-align: center;
padding: var(--pad-section) 32px;
}
.cta-final h2 { margin-bottom: 14px; }
.cta-final p {
color: var(--gris);
max-width: 500px;
margin: 0 auto 40px;
font-size: 1.05rem;
}
.cta-final .btn { margin-bottom: 28px; }
.cta-final .nota {
font-size: 0.86rem;
color: var(--gris);
margin: 0 auto;
max-width: 580px;
line-height: 1.6;
}
/* ============================================
FOOTER
============================================ */
footer {
padding: 56px 0 40px;
text-align: center;
background: var(--verde-oscuro);
color: rgba(255, 255, 255, 0.75);
font-size: 0.88rem;
}
footer a { color: white; text-decoration: none; }
footer a:hover { color: var(--acento); }
footer .contacto { margin-bottom: 16px; }
footer .contacto a { display: inline-block; margin: 0 12px; }
footer .direccion { opacity: 0.85; }
footer .horario { font-size: 0.82rem; opacity: 0.7; margin-top: 10px; }
footer .social {
margin: 20px 0 14px;
display: flex; gap: 18px; justify-content: center;
}
footer .social a {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
display: inline-flex; align-items: center; justify-content: center;
transition: var(--transition);
}
footer .social a:hover { background: var(--acento); }
footer .social svg { width: 16px; height: 16px; fill: white; }
footer .footer-links {
margin-top: 18px;
font-size: 0.82rem;
opacity: 0.75;
}
footer .footer-links a { margin: 0 10px; }
footer .copy { margin-top: 18px; opacity: 0.55; font-size: 0.78rem; }
/* ============================================
GENERIC CONTENT (servicios internos, sobre, contacto)
============================================ */
.content-narrow { max-width: 760px; margin: 0 auto; }
.content-narrow p {
font-size: 1.05rem; line-height: 1.75; color: var(--tinta);
margin-bottom: 1.2em;
}
.content-narrow h3 {
margin-top: 2em;
margin-bottom: 0.6em;
color: var(--verde-oscuro);
}
.servicio-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 40px;
}
.servicio-item {
background: white;
border-radius: var(--radius-sm);
padding: 24px 26px;
border: 1px solid #ece6db;
transition: var(--transition);
}
.servicio-item:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.servicio-item h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
margin-bottom: 8px;
color: var(--verde-oscuro);
}
.servicio-item p { color: var(--gris); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.servicio-grupo {
margin: 50px 0;
}
.servicio-grupo h3 {
font-size: 1.6rem;
text-align: center;
margin-bottom: 12px;
}
.servicio-grupo .label-italic {
text-align: center;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: var(--gris);
margin-bottom: 36px;
}
/* ============================================
CONTACTO (info box)
============================================ */
.contacto-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
margin-top: 40px;
}
.contacto-info { padding: 0; }
.contacto-info h3 { font-size: 1.4rem; margin-bottom: 18px; }
.contacto-info .info-item {
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px solid #ece6db;
}
.contacto-info .info-item:last-child { border-bottom: none; }
.contacto-info .info-label {
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--verde);
font-weight: 600;
margin-bottom: 6px;
}
.contacto-info .info-value { font-size: 1.02rem; color: var(--tinta); }
.contacto-info .info-value a { color: var(--verde-oscuro); }
.contacto-mapa {
background: var(--verde-claro);
border-radius: var(--radius-sm);
overflow: hidden;
min-height: 320px;
aspect-ratio: 4/3;
}
.contacto-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 980px) {
:root { --pad-section: 72px; }
.hero-grid { grid-template-columns: 1fr; gap: 50px; }
.hero { padding: 50px 0 70px; }
.hero-image { max-width: 460px; margin: 0 auto; }
.hero-text { text-align: center; }
.hero-text .subhead { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }
.servicios-grid { grid-template-columns: 1fr; gap: 24px; }
.perfil-grid { grid-template-columns: 1fr; gap: 40px; }
.perfil-image { max-width: 380px; margin: 0 auto; }
.contacto-grid { grid-template-columns: 1fr; gap: 36px; }
/* Mobile nav */
button.nav-toggle { display: block; order: 2; }
header.top .nav-wrap {
order: 3;
width: 100%;
display: none;
flex-direction: column;
align-items: stretch;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #ece6db;
}
header.top .nav-wrap.open { display: flex; }
header.top ul.nav { flex-direction: column; gap: 0; align-items: stretch; }
header.top ul.nav a { display: block; padding: 12px 0; }
header.top ul.nav li.dropdown ul {
position: static;
box-shadow: none;
border: none;
background: var(--verde-claro);
border-radius: var(--radius-sm);
opacity: 1; visibility: visible; transform: none;
margin: 8px 0;
padding: 8px 0;
}
header.top ul.nav li.dropdown > a::after { display: none; }
header.top a.cta-mini { align-self: flex-start; margin-top: 8px; }
}
@media (max-width: 560px) {
.wrap { padding: 0 22px; }
header.top .logo { height: 36px; }
.section-eyebrow .label::before,
.section-eyebrow .label::after { width: 32px; }
}
/* ── Formulario de solicitud de cita ─────────────────────────────────────────
Las reglas de campo van SIEMPRE con input, select y textarea juntos. Es
lección de flota: en TASC se añadió un