/* ============================================ Dra. Ana Karen Salas — Reumatología CDMX Tokens: rosa pálido / verde agua / tinta marina Fuentes cargadas desde el HTML (ver en ), no con @import, para evitar una cadena de carga en serie que retrasa el LCP. ============================================ */ :root{ --rosa: #F3DDE1; --rosa-suave: #FBF1F2; --verde: #8FBFB5; --verde-oscuro: #5E948A; --tinta: #1F3B3A; --tinta-suave: #3A5654; --crema: #FBF8F6; --blanco: #FFFFFF; --texto: #2B2523; --texto-suave: #6B615D; --linea: #E7DAD3; --serif: 'Lora', Georgia, serif; --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius: 4px; --sombra: 0 10px 30px -12px rgba(31,59,58,0.18); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:var(--sans); color:var(--texto); background:var(--crema); line-height:1.65; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } section{ padding:5rem 1.5rem; } .contenedor{ max-width:1120px; margin:0 auto; } .contenedor-angosto{ max-width:760px; margin:0 auto; } h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; color:var(--tinta); line-height:1.15; } h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); margin-bottom:.75rem; } h3{ font-size:1.3rem; margin-bottom:.5rem; } .eyebrow{ font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--verde-oscuro); font-weight:600; margin-bottom:.9rem; display:inline-block; } .intro-seccion{ max-width:640px; margin-bottom:3rem; } .intro-seccion p{ color:var(--texto-suave); font-size:1.05rem; } :focus-visible{ outline:3px solid var(--verde-oscuro); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ---------- Botones ---------- */ .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.6rem; border-radius:100px; font-weight:600; font-size:.95rem; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; } .btn:hover{ transform:translateY(-2px); } .btn-primario{ background:var(--verde-oscuro); color:var(--blanco); box-shadow:var(--sombra); } .btn-primario:hover{ background:var(--tinta); } .btn-secundario{ background:transparent; border-color:var(--tinta); color:var(--tinta); } .btn-secundario:hover{ background:var(--tinta); color:var(--blanco); } .btn-whatsapp{ background:#25D366; color:#fff; } .btn-whatsapp:hover{ background:#1DA851; } .btn-block{ width:100%; justify-content:center; } /* ---------- Header ---------- */ .header{ position:sticky; top:0; z-index:50; background:rgba(251,248,246,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--linea); } .header .contenedor{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.5rem; } .logo{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-weight:600; color:var(--tinta); font-size:1.05rem; } .logo .sello{ width:42px; height:42px; } .nav-desktop{ display:none; gap:2rem; font-size:.92rem; font-weight:500; } .nav-desktop a{ color:var(--tinta-suave); transition:color .15s; } .nav-desktop a:hover{ color:var(--verde-oscuro); } .header-acciones{ display:flex; align-items:center; gap:.8rem; } .tel-header{ display:none; align-items:center; gap:.4rem; font-weight:600; font-size:.9rem; color:var(--tinta); } @media(min-width:900px){ .nav-desktop{ display:flex; } .tel-header{ display:flex; } } /* ---------- Hero ---------- */ .hero{ padding:3rem 1.5rem 4.5rem; position:relative; overflow:hidden; background: radial-gradient(560px 420px at 88% -6%, rgba(143,191,181,.35), transparent 60%), radial-gradient(480px 380px at -8% 96%, rgba(243,221,225,.55), transparent 60%); } .hero .contenedor{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; } @media(min-width:960px){ .hero .contenedor{ grid-template-columns:1.05fr .95fr; gap:3.5rem; } } .hero-texto h1{ font-size:clamp(2.2rem,4.4vw,3.4rem); margin-bottom:1.1rem; } .hero-texto .destaque{ color:var(--verde-oscuro); font-style:italic; } .hero-texto p{ font-size:1.12rem; color:var(--texto-suave); max-width:520px; margin-bottom:1.8rem; } .hero-acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.6rem; } .hero-credenciales{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.85rem; color:var(--texto-suave); } .hero-credenciales span{ display:flex; align-items:center; gap:.4rem; } .hero-credenciales svg{ width:16px; height:16px; color:var(--verde-oscuro); flex-shrink:0; } .hero-visual{ position:relative; } .hero-visual .marco{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra); aspect-ratio:4/5; } .hero-visual img{ width:100%; height:100%; object-fit:cover; } .hero-visual .cinta{ position:absolute; left:-1.2rem; bottom:1.8rem; background:var(--blanco); border-radius:var(--radius); padding:1rem 1.3rem; box-shadow:var(--sombra); display:flex; align-items:center; gap:.7rem; max-width:230px; } .hero-visual .cinta strong{ display:block; font-family:var(--serif); color:var(--tinta); font-size:1.4rem; line-height:1; } .hero-visual .cinta span{ font-size:.72rem; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.06em; } .hero-visual .anillo{ position:absolute; width:120px; height:120px; border:1.5px solid var(--verde); border-radius:50%; top:-1.5rem; right:-1.5rem; z-index:-1; } /* ---------- Franja de confianza ---------- */ .franja-confianza{ background:var(--tinta); color:var(--rosa-suave); padding:1.4rem 1.5rem; } .franja-confianza .contenedor{ display:flex; flex-wrap:wrap; gap:1.2rem 2.2rem; justify-content:center; align-items:center; font-size:.85rem; letter-spacing:.02em; } .franja-confianza span{ display:flex; align-items:center; gap:.5rem; opacity:.92; } .franja-confianza svg{ width:16px; height:16px; color:var(--verde); flex-shrink:0; } /* ---------- Sobre la doctora ---------- */ .sobre{ background:var(--blanco); } .sobre-grid{ display:grid; grid-template-columns:1fr; gap:3rem; } @media(min-width:900px){ .sobre-grid{ grid-template-columns:.85fr 1.15fr; } } .sobre-foto{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra); aspect-ratio:4/5; } .sobre-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; } .sobre-lista{ margin-top:1.5rem; } .sobre-lista li{ display:flex; gap:.8rem; padding:.85rem 0; border-top:1px solid var(--linea); } .sobre-lista li:first-child{ border-top:none; } .sobre-lista svg{ width:20px; height:20px; color:var(--verde-oscuro); flex-shrink:0; margin-top:.15rem; } .sobre-lista h4{ font-family:var(--sans); font-weight:600; font-size:.98rem; color:var(--tinta); } .sobre-lista p{ color:var(--texto-suave); font-size:.92rem; } /* ---------- Padecimientos ---------- */ .padecimientos{ background:var(--rosa-suave); } .grid-padecimientos{ display:grid; grid-template-columns:1fr; gap:1.3rem; } @media(min-width:640px){ .grid-padecimientos{ grid-template-columns:repeat(2,1fr); } } @media(min-width:960px){ .grid-padecimientos{ grid-template-columns:repeat(3,1fr); } } .tarjeta-padecimiento{ background:var(--blanco); border-radius:var(--radius); padding:1.6rem 1.5rem; border:1px solid var(--linea); transition:box-shadow .2s, transform .2s; } .tarjeta-padecimiento:hover{ box-shadow:var(--sombra); transform:translateY(-3px); } .tarjeta-padecimiento .num{ font-family:var(--serif); color:var(--verde); font-size:.85rem; font-style:italic; } .tarjeta-padecimiento p{ color:var(--texto-suave); font-size:.92rem; } .nota-metabolica{ margin-top:2.2rem; background:var(--verde); color:var(--tinta); border-radius:var(--radius); padding:1.4rem 1.7rem; font-size:.95rem; display:flex; gap:.9rem; align-items:flex-start; } .nota-metabolica svg{ width:22px; height:22px; flex-shrink:0; margin-top:.1rem; } /* ---------- Reseñas ---------- */ .resenas{ background:var(--blanco); } .resenas-encabezado{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:2.5rem; } .resenas-score{ display:flex; align-items:center; gap:1rem; } .resenas-score strong{ font-family:var(--serif); font-size:2.6rem; color:var(--tinta); } .resenas-score .estrellas{ color:var(--verde-oscuro); font-size:1rem; letter-spacing:.15em; } .resenas-score small{ display:block; color:var(--texto-suave); font-size:.82rem; } .grid-resenas{ display:grid; grid-template-columns:1fr; gap:1.4rem; } @media(min-width:760px){ .grid-resenas{ grid-template-columns:repeat(2,1fr); } } .tarjeta-resena{ background:var(--rosa-suave); border-radius:var(--radius); padding:1.6rem; border:1px solid var(--linea); } .tarjeta-resena .estrellas{ color:var(--verde-oscuro); font-size:.85rem; margin-bottom:.7rem; letter-spacing:.12em; } .tarjeta-resena p{ font-style:italic; color:var(--texto); font-size:.96rem; margin-bottom:.9rem; } .tarjeta-resena footer{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--texto-suave); font-style:normal; } .tarjeta-resena footer strong{ color:var(--tinta); font-weight:600; } .resenas-fuente{ text-align:center; margin-top:2rem; font-size:.85rem; color:var(--texto-suave); } .resenas-fuente a{ color:var(--verde-oscuro); font-weight:600; text-decoration:underline; } /* ---------- Contacto ---------- */ .contacto{ background:var(--tinta); color:var(--rosa-suave); } .contacto h2{ color:var(--blanco); } .contacto .intro-seccion p{ color:rgba(251,241,242,.75); } .contacto-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; } @media(min-width:900px){ .contacto-grid{ grid-template-columns:1fr 1fr; } } .contacto-datos{ display:flex; flex-direction:column; gap:1.4rem; } .dato{ display:flex; gap:1rem; align-items:flex-start; } .dato svg{ width:22px; height:22px; color:var(--verde); flex-shrink:0; margin-top:.2rem; } .dato h4{ font-family:var(--sans); font-weight:600; color:var(--blanco); font-size:.95rem; margin-bottom:.15rem; } .dato p, .dato a{ color:rgba(251,241,242,.78); font-size:.92rem; } .dato a:hover{ color:var(--verde); } .horario-tabla{ width:100%; margin-top:.3rem; border-collapse:collapse; font-size:.88rem; } .horario-tabla td{ padding:.3rem 0; color:rgba(251,241,242,.78); } .horario-tabla td:first-child{ font-weight:500; color:rgba(251,241,242,.95); width:40%; } .contacto-acciones{ display:flex; flex-direction:column; gap:.8rem; margin-top:.5rem; } .mapa-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra); border:3px solid rgba(255,255,255,.08); } .mapa-wrap iframe{ width:100%; height:340px; border:0; display:block; } /* ---------- Footer ---------- */ .footer{ background:#162B2A; color:rgba(251,241,242,.6); padding:2.4rem 1.5rem 1.6rem; font-size:.82rem; } .footer .contenedor{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.2rem; align-items:center; } .footer a{ color:rgba(251,241,242,.75); } .footer a:hover{ color:var(--verde); } .footer-links{ display:flex; gap:1.4rem; flex-wrap:wrap; } .footer-legal{ max-width:1120px; margin:1.4rem auto 0; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.08); font-size:.75rem; opacity:.75; } /* ---------- Botón flotante WhatsApp ---------- */ .flotante-whatsapp{ position:fixed; bottom:1.4rem; right:1.4rem; z-index:60; background:#25D366; color:#fff; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.22); transition:transform .15s; } .flotante-whatsapp:hover{ transform:scale(1.08); } .flotante-whatsapp svg{ width:28px; height:28px; } /* ---------- Scroll reveal ---------- */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; } .reveal.en-vista{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* ---------- Diferenciadores ---------- */ .diferenciadores{ background:var(--crema); padding-top:4.5rem; } .grid-diferenciadores{ display:grid; grid-template-columns:1fr; gap:1.4rem; } @media(min-width:640px){ .grid-diferenciadores{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1080px){ .grid-diferenciadores{ grid-template-columns:repeat(4,1fr); } } .tarjeta-diferenciador{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radius); padding:1.8rem 1.5rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .tarjeta-diferenciador:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--verde); } .tarjeta-diferenciador svg{ width:30px; height:30px; color:var(--verde-oscuro); margin-bottom:1rem; } .tarjeta-diferenciador h3{ font-size:1.08rem; margin-bottom:.4rem; } .tarjeta-diferenciador p{ color:var(--texto-suave); font-size:.9rem; } /* ---------- Proceso ---------- */ .proceso{ background:var(--blanco); } .grid-proceso{ display:grid; grid-template-columns:1fr; gap:0; position:relative; counter-reset:paso; } @media(min-width:820px){ .grid-proceso{ grid-template-columns:repeat(3,1fr); gap:2.4rem; } } .paso-proceso{ position:relative; padding:1.6rem 0 1.6rem 0; border-top:1px solid var(--linea); } @media(min-width:820px){ .paso-proceso{ border-top:none; padding:0; } } .paso-marca{ font-family:var(--serif); font-style:italic; font-size:2.4rem; color:var(--rosa); -webkit-text-stroke:1.5px var(--verde-oscuro); display:block; margin-bottom:.6rem; line-height:1; } .paso-proceso h3{ font-size:1.12rem; margin-bottom:.5rem; } .paso-proceso p{ color:var(--texto-suave); font-size:.94rem; } /* ---------- FAQ ---------- */ .faq{ background:var(--rosa-suave); } .acordeon{ display:flex; flex-direction:column; gap:.8rem; margin-top:1.5rem; } .item-acordeon{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radius); padding:1.1rem 1.3rem; } .item-acordeon summary{ cursor:pointer; font-family:var(--sans); font-weight:600; color:var(--tinta); font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; } .item-acordeon summary::-webkit-details-marker{ display:none; } .item-acordeon summary::after{ content:'+'; font-family:var(--serif); font-size:1.4rem; color:var(--verde-oscuro); flex-shrink:0; transition:transform .2s; } .item-acordeon[open] summary::after{ transform:rotate(45deg); } .item-acordeon p{ color:var(--texto-suave); font-size:.94rem; margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--linea); } /* ---------- Barra fija de conversión (móvil) ---------- */ .cta-fija-movil{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex; gap:.6rem; padding:.7rem .8rem; background:var(--blanco); border-top:1px solid var(--linea); box-shadow:0 -6px 20px rgba(31,59,58,.12); } .cta-fija-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem; border-radius:100px; font-weight:600; font-size:.9rem; } .cta-fija-llamar{ background:var(--rosa-suave); color:var(--tinta); border:1.5px solid var(--tinta); } .cta-fija-whatsapp{ background:#25D366; color:#fff; } @media(min-width:760px){ .cta-fija-movil{ display:none; } } @media(max-width:759px){ .flotante-whatsapp{ display:none; } body{ padding-bottom:4.2rem; } } /* ---------- Utilidades ---------- */ .sr-only{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }