/* V16: directory, student services and a darker FAQ. */
@property --services-rim-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes services-liquid-rim { to { --services-rim-angle: 360deg; } }

.services-page .services-hero {
  background: radial-gradient(ellipse at 90% 8%,#674f724f,transparent 48%),
    radial-gradient(ellipse at 52% 90%,#258f9870,transparent 50%),
    linear-gradient(120deg,#0a1d30,#12334c 55%,#233454);
}
.services-page .services-hero .hero-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(32px,4vw,72px); }
.services-page .contact-panel {
  position: relative; isolation: isolate; transform: none;
  padding: clamp(26px,3vw,48px); gap: 18px; border: 1px solid #bfeaff40;
  border-radius: 32px;
  background: radial-gradient(ellipse at 100% 0,#b495cb35,transparent 52%),
    radial-gradient(ellipse at 0 100%,#59cebc2b,transparent 50%),
    linear-gradient(135deg,#ffffff13,#ffffff04);
  backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: inset 0 1px 0 #ffffff30,0 30px 65px #020b2340,0 0 38px #8acdfa13;
}
.services-page .contact-panel::before,
.services-page #tramites::before,
.services-page .contact-extension::before,
.services-page #tramites .service-link::before,
.services-page .faq-list details::before,
.services-page .coordination-email::before {
  content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--services-rim-angle),#c6e8ff18,#9fe2fb95,#ffffffb8,#d3b47648,#bb9ff78c,#9ce8db8c,#c6e8ff18);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.services-page .contact-panel::before { animation: services-liquid-rim 18s linear infinite; }
.services-page .contact-panel h2 { font-size: clamp(32px,2.4vw,46px); color: #f5f9ff; margin: 0; line-height: 1.15; }
.services-page .contact-panel .eyebrow { color: #efcf8c; font-size: 15px; }
.services-page .contact-main-number {
  font-size: clamp(34px,2.8vw,48px) !important; line-height: 1.15;
  text-shadow: 0 0 25px #f3cc7752; padding-block: 4px;
}
.services-page .contact-directory { gap: 14px; margin-block: 8px; }
.services-page .contact-extension {
  --extension-glow: 91,188,231; position: relative; isolation: isolate;
  grid-template-columns: auto minmax(0,1fr) 20px; gap: 14px; min-height: 110px;
  padding: 20px 18px; border: 1px solid #ddedff2c; border-radius: 19px;
  background: radial-gradient(ellipse at 100% 0,rgba(var(--extension-glow),.23),transparent 74%),linear-gradient(145deg,#ffffff13,#ffffff05);
  box-shadow: inset 0 1px 0 #ffffff1f,0 10px 20px #020c201c;
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.services-page .contact-extension:nth-child(2) { --extension-glow: 190,151,229; }
.services-page .contact-extension:nth-child(3) { --extension-glow: 80,207,182; }
.services-page .contact-extension:nth-child(4) { --extension-glow: 224,193,113; }
.services-page .contact-extension:nth-child(5) { --extension-glow: 212,150,179; }
.services-page .contact-extension:nth-child(6) { --extension-glow: 114,189,220; }
.services-page .contact-extension strong { font-size: clamp(27px,1.6vw,32px); color: #f4d591; text-shadow: 0 0 18px #efc96b35; }
.services-page .contact-extension span { font-size: clamp(17px,1.1vw,20px); font-weight: 600; color: #f3f7ff; line-height: 1.4; }
.services-page .extension-phone { width: 20px; height: 20px; color: #c9e7f9; opacity: .65; transition: opacity .3s ease,transform .3s ease; }
.services-page .contact-email { color: #e1f0ff; font-size: 18px !important; text-underline-offset: 5px; }
.services-page .contact-email:hover { text-decoration: underline; }

/* A separate tinted glass surface distinguishes procedures from the shortcuts. */
.services-page #tramites {
  position: relative; isolation: isolate; margin-top: 72px;
  padding: clamp(24px,3vw,48px); border: 1px solid #bbd8ea54; border-radius: 36px;
  background: radial-gradient(ellipse at 0 0,#477c8e66,transparent 48%),
    radial-gradient(ellipse at 100% 80%,#62517759,transparent 52%),
    linear-gradient(145deg,#1b3749,#122b3b 55%,#243245);
  box-shadow: 0 30px 60px #14354b20,inset 0 1px 0 #ffffff2b;
}
.services-page #tramites .eyebrow { color: #eccb86; }
.services-page #tramites .section-title { color: #f5f8ff; font-size: clamp(32px,3vw,48px); }
.services-page #tramites .section-sub { color: #d0e1ee; font-size: 19px; }
.services-page #tramites .service-grid { gap: 22px; }
.services-page #tramites .service-link {
  --service-tint: 94,174,218; --card-accent: #a8d9ee;
  border-radius: 24px; padding: clamp(22px,2vw,32px); min-height: 240px;
  border: 1px solid #d2e9ff30; color: #f5f9ff;
  background: radial-gradient(ellipse at 100% 0,rgba(var(--service-tint),.24),transparent 68%),linear-gradient(145deg,#ffffff13,#ffffff04);
  box-shadow: inset 0 1px 0 #ffffff24,0 14px 28px #020c201f;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.services-page #tramites .service-link:nth-child(2),
.services-page #tramites .service-link:nth-child(5) { --service-tint: 176,145,215; --card-accent: #d1b5ef; }
.services-page #tramites .service-link:nth-child(3),
.services-page #tramites .service-link:nth-child(6) { --service-tint: 106,199,180; --card-accent: #aae2d5; }
.services-page #tramites .service-link:nth-child(4) { --service-tint: 218,186,108; --card-accent: #e5d49d; }
.services-page #tramites .service-link::after {
  inset: 0; width: auto; height: auto; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at var(--glass-x,50%) var(--glass-y,0%),#ffffff1a,transparent 62%); opacity: .4;
}
.services-page #tramites .service-copy strong { font-size: clamp(23px,1.7vw,30px); color: #f5f9ff; }
.services-page #tramites .service-copy > span { font-size: 17px; color: #d5e5f2; line-height: 1.55; }
.services-page #tramites .service-icon { width: 64px; height: 64px; border-radius: 18px; color: var(--card-accent); background: linear-gradient(145deg,#ffffff22,#ffffff08); box-shadow: inset 0 1px 0 #ffffff36,0 8px 20px #00000020; }
.services-page #tramites .service-icon svg { width: 33px; height: 33px; }
.services-page #tramites .service-arrow { color: #d8edff; }
.services-page #tramites .status-pending { color: #f5dc9e !important; background: #ebc76a17; border: 1px solid #ebc76a52; font-size: 14px; }
.services-page .other-procedures { background: linear-gradient(140deg,#eaf1f8,#f5efe7); }

/* Black and graphite, following the dark map treatment on the home page. */
.services-page .faq-section {
  background: radial-gradient(ellipse at 5% 0,#27404742,transparent 48%),radial-gradient(ellipse at 100% 100%,#25263760,transparent 54%),linear-gradient(140deg,#080d11,#101719 55%,#090d13);
  padding-block: clamp(60px,6vw,100px); border-top: 1px solid #95c2ce21;
}
.services-page .faq-heading .eyebrow { color: #e8c889; }
.services-page .faq-heading .section-title { color: #f2f6fb; }
.services-page .faq-heading .section-sub { color: #bccbd5; font-size: 20px; }
.services-page .faq-list { gap: 16px; }
.services-page .faq-list details {
  position: relative; isolation: isolate; border-radius: 20px; border: 1px solid #cee0ef26;
  background: radial-gradient(ellipse at 100% 0,#6895a519,transparent 64%),linear-gradient(140deg,#ffffff0f,#ffffff03);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 #ffffff14,0 14px 28px #00000021;
  transform: none; transition: border-color .3s ease,box-shadow .3s ease;
}
.services-page .faq-list details[open] { border-color: #9ad6e960; box-shadow: 0 12px 30px #00000042,0 0 25px #a1cbd40e; }
.services-page .faq-list summary { color: #eff6fc; font-size: clamp(19px,1.4vw,23px); line-height: 1.45; padding: 26px 62px 26px 26px; }
.services-page .faq-list summary::after { color: #e8cf9a; }
.services-page .faq-answer { color: #c6d5e0; font-size: 18px; line-height: 1.7; }
.services-page .faq-answer .text-link { color: #a6d8f4; }
.services-page .coordination-email {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 72px; padding: 20px 26px; font-size: 19px; line-height: 1.4; text-align: left;
  border-radius: 20px; border: 1px solid #c2dff15c;
  background: radial-gradient(ellipse at 100% 0,#8cbedb35,transparent 70%),linear-gradient(135deg,#3a526266,#6a637329);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #f0f8ff;
  box-shadow: inset 0 1px 0 #ffffff38,0 14px 30px #0000002e;
}
.services-page .coordination-copy { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.services-page .coordination-icon { width: 0; opacity: 0; flex-shrink: 0; transform: translateX(-12px) rotate(-12deg); transition: width .3s ease,opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1); }
.services-page .coordination-icon svg { width: 29px; height: 29px; display: block; }
.services-page .coordination-email:is(:hover,:focus-visible) .coordination-icon { width: 29px; opacity: 1; transform: translateX(0) rotate(0); }
.services-page :is(.contact-extension,.contact-main-number,.contact-email,.coordination-email,.service-link):focus-visible,
.services-page .faq-list summary:focus-visible { outline: 3px solid #edcf88; outline-offset: 5px; }
.services-page .contact-extension:focus-visible { border-color: #e7cf9d; box-shadow: 0 0 28px rgba(var(--extension-glow),.25); }
/* Keep the fixed schedule shortcut from covering the phone directory on small screens. */
@media (max-width:1500px) {
  .services-page .floating-schedule { width: 60px; min-height: 60px; height: 60px; padding: 8px; justify-content: center; border-radius: 18px; }
  .services-page .floating-schedule > span:last-child { display: none; }
  .services-page .floating-schedule-icon { width: 42px; height: 42px; }
}
@media (hover:hover) and (pointer:fine) {
  .services-page .contact-extension:hover { z-index: 2; transform: perspective(900px) translateY(-7px) scale(1.015) rotateX(var(--glass-rx,0deg)) rotateY(var(--glass-ry,0deg)); border-color: #d5ebfa86; box-shadow: 0 20px 35px #020a2a50,0 0 28px rgba(var(--extension-glow),.3),inset 0 1px 0 #ffffff45; }
  .services-page .contact-extension:hover strong { text-shadow: 0 0 22px #f2d0748a; }
  .services-page .contact-extension:hover .extension-phone { opacity: 1; transform: rotate(-8deg); }
  .services-page #tramites .service-link:hover { transform: perspective(1100px) translateY(-6px) rotateX(var(--glass-rx,0deg)) rotateY(var(--glass-ry,0deg)); border-color: #daeffa85; box-shadow: 0 24px 45px #020a2547,0 0 28px rgba(var(--service-tint),.18); }
  .services-page .coordination-email:hover { transform: translateY(-4px); box-shadow: 0 20px 40px #00000040,0 0 25px #9ed3e429; }
}
@media (max-width:1100px) {
  .services-page .services-hero .hero-grid { grid-template-columns: minmax(0,1fr); }
  .services-page .contact-panel { width: 100%; }
  .services-page #tramites .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .services-page .contact-directory { grid-template-columns: minmax(0,1fr); }
  .services-page .contact-panel { border-radius: 24px; padding: 26px 22px; }
  .services-page .contact-panel h2 { font-size: 32px; }
  .services-page .contact-extension { min-height: 98px; }
  .services-page .contact-extension span { font-size: 18px; }
  .services-page #tramites { margin-top: 48px; border-radius: 26px; padding: 28px 20px; }
  .services-page #tramites .service-grid { grid-template-columns: minmax(0,1fr); }
  .services-page #tramites .service-link { min-height: 190px; padding: 24px 20px; gap: 16px; }
  .services-page #tramites .service-icon { width: 50px; height: 50px; border-radius: 15px; }
  .services-page #tramites .service-icon svg { width: 27px; height: 27px; }
  .services-page .faq-section .wrap { gap: 28px; }
  .services-page .faq-list summary { padding: 22px 50px 22px 20px; font-size: 19px; }
  .services-page .faq-answer { padding: 0 20px 24px; }
  .services-page .coordination-email { width: 100%; font-size: 18px; padding: 20px; }
  .services-page .floating-schedule { left: auto; right: 86px; bottom: 14px; }
}
@media (hover:none) { .services-page .coordination-icon { width: 29px; opacity: 1; transform: none; } }
@media (prefers-reduced-motion:reduce) {
  .services-page .contact-panel::before { animation: none; }
  .services-page :is(.contact-extension,#tramites .service-link,.coordination-email),
  .services-page :is(.contact-extension,#tramites .service-link,.coordination-email):hover,
  .services-page .extension-phone { transform: none; transition: none; }
  .services-page .coordination-icon { transition: none; transform: none; }
}