/* WebCriolla desktop refinement: balanced scale, modern hierarchy and consistent cards. */
@media (min-width: 981px) {
  .main-header,
  .nav-shell { height: 76px; }

  .nav-shell {
    grid-template-columns: 180px 1fr 188px;
    gap: 28px;
  }

  .brand img { width: 150px; height: 42px; }
  .nav-menu { gap: clamp(20px, 2.4vw, 34px); }
  .nav-menu a { font-size: 13px; font-weight: 600; }

  .header-action {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 11px;
  }

  .main-slider {
    min-height: clamp(700px, 100svh, 900px);
    padding-top: 76px;
  }

  .slider-content { padding: 38px 0 46px; }
  .slider-dots { display: none; }

  .hero-brand-mark {
    width: clamp(280px, 24vw, 380px);
    margin-bottom: 18px;
    border-radius: 16px;
    filter: drop-shadow(0 18px 38px rgba(0,0,0,.38));
  }

  .main-slider h1 {
    max-width: 920px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(3.85rem, 4.89vw, 5.46rem);
    font-weight: 700;
    line-height: .96;
    letter-spacing: -.035em;
    text-transform: none;
    text-wrap: balance;
  }

  .hero-arrow {
    width: 50px;
    height: 50px;
    margin-top: 22px;
    font-size: 20px;
  }

  .sliding-track { gap: 38px; padding: 12px 0; }
  .sliding-track span { font-size: 11px; letter-spacing: .1em; }

  .section { padding: 88px 0; }
  .project-three { padding-top: 82px; }
  .project-three,
  .apps-portfolio,
  #web-demos,
  #como-probar-apps { scroll-margin-top: 0; }

  h2,
  .app-card h3,
  .process-grid h3 { font-family: "Plus Jakarta Sans", Arial, sans-serif; }

  h2 {
    font-size: clamp(2.7rem, 3.65vw, 3.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.05em;
    text-wrap: balance;
  }

  .center-head { max-width: 850px; margin-bottom: 38px; }
  .section-kicker { margin-bottom: 12px; font-size: 11px; }

  .portfolio-choice {
    width: min(690px, 100%);
    margin-top: 28px;
    gap: 14px;
  }

  .choice-button {
    min-height: 74px;
    gap: 13px;
    padding: 10px 14px;
  }

  .choice-icon { flex-basis: 46px; width: 46px; height: 46px; }
  .web-icon::before { width: 24px; height: 17px; }
  .web-icon::after { left: 11px; top: 18px; width: 24px; }
  .app-icon::before { width: 16px; height: 27px; }
  .app-icon::after { bottom: 12px; }
  .choice-button strong { font-size: 14px; }
  .choice-button small { font-size: 11px; }

  .project-showcase {
    gap: 14px;
    background: transparent;
    border: 0;
  }

  .project-item {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: #0b0b0b;
    transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
  }

  .project-item:hover {
    border-color: rgba(255,138,0,.46);
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(0,0,0,.28);
  }

  .project-item button {
    min-height: 400px;
    display: grid;
    grid-template-rows: 210px minmax(66px, auto) 28px;
    gap: 12px;
    padding: 0 0 20px;
  }

  .project-item button::after {
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  .project-item strong {
    max-width: calc(100% - 40px);
    display: flex;
    align-items: flex-end;
    margin-inline: 20px;
    font-size: clamp(1.75rem, 2vw, 2.2rem);
    line-height: .98;
    letter-spacing: -.035em;
  }

  .project-item em {
    display: flex;
    align-items: flex-start;
    margin-inline: 20px;
    font-size: 10px;
    line-height: 1.35;
  }

  .project-item img { height: 210px; margin: 0; padding: 0; }

  .apps-portfolio::before { display: none; }

  .apps-heading {
    grid-template-columns: 1fr .9fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 36px;
  }

  .apps-heading h2 { max-width: 660px; }
  .apps-heading > p { max-width: 520px; font-size: 14px; line-height: 1.7; }
  .app-grid { gap: 20px; }

  .app-card {
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(0,0,0,.24);
  }

  .app-card-body { padding: 22px; }
  .app-type { font-size: 10px; }

  .app-card h3 {
    margin: 13px 0 7px;
    font-size: clamp(1.75rem, 2.25vw, 2.25rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.04em;
  }

  .app-card p { margin-bottom: 22px; font-size: 13px; }
  .try-app-button { min-height: 48px; font-size: 11px; }
  .app-guide-wrap { margin-top: 22px; }
  .app-test-guide { border-radius: 14px; }
  .app-test-guide summary { min-height: 64px; font-size: 14px; }
  .about-webcriolla { margin-top:72px; }

  .process-three .two-col-head { margin-bottom: 34px; }

  .process-grid {
    gap: 14px;
    background: transparent;
    border: 0;
  }

  .process-grid article {
    min-height: 238px;
    padding: 26px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 16px;
    background: #0b0b0b;
  }

  .process-grid span { font-size: 12px; }
  .process-grid h3 { margin: 28px 0 10px; font-size: 22px; line-height: 1.15; }
  .process-grid p { font-size: 14px; line-height: 1.65; }

  .cta-two { padding: 88px 0; }

  .cta-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 450px);
    gap: 64px;
  }

  .cta-grid h2 { max-width: 700px; }

  .contact-form {
    gap: 10px 14px;
    padding: 22px;
    border-radius: 16px;
  }

  .contact-form input:not([type="hidden"]),
  .contact-form textarea { border-radius: 8px; }

  .contact-form .ogency-btn { border-radius: 999px; }
  .main-footer { padding-top: 42px; }
  .footer-brand-only img { width: 230px; height: 72px; }
}

@media (min-width: 981px) and (max-width: 1199px) {
  .project-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-item button { grid-template-rows: 220px minmax(62px, auto) 28px; }
  .project-item img { height: 220px; }
  .about-webcriolla { grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:34px; padding:42px; }
  .about-brand { min-height:340px; }
  .about-brand img { width:min(430px,118%); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}