/* ================================================================ universidadesec.com — Hoja de estilos única ================================================================ */ :root { /* Marca */ --brand-blue: #B86E42; --brand-blue-dark: #17181B; --brand-blue-light:#D69A70; --brand-gold: #C9A46A; --brand-green: #6F7F7B; --graphite: #111214; --graphite-soft: #202226; --silver: #D7D8D4; --copper: #B86E42; /* Neutros (tema claro) */ --bg: #F4F2ED; --surface: rgba(255,255,255,.78); --surface-2: rgba(245,244,239,.78); --border: rgba(26, 27, 30, .12); --text: #202226; --text-muted: #69706F; --text-light: #9CA3A1; /* Semánticos */ --success: #16A34A; --warning: #D97706; --error: #DC2626; --info: #0891B2; /* Escala */ --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --shadow-sm: 0 1px 3px rgba(17, 18, 20, .08), 0 1px 2px rgba(17, 18, 20, .06); --shadow: 0 12px 34px rgba(17, 18, 20, .12); --shadow-lg: 0 26px 70px rgba(17, 18, 20, .22); --t: 200ms ease; --header-h: 64px; --page-gradient: radial-gradient(circle at 16% -10%, rgba(184,110,66,.18), transparent 34rem), radial-gradient(circle at 96% 8%, rgba(215,216,212,.28), transparent 30rem), linear-gradient(180deg, #F8F6F1 0%, var(--bg) 46%, #ECE7DF 100%); /* Pasteles tenues (franjas de listados, cada 4 filas: blanco alternado con un color) */ --pastel-1: var(--surface); --pastel-2: #FCEEE3; --hero-gradient: radial-gradient(circle at 72% 8%, rgba(215,216,212,.18), transparent 27rem), radial-gradient(circle at 18% 78%, rgba(184,110,66,.22), transparent 28rem), linear-gradient(135deg, #0B0C0E 0%, #191A1D 48%, #2B2C2F 100%); } [data-theme="dark"] { --bg: #111214; --surface: rgba(32,34,38,.82); --surface-2: rgba(22,23,26,.88); --border: rgba(215,216,212,.16); --text: #F1F0EA; --text-muted: #B6B8B4; --text-light: #858A88; --pastel-1: var(--surface); --pastel-2: rgba(184,110,66,.12); --page-gradient: radial-gradient(circle at 12% -8%, rgba(184,110,66,.18), transparent 34rem), radial-gradient(circle at 88% 4%, rgba(215,216,212,.12), transparent 30rem), linear-gradient(180deg, #0D0E10 0%, var(--bg) 52%, #17181B 100%); } /* Paletas de fondo: cambia la clase del para probar otra atmosfera. Opciones: bg-obsidian, bg-champagne, bg-emerald, bg-plum, bg-ocean */ body.bg-obsidian { --page-gradient: radial-gradient(circle at 10% -8%, rgba(184,110,66,.24), transparent 34rem), radial-gradient(circle at 92% 4%, rgba(215,216,212,.26), transparent 32rem), linear-gradient(145deg, #F7F4EC 0%, #ECE7DE 42%, #DAD2C7 100%); --hero-gradient: radial-gradient(circle at 76% 4%, rgba(215,216,212,.22), transparent 27rem), radial-gradient(circle at 16% 82%, rgba(184,110,66,.28), transparent 30rem), linear-gradient(135deg, #090A0C 0%, #18191C 45%, #343231 100%); } body.bg-champagne { --page-gradient: radial-gradient(circle at 14% 0%, rgba(201,164,106,.34), transparent 30rem), radial-gradient(circle at 88% 10%, rgba(255,255,255,.62), transparent 28rem), linear-gradient(145deg, #FFF9EE 0%, #EDE3D2 52%, #D8C6AE 100%); --hero-gradient: radial-gradient(circle at 84% 6%, rgba(255,246,226,.24), transparent 26rem), radial-gradient(circle at 12% 82%, rgba(184,110,66,.30), transparent 30rem), linear-gradient(135deg, #181512 0%, #2C2620 48%, #6D5239 100%); } body.bg-emerald { --page-gradient: radial-gradient(circle at 14% -8%, rgba(184,110,66,.22), transparent 32rem), radial-gradient(circle at 90% 6%, rgba(122,147,130,.34), transparent 31rem), linear-gradient(145deg, #F5F3EA 0%, #DDE3D8 48%, #BAC7BC 100%); --hero-gradient: radial-gradient(circle at 78% 8%, rgba(166,190,172,.24), transparent 28rem), radial-gradient(circle at 15% 82%, rgba(184,110,66,.24), transparent 28rem), linear-gradient(135deg, #0B100E 0%, #18221E 50%, #344139 100%); } body.bg-plum { --page-gradient: radial-gradient(circle at 12% -8%, rgba(184,110,66,.26), transparent 32rem), radial-gradient(circle at 88% 6%, rgba(102,86,122,.30), transparent 30rem), linear-gradient(145deg, #F5F0EE 0%, #DFD7DE 50%, #C8B9C9 100%); --hero-gradient: radial-gradient(circle at 82% 8%, rgba(215,216,212,.18), transparent 26rem), radial-gradient(circle at 16% 82%, rgba(184,110,66,.26), transparent 28rem), linear-gradient(135deg, #100D12 0%, #201B24 48%, #463A4A 100%); } body.bg-ocean { --page-gradient: radial-gradient(circle at 12% -8%, rgba(184,110,66,.20), transparent 32rem), radial-gradient(circle at 90% 8%, rgba(83,117,132,.34), transparent 31rem), linear-gradient(145deg, #F4F4EF 0%, #DCE4E3 48%, #B8CAD0 100%); --hero-gradient: radial-gradient(circle at 82% 8%, rgba(167,190,199,.22), transparent 28rem), radial-gradient(circle at 16% 82%, rgba(184,110,66,.24), transparent 28rem), linear-gradient(135deg, #0A1013 0%, #17242A 48%, #354954 100%); } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; background: var(--page-gradient); color: var(--text); line-height: 1.6; min-height: 100vh; transition: background var(--t), color var(--t); } [data-theme="dark"] body { background: var(--page-gradient); } img { max-width: 100%; display: block; } a { color: var(--brand-blue); text-decoration: none; } [data-theme="dark"] a { color: var(--brand-blue-light); } a:hover { text-decoration: underline; } ul { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* Accesibilidad: foco visible siempre */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 3000; background: var(--brand-blue); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ── Tipografía ────────────────────────────────────────────── */ h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.2; } h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; line-height: 1.3; } h3 { font-size: 1.1rem; font-weight: 700; } h4 { font-size: .95rem; font-weight: 600; } .eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-gold); } .lead { font-size: 1.05rem; color: var(--text-muted); } /* ── Layout ────────────────────────────────────────────────── */ .container { max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; } main { display: block; padding: 2rem 0 4rem; min-height: calc(100vh - var(--header-h) - 320px); } .section-head { margin-bottom: 1.5rem; } .section-head p { color: var(--text-muted); margin-top: .35rem; max-width: 60ch; } .back-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 1.25rem; } .back-link:hover { color: var(--brand-blue); text-decoration: none; } /* ── Topbar ────────────────────────────────────────────────── */ #topbar { background: rgba(248,246,241,.82); color: var(--text); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(17,18,20,.08); box-shadow: 0 12px 36px rgba(17,18,20,.08); backdrop-filter: blur(18px) saturate(130%); } [data-theme="dark"] #topbar { background: rgba(17,18,20,.78); border-color: rgba(215,216,212,.12); } #topbar .inner { display: flex; align-items: center; gap: 1rem; height: var(--header-h); max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; } .brand { display: flex; align-items: center; gap: .78rem; color: var(--text); } .brand:hover { text-decoration: none; } .brand-logo { position: relative; z-index: 0; width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.88), transparent 17%), radial-gradient(circle at 74% 82%, rgba(255,225,120,.42), transparent 26%), linear-gradient(135deg, #4A0508 0%, #D1122E 48%, #FF4D5E 100%); display: flex; align-items: center; justify-content: center; font-weight: 950; font-size: 1.18rem; color: #fff; letter-spacing: -.03em; border: 0; animation: logo-orange-ring 1.8s ease-in-out infinite; box-shadow: 0 0 0 5px rgba(255,77,94,.16), 0 0 24px rgba(255,77,94,.52), 0 16px 34px rgba(209,18,46,.42), inset 0 1px 0 rgba(255,255,255,.58), inset 0 -12px 22px rgba(74,5,8,.28); text-shadow: 0 2px 12px rgba(74,5,8,.72), 0 0 16px rgba(255,255,255,.28); } .brand-logo::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 18px; background: conic-gradient(from 0deg, #F97316, #FFB347, #D1122E, #FF4D5E, #F97316); box-shadow: 0 0 22px rgba(249,115,22,.5); animation: logo-ring-spin 3.8s linear infinite; } @keyframes logo-ring-spin { to { transform: rotate(360deg); } } @keyframes logo-orange-ring { 0%, 100% { border-color: #F97316; box-shadow: 0 0 0 5px rgba(249,115,22,.18), 0 0 24px rgba(249,115,22,.48), 0 16px 34px rgba(209,18,46,.42), inset 0 1px 0 rgba(255,255,255,.58), inset 0 -12px 22px rgba(74,5,8,.28); } 50% { border-color: #FFB347; box-shadow: 0 0 0 7px rgba(255,179,71,.22), 0 0 34px rgba(255,179,71,.68), 0 16px 38px rgba(249,115,22,.46), inset 0 1px 0 rgba(255,255,255,.62), inset 0 -12px 22px rgba(74,5,8,.28); } } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-size: 1rem; font-weight: 900; color: var(--text); letter-spacing: -.01em; } .brand-sub { font-size: .62rem; color: var(--text-muted); letter-spacing: .08em; font-weight: 750; } #nav-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 8px; font-size: 1.1rem; margin-left: auto; } .topbar-nav { display: flex; flex-wrap: wrap; gap: .22rem; margin-left: .5rem; } .topbar-nav a { color: #111214; font-size: .82rem; font-weight: 700; padding: .48rem .72rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t); } [data-theme="dark"] .topbar-nav a { color: rgba(255,255,255,.88); } .topbar-nav a:hover, .topbar-nav a[aria-current="page"] { background: rgba(184,110,66,.12); color: var(--brand-blue); text-decoration: none; border-color: rgba(184,110,66,.18); box-shadow: 0 10px 24px rgba(184,110,66,.10); transform: translateY(-1px); } .topbar-nav a.nav-register { background: linear-gradient(135deg, #F97316, #C2410C); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: 0 12px 26px rgba(249,115,22,.26); } .topbar-nav a.nav-register:hover { color: #fff; background: linear-gradient(135deg, #FFB347, #F97316); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; } #btn-theme { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; width: 38px; height: 38px; font-size: .95rem; } #btn-theme:hover { background: var(--border); } /* ── Buscador global ───────────────────────────────────────── */ .search-wrap { position: relative; } #global-search { background: rgba(255,255,255,.52); border: 1px solid rgba(17,18,20,.1); color: var(--text); border-radius: 30px; padding: .45rem 1rem .45rem 2.1rem; font-size: .82rem; width: 190px; outline: none; transition: var(--t); } [data-theme="dark"] #global-search { background: rgba(255,255,255,.08); border-color: rgba(215,216,212,.14); } #global-search::placeholder { color: var(--text-light); } #global-search:focus { border-color: var(--brand-blue); width: 230px; background: rgba(255,255,255,.62); } .search-icon-svg { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); opacity: .6; color: var(--text-muted); pointer-events: none; } #search-results { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 340px; overflow-y: auto; z-index: 2000; display: none; color: var(--text); } #search-results .sr-item { padding: .65rem 1rem; display: flex; align-items: center; gap: .6rem; font-size: .85rem; border-bottom: 1px solid var(--border); transition: background var(--t); } #search-results .sr-item:last-child { border-bottom: none; } #search-results .sr-item:hover { background: var(--surface-2); } #search-results .sr-empty { padding: .9rem 1rem; color: var(--text-muted); font-size: .85rem; } /* ── Badges ────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 20px; white-space: nowrap; } .badge.nivel-tecnico { background: #E0E7FF; color: #3730A3; } .badge.nivel-pregrado { background: #DBEAFE; color: #1D4ED8; } .badge.nivel-especialidad { background: #FEF3C7; color: #92400E; } .badge.nivel-maestria { background: #D1FAE5; color: #065F46; } .badge.nivel-doctorado { background: #FCE7F3; color: #9D174D; } [data-theme="dark"] .badge.nivel-tecnico { background: #312E81; color: #C7D2FE; } [data-theme="dark"] .badge.nivel-pregrado { background: #1E3A8A; color: #BFDBFE; } [data-theme="dark"] .badge.nivel-especialidad { background: #78350F; color: #FDE68A; } [data-theme="dark"] .badge.nivel-maestria { background: #064E3B; color: #A7F3D0; } [data-theme="dark"] .badge.nivel-doctorado { background: #831843; color: #FBCFE8; } .badge.modalidad { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .badge.financiamiento { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } /* ── Hero / Carrusel ───────────────────────────────────────── */ #hero { position: relative; overflow: hidden; background: var(--hero-gradient); padding: clamp(1rem, 3vw, 2.25rem); } #hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 25% 100%, 100% 50%; opacity: .28; } .carousel { position: relative; height: min(72vh, 680px); min-height: 520px; max-width: 1480px; margin: 0 auto; border-radius: 24px; overflow: hidden; border: 1px solid rgba(215,216,212,.35); box-shadow: 0 34px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.18); background: rgba(215,216,212,.10); backdrop-filter: blur(16px) saturate(130%); } .carousel-track { display: flex; height: 100%; transition: transform 480ms ease; } .carousel-slide { flex: 0 0 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(135deg, #111214, #2B2C2F); } .carousel-panel { display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: clamp(2rem, 4vw, 4rem); color: #fff; position: relative; overflow: hidden; background-size: cover; background-position: center; background-color: transparent; background-blend-mode: normal; min-width: 0; } .carousel-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.18), transparent 20rem), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 34%); } .carousel-panel::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-right: 1px solid rgba(215,216,212,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); } .carousel-panel > * { position: relative; z-index: 1; } .carousel-panel.is-stat { align-items: center; text-align: center; } .carousel-panel .eyebrow, .carousel-panel h2, .carousel-panel p, .carousel-stat-num, .carousel-stat-label { filter: drop-shadow(0 8px 22px rgba(0,0,0,.42)); } .carousel-panel h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 3.65rem); max-width: 13ch; font-weight: 850; line-height: .98; letter-spacing: 0; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 12px 36px rgba(0,0,0,.8); } .carousel-panel p { color: rgba(255,255,255,.86); max-width: 48ch; font-size: clamp(.95rem, 1.5vw, 1.08rem); text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 3px 14px rgba(0,0,0,.7); } .carousel-stat-num { font-size: clamp(3.6rem, 9vw, 7rem); font-weight: 900; line-height: .9; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.95), 0 18px 44px rgba(0,0,0,.78); } .carousel-stat-label { font-size: clamp(.92rem, 1.5vw, 1.1rem); color: rgba(255,255,255,.84); margin-top: .8rem; max-width: 30ch; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 3px 14px rgba(0,0,0,.7); } .carousel-panel .eyebrow { display: inline-flex; align-self: flex-start; background: rgba(17,18,20,.30); border: 1px solid rgba(255,255,255,.18); padding: .32rem .62rem; border-radius: 999px; backdrop-filter: blur(10px); text-shadow: none; } .carousel-cta { display: inline-flex; align-self: flex-start; margin-top: .3rem; background: linear-gradient(135deg, #E2C58E, #B86E42); color: #111214; font-weight: 800; padding: .75rem 1.45rem; border-radius: 999px; font-size: .88rem; box-shadow: 0 12px 30px rgba(184,110,66,.32), inset 0 1px 0 rgba(255,255,255,.42); transition: transform var(--t), box-shadow var(--t); } .carousel-cta:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 18px 40px rgba(184,110,66,.42), inset 0 1px 0 rgba(255,255,255,.42); } .carousel-photo-credit { position: absolute; right: 1rem; bottom: .75rem; z-index: 2; font-size: .64rem; color: rgba(255,255,255,.48); background: rgba(17,18,20,.32); border: 1px solid rgba(255,255,255,.12); padding: .25rem .55rem; border-radius: 999px; backdrop-filter: blur(10px); } .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(17,18,20,.34); color: #fff; font-size: 1.2rem; backdrop-filter: blur(14px); box-shadow: 0 12px 28px rgba(0,0,0,.24); } .carousel-nav:hover { background: rgba(215,216,212,.28); } .carousel-prev { left: 1.25rem; } .carousel-next { right: 1.25rem; } .carousel-dots { position: absolute; bottom: 1.05rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 5; padding: .42rem .55rem; background: rgba(17,18,20,.34); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; backdrop-filter: blur(14px); } .carousel-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.38); padding: 0; } .carousel-dots button[aria-current="true"] { background: linear-gradient(135deg, #E2C58E, #B86E42); width: 24px; border-radius: 6px; } /* ── Stats strip ───────────────────────────────────────────── */ .stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: -2.75rem auto 2rem; max-width: 1360px; padding: 0 1.5rem; position: relative; z-index: 2; } @keyframes stat-spotlight { 0%, 4%, 21%, 100% { box-shadow: var(--shadow); transform: scale(1); border-color: rgba(255,255,255,.62); } 12.5% { box-shadow: 0 0 0 3px rgba(37,99,235,.7), 0 16px 34px rgba(37,99,235,.45); transform: scale(1.035); border-color: rgba(37,99,235,.6); } } .stat-card { display: block; height: 108px; perspective: 1100px; text-decoration: none; cursor: pointer; } .stat-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 620ms cubic-bezier(.4,.15,.2,1); } .stat-card:hover .stat-card-inner, .stat-card:focus-visible .stat-card-inner { transform: rotateY(180deg); } .stat-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .9rem 1.1rem; box-shadow: var(--shadow); overflow: hidden; } .stat-card-front { background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.62); backdrop-filter: blur(16px); animation: stat-spotlight 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1s); } .stat-card-front .num { font-size: 1.6rem; font-weight: 800; color: var(--brand-blue); } [data-theme="dark"] .stat-card-front { background: rgba(32,34,38,.78); border-color: rgba(215,216,212,.14); } [data-theme="dark"] .stat-card-front .num { color: var(--brand-blue-light); } .stat-card-front .label { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; } .stat-card-back { background: linear-gradient(135deg, #FDE047 0%, #FACC15 100%); border: 1px solid rgba(154,52,18,.2); transform: rotateY(180deg); } .stat-card-back p { font-size: .78rem; font-weight: 700; color: #9A3412; line-height: 1.35; } @media (prefers-reduced-motion: reduce) { .stat-card-front { animation: none; } .stat-card-inner { transition: none; } } /* ── Grid de accesos rápidos (home) — tarjetas con volteo ─── */ .explore-section { position: relative; width: 100vw; margin: 2.5rem calc(50% - 50vw) 0; padding: clamp(1.6rem, 3vw, 2.6rem) max(1.5rem, calc((100vw - 1360px) / 2 + 1.5rem)); overflow: hidden; background: radial-gradient(circle at 10% 0%, rgba(255,219,139,.26), transparent 24rem), radial-gradient(circle at 96% 16%, rgba(184,110,66,.24), transparent 22rem), linear-gradient(135deg, rgba(17,18,20,.94) 0%, rgba(39,39,42,.88) 48%, rgba(91,57,38,.86) 100%); border-block: 1px solid rgba(226,197,142,.28); box-shadow: 0 28px 70px rgba(17,18,20,.22), inset 0 1px 0 rgba(255,255,255,.14); } .explore-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 20% 100%, 100% 50%; opacity: .18; } .explore-section > * { position: relative; z-index: 1; } .explore-section .section-head { margin-bottom: 1.35rem; } .explore-section .section-head h2 { color: #fff; } .explore-section .section-head p { color: rgba(255,255,255,.78); } .explore-section .eyebrow { color: #FFD98D; } .btn-datos-generales { display: inline-flex; align-items: center; gap: .55rem; background: #fff; color: var(--graphite); border: none; border-radius: 999px; padding: .75rem 1.6rem; font-weight: 700; font-size: .92rem; margin-bottom: 1.5rem; box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform var(--t), box-shadow var(--t); } .btn-datos-generales:hover, .btn-datos-generales:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.34); } .word-reveal { display: flex; flex-wrap: wrap; gap: .28rem .38rem; } .word-reveal span { display: inline-block; opacity: 0; transform: translateY(.75rem); animation: word-in 520ms cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--w) * 90ms); } @keyframes word-in { to { opacity: 1; transform: translateY(0); } } @keyframes card-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; } .quick-card { display: block; height: 200px; perspective: 1200px; border-radius: var(--radius-lg); animation: card-rise 560ms both cubic-bezier(.2,.7,.3,1); animation-delay: calc(var(--i, 0) * 70ms); transition: transform var(--t); } .quick-card:hover, .quick-card:focus-visible { transform: translateY(-4px); text-decoration: none; filter: drop-shadow(0 18px 42px rgba(255,138,42,.42)); } .quick-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 620ms cubic-bezier(.4,.15,.2,1); } .quick-card:hover .quick-card-inner, .quick-card:focus-visible .quick-card-inner { transform: rotateY(180deg); } .quick-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius-lg); padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; } .quick-card-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.4) 50%, transparent 58%); transform: translateX(-130%); transition: transform 750ms ease; } .quick-card:hover .quick-card-face::after, .quick-card:focus-visible .quick-card-face::after { transform: translateX(130%); } @keyframes card-spotlight { 0%, 8%, 100% { box-shadow: var(--shadow-sm); transform: scale(1); } 4% { box-shadow: 0 0 0 3px rgba(96,165,250,.85), 0 18px 44px rgba(37,99,235,.65); transform: scale(1.035); } } .quick-card-front { background: linear-gradient(155deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 62%), linear-gradient(135deg, #1E3A8A, #2563EB); justify-content: center; align-items: center; text-align: center; animation: card-spotlight 8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.8s); } .quick-card:hover .quick-card-front, .quick-card:focus-visible .quick-card-front { background-color: #F97316; background-image: linear-gradient(135deg, #FFB347 0%, #F97316 52%, #C2410C 100%); color: #fff; border-color: rgba(255,255,255,.45); box-shadow: 0 22px 54px rgba(249,115,22,.34), 0 14px 38px rgba(17,18,20,.2); } .quick-card-front h3 { color: #FFD84D; width: 100%; text-align: center; padding-bottom: .55rem; border-bottom: 1px solid rgba(255,216,77,.5); text-shadow: 0 2px 10px rgba(54,42,4,.45), 0 0 18px rgba(255,216,77,.45); } .quick-card-front p { font-size: .85rem; color: rgba(255,255,255,.9); text-align: center; } .quick-card:hover .quick-card-front h3, .quick-card:focus-visible .quick-card-front h3 { color: #fff; border-bottom-color: rgba(255,255,255,.48); text-shadow: 0 2px 12px rgba(83,26,5,.38); } .quick-card:hover .quick-card-front p, .quick-card:focus-visible .quick-card-front p { color: rgba(255,255,255,.92); } .quick-card-back { background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue)); transform: rotateY(180deg); color: #fff; justify-content: center; align-items: center; text-align: center; gap: .9rem; } .quick-card:hover .quick-card-back, .quick-card:focus-visible .quick-card-back { background-color: #F97316; background-image: linear-gradient(135deg, #FFB347 0%, #F97316 52%, #C2410C 100%); color: #fff; border-color: rgba(255,255,255,.45); box-shadow: 0 20px 46px rgba(249,115,22,.32), 0 12px 34px rgba(17,18,20,.2); } .quick-card-back p { font-size: .87rem; line-height: 1.5; } .quick-card-cta { font-weight: 800; font-size: .82rem; letter-spacing: .01em; } .quick-card:hover .quick-card-cta, .quick-card:focus-visible .quick-card-cta { color: #fff; } .quick-card:hover .quick-card-face, .quick-card:focus-visible .quick-card-face { background: linear-gradient(135deg, #FFB347 0%, #F97316 52%, #C2410C 100%) !important; color: #fff !important; } .quick-card:hover .quick-card-face h3, .quick-card:focus-visible .quick-card-face h3, .quick-card:hover .quick-card-face p, .quick-card:focus-visible .quick-card-face p { color: #fff !important; } @media (prefers-reduced-motion: reduce) { .word-reveal span { opacity: 1; transform: none; animation: none; } .quick-card, .quick-card-front, .scholarship-card, .editorial-link-card, .editorial-link-card strong, .editorial-link-card small, .service-icon, .brand-logo, .brand-logo::before { animation: none; } .quick-card-inner, .quick-card-face::after { transition: none; } } /* ── Gráficas (home) ──────────────────────────────────────── */ .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; transition: transform var(--t), box-shadow var(--t); } .chart-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .chart-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .chart-card-head h3 { font-size: .95rem; display: flex; align-items: center; gap: .5rem; } .chart-table-toggle { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); border-radius: 20px; padding: .3rem .8rem; font-size: .75rem; font-weight: 600; } .chart-table-toggle:hover { color: var(--text); border-color: var(--brand-blue); } .bar-chart { display: flex; flex-direction: column; gap: .55rem; } .bar-row { display: grid; grid-template-columns: 34% 1fr auto; align-items: center; gap: .6rem; border-radius: 6px; } .bar-row:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; } .bar-row-clickable { cursor: pointer; transition: background var(--t); } .bar-row-clickable:hover, .bar-row-clickable:focus-visible { background: var(--surface-2); } .bar-label { font-size: .8rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { background: var(--surface-2); border-radius: 4px; height: 14px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 4px; min-width: 3px; transition: width 480ms ease; } .bar-value { font-size: .78rem; color: var(--text-muted); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; } .donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: center; } .donut { width: 170px; height: 170px; border-radius: 50%; position: relative; flex-shrink: 0; } .donut-hole { position: absolute; inset: 22%; background: var(--surface); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .donut-hole strong { font-size: 1.3rem; color: var(--text); } .donut-hole span { font-size: .68rem; color: var(--text-muted); } .donut-legend { display: flex; flex-direction: column; gap: .5rem; } .donut-legend-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text); padding: .3rem .4rem; border-radius: 6px; } .donut-legend-item .swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } .donut-legend-item small { color: var(--text-muted); } .donut-legend-item-clickable { cursor: pointer; transition: background var(--t); } .donut-legend-item-clickable:hover, .donut-legend-item-clickable:focus-visible { background: var(--surface-2); outline: none; } .chart-table table { width: 100%; font-size: .8rem; border-collapse: collapse; } .chart-table th, .chart-table td { text-align: left; padding: .45rem .3rem; border-bottom: 1px solid var(--border); } .chart-table td:last-child, .chart-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; } #chart-tooltip { position: fixed; z-index: 3000; pointer-events: none; display: none; background: var(--brand-blue-dark); color: #fff; font-size: .78rem; font-weight: 600; padding: .4rem .7rem; border-radius: 6px; box-shadow: var(--shadow-lg); white-space: nowrap; } /* ── Modal (ventana de área de conocimiento) ─────────────────── */ @keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(2px); } .modal-overlay[hidden] { display: none; } .modal-box { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; padding: 1.6rem; position: relative; animation: modal-in 220ms ease; } .modal-box-wide { max-width: min(96vw, 1400px); } #area-modal-body { overflow-y: auto; flex: 1; min-height: 0; } .modal-close { position: absolute; top: .9rem; right: .9rem; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: .9rem; } .modal-close:hover { color: var(--text); border-color: var(--brand-blue); } .modal-box h3 { padding-right: 2.2rem; margin-bottom: 1rem; } .modal-box .nivel-group { margin-bottom: 1.25rem; } .modal-box .nivel-group:last-child { margin-bottom: 0; } .modal-box .nivel-group h4 { margin-bottom: .5rem; } .modal-box .carrera-row { justify-content: space-between; } @media (prefers-reduced-motion: reduce) { .modal-box { animation: none; } } @media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } .bar-row { grid-template-columns: 40% 1fr auto; } } /* ── Filtros ───────────────────────────────────────────────── */ .filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem; } .filters label { font-size: .78rem; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: .25rem; } .filters select, .filters input[type="search"], .filters input[type="text"] { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .75rem; font-size: .88rem; color: var(--text); min-width: 170px; } .filters .filter-field { display: flex; flex-direction: column; } .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { border: 1px solid var(--border); background: var(--surface-2); border-radius: 30px; padding: .4rem .9rem; font-size: .82rem; font-weight: 600; color: var(--text-muted); transition: var(--t); } .chip[aria-pressed="true"], .chip:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .filters .btn-imprimir { margin-left: auto; } /* ── Cabecera de página con acento cálido (niveles académicos) ── */ .page-hero { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 2rem; box-shadow: var(--shadow-sm); } .page-hero::before { content: ''; position: absolute; top: -55%; right: -8%; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(184,110,66,.20), transparent 70%); pointer-events: none; } .page-hero-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: .9rem; background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light)); font-size: 1.6rem; box-shadow: var(--shadow-sm); position: relative; } .page-hero h1, .page-hero p, .page-hero .eyebrow { position: relative; } /* ── Cards de listado (universidades / carreras) ─────────────── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; } .uni-card, .item-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; display: flex; flex-direction: column; gap: .55rem; transition: transform var(--t), box-shadow var(--t); } .uni-card:hover, .item-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .uni-card h3, .item-card h3 { font-size: 1rem; } .uni-card .meta, .item-card .meta { font-size: .8rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: .4rem 1rem; } .uni-card .badges, .item-card .badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; } .card-link-btn { margin-top: auto; align-self: flex-start; font-size: .82rem; font-weight: 700; color: var(--brand-blue); display: inline-flex; align-items: center; gap: .3rem; } [data-theme="dark"] .card-link-btn { color: var(--brand-blue-light); } /* ── Ficha de detalle ─────────────────────────────────────── */ .detail-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; } .detail-links-bar { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 500; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .detail-links-bar-inner { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 1.5rem; } .detail-links-bar-spacer { height: 52px; } .site-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 30px; padding: .5rem 1rem; } .detail-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-top: 1rem; } .detail-meta-grid .item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem .75rem; text-align: center; transition: transform var(--t), box-shadow var(--t); } .detail-meta-grid .item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); } .detail-meta-grid .item .icon { display: block; font-size: 1.5rem; margin-bottom: .35rem; } .detail-meta-grid .item .label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .detail-meta-grid .item .value { font-size: 1.1rem; font-weight: 700; color: var(--brand-blue); margin-top: .15rem; } .nivel-group { margin-bottom: 1.75rem; } .nivel-group h2, .nivel-group h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; font-size: 1.05rem; } .carrera-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); font-size: .88rem; width: 100%; background: none; border-left: none; border-right: none; border-top: none; text-align: left; color: var(--text); font-family: inherit; } .carrera-row:last-child { border-bottom: none; } .carrera-row .nombre { font-weight: 600; flex: 1 1 220px; } .carrera-row .titulo { color: var(--text-muted); font-size: .82rem; } .carrera-row-clickable { cursor: pointer; transition: background var(--t); } /* Franjas cada 4 filas: blanco alternado con un color pastel (ciclo de 8) */ .list-panel .carrera-row:nth-child(8n+1), .list-panel .carrera-row:nth-child(8n+2), .list-panel .carrera-row:nth-child(8n+3), .list-panel .carrera-row:nth-child(8n+4) { background: var(--pastel-1); } .list-panel .carrera-row:nth-child(8n+5), .list-panel .carrera-row:nth-child(8n+6), .list-panel .carrera-row:nth-child(8n+7), .list-panel .carrera-row:nth-child(8n) { background: var(--pastel-2); } .list-panel .carrera-row-clickable:hover, .list-panel .carrera-row-clickable:focus-visible { background: var(--surface-2); } .modal-back { font-size: .85rem; font-weight: 600; margin-bottom: 1rem; cursor: pointer; padding: 0; } .list-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } /* ── Tabla / directorio ────────────────────────────────────── */ .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; font-size: .87rem; } th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--border); } th { background: var(--surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } tr:last-child td { border-bottom: none; } .table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } /* ── Tabla "Datos Generales" (modal ancho, cabecera y filas fijas) ── */ .dg-layout { display: flex; gap: 1.1rem; align-items: flex-start; } .dg-col-menu { flex: 0 0 180px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; max-height: 65vh; overflow-y: auto; } .dg-col-menu h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .8rem; } .dg-col-menu label { display: flex; align-items: center; gap: .5rem; font-size: .84rem; margin-bottom: .65rem; cursor: pointer; } .dg-table-wrap { flex: 1; min-width: 0; max-height: 65vh; overflow: auto; } .dg-table-wrap table { border-collapse: separate; border-spacing: 0; } .dg-table-wrap thead th { position: sticky; top: 0; z-index: 2; background: #1E3A8A; color: #fff; white-space: nowrap; } .dg-table-wrap tbody tr:nth-child(8n+1), .dg-table-wrap tbody tr:nth-child(8n+2), .dg-table-wrap tbody tr:nth-child(8n+3), .dg-table-wrap tbody tr:nth-child(8n+4) { background: var(--pastel-1); } .dg-table-wrap tbody tr:nth-child(8n+5), .dg-table-wrap tbody tr:nth-child(8n+6), .dg-table-wrap tbody tr:nth-child(8n+7), .dg-table-wrap tbody tr:nth-child(8n) { background: var(--pastel-2); } .dg-table-wrap tfoot td { position: sticky; bottom: 0; z-index: 2; background: #1E3A8A; color: #fff; font-weight: 700; border-bottom: none; } .dg-table-wrap .dg-col-fija { position: sticky; left: 0; z-index: 1; white-space: nowrap; font-weight: 600; } .dg-table-wrap thead .dg-col-fija { z-index: 3; } .dg-table-wrap tfoot .dg-col-fija { z-index: 3; } .dg-table-wrap tbody tr:nth-child(8n+1) .dg-col-fija, .dg-table-wrap tbody tr:nth-child(8n+2) .dg-col-fija, .dg-table-wrap tbody tr:nth-child(8n+3) .dg-col-fija, .dg-table-wrap tbody tr:nth-child(8n+4) .dg-col-fija { background: var(--pastel-1); } .dg-table-wrap tbody tr:nth-child(8n+5) .dg-col-fija, .dg-table-wrap tbody tr:nth-child(8n+6) .dg-col-fija, .dg-table-wrap tbody tr:nth-child(8n+7) .dg-col-fija, .dg-table-wrap tbody tr:nth-child(8n) .dg-col-fija { background: var(--pastel-2); } .dg-print-fab { position: absolute; bottom: 1.2rem; right: 1.5rem; z-index: 20; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--brand-blue); color: #fff; font-size: 1.15rem; box-shadow: var(--shadow-lg); cursor: pointer; } .dg-print-fab:hover { background: var(--brand-blue-dark); } /* ── Provincias (listado en dos columnas) ────────────────────── */ .map-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: start; } .map-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; max-height: 520px; overflow-y: auto; } .map-side-list { max-height: none; overflow-y: visible; } .map-side h3 { margin-bottom: .75rem; } .map-side .empty-hint { color: var(--text-muted); font-size: .88rem; } .province-uni-item { padding: .6rem 0; border-bottom: 1px solid var(--border); cursor: pointer; } .province-uni-item:last-child { border-bottom: none; } .province-uni-item:hover { color: var(--brand-blue); } .breadcrumb-trail { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .82rem; color: var(--text-muted); margin-bottom: .75rem; } .breadcrumb-trail button { color: var(--brand-blue); font-weight: 600; } [data-theme="dark"] .breadcrumb-trail button { color: var(--brand-blue-light); } /* ── Formularios ───────────────────────────────────────────── */ .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; max-width: 560px; } .form-field { margin-bottom: 1.1rem; } .form-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; } .form-field input, .form-field textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .8rem; font-size: .92rem; color: var(--text); transition: border-color var(--t); } .form-field input:focus, .form-field textarea:focus { border-color: var(--brand-blue); } .form-field textarea { min-height: 110px; resize: vertical; } .form-field .error-msg { color: var(--error); font-size: .78rem; margin-top: .3rem; display: none; } .form-field.has-error input, .form-field.has-error textarea { border-color: var(--error); } .form-field.has-error .error-msg { display: block; } .honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pago-metodos { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.1rem; } .pago-deuna, .pago-paypal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; flex: 1 1 220px; } .pago-deuna img { max-width: 220px; width: 100%; border-radius: var(--radius-sm); } .pago-deuna p, .pago-paypal p { font-size: .85rem; color: var(--text-muted); margin: 0; max-width: 32ch; } .pago-paypal .btn { background: #0070BA; } .pago-paypal .btn:hover { background: #005ea6; } .pago-tarjetas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .2rem; } .pago-tarjetas svg { display: block; height: auto; } .asesoria-agenda-layout { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; } .asesoria-agenda-layout .form-card { flex: 2 1 380px; } .asesoria-whatsapp-card { flex: 1 1 240px; position: sticky; top: calc(var(--header-h) + 1rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; } .asesoria-whatsapp-card .icon { font-size: 2rem; } .asesoria-whatsapp-card h3 { font-size: 1rem; margin: 0; } .asesoria-whatsapp-card p { font-size: .85rem; color: var(--text-muted); margin: 0; } .btn-whatsapp { background: #25D366; } .btn-whatsapp:hover { background: #1ebd5a; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: none; border-radius: 30px; padding: .75rem 1.6rem; font-size: .92rem; font-weight: 700; background: var(--brand-blue); color: #fff; transition: transform var(--t), background var(--t); } .btn:hover { background: var(--brand-blue-dark); text-decoration: none; } .btn:active { transform: scale(.98); } .btn.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn.btn-danger { background: var(--error); } .btn.btn-sm { padding: .45rem 1rem; font-size: .82rem; } .form-msg { padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 1rem; display: none; } .form-msg.ok { display: block; background: #DCFCE7; color: #166534; } .form-msg.error { display: block; background: #FEE2E2; color: #991B1B; } /* ── Admin ─────────────────────────────────────────────────── */ .admin-shell { min-height: 100vh; display: flex; flex-direction: column; } .admin-bar { background: var(--brand-blue-dark); color: #fff; padding: .8rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .admin-bar .container { display: flex; align-items: center; gap: 1rem; width: 100%; } .admin-login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem; } .admin-table-actions { display: flex; gap: .4rem; } /* ── Ecosistema / footer ───────────────────────────────────── */ .ecosystem-row { display: flex; flex-wrap: wrap; gap: .9rem; } .eco-btn { display: inline-flex; align-items: center; gap: .55rem; background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: .6rem 1.2rem; font-weight: 700; font-size: .88rem; } .eco-btn:hover { border-color: var(--brand-blue); text-decoration: none; } .services-strip { position: sticky; top: var(--header-h); z-index: 900; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem; max-height: 0; opacity: 0; overflow: hidden; padding: 0 1.5rem; background: linear-gradient(135deg, #FB923C, #EA580C); border-bottom: 1px solid rgba(0,0,0,.12); box-shadow: 0 12px 30px rgba(17,18,20,.18); margin-top: 0; margin-bottom: 0; transition: max-height .5s ease, opacity .4s ease, padding .5s ease, margin-top .5s ease, margin-bottom .5s ease; } .services-strip.is-visible { max-height: 140px; opacity: 1; padding: .85rem 1.5rem; margin-top: 2.5rem; margin-bottom: 4rem; } .services-strip::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 10px, transparent 10px 22px); background-size: 200% 100%; animation: services-strip-lines 2.2s linear infinite; } @keyframes services-strip-lines { from { background-position: 0 0; } to { background-position: -22px 0; } } @media (prefers-reduced-motion: reduce) { .services-strip::before { animation: none; } } .services-strip-item, .services-strip-close { position: relative; z-index: 1; } .services-strip-item { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; } .services-strip-item small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.2); } .services-strip-item-cta small { color: #fff; } .services-strip-item-ia .eco-btn { background: linear-gradient(135deg, #C4B5FD, #7C3AED); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(124,58,237,.38); } .services-strip-item-web .eco-btn { background: linear-gradient(135deg, #93C5FD, #2563EB); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(37,99,235,.38); } .services-strip-item-editorial .eco-btn { background: linear-gradient(135deg, #6EE7B7, #059669); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(5,150,105,.38); } @keyframes services-strip-attn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .services-strip .eco-btn, .services-strip .services-strip-cta { animation: services-strip-attn 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); } @keyframes services-strip-icon-spin { 0% { transform: rotate(0deg); filter: drop-shadow(0 0 0 rgba(59,130,246,0)); } 50% { transform: rotate(180deg); filter: drop-shadow(0 0 8px rgba(59,130,246,.95)); } 100% { transform: rotate(360deg); filter: drop-shadow(0 0 0 rgba(59,130,246,0)); } } .services-strip .strip-icon { display: inline-block; animation: services-strip-icon-spin 2.4s linear infinite; animation-delay: calc(var(--i, 0) * .3s); } @media (prefers-reduced-motion: reduce) { .services-strip .strip-icon { animation: none; } } .services-strip-cta { display: inline-flex; align-items: center; gap: .5rem; background: linear-gradient(135deg, #FF4D5E, #D1122E); color: #fff; font-weight: 800; padding: .55rem 1.1rem; border-radius: 30px; font-size: .85rem; box-shadow: 0 10px 24px rgba(209,18,46,.5); } .services-strip-cta:hover { text-decoration: none; color: #fff; } .services-strip-close { flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,.85); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; } .services-strip-close:hover { color: #fff; } @media (prefers-reduced-motion: reduce) { .services-strip .eco-btn, .services-strip .services-strip-cta { animation: none; } } /* ── Página de Asesoría ───────────────────────────────────── */ .asesoria-hero { background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue)); color: #fff; border-radius: var(--radius-lg); padding: 2.5rem 2rem; margin-bottom: 2.5rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; } .asesoria-hero .eyebrow { color: var(--brand-gold); } .asesoria-hero h1 { color: #fff; margin-bottom: .6rem; } .asesoria-hero-text { flex: 1 1 320px; } .asesoria-hero p { color: rgba(255,255,255,.86); max-width: 46ch; } .asesoria-price { text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); padding: 1.4rem 1.9rem; flex-shrink: 0; } .asesoria-price .num { font-size: 2.6rem; font-weight: 900; line-height: 1; } .asesoria-price .unit { font-size: .8rem; color: rgba(255,255,255,.7); display: block; margin-top: .3rem; } .asesoria-price .btn { margin-top: 1rem; width: 100%; white-space: nowrap; background: linear-gradient(135deg, #E2C58E, #B86E42); color: #17181B; font-weight: 800; } .asesoria-price .btn:hover { filter: brightness(1.08); } .asesoria-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: 1.5rem 0 2.5rem; } .asesoria-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; } .asesoria-feature .icon { font-size: 1.6rem; } .asesoria-feature h3 { font-size: 1rem; } .asesoria-feature p { color: var(--text-muted); font-size: .88rem; line-height: 1.5; margin: 0; } .asesoria-steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 1.5rem 0 2.5rem; } .asesoria-step { position: relative; padding-left: 2.6rem; } .asesoria-step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; } .asesoria-step h3 { font-size: .95rem; margin-bottom: .3rem; } .asesoria-step p { color: var(--text-muted); font-size: .86rem; margin: 0; } .asesoria-final-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 2rem; margin-bottom: 2.5rem; } .asesoria-final-cta p { margin: 0; color: var(--text-muted); max-width: 44ch; } .scholarships-section { position: relative; margin-top: 2.8rem; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2.7rem max(1.5rem, calc((100vw - 1360px) / 2 + 1.5rem)); overflow: hidden; background: radial-gradient(circle at 10% 0%, rgba(255,219,139,.26), transparent 24rem), radial-gradient(circle at 96% 16%, rgba(184,110,66,.24), transparent 22rem), linear-gradient(135deg, rgba(17,18,20,.94) 0%, rgba(39,39,42,.88) 48%, rgba(91,57,38,.86) 100%); border-block: 1px solid rgba(226,197,142,.28); box-shadow: 0 28px 70px rgba(17,18,20,.22), inset 0 1px 0 rgba(255,255,255,.14); } .scholarships-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 20% 100%, 100% 50%; opacity: .18; } .scholarships-section > * { position: relative; z-index: 1; } .scholarships-head { max-width: 820px; margin-inline: 0 auto; text-align: left; } .scholarships-head h2 { color: #fff; } .scholarships-head p { max-width: 760px; margin-inline: 0 auto; color: rgba(255,255,255,.78); } .scholarships-head .word-reveal { justify-content: flex-start; } .scholarships-head .eyebrow { color: #FFD98D; } .scholarships-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.4rem; margin-top: 2rem; } .scholarship-card { position: relative; min-height: 230px; padding: 1.35rem 1rem 1.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem; text-align: center; border-radius: 8px; background: #fff; color: var(--text); border: 1px solid rgba(17,18,20,.05); box-shadow: 0 10px 24px rgba(17,18,20,.08); animation: scholarship-step 7.8s ease-in-out infinite; transform-style: preserve-3d; transition: transform 620ms cubic-bezier(.4,.15,.2,1), box-shadow var(--t), border-color var(--t); } @keyframes scholarship-step { 0%, 9%, 100% { translate: 0 0; } 4% { translate: 0 -10px; } } .scholarship-card:nth-child(1) { animation-delay: 0s; } .scholarship-card:nth-child(2) { animation-delay: .35s; } .scholarship-card:nth-child(3) { animation-delay: .7s; } .scholarship-card:nth-child(4) { animation-delay: 1.05s; } .scholarship-card:nth-child(5) { animation-delay: 1.4s; } .scholarship-card:nth-child(6) { animation-delay: 1.75s; } .scholarship-card:nth-child(7) { animation-delay: 2.1s; } .scholarship-card:nth-child(8) { animation-delay: 2.45s; } .scholarship-card:nth-child(9) { animation-delay: 2.8s; } .scholarship-card:nth-child(10) { animation-delay: 3.15s; } .scholarship-card:nth-child(11) { animation-delay: 3.5s; } .scholarship-card:nth-child(12) { animation-delay: 3.85s; } .scholarship-card:nth-child(13) { animation-delay: 4.2s; } .scholarship-card > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .scholarship-card::after { content: attr(data-desc) "\A\A Visitar sitio"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.25rem; border-radius: inherit; background: linear-gradient(135deg, #FFB347 0%, #F97316 52%, #C2410C 100%); color: #fff; white-space: pre-line; text-align: center; font-size: .86rem; font-weight: 800; line-height: 1.45; text-shadow: 0 2px 10px rgba(83,26,5,.32); transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; } [data-theme="dark"] .scholarship-card { background: rgba(32,34,38,.92); border-color: rgba(255,255,255,.1); } .scholarship-card:hover, .scholarship-card:focus-visible { transform: translateY(-5px) rotateY(180deg); text-decoration: none; border-color: rgba(249,115,22,.38); box-shadow: 0 20px 42px rgba(17,18,20,.14), 0 10px 26px rgba(249,115,22,.16); } .scholarship-logo { width: 70px; height: 70px; border-radius: 999px; background: #fff; border: 1px solid rgba(17,18,20,.08); box-shadow: 0 8px 20px rgba(17,18,20,.1); object-fit: contain; padding: .45rem; } .scholarship-card h3 { min-height: 2.6em; display: flex; align-items: center; justify-content: center; font-size: 1.02rem; line-height: 1.18; color: var(--text); } .scholarship-link { color: #F97316; font-weight: 900; font-size: .88rem; text-transform: capitalize; } .scholarship-link::before { content: "↗"; margin-right: .35rem; color: var(--text); font-weight: 900; } .editorial-section { margin-top: 2.8rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: stretch; padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,247,237,.82)), radial-gradient(circle at 100% 0%, rgba(249,115,22,.18), transparent 24rem); border: 1px solid rgba(249,115,22,.18); box-shadow: var(--shadow); } [data-theme="dark"] .editorial-section { background: linear-gradient(135deg, rgba(32,34,38,.94), rgba(39,28,21,.88)), radial-gradient(circle at 100% 0%, rgba(249,115,22,.22), transparent 24rem); border-color: rgba(255,255,255,.1); } .editorial-author { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.15rem; } .editorial-photo { width: 92px; height: 92px; border-radius: 24px; object-fit: cover; object-position: center; border: 3px solid rgba(255,255,255,.85); background: #fff; box-shadow: 0 16px 34px rgba(30,58,138,.22); flex: 0 0 auto; } .editorial-copy { max-width: 920px; } .editorial-copy h2 { font-size: clamp(1.45rem, 2.5vw, 2.15rem); margin-bottom: .75rem; } .editorial-copy p { color: var(--text-muted); line-height: 1.7; margin-top: .7rem; } .editorial-personal-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; color: #F97316; font-weight: 900; } .editorial-personal-link::before { content: "↗"; color: var(--brand-blue-dark); } .editorial-personal-link:hover { color: #C2410C; text-decoration: none; } [data-theme="dark"] .editorial-personal-link::before { color: #fff; } .editorial-signature { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-top: .35rem; } .editorial-signature strong { color: var(--brand-blue-dark); } [data-theme="dark"] .editorial-signature strong { color: #fff; } .editorial-signature span { color: #F97316; font-weight: 800; } .editorial-links { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .8rem; padding: 1.25rem; border-radius: var(--radius-lg); background: radial-gradient(circle at 10% 0%, rgba(255,219,139,.26), transparent 24rem), radial-gradient(circle at 96% 16%, rgba(184,110,66,.24), transparent 22rem), linear-gradient(135deg, rgba(17,18,20,.94) 0%, rgba(39,39,42,.88) 48%, rgba(91,57,38,.86) 100%); border: 1px solid rgba(226,197,142,.28); box-shadow: 0 28px 70px rgba(17,18,20,.18), inset 0 1px 0 rgba(255,255,255,.14); } .editorial-links::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 33.333% 100%, 100% 50%; opacity: .18; } .editorial-links > * { position: relative; z-index: 1; } [data-theme="dark"] .editorial-links { background: radial-gradient(circle at 10% 0%, rgba(255,219,139,.26), transparent 24rem), radial-gradient(circle at 96% 16%, rgba(184,110,66,.24), transparent 22rem), linear-gradient(135deg, rgba(17,18,20,.94) 0%, rgba(39,39,42,.88) 48%, rgba(91,57,38,.86) 100%); border-color: rgba(226,197,142,.28); } .editorial-links h3 { font-size: 1.15rem; margin-bottom: .25rem; color: #fff; } .editorial-links .eyebrow { color: #FFD98D; } .editorial-link-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: center; padding: .95rem; border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); transition: transform var(--t), background var(--t), color var(--t), border-color var(--t), box-shadow var(--t); animation: project-card-step 6s ease-in-out infinite; animation-delay: var(--project-delay, 0s); will-change: transform, background, color, box-shadow; } .editorial-link-card:nth-of-type(2) { --project-delay: 2s; } .editorial-link-card:nth-of-type(3) { --project-delay: 4s; } @keyframes project-card-step { 0%, 18%, 100% { transform: translateY(0) scale(1); background: var(--surface); color: var(--text); box-shadow: none; border-color: var(--border); } 7% { transform: translateY(-7px) scale(1.025); background: linear-gradient(135deg, #F97316, #C2410C); color: #fff; box-shadow: 0 18px 38px rgba(249,115,22,.3); border-color: rgba(255,216,77,.62); } } @keyframes project-card-text-step { 0%, 18%, 100% { color: inherit; } 7% { color: #fff; } } .editorial-link-card:hover { transform: translateY(-2px); text-decoration: none; border-color: rgba(249,115,22,.5); box-shadow: 0 14px 32px rgba(249,115,22,.16); } .editorial-link-card.editorial-link-card-cta, .editorial-link-card.editorial-link-card-cta strong, .editorial-link-card.editorial-link-card-cta small { animation: none; } .editorial-link-card.editorial-link-card-cta { background: linear-gradient(135deg, #FFB347, #F97316); border-color: transparent; } .editorial-link-card.editorial-link-card-cta strong, .editorial-link-card.editorial-link-card-cta small { color: #fff; } .editorial-link-card.editorial-link-card-cta .service-icon { background: rgba(255,255,255,.25); } .editorial-link-card.editorial-link-card-cta:hover { border-color: transparent; box-shadow: 0 14px 32px rgba(249,115,22,.4); } .editorial-link-card.editorial-link-card-cta:hover strong, .editorial-link-card.editorial-link-card-cta:hover small { color: #fff; } .editorial-link-card strong { display: block; color: var(--brand-blue-dark); font-size: .96rem; animation: project-card-text-step 6s ease-in-out infinite; animation-delay: var(--project-delay, 0s); } [data-theme="dark"] .editorial-link-card strong { color: #fff; } .editorial-link-card:hover strong, .editorial-link-card:hover small { color: #fff; } .editorial-link-card small { display: block; color: var(--text-muted); line-height: 1.35; margin-top: .15rem; animation: project-card-text-step 6s ease-in-out infinite; animation-delay: var(--project-delay, 0s); } .register-section { position: relative; overflow: hidden; margin-top: 2.8rem; padding: clamp(1.25rem, 2.8vw, 1.9rem); border-radius: var(--radius-lg); background: radial-gradient(circle at 10% 0%, rgba(255,219,139,.26), transparent 24rem), radial-gradient(circle at 96% 16%, rgba(184,110,66,.24), transparent 22rem), linear-gradient(135deg, rgba(17,18,20,.94) 0%, rgba(39,39,42,.88) 48%, rgba(91,57,38,.86) 100%); border: 1px solid rgba(226,197,142,.28); box-shadow: 0 28px 70px rgba(17,18,20,.2), inset 0 1px 0 rgba(255,255,255,.12); } [data-theme="dark"] .register-section { background: radial-gradient(circle at 10% 0%, rgba(255,219,139,.26), transparent 24rem), radial-gradient(circle at 96% 16%, rgba(184,110,66,.24), transparent 22rem), linear-gradient(135deg, rgba(17,18,20,.94) 0%, rgba(39,39,42,.88) 48%, rgba(91,57,38,.86) 100%); border-color: rgba(226,197,142,.28); } .register-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 20% 100%, 100% 50%; opacity: .18; } .register-section > * { position: relative; z-index: 1; } .register-head { margin-bottom: 1rem; } .register-head h2 { color: #fff; } .register-head .eyebrow { color: #FFD98D; } .register-head p:not(.register-legend) { color: rgba(255,255,255,.78); } .register-legend { display: inline-flex; width: fit-content; margin-top: .35rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(255,216,77,.16); color: #FFD84D !important; font-weight: 900; letter-spacing: .01em; } [data-theme="dark"] .register-legend { background: rgba(255,216,77,.14); color: #FFD84D !important; } .register-form { display: grid; grid-template-columns: 1.1fr 1.1fr .9fr 1fr auto; gap: .8rem; align-items: end; margin-top: 1rem; } .register-form .form-field { margin-bottom: 0; } .register-form select { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .8rem; font-size: .92rem; color: var(--text); } .register-form select:focus { border-color: var(--brand-blue); outline: none; } .register-form textarea { min-height: 44px; height: 44px; resize: vertical; } .form-field-wide { grid-column: 1 / 5; } .register-submit { grid-column: 5; justify-self: stretch; align-self: end; min-height: 44px; white-space: nowrap; background: linear-gradient(135deg, #F97316, #C2410C); box-shadow: 0 14px 30px rgba(249,115,22,.24); } .register-submit:hover { background: linear-gradient(135deg, #FFB347, #F97316); } .services-section { margin-top: 2.8rem; padding: 2rem; border-radius: var(--radius-lg); background: radial-gradient(circle at 15% 0%, rgba(255,216,77,.22), transparent 28%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,246,241,.78)); border: 1px solid rgba(255,255,255,.64); box-shadow: var(--shadow); } [data-theme="dark"] .services-section { background: radial-gradient(circle at 15% 0%, rgba(249,115,22,.22), transparent 28%), linear-gradient(135deg, rgba(32,34,38,.92), rgba(17,18,20,.78)); border-color: rgba(255,255,255,.12); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.25rem; } .service-card { min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.35rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t); } .service-card:hover { transform: translateY(-4px); text-decoration: none; border-color: rgba(249,115,22,.55); box-shadow: 0 18px 42px rgba(249,115,22,.2), var(--shadow); background: linear-gradient(135deg, #fff, #FFF7ED); } [data-theme="dark"] .service-card:hover { background: linear-gradient(135deg, rgba(42,42,40,.98), rgba(78,35,14,.84)); } .service-icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1E3A8A, #F97316); color: #fff; font-weight: 900; font-size: .82rem; letter-spacing: .04em; box-shadow: 0 14px 30px rgba(30,58,138,.24); animation: project-icon-step 6s ease-in-out infinite; animation-delay: var(--project-delay, 0s); } @keyframes project-icon-step { 0%, 18%, 100% { background: linear-gradient(135deg, #1E3A8A, #F97316); color: #fff; box-shadow: 0 14px 30px rgba(30,58,138,.24); } 7% { background: linear-gradient(135deg, #FFD84D, #fff); color: #8A2C0A; box-shadow: 0 14px 34px rgba(255,216,77,.34); } } .service-kicker { color: #C2410C; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; } .service-card h3 { font-size: 1.2rem; color: var(--brand-blue-dark); } [data-theme="dark"] .service-card h3 { color: #fff; } .service-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.55; flex: 1; } .service-cta { margin-top: .35rem; color: #F97316; font-weight: 900; font-size: .86rem; } footer { position: relative; overflow: hidden; background: var(--hero-gradient); color: rgba(255,255,255,.85); padding: 3rem 0 1.5rem; margin-top: 2rem; border-top: 1px solid rgba(215,216,212,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 25% 100%, 100% 50%; opacity: .24; } footer > .container { position: relative; z-index: 1; } footer .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.14); } footer h4 { color: #fff; margin-bottom: .8rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; } footer a { color: rgba(255,255,255,.78); } footer a:hover { color: #fff; } footer li { margin-bottom: .5rem; font-size: .87rem; } footer .free-note { font-size: .82rem; color: rgba(255,255,255,.65); margin-top: .6rem; } .footer-asesoria { background: rgba(201,164,106,.09); border: 1px solid rgba(201,164,106,.35); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .footer-asesoria-list { list-style: none; margin: .7rem 0; padding: 0; font-size: .82rem; } .footer-asesoria-list li { margin-bottom: .35rem; padding-left: 1.3rem; position: relative; color: rgba(255,255,255,.82); } .footer-asesoria-list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-gold); font-weight: 700; } .footer-asesoria-cta { display: inline-flex; align-items: center; gap: .4rem; background: linear-gradient(135deg, #E2C58E, #B86E42); color: #17181B; font-weight: 800; padding: .6rem 1.1rem; border-radius: 999px; font-size: .85rem; box-shadow: 0 10px 24px rgba(184,110,66,.32), inset 0 1px 0 rgba(255,255,255,.42); transition: transform var(--t), box-shadow var(--t); } .footer-asesoria-cta:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 14px 32px rgba(184,110,66,.42), inset 0 1px 0 rgba(255,255,255,.42); color: #17181B; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: 1.25rem; font-size: .8rem; color: rgba(255,255,255,.6); } .social-row { display: flex; gap: .6rem; margin-top: .6rem; } .social-row a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; } .social-row a:hover { background: var(--brand-gold); color: var(--brand-blue-dark); } .whatsapp-fab { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1500; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); font-size: 1.5rem; transition: transform var(--t); } .whatsapp-fab:hover { transform: scale(1.08); text-decoration: none; } /* ── Utilidades ────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .loading-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); font-size: .9rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } .map-overlay-close { display: none; } .map-overlay-backdrop { display: none; } .map-side-results.is-open { display: block; position: fixed; inset: 4vh 3vw; z-index: 2100; max-height: none; width: auto; box-shadow: var(--shadow-lg); animation: modal-in 220ms ease; } .map-side-results.is-open #map-side-content { overflow-y: auto; max-height: calc(100vh - 8vh - 3.2rem); } .map-side-results.is-open .map-overlay-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: .7rem; right: .7rem; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: .9rem; z-index: 1; } .map-side-results.is-open .map-overlay-close:hover { color: var(--text); border-color: var(--brand-blue); } .map-overlay-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 2050; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); } body.map-overlay-locked { overflow: hidden; } } @media (max-width: 780px) { #area-modal .modal-box { max-height: 94vh; } .dg-layout { flex-direction: column; align-items: stretch; } .dg-col-menu { flex: 0 0 auto; width: 100%; max-height: none; display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: .3rem; } .dg-col-menu h4 { width: 100%; margin-bottom: .3rem; } .dg-col-menu label { margin-bottom: 0; font-size: .78rem; } .dg-table-wrap { max-height: 36vh; } .dg-table-wrap table { font-size: .74rem; } .dg-table-wrap th, .dg-table-wrap td { padding: .5rem .55rem; } .dg-table-wrap .dg-col-fija { max-width: 108px; width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; background: var(--surface); } .dg-table-wrap thead .dg-col-fija, .dg-table-wrap tfoot .dg-col-fija { background: #1E3A8A; } .dg-print-fab { position: static; width: auto; height: auto; border-radius: 8px; padding: .5rem .9rem; margin-bottom: .75rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; } .dg-print-fab::after { content: "Imprimir"; font-size: .82rem; font-weight: 700; } .services-strip { justify-content: space-between; flex-wrap: nowrap; gap: .8rem; } .services-strip-item { display: none; flex: 1 1 auto; min-width: 0; } .services-strip-item.is-current { display: inline-flex; animation: strip-item-fade .35s ease; } .services-strip-item.is-current small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @keyframes strip-item-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } #nav-toggle { display: block; } .brand-logo { width: 42px; height: 42px; border-radius: 12px; font-size: 1.05rem; } .brand-sub { display: none; } .topbar-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--border); flex-direction: column; padding: .75rem 1rem 1rem; gap: .35rem; box-shadow: var(--shadow-lg); } .topbar-nav a { color: #111214; padding: .62rem .8rem; } .topbar-nav.is-open { display: flex; } .search-wrap { display: none; } #hero { padding: .85rem; } .carousel { height: 640px; min-height: 640px; border-radius: 18px; } .carousel-slide { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .carousel-panel { padding: 1.6rem; } .carousel-panel h2 { font-size: clamp(1.45rem, 8vw, 2.35rem); max-width: 14ch; } .carousel-stat-num { font-size: clamp(3rem, 18vw, 4.6rem); } .carousel-nav { width: 38px; height: 38px; } .carousel-prev { left: .75rem; } .carousel-next { right: .75rem; } .carousel-photo-credit { display: none; } .editorial-section { grid-template-columns: 1fr; } .register-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-field-wide { grid-column: 1 / -1; } .register-submit { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 560px) { .quick-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .quick-card { height: 180px; } .quick-card-face { padding: .9rem; } .quick-card-front h3 { font-size: .9rem; padding-bottom: .4rem; } .quick-card-front p { font-size: .74rem; line-height: 1.35; } .quick-card-back p { font-size: .74rem; line-height: 1.35; } .quick-card-cta { font-size: .74rem; } .carousel { height: 610px; min-height: 610px; border-radius: 16px; } .carousel-panel p { font-size: .9rem; } .carousel-cta { padding: .68rem 1.1rem; } .detail-header { flex-direction: column; } .filters { flex-direction: column; align-items: stretch; } .filters select, .filters input { min-width: 0; width: 100%; } .register-form { grid-template-columns: 1fr; } .form-field-wide, .register-submit { grid-column: auto; } .register-submit { justify-self: stretch; } } /* ── Impresión ────────────────────────────────────────────── */ @media print { #topbar, footer, .whatsapp-fab, .back-link, .table-toolbar .btn, #btn-theme, .filters, .btn-imprimir { display: none !important; } body { background: #fff; color: #000; } .table-wrap { border: none; } th { background: #eee !important; -webkit-print-color-adjust: exact; } .page-hero { background: #fff; border-color: #ccc; box-shadow: none; } .page-hero::before { display: none; } .nivel-group { break-inside: avoid; } .modal-overlay:not([hidden]) { position: static; background: none; padding: 0; } .modal-overlay:not([hidden]) .modal-box { max-width: none !important; max-height: none !important; box-shadow: none; position: static; overflow: visible; } .dg-table-wrap { max-height: none !important; overflow: visible; } .dg-table-wrap thead th, .dg-table-wrap tfoot td, .dg-col-fija { position: static !important; } .dg-col-menu { display: none !important; } .modal-close { display: none !important; } }