/* ============================================================================= EDITORIAL · Sistema de diseño SprintIA Recurso compartido entre TODAS las páginas. Incluye tipografía, layouts, tiles, mosaico, panel iridiscente, stats, botones y responsive. El frame con glassmorphism vive en glass.css (cargar antes que este). ============================================================================= */ :root { --serif: "Playfair Display", "New York", "Times New Roman", Georgia, serif; } /* --- Panel base · contenedor oscuro con backdrop-filter ---------------------- */ .editorial { background: rgba(11,13,18,.86); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 40px 90px -30px rgba(0,0,0,.6); color: #fff; border-radius: clamp(28px, 3vw, 44px); padding: clamp(48px, 7vw, 120px) clamp(28px, 5vw, 80px); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.06); } .editorial::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 80% 10%, rgba(110,231,168,.12), transparent 60%), radial-gradient(ellipse 50% 40% at 10% 90%, rgba(183,148,244,.10), transparent 60%); pointer-events: none; } .editorial > * { position: relative; z-index: 2; } /* Variantes de panel · cada una con su personalidad cromática */ .editorial.bare { background: linear-gradient(135deg, rgba(0,113,227,.28) 0%, rgba(11,13,18,.88) 60%), rgba(11,13,18,.78); backdrop-filter: blur(36px) saturate(170%); -webkit-backdrop-filter: blur(36px) saturate(170%); border: 1px solid rgba(255,255,255,.12); padding: clamp(36px,5vw,80px) clamp(24px,4vw,64px); } .editorial.bare::before { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(110,231,168,.18), transparent 60%), radial-gradient(ellipse 50% 40% at 0% 100%, rgba(0,113,227,.14), transparent 60%); } .editorial.light { background: linear-gradient(135deg, rgba(110,231,168,.22) 0%, rgba(30,200,255,.16) 50%, rgba(142,136,245,.14) 100%), rgba(255,255,255,.92); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); color: #0b0d12; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 40px 90px -30px rgba(0,113,227,.18); } .editorial.light::before { background: radial-gradient(ellipse 60% 50% at 80% 10%, rgba(30,200,255,.10), transparent 60%), radial-gradient(ellipse 50% 40% at 10% 90%, rgba(255,180,210,.08), transparent 60%); } .editorial.light .ed-h, .editorial.light h2, .editorial.light h3 { color: #0b0d12; text-shadow: none; } .editorial.light .ed-eyebrow { color: rgba(11,13,18,.78); } .editorial.light .ed-lede, .editorial.light p { color: rgba(11,13,18,.85); text-shadow: none; } .editorial.light .ed-meta { color: rgba(11,13,18,.7); } .editorial.light .ed-tile { background: rgba(255,255,255,.85); border-color: rgba(11,13,18,.08); color: #0b0d12; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .editorial.light .ed-tile h3 { color: #0b0d12; } .editorial.light .ed-tile p { color: rgba(11,13,18,.78); } /* WCAG · mint accent sobre fondo claro requiere un verde oscuro (ratio 4.5+) */ .editorial.light .ed-tile h3 .ital, .editorial.light .ital { color: #0b6b3a; } /* === Blog post: tokens de marca compatibles con WCAG AA sobre fondo claro === El cyan #1ec8ff (var(--accent)) e el mint #6ee7a8 (var(--accent-3)) son brand colors optimizados para fondo oscuro. En blog posts (fondo blanco/claro) fallan WCAG AA (ratio 1.95 y 1.54 respectivamente). Override scoped al que _Layout.cshtml añade automáticamente cuando ViewData["ArticleHeadline"] != null. */ body.post-page { --accent: #075985; /* cyan-800 · ratio 7.5+ sobre #fff (AAA) */ --accent-3: #0b6b3a; /* verde oscuro · ratio 5.8+ sobre #fff */ } /* Botones con bg=accent + texto oscuro: el override de --accent rompe el botón. Forzamos cyan brillante de marca SOLO en estos botones donde el bg oscuro actúa como fondo (no como texto). Mantiene marca + contraste correcto. */ body.post-page .calc-btn, body.post-page .calc-callout .calc-btn { background: #1ec8ff; color: #0b0d12; } /* Card-badge en blog posts e índice: bg cyan claro requiere texto cyan-800 para AA */ body.post-page .card-blog .card-badge, body.post-page .badge { color: #075985; background: #ecfeff; } /* Meta + read-time en cards relacionadas · gris con opacity .7 daba ratio 3.18-3.59 sobre white. Quitamos opacity y usamos slate-600 sólido (ratio 6+). */ body.post-page .card-blog .meta, body.post-page .card-blog .read-time, body.post-page .card-related .meta, body.post-page .card-related .read-time, body.post-page .read-time { color: #475569; opacity: 1; } .editorial.light .ed-btn { background: #0b0d12; color: #fff; } .editorial.light .ed-btn.ghost { background: transparent; color: #0b0d12; border: 1px solid rgba(11,13,18,.18); } .editorial.light .ed-stat { border-color: rgba(11,13,18,.12); } .editorial.light .ed-stat .num { background: linear-gradient(180deg, #0b0d12, rgba(11,13,18,.55)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .editorial.light .ed-stat .lbl { color: rgba(11,13,18,.78); } .editorial.minimal { background: linear-gradient(135deg, rgba(0,113,227,.30) 0%, rgba(11,13,18,.86) 60%), rgba(11,13,18,.82); backdrop-filter: blur(36px) saturate(170%); -webkit-backdrop-filter: blur(36px) saturate(170%); border: 1px solid rgba(255,255,255,.12); padding: clamp(36px,5vw,80px) clamp(24px,4vw,64px); } .editorial.frame { background: linear-gradient(135deg, rgba(142,136,245,.32) 0%, rgba(11,13,18,.86) 50%, rgba(110,231,168,.22) 100%), rgba(11,13,18,.80); backdrop-filter: blur(36px) saturate(170%); -webkit-backdrop-filter: blur(36px) saturate(170%); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset; } .editorial.tight { padding: clamp(32px,4vw,72px) clamp(24px,4vw,64px); } /* --- Sections con diseño editorial: transparentes para que se vea el escenario - */ section.ed-section { padding: clamp(40px, 6vw, 100px) clamp(16px, 4vw, 64px); display: block; background: transparent !important; } section.ed-section .content { max-width: 1320px; margin: 0 auto; width: 100%; } section.ed-section .content > * { width: 100%; } /* --- Tipografía editorial ---------------------------------------------------- */ .ed-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 500; margin: 0 0 32px; } .ed-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 12px var(--accent-3); } .ed-h { font-weight: 700; letter-spacing: -.045em; line-height: 1.0; text-wrap: balance; color: #fff; margin: 0; text-shadow: none; } .editorial p, .ed-lede { color: rgba(255,255,255,.92); text-shadow: none; } .ed-h em, .ed-h .ital { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; background: linear-gradient(120deg, #6ee7a8 0%, #1ec8ff 60%, #b794f4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ed-h.xxl { font-size: clamp(52px, 9.5vw, 168px); line-height: .96; } .ed-h.xl { font-size: clamp(44px, 7.5vw, 120px); line-height: 1.02; } .ed-h.lg { font-size: clamp(36px, 5.5vw, 84px); line-height: 1.04; } .ed-h.md { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; } .ed-h.sm { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -.022em; font-weight: 600; } .ed-lede { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.5; color: rgba(255,255,255,.72); max-width: 56ch; margin: 28px 0 0; letter-spacing: -.005em; font-weight: 400; text-wrap: pretty; } .ed-meta { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.5); text-transform: uppercase; } /* --- Panel iridiscente · solo colores SprintIA (cian, lavanda, menta) -------- */ .iri-glass { position: relative; border-radius: clamp(22px, 2.5vw, 36px); overflow: hidden; aspect-ratio: 1 / 1; background: conic-gradient(from 210deg at 35% 30%, #b794f4, #1ec8ff 38%, #6ee7a8 60%, #b794f4); filter: saturate(135%); box-shadow: 0 30px 80px rgba(110,231,168,.15), 0 8px 24px rgba(11,13,18,.4), inset 0 1px 0 rgba(255,255,255,.4); } .iri-glass::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(118deg, rgba(255,255,255,0) 0 70px, rgba(255,255,255,.18) 70px 90px, rgba(255,255,255,0) 90px 160px); mix-blend-mode: overlay; } .iri-glass::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 35%, rgba(0,0,0,.18)); z-index: 1; } .iri-glass.tall { aspect-ratio: 3 / 4; } .iri-glass.wide { aspect-ratio: 5 / 3; } .iri-glass.full { aspect-ratio: auto; height: 100%; min-height: 300px; } /* Variantes — solo combinaciones de los 3 colores SprintIA */ .iri-glass.v-mint { background: conic-gradient(from 180deg at 30% 30%, #6ee7a8, #1ec8ff 50%, #b794f4 80%, #6ee7a8); } .iri-glass.v-violet { background: conic-gradient(from 220deg at 35% 35%, #b794f4, #1ec8ff 55%, #6ee7a8 78%, #b794f4); } .iri-glass.v-cyan { background: conic-gradient(from 200deg at 40% 30%, #1ec8ff, #b794f4 55%, #6ee7a8 78%, #1ec8ff); } .iri-glass.v-acid { background: conic-gradient(from 160deg at 30% 30%, #6ee7a8, #1ec8ff 60%, #b794f4 90%, #6ee7a8); } .iri-glass.v-sunset { background: conic-gradient(from 200deg at 40% 30%, #ffd4a8, #ffb4d2 22%, #b794f4 55%, #6e7ef0 78%, #ffd4a8); } .iri-tag { position: absolute; left: 22px; top: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .iri-caption { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 3; color: #fff; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.15; letter-spacing: -.02em; } /* --- Layouts editoriales ----------------------------------------------------- */ .ed-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; } .ed-split.flip { grid-template-columns: 1fr 1.05fr; } .ed-split.asym { grid-template-columns: 1.4fr 1fr; } .ed-split.asym-flip { grid-template-columns: 1fr 1.4fr; } /* --- Bloque de stats editorial ----------------------------------------------- */ .ed-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 56px); margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(255,255,255,.1); } .ed-stat .num { font-size: clamp(48px, 6vw, 96px); font-weight: 600; letter-spacing: -.045em; line-height: 1; background: linear-gradient(180deg, #fff, rgba(255,255,255,.6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; } .ed-stat .lbl { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.5; letter-spacing: -.005em; max-width: 28ch; } /* --- Botones editoriales ----------------------------------------------------- */ .ed-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: -.005em; transition: transform .25s, background .25s; margin-top: clamp(28px, 4vw, 44px); } .ed-btn:hover { transform: translateY(-1px); background: #f5f5f7; } .ed-btn.ghost { background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.18); } .ed-btn.ghost:hover { background: rgba(255,255,255,.06); color: #fff; } /* --- Mosaico editorial · bento asimétrico ------------------------------------ */ .ed-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: 14px; margin-top: clamp(40px, 5vw, 72px); } .ed-tile { position: relative; border-radius: clamp(20px, 2vw, 28px); overflow: hidden; background: rgba(255,255,255,.10); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset; padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; justify-content: space-between; color: #fff; transition: transform .35s cubic-bezier(.2,.7,.2,1); } .ed-tile:hover { transform: translateY(-3px); } .ed-tile.iri { padding: 0; border-color: rgba(255,255,255,.18); } .ed-tile h3 { font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 10px; text-wrap: balance; } .ed-tile h3 .ital { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-3); } .ed-tile p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.7); line-height: 1.5; letter-spacing: -.005em; } .ed-tile .big-num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(72px, 8vw, 144px); line-height: .9; letter-spacing: -.04em; background: linear-gradient(120deg, #6ee7a8, #1ec8ff, #b794f4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; margin: 0; } .ed-tile.span-2 { grid-column: span 2; } .ed-tile.span-3 { grid-column: span 3; } .ed-tile.span-4 { grid-column: span 4; } .ed-tile.span-6 { grid-column: span 6; } .ed-tile.row-2 { grid-row: span 2; } /* --- Responsive del mosaico · idéntico a la referencia visual Octaes Landing - */ @media (max-width: 1000px) { .ed-mosaic { grid-template-columns: repeat(4, 1fr); gap: 12px; } .ed-tile.span-2 { grid-column: span 2; } .ed-tile.span-3 { grid-column: span 3; } .ed-tile.span-4 { grid-column: span 4; } .ed-tile.span-6 { grid-column: span 4; } .ed-tile.row-2 { grid-row: auto; } } @media (max-width: 900px) { /* FORZAR layout block + ancho completo en mobile */ section.ed-section, section.ed-section.sec-left, section.ed-section.sec-right, section.ed-section.sec-center { display: block !important; grid-template-columns: 1fr !important; width: 100% !important; margin: 0 auto !important; padding: 28px 14px !important; min-height: auto !important; } section.ed-section .content { max-width: 100% !important; width: 100% !important; margin: 0 auto !important; grid-column: 1 !important; display: block !important; } section.ed-section > .content > .editorial { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } .editorial { padding: clamp(28px, 7vw, 56px) clamp(18px, 5vw, 32px); border-radius: clamp(18px, 4vw, 24px); } .ed-h.xxl { font-size: clamp(38px, 11vw, 68px); line-height: 1; text-align: center; } .ed-h.xl { font-size: clamp(34px, 10vw, 56px); line-height: 1.02; text-align: center; } .ed-h.lg { font-size: clamp(28px, 8vw, 44px); text-align: center; } .ed-h.md { font-size: clamp(22px, 6vw, 32px); text-align: center; } .ed-eyebrow { font-size: 11px; letter-spacing: .12em; margin-bottom: 16px; justify-content: center; display: flex; } .ed-lede { font-size: clamp(15px, 4vw, 17px); text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; } .editorial p { text-align: center; } .editorial { text-align: center; } .editorial .ed-btn { display: inline-flex; } .editorial div[style*="display:flex"][style*="flex-wrap:wrap"], .editorial div[style*="display: flex"][style*="flex-wrap: wrap"] { justify-content: center !important; align-items: center !important; width: 100%; } .ed-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; margin-top: 24px; } .ed-stat { padding: 14px 8px; border-top: 0; border-radius: 14px; background: rgba(255,255,255,.06); text-align: center; } .ed-stat .num { font-size: clamp(22px, 6vw, 36px) !important; } .ed-stat .lbl { font-size: 11px; line-height: 1.3; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } .ed-split, .ed-split.flip, .ed-split.asym, .ed-split.asym-flip { grid-template-columns: 1fr !important; gap: 24px; text-align: center; } .ed-split > div:not(.iri-glass) { width: 100%; text-align: center; } .ed-split > div:not(.iri-glass) > * { margin-left: auto !important; margin-right: auto !important; } .editorial h1, .editorial h2, .editorial h3, .editorial p { text-align: center !important; } .ed-split.flip > .iri-glass:first-child { order: 2; } .iri-glass.full { min-height: 220px; aspect-ratio: 4/3; width: 100%; } .iri-caption { font-size: clamp(24px, 7vw, 38px) !important; text-align: center; left: 16px; right: 16px; } } @media (max-width: 600px) { .ed-mosaic { grid-template-columns: repeat(4, 1fr); gap: 8px; grid-auto-flow: dense; } .ed-tile.span-2 { grid-column: span 2; } .ed-tile.span-3 { grid-column: span 2; } .ed-tile.span-4 { grid-column: span 4; } .ed-tile.span-6 { grid-column: span 4; } .ed-tile.row-2 { grid-row: span 1; } .ed-tile.span-6.row-2 { grid-row: span 1; } /* El primer tile span-3 row-2 (hero del mosaico) ocupa todo el ancho en móvil */ .ed-mosaic > .ed-tile.span-3.row-2:first-child, .ed-mosaic > .ed-tile.span-4.row-2, .ed-mosaic > .ed-tile.span-2.row-2.iri { grid-column: span 4; min-height: 220px; } .ed-tile { padding: 16px 14px; min-height: auto; } .ed-tile h3 { font-size: clamp(15px, 4.2vw, 18px) !important; } .ed-tile p { font-size: 12.5px; line-height: 1.45; } .ed-tile .big-num { font-size: clamp(40px, 12vw, 60px) !important; } .ed-tile .ed-meta { font-size: 10px; letter-spacing: .12em; } .ed-tile[style*="flex-direction:row"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; text-align: left; } } @media (max-width: 560px) { .editorial { padding: 28px 16px; } .ed-btn { padding: 11px 20px; font-size: 13px; } .iri-tag { font-size: 10px; padding: 7px 12px; top: 12px; left: 12px; } .iri-caption { padding: 16px !important; font-size: clamp(20px, 7vw, 30px) !important; } }