:root {
  --utc-primary: #5b7cfa;
  --utc-primary-dark: #3555c7;
  --utc-accent: #ff5fa2;
  --utc-ink: #1f2a44;
  --utc-muted: #5f6d84;
  --utc-bg: #f8faff;
  --utc-card: #ffffff;
  --utc-line: #e4e9fb;
  --utc-success: #087f5b;
  --utc-danger: #c92a3f;
  --utc-shadow: 0 10px 30px rgba(40, 60, 120, .12);
  --utc-radius: 20px;
  --utc-max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body.utc-page {
  margin: 0;
  min-width: 0;
  color: var(--utc-ink);
  background:
    radial-gradient(900px 520px at 15% -10%, #e8f0ff 0%, transparent 62%),
    radial-gradient(1000px 560px at 100% -15%, #f8eaff 0%, transparent 58%),
    var(--utc-bg);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.utc-page img, body.utc-page svg, body.utc-page canvas, body.utc-page video {
  max-width: 100%;
}

body.utc-page a { text-underline-offset: .16em; }
body.utc-page button, body.utc-page input, body.utc-page select, body.utc-page textarea {
  max-width: 100%;
  font: inherit;
}
body.utc-page button, body.utc-page [role="button"], body.utc-page a { touch-action: manipulation; }
body.utc-page :focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 3px !important;
}

.utc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.utc-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100000;
  transform: translateY(-160%);
  border-radius: 12px;
  background: #fff;
  color: var(--utc-ink);
  padding: .75rem 1rem;
  font-weight: 800;
  box-shadow: var(--utc-shadow);
}
.utc-skip-link:focus { transform: translateY(0); }

.utc-header {
  position: relative;
  z-index: 1000;
  border-bottom: 1px solid rgba(228, 233, 251, .94);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 18px rgba(40, 60, 120, .06);
}
.utc-header__inner {
  width: min(calc(100% - 28px), var(--utc-max));
  margin: 0 auto;
  padding: .7rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.utc-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .55rem;
  color: var(--utc-ink) !important;
  font-size: 1.1rem;
  font-weight: 950;
  text-decoration: none !important;
  white-space: nowrap;
}
.utc-brand__mark {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid #e5dcff;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f3edff);
  box-shadow: 0 6px 16px rgba(91, 124, 250, .15);
  font-size: 1.45rem;
}
.utc-coconut-icon{display:block;width:2rem;height:2rem}
.utc-coconut-icon svg{display:block;width:100%;height:100%;max-width:none!important}
.utc-nav {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}
.utc-nav a {
  border-radius: 999px;
  color: #3a4660 !important;
  padding: .55rem .72rem;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
}
.utc-nav a:hover, .utc-nav a[aria-current="page"] { background: #eef2ff; color: var(--utc-primary-dark) !important; }
.utc-search-link { border: 1px solid var(--utc-line); background: #fff; }

.utc-main-target { scroll-margin-top: 6rem; }

body.utc-page main,
body.utc-page > .container,
body.utc-page > .section,
body.utc-page > .wrap,
body.utc-page > .app {
  min-width: 0;
}

body.utc-page .card,
body.utc-page .panel,
body.utc-page .tile {
  border-color: var(--utc-line);
}
body.utc-page .btn,
body.utc-page button.primary,
body.utc-page a.button,
body.utc-page a.btn {
  min-height: 44px;
}

.utc-coco {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  pointer-events: none;
}
.utc-coco__bubble {
  width: min(290px, calc(100vw - 100px));
  border: 1px solid var(--utc-line);
  border-radius: 18px 18px 6px 18px;
  background: rgba(255, 255, 255, .98);
  color: var(--utc-ink);
  padding: .8rem .95rem;
  box-shadow: var(--utc-shadow);
  font-size: .91rem;
  pointer-events: auto;
}
.utc-coco__bubble[hidden] { display: none; }
.utc-coco__bubble strong { display: block; margin-bottom: .15rem; }
.utc-coco__bubble p { margin: 0; }
.utc-coco__actions { display: flex; justify-content: flex-end; gap: .35rem; margin-top: .55rem; }
.utc-coco__actions button {
  min-height: 36px !important;
  border: 0;
  border-radius: 10px;
  background: #eef2ff;
  color: var(--utc-primary-dark);
  padding: .3rem .55rem;
  font-weight: 800;
  cursor: pointer;
}
.utc-coco__button {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8df, #d9f2c5);
  box-shadow: 0 10px 26px rgba(72, 91, 50, .28);
  font-size: 2rem;
  cursor: pointer;
  pointer-events: auto;
  animation: utc-float 3.5s ease-in-out infinite;
}
.utc-coco__button .utc-coconut-icon--large{width:48px;height:48px;margin:auto}
.utc-consent-pending .utc-coco { bottom: 150px; }
@keyframes utc-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }

.utc-footer {
  margin-top: 3.5rem;
  border-top: 1px solid var(--utc-line);
  background: rgba(255,255,255,.88);
  color: var(--utc-muted);
}
.utc-footer__inner {
  width: min(calc(100% - 32px), var(--utc-max));
  margin: 0 auto;
  padding: 1.5rem 0 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .9rem;
}
.utc-footer nav { display: flex; gap: .9rem; flex-wrap: wrap; }
.utc-footer a { color: var(--utc-primary-dark); font-weight: 700; }

.utc-consent {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 5000;
  width: min(calc(100% - 24px), 680px);
  transform: translateX(-50%);
  border: 1px solid var(--utc-line);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  color: var(--utc-ink);
  padding: .85rem;
  box-shadow: 0 16px 48px rgba(31,42,68,.22);
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.utc-consent p { flex: 1 1 280px; margin: 0; font-size: .9rem; }
.utc-consent a { font-weight: 800; }
.utc-consent button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: var(--utc-primary);
  color: #fff;
  padding: .55rem .75rem;
  font-weight: 850;
  cursor: pointer;
}
.utc-consent button.secondary { background: #eef2ff; color: var(--utc-primary-dark); }

.utc-content-page {
  width: min(calc(100% - 32px), 860px);
  margin: 2rem auto;
}
.utc-content-page .utc-content-card {
  border: 1px solid var(--utc-line);
  border-radius: var(--utc-radius);
  background: rgba(255,255,255,.96);
  padding: clamp(1.1rem, 4vw, 2.2rem);
  box-shadow: var(--utc-shadow);
}
.utc-content-page h1 { font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.08; }
.utc-content-page h2 { margin-top: 2rem; color: #2a3b68; }
.utc-content-page p, .utc-content-page li { color: #46546b; }
.utc-story-kicker{
  display:inline-block;
  margin:0 0 .6rem !important;
  border-radius:999px;
  background:#eef2ff;
  color:var(--utc-primary-dark) !important;
  padding:.38rem .72rem;
  font-size:.88rem;
  font-weight:900;
}

.utc-search-form { display: flex; gap: .6rem; margin: 1.2rem 0; }
.utc-search-form input {
  min-width: 0;
  flex: 1;
  min-height: 48px;
  border: 1px solid #cdd6f6;
  border-radius: 14px;
  background: #fff;
  color: var(--utc-ink);
  padding: .65rem .85rem;
}
.utc-search-results { display: grid; gap: .75rem; padding: 0; list-style: none; }
.utc-search-result { border: 1px solid var(--utc-line); border-radius: 15px; background: #fff; padding: 1rem; }
.utc-search-result a { color: var(--utc-primary-dark); font-size: 1.06rem; font-weight: 900; }
.utc-search-result p { margin: .25rem 0 0; }

@media (max-width: 820px) {
  .utc-header__inner { align-items: flex-start; flex-direction: column; }
  .utc-nav { width: 100%; justify-content: flex-start; flex-wrap: wrap; overflow: visible; padding: .1rem 0 .2rem; }
  body.utc-page .hero, body.utc-page .grid, body.utc-page .cards { min-width: 0; }
}

@media (max-width: 560px) {
  .utc-header__inner { width: min(calc(100% - 20px), var(--utc-max)); }
  .utc-brand { font-size: 1rem; }
  .utc-brand__mark { width: 2.3rem; height: 2.3rem; }
  .utc-coco { right: 9px; bottom: 9px; }
  .utc-consent-pending .utc-coco { bottom: 230px; }
  .utc-coco__button { width: 56px; height: 56px; font-size: 1.7rem; }
  .utc-coco__bubble { width: min(260px, calc(100vw - 78px)); font-size: .86rem; }
  .utc-search-form { align-items: stretch; flex-direction: column; }
  .utc-consent { align-items: stretch; flex-direction: column; }
  .utc-consent p { flex: 0 0 auto; }
  .utc-consent button { flex: 1 1 auto; width: 100%; }

  body.utc-page .container,
  body.utc-page .wrap,
  body.utc-page main,
  body.utc-page section { max-width: 100%; }
  body.utc-page .grid,
  body.utc-page .cards { grid-template-columns: minmax(0, 1fr) !important; }
  body.utc-page .card,
  body.utc-page .panel { min-width: 0; }

  body.utc-section-inicio header.hero {
    padding: 30px 12px 22px;
    overflow: hidden;
  }
  body.utc-section-inicio header.hero .brand {
    max-width: 100%;
    padding: 10px 13px;
  }
  body.utc-section-inicio header.hero .brand .logo { font-size: 1.7rem; }
  body.utc-section-inicio header.hero .brand .name {
    min-width: 0;
    font-size: clamp(1.35rem, 7.5vw, 1.85rem);
    line-height: 1.1;
    white-space: normal;
  }
  body.utc-section-inicio header.hero .mascot,
  body.utc-section-inicio header.hero .bubble-speech { display: none; }
  body.utc-section-inicio header.hero .tagline { padding-inline: .35rem; }
  body.utc-section-inicio header.hero .quick { gap: .45rem; }
  body.utc-section-inicio header.hero .chip { padding: .42rem .58rem; font-size: .88rem; }
  body.utc-section-inicio .section { margin: 32px auto; padding-inline: 14px; }
  body.utc-section-inicio .card { width: 100%; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media print {
  .utc-header, .utc-footer, .utc-coco, .utc-skip-link { display: none !important; }
  body.utc-page { background: #fff; }
}
