/* ===================================================== UI.CSS — RUEDA DE LA SALUD INTEGRAL Documentado para que sepas qué mover después. ----------------------------------------------------- Guía rápida: 1) Colores y sombras: en :root (VARIABLES) 2) Fondo de inicio: body.home-bg + overlay 3) Navbar: .navbar, .links, .navToggle (móvil) 4) Tipografía: .h1, .h2, .p, .muted 5) Componentes: .btn, .badge, .card 6) Plantilla tipo Index: .pageWrap, .heroShell, .heroCard, .heroGrid 7) Responsivo: media queries al final ===================================================== */ /* ===================================================== 1) RESET BÁSICO - Normaliza márgenes y caja, evita sorpresas entre navegadores. ===================================================== */ *{ box-sizing: border-box; margin: 0; padding: 0; } html, body{ height: 100%; } body{ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #0f172a; background: #f6f7fb; line-height: 1.5; } /* ===================================================== 2) VARIABLES DE DISEÑO (FÁCIL DE PERSONALIZAR) - Cambia aquí y afecta todo el sitio. ===================================================== */ :root{ /* Colores base */ --bg:#f6f7fb; /* fondo por defecto */ --card:#ffffff; /* tarjetas */ --text:#0f172a; /* texto principal */ --muted:#64748b; /* texto secundario */ --line:#e2e8f0; /* bordes / separadores */ /* Botón principal */ --primary:#111827; --primary2:#0b1220; /* Bordes / sombras */ --radius:18px; --shadow:0 18px 40px rgba(15,23,42,.10); --shadow2:0 10px 22px rgba(15,23,42,.08); } /* ===================================================== 3) LAYOUT GENERAL (contenedor tradicional) - Útil para páginas normales (contacto, registro, etc.). ===================================================== */ .container{ max-width: 1080px; margin: 0 auto; padding: 22px 18px 40px; } /* ===================================================== 4) FONDO HOME (IMÁGENES) - Se activa con - Cambia las rutas si renombraste tus fondos. ===================================================== */ body.home-bg{ background-image: url("../img/fondoprincipales.png"); /* escritorio */ background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; } /* Overlay: suaviza el fondo y mejora legibilidad */ body.home-bg::before{ content:""; position: fixed; inset: 0; background: rgba(255,255,255,.65); z-index: -1; } /* En móvil usa el fondo vertical */ @media (max-width: 768px){ body.home-bg{ background-image: url("../img/fondoprincipalesv.png"); background-attachment: scroll; } } /* ===================================================== 5) NAVBAR (menú superior) - Estructura: .navbar > .inner > .brand + .navToggle + .links ===================================================== */ .navbar{ position: sticky; top: 0; z-index: 50; background: rgba(247,248,251,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .navbar .inner{ max-width: 1080px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } /* Logo / marca */ .brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .brand b{ font-weight: 800; letter-spacing: -.4px; } .brand .sub{ font-size: 12px; color: var(--muted); } /* Links de navegación */ .links{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .link{ text-decoration: none; font-size: 13px; font-weight: 700; padding: 10px 12px; border-radius: 999px; color: var(--text); border: 1px solid transparent; } .link:hover, .link.active{ background: #fff; border-color: var(--line); } /* “Pastilla” de usuario logueado */ .userpill{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 700; } .avatar{ width: 22px; height: 22px; border-radius: 999px; background: #eef2ff; display: flex; align-items: center; justify-content: center; font-size: 12px; } /* ===================================================== 6) TIPOGRAFÍA (títulos y texto) ===================================================== */ .h1{ font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.6px; margin-bottom: 10px; } .h2{ font-size: 18px; margin-bottom: 6px; letter-spacing: -.2px; } .p{ font-size: 15px; } .muted{ color: var(--muted); } /* Separador horizontal */ .hr{ border: none; height: 1px; background: var(--line); margin: 14px 0; } /* ===================================================== 7) BOTONES - .btn: botón principal - .btn-ghost: botón secundario (blanco) ===================================================== */ .btn{ display: inline-block; text-decoration: none; padding: 12px 16px; border-radius: 12px; background: linear-gradient(180deg, var(--primary), var(--primary2)); color: #fff; font-weight: 700; font-size: 14px; box-shadow: var(--shadow2); } .btn:hover{ opacity: .92; } .btn-ghost{ background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: none; } /* ===================================================== 8) BADGES (píldoras: "5-8 min", "seguimiento", etc.) ===================================================== */ .badge{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; font-size: 12px; background: rgba(15,23,42,.03); border: 1px solid var(--line); color: var(--muted); } .badge .dot{ width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg,#2563eb,#22c55e); } /* ===================================================== 9) CARDS (contenedores) - Usar .card para cualquier bloque principal. ===================================================== */ .card{ background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px; } /* ===================================================== 10) HERO “ANTIGUO” (grid texto + caja derecha) - Si aún usas la clase .hero en páginas viejas. ===================================================== */ .hero{ display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; } @media (max-width: 900px){ .hero{ grid-template-columns: 1fr; } } /* Caja derecha del hero */ .heroBox{ background: linear-gradient( 135deg, rgba(37,99,235,.08), rgba(34,197,94,.08) ); border-radius: var(--radius); padding: 18px; border: 1px solid var(--line); } .heroVisual{ display: flex; justify-content: center; align-items: center; } .heroVisual img{ max-width: 260px; width: 100%; border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.15); } @media (max-width: 768px){ .heroVisual img{ max-width: 200px; } } /* ===================================================== 11) GRID DE FEATURES (3 columnas) - Usado para bloques de beneficios. ===================================================== */ .grid3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px){ .grid3{ grid-template-columns: 1fr; } } .feature{ background: #fff; border-radius: var(--radius); border: 1px solid var(--line); padding: 14px; box-shadow: var(--shadow2); } .feature small{ color: var(--muted); } /* ===================================================== 12) UTILIDADES (helpers) ===================================================== */ .text-center{ text-align: center; } .mt-10{ margin-top: 10px; } .mt-20{ margin-top: 20px; } /* ===================================================== 13) PLANTILLA TIPO INDEX (REGIÓN EDITABLE) - Esta es la que te da el look de tu captura. - Estructura:

[Columna izquierda editable] [Columna derecha editable]

===================================================== */ .pageWrap{ min-height: calc(100vh - 64px); /* ajusta si tu navbar cambia de alto */ display: flex; align-items: flex-start; justify-content: center; padding: 26px 0 44px; } .heroShell{ width: 100%; max-width: 1080px; padding: 0 18px; /* margen lateral para móviles */ } .heroCard{ padding: 26px; } /* Rectángulo editable: grid 2 columnas */ .heroGrid{ display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: stretch; } /* Caja derecha estilo “tarjeta suave” */ .heroRight{ background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(34,197,94,.08)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; } .heroImg{ width: 100%; border-radius: 16px; display: block; box-shadow: 0 18px 40px rgba(0,0,0,.15); } .heroCaption{ text-align: center; margin-top: 10px; font-size: 12px; color: var(--muted); } /* Responsive de la plantilla tipo index */ @media (max-width: 900px){ .heroGrid{ grid-template-columns: 1fr; } .heroCard{ padding: 18px; } } /* ===================================================== 14) RESPONSIVE NAV (MÓVIL) - Botón hamburguesa: .navToggle - Menú desplegable: .links.open ===================================================== */ .navToggle{ display:none; background:none; border:none; font-size:22px; cursor:pointer; } /* Escritorio: links visibles */ @media (min-width: 769px){ .links{ display:flex !important; } } /* Celulares */ @media (max-width: 768px){ .navToggle{ display:block; } .links{ position: absolute; top: 64px; /* altura aproximada del navbar */ left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); display: none; flex-direction: column; gap: 0; padding: 10px 14px; box-shadow: 0 18px 40px rgba(0,0,0,.12); } .links.open{ display:flex; } .link{ width: 100%; padding: 12px; border-radius: 12px; } .userpill{ width: 100%; justify-content: flex-start; margin: 6px 0; } /* Ajustes generales de móvil */ .h1{ font-size: 26px; } .container{ padding: 18px 14px 30px; } /* Ajuste para la plantilla tipo index */ .heroShell{ padding: 0 14px; } } /* ===================================================== 15) MICRO-RESPONSIVE (pantallas muy chicas) ===================================================== */ @media (max-width: 520px){ .brand .sub{ display:none; } .userpill span.name{ display:none; } } /* LOGO NAVBAR */ .brandLogo{ height:32px; /* escritorio */ width:auto; display:block; object-fit:contain; } /* Ajuste en móvil */ @media (max-width:768px){ .brandLogo{ height:26px; } }