/* Capa responsive comun para todas las paginas publicas de MiKredit. */
:root { --site-content-max: 1160px; --site-gutter: clamp(18px, 3.2vw, 48px); }
html { box-sizing: border-box; min-width: 320px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body { min-width: 320px; overflow-x: hidden; font-family: "Public Sans", "Segoe UI", Arial, sans-serif !important; }
body button, body input, body select, body textarea { font-family: "Public Sans", "Segoe UI", Arial, sans-serif !important; }
h1, h2, h3, .btn, .product-btn, .profile-card strong, .story-stats strong, .home-trust strong, .product-hero strong {
  font-family: "Manrope", "Segoe UI", Arial, sans-serif !important;
}
img, svg, video, iframe { display: block; max-width: 100%; }
button, input, select, textarea { min-width: 0; max-width: 100%; }
.container, .product-container {
  width: min(var(--site-content-max), calc(100% - (2 * var(--site-gutter))));
  max-width: 100%; margin-inline: auto;
}
.nav-wrap, .product-nav { width: min(1220px, calc(100% - (2 * var(--site-gutter)))); max-width: 100%; }
.nav-wrap > *, .product-nav > *, .home-intro-grid > *, .story-grid > *, .values-layout > *,
.contact-layout > *, .product-hero-grid > *, .uses-layout > *, .requirements-layout > *,
.request-layout > *, .footer-grid > *, .profile-grid > *, .benefits-grid > *, .uses-grid > * { min-width: 0; }
.home-intro-copy h1, .story-heading h1, .contact-copy h1, .product-hero h1, .section-heading h1,
.section-heading h2, .section-title h2, .uses-copy h2, .request-copy h2, .requirements-card h2,
.steps-card h2, .home-contact-card h2, p, label, .profile-card, .other-profile-link { overflow-wrap: anywhere; }
.home-intro-photo, .about-photo, .profile-visual, .application-card, .contact-form, .profile-form,
.requirements-card, .steps-card { max-width: 100%; }
.profile-grid, .benefits-grid, .benefit-grid, .uses-grid, .values-grid, .story-stats, .form-row {
  grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
}
.profile-grid, .benefits-grid { --columns: 4; }
.benefit-grid { --columns: 3; }
.values-grid, .uses-grid, .form-row { --columns: 2; }
.story-stats { --columns: 4; }

@media (max-width: 1120px) {
  .site-header .nav-wrap { height: 72px; }
  .site-header .menu-toggle { display: block; flex: 0 0 auto; margin-left: auto; }
  .site-header .nav-cta, .site-header .nav-login { display: none; }
  .site-header .main-nav {
    position: fixed; inset: 72px 0 auto; z-index: 60; display: flex;
    max-height: calc(100dvh - 72px); margin: 0; padding: 24px var(--site-gutter) 30px;
    overflow-y: auto; align-items: stretch; flex-direction: column; gap: 10px;
    border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 18px 34px rgb(35 51 66 / 14%);
    opacity: 0; visibility: hidden; transform: translateY(-115%);
    transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease;
  }
  .site-header .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-header .main-nav a { width: 100%; padding: 12px 14px; border-radius: 9px; }
  .site-header .main-nav a::after { display: none; }
  .site-header .main-nav .mobile-login { display: block !important; width: 100%; }
  .product-nav { height: 72px; }
  .product-menu { display: block; flex: 0 0 auto; margin-left: auto; border: 0; background: transparent; color: var(--purple); font-size: 22px; }
  .product-nav nav {
    position: fixed; inset: 72px 0 auto; z-index: 60; display: flex;
    max-height: calc(100dvh - 72px); margin: 0; padding: 22px var(--site-gutter) 28px;
    overflow-y: auto; align-items: stretch; flex-direction: column; gap: 8px;
    border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 18px 34px rgb(35 51 66 / 14%);
    opacity: 0; visibility: hidden; transform: translateY(-115%);
    transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease;
  }
  .product-nav nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .product-nav nav a { width: 100%; padding: 12px 14px; border-radius: 9px; }
  .product-nav .nav-request, .product-nav .intranet-link { display: none; }
  .profile-grid, .benefits-grid { --columns: 2; }
  .product-hero-grid, .uses-layout, .requirements-layout, .request-layout, .contact-layout,
  .home-intro-grid, .story-grid, .values-layout { grid-template-columns: minmax(0, 1fr); }
  .product-hero-grid, .uses-layout, .requirements-layout, .request-layout { gap: clamp(42px, 7vw, 66px); }
  .profile-visual { width: min(600px, 100%); margin-inline: auto; }
  .home-intro-photo, .about-photo { width: min(680px, 100%); margin-inline: auto; }
  body.menu-open::before { content: ""; position: fixed; inset: 72px 0 0; z-index: 40; background: rgb(22 36 49 / 42%); }
}

@media (max-width: 760px) {
  :root { --site-gutter: 18px; }
  .profile-grid, .benefits-grid, .benefit-grid, .values-grid, .uses-grid, .form-row { --columns: 1; }
  .story-stats { --columns: 2; }
  .home-intro, .product-hero, .contact-screen, .standalone-story, .standalone-profiles { min-height: auto; }
  .home-intro-copy h1, .product-hero h1, .contact-copy h1, .standalone-story .story-heading h1,
  .standalone-profiles .section-heading h1 { font-size: clamp(2.15rem, 10.5vw, 3.1rem) !important; line-height: 1.08 !important; }
  .section-heading h2, .section-title h2, .uses-copy h2, .requirements-card h2, .steps-card h2,
  .request-copy h2, .other-profiles h2, .values-copy h2 { font-size: clamp(1.85rem, 8vw, 2.5rem) !important; }
  .home-actions, .hero-actions, .hero-points, .profile-selection, .other-profiles > .product-container,
  .home-contact-card, .compact-footer > .container, .footer-bottom { align-items: stretch; flex-direction: column; }
  .home-actions .btn, .hero-actions .product-btn, .profile-selection .btn, .home-contact-card .btn {
    width: 100%; justify-content: center; text-align: center;
  }
  .home-intro-photo > img, .about-photo img { height: clamp(300px, 95vw, 430px); }
  .home-photo-card, .visual-note, .photo-note { right: 10px; left: 10px; max-width: calc(100% - 20px); }
  .application-card, .contact-form, .profile-form, .requirements-card, .steps-card {
    padding-inline: clamp(18px, 5vw, 28px);
  }
  .other-profiles > .product-container > div:last-child, .compact-footer > .container > div,
  .footer-bottom, .product-footer > .product-container { flex-wrap: wrap; }
  .product-footer > .product-container, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .product-footer > .product-container > div, .footer-grid > div, .footer-brand,
  .footer-grid > div:last-child { grid-column: auto; }
  .toast, .product-toast { right: 14px; left: 14px; max-width: calc(100% - 28px); }
}

@media (max-width: 420px) {
  :root { --site-gutter: 14px; }
  .brand, .brand img, .product-brand, .product-brand img { width: 122px; }
  .home-intro-photo > img, .about-photo img { height: 320px; }
  .profile-card, .benefit-item, .benefit-card { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}