/* 
 * Estilos generales del tema Universidad del Pacifico
 * Version: 1.0.0
 * Convertido de Tailwind CSS a CSS puro
 */

/* ============================
   Variables CSS
   ============================ */
:root {
  /* Brand */
  --color-primary: oklch(0.248 0.0718 263.16);
  --color-secondary: oklch(0.556 0.2453 261.33);

  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f3f4f6;
  --color-gray-100: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-550: #595959;
  --color-gray-600: #374151;
  --color-gray-650: #4b5563;
  --color-gray-700: #1f2937;
  --color-gray-900: #1a1a1a;

  /* Semantic */
  --color-success: #16a34a;
  --color-success-dark: #15803d;
  --color-success-darker: #166534;
  --color-success-light: #dcfce7;
  --color-success-bg: #f0fdf4;
  --color-success-border: #22c55e;
  --color-warning: #eab308;
  --color-warning-dark: #a16207;
  --color-warning-darker: #854d0e;
  --color-warning-light: #fef9c3;
  --color-danger: #dc2626;
  --color-danger-dark: #b91c1c;
  --color-danger-darker: #991b1b;
  --color-danger-light: #fee2e2;
  --color-danger-bg: #fef2f2;
  --color-error: #ef4444;
  --color-info: #0891b2;
  --color-info-dark: #0e7490;
  --color-info-darker: #155e75;
  --color-info-light: #cffafe;

  /* Badges / UI - Primary blue (not brand) */
  --color-blue: #2563eb;
  --color-blue-dark: #1d4ed8;
  --color-blue-darker: #1e40af;
  --color-blue-light: #dbeafe;

  /* Forms */
  --color-border: #BFCFF1;
  --color-input-bg: rgba(221, 229, 247, 0.50);
  --color-checkbox: #155dfc;
  --color-checkbox-border: #6a7282;
  --color-radio-border: #c4c9d4;

  /* Decorative */
  --color-dots: #dcdcdc;
  --color-primary-alpha-50: rgba(14, 31, 67, 0.5);

  /* Typography */
  --font-publico: Publico, serif;
  --font-body: AkzidenzGroteskBQ, sans-serif;

  /* Layout */
  --width_base: 1440;
}

/* ============================
   Color Utilities
   ============================ */
/* Background Colors */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

/* Text Colors */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

/* Width Utilities */
.w-full {
  width: 100%;
}

/* ============================
   Base Styles
   ============================ */
button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer;
}

body {
  font-family: var(--font-body);
  color: var(--color-primary);
  padding: 0;
  margin: 0;
}


@media (min-width: 768px) {
  
  body.admin-bar .topbar,
  body.admin-bar .header-desktop,
  body.admin-bar .sidebar,
  body.admin-bar .programas-sidebar,
  body.admin-bar .header-mobile{
    top: 32px;
  }

}

body p {
  line-height: normal;
}

h2{
  font-weight: initial;
}

a {
  color: inherit;
  text-decoration: inherit;
}

.overflow-hidden {
  overflow: hidden;
}

/* ol, ul, menu { */
menu {
    list-style: none;
    list-style-position: initial;
    list-style-image: initial;
    list-style-type: none;
}

.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

ul, ol{
  padding-inline-start: 18px;
}

 *:not(ul):not(ol),:after,:before,::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

/* ============================
   Typography
   ============================ */
.text-calc-h2 {
  font-size: calc(5200vw / var(--width_base));
}

.text-2xl {
  font-size: calc(3800vw / var(--width_base));
  line-height: calc(3800vw / var(--width_base));
}

.text-3xl {
  font-size: calc(4800vw / var(--width_base));
  line-height: calc(5800vw / var(--width_base));
}

.text-32 {
  font-size: calc(3200vw / var(--width_base));
  line-height: calc(3200vw / var(--width_base));
}

.text-3xl.font-publico.italic.mrg-0 {
  font-size: calc(2800vw / var(--width_base));
  line-height: calc(2800vw / var(--width_base));
}

/* ============================
   No Quote Block
   ============================ */
.no-quote p {
  font-size: calc(1400vw / var(--width_base));
  color: var(--color-white);
  font-family: var(--font-body);
  font-style: normal;
  line-height: calc(2000vw / var(--width_base));
  font-weight: normal;
}

.no-quote blockquote {
  border: none;
  padding: 0px;
}

.no-quote h3 {
  margin-bottom: 0px !important;
}

/* ============================
   Menu
   ============================ */
.menu-desktop li a {
  font-size: calc(3600vw / var(--width_base));
  line-height: normal;
}

.btn-contacto-menu {
  position: absolute;
  z-index: 1;
  top: 16px;
  right: 32px;
}

/* ============================
   Form Inputs
   ============================ */
[type='text'],
input:where(:not([type])),
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
}

[type=checkbox],
[type=radio] {
  appearance: none;
  print-color-adjust: exact;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
  color: var(--color-checkbox);
  --tw-shadow: 0 0 #0000;
  background-color: var(--color-white);
  background-origin: border-box;
  border-width: 1px;
  border-color: var(--color-checkbox-border);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  padding: 0;
  display: inline-block;
}

textarea {
  font-family: inherit;
}

[type=radio] {
    border-radius: 100%;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
}

[type=checkbox]:checked,
[type=radio]:checked {
  background-color: currentColor;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: #0000;
}

/* ============================
   Scroll Indicator
   ============================ */
.scroll-indicator {
  position: absolute;
  left: calc(19500vw / var(--width_base));
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.scroll-indicator svg {
  width: calc(15000vw / var(--width_base));
  height: auto;
  display: block;
  animation: scrollBounce 1.4s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes scrollBounce {
  0% {
    transform: translateY(0);
    opacity: .75;
  }
  50% {
    transform: translateY(10px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: .75;
  }
}

/* ============================
   Mobile Styles (max-width: 767.98px)
   ============================ */
/* ============================
   Badge Component
   ============================ */

/* Base */
.badge {
  display: inline-flex;
  align-items: center;
  column-gap: 0.375rem;
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Sizes */
.badge-xs {
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.125rem 0.5rem;
}

.badge-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.25rem 0.625rem;
}

.badge-md {
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.375rem 0.75rem;
}

.badge-lg {
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 0.5rem 1rem;
}

/* Shapes */
.badge-rounded {
  border-radius: 0.375rem;
}

.badge-pill {
  border-radius: 9999px;
}

/* Variant: Outline base */
.badge-outline {
  border-width: 2px;
  border-style: solid;
  background-color: transparent;
}

/* Default */
.badge-default.badge-solid {
  background-color: var(--color-gray-500);
  color: var(--color-white);
}

.badge-default.badge-outline {
  border-color: var(--color-gray-500);
  color: var(--color-gray-600);
}

.badge-default.badge-soft {
  background-color: var(--color-gray-50);
  color: var(--color-gray-700);
}

/* Primary */
.badge-primary.badge-solid {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.badge-primary.badge-outline {
  border-color: var(--color-blue);
  color: var(--color-blue-dark);
}

.badge-primary.badge-soft {
  background-color: var(--color-blue-light);
  color: var(--color-blue-darker);
}

/* Secondary */
.badge-secondary.badge-solid {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.badge-secondary.badge-outline {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.badge-secondary.badge-soft {
  background-color: oklch(from var(--color-secondary) l c h / 0.3);
  color: var(--color-primary);
}

/* Success */
.badge-success.badge-solid {
  background-color: var(--color-success);
  color: var(--color-white);
}

.badge-success.badge-outline {
  border-color: var(--color-success);
  color: var(--color-success-dark);
}

.badge-success.badge-soft {
  background-color: var(--color-success-light);
  color: var(--color-success-darker);
}

/* Warning */
.badge-warning.badge-solid {
  background-color: var(--color-warning);
  color: var(--color-white);
}

.badge-warning.badge-outline {
  border-color: var(--color-warning);
  color: var(--color-warning-dark);
}

.badge-warning.badge-soft {
  background-color: var(--color-warning-light);
  color: var(--color-warning-darker);
}

/* Danger */
.badge-danger.badge-solid {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.badge-danger.badge-outline {
  border-color: var(--color-danger);
  color: var(--color-danger-dark);
}

.badge-danger.badge-soft {
  background-color: var(--color-danger-light);
  color: var(--color-danger-darker);
}

/* Info */
.badge-info.badge-solid {
  background-color: var(--color-info);
  color: var(--color-white);
}

.badge-info.badge-outline {
  border-color: var(--color-info);
  color: var(--color-info-dark);
}

.badge-info.badge-soft {
  background-color: var(--color-info-light);
  color: var(--color-info-darker);
}

/* Dot indicator */
.badge-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: currentColor;
}

/* Icon container */
.badge-icon {
  display: inline-flex;
  align-items: center;
}

.badge-icon svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Dismiss button */
.badge-dismiss {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem;
  margin-left: 0.25rem;
  margin-right: -0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.badge-dismiss:hover {
  opacity: 0.75;
}

.badge-dismiss:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.badge-dismiss svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: currentColor;
}

/* ============================
   Button Component
   ============================ */

/* Base */
.btn {
  font-family: var(--font-body);
  border-width: 1px;
  border-style: solid;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Sizes */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.btn-md {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.btn-lg {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .btn-sm {
    padding: 0.5rem 1rem;
  }
  
  .btn-md {
    padding: 1rem 2rem;
  }
  
  .btn-lg {
    padding: 1.25rem 2.5rem;
  }
}

/* Primary */
.btn-primary.btn-solid {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary.btn-solid:hover {
  background-color: oklch(from var(--color-primary) l c h / 0.9);
}

.btn-primary.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary.btn-outline:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.btn-primary.btn-lg {
  font-weight: 700;
}

/* Secondary */
.btn-secondary.btn-solid {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}

.btn-secondary.btn-solid:hover {
  background-color: oklch(from var(--color-secondary) l c h / 0.9);
}

.btn-secondary.btn-outline {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary.btn-outline:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

/* Danger */
.btn-danger.btn-solid {
  background-color: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}

.btn-danger.btn-solid:hover {
  background-color: var(--color-danger-dark);
}

.btn-danger.btn-outline {
  background-color: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger.btn-outline:hover {
  color: var(--color-white);
  background-color: var(--color-danger);
}

/* White */
.btn-white.btn-solid {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}

.btn-white.btn-solid:hover {
  background-color: var(--color-gray-50);
}

.btn-white.btn-outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-white.btn-outline:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* Button States */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-loading {
  position: relative;
}

/* Button Spinner */
.btn-spinner {
  animation: spin 1s linear infinite;
  margin-left: -0.25rem;
  margin-right: 0.5rem;
  height: 1rem;
  width: 1rem;
}

.btn-spinner-track {
  opacity: 0.25;
}

.btn-spinner-head {
  opacity: 0.75;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================
   Form Field Shared Styles
   ============================ */

/* Field Container */
.field-container {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  line-height: 1.25rem;
  gap: 0.25rem;
  justify-content: flex-start;
}

/* Field Label */
.field-label {
  color: var(--color-gray-900);
  font-size: 1rem;
  /* line-height: 1.25rem; */
}

/* Field Helper Text */
.field-helper {
  font-size: 0.625rem;
  line-height: 0.875rem;
  color: var(--color-gray-500);
}

/* Field Input Wrapper */
.field-input-wrapper {
  position: relative;
  width: 100%;
}

/* ============================
   TextField Component
   ============================ */

/* Base */
.textfield {
  width: 100%;
}

.textfield:focus-visible {
  outline: none;
  border-color: var(--color-gray-700);
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px rgba(26, 26, 26, 0.3);
}

/* Sizes */
.textfield-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.textfield-md {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.textfield-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* ============================
   TextareaField Component
   ============================ */

/* Base */
.textareafield {
  width: 100%;
  resize: vertical;
}

.textareafield:focus-visible {
  outline: none;
  border-color: var(--color-gray-700);
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px rgba(26, 26, 26, 0.3);
}

/* Intent */
.textareafield-default {
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-gray-400);
  border-radius: 0.5rem;
}

.textareafield-default:hover {
  border-color: var(--color-gray-900);
}

/* Sizes */
.textareafield-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  min-height: 5rem;
}

.textareafield-md {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  min-height: 8rem;
}

.textareafield-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  min-height: 12rem;
}

/* ============================
   SelectField Component
   ============================ */

/* Base */
.selectfield {
  width: 100%;
  background-color: transparent;
  cursor: pointer;
}

.selectfield:focus-visible {
  outline: none;
  border-color: var(--color-gray-700);
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px rgba(26, 26, 26, 0.3);
}

/* Intent */
.selectfield-default {
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-gray-400);
  border-radius: 0.5rem;
}

.selectfield-default:hover {
  border-color: var(--color-gray-900);
}

/* Sizes */
.selectfield-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  height: 2rem;
}

.selectfield-md {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  height: 2.75rem;
}

.selectfield-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  height: 3.5rem;
}

/* ============================
   CheckboxField Component
   ============================ */

/* Container */
.checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Row (checkbox + label) */
.checkbox-row {
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

/* Checkbox Input */
.checkbox {
  border-radius: 0.5rem;
  cursor: pointer;
  accent-color: var(--color-gray-900);
}

/* Checkbox Sizes */
.checkbox-sm {
  width: 1rem;
  height: 1rem;
}

.checkbox-md {
  width: 1.25rem;
  height: 1.25rem;
}

.checkbox-lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Checkbox Label */
.checkbox-label {
  color: var(--color-gray-900);
  font-size: 1rem;

  a{
    text-decoration-line: underline;
    color: var(--color-primary);
    font-weight: 600;
  }
}

/* Checkbox Helper */
.checkbox-helper {
  font-size: 0.625rem;
  line-height: 0.875rem;
  color: var(--color-gray-500);
  margin-left: 1.875rem;
}

/* ============================
   Hero Section
   ============================ */

.hero {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.hero-container {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.hero-content {
  padding: 2rem;
  display: flex;
  align-items: center;
}

.hero-content-inner {
  width: 100%;
}

.hero-content-inner > * + * {
  margin-top: 1rem;
}

.hero-title {
  font-size: calc(2400vw/var(--width_base));
  font-family: var(--font-publico);
  font-weight: 600;
}

.hero-description {
  max-width: none;
  color: var(--color-white);
}

.hero-image-wrapper {
  display: none;
}

.hero-image {
  width: 100%;
  height: 22.5rem;
  object-fit: cover;
}

@media (min-width: 768px) {
  .hero-container {
    flex-direction: row;
  }
  
  .hero-title{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  
  .hero-content {
    width: 50%;
    padding: 4rem;
    border-right-width: 5rem;
    border-right-style: solid;
    border-right-color: var(--color-secondary);
  }

  .hero-content-inner {
    max-width: calc(100% - 150px);
  }

  .hero-image-wrapper {
    display: block;
    width: 50%;
  }
}

@media (min-width: 1536px) {
  .hero-content {
    padding: 4rem;
  }
}

/* ============================
   Prefooter Banner Section
   ============================ */

.prefooter-banner {
  position: relative;
  color: var(--color-white);
  line-height: 0;
}

.prefooter-banner-image {
  width: 100%;
  height: 369px;
  object-fit: cover;
}

.prefooter-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(230deg, oklch(from var(--color-secondary) l c h / 0.3), rgba(0, 0, 0, 0.5));
}

.prefooter-banner-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  line-height: normal;
}

.prefooter-banner-content {
  width: 100%;
}

.prefooter-banner-content > * + * {
  margin-top: 1rem;
}

.prefooter-banner-title {
  font-size: calc(2800vw / var(--width_base));
  line-height: calc(3300vw / var(--width_base));
  font-weight: 600;
  font-family: var(--font-publico);
}

.prefooter-banner-description {
  max-width: none;
}

.prefooter-banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .prefooter-banner-image {
    height: 570px;
  }

  .prefooter-banner-overlay {
    padding: 4rem;
  }

  .prefooter-banner-content {
    width: 50%;
  }

  .prefooter-banner-title {
    font-size: calc(4800vw / var(--width_base));
    line-height: calc(5800vw / var(--width_base));
    font-weight: 600;
  }

  .prefooter-banner-description {
    max-width: 60%;
  }
}

@media (min-width: 1536px) {
  .prefooter-banner-overlay {
    padding: 4rem;
  }
}

/* ============================
   Simple Hero Section
   ============================ */

.simple-hero {
  padding: 4rem 2rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left-width: 1rem;
  border-left-style: solid;
  border-left-color: var(--color-secondary);
}

.simple-hero > * + * {
  margin-top: 1rem;
}

.simple-hero-title {
  font-size: calc(2400vw / var(--width_base));
  line-height: calc(2400vw / var(--width_base));
  font-family: var(--font-publico);
  text-align: center;
  font-weight: 600;
}

.simple-hero-description {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-white);
  width: fit-content;
  display: inline-block;
}

@media (min-width: 1536px) {
  .simple-hero {
    padding: 4rem;
  }

  .simple-hero-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* ============================
   Mobile Styles (max-width: 768px)
   ============================ */
@media (max-width: 767.98px) {
  :root {
    --width_base: 390;
  }

  .text-3xl {
    font-size: calc(2800vw / var(--width_base));
    line-height: calc(3300vw / var(--width_base));
  }

  .text-2xl {
    font-size: calc(2400vw / var(--width_base));
    line-height: calc(2400vw / var(--width_base));
  }

  .gap-14 {
    gap: 0px;
  }

  .section-dirigido {
    padding-top: calc(5000vw / var(--width_base));
  }

  .text-4xl.font-publico.text-center.font-medium {
    font-size: calc(2400vw / var(--width_base));
    line-height: calc(2400vw / var(--width_base));
  }

  .section-gracias {
    flex-direction: column;
  }

  .section-gracias .w-1\/2 {
    width: 100%;
  }

  .pastillas-container span {
    font-size: calc(1000vw / var(--width_base));
    padding: calc(500vw / var(--width_base));
    text-align: center;
    line-height: calc(1000vw / var(--width_base));
  }

  .prose :where(table):not(:where([class~=not-prose], [class~=not-prose] *)) {
    font-size: calc(1000vw / var(--width_base));
    line-height: calc(1000vw / var(--width_base));
  }

  .lista-menu li a {
    color: var(--color-primary);
    font-size: calc(1600vw / var(--width_base));
    font-style: normal;
    line-height: normal;
    text-decoration: none;
  }

  .lista-menu li {
    margin-bottom: calc(1500vw / var(--width_base));
  }

  .scroll-indicator {
    display: none;
  }

  .acerca_de_la_epu {
    margin-bottom: calc(2000vw / var(--width_base));
  }
}

/* ============================
   Focus Visible Styles (A11y)
   ============================ */
.header-desktop__menu-link:focus-visible,
.header-mobile__menu-link:focus-visible,
.home-hero__nav-btn:focus-visible,
.sidebar__hamburger:focus-visible,
.topbar__menu-toggle:focus-visible,
.btn:focus-visible,
.programas-card:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ============================
   Reduced Motion (A11y)
   ============================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}