.certificate { max-width: 780px; margin: 3rem auto; padding: clamp(2rem,6vw,5rem); text-align: center; border: 2px solid #cfa862; border-radius: 18px; background: #fffdf8; box-shadow: 0 20px 55px rgba(12,23,48,.11); }
.certificate img { display: block; margin: 0 auto 1.5rem; }
.certificate h1 { color: #10243e; font-size: clamp(2rem,5vw,3.5rem); }
.certificate h2 { color: #9d6a26; font-size: clamp(1.7rem,4vw,2.7rem); }
.certificate p { line-height: 1.7; overflow-wrap: anywhere; }
.office-route { width:min(1180px,calc(100% - 32px)); margin:clamp(28px,5vw,64px) auto; padding:clamp(24px,4vw,42px); border:1px solid #dbe4ec; border-radius:24px; background:linear-gradient(145deg,#fff 0%,#f7f2e8 100%); box-shadow:0 20px 55px rgba(12,23,48,.08); color:#10243e; }
.office-route__head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; }
.office-route__head span,.office-route__level,.office-route__bundle>span { color:#a16f2d; font-size:.7rem; font-weight:850; letter-spacing:.16em; }
.office-route__head h2 { margin:7px 0 8px; font-size:clamp(1.8rem,3vw,2.65rem); letter-spacing:-.04em; }
.office-route__head p { margin:0; color:#617286; }
.office-route__head>a { white-space:nowrap; font-weight:800; }
.office-route__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.office-route__card { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-width:0; min-height:276px; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:19px; color:#fff; box-shadow:0 16px 34px rgba(7,29,48,.19); transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .38s ease; animation:routeCardIn .75s cubic-bezier(.2,.8,.2,1) both; }
.office-route__card:nth-child(2) { animation-delay:.1s; }
.office-route__card:nth-child(3) { animation-delay:.2s; }
.office-route__card--basic { background:radial-gradient(circle at 88% 8%,rgba(53,167,255,.62),transparent 38%),linear-gradient(145deg,#071d3e 0%,#0a4f86 68%,#1685bd 100%); }
.office-route__card--intermediate { background:radial-gradient(circle at 88% 8%,rgba(68,213,163,.48),transparent 39%),linear-gradient(145deg,#082b38 0%,#08635f 66%,#179979 100%); }
.office-route__card--advanced { background:radial-gradient(circle at 88% 8%,rgba(245,190,91,.55),transparent 38%),linear-gradient(145deg,#111a35 0%,#403355 58%,#8a6022 100%); }
.office-route__card:before { content:''; position:absolute; z-index:-1; width:230px; height:230px; top:-145px; right:-80px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 32px rgba(255,255,255,.035),0 0 0 66px rgba(255,255,255,.025); animation:routeGlow 7s ease-in-out infinite; }
.office-route__card:after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,transparent 27%,rgba(2,13,28,.83) 100%); }
.office-route__content { position:relative; z-index:2; width:100%; padding:27px 24px 24px; }
.office-route__grid h3 { margin:9px 0 17px; color:#fff; font-size:1.2rem; }
.office-route__grid strong { display:block; color:#fff; font-size:1.95rem; letter-spacing:-.04em; }
.office-route__grid p { margin:7px 0 12px; color:rgba(255,255,255,.78); font-size:.9rem; }
.office-route__grid small { color:#ffd485; font-weight:800; }
.office-route__card .office-route__level { color:#ffd485; }
.office-route__apps { position:absolute; z-index:3; top:22px; left:22px; display:flex; gap:9px; }
.office-route__apps i { display:grid; place-items:center; width:43px; height:43px; border:1px solid rgba(255,255,255,.28); border-radius:12px; color:#fff; font-size:1.05rem; font-style:normal; font-weight:900; box-shadow:0 10px 22px rgba(0,0,0,.18); backdrop-filter:blur(8px); animation:officeAppFloat 4.2s ease-in-out infinite; }
.office-route__apps i:nth-child(2) { animation-delay:-1.35s; }
.office-route__apps i:nth-child(3) { animation-delay:-2.7s; }
.office-route__apps .app-word { background:linear-gradient(145deg,#2b7cd3,#104d9a); }
.office-route__apps .app-excel { background:linear-gradient(145deg,#24a366,#0c7040); }
.office-route__apps .app-powerpoint { background:linear-gradient(145deg,#ed7447,#b83a25); }
.office-route__card:hover { transform:translateY(-9px) perspective(900px) rotateX(1.5deg); border-color:rgba(255,255,255,.48); box-shadow:0 25px 48px rgba(7,29,48,.28); }
.office-route__card:hover .office-route__apps i { transform:translateY(-4px) rotate(-3deg) scale(1.06); }
.office-route__bundle { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:22px; margin-top:14px; padding:18px 22px; border-radius:14px; background:#0d2941; color:#fff; }
.office-route__bundle:hover { color:#fff; text-decoration:none; background:#123956; }
.office-route__bundle strong { font-size:1.08rem; }
.office-route__bundle b { color:#efbd69; }
.office-card { position:relative; overflow:hidden; border:1px solid #dce5ec; border-radius:20px; background:#fff; box-shadow:0 14px 38px rgba(12,35,58,.09); transition:transform .25s ease,box-shadow .25s ease; }
.office-card:hover { transform:translateY(-7px); box-shadow:0 24px 55px rgba(12,35,58,.16); }
.office-card .cover { position:relative; display:block; height:250px; overflow:hidden; }
.office-card .cover:after { content:''; position:absolute; inset:auto 0 0; height:48%; background:linear-gradient(transparent,rgba(6,23,39,.72)); pointer-events:none; }
.office-card .cover img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.office-card:hover .cover img { transform:scale(1.055); }
.office-card__badge { position:absolute; z-index:2; left:16px; bottom:15px; display:flex; align-items:center; gap:9px; padding:8px 11px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; background:rgba(7,28,47,.78); backdrop-filter:blur(9px); }
.office-card__badge span { color:#efbd69; font-size:.64rem; font-weight:900; letter-spacing:.13em; }
.office-card__badge b { font-size:.78rem; }
.office-card .cardbody { display:flex; flex-direction:column; min-height:285px; padding:21px 20px 19px; }
.office-card .tag { display:inline-flex; padding:6px 9px; border-radius:999px; background:#f5ead8; color:#8c5c1e; font-size:.65rem; font-weight:900; letter-spacing:.1em; }
.office-card .cardbody h3 { margin:13px 0 9px; font-size:1.18rem; line-height:1.3; }
.office-card .cardbody>p { min-height:3em; margin-bottom:15px; color:#607185; line-height:1.55; }
.office-card__benefit { display:block; width:max-content; max-width:100%; margin:0 0 17px; padding:7px 10px; border-radius:8px; color:#225a45; background:#eaf6f0; font-size:.75rem; font-weight:800; }
.office-card .cardfoot { margin-top:auto; padding-top:16px; border-top:1px solid #e7ecf0; }
.office-card .cardfoot>span { color:#102a43; font-size:1.12rem; font-weight:900; }
.office-card .cardfoot>a { padding:9px 12px; border-radius:9px; color:#fff; background:#0d3855; font-size:.78rem; font-weight:850; }
.office-card .cardfoot>a:hover { text-decoration:none; background:#c89448; color:#10243e; }
.office-card--ofimatica-intermedia { border-top:3px solid #23846b; }
.office-card--ofimatica-avanzada { border-top:3px solid #c89448; }
@keyframes routeCardIn { from { opacity:0; transform:translateY(28px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes routeGlow { 0%,100% { transform:translate3d(0,0,0) scale(1); opacity:.7; } 50% { transform:translate3d(-16px,18px,0) scale(1.08); opacity:1; } }
@keyframes officeAppFloat { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-6px) rotate(2deg); } }
@media (max-width:760px) { .office-route { width:calc(100% - 24px); padding:22px 16px; border-radius:18px; } .office-route__head { align-items:start; flex-direction:column; } .office-route__grid { grid-template-columns:1fr; } .office-route__card { min-height:255px; } .office-route__card:hover { transform:translateY(-5px); } .office-route__bundle { grid-template-columns:1fr; gap:7px; } }
@media (prefers-reduced-motion:reduce) { .office-route__card,.office-route__card:before,.office-route__apps i { animation:none!important; transition:none!important; } .office-route__card:hover,.office-route__card:hover .office-route__apps i { transform:none!important; } }
@media print { .top,.footer,.whatsapp-float,.brand-loader,.certificate button { display:none!important; } .certificate { margin:0; border:2px solid #cfa862; box-shadow:none; min-height:90vh; } body,main { background:#fff!important; } }