/* ============================================================================ Landing de Eudova — 24/9/2026. Nace del rebranding: el contenido es el mismo que el de la landing de Pegasus Chat, porque el producto no cambia, pero el tratamiento es otro. Martin pidio «mas animaciones, gradientes, profundidad» para que acompanie al logo, que es una cinta con volumen en plata y celeste: una pagina plana al lado de ese logo se ve como dos marcas distintas. Como se consigue la profundidad, para que se mantenga al agregar secciones: - el fondo tiene manchas de color desenfocadas que se mueven despacio; - las tarjetas son vidrio: fondo traslucido, borde claro arriba y sombra larga abajo, que es lo que hace que floten; - todo lo que se eleva lo hace con sombra Y con un borde que se ilumina, no solo con la sombra, que sola se pierde en el modo oscuro. Todo el movimiento respeta `prefers-reduced-motion`: quien lo pida ve la pagina quieta y completa, no una pagina en blanco esperando animaciones. ============================================================================ */ :root{ /* Celeste y plata del logo. */ --cel-1:#bfe6f4; --cel-2:#5bb8dc; --cel-3:#1b7fa8; --cel-4:#0e5c7d; --plata-1:#e9f0f4; --plata-2:#a9bcc8; --plata-3:#7d919f; --bg:#eef4f8; --bg-2:#e2edf3; --panel:rgba(255,255,255,.72); --panel-2:rgba(255,255,255,.55); --linea:rgba(15,55,75,.10); --linea-luz:rgba(255,255,255,.85); --ink:#0c1c26; --ink-2:#3d5462; --ink-3:#6b8291; --acento:#0e7fa6; --acento-2:#0b6486; --sobre-acento:#fff; --ok:#0c6b4f; --sombra:0 1px 2px rgba(9,32,45,.05), 0 22px 44px -26px rgba(9,32,45,.40); --sombra-alta:0 2px 4px rgba(9,32,45,.07), 0 40px 70px -32px rgba(9,32,45,.52); --titulo:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --texto:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --curva:cubic-bezier(.22,.8,.28,1); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#070f16; --bg-2:#0b1822; --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.03); --linea:rgba(255,255,255,.10); --linea-luz:rgba(255,255,255,.16); --ink:#e9f2f7; --ink-2:#a8bcc8; --ink-3:#7b91a0; --acento:#5bc0e6; --acento-2:#96dcf5; --sobre-acento:#05202c; --ok:#4ade80; --sombra:0 1px 2px rgba(0,0,0,.5), 0 22px 44px -24px rgba(0,0,0,.9); --sombra-alta:0 2px 4px rgba(0,0,0,.55), 0 44px 80px -30px rgba(0,0,0,1); } } :root[data-theme="dark"]{ --bg:#070f16; --bg-2:#0b1822; --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.03); --linea:rgba(255,255,255,.10); --linea-luz:rgba(255,255,255,.16); --ink:#e9f2f7; --ink-2:#a8bcc8; --ink-3:#7b91a0; --acento:#5bc0e6; --acento-2:#96dcf5; --sobre-acento:#05202c; --ok:#4ade80; --sombra:0 1px 2px rgba(0,0,0,.5), 0 22px 44px -24px rgba(0,0,0,.9); --sombra-alta:0 2px 4px rgba(0,0,0,.55), 0 44px 80px -30px rgba(0,0,0,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--ink); font:16px/1.62 var(--texto); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; min-height:100vh; } a{color:var(--acento); text-decoration:none} :focus-visible{outline:2px solid var(--acento); outline-offset:3px; border-radius:10px} .envoltura{max-width:1160px; margin:0 auto; padding:0 24px} /* ---------- el fondo: manchas de color que respiran ---------- */ .aurora{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none} .aurora i{ position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform; } .aurora i:nth-child(1){width:620px; height:620px; left:-160px; top:-200px; background:radial-gradient(circle at 30% 30%, #7fd3ee, transparent 62%); animation:flotar1 26s var(--curva) infinite alternate} .aurora i:nth-child(2){width:540px; height:540px; right:-140px; top:60px; background:radial-gradient(circle at 60% 40%, #a8c7d8, transparent 60%); animation:flotar2 32s var(--curva) infinite alternate} .aurora i:nth-child(3){width:700px; height:700px; left:38%; top:46%; background:radial-gradient(circle at 50% 50%, #cfe9f5, transparent 64%); animation:flotar3 38s var(--curva) infinite alternate} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .aurora i{opacity:.30; filter:blur(110px)} } @keyframes flotar1{to{transform:translate3d(110px,80px,0) scale(1.12)}} @keyframes flotar2{to{transform:translate3d(-90px,120px,0) scale(1.08)}} @keyframes flotar3{to{transform:translate3d(-120px,-90px,0) scale(1.15)}} /* Una trama finita encima, para que el degradado no se vea como una mancha lisa. */ .trama{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35; background-image:radial-gradient(rgba(12,45,62,.16) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .trama{opacity:.25; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px)} } /* ---------- barra ---------- */ .barra{ position:sticky; top:0; z-index:40; padding:10px 0; background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease; } .barra.pegada{border-bottom-color:var(--linea)} .barra .envoltura{display:flex; align-items:center; gap:18px} .marca{display:flex; align-items:center; gap:11px} /* La palabra, como en el logo: geometrica, de trazo fino, en minuscula y en dos colores —«eudo» en gris oscuro y «va» en celeste—. Va con tipografia y no como imagen para que se lea nitida en cualquier pantalla y se pueda seleccionar. */ .marca .palabra{font-family:var(--titulo); font-weight:300; font-size:25px; letter-spacing:.005em; color:var(--ink); line-height:1} .marca .palabra i{font-style:normal; color:var(--cel-2)} .marca img{width:38px; height:auto; display:block} .menu{display:flex; gap:22px; margin-left:12px} .menu a{font-size:14px; color:var(--ink-2); position:relative; padding:4px 0} .menu a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--cel-2),var(--cel-3)); transition:right .3s var(--curva)} .menu a:hover{color:var(--ink)} .menu a:hover::after{right:0} .sep{flex:1} @media (max-width:980px){.menu{display:none}} /* ---------- botones ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:14.5px; font-weight:600; padding:12px 20px; border-radius:13px; cursor:pointer; border:1px solid var(--linea); background:var(--panel); color:var(--ink); backdrop-filter:blur(8px); transition:transform .25s var(--curva), box-shadow .25s var(--curva), border-color .25s ease; box-shadow:var(--sombra); } .btn:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta); border-color:var(--cel-2)} .btn.chico{padding:9px 16px; font-size:13.5px} .btn.pri{ border:0; color:var(--sobre-acento); position:relative; overflow:hidden; background:linear-gradient(135deg,var(--cel-2) 0%,var(--cel-3) 52%,var(--cel-4) 100%); box-shadow:0 10px 26px -12px rgba(14,127,166,.85), inset 0 1px 0 rgba(255,255,255,.45); } /* El brillo que cruza el boton al pasar por encima. Es lo unico que se mueve sin que la persona haga scroll, asi que dura poco y no se repite sola. */ .btn.pri::after{ content:""; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); } .btn.pri:hover::after{transform:translateX(120%); transition:transform .75s var(--curva)} .btn .fl{transition:transform .25s var(--curva)} .btn:hover .fl{transform:translateX(3px)} /* ---------- hero ---------- */ .hero{padding:74px 0 86px; position:relative} .hero .envoltura{display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center} @media (max-width:980px){ .hero{padding:48px 0 60px} .hero .envoltura{grid-template-columns:1fr; gap:44px} } .pastilla{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; padding:7px 15px 7px 11px; border-radius:999px; color:var(--ink-2); background:var(--panel); border:1px solid var(--linea); box-shadow:var(--sombra); backdrop-filter:blur(8px); } .pastilla b{width:8px; height:8px; border-radius:50%; background:var(--cel-2); box-shadow:0 0 0 4px color-mix(in srgb, var(--cel-2) 22%, transparent); animation:latir 2.6s ease-in-out infinite} @keyframes latir{50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--cel-2) 6%, transparent)}} h1{ font-family:var(--titulo); font-weight:700; letter-spacing:-.035em; font-size:clamp(36px,5.4vw,62px); line-height:1.03; margin:20px 0 18px; text-wrap:balance; } h1 em{ font-style:normal; background:linear-gradient(105deg,var(--cel-2),var(--cel-3) 40%,var(--plata-3) 72%,var(--cel-2)); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:correr 9s linear infinite; } @keyframes correr{to{background-position:220% 0}} .bajada{font-size:17.5px; line-height:1.6; color:var(--ink-2); max-width:54ch; margin:0 0 26px} .acciones{display:flex; gap:12px; flex-wrap:wrap} .hechos{list-style:none; margin:26px 0 0; padding:0; display:flex; gap:22px; flex-wrap:wrap} .hechos li{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2)} .hechos svg{width:17px; height:17px; color:var(--cel-3); flex:none} /* ---------- el telefono de la demostracion ---------- */ .escenario{perspective:900px; perspective-origin:70% 50%; display:flex; justify-content:center} .telefono{ width:318px; border-radius:34px; padding:12px; position:relative; background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(233,242,247,.55)); border:1px solid var(--linea-luz); box-shadow:0 2px 6px rgba(9,32,45,.10), 34px 70px 100px -46px rgba(9,32,45,.62), inset 0 1px 0 rgba(255,255,255,.9); /* Bien inclinado, a proposito: el telefono tiene que leerse como un objeto puesto sobre la pagina y no como una captura pegada. Al pasar por encima se endereza casi del todo, que es lo que invita a mirarle la conversacion. */ transform:rotateY(-24deg) rotateX(8deg) rotateZ(-3deg) translateZ(-30px); transform-origin:65% 50%; transform-style:preserve-3d; transition:transform .8s var(--curva), box-shadow .8s var(--curva); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .telefono{ background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.14); box-shadow:0 2px 6px rgba(0,0,0,.5), 34px 76px 110px -48px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.14); } } .telefono:hover{transform:rotateY(-6deg) rotateX(2deg) rotateZ(0deg) translateZ(0)} .pantalla{background:var(--bg-2); border-radius:24px; overflow:hidden; border:1px solid var(--linea)} .tcab{display:flex; align-items:center; gap:10px; padding:13px 14px; background:linear-gradient(135deg,var(--cel-3),var(--cel-4)); color:#fff} .tcab .av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:700; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35)} .tcab .n{font-size:13.5px; font-weight:600} .tcab .e{font-size:11px; opacity:.85; display:flex; align-items:center; gap:5px} .tcab .e i{width:6px; height:6px; border-radius:50%; background:#8ff0c2; display:block} .thilo{padding:14px; display:flex; flex-direction:column; gap:10px; min-height:330px} .m{max-width:84%; font-size:12.8px; line-height:1.5; padding:9px 12px; border-radius:14px; position:relative; box-shadow:var(--sombra); opacity:0; transform:translateY(10px)} .m.visto{opacity:1; transform:none; transition:opacity .5s var(--curva), transform .5s var(--curva)} .m.mio{align-self:flex-end; color:#fff; border-bottom-right-radius:5px; background:linear-gradient(135deg,var(--cel-2),var(--cel-3))} .m.ellos{align-self:flex-start; background:var(--panel); color:var(--ink); border:1px solid var(--linea); border-bottom-left-radius:5px; backdrop-filter:blur(6px)} .m .de{display:block; font-size:10.5px; font-weight:700; color:var(--cel-3); margin-bottom:2px} .m .h{display:block; font-size:9.5px; opacity:.7; margin-top:4px} .adjunto{display:flex; align-items:center; gap:7px; margin-top:7px; padding:7px 9px; border-radius:10px; background:color-mix(in srgb,var(--cel-2) 12%, transparent); font-size:11.5px; font-weight:600} .adjunto svg{width:15px; height:15px; color:var(--cel-3); flex:none} .adjunto .peso{font-weight:400; opacity:.7} .turno{margin-top:8px; padding:9px; border-radius:11px; border:1px solid var(--linea); background:var(--panel-2)} .turno .dato{display:flex; align-items:center; gap:6px; font-size:11.5px; margin-bottom:8px} .turno .dato svg{width:14px; height:14px; color:var(--cel-3)} .turno .botones{display:flex; gap:6px; flex-wrap:wrap} .turno .b{font-size:11px; font-weight:600; padding:5px 10px; border-radius:8px; border:1px solid var(--linea); background:var(--panel)} .turno .b.si{background:linear-gradient(135deg,var(--cel-2),var(--cel-3)); color:#fff; border:0} .sistema{align-self:center; font-size:10.5px; color:var(--ink-3); padding:5px 11px; border-radius:999px; background:var(--panel-2); border:1px solid var(--linea); opacity:0; transform:translateY(10px)} .sistema.visto{opacity:1; transform:none; transition:all .5s var(--curva)} /* ---------- secciones ---------- */ section{padding:80px 0; position:relative} .ojo{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cel-3); margin-bottom:12px} h2{font-family:var(--titulo); font-weight:600; letter-spacing:-.03em; font-size:clamp(26px,3.6vw,40px); line-height:1.1; margin:0 0 14px; text-wrap:balance} .intro{font-size:16.5px; color:var(--ink-2); max-width:62ch; margin:0 0 38px} .grilla{display:grid; gap:18px} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} /* Seis tarjetas: tres y tres en pantalla grande, dos y dos en tablet. Con .g4 quedaban cuatro arriba y dos solas abajo. */ .g6{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} @media (max-width:1000px){.g4,.g6{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}} @media (max-width:700px){.g4,.g6,.g2{grid-template-columns:1fr}} /* La tarjeta de vidrio. El borde de arriba es lo que le da el canto iluminado. */ .tarjeta{ position:relative; padding:24px; border-radius:18px; overflow:hidden; background:var(--panel); border:1px solid var(--linea); box-shadow:var(--sombra); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .35s var(--curva), box-shadow .35s var(--curva), border-color .35s ease; } .tarjeta::before{ content:""; position:absolute; left:14%; right:14%; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--linea-luz),transparent); } .tarjeta:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta); border-color:color-mix(in srgb,var(--cel-2) 45%, var(--linea))} .tarjeta h3{font-family:var(--titulo); font-weight:600; font-size:17px; margin:14px 0 8px; letter-spacing:-.015em} .tarjeta p{margin:0; font-size:14px; line-height:1.6; color:var(--ink-2)} .icono{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:var(--sobre-acento); background:linear-gradient(140deg,var(--cel-2),var(--cel-3) 60%,var(--cel-4)); box-shadow:0 8px 20px -10px rgba(14,127,166,.9), inset 0 1px 0 rgba(255,255,255,.5); } .icono svg{width:21px; height:21px} /* lista de funcionalidades: mas densa, sin tanta caja */ .lista{display:grid; grid-template-columns:repeat(3,1fr); gap:14px 26px} @media (max-width:1000px){.lista{grid-template-columns:repeat(2,1fr)}} @media (max-width:700px){.lista{grid-template-columns:1fr}} .item{display:flex; gap:12px; padding:14px; border-radius:14px; border:1px solid transparent; transition:background .3s ease, border-color .3s ease} .item:hover{background:var(--panel-2); border-color:var(--linea)} .item .ic{width:34px; height:34px; border-radius:11px; flex:none; display:grid; place-items:center; color:var(--cel-3); background:color-mix(in srgb,var(--cel-2) 16%, transparent); border:1px solid color-mix(in srgb,var(--cel-2) 30%, transparent)} .item .ic svg{width:18px; height:18px} .item b{display:block; font-size:14.5px; font-weight:600; margin-bottom:3px} .item span{font-size:13.2px; color:var(--ink-2); line-height:1.55} /* pasos */ .pasos{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:paso} @media (max-width:1000px){.pasos{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.pasos{grid-template-columns:1fr}} .paso{position:relative; padding:24px 22px; border-radius:18px; background:var(--panel); border:1px solid var(--linea); box-shadow:var(--sombra); backdrop-filter:blur(10px)} .paso .n{font-family:var(--titulo); font-weight:700; font-size:30px; line-height:1; background:linear-gradient(150deg,var(--cel-2),var(--cel-4)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px} .paso h3{font-family:var(--titulo); font-weight:600; font-size:15.5px; margin:0 0 6px} .paso p{margin:0; font-size:13.4px; color:var(--ink-2); line-height:1.55} /* cierre */ .cierre{ position:relative; overflow:hidden; border-radius:26px; padding:56px 44px; text-align:center; color:#fff; background:linear-gradient(135deg,var(--cel-3),var(--cel-4) 55%,#083d54); box-shadow:0 30px 70px -34px rgba(9,60,80,.9); } .cierre::before{content:""; position:absolute; width:520px; height:520px; left:-120px; top:-220px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.28),transparent 62%)} .cierre::after{content:""; position:absolute; width:420px; height:420px; right:-120px; bottom:-200px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%)} .cierre h2, .cierre p{position:relative; color:#fff; margin-left:auto; margin-right:auto} .cierre p{max-width:52ch; opacity:.92; font-size:16px} .cierre .btn{position:relative; background:#fff; color:var(--cel-4); border:0; margin-top:22px} footer{padding:40px 0 60px; border-top:1px solid var(--linea); margin-top:70px} footer .envoltura{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; font-size:13.5px; color:var(--ink-3)} /* ---------- la entrada por scroll ---------- */ .sube{opacity:0; transform:translateY(22px)} .sube.visto{opacity:1; transform:none; transition:opacity .7s var(--curva), transform .7s var(--curva)} .sube.d1{transition-delay:.06s} .sube.d2{transition-delay:.12s} .sube.d3{transition-delay:.18s} .sube.d4{transition-delay:.24s} /* Quien pide menos movimiento ve la pagina entera y quieta. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition:none !important} html{scroll-behavior:auto} .sube,.m,.sistema{opacity:1 !important; transform:none !important} .telefono{transform:none} } /* ============================================================================ PALETA APROBADA — Anexo cromático del documento de contenido (v1.2, oct 2026) ============================================================================ Una marca y tres variantes. El mismo isotipo y la misma palabra; solo cambian los tonos. La Home y las páginas institucionales van con la paleta institucional; cada landing de vertical usa su paleta secundaria. Esto va DESPUÉS del bloque original a propósito: lo pisa sin tener que reescribirlo, y así se lee qué cambió el anexo y qué venía de antes. ⚠️ DOS COLORES DEL ANEXO NO SE PUEDEN USAR PARA TEXTO CHICO. Medido contra el blanco institucional #FAFBFC, el gris azulado #668493 da 3,83:1 y el celeste #92C8D5 da 1,77:1, y la AA de WCAG pide 4,5:1 —que el propio documento exige—. Lo mismo pasa con dos de los tres «primary» de vertical: Salud #239BB6 da 3,15:1 y Marketing #8260D4 da 4,43:1. Así que: - los «primary» se usan para rellenos, degradados e iconos, no para texto; - para texto y enlaces se usa el «dark» de cada vertical, que sí llega (Salud #146F90 = 5,47:1 · Marketing #5946A9 = 7,05:1 · Atención #486D8F = 5,25:1); - los grises secundarios se derivan con color-mix desde los colores aprobados en vez de inventar hexadecimales nuevos. ⚠️ LA PALETA INSTITUCIONAL NO TRAE ACENTO. De sus cinco colores, el único que pasa AA es el azul profundo #142B38, que es el mismo del texto: un enlace de ese color no se distingue de un párrafo. Se usa #146F90 —el celeste más profundo del juego aprobado— para enlaces y botones de las páginas institucionales. Es una decisión que conviene confirmar con quien aprobó el anexo. ============================================================================ */ :root{ /* Institucional: los cinco del anexo, tal cual. */ --inst-ink:#142B38; /* azul profundo */ --inst-celeste:#92C8D5; /* celeste */ --inst-hielo:#E6F4F7; /* hielo */ --inst-gris:#668493; /* gris azulado */ --inst-blanco:#FAFBFC; /* blanco */ /* Verticales: primary / dark / light / surface del anexo. */ --salud-primary:#239BB6; --salud-dark:#146F90; --salud-light:#9BDCE8; --salud-surface:#E8F5F8; --marketing-primary:#8260D4; --marketing-dark:#5946A9; --marketing-light:#C7B2F3; --marketing-surface:#F0EAFE; --atencion-primary:#486D8F; --atencion-dark:#203B59; --atencion-light:#A4B8CA; --atencion-surface:#E8EDF3; /* ---- lo institucional aplicado a los tokens que usan los componentes ---- */ --bg:var(--inst-blanco); --bg-2:var(--inst-hielo); --ink:var(--inst-ink); --ink-2:color-mix(in srgb, var(--inst-gris) 62%, var(--inst-ink)); --ink-3:color-mix(in srgb, var(--inst-gris) 86%, var(--inst-ink)); --linea:color-mix(in srgb, var(--inst-ink) 12%, transparent); --cel-1:var(--inst-hielo); --cel-2:var(--inst-celeste); --cel-3:#146F90; --cel-4:var(--inst-ink); --acento:#146F90; --acento-2:var(--inst-ink); --sobre-acento:#fff; } /* La vertical se declara en el , y el nombre va siempre escrito al lado del color: el documento pide no distinguir las verticales solo por el tono. */ body.v-salud{ --cel-1:var(--salud-light); --cel-2:var(--salud-primary); --cel-3:var(--salud-dark); --cel-4:color-mix(in srgb, var(--salud-dark) 72%, var(--inst-ink)); --bg-2:var(--salud-surface); --acento:var(--salud-dark); } body.v-marketing{ --cel-1:var(--marketing-light); --cel-2:var(--marketing-primary); --cel-3:var(--marketing-dark); --cel-4:color-mix(in srgb, var(--marketing-dark) 72%, var(--inst-ink)); --bg-2:var(--marketing-surface); --acento:var(--marketing-dark); } body.v-atencion{ --cel-1:var(--atencion-light); --cel-2:var(--atencion-primary); --cel-3:var(--atencion-dark); --cel-4:color-mix(in srgb, var(--atencion-dark) 76%, #000); --bg-2:var(--atencion-surface); --acento:var(--atencion-dark); } /* ---- de noche ---- El bloque oscuro original va antes en el archivo y su selector pesa más que `:root` y que `body.v-*`, así que se repite acá con el mismo selector para que éste sea el que gane. Los «dark» de cada vertical no se leen sobre fondo oscuro: de noche el acento pasa a ser el «light», que sí contrasta. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:color-mix(in srgb, var(--inst-ink) 62%, #000); --bg-2:color-mix(in srgb, var(--inst-ink) 86%, #000); --ink:var(--inst-hielo); --ink-2:color-mix(in srgb, var(--inst-celeste) 72%, var(--inst-gris)); --ink-3:var(--inst-gris); --cel-1:var(--inst-hielo); --cel-2:var(--inst-celeste); --cel-3:color-mix(in srgb, var(--inst-celeste) 78%, #fff); --cel-4:var(--inst-celeste); --acento:var(--inst-celeste); --acento-2:var(--inst-hielo); --sobre-acento:var(--inst-ink); } :root:not([data-theme="light"]) body.v-salud{ --cel-2:var(--salud-light); --cel-3:var(--salud-light); --cel-4:var(--salud-primary); --acento:var(--salud-light); --bg-2:color-mix(in srgb, var(--salud-dark) 46%, #000); } :root:not([data-theme="light"]) body.v-marketing{ --cel-2:var(--marketing-light); --cel-3:var(--marketing-light); --cel-4:var(--marketing-primary); --acento:var(--marketing-light); --bg-2:color-mix(in srgb, var(--marketing-dark) 46%, #000); } :root:not([data-theme="light"]) body.v-atencion{ --cel-2:var(--atencion-light); --cel-3:var(--atencion-light); --cel-4:var(--atencion-primary); --acento:var(--atencion-light); --bg-2:color-mix(in srgb, var(--atencion-dark) 60%, #000); } } /* Las manchas del fondo también siguen la vertical, que es lo que hace que la página «sea» de ese color antes de leer una palabra. */ body.v-salud .aurora i:nth-child(1){background:radial-gradient(circle at 30% 30%, var(--salud-light), transparent 62%)} body.v-salud .aurora i:nth-child(3){background:radial-gradient(circle at 50% 50%, var(--salud-surface), transparent 64%)} body.v-marketing .aurora i:nth-child(1){background:radial-gradient(circle at 30% 30%, var(--marketing-light), transparent 62%)} body.v-marketing .aurora i:nth-child(3){background:radial-gradient(circle at 50% 50%, var(--marketing-surface), transparent 64%)} body.v-atencion .aurora i:nth-child(1){background:radial-gradient(circle at 30% 30%, var(--atencion-light), transparent 62%)} body.v-atencion .aurora i:nth-child(3){background:radial-gradient(circle at 50% 50%, var(--atencion-surface), transparent 64%)} /* ============================================================================ LO QUE EL SITIO DE UNA PÁGINA NO NECESITABA ============================================================================ */ /* ---- la navegación, ahora que hay siete páginas ---- ⚠️ ANTES NO HABÍA MENÚ EN EL TELÉFONO. Con una sola página el menú eran anclas y abajo de 980 px se ocultaba sin reemplazo: no se perdía nada porque todo estaba en la misma página. Con siete páginas eso deja al teléfono sin forma de ir a ningún lado, así que hay botón y panel. */ .barra .envoltura{position:relative} .menu a[aria-current="page"]{color:var(--ink); font-weight:600} .menu a[aria-current="page"]::after{right:0} .conmuta{ display:none; margin-left:auto; width:42px; height:42px; border-radius:12px; align-items:center; justify-content:center; cursor:pointer; background:var(--panel); border:1px solid var(--linea); color:var(--ink); box-shadow:var(--sombra); } .conmuta svg{width:20px; height:20px} .conmuta .cerrar{display:none} .conmuta[aria-expanded="true"] .abrir{display:none} .conmuta[aria-expanded="true"] .cerrar{display:block} .panel-menu{ display:none; position:absolute; left:24px; right:24px; top:calc(100% + 10px); z-index:50; padding:10px; border-radius:18px; background:var(--bg); border:1px solid var(--linea); box-shadow:var(--sombra-alta); } .panel-menu.abierto{display:block} .panel-menu a{ display:block; padding:12px 14px; border-radius:12px; font-size:15px; font-weight:500; color:var(--ink); } .panel-menu a:hover{background:var(--panel-2)} .panel-menu a[aria-current="page"]{background:var(--bg-2); color:var(--acento)} .panel-menu .separa{height:1px; margin:8px 6px; background:var(--linea)} .panel-menu .btn{width:100%; justify-content:center; margin-top:4px} .barra .acciones-barra{margin-left:auto} /* ⚠️ EL CORTE ES A 1140, NO A 980. Con una sola página el menú eran cinco anclas de una palabra y entraba en cualquier lado. Ahora son siete entradas, una de ellas «Atención y Servicios», más el botón: a 1024 px se partían en dos líneas y la barra quedaba de dos pisos. Y `nowrap` para que ninguna entrada se quiebre en el medio mientras tanto. */ .menu a, .barra .acciones-barra .btn{white-space:nowrap} @media (max-width:1140px){ .menu{display:none} .conmuta{display:flex} .barra .acciones-barra{display:none} } /* ---- el nombre de la vertical, al lado del color ---- */ .chapa{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:6px 13px; border-radius:999px; color:var(--cel-3); background:color-mix(in srgb, var(--cel-2) 16%, transparent); border:1px solid color-mix(in srgb, var(--cel-2) 34%, transparent); } .chapa i{width:9px; height:9px; border-radius:50%; background:var(--cel-2); flex:none} /* ---- el caso de uso: un ejemplo, no una promesa ---- */ .caso{ display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:start; padding:34px; border-radius:22px; background:var(--panel); border:1px solid var(--linea); box-shadow:var(--sombra); backdrop-filter:blur(10px); } @media (max-width:900px){.caso{grid-template-columns:1fr; gap:24px; padding:26px}} .caso .ejemplo{font-size:16px; line-height:1.68; color:var(--ink-2); margin:0} .caso .ejemplo b{color:var(--ink)} /* ⚠️ EL AVISO DE «VALIDAR». El documento repite que ciertas funciones —turnos, recordatorios, historial, integraciones— no se anuncien como capacidades confirmadas porque dependen del cliente y de la configuración. Donde el texto las menciona va este bloque, que las nombra como «según configuración» en vez de callarlas o de prometerlas. */ .aviso{ margin:0; padding:16px 18px; border-radius:14px; font-size:13.6px; line-height:1.6; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--linea); border-left:3px solid var(--cel-2); } .aviso b{color:var(--ink); font-weight:600} /* ---- preguntas frecuentes ---- */ .faq{display:grid; gap:10px; max-width:860px} .faq details{ border-radius:16px; background:var(--panel); border:1px solid var(--linea); box-shadow:var(--sombra); backdrop-filter:blur(10px); overflow:hidden; } .faq summary{ cursor:pointer; list-style:none; padding:18px 22px; font-family:var(--titulo); font-weight:600; font-size:16px; color:var(--ink); display:flex; align-items:center; gap:14px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:""; margin-left:auto; flex:none; width:11px; height:11px; border-right:2px solid var(--cel-3); border-bottom:2px solid var(--cel-3); transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--curva); } .faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)} .faq .cuerpo{padding:0 22px 20px; font-size:14.6px; line-height:1.68; color:var(--ink-2)} .faq .cuerpo p{margin:0} /* ---- el formulario ---- */ .formulario{ display:grid; gap:18px; padding:30px; border-radius:22px; background:var(--panel); border:1px solid var(--linea); box-shadow:var(--sombra); backdrop-filter:blur(10px); position:relative; } @media (max-width:640px){.formulario{padding:22px}} .par{display:grid; grid-template-columns:1fr 1fr; gap:18px} @media (max-width:640px){.par{grid-template-columns:1fr}} .campo{display:grid; gap:7px} .campo label{font-size:13.5px; font-weight:600; color:var(--ink)} .campo label .opc{font-weight:400; color:var(--ink-3)} .campo input, .campo select, .campo textarea{ font:inherit; font-size:15px; color:var(--ink); padding:12px 14px; border-radius:12px; background:var(--bg); border:1px solid var(--linea); width:100%; transition:border-color .25s ease, box-shadow .25s ease; } .campo textarea{min-height:120px; resize:vertical} .campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-color:var(--cel-2); box-shadow:0 0 0 4px color-mix(in srgb, var(--cel-2) 20%, transparent); } /* El error dice qué pasa con cada campo, y el campo además queda marcado: el color solo no alcanza para quien no lo distingue. */ .campo .error{font-size:12.8px; font-weight:600; color:#b3261e; display:none} .campo.mal input, .campo.mal select, .campo.mal textarea{border-color:#b3261e} .campo.mal .error{display:block} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .campo .error{color:#ffb4ab} :root:not([data-theme="light"]) .campo.mal input, :root:not([data-theme="light"]) .campo.mal select, :root:not([data-theme="light"]) .campo.mal textarea{border-color:#ffb4ab} } .consentimiento{display:flex; gap:12px; align-items:flex-start; font-size:13.4px; line-height:1.6; color:var(--ink-2)} .consentimiento input{width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--cel-3)} .consentimiento .error{display:none; font-size:12.8px; font-weight:600; color:#b3261e; margin-top:5px} .consentimiento.mal .error{display:block} .consentimiento.mal input{outline:2px solid #b3261e; outline-offset:2px} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .consentimiento .error{color:#ffb4ab} :root:not([data-theme="light"]) .consentimiento.mal input{outline-color:#ffb4ab} } /* El campo trampa para los robots: invisible para la persona y no para el que rellena todo. No se usa `display:none`, que algunos no completan. */ .trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .gracias{ display:none; padding:22px 24px; border-radius:16px; font-size:15.5px; line-height:1.6; color:var(--ink); background:color-mix(in srgb, var(--cel-2) 14%, var(--panel)); border:1px solid color-mix(in srgb, var(--cel-2) 34%, transparent); } .gracias.visible{display:block} .gracias b{display:block; font-family:var(--titulo); font-size:17px; margin-bottom:4px} /* ---- contacto directo ---- */ .directo{display:grid; gap:14px} .directo a{display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600} .directo svg{width:19px; height:19px; color:var(--cel-3); flex:none} /* ---- el pie, que ahora tiene por dónde ir ---- */ footer .pie{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; margin-bottom:34px} @media (max-width:820px){footer .pie{grid-template-columns:1fr 1fr; gap:26px}} @media (max-width:520px){footer .pie{grid-template-columns:1fr}} footer .pie h4{font-family:var(--titulo); font-size:13px; font-weight:700; margin:0 0 12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)} footer .pie ul{list-style:none; margin:0; padding:0; display:grid; gap:9px} footer .pie a{font-size:14px; color:var(--ink-2)} footer .pie a:hover{color:var(--acento)} footer .pie .lema{font-size:14px; color:var(--ink-3); max-width:36ch; margin:12px 0 0} footer .legal{border-top:1px solid var(--linea); padding-top:22px} footer .envoltura{display:block} footer .legal .fila{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; font-size:13.5px; color:var(--ink-3)} /* ---- los accesos del teléfono de la portada ---- Reemplazan a la conversación de ejemplo que tenía la landing anterior: el documento pide mostrar un portal de marca propia con tres accesos, no un chat. Entran uno por uno con el mismo `data-paso` que usaba el hilo. */ .accesos{padding:14px; display:flex; flex-direction:column; gap:10px; min-height:330px} .acceso{ display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; gap:3px 12px; align-items:center; padding:12px; border-radius:14px; background:var(--panel); border:1px solid var(--linea); box-shadow:var(--sombra); backdrop-filter:blur(6px); opacity:0; transform:translateY(10px); } .acceso.visto{opacity:1; transform:none; transition:opacity .5s var(--curva), transform .5s var(--curva)} .acceso .ic{ grid-row:1 / span 2; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:var(--sobre-acento); background:linear-gradient(140deg,var(--cel-2),var(--cel-3) 70%,var(--cel-4)); } .acceso .ic svg{width:19px; height:19px} .acceso b{font-size:13.2px; font-weight:600; color:var(--ink); line-height:1.3} .acceso .chapa{font-size:10.5px; padding:3px 9px; justify-self:start} .pie-pantalla{ margin-top:auto; font-size:11px; line-height:1.5; text-align:center; color:var(--ink-3); padding:10px 12px; border-radius:11px; background:var(--panel-2); border:1px solid var(--linea); opacity:0; transform:translateY(10px); } .pie-pantalla.visto{opacity:1; transform:none; transition:all .5s var(--curva)} @media (prefers-reduced-motion:reduce){ .acceso,.pie-pantalla{opacity:1 !important; transform:none !important} } /* ---- el hero de las páginas interiores ---- Sin teléfono al lado: una sola columna, y menos alto, porque abajo arranca enseguida el contenido que la persona vino a leer. */ .hero.corto{padding:62px 0 34px} .hero.corto .envoltura{grid-template-columns:1fr; gap:0} .hero.corto .bajada{max-width:66ch} /* ---- el recorrido de «Cómo funciona» ---- Cinco pasos en vertical. La línea que los une es un borde del
  • , no un elemento aparte: así no hay nada que quede descolgado si un paso crece. */ .recorrido{list-style:none; margin:0; padding:0; max-width:820px} .recorrido li{ display:grid; grid-template-columns:56px 1fr; gap:22px; padding:0 0 32px 0; position:relative; } .recorrido li::before{ content:""; position:absolute; left:27px; top:52px; bottom:0; width:2px; background:linear-gradient(180deg, color-mix(in srgb, var(--cel-2) 55%, transparent), transparent); } .recorrido li:last-child{padding-bottom:0} .recorrido li:last-child::before{display:none} .recorrido .n{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-family:var(--titulo); font-weight:700; font-size:21px; color:var(--sobre-acento); background:linear-gradient(140deg,var(--cel-2),var(--cel-3) 62%,var(--cel-4)); box-shadow:0 10px 24px -12px color-mix(in srgb, var(--cel-3) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.4); } .recorrido h3{font-family:var(--titulo); font-weight:600; font-size:19px; margin:12px 0 8px; letter-spacing:-.02em} .recorrido p{margin:0; font-size:15.5px; line-height:1.66; color:var(--ink-2); max-width:62ch} .recorrido .apunte{ margin-top:10px; font-size:13.8px; color:var(--ink-3); padding-left:14px; border-left:2px solid var(--linea); } @media (max-width:620px){ .recorrido li{grid-template-columns:44px 1fr; gap:16px} .recorrido li::before{left:21px; top:44px} .recorrido .n{width:44px; height:44px; border-radius:14px; font-size:17px} .recorrido h3{margin-top:8px; font-size:17.5px} } /* ============================================================================ EL COLOR DE CADA VERTICAL, DENTRO DE UNA PAGINA QUE NO ES DE ESA VERTICAL ============================================================================ POR QUE. En la Home las tres soluciones salían las tres del mismo celeste institucional: en el teléfono las tarjetas se veían idénticas y había que leer el título para saber cuál era cuál. El anexo cromático le da a cada vertical su propia paleta justamente para que se distingan de un vistazo. COMO. El mismo truco que `body.v-*`, pero aplicado a un elemento suelto: la clase redefine los tokens `--cel-*` para ese bloque y sus hijos, y todos los componentes —la chapa, el icono, el botón, el borde— se repintan solos sin tener una variante por vertical de cada uno. ⚠️ EL NOMBRE SIGUE ESCRITO AL LADO DEL COLOR. El documento pide no distinguir las verticales solo por el tono, así que cada bloque teñido lleva igual su chapa con el nombre: el color acompaña, no reemplaza. ============================================================================ */ .t-salud{ --cel-1:var(--salud-light); --cel-2:var(--salud-primary); --cel-3:var(--salud-dark); --cel-4:color-mix(in srgb, var(--salud-dark) 72%, var(--inst-ink)); --acento:var(--salud-dark); } .t-marketing{ --cel-1:var(--marketing-light); --cel-2:var(--marketing-primary); --cel-3:var(--marketing-dark); --cel-4:color-mix(in srgb, var(--marketing-dark) 72%, var(--inst-ink)); --acento:var(--marketing-dark); } .t-atencion{ --cel-1:var(--atencion-light); --cel-2:var(--atencion-primary); --cel-3:var(--atencion-dark); --cel-4:color-mix(in srgb, var(--atencion-dark) 76%, #000); --acento:var(--atencion-dark); } /* De noche los «dark» de cada vertical no se leen sobre fondo oscuro: el acento pasa a ser el «light», igual que en las landings. El selector repite el del bloque oscuro de arriba para ganarle en especificidad. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .t-salud{ --cel-2:var(--salud-light); --cel-3:var(--salud-light); --cel-4:var(--salud-primary); --acento:var(--salud-light); } :root:not([data-theme="light"]) .t-marketing{ --cel-2:var(--marketing-light); --cel-3:var(--marketing-light); --cel-4:var(--marketing-primary); --acento:var(--marketing-light); } :root:not([data-theme="light"]) .t-atencion{ --cel-2:var(--atencion-light); --cel-3:var(--atencion-light); --cel-4:var(--atencion-primary); --acento:var(--atencion-light); } } /* La tarjeta teñida: el vidrio toma un velo del color de su vertical y el borde deja de ser gris. Es lo que hace que las tres se distingan de un vistazo, que era el problema. */ .tarjeta.t-salud, .tarjeta.t-marketing, .tarjeta.t-atencion{ background:linear-gradient(168deg, color-mix(in srgb, var(--cel-2) 15%, var(--panel)), color-mix(in srgb, var(--cel-2) 4%, var(--panel)) 62%, var(--panel)); border-color:color-mix(in srgb, var(--cel-2) 34%, var(--linea)); } .tarjeta.t-salud::before, .tarjeta.t-marketing::before, .tarjeta.t-atencion::before{ background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--cel-2) 60%, var(--linea-luz)), transparent); } .tarjeta.t-salud:hover, .tarjeta.t-marketing:hover, .tarjeta.t-atencion:hover{ border-color:color-mix(in srgb, var(--cel-2) 62%, var(--linea)); } /* El nombre de la solución, como en el logo: «eudova» en el color del texto y la vertical en el suyo. Dos palabras, dos pesos, un solo renglón. */ .lockup{display:flex; align-items:center; gap:12px; margin:14px 0 10px} .lockup .ic{ width:38px; height:38px; border-radius:12px; flex:none; display:grid; place-items:center; color:var(--sobre-acento); background:linear-gradient(140deg,var(--cel-2),var(--cel-3) 65%,var(--cel-4)); box-shadow:0 8px 18px -10px color-mix(in srgb, var(--cel-3) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.45); } .lockup .ic svg{width:20px; height:20px} .lockup .nombre{font-family:var(--titulo); line-height:1.12} .lockup .nombre b{display:block; font-weight:300; font-size:19px; letter-spacing:.005em; color:var(--ink)} .lockup .nombre span{display:block; font-weight:600; font-size:17px; letter-spacing:-.01em; color:var(--cel-3)} /* Los tres botones, a la misma altura. Los textos de las tarjetas miden distinto —el de Marketing ocupa tres renglones y el de Salud dos—, así que sin esto cada botón queda donde lo deja su párrafo y la fila se ve despareja. El botón se empuja al fondo y las tres tarjetas se leen como una sola cosa. */ .grilla > .tarjeta{display:flex; flex-direction:column} .tarjeta .cta-abajo{margin-top:auto; padding-top:18px; margin-bottom:0} /* El acceso del teléfono, también con el color de su vertical. */ .acceso.t-salud .ic, .acceso.t-marketing .ic, .acceso.t-atencion .ic{ background:linear-gradient(140deg,var(--cel-2),var(--cel-3) 70%,var(--cel-4)); } /* Los enlaces a las tres soluciones en el pie: el punto de color los ordena sin agregar una palabra más. */ footer .pie .solucion{display:inline-flex; align-items:center; gap:9px} footer .pie .solucion::before{ content:""; width:8px; height:8px; border-radius:50%; flex:none; background:var(--cel-2); } /* ============================================================================ ESPECIFICACION DE IMPLEMENTACION — EUDOVA_Web_Implementacion_Exacta v1.0 ============================================================================ Reemplaza a la capa anterior. Va al final a proposito: se lee qué cambió esta especificación sin tener que reescribir lo de abajo. ⚠️ TRES COLORES DEL DOCUMENTO NO PASAN AA, Y EL MISMO DOCUMENTO EXIGE AA (punto 10). Medido sobre blanco: --brand-cyan-strong #00A4C7 2,94:1 <- y lo propone para los botones --brand-cyan #92C8D5 1,83:1 --brand-silver #668493 3,97:1 --text-muted #536C82 5,48:1 <- este si --brand-ink #102E53 13,66:1 <- este si Asi que: el cian fuerte se usa para RELLENOS, iconos y el arranque del degradado —nunca para texto—, el degradado del boton TERMINA en el azul profundo (blanco sobre #102E53 da 13,66:1) y los parrafos van con `--text-muted`. ⚠️ Y EL DOCUMENTO NO TRAE UN ACENTO DE TEXTO. Para los enlaces hace falta un color que pase AA y que no sea el del parrafo. Se deriva de sus dos colores, sin inventar ninguno: 60% de #00A4C7 con 40% de #102E53 da **#067599**, que mide 5,23:1 y conserva el carácter cian. Lo mismo para el tercer nivel de texto, que sale de mezclar `--text-muted` con `--brand-navy`. ============================================================================ */ :root{ /* Los tokens del documento, tal cual. */ --brand-navy:#142B38; --brand-ink:#102E53; --brand-cyan:#92C8D5; --brand-cyan-strong:#00A4C7; --brand-silver:#668493; --brand-ice:#E6F4F7; --surface:#FFFFFF; --surface-soft:#F6FAFC; --text-muted:#536C82; --salud-main:#239BB6; --salud-light:#E8F5F8; --marketing-main:#8260D4; --marketing-light:#F0EAFE; --atencion-main:#486D8F; --atencion-light:#E8EDF3; --radius-card:18px; --radius-button:999px; --shadow-soft:0 12px 35px rgba(24,58,88,.08); /* Derivados, con su contraste medido al lado. */ --acento-texto:#067599; /* 5,23:1 */ --ink-medio:color-mix(in srgb, var(--text-muted) 60%, var(--brand-navy)); /* 8,17:1 */ /* ---- y como quedan los tokens que usan los componentes ---- */ --bg:var(--surface); --bg-2:var(--surface-soft); --panel:#FFFFFF; --panel-2:var(--surface-soft); --ink:var(--brand-navy); --ink-2:var(--ink-medio); --ink-3:var(--text-muted); --linea:color-mix(in srgb, var(--brand-navy) 11%, transparent); --linea-luz:rgba(255,255,255,.9); --cel-1:var(--brand-ice); --cel-2:var(--brand-cyan-strong); --cel-3:var(--acento-texto); --cel-4:var(--brand-ink); --acento:var(--acento-texto); --acento-2:var(--brand-ink); --sobre-acento:#fff; --sombra:var(--shadow-soft); --sombra-alta:0 20px 50px rgba(24,58,88,.14); /* Manrope para titulares, Inter para texto y UI (punto 2). */ --titulo:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --texto:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } /* ⚠️ EL SITIO VA CLARO SIEMPRE. La especificación describe un solo mundo visual —«fondos mayormente blancos, azules muy claros y degradados suaves»— y no define ninguna version oscura. Un modo oscuro derivado por nosotros seria inventar media identidad: la pagina se ve igual para todos, que ademas es lo que se aprobo mirando el mockup. Por eso se anulan los dos bloques oscuros de las capas anteriores. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:var(--surface); --bg-2:var(--surface-soft); --panel:#FFFFFF; --panel-2:var(--surface-soft); --ink:var(--brand-navy); --ink-2:var(--ink-medio); --ink-3:var(--text-muted); --linea:color-mix(in srgb, var(--brand-navy) 11%, transparent); --linea-luz:rgba(255,255,255,.9); --cel-1:var(--brand-ice); --cel-2:var(--brand-cyan-strong); --cel-3:var(--acento-texto); --cel-4:var(--brand-ink); --acento:var(--acento-texto); --acento-2:var(--brand-ink); --sobre-acento:#fff; --sombra:var(--shadow-soft); --sombra-alta:0 20px 50px rgba(24,58,88,.14); } :root:not([data-theme="light"]) .aurora i{opacity:.55; filter:blur(90px)} :root:not([data-theme="light"]) .trama{opacity:.35; background-image:radial-gradient(rgba(12,45,62,.16) 1px, transparent 1px)} } /* Las verticales, con los tonos del punto 2. El «main» es relleno; para texto se usa el oscuro de cada una, que es el que pasa AA (Marketing 4,59 · Atencion 5,44) salvo Salud, que a #239BB6 da 3,26 y por eso lleva el suyo propio mas profundo. */ body.v-salud, .t-salud{ --cel-1:var(--salud-light); --cel-2:var(--salud-main); --cel-3:#146F90; --cel-4:color-mix(in srgb, #146F90 70%, var(--brand-ink)); --bg-2:var(--salud-light); --acento:#146F90; } body.v-marketing, .t-marketing{ --cel-1:var(--marketing-light); --cel-2:var(--marketing-main); --cel-3:#5946A9; --cel-4:color-mix(in srgb, #5946A9 70%, var(--brand-ink)); --bg-2:var(--marketing-light); --acento:#5946A9; } body.v-atencion, .t-atencion{ --cel-1:var(--atencion-light); --cel-2:var(--atencion-main); --cel-3:#203B59; --cel-4:var(--brand-ink); --bg-2:var(--atencion-light); --acento:#203B59; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body.v-salud, :root:not([data-theme="light"]) .t-salud{ --cel-2:var(--salud-main); --cel-3:#146F90; --acento:#146F90; --bg-2:var(--salud-light); } :root:not([data-theme="light"]) body.v-marketing, :root:not([data-theme="light"]) .t-marketing{ --cel-2:var(--marketing-main); --cel-3:#5946A9; --acento:#5946A9; --bg-2:var(--marketing-light); } :root:not([data-theme="light"]) body.v-atencion, :root:not([data-theme="light"]) .t-atencion{ --cel-2:var(--atencion-main); --cel-3:#203B59; --acento:#203B59; --bg-2:var(--atencion-light); } } /* El fondo: blanco con formas celestes muy tenues, como pide el hero. */ .aurora i:nth-child(1){background:radial-gradient(circle at 30% 30%, var(--brand-cyan), transparent 62%)} .aurora i:nth-child(2){background:radial-gradient(circle at 60% 40%, var(--brand-ice), transparent 60%)} .aurora i:nth-child(3){background:radial-gradient(circle at 50% 50%, var(--surface-soft), transparent 64%)} body.v-salud .aurora i:nth-child(1){background:radial-gradient(circle at 30% 30%, #9BDCE8, transparent 62%)} body.v-marketing .aurora i:nth-child(1){background:radial-gradient(circle at 30% 30%, #C7B2F3, transparent 62%)} body.v-atencion .aurora i:nth-child(1){background:radial-gradient(circle at 30% 30%, #A4B8CA, transparent 62%)} /* ---- botones: pildora, y el degradado TERMINA en el azul profundo ---- */ .btn{border-radius:var(--radius-button); box-shadow:none; border-color:var(--linea)} .btn:hover{box-shadow:var(--shadow-soft)} .btn.pri{ background:linear-gradient(120deg,var(--cel-2) 0%,var(--cel-3) 55%,var(--cel-4) 100%); box-shadow:0 10px 24px -12px color-mix(in srgb, var(--cel-4) 70%, transparent); } /* El secundario, «con borde o estilo link» (punto 2). */ .btn:not(.pri){background:var(--surface); color:var(--ink)} .btn:not(.pri):hover{border-color:var(--cel-2); color:var(--acento)} .tarjeta, .caso, .formulario, .faq details{border-radius:var(--radius-card)} .tarjeta{background:var(--surface); box-shadow:var(--shadow-soft); backdrop-filter:none} .tarjeta:hover{box-shadow:0 18px 44px rgba(24,58,88,.13)} /* ACA ESTABA EL DESPLEGABLE DE VERTICALES y se fue el 16/10, con el menu plano del punto 2 del documento de Salud. Con tres verticales y seis entradas, el desplegable escondia justamente las paginas que el sitio quiere vender. Se borro el bloque entero --incluido el puente `::before` sobre el hueco, que arreglaba un problema que ya no existe-- en vez de dejarlo muerto en la hoja. */ /* ---- la banda de cuatro beneficios breves del punto 4.3 ---- */ .banda{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:38px; padding:22px; border-radius:var(--radius-card); background:var(--surface-soft); border:1px solid var(--linea); } @media (max-width:860px){.banda{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.banda{grid-template-columns:1fr}} .banda div{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink)} .banda svg{width:19px; height:19px; color:var(--cel-3); flex:none} /* ---- el hueco de las fotografias que todavia no tenemos ---- */ .lugarFoto{ display:grid; place-items:center; text-align:center; padding:28px; min-height:200px; border-radius:var(--radius-card); background:var(--surface-soft); border:1px dashed color-mix(in srgb, var(--brand-navy) 22%, transparent); color:var(--ink-3); font-size:13px; line-height:1.6; } .lugarFoto b{display:block; color:var(--ink-2); font-size:13.5px; margin-bottom:3px} /* ---- la lista de razones del punto 4.6 ---- */ .razones{display:grid; grid-template-columns:repeat(4,1fr); gap:18px} @media (max-width:1000px){.razones{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.razones{grid-template-columns:1fr}} .razon{text-align:center; padding:22px 16px} .razon .ic{ width:46px; height:46px; margin:0 auto 12px; border-radius:14px; display:grid; place-items:center; color:var(--cel-3); background:var(--brand-ice); border:1px solid color-mix(in srgb, var(--cel-2) 26%, transparent); } .razon .ic svg{width:22px; height:22px} .razon b{display:block; font-family:var(--titulo); font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.35} /* ============================================================================ EUDOVA SALUD — especificacion final del 15/10/2026 ============================================================================ Lo que agrega el documento `EUDOVA_Salud_Web_Implementacion_FINAL.md`: el logo de verdad, el hero con telefono derecho y aviso flotante, la fila de seis funcionalidades, los cuatro pasos con sus pantallitas, los cuatro beneficios, el bloque editorial que reemplaza al testimonio y la banda final. ⚠️ LOS COLORES SIGUEN SIENDO LOS DEL ANEXO CROMATICO, no los del documento. El documento trae `--health-primary:#168FB0` y companía, pero el propio texto aclara que son «aproximados, muestreados visualmente de la referencia» y pide confirmarlos. El anexo cromatico de octubre si esta aprobado, y ya esta aplicado mas arriba. Ademas los del documento no pasan AA —#168FB0 da 3,76:1 sobre blanco y el cian 2,60:1, y el degradado del boton arranca en 2,45:1 con texto blanco encima—, y el punto 10 del mismo documento exige AA. Se dejan los aprobados, que ya estaban medidos. ============================================================================ */ /* ---- el logo, que ahora es una imagen y no tipografia ---- */ /* Un solo archivo: el sitio es claro siempre (la ultima capa de esta hoja anula los dos bloques oscuros de arriba). Hubo un momento con dos variantes y lo que paso fue que se mostraba la oscura sobre fondo blanco, con la palabra invisible. Si algun dia hay tema oscuro, vuelve la variante y dos reglas. */ .marca img{height:38px; width:auto; display:block} @media (max-width:420px){.marca img{height:32px}} /* ---- el telefono del hero, derecho ---- El documento pide el celular «centrado y legible». El `.telefono` de siempre va girado en tres ejes, que queda bien en la Home pero acá pelea con la foto y con el aviso flotante. */ .telefono.derecho{transform:none; transform-origin:center} .telefono.derecho:hover{transform:translateY(-4px)} /* La escena del hero: el telefono y, detras, el hueco de la fotografia. El aviso flotante se apoya abajo a la derecha, como en la referencia. */ .escenaSalud{position:relative; display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); align-items:center; gap:0} .escenaSalud .telefono{z-index:2; width:296px} @media (max-width:980px){ .escenaSalud{grid-template-columns:1fr; justify-items:center} .escenaSalud .telefono{width:290px} } /* El hueco de la foto licenciada. Hoy no hay ninguna: el zip que llego trae recortes del mockup a 499x360, que ni tienen licencia ni dan resolucion. El punto 11 del documento la pide como recurso aparte. Mientras no este, el hueco se ve como lo que es y no se disimula con una imagen borrosa. */ .huecoFoto{ position:relative; margin-left:-56px; align-self:stretch; min-height:330px; border-radius:26px; display:grid; place-items:center; text-align:center; padding:28px 28px 28px 76px; background:linear-gradient(140deg, var(--bg-2), color-mix(in srgb,var(--cel-1) 46%, var(--bg-2))); border:1px dashed color-mix(in srgb, var(--cel-3) 30%, transparent); color:var(--ink-3); font-size:12.5px; line-height:1.6; } .huecoFoto b{display:block; color:var(--ink-2); font-size:13px; margin-bottom:4px} @media (max-width:980px){ .huecoFoto{margin:-40px 0 0; padding:56px 24px 24px; min-height:150px; width:100%} } /* ---- el aviso flotante del hero ---- */ /* ⚠️ EL ANCHO Y EL `right` NEGATIVO ESTAN MEDIDOS, no elegidos a ojo. Con 270 px pegado al borde, el aviso arrancaba en x=958 y el telefono termina en 1028: se comia los ultimos 27 px de la barra inferior, o sea el boton «Mas». Con 216 y -6 px arranca en 1018 y pisa 10 px del marco —que es el aire del borde redondeado, como en la referencia— sin tapar ningun elemento. */ .avisoTel{ position:absolute; right:-6px; bottom:16px; z-index:3; max-width:216px; display:grid; grid-template-columns:34px 1fr; gap:4px 11px; align-items:center; padding:12px 14px; border-radius:16px; background:var(--surface,var(--panel)); border:1px solid var(--linea); box-shadow:var(--sombra-alta); backdrop-filter:blur(10px); } .avisoTel .ic{grid-row:1 / span 2; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:var(--cel-3); background:color-mix(in srgb,var(--cel-2) 16%, transparent); border:1px solid color-mix(in srgb,var(--cel-2) 30%, transparent)} .avisoTel .ic svg{width:18px; height:18px} .avisoTel b{font-size:13px; font-weight:600} .avisoTel span{font-size:12px; line-height:1.45; color:var(--ink-2)} @media (max-width:980px){.avisoTel{position:static; max-width:none; margin:18px auto 0}} /* ---- las filas de menu de las pantallas de ejemplo ---- */ .filaMenu{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:13px; background:var(--panel); border:1px solid var(--linea); box-shadow:var(--sombra); opacity:0; transform:translateY(10px); } .filaMenu.visto{opacity:1; transform:none; transition:opacity .5s var(--curva), transform .5s var(--curva)} .filaMenu .ic{width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; color:var(--cel-3); background:color-mix(in srgb,var(--cel-2) 15%, transparent); border:1px solid color-mix(in srgb,var(--cel-2) 28%, transparent)} .filaMenu .ic svg{width:16px; height:16px} .filaMenu b{flex:1; font-size:12.6px; font-weight:500; color:var(--ink)} .filaMenu .fl{width:13px; height:13px; color:var(--ink-3); flex:none} /* ---- la barra inferior de la pantalla de ejemplo ---- */ .navTel{ margin-top:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:9px 6px 4px; border-top:1px solid var(--linea); } .navTel span{display:grid; justify-items:center; gap:3px; font-size:9.5px; color:var(--ink-3)} .navTel span svg{width:16px; height:16px} .navTel span.aqui{color:var(--cel-3); font-weight:600} /* ---- las seis funcionalidades (punto 4) ---- Seis columnas iguales en escritorio, 3x2 en tablet y 2x3 en telefono, como pide el documento. Sin tarjeta: icono centrado sobre cuadrado celeste palido, titulo y bajada. */ .funcs{display:grid; grid-template-columns:repeat(6,1fr); gap:26px 18px} @media (max-width:1060px){.funcs{grid-template-columns:repeat(3,1fr)}} @media (max-width:620px){.funcs{grid-template-columns:repeat(2,1fr); gap:24px 14px}} .func{text-align:center} .func .ic{ width:64px; height:64px; margin:0 auto 14px; border-radius:18px; display:grid; place-items:center; color:var(--cel-3); background:color-mix(in srgb, var(--cel-2) 14%, var(--bg)); border:1px solid color-mix(in srgb, var(--cel-2) 28%, transparent); } .func .ic svg{width:30px; height:30px} .func b{display:block; font-family:var(--titulo); font-weight:600; font-size:15px; line-height:1.3; color:var(--ink); margin-bottom:7px; text-wrap:balance} .func span{display:block; font-size:13.2px; line-height:1.55; color:var(--ink-2)} /* ---- los cuatro pasos (punto 5) ---- Cuatro columnas con pantallita, flecha entre columnas y numero redondo abajo. En telefono se vuelve un recorrido vertical y las flechas desaparecen: una flecha que apunta a la derecha arriba de un elemento que esta abajo miente. */ .flujo{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:start} @media (max-width:1060px){.flujo{grid-template-columns:repeat(2,1fr); gap:28px 10px}} @media (max-width:620px){.flujo{grid-template-columns:1fr; gap:26px}} .etapa{position:relative; display:grid; justify-items:center; text-align:center; padding:0 10px} /* La flecha va como ::after de la etapa y no como un elemento aparte: asi no hay que dibujar una flecha de mas al final ni acordarse de sacarla al reordenar. */ .etapa::after{ content:""; position:absolute; right:-9px; top:170px; width:18px; height:18px; border-right:2px solid color-mix(in srgb,var(--cel-3) 55%, transparent); border-bottom:2px solid color-mix(in srgb,var(--cel-3) 55%, transparent); transform:rotate(-45deg); } .etapa:last-child::after{display:none} @media (max-width:1060px){.etapa:nth-child(2)::after{display:none}} @media (max-width:620px){.etapa::after{display:none}} .etapa .n{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--titulo); font-weight:700; font-size:15px; color:#fff; margin:18px 0 10px; background:linear-gradient(140deg,var(--cel-2),var(--cel-3)); box-shadow:0 8px 18px -8px rgba(14,127,166,.9); } .etapa h3{font-family:var(--titulo); font-weight:600; font-size:15.5px; margin:0 0 6px; color:var(--ink)} .etapa p{margin:0; font-size:13.2px; line-height:1.55; color:var(--ink-2); max-width:30ch} /* ---- la pantallita de cada paso ---- Es el mismo telefono, mas chico y sin inclinar. No lleva marco de 34 px porque a este tamano el marco se come la pantalla. */ .minitel{ width:100%; max-width:208px; border-radius:20px; padding:7px; background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(233,242,247,.55)); border:1px solid var(--linea-luz); box-shadow:0 2px 6px rgba(9,32,45,.10), 14px 28px 48px -28px rgba(9,32,45,.55), inset 0 1px 0 rgba(255,255,255,.9); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .minitel{ background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.14); box-shadow:0 2px 6px rgba(0,0,0,.5), 14px 30px 52px -28px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.14); } } /* ⚠️ ALTO FIJO, Y NO `min-height`. Las cuatro pantallas tienen distinto contenido —240, 333, 355 y 296 px medidos—, y con alto libre los numeros y los titulos de los cuatro pasos quedaban en cuatro alturas distintas, como una escalera. En la referencia estan alineados. 356 px entra el mas largo sin recortar. */ .minitel .pantalla{border-radius:15px; height:356px; display:flex; flex-direction:column} .minitel .tcab{padding:9px 10px; gap:8px} .minitel .tcab .av{width:26px; height:26px; font-size:10px} /* Sin esto, «Tu clinica» parte en dos lineas: a este tamano el avatar y el padding dejan unos 100 px de texto. */ .minitel .tcab .n{font-size:11.5px; white-space:nowrap} .minitel .tcab > div{min-width:0} .minitel .tcab .e{font-size:9.5px} .minitel .cuerpo{padding:9px; display:flex; flex-direction:column; gap:6px; flex:1} .minitel .filaMenu{padding:7px 8px; gap:8px; border-radius:10px} .minitel .filaMenu .ic{width:22px; height:22px; border-radius:7px} .minitel .filaMenu .ic svg{width:12px; height:12px} .minitel .filaMenu b{font-size:10.4px} .minitel .filaMenu .fl{width:10px; height:10px} /* El formulario de identificacion del paso 1. Los campos son de muestra: el mecanismo real lo define cada institucion, y el documento insiste en eso. */ .campoMuestra{padding:8px 10px; border-radius:9px; font-size:10.4px; color:var(--ink-3); background:var(--panel); border:1px solid var(--linea)} .botonMuestra{margin-top:2px; padding:8px; border-radius:9px; text-align:center; font-size:10.6px; font-weight:600; color:#fff; background:linear-gradient(135deg,var(--cel-2),var(--cel-3))} /* Las opciones del asistente del paso 3: mas sobrias que una fila de menu. */ .opcionMuestra{padding:7px 9px; border-radius:9px; font-size:10.4px; color:var(--ink-2); background:var(--panel); border:1px solid var(--linea)} .preguntaMuestra{display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:9px; font-size:10.4px; font-weight:600; color:var(--ink); background:color-mix(in srgb,var(--cel-2) 13%, transparent); border:1px solid color-mix(in srgb,var(--cel-2) 26%, transparent)} .preguntaMuestra svg{width:13px; height:13px; color:var(--cel-3); flex:none} /* El chat del paso 4. */ .burbujaMuestra{font-size:10.4px; line-height:1.45; padding:7px 9px; border-radius:10px; background:var(--panel); border:1px solid var(--linea); color:var(--ink)} .burbujaMuestra .de{display:block; font-size:9px; font-weight:700; color:var(--cel-3); margin-bottom:2px} .fichaMuestra{display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:10px; font-size:10.2px; color:var(--ink); background:color-mix(in srgb,var(--cel-2) 11%, transparent); border:1px solid color-mix(in srgb,var(--cel-2) 24%, transparent)} .fichaMuestra svg{width:13px; height:13px; color:var(--cel-3); flex:none} .fichaMuestra b{font-size:10.2px} /* ---- los cuatro beneficios (punto 6) ---- Icono a la izquierda, texto a la derecha, cuatro en una fila. */ .benes{display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px} @media (max-width:1060px){.benes{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.benes{grid-template-columns:1fr}} .bene{display:grid; grid-template-columns:52px 1fr; gap:4px 14px; align-items:start} .bene .ic{ grid-row:1 / span 2; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:var(--cel-3); background:color-mix(in srgb, var(--cel-2) 14%, var(--bg)); border:1px solid color-mix(in srgb, var(--cel-2) 28%, transparent); } .bene .ic svg{width:25px; height:25px} .bene b{font-family:var(--titulo); font-weight:600; font-size:15px; line-height:1.3; color:var(--ink); margin-bottom:5px; display:block} .bene span{display:block; font-size:13.2px; line-height:1.55; color:var(--ink-2)} /* ---- el bloque editorial que reemplaza al testimonio (punto 7) ---- ⚠️ EL TESTIMONIO DEL MOCKUP NO SE PUBLICA. El documento lo dice con todas las letras: el medico, la cita y el +40 / -30 / +95 son ficticios. Este es el reemplazo que el propio documento deja escrito, con el mismo ritmo visual: foto a la izquierda, texto al medio. El dia que haya un testimonio real con autorizacion y metricas con metodologia, entra acá y se le agrega la columna de cifras. */ .editorial{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:0; border-radius:26px; overflow:hidden; background:linear-gradient(135deg, var(--bg-2), color-mix(in srgb,var(--cel-1) 34%, var(--bg-2))); border:1px solid var(--linea); } @media (max-width:860px){.editorial{grid-template-columns:1fr}} .editorial .foto{ display:grid; place-items:center; text-align:center; padding:28px; min-height:240px; border-right:1px solid var(--linea); background:color-mix(in srgb, var(--cel-2) 9%, transparent); color:var(--ink-3); font-size:12.5px; line-height:1.6; } @media (max-width:860px){.editorial .foto{border-right:0; border-bottom:1px solid var(--linea); min-height:150px}} .editorial .foto b{display:block; color:var(--ink-2); font-size:13px; margin-bottom:4px} .editorial .dicho{padding:40px 44px; display:grid; align-content:center; gap:12px} @media (max-width:620px){.editorial .dicho{padding:30px 24px}} .editorial .dicho h2{margin:0; font-size:clamp(22px,2.6vw,30px)} .editorial .dicho p{margin:0; font-size:16px; line-height:1.65; color:var(--ink-2); max-width:58ch} /* ---- la banda final (punto 8) ---- Texto a la izquierda, boton blanco a la derecha, bordes muy redondeados. No reusa `.cierre` porque aquella va centrada; y `.banda` ya existe y es otra cosa —los cuatro beneficios breves de la Home—, de ahi el nombre. */ .bandaCta{ position:relative; overflow:hidden; border-radius:26px; padding:38px 44px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; color:#fff; background:linear-gradient(110deg,var(--cel-3),var(--cel-4) 62%,#083d54); box-shadow:0 30px 70px -34px rgba(9,60,80,.9); } .bandaCta::before{content:""; position:absolute; width:460px; height:460px; left:-140px; top:-230px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.24),transparent 62%)} .bandaCta > *{position:relative} .bandaCta h2{margin:0 0 6px; color:#fff; font-size:clamp(21px,2.5vw,29px)} .bandaCta p{margin:0; color:#fff; opacity:.92; font-size:15.5px} .bandaCta .btn{background:#fff; color:var(--cel-4); border:0; flex:none} @media (max-width:620px){ .bandaCta{padding:30px 24px} .bandaCta .btn{width:100%; justify-content:center} } /* El salto del titular que pide el punto 3: «La atencion de tus» / «pacientes, en un solo lugar.». Solo en escritorio: en una pantalla angosta un salto forzado deja una linea de dos palabras y otra de ocho. */ .saltoDesk{display:none} @media (min-width:1100px){.saltoDesk{display:inline}} /* ============================================================================ HOME INSTITUCIONAL — paquete del 16/10/2026 (README_IMPLEMENTACION.md) ============================================================================ La Home cambia de registro: hero **azul noche con acento coral**, tres tarjetas de solucion de colores, el proceso sobre celeste muy claro y un cierre oscuro con foto. Es otra paleta que la institucional de octubre, y por eso vive en su propia capa y se enciende con `body.home`: las paginas de vertical no la tocan. ⚠️ UN SOLO COLOR DE LA PALETA NO PASA AA Y SE SUSTITUYE. Medido: el turquesa de Salud #04A6BD da **2,67:1** sobre su propio fondo #E2F9FC, asi que no sirve ni para texto chico ni para titulo grande (3,0). Se usa para el relleno del circulo del icono, que es donde la referencia lo pone, y la palabra «Salud» va en #146F90 —el mismo oscuro del anexo— que da 5,0. Marketing (#7350CB, 4,89) y Atencion (#315D87, 6,10) si pasan y van tal cual. El resto esta holgado: coral sobre noche 8,22 · blanco sobre noche 17,75 · azul noche sobre el boton coral 6,76 · texto sobre las tarjetas 12,7 a 13,4. ============================================================================ */ body.home{ --noche-1:#07192B; --noche-2:#132E4A; --noche-3:#294B6E; --azul-texto:#102A44; --coral:#FF9288; --sal-fuerte:#04A6BD; --sal-fondo:#E2F9FC; --sal-texto:#146F90; --mkt-fuerte:#7350CB; --mkt-fondo:#F1EDFF; --ate-fuerte:#315D87; --ate-fondo:#E9F2FC; --proceso-1:#E9F7FC; --proceso-2:#F7FBFE; } /* ---- la barra sobre el hero oscuro ---- Mientras no hay scroll, la barra se apoya sobre el azul noche y se dibuja al reves: sin fondo, con los enlaces en blanco y el boton claro. Al bajar, el JS le pone `.pegada` y vuelve a ser la de siempre. Es el mismo interruptor que ya existia para el borde inferior, asi que no hace falta JavaScript nuevo. */ /* ⚠️ `.marca .logo-claro`, con los dos selectores. Escrito como `.logo-claro` a secas pesa menos que el `.marca img{display:block}` de la capa de Salud, y el logo claro no se ocultaba: en cuanto la barra se despegaba del hero se veian **los dos logos, uno al lado del otro**. */ .marca .logo-claro{display:none} body.home .barra:not(.pegada){background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none} body.home .barra:not(.pegada) .marca .logo-normal{display:none} body.home .barra:not(.pegada) .marca .logo-claro{display:block} body.home .barra:not(.pegada) .menu a{color:rgba(255,255,255,.82)} body.home .barra:not(.pegada) .menu a:hover, body.home .barra:not(.pegada) .menu a[aria-current="page"]{color:#fff} body.home .barra:not(.pegada) .menu a::after{background:#fff} body.home .barra:not(.pegada) .acciones-barra .btn{ background:#fff; color:var(--noche-1); box-shadow:0 10px 26px -14px rgba(0,0,0,.8)} body.home .barra:not(.pegada) .conmuta{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff} /* ---- el hero oscuro ---- Pisa el `.hero` claro de siempre solo en la Home. El fondo decorativo del sitio (la aurora y la trama) se apaga detras: encima del azul noche no se ve y lo unico que hace es ensuciar el degradado. */ body.home .aurora, body.home .trama{display:none} .heroNoche{ position:relative; overflow:hidden; color:#fff; background: radial-gradient(1100px 520px at 88% 18%, rgba(115,80,203,.42), transparent 62%), radial-gradient(760px 420px at 96% 76%, rgba(255,146,136,.26), transparent 64%), linear-gradient(135deg, var(--noche-1) 0%, var(--noche-2) 58%, var(--noche-3) 100%); } .heroNoche .envoltura{ display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center; padding-top:66px; padding-bottom:66px; } @media (max-width:980px){ .heroNoche .envoltura{grid-template-columns:1fr; gap:34px; padding-top:44px; padding-bottom:48px} } .heroNoche .ojo{color:rgba(255,255,255,.72); letter-spacing:.16em; line-height:1.7} .heroNoche h1{color:#fff; margin:14px 0 20px} /* El acento del titular es coral PLANO, no el degradado animado del resto del sitio: sobre el azul noche ese degradado se apaga, y ademas la referencia lo pide liso. */ .heroNoche h1 em{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--coral); animation:none; } .heroNoche .bajada{color:rgba(255,255,255,.84); max-width:50ch} .heroNoche .btn{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff} .heroNoche .btn:hover{border-color:rgba(255,255,255,.55)} /* El llamado principal: coral con el texto en azul noche. Es la unica pieza coral con texto encima, y da 6,76:1. */ .heroNoche .btn.coral{ background:var(--coral); color:var(--noche-1); border:0; box-shadow:0 14px 30px -14px rgba(255,146,136,.85); } .heroNoche .btn.coral:hover{background:color-mix(in srgb, var(--coral) 88%, #fff)} /* En columna: es un
    y el pie va DEBAJO de la imagen. Con el flex en fila por omision, el pie se volvia un segundo item al costado y bajaba como una tira de una palabra por renglon. */ .heroArte{display:flex; flex-direction:column; align-items:center; justify-content:center} .heroArte img{width:100%; max-width:560px; height:auto; display:block; filter:drop-shadow(0 40px 70px rgba(0,0,0,.45))} /* La leyenda de la imagen. El README avisa que los numeros del panel son ilustrativos y pide no presentarlos como reales: se dice donde se ven. */ .heroArte figcaption{ margin-top:10px; font-size:11.5px; color:rgba(255,255,255,.55); text-align:center; } /* ---- las tres tarjetas de solucion ---- Cada una con su color de fondo, el lockup «Eudova / Nombre», la frase, cuatro puntos, la flecha redonda que lleva a su pagina y la foto en la franja derecha. La foto NO salio del recorte que vino en el paquete —ese trae el texto de la propia tarjeta incrustado, «…ud», «pacientes», «eradores»— sino de la region fotografica de la referencia completa, extraida aparte. Ver la capa de las fotografias, al final de esta hoja. */ .soluciones{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} @media (max-width:1000px){.soluciones{grid-template-columns:1fr; max-width:560px; margin-inline:auto}} .sol{ position:relative; display:flex; flex-direction:column; gap:14px; padding:26px 26px 72px; border-radius:var(--radius-card); border:1px solid color-mix(in srgb, var(--sol-fuerte) 22%, transparent); background:linear-gradient(160deg, #fff 0%, var(--sol-fondo) 46%, var(--sol-fondo) 100%); transition:transform .35s var(--curva), box-shadow .35s var(--curva); } .sol:hover{transform:translateY(-4px); box-shadow:0 22px 50px -26px rgba(16,42,68,.45)} .sol.salud {--sol-fuerte:var(--sal-fuerte); --sol-fondo:var(--sal-fondo); --sol-texto:var(--sal-texto)} .sol.marketing{--sol-fuerte:var(--mkt-fuerte); --sol-fondo:var(--mkt-fondo); --sol-texto:var(--mkt-fuerte)} .sol.atencion {--sol-fuerte:var(--ate-fuerte); --sol-fondo:var(--ate-fondo); --sol-texto:var(--ate-fuerte)} .sol .lockup{display:flex; align-items:center; gap:14px} .sol .redondo{ width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; background:var(--sol-fuerte); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--sol-fuerte) 90%, transparent); } .sol .redondo svg{width:27px; height:27px} .sol .lockup .nom{line-height:1.12} .sol .lockup .nom small{display:block; font-size:14px; font-weight:500; color:var(--azul-texto); opacity:.72} /* ⚠️ El nombre de la vertical va en `--sol-texto`, no en `--sol-fuerte`. Para Salud no son el mismo color: ver el encabezado de esta capa. */ .sol .lockup .nom b{display:block; font-family:var(--titulo); font-weight:700; font-size:23px; letter-spacing:-.02em; color:var(--sol-texto)} .sol > p{margin:0; font-size:15px; line-height:1.55; color:var(--azul-texto); font-weight:500} .sol ul{margin:0; padding:0; list-style:none; display:grid; gap:9px} .sol li{display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--azul-texto)} .sol li svg{width:17px; height:17px; flex:none; margin-top:2px; color:var(--sol-fuerte)} .sol .flecha{ position:absolute; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--sol-fuerte); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--sol-fuerte) 90%, transparent); transition:transform .25s var(--curva); } .sol .flecha:hover{transform:translateX(3px)} .sol .flecha svg{width:20px; height:20px} /* ---- el proceso de cuatro pasos ---- Sobre celeste muy claro, con el titulo y el boton «Conocer mas» en la misma linea, y flechas entre pasos. Reusa la flecha de `.etapa` de Salud pero a otra altura, porque aca arriba del numero hay un icono y no una pantalla. */ .proceso{background:linear-gradient(180deg, var(--proceso-2), var(--proceso-1))} .procesoCab{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px} .procesoCab h2{margin:0 0 6px} .procesoCab p{margin:0; font-size:16px; color:var(--ink-2)} .pasos4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px} @media (max-width:1000px){.pasos4{grid-template-columns:repeat(2,1fr); gap:30px 14px}} @media (max-width:560px){.pasos4{grid-template-columns:1fr; gap:26px}} .paso4{position:relative; padding-right:14px} .paso4::after{ content:""; position:absolute; right:-2px; top:26px; width:14px; height:14px; border-right:2px solid color-mix(in srgb, var(--ate-fuerte) 48%, transparent); border-bottom:2px solid color-mix(in srgb, var(--ate-fuerte) 48%, transparent); transform:rotate(-45deg); } .paso4:last-child::after{display:none} @media (max-width:1000px){.paso4:nth-child(2)::after{display:none}} @media (max-width:560px){.paso4::after{display:none}} .paso4 .ic{ width:62px; height:62px; border-radius:50%; display:grid; place-items:center; margin-bottom:16px; color:var(--ate-fuerte); background:#fff; border:1px solid color-mix(in srgb, var(--ate-fuerte) 18%, transparent); box-shadow:0 10px 24px -14px rgba(16,42,68,.5); } .paso4 .ic svg{width:28px; height:28px} .paso4 h3{font-family:var(--titulo); font-weight:700; font-size:16px; margin:0 0 7px; color:var(--azul-texto)} .paso4 p{margin:0; font-size:13.6px; line-height:1.55; color:var(--ink-2); max-width:30ch} /* ---- el cierre oscuro ---- Tres areas: foto, texto y la lista de cuatro puntos. */ .cierreHome{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1.25fr) minmax(0,.85fr); align-items:center; gap:0; color:#fff; overflow:hidden; background: radial-gradient(760px 420px at 18% 20%, rgba(115,80,203,.35), transparent 62%), radial-gradient(620px 380px at 92% 82%, rgba(255,146,136,.22), transparent 64%), linear-gradient(120deg, var(--noche-1), var(--noche-2) 70%, var(--noche-3)); } @media (max-width:1060px){ .cierreHome{grid-template-columns:1fr; gap:0} } .cierreHome .foto{align-self:stretch; min-height:300px; background:#0c2036; background-size:cover; background-position:center} @media (max-width:1060px){.cierreHome .foto{min-height:220px}} .cierreHome .texto{padding:52px 48px} @media (max-width:620px){.cierreHome .texto{padding:36px 24px}} .cierreHome h2{color:#fff; margin:0 0 12px} .cierreHome h2 span{color:var(--coral)} .cierreHome .texto p{margin:0 0 24px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.84); max-width:46ch} .cierreHome .btn.coral{background:var(--coral); color:var(--noche-1); border:0; box-shadow:0 14px 30px -14px rgba(255,146,136,.85)} .cierreHome .btn.coral:hover{background:color-mix(in srgb, var(--coral) 88%, #fff)} .cierreHome ul{list-style:none; margin:0; padding:52px 48px 52px 0; display:grid; gap:18px} @media (max-width:1060px){.cierreHome ul{padding:0 48px 48px}} @media (max-width:620px){.cierreHome ul{padding:0 24px 36px}} .cierreHome li{display:flex; align-items:center; gap:12px; font-size:14.5px; color:rgba(255,255,255,.9)} .cierreHome li svg{width:19px; height:19px; flex:none; color:var(--coral)} /* ⚠️ Y LA BARRA TIENE QUE ESTAR ENCIMA DEL HERO, NO ARRIBA DEL HERO. Faltaba esto y se veia raro de una manera que cuesta nombrar: la barra quedaba en su propia franja blanca —el fondo del body— y recien abajo empezaba el azul noche, con el logo claro y los enlaces blancos invisibles sobre el blanco. En la referencia la barra se apoya SOBRE el hero. Se resuelve con un margen negativo del alto de la barra (61 px medidos), que sube el hero por debajo de ella. La barra sigue siendo `sticky`, asi que al bajar se despega igual y recupera su fondo claro con `.pegada`. `z-index` no hace falta: `.barra` ya tiene 40. */ body.home .barra{margin-bottom:-61px} body.home .heroNoche .envoltura{padding-top:calc(66px + 61px)} @media (max-width:980px){ body.home .heroNoche .envoltura{padding-top:calc(44px + 61px)} } /* ============================================================================ EUDOVA MARKETING — referencia aprobada del 16/10/2026 ============================================================================ Hero violeta claro con el telefono de «Tu Marca» y los avisos flotantes, seis funcionalidades separadas por lineas, beneficios en dos por dos, el recorrido de cinco pasos, el panel de campanas y un cierre azul noche. La paleta de este documento SI se usa tal cual, al reves que la de Salud: se midio y pasa AA en todo lo que es texto. Violeta primario #7451E8 da 5,14:1 sobre blanco —y lo mismo el blanco encima, asi que sirve para el boton—, el profundo #5946A9 da 7,31 y el azul noche sobre el fondo suave, 13,31. ⚠️ LA LAVANDA #C7B2F3 ES DECORATIVA Y NADA MAS: 1,89:1 sobre blanco. Va en rellenos, degradados y curvas. Como acento de texto solo sirve sobre el azul noche del cierre, donde da 7,74. ⚠️ Y LAS FOTOS NO ESTAN, igual que en Salud. Los recortes del paquete traen el texto de la propia seccion incrustado —el README lo dice: «no son imagenes independientes limpias»— asi que los lugares de fotografia quedan rotulados. ============================================================================ */ body.mkt{ --mkt-1:#7451E8; --mkt-2:#5946A9; --mkt-lav:#C7B2F3; --mkt-suave:#F6F2FF; --noche:#142B38; --cel-2:#7451E8; --cel-3:#5946A9; --cel-4:color-mix(in srgb, #5946A9 72%, #142B38); --cel-1:#C7B2F3; --bg-2:#F6F2FF; --acento:#5946A9; } /* ---- el hero ---- Fondo blanco con una nube lavanda a la derecha, detras del telefono, como en la referencia. */ .heroMkt{position:relative; overflow:hidden} .heroMkt::before{ content:""; position:absolute; right:-6%; top:-18%; width:72%; height:150%; background: radial-gradient(44% 42% at 62% 34%, rgba(116,81,232,.30), transparent 68%), radial-gradient(52% 48% at 78% 72%, rgba(199,178,243,.55), transparent 70%); pointer-events:none; } .heroMkt .envoltura{position:relative; z-index:1} /* La escena: el telefono y la columna de avisos al costado. */ .escenaMkt{display:grid; grid-template-columns:minmax(0,236px) minmax(0,1fr); gap:18px; align-items:center} @media (max-width:980px){ .escenaMkt{grid-template-columns:1fr; justify-items:center; gap:22px} } /* ---- el telefono de «Tu Marca» ---- Mas angosto que el de Salud: aca lo que importa son las tarjetas de promocion y el aire al costado se lo lleva la columna de avisos. */ .telMarca{ width:100%; max-width:236px; border-radius:30px; padding:9px; background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(246,242,255,.7)); border:1px solid rgba(255,255,255,.9); box-shadow:0 2px 6px rgba(28,16,60,.12), 26px 50px 80px -40px rgba(28,16,60,.5), inset 0 1px 0 rgba(255,255,255,.95); } .telMarca .pantalla{background:#fff; border-radius:22px; overflow:hidden; border:1px solid var(--linea); display:flex; flex-direction:column} .marcaCab{display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 12px 11px; font-size:13px; font-weight:700; color:var(--noche)} .marcaCab .ic{width:22px; height:22px; border-radius:7px; display:grid; place-items:center; color:#fff; background:linear-gradient(140deg,var(--mkt-1),var(--mkt-2))} .marcaCab .ic svg{width:13px; height:13px} .promos{padding:0 10px 12px; display:flex; flex-direction:column; gap:9px} .promo{ border-radius:13px; overflow:hidden; border:1px solid var(--linea); background:var(--mkt-suave); padding:9px 10px 10px; opacity:0; transform:translateY(10px); } .promo.visto{opacity:1; transform:none; transition:opacity .5s var(--curva), transform .5s var(--curva)} .promo b{display:block; font-size:11.5px; font-weight:700; color:var(--noche)} .promo .oferta{display:block; font-size:16px; font-weight:800; color:#C2342F; line-height:1.1} .promo .chico{display:block; font-size:9.5px; color:var(--ink-2); margin-top:1px} /* El lugar de la foto del producto. Es una pieza de diseno y no un hueco gris: el espacio tiene que leerse como parte de la tarjeta hasta que llegue la foto. */ .promo .arte{ height:44px; margin:7px 0 8px; border-radius:9px; background:linear-gradient(120deg, color-mix(in srgb,var(--mkt-lav) 70%, #fff), color-mix(in srgb,var(--mkt-1) 22%, #fff)); } .promo .ver{display:inline-block; font-size:9.5px; font-weight:700; color:#fff; padding:5px 11px; border-radius:999px; background:linear-gradient(135deg,var(--mkt-1),var(--mkt-2))} /* ---- los avisos flotantes ---- */ .avisosMkt{display:grid; gap:11px} .avisoMkt{ display:grid; grid-template-columns:34px 1fr 12px; gap:2px 11px; align-items:center; padding:11px 13px; border-radius:15px; background:#fff; border:1px solid var(--linea); box-shadow:0 18px 40px -24px rgba(28,16,60,.6); } .avisoMkt .ic{grid-row:1 / span 2; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(140deg,var(--mkt-1),var(--mkt-2))} .avisoMkt .ic svg{width:17px; height:17px} /* ⚠️ LAS DOS COLUMNAS VAN ESCRITAS, no dejadas al acomodo automatico. Con tres columnas y el icono ocupando las dos filas de la primera, el acomodo manda el titulo a la fila 1 columna 2 y el texto a la fila 1 **columna 3**, que mide 12 px: las dos lineas salian de un caracter de ancho. Con dos columnas —el aviso del hero de Salud— no pasa, porque no hay tercera a donde irse. */ .avisoMkt > b{grid-column:2; grid-row:1; font-size:12.5px; color:var(--noche)} .avisoMkt > span:not(.ic){grid-column:2; grid-row:2; font-size:11px; color:var(--ink-2); line-height:1.4} .avisoMkt .fl{grid-row:1 / span 2; width:12px; height:12px; color:var(--ink-3)} .avisoMkt.oferta b{font-size:17px; font-weight:800; color:#C2342F; line-height:1.1} /* ---- el encabezado de dos columnas que se repite en Marketing ---- */ .mktCab{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:end; margin-bottom:34px} @media (max-width:900px){.mktCab{grid-template-columns:1fr; gap:14px; align-items:start}} .mktCab h2{margin:0} .mktCab > p{margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-2)} /* Las seis funcionalidades de Marketing llevan linea divisoria, como la referencia. Es la misma grilla de Salud con el separador agregado. */ .funcs.separadas .func{text-align:left; padding-left:20px; border-left:1px solid var(--linea)} .funcs.separadas .func:first-child{border-left:0; padding-left:0} .funcs.separadas .func .ic{margin-left:0} @media (max-width:1060px){ .funcs.separadas .func:nth-child(3n+1){border-left:0; padding-left:0} } @media (max-width:620px){ .funcs.separadas .func:nth-child(odd){border-left:0; padding-left:0} } /* ---- los cuatro beneficios, en dos por dos ---- */ .benes2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px} @media (max-width:620px){.benes2{grid-template-columns:1fr}} .bene2{ display:grid; grid-template-columns:44px 1fr; gap:3px 14px; align-items:start; padding:20px; border-radius:var(--radius-card); background:var(--mkt-suave); border:1px solid color-mix(in srgb,var(--mkt-1) 14%, transparent); } .bene2 .ic{grid-row:1 / span 2; width:44px; height:44px; display:grid; place-items:center; color:var(--mkt-2)} .bene2 .ic svg{width:27px; height:27px} .bene2 b{font-family:var(--titulo); font-weight:700; font-size:15.5px; color:var(--noche)} .bene2 span{display:block; font-size:13.4px; line-height:1.55; color:var(--ink-2)} /* ---- el recorrido de cinco pasos ---- Cinco cajas con el numero en un circulo violeta, flechas entre ellas y el icono abajo a la izquierda, como en la referencia. Cinco en una fila solo entran en pantalla grande; debajo pasan a tres y a una. */ /* ⚠️ EL AIRE ENTRE TARJETAS ESTABA EN 10 px Y QUEDABA APRETADO: las cinco cajas se leian como una sola pieza rayada y la flecha no tenia donde respirar. Lo vio Martin el 16/10. Con 26 px se separan y la flecha queda centrada en el hueco —de ahi el `right:-19px` de abajo, que son los 26 del hueco menos los 13 que mide la flecha, repartidos. */ .ruta5{display:grid; grid-template-columns:repeat(5,1fr); gap:26px; align-items:stretch} @media (max-width:1160px){.ruta5{grid-template-columns:repeat(3,1fr); gap:30px 26px}} @media (max-width:760px){.ruta5{grid-template-columns:1fr; gap:16px}} .hito{ position:relative; display:grid; gap:9px; align-content:start; padding:20px 18px; border-radius:16px; background:#fff; border:1px solid color-mix(in srgb,var(--mkt-1) 15%, transparent); box-shadow:0 14px 34px -26px rgba(28,16,60,.6); } .hito::after{ content:""; position:absolute; right:-19px; top:50%; width:13px; height:13px; margin-top:-7px; border-right:2px solid color-mix(in srgb,var(--mkt-1) 55%, transparent); border-bottom:2px solid color-mix(in srgb,var(--mkt-1) 55%, transparent); transform:rotate(-45deg); } .hito:last-child::after{display:none} @media (max-width:1160px){.hito:nth-child(3n)::after{display:none}} @media (max-width:760px){.hito::after{display:none}} .hito .cab{display:flex; align-items:center; gap:10px} .hito .n{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--titulo); font-weight:700; font-size:14px; color:#fff; background:linear-gradient(140deg,var(--mkt-1),var(--mkt-2)); } .hito .cab b{font-family:var(--titulo); font-weight:700; font-size:13.6px; line-height:1.25; color:var(--noche)} .hito .pie{display:flex; align-items:flex-start; gap:9px} .hito .pie svg{width:20px; height:20px; flex:none; color:var(--mkt-1); margin-top:1px} .hito .pie span{font-size:12.4px; line-height:1.5; color:var(--ink-2)} /* ---- el panel de campanas ---- Reconstruido en HTML, no una captura: el README pide no usar los recortes y ademas asi los numeros se pueden marcar como lo que son, de ejemplo. */ .herramientas{background:linear-gradient(135deg, #fff 30%, var(--mkt-suave))} .herramientas .envoltura{display:grid; grid-template-columns:.92fr 1.08fr; gap:40px; align-items:center} @media (max-width:1000px){.herramientas .envoltura{grid-template-columns:1fr; gap:30px}} .panelMkt{ border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--linea); box-shadow:0 30px 70px -40px rgba(28,16,60,.65); } .panelMkt .barraPanel{display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--linea)} .panelMkt .barraPanel i{width:9px; height:9px; border-radius:50%; background:var(--linea); display:block} .panelMkt .cuerpoPanel{display:grid; grid-template-columns:132px 1fr; min-height:286px} @media (max-width:560px){.panelMkt .cuerpoPanel{grid-template-columns:1fr}} .panelMkt .lateral{padding:14px 12px; border-right:1px solid var(--linea); background:var(--mkt-suave); display:grid; gap:4px; align-content:start} @media (max-width:560px){.panelMkt .lateral{display:none}} .panelMkt .lateral .it{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; font-size:11.5px; color:var(--ink-2)} .panelMkt .lateral .it svg{width:14px; height:14px; color:var(--mkt-2)} .panelMkt .lateral .it.aqui{background:#fff; color:var(--mkt-2); font-weight:600; box-shadow:0 6px 14px -10px rgba(28,16,60,.6)} .panelMkt .tablero{padding:16px} .panelMkt .tablero h4{margin:0 0 12px; font-family:var(--titulo); font-size:15px; font-weight:700; color:var(--noche)} .panelMkt .fichas{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px} @media (max-width:620px){.panelMkt .fichas{grid-template-columns:1fr}} .panelMkt .ficha{padding:11px; border-radius:11px; border:1px solid var(--linea)} .panelMkt .ficha .t{font-size:10.5px; color:var(--ink-2); display:block} .panelMkt .ficha .e{font-size:9.5px; color:var(--mkt-2); display:block; margin-bottom:6px} .panelMkt .ficha .v{font-family:var(--titulo); font-weight:700; font-size:19px; color:var(--noche); font-variant-numeric:tabular-nums} .panelMkt .ficha .d{font-size:10px; color:var(--ok,#0c6b4f); margin-left:6px} .panelMkt .grafico{border:1px solid var(--linea); border-radius:11px; padding:11px} .panelMkt .grafico .t{font-size:10.5px; color:var(--ink-2); display:block; margin-bottom:6px} .panelMkt svg.linea{display:block; width:100%; height:74px} .panelMkt figcaption{font-size:11.5px; color:var(--ink-3); margin-top:10px} /* ---- el cierre azul noche ---- */ .cierreMkt{ position:relative; overflow:hidden; border-radius:26px; padding:46px 48px; color:#fff; display:grid; grid-template-columns:1.25fr .75fr; gap:30px; align-items:center; background: radial-gradient(620px 360px at 86% 20%, rgba(116,81,232,.5), transparent 64%), radial-gradient(520px 320px at 96% 88%, rgba(199,178,243,.3), transparent 66%), linear-gradient(120deg, var(--noche), #1d3c5c 72%, #2b4a6b); box-shadow:0 30px 70px -36px rgba(20,43,56,.9); } @media (max-width:900px){.cierreMkt{grid-template-columns:1fr; padding:34px 26px}} .cierreMkt .ojo{color:rgba(255,255,255,.72)} .cierreMkt h2{color:#fff; margin:10px 0 12px} .cierreMkt h2 span{color:var(--mkt-lav)} .cierreMkt p{margin:0 0 22px; color:rgba(255,255,255,.86); font-size:15.5px; max-width:48ch} .cierreMkt .btn{background:#fff; color:var(--mkt-2); border:0} .cierreMkt .avisoMkt{background:rgba(255,255,255,.96)} /* Dos columnas simples: la foto a la izquierda y el texto a la derecha. Existe porque el bloque de beneficios de Marketing lo necesita y meter una `.envoltura` adentro de otra rompe los anchos. */ .dosCol{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:center} @media (max-width:1000px){.dosCol{grid-template-columns:1fr; gap:28px}} /* ============================================================================ LAS FOTOGRAFIAS — pedido de Vicky del 16/10 ============================================================================ «Agregale las imagenes, a todas las paginas. Sin las imagenes es igual que antes.» Hasta esa hora las fotos eran huecos rotulados, porque los tres documentos piden imagenes con licencia como recurso aparte y lo unico que llego son recortes del mockup. Lo que se hizo para que no fuera pegar el recorte crudo: de cada referencia —que son de 1024 px— se extrajo **solo la region fotografica**, sin el texto ni los botones que venian adentro del recorte, y se subio al doble para que no se vea blanda en una pantalla fina. ⚠️ NO SON FOTOS CON LICENCIA PROPIA: son las imagenes generadas del mockup. ⚠️ Y NO VAN A LLEGAR OTRAS. Martin lo cerro el 16/10: «no vamos a hacer eso, solo pone las que te paso Vicky». O sea que estas NO son provisionales: son las definitivas, salvo que alguien decida lo contrario mas adelante. El comentario de arriba explica de donde salen; esta linea existe para que nadie vuelva a abrir la discusion ni deje huecos esperando un reemplazo. El tamano y el recorte los decide el CSS con `object-fit`, asi que si algun dia se cambia de idea alcanza con reemplazar los archivos. ============================================================================ */ /* La del hero de Salud, al lado del telefono. Ocupa el mismo lugar que ocupaba el hueco, asi que la composicion no se mueve. */ .fotoHero{ position:relative; margin-left:-56px; align-self:stretch; min-height:330px; border-radius:26px; overflow:hidden; box-shadow:var(--sombra-alta); } .fotoHero img{width:100%; height:100%; object-fit:cover; object-position:62% 16%; display:block} @media (max-width:980px){ .fotoHero{margin:-30px 0 0; width:100%; min-height:220px; max-height:260px} } /* La del testimonio de Salud: llena su columna. */ .editorial .foto img{width:100%; height:100%; object-fit:cover; display:block} /* La imagen comercial de Marketing. */ .fotoBloque{border-radius:var(--radius-card); overflow:hidden; min-height:330px; box-shadow:var(--sombra-alta)} .fotoBloque img{width:100%; height:100%; min-height:330px; object-fit:cover; display:block} @media (max-width:1000px){.fotoBloque,.fotoBloque img{min-height:240px}} /* La del hero de Marketing va DETRAS del telefono, como en la referencia: el telefono se apoya sobre la foto y el aire de la derecha queda para los avisos. Por eso la escena pasa a tener su propio apilado. */ .escenaMkt{position:relative} /* ⚠️ `left` NEGATIVO, y esta medido. En la referencia la mujer esta DETRAS y a la IZQUIERDA del telefono, que le tapa medio cuerpo. Puesta adentro de la escena —que son 496 px para telefono y avisos— no entra: la primera version la dejo asomando por la derecha, con la cara partida por el marco. Corrida 86 px hacia afuera cae en el hueco entre las dos columnas del hero, donde el parrafo ya termino, y el telefono le apoya encima como en el mockup. */ .fotoMktHero{ position:absolute; left:-124px; top:50%; transform:translateY(-50%); width:226px; height:310px; border-radius:22px; overflow:hidden; z-index:0; box-shadow:0 30px 60px -34px rgba(28,16,60,.6); } .fotoMktHero img{width:100%; height:100%; object-fit:cover; object-position:58% 32%; display:block} .escenaMkt .telMarca, .escenaMkt .avisosMkt{position:relative; z-index:1} /* En pantalla angosta el telefono se centra y la foto detras no tiene donde apoyarse: pasa a ser una banda arriba, que es lo que hace la referencia en movil. */ @media (max-width:980px){ .fotoMktHero{position:static; transform:none; width:100%; max-width:320px; height:190px; margin:0 auto} } /* Las tres tarjetas de la Home: la foto ocupa la franja derecha, como en la referencia. Se recorta con `object-fit` y no con el archivo, asi la misma imagen sirve para cualquier alto de tarjeta. */ .sol{position:relative; overflow:hidden} .fotoSol{ position:absolute; right:0; top:0; bottom:0; width:33%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%); mask-image:linear-gradient(90deg, transparent, #000 22%); } .fotoSol img{width:100%; height:100%; object-fit:cover; display:block} /* El texto no puede quedar debajo de la foto. */ .sol .lockup, .sol > p, .sol ul{position:relative; z-index:1; padding-right:34%} @media (max-width:1000px){ .fotoSol{width:30%} .sol .lockup, .sol > p, .sol ul{padding-right:32%} } @media (max-width:520px){ .fotoSol{display:none} .sol .lockup, .sol > p, .sol ul{padding-right:0} } /* ============================================================================ EUDOVA ATENCION Y SERVICIOS — referencia aprobada del 16/10/2026 ============================================================================ Misma arquitectura que Marketing —hero con telefono y avisos, seis funcionalidades, beneficios en dos por dos, recorrido de cinco pasos, panel y cierre— en azul oscuro. Por eso reusa sus componentes y aca solo viven los colores y lo poco que cambia. La paleta del documento se usa tal cual: medida, pasa AA con margen. Primario #103C80 da 10,61:1 sobre blanco, el acento #2A62B6 da 5,96 y hasta el gris azulado #536E93 llega a 5,22. No hay ningun color que haya que sustituir, que es la primera vez en las cuatro paginas. ⚠️ El documento pide expresamente EVITAR el verde y el turquesa en esta vertical, asi que no se hereda nada de la paleta institucional celeste. ============================================================================ */ body.ate{ --mkt-1:#103C80; --mkt-2:#0B254A; --mkt-lav:#8FB2E4; --mkt-suave:#EFF4FA; --noche:#0B254A; --cel-2:#103C80; --cel-3:#0B254A; --cel-4:#0B254A; --cel-1:#8FB2E4; --bg-2:#EFF4FA; --acento:#103C80; --ate-acento:#2A62B6; } /* El hero de esta vertical es claro y frio, sin la nube violeta de Marketing. */ body.ate .heroMkt::before{ background: radial-gradient(44% 42% at 62% 34%, rgba(16,60,128,.18), transparent 68%), radial-gradient(52% 48% at 78% 72%, rgba(143,178,228,.42), transparent 70%); } /* El enfasis del titulo: el acento del documento, no el primario, que al lado del azul del texto casi no se distingue. */ body.ate .heroMkt h1 em, body.ate .mktCab h2 em{color:var(--ate-acento)} /* Las tarjetas de promocion de Marketing aca son filas de servicio: mismo componente, sin el bloque de arte ni el precio. */ .telMarca .pregunta{font-size:12px; font-weight:600; color:var(--noche); padding:2px 2px 4px} .servicio{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:11px; background:var(--mkt-suave); border:1px solid var(--linea); opacity:0; transform:translateY(10px); } .servicio.visto{opacity:1; transform:none; transition:opacity .5s var(--curva), transform .5s var(--curva)} .servicio .ic{width:24px; height:24px; border-radius:7px; flex:none; display:grid; place-items:center; color:var(--mkt-1); background:#fff; border:1px solid var(--linea)} .servicio .ic svg{width:13px; height:13px} .servicio b{font-size:11.4px; font-weight:500; color:var(--noche)} /* La tarjeta de turno confirmado que se apoya sobre la foto de beneficios. */ .fotoBloque{position:relative} .tarjetaTurno{ position:absolute; right:-26px; top:50%; transform:translateY(-50%); width:216px; padding:14px; border-radius:16px; background:#fff; border:1px solid var(--linea); box-shadow:0 26px 54px -30px rgba(11,37,74,.65); display:grid; gap:9px; } @media (max-width:1000px){ .tarjetaTurno{position:static; transform:none; width:auto; margin:14px auto 0} } .tarjetaTurno .ok{display:flex; align-items:center; gap:8px; font-size:12.6px; font-weight:700; color:var(--noche)} .tarjetaTurno .ok svg{width:18px; height:18px; color:var(--mkt-1); flex:none} .tarjetaTurno .cuando{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:11px; background:var(--mkt-suave)} .tarjetaTurno .cuando svg{width:17px; height:17px; color:var(--mkt-1); flex:none} .tarjetaTurno .cuando b{display:block; font-size:11.6px; color:var(--noche)} .tarjetaTurno .cuando span{display:block; font-size:10.6px; color:var(--ink-2)} .tarjetaTurno .ver{text-align:center; font-size:11px; font-weight:600; padding:7px; border-radius:9px; background:var(--mkt-suave); color:var(--mkt-1)} .tarjetaTurno .fila{display:flex; align-items:center; gap:9px; font-size:11px; color:var(--ink-2)} .tarjetaTurno .fila svg{width:16px; height:16px; color:var(--mkt-1); flex:none} .tarjetaTurno .fila b{display:block; font-size:11.2px; color:var(--noche)} /* El cierre lleva foto a la derecha, no solo el aviso. */ .cierreMkt .fotoCierre{position:absolute; right:0; top:0; bottom:0; width:38%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 42%); mask-image:linear-gradient(90deg, transparent, #000 42%)} .cierreMkt .fotoCierre img{width:100%; height:100%; object-fit:cover; display:block} @media (max-width:900px){.cierreMkt .fotoCierre{display:none}} /* ⚠️ EL PARRAFO DEL HERO NO PUEDE LLEGAR HASTA DONDE EMPIEZA LA FOTO. La foto del hero se corre 124 px hacia afuera de su columna, al hueco entre las dos, y con un parrafo largo —el de Atencion y Servicios tiene dos renglones mas que el de Marketing— las ultimas palabras quedaban POR DEBAJO de la foto: «en un so… lugar», «con la identi…». Medido: la foto arranca en x=608 y la columna de texto en 92, asi que el parrafo tiene 480 px para vivir. */ body.mkt .heroMkt .bajada{max-width:480px} /* El texto y el aviso del cierre, por encima de la foto: la foto es absoluta y si no, le pasa por arriba al aviso. */ .cierreMkt > div:not(.fotoCierre), .cierreMkt > .avisoMkt{position:relative; z-index:1} /* ---- dos arreglos de telefono, los dos los vio Martin el 16/10 ---- 1) EL HUECO ABAJO DE LA PANTALLA. `.promos` lleva tambien la clase `.accesos`, que es lo que el JavaScript busca para ir revelando las tarjetas una por una. Pero `.accesos` trae `min-height:330px`, que es la medida del telefono de Salud: con tres promociones sobraba casi un tercio de pantalla en blanco. Se anula aca, no alla, porque en Salud ese minimo esta bien. 2) LA FOTO DEL HERO EN EL TELEFONO. En escritorio es una caja angosta y alta detras del celular; en pantalla chica pasaba a una banda ancha y baja, y `object-fit:cover` sobre un recorte ya cerrado dejaba un primerisimo plano de media cara. Se mantiene vertical y centrada. */ .telMarca .promos.accesos{min-height:0} @media (max-width:980px){ .fotoMktHero{width:200px; height:264px; border-radius:20px} } /* ⚠️ CUATRO FICHAS NO ENTRAN EN UN TELEFONO. Estaba escrito a mano en la pagina, con un `style` de cuatro columnas fijas, y en 375 px el panel empujaba la pagina a 447: scroll horizontal, que es lo unico que el documento marca como inaceptable en movil. Dos y dos abajo de 760, una sola abajo de 440. */ .panelMkt .fichas.cuatro{grid-template-columns:repeat(4,1fr)} @media (max-width:760px){.panelMkt .fichas.cuatro{grid-template-columns:repeat(2,1fr)}} @media (max-width:440px){.panelMkt .fichas.cuatro{grid-template-columns:1fr}}