/* ============================================ RESETEO ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Va de la mano con el clip del body de abajo — cubre los casos en los que algunos navegadores permiten que un hijo se desborde a nivel aunque tenga clip. */ overflow-x: clip; } body { font-family: var(--font-family-sans); font-size: var(--font-size-md); line-height: var(--line-height-tight); color: var(--neutral-900); background-color: var(--neutral-100); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; max-width: 100%; overflow-x: clip; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } /* ============================================ DISEÑO DEL NAVBAR ============================================ */ .navbar { position: sticky; top: 0; z-index: 100; width: 100%; background-color: var(--neutral-100); box-shadow: var(--shadow-navbar); } /* Efecto vidrio premium: navbar translúcido con un suave desenfoque de fondo. Envuelto en @supports para que los navegadores sin backdrop-filter mantengan el fondo blanco sólido de arriba (sin pérdida de legibilidad). */ @supports ( (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) ) { .navbar { background-color: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: saturate(120%) blur(12px); backdrop-filter: saturate(120%) blur(12px); } } .navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); width: 100%; max-width: var(--container-max); margin: 0 auto; padding: var(--navbar-padding-y-mobile) var(--section-pad-x-mobile); } .navbar__brand { display: flex; align-items: center; gap: var(--space-16); flex-shrink: 0; border-radius: var(--radius-sm); } .navbar__brand:focus-visible { outline: 2px solid var(--neutral-900); outline-offset: 4px; } .navbar__logo { width: 40px; height: 40px; flex-shrink: 0; } .navbar__info { display: flex; flex-direction: column; gap: var(--space-2); } .navbar__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-normal); color: var(--neutral-900); } .navbar__title { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); color: var(--neutral-700); } .navbar__menu { display: flex; align-items: center; gap: var(--space-32); } .navbar__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); } /* DISEÑO DEL HERO */ .hero { width: 100%; padding: 0 var(--section-pad-x-mobile); margin-top: 64px; } .hero__container { display: flex; flex-direction: column; gap: var(--space-40); width: 100%; max-width: var(--container-content); margin: 0 auto; } .hero__row { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-40); } .hero__content { display: flex; flex-direction: column; gap: var(--space-32); } .hero__copy { display: flex; flex-direction: column; gap: var(--space-24); } .hero__eyebrow { display: flex; font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); color: var(--neutral-700); } .hero__eyebrow-icon { width: 24px; height: 24px; color: var(--neutral-700); flex-shrink: 0; } .hero__heading { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: 0.017em; color: var(--neutral-800); } .hero__heading-accent { color: var(--accent-primary); } .hero__subtitle { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: 0.044em; color: var(--neutral-700); } .hero__image { width: 100%; aspect-ratio: 548 / 443; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-image); } /* ============================================ ESTADÍSTICAS DEL HERO ============================================ */ .hero__stats { display: flex; justify-content: space-between; align-items: center; gap: var(--space-24); } .stat { display: flex; flex-direction: column; gap: var(--space-6); flex: 1 1 auto; min-width: 104px; } /* ============================================ DISEÑO DE LA SECCIÓN SOBRE MÍ ============================================ */ .about-me { width: 100%; padding: 0 var(--section-pad-x-mobile); } .about-me__container { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-40); width: 100%; max-width: var(--container-content); margin: 0 auto; } .about-me__content { display: flex; flex-direction: column; gap: var(--space-32); } .about-me__title { display: flex; flex-direction: column; gap: var(--space-24); } .about-me__eyebrow { display: flex; align-items: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); color: var(--neutral-700); } .about-me__eyebrow-icon { width: 24px; height: 24px; color: var(--accent-primary); flex-shrink: 0; } .about-me__heading { display: flex; flex-direction: column; gap: var(--space-8); } .about-me__name { /* 36px es exclusivo de esta sección — se mantiene literal para no contaminar la escala global de tamaños de fuente que usa el hero. */ font-size: var(--font-size-display-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: 0.022em; color: var(--neutral-800); } .about-me__subtitle { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--accent-primary); } .about-me__description { display: flex; flex-direction: column; gap: var(--space-24); } .about-me__paragraph { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: 0.044em; color: var(--neutral-700); } .about-me__features { display: flex; flex-direction: column; gap: var(--space-12); } .about-me__media { width: 100%; border-radius: 10px; overflow: hidden; } .about-me__image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: var(--shadow-image); } /* ============================================ DISEÑO DE LA SECCIÓN MODALIDADES ============================================ */ .modes { width: 100%; padding: 0 var(--section-pad-x-mobile); } .modes__container { display: flex; flex-direction: column; gap: var(--space-40); width: 100%; max-width: var(--container-content); margin: 0 auto; } .modes__header { display: flex; flex-direction: column; gap: var(--space-24); } .modes__eyebrow { display: flex; align-items: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); color: var(--neutral-700); } .modes__eyebrow-icon { width: 24px; height: 24px; color: var(--accent-primary); flex-shrink: 0; } .modes__heading { /* 36px es exclusivo del h2 de esta sección — se mantiene literal, mismo criterio que .about-me__name. */ font-size: var(--font-size-display-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: 0.022em; color: var(--neutral-800); } .modes__subtitle { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: 0.044em; color: var(--neutral-700); } .modes__cards { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-24); } /* ============================================ DISEÑO DE LA SECCIÓN RECURSOS ============================================ */ .resources { width: 100%; padding: 0 var(--section-pad-x-mobile); } .resources__container { display: flex; flex-direction: column; gap: var(--space-40); width: 100%; max-width: var(--container-content); margin: 0 auto; } .resources__header { display: flex; flex-direction: column; gap: var(--space-24); } .resources__eyebrow { display: flex; align-items: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); color: var(--neutral-700); } .resources__eyebrow-icon { width: 24px; height: 24px; color: var(--accent-primary); flex-shrink: 0; } .resources__heading { /* 36px es el tamaño del h2 de la sección — se mantiene literal, mismo criterio que .about-me__name y .modes__heading. */ font-size: var(--font-size-display-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: 0.022em; color: var(--neutral-800); } .resources__subtitle { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: 0.044em; color: var(--neutral-700); } /* Slider de desplazamiento horizontal en mobile/tablet (sólo CSS). Se restaura a una grilla de 3 columnas en ≥1024 dentro de responsive.css. `touch-action: pan-x pan-y` deja que el navegador decida según la dirección inicial del gesto: swipe horizontal mueve el slider, swipe vertical hace scroll de la página (no se bloquea al apoyar el dedo sobre una card). */ .resources__cards { display: flex; flex-wrap: nowrap; gap: var(--space-16); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: none; padding-bottom: var(--space-8); } .resources__cards::-webkit-scrollbar { display: none; } .resources__cards .resource-card { flex: 0 0 75%; min-width: 240px; scroll-snap-align: start; } /* ============================================ DISEÑO DE LA SECCIÓN TESTIMONIOS ============================================ */ .testimonials { width: 100%; padding: 0 var(--section-pad-x-mobile); } .testimonials__container { display: flex; flex-direction: column; gap: var(--space-40); width: 100%; max-width: var(--container-content); margin: 0 auto; } .testimonials__header { display: flex; flex-direction: column; gap: var(--space-24); } .testimonials__eyebrow { display: flex; align-items: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); color: var(--neutral-700); } .testimonials__eyebrow-icon { width: 24px; height: 24px; color: var(--accent-primary); flex-shrink: 0; } .testimonials__heading { /* 36px es el tamaño del h2 de la sección — se mantiene literal, mismo criterio que .about-me__name, .modes__heading y .resources__heading. */ font-size: var(--font-size-display-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: 0.022em; color: var(--neutral-800); } .testimonials__subtitle { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: 0.044em; color: var(--neutral-700); } .testimonials__cards { display: grid; grid-template-columns: 1fr; /* `1fr` sobre las filas autogeneradas iguala cada fila a la altura del contenido de la card más alta. Combinado con el align-items: stretch por defecto de la grilla, todas las cards quedan con la misma altura sin importar el largo de la reseña. Funciona en el stack de 1 columna en tablet y en la grilla de 2 columnas en desktop. Mobile lo sobrescribe a flex más abajo y lo ignora. */ grid-auto-rows: 1fr; gap: var(--space-24); } /* Contenedor oculto del sprite SVG para el símbolo lucide-star. width/height en 0 lo mantienen fuera del flujo del layout. */ .testimonials__sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ============================================ DISEÑO DEL CTA FINAL (START) ============================================ */ .start { width: 100%; padding: 0 var(--section-pad-x-mobile); } .start__container { display: flex; flex-direction: column; gap: var(--space-40); width: 100%; max-width: var(--container-content); margin: 0 auto; } .start__contact { display: flex; flex-direction: column; align-items: center; gap: var(--space-32); padding: var(--space-32) var(--space-16) var(--space-48); background-color: var(--brand-logo); border-radius: var(--radius-lg); color: var(--neutral-100); text-align: center; } .start__eyebrow { display: flex; justify-content: center; align-items: center; align-self: self-start; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); color: var(--neutral-100); padding: 8px 12px; background-color:var(--brand-dark); border-radius: 999px; } .start__eyebrow-icon { width: 24px; height: 24px; color: var(--neutral-100); flex-shrink: 0; } .start__heading { /* Bold/36 de Figma — se mantiene literal como en los demás h2 de sección. */ font-size: var(--font-size-display-md); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); text-align: center; color: var(--neutral-100); } .start__description { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: 0.044em; text-align: center; color: var(--neutral-100); } /* El CTA dentro del bloque verde respeta el ancho fijo de 336 de Figma manteniéndose responsivo en viewports chicos. */ .start__contact .btn-cream { width: 100%; max-width: 336px; } .start__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-16); } /* ============================================ DISEÑO DEL FOOTER (v2 — 3 columnas, fondo oscuro) - Gap de 160px respecto a la sección anterior, sin divisor visible entre ambas. ============================================ */ .footer { width: 100%; margin-top: var(--space-160); padding: var(--space-32) var(--section-pad-x-mobile); background-color: var(--neutral-900); color: var(--neutral-100); } .footer__container { display: flex; flex-direction: column; gap: var(--space-40); width: 100%; max-width: var(--container-content); margin: 0 auto; } .footer__top { display: flex; flex-direction: column; gap: var(--space-32); } .footer__brand, .footer__contact, .footer__location { display: flex; flex-direction: column; gap: var(--space-8); font-style: normal; /* resetea el itálico por defecto de

*/ } .footer__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: 0.044em; color: var(--neutral-100); } .footer__role { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: 1.5; letter-spacing: 0.05em; color: var(--neutral-550); } .footer__col-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); color: var(--neutral-550); } .footer__contact-line, .footer__location-line { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: 1.5; letter-spacing: 0.05em; color: var(--neutral-100); } .footer__contact a { color: inherit; text-decoration: none; transition: opacity var(--transition-fast); } .footer__contact a:hover { opacity: 0.7; } .footer__contact a:focus-visible { outline: 2px solid var(--neutral-100); outline-offset: 2px; border-radius: 2px; } /* Enlace "Ver consultorio" con icono de flecha al final. Limitado al footer — uso único, todavía no se promovió a un componente reutilizable. */ .footer__cta-link { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--brand-rating); transition: opacity var(--transition-fast), transform var(--transition-fast); } .footer__cta-link:hover { opacity: 0.8; } .footer__cta-link:hover .footer__cta-link__icon { transform: translate(2px, -2px); } .footer__cta-link:active { transform: scale(0.97); } .footer__cta-link:focus-visible { outline: 2px solid var(--brand-rating); outline-offset: 4px; border-radius: 2px; } .footer__cta-link__icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--transition-fast); } .footer__line { width: 100%; height: 0; border: 0; border-top: 1px solid var(--neutral-700); } .footer__bottom { display: flex; justify-content: center; align-items: center; gap: var(--space-16); } .footer__copyright { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: 2; letter-spacing: 0.067em; color: var(--neutral-550); text-align: center; }