/* PIT v2 — piel Docshield compartida (nav pill, footer gradiente, tokens navy) */ /* ---- remap de tokens: navy + blanco + radios suaves ---- */ :root:root { /* ---- escala tipográfica (misma que index.html) ---- Los 7 pasos que absorben todos los tamaños del sitio. REGLA: no agregar un font-size suelto; si hace falta un paso nuevo se agrega acá Y en la copia inline de index.html, que no carga este stylesheet. */ --txt-2xs: 11px; /* etiquetas mono en mayúsculas */ --txt-xs: 13px; /* metadatos, pies */ --txt-sm: 15px; /* texto de apoyo, botones */ --txt-md: 17px; /* texto de lectura */ --txt-lg: 21px; /* h3 secundario */ --txt-xl: 24px; /* h3 principal */ /* ---- ritmo vertical (mismo token que index.html) ---- El aire entre dos secciones es 2x este valor: ~128px en desktop, ~72px en mobile. Antes las subpáginas medían 173px fijos — consistente pero generoso — y la home iba de 12 a 229px. */ --sec-y: clamp(36px, 4.4vw, 64px); /* Se pisa SOLO la parte vertical de --pit-section-padding (ds.css la define como "vertical horizontal"). La horizontal queda igual a propósito: es la que alinea todo el contenido de las subpáginas, incluida la franja de logos de Sobre el Dr. Frusso. */ --pit-section-padding: var(--sec-y) clamp(24px, 6vw, 120px); } /* Suavizado de fuentes: en macOS el texto renderiza más pesado de lo diseñado y Space Grotesk en 600 se engorda. Va una sola vez en la raíz. */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :root:root { --v2-navy: #000B33; --v2-navy-80: #1A2447; /* Más oscuro que el #5A6773 original: es el color de todo el texto de párrafo. A 15-16px sobre blanco da 7.4:1 (AAA) contra los 5.4:1 de antes. Tiene que quedar IGUAL al de index.html, que define su copia inline. */ --v2-slate: #4B5766; --v2-blue: #2563EB; --v2-blue-soft: #5B7FDE; --v2-tint: #EFF4FE; /* Acento secundario: solo degradés, nunca links ni botones (ver index.html) */ --v2-violet: #5B3FD1; --v2-violet-deep: #2E1E6B; --v2-violet-tint: #F0ECFD; --pit-ink: #000B33; --pit-ink-80: #1A2447; --pit-ink-60: #55616D; --pit-ink-40: #5F6C78; --pit-paper: #FFFFFF; --pit-paper-pure: #FFFFFF; /* ---- radio ---- UN solo valor para todo el sitio: antes convivían --pit-radius: 16px acá y --v2-radius: 20px en la home, y la misma tarjeta se veía distinta según la página. Gana 16 porque el token lo usan también los inputs y las cajas chicas, donde 20px deja el campo casi capsular. Los bloques grandes ya tenían su 28px fijo aparte. --v2-radius queda como alias para que las dos hojas nombren lo mismo. Copia inline del token en index.html. */ --pit-radius: 16px; --v2-radius: var(--pit-radius); --v2-radius-sm: 12px; /* ---- color de rol: ERROR ---- Token propio, NO uno prestado. Antes los mensajes de error de los formularios usaban --pit-ink-40 (el gris del texto de ayuda): un error pintado del mismo color que una aclaración no se lee como error. --pit-error va sobre fondo claro (6.5:1 sobre blanco) y --pit-error-on-dark sobre el navy de las secciones oscuras, donde el rojo saturado cae por debajo de 4.5:1 (8.4:1 sobre #000B33). Definidos también en la copia inline de index.html. */ --pit-error: #B3261E; --pit-error-on-dark: #FF8A80; } body { padding-top: 84px; background: #FFFFFF; } /* ---- botones pill ---- */ .v2-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; gap: 8px; font-family: var(--pit-font-sans); font-weight: 600; font-size: var(--txt-sm); line-height: 1; padding: 15px 28px; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease; } .v2-btn:hover { transform: translateY(-2px); } .v2-btn--navy { background: var(--v2-navy); color: #FFFFFF; } .v2-btn--navy:hover { background: var(--v2-navy-80); color: #FFFFFF; box-shadow: 0 12px 28px rgba(0,11,51,0.25); } .v2-btn--white { background: #FFFFFF; color: var(--v2-navy); box-shadow: 0 4px 16px rgba(0,11,51,0.12); } .v2-btn--white:hover { color: var(--v2-blue); box-shadow: 0 12px 28px rgba(0,11,51,0.18); } .v2-btn--blue { background: var(--v2-blue); color: #FFFFFF; } .v2-btn--blue:hover { background: #1E4FC4; color: #FFFFFF; box-shadow: 0 12px 28px rgba(37,99,235,0.3); } /* los botones del DS heredan la forma pill */ .pit-btn { border-radius: 999px !important; } /* ---- salto de navegación ---- ATENCIÓN: existe DOS veces (esta copia y la inline de index.html). Fuera de pantalla hasta recibir foco. Se saca con translate y no con display/visibility porque un elemento así ocultado no es enfocable y el link dejaría de existir para el teclado, que es justamente su público. z-index 600 > 500 de la nav pill: si no, la barra fija lo tapa. */ .v2-skip { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 600; background: var(--v2-navy); color: #FFFFFF; font-family: var(--pit-font-sans); font-weight: 600; font-size: var(--txt-sm, 15px); line-height: 1; padding: 15px 22px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 11, 51, 0.25); transform: translateY(-200%); } .v2-skip:focus { transform: none; color: #FFFFFF; } .v2-skip:hover { color: #FFFFFF; } /* Sin outline azul propio: el fondo navy ya lo destaca y el azul sobre navy casi no se ve. El offset blanco sí. */ .v2-skip:focus-visible { outline-color: #FFFFFF; } /* ---- nav pill flotante ---- */ /* white-space:nowrap en los hijos de texto: el texto nunca se envuelve ni se comprime por debajo de su ancho natural (min-content de un nodo nowrap es su ancho completo) — el navegador prefiere desbordar antes que partir el texto. Combinado con el breakpoint de abajo (calculado para que quepa todo sin nowrap), el desborde nunca llega a verse: se pasa a hamburguesa antes. */ .v2-nav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100vw - 32px)); z-index: 500; background: rgba(255,255,255,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; box-shadow: 0 8px 32px rgba(0,11,51,0.10); display: flex; align-items: center; gap: 28px; padding: 10px 12px 10px 24px; box-sizing: border-box; } .v2-nav > a { flex-shrink: 0; white-space: nowrap; } .v2-nav-links { display: flex; align-items: center; gap: 28px; margin-inline-start: auto; } .v2-nav-links a { font-size: var(--txt-sm); font-weight: 500; color: var(--v2-navy); opacity: 0.75; transition: opacity 0.2s ease; white-space: nowrap; } .v2-nav-links a:hover { opacity: 1; color: var(--v2-navy); } .v2-nav-links a.active { opacity: 1; color: var(--v2-blue); } .v2-nav .v2-nav-cta { flex-shrink: 0; white-space: nowrap; } .v2-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box; background: none; border: none; cursor: pointer; flex-shrink: 0; } .v2-burger span { display: block; height: 2px; background: var(--v2-navy); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .v2-drawer { display: none; } /* Toggle ES/EN — markup estático (ver _build/nav.js), no inyectado por JS */ .v2-lang-toggle { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--pit-ink-20); border-radius: 999px; padding: 2px; } .lang-btn { font-family: var(--pit-font-mono); font-size: var(--txt-2xs); letter-spacing: 0.08em; background: none; border: none; color: var(--pit-ink-40); padding: 9px 12px; min-height: 36px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .lang-btn.lang-active { background: #2563EB; color: #FFFFFF; } .v2-lang-toggle--drawer .lang-btn { min-height: 44px; } /* Nav → menú hamburguesa. Breakpoint = ancho mínimo medido (nowrap) para que quepan los 7 links + logo + CTA + toggle ES/EN sin comprimirse, + margen. Ver HANDOFF.md / README.md para cómo remedir si se agrega/saca un ítem. */ @media (max-width: 1180px) { .v2-nav { gap: 12px; padding: 8px 8px 8px 20px; } .v2-nav-links, .v2-nav .v2-nav-cta { display: none; } .v2-burger { display: flex; margin-inline-start: auto; } .v2-drawer { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 490; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); padding: 110px 32px 40px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; counter-reset: v2nav; } .v2-drawer.open { opacity: 1; visibility: visible; transform: none; } /* :not(.v2-btn) es OBLIGATORIO. Sin él esta regla le gana en especificidad (0,2,0 contra 0,1,0) al color blanco de .v2-btn--navy y pinta el CTA "Descargar apuntes" de navy sobre fondo navy: contraste 1.00, texto invisible. La misma regla está inline en index.html. */ .v2-drawer a:not(.v2-btn) { font-size: var(--txt-xl); font-weight: 600; color: var(--v2-navy); padding: 16px 0; border-bottom: 1px solid rgba(0,11,51,0.08); display: flex; align-items: baseline; gap: 14px; } .v2-drawer a:not(.v2-btn)::before { counter-increment: v2nav; content: "0" counter(v2nav); font-family: var(--pit-font-mono); font-size: var(--txt-2xs); font-weight: 400; letter-spacing: 0.08em; color: var(--v2-blue); } .v2-drawer .v2-btn { margin-top: auto; } .v2-drawer .v2-btn::before { content: none; } .v2-lang-toggle--drawer { margin-top: 14px; align-self: flex-start; } .v2-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .v2-burger.open span:nth-child(2) { opacity: 0; } .v2-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ---- footer gradiente ---- */ .v2-footer { position: relative; background: linear-gradient(150deg, #3D5AA8 0%, #5B76B8 28%, #7E96CC 55%, #8F98B4 80%, #A98F79 100%); color: #FFFFFF; border-radius: 28px; margin: 24px; padding: clamp(44px, 5vw, 64px) clamp(28px, 4vw, 56px); display: flex; flex-direction: column; min-height: 540px; box-sizing: border-box; overflow: hidden; } .v2-footer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, transparent 40%, rgba(0,11,51,0.28) 100%); pointer-events: none; } .v2-footer > * { position: relative; z-index: 1; } .v2-footer a { color: #FFFFFF; transition: opacity 0.2s ease; } .v2-footer a:hover { color: #FFFFFF; opacity: 0.75; } .v2-footer-top { display: flex; justify-content: space-between; gap: clamp(28px, 5vw, 80px); flex-wrap: wrap; } .v2-footer-links { display: grid; grid-template-columns: auto auto; gap: 14px clamp(32px, 5vw, 72px); align-content: start; font-size: var(--txt-sm); font-weight: 500; } .v2-footer-claim { max-width: 380px; } .v2-footer-claim h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 18px; color: #FFFFFF; } .v2-footer-avatars { display: flex; } .v2-footer-avatars img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.85); margin-inline-start: -10px; } .v2-footer-avatars img:first-child { margin-inline-start: 0; } .v2-footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-top: auto; padding-top: clamp(48px, 8vw, 120px); } .v2-footer-brand { font-weight: 700; font-size: clamp(44px, 5.5vw, 72px); letter-spacing: -0.03em; color: #FFFFFF; line-height: 1; display: flex; align-items: center; gap: 18px; } .v2-footer-brand .pipe { width: 6px; height: 0.85em; background: #FFFFFF; border-radius: 3px; opacity: 0.9; } .v2-footer-contact { display: grid; gap: 8px; font-size: var(--txt-sm); text-align: end; font-weight: 500; text-shadow: 0 1px 2px rgba(0,11,51,0.18); } .v2-footer-legal { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; font-family: var(--pit-font-mono); font-size: var(--txt-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,11,51,0.18); } @media (max-width: 700px) { .v2-footer-contact { text-align: start; } .v2-footer { margin: 12px; } } /* Los dos Instagram del footer: logo + nombre corto. Antes decian "Instagram del Dr. Frusso · @drfrussoricardo", que en mobile ocupaba dos renglones cada uno para decir dos veces lo mismo. El logo dice que es Instagram; el aria-label se lo dice a quien no lo ve. */ .v2-footer-ig { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 700px) { /* margin-inline-start: auto empujaba "Ver el sitio anterior" contra el borde y lo cortaba. A este ancho los tres van uno atras del otro. */ .v2-footer-legal > a:last-child { margin-inline-start: 0; } .v2-footer-legal { gap: 12px 18px; } } /* ================= Docshield-ización de las subpáginas ================= */ /* la regla negra editorial no existe en la nueva estética */ .pit-ruler.pit-ruler { display: none; } /* eyebrow → pill chip suave */ .pit-eyebrow { display: inline-flex; align-items: center; background: var(--v2-tint); color: var(--v2-blue) !important; border: 1px solid rgba(37,99,235,0.18); border-radius: 999px; padding: 7px 14px; font-size: var(--txt-2xs) !important; letter-spacing: 0.14em !important; } [style*="background: var(--pit-ink);"] .pit-eyebrow, [style*="background:var(--pit-ink);"] .pit-eyebrow { background: rgba(255,255,255,0.10); color: #AFC4F5 !important; border-color: rgba(255,255,255,0.18); } /* ---- texto sobre las secciones navy ---- El remap de tokens de arriba tiñe la escala de gris para fondo CLARO: --pit-ink-40 (#5F6C78) da 5.8:1 sobre blanco pero 3.3:1 sobre el navy, y --pit-ink-60 (#55616D) cae a 3.0:1. Medido, fallaban las credenciales del foro ("Sin registro / Anónimas / Moderadas"), la etiqueta del email, el pie de figura de Qué es PIT y la línea "Pago único · Garantía de 7 días" del Módulo I: todas por debajo del 4.5:1 mínimo. Las secciones oscuras declaran su fondo INLINE, y el texto que hereda esos grises también está inline, así que la única forma de corregirlo en un solo lugar es con !important (una declaración !important de hoja de estilo le gana a una declaración inline normal). --pit-ink-20 da 10.4:1 sobre el navy. Mismo patrón de selector que ya usa .pit-eyebrow acá arriba. */ [style*="background: var(--pit-ink);"] [style*="var(--pit-ink-40)"], [style*="background: var(--pit-ink);"] [style*="var(--pit-ink-60)"], [style*="background:var(--pit-ink);"] [style*="var(--pit-ink-40)"], .pit-section--dark [style*="var(--pit-ink-40)"], .pit-section--dark [style*="var(--pit-ink-60)"] { color: var(--pit-ink-20) !important; } /* El azul de acción tampoco sobrevive al navy: #2563EB sobre #000B33 da 3.71:1 (medido en las flechas "→" de las filas de enlace de Qué es PIT). #8FAAF0 es el azul claro que la home ya usa en su sección oscura y da 8.4:1. El selector busca "color: var(--pit-blue)" y no solo "var(--pit-blue)" para no pisarle el color a los elementos que lo usan de FONDO o de borde. */ [style*="background: var(--pit-ink);"] [style*="color: var(--pit-blue)"], .pit-section--dark [style*="color: var(--pit-blue)"] { color: #8FAAF0 !important; } /* Los chips "fantasma" toman --pit-ink-60 de ds.css. Se excluyen las variantes que traen su propio fondo (blue/filled), que ya contrastan solas. */ [style*="background: var(--pit-ink);"] .pit-chip:not(.pit-chip--blue):not(.pit-chip--filled), .pit-section--dark .pit-chip:not(.pit-chip--blue):not(.pit-chip--filled) { color: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.4); } /* títulos más compactos, estilo Docshield */ .pit-section-title, .pit-title, .pit-display { letter-spacing: -0.028em !important; font-weight: 600 !important; } /* hero de subpágina: degradado azul suave arriba (no aplica a heros oscuros con texto claro) */ /* Arranca con un violeta muy lavado y cae al azul de siempre: es la versión suave del degradé del hero de la home, para que las 17 subpáginas abran con el mismo color y no queden desafinadas respecto de la portada. */ section:first-of-type:not([style*="background: var(--pit-ink);"]) { background: linear-gradient(180deg, #DDD9F7 0%, #E4EAFC 38%, #F2F6FE 68%, #FFFFFF 100%) !important; border-radius: 0 0 28px 28px; } /* ---- campos de formulario ---- 16px en mobile NO es una decisión estética: iOS Safari hace zoom a toda la página cuando el texto de un input mide menos de 16px, y el visitante queda con la página ampliada en medio del formulario. Recién arriba de 640px (donde ya no hay iPhone en vertical) se baja al paso compacto de la escala. Vale para el foro y para cualquier form que se agregue después. Contacto tiene su propia copia en su