/* Institutional home: builds on the existing components and brand palette. */
.institutional { background: #fafbf9; font-size: 16px; }
.institutional::before, .institutional::after { display: none; }
.institutional .section { padding: 88px 0; }
.institutional .site-header { position: sticky; top: 0; background: #fafbf9; padding: 12px 0; }
.institutional .header-bar { box-shadow: none; border: 0; background: transparent; padding-inline: 0; }
.institutional .header-logo img { height: 36px; }
.institutional .header-nav { gap: 22px; }
.institutional .header-nav a { font-size: 13px; color: #334155; }
.institutional .btn { border-radius: 7px; box-shadow: none; font-size: 14px; min-height: 46px; }
.institutional .btn-primary { background: #163b63; color: white; }
.institutional .btn-whatsapp { background: #146c49; color: white; }
.institutional .section-dark { background: #102843; }
.institutional .reveal, .institutional .reveal-up, .institutional .reveal-left, .institutional .reveal-right, .institutional .reveal-scale { opacity: 1; transform: none; filter: none; transition-delay: 0ms !important; }
.institutional .floating-card, .institutional .floating-whatsapp { animation: none; }
.institutional h1, .institutional h2, .institutional h3 { color: #102843; letter-spacing: -.035em; }
.institutional .section-dark h2 { color: white; }
.institutional h2 { font-size: clamp(29px, 3.2vw, 43px); line-height: 1.2; }
.institutional p { line-height: 1.75; }
.institutional section[id] { scroll-margin-top: 105px; }
.kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .13em; color: #28616a; margin-bottom: 22px; }
.institutional .intro {
  padding: 80px 0 88px;
  background: radial-gradient(ellipse at 90% 20%, #153d50 0%, transparent 55%), #0c2035;
  color: #c4d2df;
  border-bottom: 1px solid #244354;
}
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.intro-copy { min-width: 0; }
.intro .kicker { color: #80dbe3; font-size: 11px; margin-bottom: 24px; }
.institutional .intro h1 { color: #fff; font-size: clamp(38px, 4.3vw, 60px); line-height: 1.12; margin-bottom: 24px; }
.intro h1 span { display: block; font: inherit; letter-spacing: inherit; color: #80dbe3; }
.intro-lead { font-size: 19px; margin-bottom: 16px; max-width: 490px; }
.intro-description { font-size: 15px; max-width: 450px; }
.intro-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 30px 0; }
.institutional .intro .btn-primary { background: #80dbe3; border-color: #80dbe3; color: #0c2035; }
.institutional .intro .btn-primary:hover { background: #a7e9ee; border-color: #a7e9ee; }
.institutional .intro-contact { background: transparent; border: 1px solid #698292; color: #fff; }
.institutional .intro-contact:hover { background: #203b50; border-color: #a7e9ee; }
.institutional .intro :focus-visible { outline-color: #b5f2f5; }
.intro-person { display: flex; align-items: center; gap: 12px; padding-top: 25px; border-top: 1px solid #335064; }
.intro-person-mark { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #527582; border-radius: 50%; color: #80dbe3; font-size: 12px; font-weight: 800; }
.intro-person p { margin: 0; font-size: 12px; }
.intro-person strong { display: block; color: #f2f7fa; font-size: 13px; font-weight: 600; }
.intro-person p > span { display: block; }
.text-link { font-weight: 700; color: #163b63; text-decoration: underline; text-underline-offset: 5px; font-size: 14px; }
.work-cover { min-width: 0; margin: 0; border: 1px solid #496475; border-radius: 12px; overflow: hidden; background: #142d42; box-shadow: 0 24px 55px #00000026; }
.intro-preview { display: block; background: #eef3f2; }
.work-cover img { width: 100%; height: auto; }
.work-cover figcaption { border-top: 1px solid #496475; padding: 22px 24px; display: grid; gap: 7px; }
.work-cover .intro-demo-label { color: #80dbe3; font-size: 10px; letter-spacing: .1em; font-weight: 700; }
.work-cover strong { color: #fff; font-size: 18px; }
.intro-demo-description { color: #c4d2df; font-size: 12px; }
.work-cover figcaption a { color: #fff; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; margin-top: 5px; justify-self: start; }
.selected-section { background: #eef3f2; border-top: 1px solid #dfe7e4; }
.section-intro { max-width: 700px; margin-bottom: 40px; }
.section-intro p { margin-top: 20px; max-width: 650px; }
.selected-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.selected-work { min-width: 0; }
.work-image { display: block; border: 1px solid #cedbd7; border-radius: 8px; overflow: hidden; }
.work-image img { width: 100%; height: auto; transition: transform 200ms ease; }
.work-image:hover img { transform: scale(1.025); }
.work-copy { padding: 24px 0 0; }
.work-copy .kicker { margin-bottom: 12px; font-size: 10px; }
.work-copy h3 { font-size: 22px; margin-bottom: 14px; }
.work-copy p { font-size: 14px; margin-bottom: 14px; }
.work-copy .work-need { font-weight: 700; color: #163b63; }
.work-copy .work-limit { font-size: 12px; border-top: 1px solid #cddbd7; padding-top: 14px; }
.more-work { margin-top: 40px; border-top: 1px solid #cddbd7; padding-top: 22px; }
.more-work summary { cursor: pointer; font-weight: 700; color: #163b63; }
.more-work-links { display: flex; flex-wrap: wrap; gap: 18px; padding: 24px 0; font-size: 14px; text-decoration: underline; }
.more-work p { font-size: 13px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.about-lead { font-size: 21px; color: #163b63; }
.about-grid p { margin-bottom: 22px; }
.capabilities { border-top: 1px solid #dfe7e4; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.capability-grid article { border-top: 2px solid #84b5b5; padding-top: 20px; }
.capability-grid article > span { font-size: 12px; color: #526376; }
.capability-grid h3 { font-size: 23px; margin: 14px 0; }
.capability-grid p { font-size: 15px; margin-bottom: 20px; }
.service-extra { margin-top: 35px; font-size: 14px; }
.process-section { background: #e9f0f3; }
.working-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.working-steps li > span { font-size: 13px; color: #28616a; display: block; margin-bottom: 18px; }
.working-steps h3 { font-size: 19px; margin-bottom: 12px; }
.working-steps p { font-size: 14px; }
.institutional .tech { padding: 50px 0; }
.institutional .tech .section-title { font-size: 27px; }
.institutional .tech-chip { animation: none; }
.institutional :focus-visible { outline: 3px solid #087e91; outline-offset: 5px; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 10000; padding: 12px 20px; background: white; color: #163b63; }
.skip-link:focus { top: 16px; }
.institutional .mobile-menu:not(.is-open) { visibility: hidden; }
.institutional .mobile-menu.is-open { visibility: visible; max-height: calc(100dvh - 90px); overflow-y: auto; }
@media(min-width: 1024px) { .institutional .mobile-menu { display: none; } }
@media(max-width: 1023px) {
 .intro-grid { gap: 35px; } .selected-grid { gap: 20px; }
 .about-grid { gap: 35px; } .working-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .institutional .header-nav, .institutional .header-cta { display: none; }
 .institutional .header-toggle { display: inline-flex; }
}
@media(max-width: 767px) {
 .institutional .section { padding: 55px 0; } .institutional .intro { padding: 38px 0 55px; }
 .intro-grid, .about-grid, .selected-grid, .capability-grid { grid-template-columns: 1fr; }
 .intro h1 { max-width: 540px; } .intro-lead { font-size: 18px; }
 .intro-actions { align-items: stretch; flex-direction: column; gap: 12px; }
 .intro-actions .btn { width: 100%; }
 .intro-person { padding-top: 22px; }
 .work-cover { max-width: 540px; } .selected-grid { gap: 40px; }
 .section-intro h2 br { display: none; } .about-grid { gap: 25px; }
 .work-copy { padding-top: 20px; } .working-steps { gap: 28px; }
}
@media(max-width: 420px) { .working-steps { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion: reduce) { .institutional *, .institutional *::before, .institutional *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Real projects: editorial hierarchy, public screenshots and explicit project status. */
.portfolio-section { background: #f7f8f5; }
.portfolio-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: end; margin-bottom: 44px; }
.portfolio-heading h2 { margin: 0; }
.portfolio-intro { max-width: 460px; }
.portfolio-intro p { margin: 0 0 15px; }
.portfolio-intro .portfolio-role { color: #28616a; font-size: 13px; font-weight: 700; margin: 0; }
.project-feature { display: grid; grid-template-columns: 1.45fr 1fr; border: 1px solid #d8e1dc; border-radius: 12px; overflow: hidden; background: #fff; }
.project-shot { display: block; min-width: 0; background: #e5ebe7; overflow: hidden; }
.project-shot img { display: block; width: 100%; height: auto; }
.project-browser { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; background: #eaf0ec; color: #435b54; font-size: 11px; border-bottom: 1px solid #d8e1dc; }
.project-browser > span:first-child { font-size: 8px; letter-spacing: 2px; color: #627b71; }
.project-copy { padding: 30px; }
.project-feature .project-copy { display: flex; flex-direction: column; justify-content: center; padding: 36px; }
.project-copy .kicker { font-size: 10px; margin-bottom: 15px; }
.project-copy h3 { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.2; margin-bottom: 18px; }
.project-copy p { font-size: 14px; margin: 0 0 20px; }
.project-copy .project-lead { font-size: 19px; color: #163b63; line-height: 1.5; }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 25px; }
.project-tags li { background: #eef3f0; border: 1px solid #dbe5df; border-radius: 4px; color: #38554a; font-size: 11px; padding: 5px 10px; }
.project-copy .text-link { align-self: flex-start; margin-top: auto; }
.project-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
.project-card { display: flex; flex-direction: column; min-width: 0; background: white; border: 1px solid #d8e1dc; border-radius: 12px; overflow: hidden; }
.project-card .project-copy { display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.project-status { color: #735015; background: #faf0d8; border: 1px solid #e9d9b5; padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; margin: -3px 0 18px; }
.project-copy .project-note { font-size: 12px; color: #526376; }
.editorial-projects { display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; margin-top: 64px; padding-top: 40px; border-top: 1px solid #d8e1dc; }
.editorial-projects .kicker { margin-bottom: 15px; }
.editorial-projects h3 { font-size: 28px; line-height: 1.2; margin-bottom: 18px; }
.editorial-projects p { font-size: 14px; max-width: 320px; }
.editorial-list { list-style: none; padding: 0; margin: 0; }
.editorial-list li { border-bottom: 1px solid #d8e1dc; }
.editorial-list li:first-child { border-top: 1px solid #d8e1dc; }
.editorial-list a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 10px; color: #163b63; }
.editorial-list a:hover { background: #eaf0ec; }
.editorial-list strong { display: block; font-size: 18px; margin-bottom: 5px; }
.editorial-list strong + span { display: block; color: #526376; font-size: 12px; }
.editorial-list a > span[aria-hidden] { font-size: 25px; }
.portfolio-bottom { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 42px; padding: 24px 0 0; }
.portfolio-bottom p { margin: 0; font-size: 14px; }
.portfolio-bottom a { flex-shrink: 0; }
.portfolio-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width: 1023px) {
 .portfolio-heading { gap: 30px; }
 .project-feature { grid-template-columns: 1fr; }
 .project-feature .project-copy { padding: 30px; }
 .editorial-projects { gap: 30px; }
}
@media(max-width: 767px) {
 .portfolio-heading, .project-pair, .editorial-projects { grid-template-columns: 1fr; gap: 26px; }
 .portfolio-heading h2 br { display: none; }
 .project-copy, .project-feature .project-copy { padding: 24px; }
 .project-pair { margin-top: 24px; }
 .project-browser { padding: 11px 12px; font-size: 10px; }
 .editorial-projects { margin-top: 40px; padding-top: 30px; }
 .portfolio-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Clear package scope: shared terms stay readable without crowding the cards. */
.institutional .packages { background: #edf2f1; }
.institutional .packages-heading { max-width: 720px; margin-bottom: 28px; }
.institutional .packages-heading h2 { margin-bottom: 20px; }
.offer-assurances { display: flex; flex-wrap: wrap; gap: 12px 28px; border-block: 1px solid #cad9d4; padding: 18px 0; color: #24574e; font-size: 12px; font-weight: 700; }
.offer-assurances span::before { content: '✓'; margin-right: 8px; }
.offer-group-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; margin: 38px 0 20px; }
.offer-group-heading h3 { font-size: 23px; }
.offer-group-heading p { font-size: 13px; margin: 0; max-width: 470px; }
.institutional .packages-grid { max-width: none; gap: 22px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.institutional .packages-grid.offers-advanced { grid-template-columns: repeat(2,minmax(0,1fr)); }
.institutional .package-card { background: #fff; border: 1px solid #cbd9d4; border-radius: 12px; padding: 26px; gap: 20px; box-shadow: none; animation: none; min-height: 0; transform: none; }
.institutional .package-card::before, .institutional .package-card::after { display: none; }
.institutional .package-card:hover { transform: none; box-shadow: none; border-color: #648d85; }
.institutional .package-card-featured { border: 2px solid #28665e; padding: 25px; }
.offer-label { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 9px; min-height: 52px; color: #526376; font-size: 11px; }
.offer-highlight { color: #24574e; background: #e4f1e9; border-radius: 4px; padding: 5px 8px; font-weight: 700; font-size: 10px; }
.institutional .package-top { gap: 0; }
.institutional .package-top h3 { max-width: none; font-size: 25px; line-height: 1.2; }
.institutional .package-description { font-size: 14px; margin-top: 14px; min-height: 100px; }
.institutional .offers-advanced .package-description { min-height: 74px; }
.institutional .package-price-block { background: #f5f8f6; border: 0; border-radius: 7px; padding: 18px; gap: 8px; }
.institutional .package-price { font-size: clamp(23px,2.25vw,30px); color: #102843; }
.offer-tax { color: #426159; font-size: 12px; }
.institutional .package-time { color: #365e66; font-size: 11px; margin-top: 5px; }
.institutional .package-list { gap: 12px; }
.institutional .package-list li { font-size: 13px; padding-left: 18px; }
.institutional .package-list li::before { background: #32786b; box-shadow: none; width: 5px; height: 5px; }
.offer-details { border-top: 1px solid #dbe4df; padding-top: 16px; }
.offer-details summary { cursor: pointer; color: #163b63; font-size: 13px; font-weight: 700; padding: 5px 0; }
.offer-details div { padding-top: 12px; }
.offer-details p { font-size: 12px; margin-bottom: 12px; }
.institutional .offer-terms-link { font-size: 11px; margin: 0; }
.offer-terms-link a { color: #355e68; text-decoration: underline; text-underline-offset: 3px; }
.offer-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 4px; }
.offer-actions .btn { width: 100%; min-width: 0; text-align: center; white-space: normal; }
.offer-conditions { background: #fff; border: 1px solid #cad9d4; border-radius: 12px; padding: 36px; margin-top: 46px; scroll-margin-top: 110px; }
.offer-conditions-heading { max-width: 680px; margin-bottom: 30px; }
.offer-conditions-heading .kicker { margin-bottom: 14px; }
.offer-conditions h3 { font-size: 27px; margin-bottom: 16px; }
.offer-conditions-heading p { font-size: 14px; }
.offer-conditions-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 48px; }
.offer-conditions-grid > div { border-top: 1px solid #dbe4df; padding-top: 20px; }
.condition-number { color: #28665e; font-size: 11px; font-weight: 800; }
.offer-conditions h4 { color: #163b63; font-size: 18px; margin: 10px 0 13px; }
.offer-conditions-grid p { font-size: 13px; margin-bottom: 12px; }
.offer-existing { background: #eef4f0; padding: 24px; border-radius: 7px; margin-top: 30px; }
.offer-existing strong { color: #163b63; }
.offer-existing p { font-size: 13px; margin: 10px 0 14px; max-width: 760px; }
.offer-section-note { max-width: 760px; font-size: 13px; padding: 15px 0; margin-bottom: 24px; border-top: 1px solid #cad9d4; }
.product-showcase { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 40px; margin-top: 40px; background: #102843; border-radius: 12px; padding: 36px; overflow: hidden; }
.product-showcase .kicker { color: #8ce0d7; margin-bottom: 18px; }
.institutional .product-showcase h3 { color: #fff; font-size: 34px; margin-bottom: 16px; }
.institutional .product-showcase p { color: #d6e2eb; font-size: 14px; margin-bottom: 20px; }
.institutional .product-showcase .product-note { color: #c5d7e2; font-size: 12px; margin: 18px 0 0; }
.product-showcase .text-link { color: #9be7df; }
.product-shot { display: block; border-radius: 8px; border: 1px solid #738b9a; overflow: hidden; }
.product-shot img { width: 100%; height: auto; display: block; }
.institutional .product-showcase :focus-visible { outline-color: #9be7df; }
@media(max-width: 1023px) {
 .institutional .package-card { padding: 20px; }
 .institutional .package-card-featured { padding: 19px; }
 .institutional .package-top h3 { font-size: 22px; }
 .institutional .packages-grid { gap: 14px; }
 .product-showcase { gap: 25px; padding: 28px; }
}
@media(max-width: 850px) {
 .institutional .packages-grid { grid-template-columns: 1fr; }
 .institutional .packages-grid.offers-advanced { grid-template-columns: 1fr; }
 .institutional .package-description, .institutional .offers-advanced .package-description { min-height: 0; }
 .offer-label { min-height: 0; }
 .offer-group-heading { display: block; }
 .offer-group-heading h3 { margin-bottom: 10px; }
}
@media(max-width: 767px) {
 .offer-conditions { padding: 24px; }
 .offer-conditions-grid, .product-showcase { grid-template-columns: 1fr; }
 .offer-assurances { gap: 12px; flex-direction: column; }
 .offer-existing { padding: 18px; }
 .product-showcase { padding: 24px; }
}