/* Paleta de Somatryx — generada desde web/site.config.mjs. No editar a mano. */ :root{--primary:#0d7a84; --primary-ink:#0a5f68; --accent:#5b8f14; --on-primary:#ffffff;} @media (prefers-color-scheme:dark){:root{--primary:#3fd0dc; --primary-ink:#6fe0ea; --accent:#a5ed45; --on-primary:#04191b;}} /* Fuentes de la marca — generadas desde web/site.config.mjs. No editar a mano. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/newsreader-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/newsreader-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/newsreader-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/newsreader-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} :root{--sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--display:'Newsreader','Iowan Old Style',Georgia,serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} /* ==================================================================== Sistema de diseño del sitio público -------------------------------------------------------------------- Un solo archivo para las diez páginas y los dos idiomas. Los colores de marca los inyecta el generador encima de este fichero (bloque `:root` con --primary y compañía), así que el mismo CSS sirve para Fitorex, Medorax y Somatryx y los tres se ven como del mismo estudio sin ser el mismo sitio. Todo se adapta al tema del visitante con `prefers-color-scheme`. No hay interruptor de tema a propósito: un sitio de producto que pelea con la preferencia del sistema molesta más de lo que aporta, y añadir uno obligaría a meter JavaScript y un parpadeo de tema en la primera carga. ==================================================================== */ /* ---------- tokens ---------- */ :root{ /* Tipografía: --sans, --display y --mono los inyecta el generador delante de este archivo, junto con sus @font-face, porque la familia cambia con la marca (ver web/fonts.mjs). Aquí solo se usan. */ /* Neutros y superficies. La marca (--primary, --accent, --on-primary) la inyecta el generador justo encima de este bloque. */ --bg:#f6f8f4; --surface:#ffffff; --surface-2:#eef2ea; --surface-3:#e3ebdb; --ink:#0d1508; --text:#414d3a; --muted:#6b7a63; --border:#dde4d6; --tint:color-mix(in srgb, var(--primary) 12%, transparent); --tint-2:color-mix(in srgb, var(--primary) 6%, transparent); --radius:20px; --radius-sm:13px; --radius-xs:9px; --shadow-sm:0 1px 2px rgba(13,21,8,.05); --shadow:0 1px 2px rgba(13,21,8,.05), 0 14px 34px -16px rgba(13,21,8,.20); --shadow-lg:0 2px 5px rgba(13,21,8,.06), 0 32px 66px -26px rgba(13,21,8,.30); --wrap:1140px; --wrap-text:720px; /* Escala tipográfica fluida: un solo juego de tamaños que crece con la ventana en vez de tres saltos bruscos en tres media queries. */ --t-hero:clamp(2.15rem,1.35rem + 3.6vw,4.2rem); --t-h2:clamp(1.6rem,1.25rem + 1.5vw,2.4rem); --t-h3:clamp(1.12rem,1.05rem + .35vw,1.35rem); --t-lede:clamp(1.06rem,1rem + .5vw,1.3rem); --t-body:1.0325rem; --t-sm:.925rem; --t-xs:.83rem; } @media (prefers-color-scheme:dark){ :root{ --bg:#080c06; --surface:#111a0e; --surface-2:#16210f; --surface-3:#1d2a15; --ink:#ecf5e4; --text:#adbba4; --muted:#82907a; --border:#26331d; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 44px -20px rgba(0,0,0,.85); --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 36px 76px -30px rgba(0,0,0,.95); } } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px} body{ margin:0; background:var(--bg); color:var(--text); font:400 var(--t-body)/1.68 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{max-width:100%; height:auto; display:block} a{color:var(--primary-ink); text-underline-offset:3px; text-decoration-thickness:1.5px} a:hover{text-decoration:underline} h1,h2,h3,h4{color:var(--ink); line-height:1.14; letter-spacing:-.022em; margin:0; text-wrap:balance} h1{font-size:var(--t-hero); font-weight:800; letter-spacing:-.033em} h2{font-size:var(--t-h2); font-weight:800; letter-spacing:-.027em} h3{font-size:var(--t-h3); font-weight:700} h4{font-size:1.0325rem; font-weight:700} p{margin:0 0 1em; text-wrap:pretty} p:last-child{margin-bottom:0} strong,b{color:var(--ink); font-weight:640} em{font-style:italic} small{font-size:var(--t-xs)} code{font:500 .88em/1 var(--mono); background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:.15em .42em} hr{border:none; border-top:1px solid var(--border); margin:36px 0} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px} .wrap-text{max-width:var(--wrap-text); margin:0 auto} .lede{font-size:var(--t-lede); line-height:1.58; color:var(--text)} .muted{color:var(--muted)} .center{text-align:center} .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} .skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--primary); color:var(--on-primary); padding:12px 18px; border-radius:0 0 10px 0; font-weight:650} .skip:focus{left:0} :focus-visible{outline:2.5px solid var(--primary); outline-offset:3px; border-radius:5px} /* ---------- iconos ---------- */ .ic{width:24px; height:24px; flex:none} .ic-sm{width:18px; height:18px} /* Cuadro tintado del icono en las tarjetas: da peso visual sin recurrir al color plano. */ .ic-box{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px; background:var(--tint); color:var(--primary-ink); border:1px solid color-mix(in srgb, var(--primary) 22%, transparent); } /* ---------- cabecera ---------- */ .site-head{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s ease; } /* La línea inferior solo aparece cuando la página está desplazada: con la página arriba del todo, una raya bajo la cabecera parte el diseño sin motivo. */ @supports (animation-timeline:scroll()){ .site-head{animation:head-line linear both; animation-timeline:scroll(); animation-range:0 120px} @keyframes head-line{to{border-bottom-color:var(--border)}} } @supports not (animation-timeline:scroll()){ .site-head{border-bottom-color:var(--border)} } .head-inner{display:flex; align-items:center; gap:16px; min-height:66px} .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.075rem; color:var(--ink); text-decoration:none; flex:none; letter-spacing:-.02em} .brand img{border-radius:10px} .brand:hover{text-decoration:none} /* ---------- marca dibujada con máscara ---------- Para las marcas que tienen un wordmark propio (una tipografía que el sitio no lleva), el logo se pinta con `mask-image` + `currentColor` en vez de con un . El motivo es el tema: el logo original es tinta negra sobre papel blanco. Como habría que mantener dos archivos —uno oscuro y otro claro— y acertar con el `prefers- color-scheme` en los dos. Con máscara, el PNG solo aporta la FORMA y el color lo pone el texto de al lado, así que la marca sigue al tema sola y siempre contrasta. Los archivos llevan alfa (fondo transparente), que es justo lo que necesita la máscara. Solo los usa el sitio que declare estas clases en su cabecera; los demás no piden nada. */ .brand-mark,.brand-word{ display:block; background:currentColor; flex:none; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; } /* Proporciones tomadas del original: monograma 247×376, wordmark 1044×61. */ .brand-mark{ width:19px; height:29px; -webkit-mask-image:url('/assets/logo-mark.png'); mask-image:url('/assets/logo-mark.png'); } .brand-word{ width:188px; height:11px; margin-top:2px; -webkit-mask-image:url('/assets/logo-word.png'); mask-image:url('/assets/logo-word.png'); } .brand-lock{gap:13px} @media (max-width:420px){ .brand-mark{width:16px; height:24px} .brand-word{width:145px; height:8.5px} } /* El pie da más aire: ahí la marca es el cierre, no un elemento de navegación. */ .foot-brand .brand-mark{width:23px; height:35px} .foot-brand .brand-word{width:210px; height:12.3px} .site-nav{margin-left:auto; display:flex; align-items:center; gap:2px} .site-nav a{ color:var(--text); text-decoration:none; font-size:.9rem; font-weight:530; padding:8px 12px; border-radius:10px; transition:color .14s ease, background .14s ease; white-space:nowrap; } .site-nav a:hover{color:var(--ink); background:var(--surface-2); text-decoration:none} .site-nav a[aria-current="page"]{color:var(--primary-ink); background:var(--tint)} .nav-lang{ margin-left:8px; font-weight:700!important; font-size:.78rem!important; letter-spacing:.05em; border:1px solid var(--border); color:var(--muted)!important; padding:6px 10px!important; } .nav-login{color:var(--ink)!important; font-weight:620!important} .nav-cta{ background:var(--primary)!important; color:var(--on-primary)!important; margin-left:6px; font-weight:660!important; padding:9px 16px!important; box-shadow:0 8px 20px -10px var(--primary); } .nav-cta:hover{background:var(--primary)!important; filter:brightness(1.05)} .navtoggle{position:absolute; opacity:0; pointer-events:none} .burger{display:none; margin-left:auto; padding:10px; cursor:pointer; border-radius:10px} .burger:hover{background:var(--surface-2)} .burger span{display:block; width:21px; height:2px; background:var(--ink); border-radius:2px} .burger span+span{margin-top:5px} @media (max-width:940px){ .burger{display:block} .site-nav{ position:absolute; left:0; right:0; top:100%; margin:0; flex-direction:column; align-items:stretch; gap:2px; padding:10px 16px 18px; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:var(--shadow); display:none; } .navtoggle:checked ~ .site-nav{display:flex} .site-nav a{padding:13px 14px; font-size:1rem} .nav-lang{align-self:flex-start; margin:6px 0 0} .nav-cta,.nav-login{margin:6px 0 0; text-align:center} } /* ---------- secciones ---------- */ section{padding:clamp(52px,7vw,96px) 0; position:relative} section.tight{padding:clamp(30px,4vw,54px) 0} .alt{background:var(--surface-2); border-block:1px solid var(--border)} .section-head{max-width:680px; margin:0 auto clamp(30px,4vw,50px); text-align:center} .section-head h2{margin-bottom:14px} .section-head p{color:var(--muted); font-size:1.075rem; margin:0} .eyebrow{ display:inline-block; font-family:var(--display); font-size:.86rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-ink); margin-bottom:14px; } /* ---------- portada ---------- */ /* El fondo son dos manchas de color muy diluidas, no una imagen: pesa cero, escala a cualquier pantalla y en modo oscuro se apaga sola porque sale de --primary. */ .hero{ padding:clamp(56px,7vw,104px) 0 clamp(30px,4vw,50px); text-align:center; position:relative; isolation:isolate; } .hero::before{ content:""; position:absolute; inset:-30% -10% 0; z-index:-1; pointer-events:none; background: radial-gradient(58% 46% at 22% 8%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%), radial-gradient(50% 42% at 82% 0%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 68%); } /* Monograma grande de la portada. Mismo mecanismo de máscara que la cabecera, así que sigue al tema. Se atenúa un poco: compite con el titular si va a pleno contraste. */ .hero-mark{ display:block; margin:0 auto 26px; width:clamp(48px,5vw,66px); height:clamp(73px,7.6vw,100px); background:currentColor; color:var(--primary-ink); opacity:.92; -webkit-mask-image:url('/assets/logo-mark.png'); mask-image:url('/assets/logo-mark.png'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; } .hero h1{margin-bottom:20px; max-width:16ch; margin-inline:auto} .hero .grad{background:linear-gradient(102deg,var(--primary-ink),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent} .hero .lede{max-width:660px; margin:0 auto 32px} .hero-note{font-size:var(--t-sm); color:var(--muted); margin:16px 0 0} .hero-page{padding:clamp(46px,5.5vw,76px) 0 clamp(20px,3vw,34px); text-align:center; position:relative; isolation:isolate} .hero-page::before{ content:""; position:absolute; inset:-40% 0 40%; z-index:-1; pointer-events:none; background:radial-gradient(48% 60% at 50% 0%, var(--tint), transparent 72%); } .hero-page h1{margin-bottom:16px} .hero-page .lede{max-width:700px; margin:0 auto} /* Sello de confianza bajo los botones de la portada. */ .trustbar{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; list-style:none; margin:30px 0 0; padding:0; } .trustbar li{display:flex; align-items:center; gap:8px; font-size:var(--t-sm); color:var(--muted)} .trustbar .ic{width:19px; height:19px; color:var(--primary-ink)} /* ---------- botones ---------- */ .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; font-weight:650; font-size:.96rem; padding:14px 24px; border-radius:14px; line-height:1.2; border:1.5px solid transparent; cursor:pointer; transition:transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, filter .14s ease; } .btn .ic{width:19px; height:19px} .btn:hover{text-decoration:none; transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--primary); color:var(--on-primary); box-shadow:0 12px 28px -12px var(--primary)} .btn-primary:hover{filter:brightness(1.05); box-shadow:0 16px 34px -12px var(--primary)} .btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border); box-shadow:var(--shadow-sm)} .btn-ghost:hover{box-shadow:var(--shadow)} .btn-sm{padding:10px 18px; font-size:.9rem; border-radius:11px} .btn-block{width:100%} /* ---------- cifras ---------- */ .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:0; padding:0; list-style:none} .stats li{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 16px; text-align:center; box-shadow:var(--shadow-sm); } /* Las cifras en Oswald: es la firma atlética que comparte con la app, y una condensada deja respirar a un número de cuatro dígitos que en Inter 800 se saldría de la tarjeta. */ .stats b{ display:block; color:var(--ink); font-size:clamp(1.85rem,1.35rem + 1.4vw,2.5rem); font-family:var(--display); font-weight:600; letter-spacing:.005em; line-height:1.02; font-variant-numeric:tabular-nums; } .stats span{display:block; font-size:var(--t-xs); color:var(--muted); margin-top:6px; line-height:1.45} /* ---------- capturas con marco de teléfono ---------- */ .shots{ display:flex; gap:22px; overflow-x:auto; padding:10px 4px 16px; scroll-snap-type:x mandatory; scrollbar-width:thin; scroll-padding-inline:22px; } .shots figure{margin:0; flex:0 0 auto; width:238px; scroll-snap-align:center} .shots figcaption{font-size:var(--t-xs); color:var(--muted); text-align:center; margin-top:14px; line-height:1.5} /* Marco de teléfono en CSS: un borde grueso muy redondeado. Sin imagen de móvil que pesar ni que se vea borrosa en pantallas densas. */ .phone{ border:7px solid color-mix(in srgb, var(--ink) 86%, transparent); border-radius:34px; padding:0; overflow:hidden; background:var(--ink); box-shadow:var(--shadow-lg); position:relative; } .phone img{border-radius:27px; display:block} .phone::after{ content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:34%; height:4px; border-radius:99px; background:color-mix(in srgb, var(--bg) 34%, transparent); } /* ---------- rejillas de tarjetas ---------- */ /* `.grid` es para conjuntos de 3 o 6: `auto-fit` los reparte en 3 columnas y salen filas llenas. Para conjuntos de 4 usa `.grid-2`, que fuerza 2×2: con `auto-fit` saldrían 3+1 y la tarjeta huérfana canta. */ .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(282px,1fr)); gap:18px} .grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px} @media (max-width:760px){ .grid-2{grid-template-columns:1fr} } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); position:relative; transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, border-color .16s ease; } .card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--primary) 32%, var(--border))} .card h3{margin-bottom:9px} .card p{font-size:var(--t-sm); margin-bottom:.8em} .card ul{margin:12px 0 0; padding-left:19px; font-size:var(--t-sm)} .card li{margin-bottom:7px} .card li::marker{color:var(--primary)} .card-note{font-size:var(--t-xs)!important; color:var(--muted); margin-top:12px!important; font-style:italic} .card-link{margin-top:16px!important; font-size:var(--t-sm)!important} .card-link a{display:inline-flex; align-items:center; gap:6px; font-weight:620; text-decoration:none} .card-link a:hover{text-decoration:underline} .card-link .ic{width:16px; height:16px; transition:transform .16s ease} .card-link a:hover .ic{transform:translateX(3px)} /* ---------- lista de verificación ---------- */ .checks{list-style:none; margin:0; padding:0; display:grid; gap:10px} .checks li{display:flex; gap:10px; align-items:flex-start; font-size:var(--t-sm)} .checks .ic{color:var(--primary-ink); margin-top:3px} /* ---------- bloques alternos texto + captura ---------- */ .split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,68px); align-items:center} .split + .split{margin-top:clamp(54px,7vw,92px)} .split .media{display:flex; justify-content:center} .split .phone{max-width:262px} .split .txt h3{font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem); margin-bottom:14px; letter-spacing:-.025em} .split .txt ul{margin:18px 0 0; padding-left:20px} .split .txt li{margin-bottom:10px} .split .txt li::marker{color:var(--primary)} @media (max-width:820px){ .split{grid-template-columns:1fr; gap:28px} .split.rev .media{order:-1} } /* ---------- pasos numerados ---------- */ .steps{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .steps li{ counter-increment:s; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 26px 26px 26px; position:relative; box-shadow:var(--shadow-sm); } .steps li::before{ content:counter(s); display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--tint); color:var(--primary-ink); font-weight:800; font-size:.95rem; margin-bottom:15px; } .steps h3{margin-bottom:7px} .steps p{font-size:var(--t-sm); margin:0} /* ---------- tablas ---------- */ .table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm)} table{border-collapse:collapse; width:100%; min-width:540px; font-size:var(--t-sm)} caption{text-align:left; padding:16px 20px 0; color:var(--muted); font-size:var(--t-xs)} th,td{text-align:left; padding:14px 20px; border-bottom:1px solid var(--border); vertical-align:top} thead th{background:var(--surface-2); color:var(--ink); font-weight:700; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap} tbody th{color:var(--ink); font-weight:650} tr:last-child th,tr:last-child td{border-bottom:none} td .yes{color:var(--primary-ink); font-weight:700} td .no{color:var(--muted)} /* ---------- avisos ---------- */ .callout{ display:flex; gap:14px; align-items:flex-start; border:1px solid var(--border); border-left:3px solid var(--primary); background:var(--surface); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px 24px; font-size:var(--t-sm); box-shadow:var(--shadow-sm); } .callout .ic{color:var(--primary-ink); margin-top:2px} .callout.warn{border-left-color:#d98324} .callout.warn .ic{color:#d98324} .callout h3{font-size:1rem; margin-bottom:7px} .callout p:last-child{margin-bottom:0} /* ---------- plataformas ---------- */ .plats{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px} .plat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); display:block; transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, border-color .16s ease; } a.plat:hover{transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none; border-color:color-mix(in srgb, var(--primary) 32%, var(--border))} .plat .ic{color:var(--primary-ink); margin-bottom:14px; width:26px; height:26px} .plat b{display:block; color:var(--ink); font-size:1.03rem; margin-bottom:5px} .plat span{font-size:var(--t-sm); color:var(--muted); display:block; line-height:1.5} .plat[aria-disabled="true"]{opacity:.62} .badge{ display:inline-block; font-size:.7rem; font-weight:720; letter-spacing:.05em; text-transform:uppercase; background:var(--surface-3); color:var(--primary-ink); border-radius:99px; padding:4px 10px; margin-top:11px; } /* ---------- planes de precio ---------- */ .plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px; align-items:start} .plan{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm); position:relative; } .plan.featured{border-color:var(--primary); box-shadow:var(--shadow); border-width:1.5px} .plan-tag{ position:absolute; top:-12px; left:28px; background:var(--primary); color:var(--on-primary); font-size:.72rem; font-weight:740; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:99px; } .plan h3{margin-bottom:12px} .plan-price{display:flex; align-items:baseline; gap:7px; margin-bottom:10px!important} .plan-price b{font-size:2.1rem; font-weight:800; letter-spacing:-.035em; color:var(--ink); line-height:1} .plan-price span{font-size:var(--t-sm); color:var(--muted)} .plan-blurb{font-size:var(--t-sm); color:var(--muted); margin-bottom:20px!important} .plan .checks{margin-bottom:22px} .plan-cta{margin:0!important} /* ---------- preguntas frecuentes ---------- */ .faq{max-width:820px; margin:0 auto} .faq details{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:11px; box-shadow:var(--shadow-sm); overflow:hidden; } .faq details[open]{border-color:color-mix(in srgb, var(--primary) 30%, var(--border))} .faq summary{ cursor:pointer; padding:19px 22px; font-weight:640; color:var(--ink); font-size:1.02rem; list-style:none; display:flex; align-items:flex-start; gap:13px; } .faq summary::-webkit-details-marker{display:none} .faq summary::before{ content:""; flex:none; width:11px; height:11px; margin-top:7px; background:currentColor; color:var(--primary-ink); clip-path:polygon(46% 0,54% 0,54% 46%,100% 46%,100% 54%,54% 54%,54% 100%,46% 100%,46% 54%,0 54%,0 46%,46% 46%); transition:transform .18s ease; } .faq details[open] summary::before{transform:rotate(45deg)} .faq summary:hover{background:var(--surface-2)} .faq .answer{padding:2px 22px 22px 46px; font-size:var(--t-sm)} .faq .answer ul{padding-left:19px; margin:10px 0 0} .faq .answer li{margin-bottom:7px} @media (max-width:540px){ .faq .answer{padding-left:22px} } /* ---------- novedades ---------- */ .log{max-width:800px; margin:0 auto} .log article{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 28px; margin-bottom:16px; box-shadow:var(--shadow-sm); } .log h3{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px} .log time{font-size:var(--t-xs); color:var(--muted); font-weight:500} .log ul{margin:0; padding-left:19px; font-size:var(--t-sm)} .log li{margin-bottom:8px} .log li::marker{color:var(--primary)} /* ---------- cierre ---------- */ .closer .lede{max-width:600px; margin:14px auto 28px} /* ---------- pie ---------- */ footer{border-top:1px solid var(--border); background:var(--surface-2); padding:clamp(44px,5vw,64px) 0 36px} /* Marca + cinco columnas de enlaces. `minmax(0,1fr)` y no `1fr` a secas: sin el mínimo en cero, una etiqueta larga («Recuperación y wearables») ensancha su columna y descuadra las otras cuatro. */ .foot-grid{display:grid; grid-template-columns:1.3fr repeat(5,minmax(0,1fr)); gap:30px} @media (max-width:1080px){ .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px} .foot-brand{grid-column:1/-1} } @media (max-width:700px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:460px){ .foot-grid{grid-template-columns:1fr} } .foot-brand p{font-size:var(--t-sm); color:var(--muted); margin:14px 0 0; max-width:280px} footer h2{font-size:.79rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:14px; font-weight:740} footer ul{list-style:none; margin:0; padding:0} footer li{margin-bottom:9px} footer li a{color:var(--text); text-decoration:none; font-size:var(--t-sm)} footer li a:hover{color:var(--primary-ink); text-decoration:underline} .foot-legal{ margin:clamp(30px,4vw,44px) 0 0; padding-top:26px; border-top:1px solid var(--border); font-size:var(--t-xs); color:var(--muted); line-height:1.65; max-width:900px; } .foot-copy{margin:14px 0 0!important; font-size:var(--t-xs); color:var(--muted)} /* ---------- páginas legales ---------- */ /* Contenido largo de una sola columna: privacidad, términos y borrado de cuenta. */ .legal{max-width:var(--wrap-text); margin:0 auto; padding:clamp(30px,4vw,48px) 0 clamp(50px,6vw,80px)} .legal h2{font-size:1.35rem; margin:44px 0 12px; scroll-margin-top:88px} .legal h3{font-size:1.08rem; margin:28px 0 10px} .legal p,.legal li{font-size:var(--t-sm)} .legal ul,.legal ol{padding-left:22px; margin:0 0 1em} .legal li{margin-bottom:7px} .legal table{min-width:0} .legal .updated{color:var(--muted); font-size:var(--t-xs); margin-bottom:8px} .legal .toc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 26px; margin:28px 0 40px; box-shadow:var(--shadow-sm); } .legal .toc h2{font-size:.79rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 12px} .legal .toc ol{margin:0; padding-left:20px; font-size:var(--t-sm); columns:2; column-gap:30px} @media (max-width:640px){ .legal .toc ol{columns:1} } .legal .toc li{margin-bottom:6px; break-inside:avoid} /* ==================================================================== Panel web (solo la página /panel — /en/dashboard) ==================================================================== */ .panel-loading{display:grid; place-items:center; gap:16px; padding:120px 20px; color:var(--muted)} .spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--primary); animation:spin .8s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .panel-app{padding:clamp(28px,4vw,44px) 22px clamp(50px,6vw,80px)} .panel-head{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; justify-content:space-between; margin-bottom:30px} .panel-head h1{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem); margin-bottom:6px} .panel-head .muted{font-size:var(--t-sm); margin:0} .panel-actions{display:flex; gap:10px; flex-wrap:wrap} .panel-empty{max-width:620px; margin:0 auto; padding:80px 22px; text-align:center} .panel-empty h1{margin-bottom:16px} .panel-empty .lede{margin-bottom:26px} /* Fila de indicadores. `auto-fit` con mínimo pequeño para que en móvil salgan de dos en dos en vez de una columna de ocho tarjetas que obliga a hacer scroll para nada. */ .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:14px; margin-bottom:26px} .kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px 20px; box-shadow:var(--shadow-sm)} .kpi-l{display:block; font-size:var(--t-xs); color:var(--muted); font-weight:600; letter-spacing:.02em} .kpi-v{display:block; font-size:clamp(1.5rem,1.2rem + .9vw,1.9rem); font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.15; margin:6px 0 3px; font-variant-numeric:tabular-nums} .kpi-s{display:block; font-size:var(--t-xs); color:var(--muted); line-height:1.4} .pgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px; margin-bottom:18px} .pcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow-sm); margin-bottom:18px; padding-block:24px} .pcard h2{font-size:1.05rem; margin-bottom:18px} .pcard-note{font-size:var(--t-xs)!important; color:var(--muted); margin:16px 0 0!important; line-height:1.55} .pcard .table-wrap{box-shadow:none} /* Gráficas SVG. Los colores salen de variables para que el tema oscuro no requiera volver a generarlas. */ .chart{width:100%; height:auto; overflow:visible} .ch-grid{stroke:var(--border); stroke-width:1} .ch-lab{fill:var(--muted); font-size:11px; font-family:inherit} .ch-line{fill:none; stroke:var(--primary); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round} .ch-area{fill:var(--tint); stroke:none} .ch-dot{fill:var(--primary); stroke:var(--surface); stroke-width:1.5} .ch-bar{fill:var(--primary)} .ch-bar.zero{fill:var(--border)} .ch-goal{stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 4} /* Veredicto de volumen frente a los rangos de referencia. Cuatro estados y cuatro colores: bajo y pasado tiran a rojo/ámbar, en rango al verde de marca. */ .vtag{ display:inline-block; font-size:var(--t-xs); font-weight:660; border-radius:99px; padding:3px 10px; border:1px solid; white-space:nowrap; } .vtag.ok{background:var(--tint); color:var(--primary-ink); border-color:color-mix(in srgb,var(--primary) 34%,transparent)} .vtag.high{background:color-mix(in srgb,#d98324 12%,transparent); color:#a4611a; border-color:color-mix(in srgb,#d98324 30%,transparent)} .vtag.low,.vtag.over{background:color-mix(in srgb,#d94a3d 12%,transparent); color:#b3372c; border-color:color-mix(in srgb,#d94a3d 30%,transparent)} @media (prefers-color-scheme:dark){ .vtag.high{color:#f0b46a} .vtag.low,.vtag.over{color:#ff9d92} } /* Ranking de barras horizontales (volumen por músculo). */ .rank{list-style:none; margin:0; padding:0; display:grid; gap:11px} .rank li{display:grid; grid-template-columns:minmax(96px,1.1fr) 3fr auto; align-items:center; gap:12px; font-size:var(--t-sm)} .rank-l{color:var(--ink); font-weight:560} .rank-t{background:var(--surface-2); border-radius:99px; height:11px; overflow:hidden} .rank-f{display:block; height:100%; background:var(--primary); border-radius:99px} .rank-v{color:var(--muted); font-variant-numeric:tabular-nums; min-width:38px; text-align:right} @media (max-width:520px){ .rank li{grid-template-columns:minmax(78px,1fr) 2fr auto; gap:8px} } /* ---------- acceso ---------- */ .login-wrap{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(28px,5vw,60px); align-items:start; max-width:940px; margin:0 auto} @media (max-width:800px){ .login-wrap{grid-template-columns:1fr} .login-side{order:-1} } .login-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow)} .login-card h2{font-size:1.25rem; margin-bottom:6px} .login-card #pGoogle{margin-top:20px} .login-card label{display:block; font-size:var(--t-xs); font-weight:660; color:var(--ink); margin:16px 0 6px} .login-card input{ width:100%; font:inherit; font-size:.95rem; padding:12px 14px; border-radius:var(--radius-xs); border:1.5px solid var(--border); background:var(--bg); color:var(--ink); } .login-card input:focus-visible{border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--tint)} .login-card #pSubmit{margin-top:22px} .login-sep{display:flex; align-items:center; gap:14px; margin:22px 0 4px; color:var(--muted); font-size:var(--t-xs)} .login-sep::before,.login-sep::after{content:""; flex:1; height:1px; background:var(--border)} .login-forgot{margin:16px 0 0!important; font-size:var(--t-xs); text-align:center} .login-foot{margin:20px 0 0!important; padding-top:18px; border-top:1px solid var(--border); font-size:var(--t-xs); color:var(--muted)} .login-side h2{font-size:1.15rem; margin-bottom:18px} .panel-msg{margin:14px 0 0!important; font-size:var(--t-sm); padding:11px 14px; border-radius:var(--radius-xs); border:1px solid} .panel-msg.err{background:color-mix(in srgb,#d94a3d 10%,transparent); border-color:color-mix(in srgb,#d94a3d 34%,transparent); color:#b3372c} .panel-msg.ok{background:var(--tint); border-color:color-mix(in srgb,var(--primary) 34%,transparent); color:var(--primary-ink)} @media (prefers-color-scheme:dark){ .panel-msg.err{color:#ff9d92} } /* ==================================================================== Biblioteca pública (ejercicios, suplementos, mitos, guías, glosario) -------------------------------------------------------------------- Estas páginas no son marketing: son el contenido de la app publicado tal cual. Por eso priorizan la lectura y el escaneo por encima del efecto — sin degradados de portada, con más densidad y con el dato siempre delante. ==================================================================== */ /* ---------- migas de pan ---------- */ .crumbs{border-bottom:1px solid var(--border); background:var(--surface-2)} .crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:11px 0; font-size:var(--t-xs); } .crumbs li{display:flex; align-items:center; gap:6px; color:var(--muted)} /* El separador lo pone el CSS y no el HTML: así no lo lee un lector de pantalla. */ .crumbs li+li::before{content:"›"; color:var(--border); font-size:1.05rem; line-height:1} .crumbs a{color:var(--muted); text-decoration:none} .crumbs a:hover{color:var(--primary-ink); text-decoration:underline} .crumbs [aria-current]{color:var(--ink); font-weight:600} /* ---------- barra de filtros de la biblioteca ---------- */ /* Sticky bajo la cabecera: con 306 tarjetas, perder el buscador al desplazarse obliga a subir del todo para cambiar un filtro. */ .lib-bar{ position:sticky; top:66px; z-index:30; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--border); padding:14px 0; } .lib-bar .wrap{display:flex; flex-wrap:wrap; gap:10px; align-items:center} .lib-search{ flex:1 1 260px; min-width:0; font:inherit; font-size:.95rem; padding:11px 14px 11px 40px; border-radius:var(--radius-xs); border:1.5px solid var(--border); background:var(--surface); color:var(--ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a63' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.6'/%3E%3Cpath d='M16 16l4.4 4.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:12px center; background-size:18px; } .lib-search:focus-visible{border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--tint)} .lib-sel{ font:inherit; font-size:.9rem; padding:11px 32px 11px 13px; border-radius:var(--radius-xs); border:1.5px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a63' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; background-size:16px; } .lib-count{font-size:var(--t-xs); color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums} /* La barra nace OCULTA y solo la enseña `.js`, que añade el propio script al arrancar. Invertido a propósito: si el script no carga, no aparece un buscador que no busca — la lista completa sigue ahí abajo, enlazada y legible, que es lo que importa. */ .lib-bar{display:none} .js .lib-bar{display:block} @media (max-width:640px){ .lib-count{margin-left:0; width:100%} } /* ---------- rejilla de fichas ---------- */ .lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:16px} .lib-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, border-color .16s ease; } .lib-card:hover{ transform:translateY(-3px); text-decoration:none; box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--primary) 34%, var(--border)); } .lib-card .thumb{background:var(--surface-2); aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden} .lib-card .thumb img{width:100%; height:100%; object-fit:cover} .lib-card .thumb.none{color:var(--border)} .lib-card .thumb.none .ic{width:44px; height:44px} .lib-card .body{padding:15px 17px 17px; display:flex; flex-direction:column; gap:7px; flex:1} .lib-card b{color:var(--ink); font-size:.97rem; font-weight:650; line-height:1.32; letter-spacing:-.012em} .lib-card .meta{font-size:var(--t-xs); color:var(--muted); line-height:1.45; margin-top:auto} .lib-hidden{display:none!important} .lib-empty{text-align:center; padding:60px 20px; color:var(--muted)} /* ---------- lista densa: colecciones de texto ---------- Variante de la rejilla para las colecciones que NO tienen miniatura: síntomas, fármacos, términos del glosario, guías. Con 1.082 fichas, una rejilla de tarjetas cuadradas obliga a recorrer tres pantallas de hueco para ver lo que en una lista cabe de un vistazo, y el espacio de la imagen que no existe se nota más que la propia tarjeta. Es el mismo `.lib-card`, así que hereda borde, sombra y `:hover`; solo cambian la forma de la rejilla y el aire interior. */ .lib-grid.rows{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:10px} .lib-grid.rows .lib-card{flex-direction:row; align-items:center} .lib-grid.rows .lib-card .body{padding:12px 16px; gap:3px} .lib-grid.rows .lib-card .meta{margin-top:0} /* Secciones dentro de un índice (las 25 categorías del glosario, las materias de las guías). El grupo entero es el que se oculta cuando el filtro deja su lista a cero: un encabezado «Cardiología» encima de ningún resultado es peor que no tener encabezado. */ .lib-sections{display:flex; flex-direction:column; gap:clamp(26px,3vw,38px)} .lib-section > h2{font-size:var(--t-h3); margin:0 0 3px; scroll-margin-top:120px} .lib-section > p{font-size:var(--t-xs); color:var(--muted); margin:0 0 13px} /* ---------- etiquetas ---------- */ .tags{display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0} .tag{ display:inline-flex; align-items:center; gap:5px; font-size:var(--t-xs); font-weight:600; background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:99px; padding:4px 11px; text-decoration:none; line-height:1.5; } a.tag:hover{border-color:var(--primary); color:var(--primary-ink); text-decoration:none} .tag.on{background:var(--tint); color:var(--primary-ink); border-color:color-mix(in srgb, var(--primary) 34%, transparent)} .tag.warn{background:color-mix(in srgb,#d98324 12%,transparent); color:#a4611a; border-color:color-mix(in srgb,#d98324 30%,transparent)} .tag.bad{background:color-mix(in srgb,#d94a3d 12%,transparent); color:#b3372c; border-color:color-mix(in srgb,#d94a3d 30%,transparent)} @media (prefers-color-scheme:dark){ .tag.warn{color:#f0b46a} .tag.bad{color:#ff9d92} } /* ---------- ficha de detalle (dos columnas) ---------- */ .detail{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:clamp(28px,4vw,52px); align-items:start; padding:clamp(30px,4vw,48px) 0 clamp(50px,6vw,80px); } @media (max-width:900px){ .detail{grid-template-columns:1fr} .detail .aside{order:-1} } .detail h1{font-size:clamp(1.75rem,1.35rem + 1.7vw,2.6rem); margin-bottom:12px} .detail .lede{margin-bottom:24px} .detail h2{font-size:1.28rem; margin:38px 0 14px} .detail h2:first-child{margin-top:0} .detail h3{font-size:1.05rem; margin:24px 0 9px} .detail p,.detail li{font-size:var(--t-sm)} .detail ol,.detail ul{padding-left:21px; margin:0 0 1em} .detail li{margin-bottom:9px} .detail li::marker{color:var(--primary)} /* Columna lateral pegajosa: la animación y los datos rápidos acompañan mientras se lee la técnica. Se despega en móvil, donde no hay dos columnas. */ .detail .aside{position:sticky; top:88px; display:grid; gap:16px} @media (max-width:900px){ .detail .aside{position:static} } /* Animación del ejercicio. Cuadrada porque así vienen las de la app. */ .exanim{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); margin:0; } .exanim img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--surface-2)} .exanim figcaption{font-size:var(--t-xs); color:var(--muted); padding:11px 15px; border-top:1px solid var(--border)} /* Sin recortar: una animación de ejercicio es cuadrada y se puede encajar, pero un ECG de 12 derivaciones o una radiografía de tórax son apaisados y `object-fit:cover` les corta justo el borde donde está el hallazgo. Aquí la imagen manda sobre la caja. */ .exanim.fit img{aspect-ratio:auto; object-fit:contain; height:auto} /* Lista de datos rápidos: etiqueta a la izquierda, valor a la derecha. */ .facts{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:8px 20px; box-shadow:var(--shadow-sm); margin:0; } .facts div{display:flex; gap:14px; justify-content:space-between; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--border)} .facts div:last-child{border-bottom:none} .facts dt{font-size:var(--t-xs); color:var(--muted); font-weight:600; flex:none} .facts dd{margin:0; font-size:var(--t-sm); color:var(--ink); font-weight:560; text-align:right} /* Cues y errores: dos listas con el mismo peso visual y signo opuesto. */ .cues,.errs{list-style:none; padding:0; margin:0; display:grid; gap:11px} .cues li,.errs li{display:flex; gap:11px; align-items:flex-start; font-size:var(--t-sm)} .cues li::before,.errs li::before{ content:""; flex:none; width:19px; height:19px; margin-top:2px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:13px; } .cues li::before{ background-color:var(--tint); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f8f06' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 6.5'/%3E%3C/svg%3E"); } .errs li::before{ background-color:color-mix(in srgb,#d94a3d 13%,transparent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); } @media (prefers-color-scheme:dark){ .cues li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5ed45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 6.5'/%3E%3C/svg%3E")} .errs li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9d92' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")} } /* ---------- veredicto de un mito ---------- */ .verdict{ display:flex; align-items:center; gap:14px; border-radius:var(--radius); padding:18px 22px; margin-bottom:26px; border:1px solid; font-weight:650; background:color-mix(in srgb,#d94a3d 9%,transparent); border-color:color-mix(in srgb,#d94a3d 28%,transparent); color:#b3372c; } .verdict b{font-family:var(--display); font-size:1.35rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:inherit} .verdict.ok{background:var(--tint); border-color:color-mix(in srgb,var(--primary) 30%,transparent); color:var(--primary-ink)} .verdict.mid{background:color-mix(in srgb,#d98324 11%,transparent); border-color:color-mix(in srgb,#d98324 30%,transparent); color:#a4611a} @media (prefers-color-scheme:dark){ .verdict{color:#ff9d92} .verdict.mid{color:#f0b46a} } /* Barra de nivel de evidencia: cinco tramos, los llenos en color de marca. */ .eviscale{display:flex; gap:4px; align-items:center} .eviscale i{width:20px; height:7px; border-radius:99px; background:var(--border)} .eviscale i.on{background:var(--primary)} /* ---------- glosario ---------- */ /* 187 términos en una sola página con anclas, y no 187 páginas de dos líneas: una definición suelta no sostiene una página propia, y Google trata un montón de páginas casi vacías como contenido de relleno. Aquí, además, se busca en todas a la vez. */ .gloss{display:grid; gap:12px} .gloss article{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:19px 22px; scroll-margin-top:150px; box-shadow:var(--shadow-sm); } .gloss h3{font-size:1.05rem; margin-bottom:7px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .gloss h3 .tag{font-weight:600} .gloss p{font-size:var(--t-sm); margin:0} .gloss .syn{font-size:var(--t-xs); color:var(--muted); margin-top:9px!important} /* Índice alfabético que salta a cada letra. */ .alpha{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:26px; justify-content:center} .alpha a{ display:grid; place-items:center; min-width:31px; height:31px; padding:0 7px; border-radius:9px; border:1px solid var(--border); background:var(--surface); font-size:var(--t-sm); font-weight:650; color:var(--text); text-decoration:none; } .alpha a:hover{border-color:var(--primary); color:var(--primary-ink); text-decoration:none} .gloss-letter{ font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--primary-ink); margin:32px 0 12px; scroll-margin-top:150px; letter-spacing:.04em; } .gloss-letter:first-child{margin-top:0} /* ---------- calculadoras ---------- */ .calc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(22px,3vw,32px); box-shadow:var(--shadow); } .calc-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:16px} .calc label{display:block; font-size:var(--t-xs); font-weight:660; color:var(--ink); margin-bottom:6px} .calc input,.calc select{ width:100%; font:inherit; font-size:.95rem; padding:11px 13px; border-radius:var(--radius-xs); border:1.5px solid var(--border); background:var(--bg); color:var(--ink); } .calc input:focus-visible,.calc select:focus-visible{border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--tint)} .calc .hint{font-size:var(--t-xs); color:var(--muted); margin:6px 0 0} /* Grupo de botones tipo radio (sexo, objetivo, actividad). */ .seg{display:flex; flex-wrap:wrap; gap:6px} .seg input{position:absolute; opacity:0; width:0; height:0} .seg label{ margin:0; cursor:pointer; font-size:var(--t-sm); font-weight:600; padding:9px 15px; border-radius:99px; border:1.5px solid var(--border); background:var(--bg); color:var(--text); transition:background .14s ease, border-color .14s ease, color .14s ease; } .seg input:checked + label{background:var(--tint); border-color:var(--primary); color:var(--primary-ink)} .seg input:focus-visible + label{outline:2.5px solid var(--primary); outline-offset:2px} .calc-out{margin-top:26px; padding-top:24px; border-top:1px solid var(--border)} .calc-res{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:13px} .calc-res div{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:17px 18px; text-align:center} .calc-res b{ display:block; font-family:var(--mono); font-size:clamp(1.4rem,1.15rem + .85vw,1.85rem); font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; } .calc-res span{display:block; font-size:var(--t-xs); color:var(--muted); margin-top:6px; line-height:1.4} .calc-res .hi{background:var(--tint); border-color:color-mix(in srgb,var(--primary) 32%,transparent)} .calc-res .hi b{color:var(--primary-ink)} /* Sin JavaScript una calculadora no calcula. Así que el formulario nace oculto y en su lugar se ve un aviso; `.js` invierte las dos cosas. Nunca se enseña un formulario muerto que parece roto. */ .calc-live{display:none} .js .calc-live{display:block} .js .calc-nojs{display:none} /* ---------- rejilla de índice de secciones ---------- */ .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:16px} .tile{ display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, border-color .16s ease; } .tile:hover{transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none; border-color:color-mix(in srgb,var(--primary) 32%,var(--border))} .tile .ic{color:var(--primary-ink); margin-bottom:13px} .tile b{display:block; color:var(--ink); font-size:1.05rem; margin-bottom:6px} .tile span{display:block; font-size:var(--t-sm); color:var(--muted); line-height:1.5} .tile .n{font-family:var(--display); font-weight:600; color:var(--primary-ink); font-size:.9rem; letter-spacing:.04em} /* ---------- índice interno de una guía ---------- */ .guide-toc{padding:20px 22px} .guide-toc h2{font-size:.79rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 12px; font-weight:740} .guide-toc ol{margin:0; padding-left:19px; font-size:var(--t-sm)} .guide-toc li{margin-bottom:8px} .guide-toc li::marker{color:var(--primary); font-variant-numeric:tabular-nums} .guide-toc a{color:var(--text); text-decoration:none} .guide-toc a:hover{color:var(--primary-ink); text-decoration:underline} /* Cada sección de una guía va separada por una línea fina: son bloques largos y sin respiro visual se leen como un muro. */ .guide-sec + .guide-sec{margin-top:34px; padding-top:32px; border-top:1px solid var(--border)} /* ---------- navegación entre fichas ---------- */ .prevnext{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:44px; padding-top:28px; border-top:1px solid var(--border)} @media (max-width:600px){ .prevnext{grid-template-columns:1fr} } .prevnext a{ display:block; padding:16px 20px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); text-decoration:none; color:inherit; } .prevnext a:hover{border-color:var(--primary); text-decoration:none} .prevnext span{display:block; font-size:var(--t-xs); color:var(--muted); margin-bottom:4px} .prevnext b{color:var(--ink); font-size:var(--t-sm); font-weight:640} .prevnext .next{text-align:right} /* ---------- aparición al entrar en pantalla ---------- */ /* Solo donde el navegador lo soporta de forma nativa (`animation-timeline`). Sin JavaScript, sin IntersectionObserver y sin el riesgo clásico de dejar contenido invisible para siempre si el script falla: si no hay soporte, no hay animación y el contenido se ve, que es lo único que importa. */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .stats li,.card,.plat,.steps li,.plan,.split,.log article{ animation:reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 42%; } @keyframes reveal{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}} } } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important} } /* ---------- impresión ---------- */ @media print{ .site-head,footer,.cta,.skip,.trustbar{display:none!important} body{background:#fff; color:#000} .card,.plan,.plat,.table-wrap{box-shadow:none; border-color:#ccc} } /* ===================================================================== UTILIDADES DE ESPACIADO Y TIPOGRAFÍA --------------------------------------------------------------------- Existen por una razón de seguridad, no de estilo. La CSP de los tres sitios lleva `style-src 'self'` SIN `'unsafe-inline'`, y esa directiva no solo bloquea `