/*
Theme Name: MAS SOLUTIONS Institucional
Theme URI: https://massolutionsperu.com
Author: MAS SOLUTIONS PERÚ S.A.C.
Description: Tema institucional de lanzamiento para MAS SOLUTIONS.
Version: 1.2.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: mas-solutions
*/

:root {
  --mas-red: #b73233;
  --mas-red-dark: #8f2528;
  --mas-blue: #2c538a;
  --mas-blue-dark: #172d4c;
  --mas-blue-deep: #0c1b30;
  --mas-yellow: #ffee56;
  --ink: #182233;
  --muted: #667085;
  --line: #dfe4ea;
  --paper: #f5f7fa;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;
}
body.admin-bar .site-header { top: 32px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-top: 4px solid var(--mas-yellow);
  border-bottom: 1px solid rgba(23, 45, 76, .1);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(16px);
}
.header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; width: 176px; flex: 0 0 auto; }
.brand img, .site-footer img { width: 100%; }
.desktop-nav { display: flex; align-items: center; gap: 24px; font-size: .86rem; font-weight: 700; color: #344054; }
.desktop-nav a:hover { color: var(--mas-red); }
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 750;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding-inline: 18px; font-size: .82rem; }
.button-primary { background: var(--mas-red); color: var(--white); box-shadow: 0 10px 24px rgba(183,50,51,.2); }
.button-primary:hover { background: var(--mas-red-dark); box-shadow: 0 14px 32px rgba(183,50,51,.3); }
.button-secondary { border-color: #cad1dc; background: rgba(255,255,255,.72); color: var(--mas-blue-dark); }
.button-light { background: var(--white); color: var(--mas-blue-dark); }
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 78% 40%, rgba(44,83,138,.14), transparent 31%), linear-gradient(135deg,#fff 0%,#f6f8fb 62%,#eef2f7 100%);
}
.hero:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -260px;
  top: 160px;
  border: 72px solid rgba(183,50,51,.035);
  border-radius: 50%;
}
.hero-grid { min-height: 700px; padding: 86px 0 72px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 60px; }
.eyebrow { margin: 0 0 18px; color: var(--mas-red); font-size: .74rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-light { color: var(--mas-yellow); }
.hero h1 { max-width: 770px; margin: 0; color: var(--mas-blue-dark); font-size: clamp(3rem,5.2vw,5.25rem); font-weight: 780; letter-spacing: -.055em; line-height: .98; }
.hero h1 span { color: var(--mas-red); }
.hero-lead { max-width: 690px; margin: 28px 0 0; color: #526071; font-size: 1.08rem; line-height: 1.75; }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 13px; }
.hero-trust { margin-top: 48px; padding-top: 26px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #d8dee7; }
.hero-trust div { padding-right: 18px; display: flex; flex-direction: column; gap: 5px; }
.hero-trust strong { color: var(--mas-blue-dark); font-size: .95rem; }
.hero-trust span { color: #778294; font-size: .77rem; }
.hero-visual { position: relative; aspect-ratio: 1/1; isolation: isolate; }
.hero-visual:before { content: ""; position: absolute; inset: 12%; z-index: -2; border-radius: 50%; background: linear-gradient(145deg,var(--mas-blue),var(--mas-blue-deep)); box-shadow: 0 40px 80px rgba(23,45,76,.24); }
.visual-orbit { position: absolute; z-index: -1; border: 1px solid rgba(44,83,138,.22); border-radius: 50%; }
.orbit-one { inset: 3%; }
.orbit-two { inset: 22%; border-color: rgba(255,255,255,.18); }
.visual-card { position: absolute; border: 1px solid rgba(255,255,255,.65); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 22px 55px rgba(23,45,76,.18); }
.visual-card-main { width: 62%; left: 19%; top: 35%; padding: 32px; color: var(--mas-blue-dark); }
.visual-card-main:before { content: ""; position: absolute; width: 42px; height: 9px; right: 22px; top: 22px; background: var(--mas-yellow); }
.visual-label { display: block; margin-bottom: 8px; color: var(--mas-red); font-size: .67rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.visual-card-main strong { display: block; font-size: clamp(1.65rem,3.2vw,2.7rem); letter-spacing: -.05em; }
.visual-card-main p { margin: 8px 0 0; color: #6b7584; font-size: .78rem; }
.visual-card-top, .visual-card-right, .visual-card-bottom { padding: 13px 16px; display: flex; align-items: center; gap: 12px; color: var(--mas-blue-dark); font-size: .76rem; font-weight: 750; }
.visual-card-top { top: 17%; left: 9%; }
.visual-card-right { top: 25%; right: 2%; }
.visual-card-bottom { right: 9%; bottom: 16%; }
.signal { width: 9px; height: 9px; border-radius: 50%; }
.signal-red { background: var(--mas-red); }
.signal-yellow { background: var(--mas-yellow); }
.signal-blue { background: var(--mas-blue); }
.model-section { padding: 100px 0; background: var(--mas-blue-deep); color: var(--white); }
.section-heading { margin-bottom: 46px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; }
.section-heading h2 { max-width: 700px; margin: 0; color: var(--mas-blue-dark); font-size: clamp(2.25rem,4vw,3.8rem); line-height: 1.04; letter-spacing: -.045em; }
.section-heading > p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.75; }
.section-heading-light h2 { color: var(--white); }
.section-heading-light > p { color: #b8c3d2; }
.model-flow { display: grid; grid-template-columns: 1.15fr repeat(4,1fr); gap: 10px; }
.model-origin, .model-step { min-height: 180px; padding: 24px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); }
.model-origin { display: flex; flex-direction: column; justify-content: flex-end; background: var(--mas-red); }
.model-origin span { font-size: .68rem; font-weight: 800; letter-spacing: .18em; }
.model-origin strong { font-size: 2.35rem; letter-spacing: -.05em; }
.model-step { display: flex; flex-direction: column; justify-content: space-between; }
.model-step span { color: var(--mas-yellow); font-family: Consolas, monospace; font-size: .72rem; }
.model-step strong { max-width: 150px; font-size: 1rem; line-height: 1.35; }
.methods-section { padding: 110px 0; background: var(--paper); }
.methods-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.method-card { padding: 38px; border: 1px solid var(--line); background: var(--white); }
.method-card-consulting { border-top: 7px solid var(--mas-red); }
.method-card-academy { border-top: 7px solid var(--mas-blue); }
.method-brand-logo { height: 92px; margin-bottom: 28px; display: flex; align-items: center; }
.method-brand-logo img { width: min(100%,280px); max-height: 88px; object-fit: contain; object-position: left center; }
.method-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.method-kicker { margin: 0 0 9px; color: var(--mas-red); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.method-card h3 { margin: 0; color: var(--mas-blue-dark); font-size: 1.55rem; line-height: 1.2; }
.method-mark { flex: 0 0 auto; color: var(--mas-blue-dark); font-size: 3.8rem; font-weight: 850; line-height: .9; letter-spacing: -.08em; }
.method-card > p { margin: 24px 0; color: var(--muted); line-height: 1.7; }
.method-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.method-steps span { min-height: 64px; padding: 10px 7px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--mas-blue-dark); font-size: .68rem; font-weight: 780; text-align: center; }
.method-statement { margin: 18px 0 0; padding: 26px 30px; border-left: 7px solid var(--mas-yellow); background: var(--mas-blue-deep); color: var(--white); font-size: 1.08rem; font-weight: 680; line-height: 1.65; }
.pillars-section, .pathways-section, .academy-ecosystem, .about-section { padding: 110px 0; }
.pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pillar-card { min-height: 285px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.pillar-card:hover { transform: translateY(-4px); border-color: rgba(44,83,138,.45); box-shadow: 0 24px 55px rgba(23,45,76,.1); }
.pillar-card-featured { grid-column: span 3; min-height: auto; display: grid; grid-template-columns: 80px 1fr 1.2fr auto; align-items: center; gap: 26px; border: 0; background: var(--mas-blue); color: var(--white); }
.pillar-number { color: var(--mas-red); font-family: Consolas, monospace; font-size: .75rem; font-weight: 700; }
.pillar-card h3 { max-width: 270px; margin: 38px 0 12px; color: var(--mas-blue-dark); font-size: 1.2rem; line-height: 1.28; }
.pillar-card p { margin: 0 0 28px; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.pillar-card a { margin-top: auto; color: var(--mas-blue); font-size: .78rem; font-weight: 780; }
.pillar-card-featured .pillar-number, .pillar-card-featured a { color: var(--mas-yellow); }
.pillar-card-featured h3 { margin: 0; color: var(--white); }
.pillar-card-featured p { margin: 0; color: #e0e8f3; }
.pathways-section { background: var(--paper); }
.pathways-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.pathway-card { min-height: 390px; padding: 34px; display: flex; flex-direction: column; border: 1px solid #d9e0e9; background: var(--white); }
.pathway-diagnosis { background: var(--mas-red); color: var(--white); border-color: var(--mas-red); }
.pathway-tag { color: var(--mas-red); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pathway-card h3 { margin: 64px 0 18px; color: var(--mas-blue-dark); font-size: 1.55rem; line-height: 1.22; letter-spacing: -.025em; }
.pathway-card p { margin: 0; color: var(--muted); font-size: .91rem; line-height: 1.7; }
.pathway-card a { margin-top: auto; color: var(--mas-blue); font-size: .85rem; font-weight: 800; }
.pathway-diagnosis .pathway-tag, .pathway-diagnosis a { color: var(--mas-yellow); }
.pathway-diagnosis h3, .pathway-diagnosis p { color: var(--white); }
.homologation-note { margin: 22px 0 0; color: #717d8e; font-size: .74rem; line-height: 1.6; }
.academy-ecosystem { background: var(--white); }
.ecosystem-intro { max-width: 720px; margin: -20px 0 48px; color: var(--muted); line-height: 1.75; }
.academy-parent { margin-bottom: 24px; padding: 28px 32px; display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 46px; border: 1px solid var(--line); border-left: 7px solid var(--mas-blue); background: var(--paper); }
.academy-parent img { width: min(100%,320px); height: auto; }
.academy-parent p { margin: 0; color: var(--muted); line-height: 1.7; }
.ecosystem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.ecosystem-card { position: relative; min-height: 380px; padding: 30px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); }
.ecosystem-card:after { content: "→"; position: absolute; right: -15px; top: 50%; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--mas-yellow); color: var(--mas-blue-dark); font-weight: 900; }
.ecosystem-card:last-child:after { display: none; }
.ecosystem-logo { height: 94px; display: flex; align-items: center; }
.ecosystem-logo img { width: min(100%,250px); max-height: 82px; object-fit: contain; object-position: left center; }
.ecosystem-method-badge { width: fit-content; min-height: 62px; padding: 16px 20px; display: flex; align-items: center; border-left: 6px solid var(--mas-red); background: var(--mas-blue-dark); color: var(--white); font-size: 1.08rem; font-weight: 850; letter-spacing: -.02em; }
.ecosystem-phase { margin-top: 34px; color: var(--mas-red); font-size: .7rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.ecosystem-card h3 { margin: 12px 0 16px; color: var(--mas-blue-dark); font-size: 1.45rem; line-height: 1.24; }
.ecosystem-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.ecosystem-card strong { margin-top: auto; padding-top: 24px; color: var(--mas-blue); font-size: .78rem; }
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.about-stat { padding: 42px; background: var(--mas-yellow); color: var(--mas-blue-dark); }
.about-stat strong { display: block; font-size: clamp(3rem,6vw,5rem); line-height: 1; }
.about-stat span { display: block; margin-top: 12px; font-weight: 750; }
.about-copy h2 { margin: 0 0 24px; color: var(--mas-blue-dark); font-size: clamp(2.2rem,4vw,3.6rem); line-height: 1.05; letter-spacing: -.045em; }
.about-copy p { color: var(--muted); line-height: 1.75; }
.certificate-section { padding: 108px 0; overflow: hidden; background: var(--mas-blue); color: var(--white); }
.certificate-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.certificate-copy h2 { margin: 0; font-size: clamp(2.4rem,4.4vw,4rem); line-height: 1.03; letter-spacing: -.05em; }
.certificate-copy > p:not(.eyebrow) { max-width: 560px; margin: 24px 0 30px; color: #dce6f4; line-height: 1.75; }
.certificate-logo { width: min(100%,300px); margin-bottom: 28px; padding: 13px 18px; background: var(--white); }
.certificate-logo img { display: block; width: 100%; height: auto; }
.certificate-card { position: relative; min-height: 370px; padding: 42px; overflow: hidden; border: 1px solid rgba(255,255,255,.55); background: var(--white); color: var(--ink); box-shadow: 0 35px 80px rgba(12,27,48,.28); }
.certificate-card:after { content: ""; position: absolute; width: 240px; height: 240px; right: -110px; bottom: -110px; border: 40px solid rgba(183,50,51,.08); border-radius: 50%; }
.certificate-status { display: flex; align-items: center; gap: 8px; color: #39795b; font-size: .78rem; font-weight: 800; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #50a879; box-shadow: 0 0 0 5px rgba(80,168,121,.12); }
.certificate-code { margin: 47px 0 38px; color: var(--mas-blue-dark); font-family: Consolas, monospace; font-size: clamp(1.5rem,3vw,2.55rem); font-weight: 730; letter-spacing: -.05em; }
.certificate-card dl { max-width: 380px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.certificate-card dl div { padding-top: 14px; border-top: 1px solid var(--line); }
.certificate-card dt { color: #8a94a3; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.certificate-card dd { margin: 7px 0 0; color: var(--mas-blue-dark); font-size: .84rem; font-weight: 700; }
.certificate-seal-logo { position: absolute; right: 28px; top: 24px; width: 140px; padding: 8px 10px; background: var(--white); }
.certificate-seal-logo img { display: block; width: 100%; height: auto; }
.contact-section { padding: 96px 0; }
.contact-card { padding: 60px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 70px; background: var(--mas-yellow); }
.contact-card h2 { max-width: 700px; margin: 0; color: var(--mas-blue-dark); font-size: clamp(2rem,3.7vw,3.45rem); line-height: 1.05; letter-spacing: -.045em; }
.contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.contact-email { color: var(--mas-blue-dark); font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }
.site-footer { padding: 72px 0 28px; background: var(--mas-blue-deep); color: var(--white); }
.footer-grid { padding-bottom: 58px; display: grid; grid-template-columns: 1.6fr 1fr .7fr; gap: 70px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-grid img { width: 185px; padding: 8px; background: var(--white); }
.footer-grid p, .footer-grid a { margin: 0; color: #aeb9c9; font-size: .8rem; line-height: 1.6; }
.footer-grid strong { margin-bottom: 8px; color: var(--mas-yellow); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); color: #8491a4; font-size: .72rem; }
.content-page { min-height: 60vh; padding: 80px 0; }
.content-page h1 { color: var(--mas-blue-dark); }
.content-page .entry-content { max-width: 820px; line-height: 1.75; }

@media (max-width:1040px) {
  .desktop-nav { display: none; }
  .hero-grid { grid-template-columns: 1fr .75fr; gap: 28px; }
  .hero-visual { transform: scale(.9); }
  .model-flow { grid-template-columns: repeat(2,1fr); }
  .model-origin { grid-row: span 2; }
}
@media (max-width:782px) {
  body.admin-bar .site-header { top: 46px; }
  .shell { width: min(100% - 30px,620px); }
  .site-header { position: relative; }
  .header-inner { min-height: 72px; gap: 16px; }
  .brand { width: 138px; }
  .button-small { min-height: 38px; padding-inline: 12px; font-size: .72rem; }
  .hero-grid { min-height: auto; padding: 64px 0 50px; grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.7rem,12vw,4rem); }
  .hero-visual { max-width: 500px; width: 100%; margin: 0 auto; transform: none; }
  .section-heading, .certificate-grid, .contact-card, .footer-grid, .about-grid, .academy-parent { grid-template-columns: 1fr; gap: 30px; }
  .model-section, .methods-section, .pillars-section, .pathways-section, .academy-ecosystem, .certificate-section, .about-section { padding: 76px 0; }
  .pillars-grid, .pathways-grid { grid-template-columns: 1fr; }
  .methods-grid, .ecosystem-grid { grid-template-columns: 1fr; }
  .ecosystem-card { min-height: auto; }
  .ecosystem-card:after { right: 50%; top: auto; bottom: -15px; transform: translateX(50%) rotate(90deg); }
  .pillar-card-featured { grid-column: auto; grid-template-columns: 1fr; }
  .pillar-card-featured h3 { margin-top: 12px; }
  .model-flow { grid-template-columns: 1fr 1fr; }
  .model-origin { grid-row: auto; }
  .certificate-card { min-height: 340px; padding: 30px; }
  .certificate-seal-logo { width: 115px; }
  .contact-card { padding: 38px 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}
@media (max-width:500px) {
  .button-small { display: none; }
  .hero-actions .button { width: 100%; }
  .hero-trust { grid-template-columns: 1fr; gap: 18px; }
  .hero-visual { aspect-ratio: 1/1.08; }
  .visual-card-main { width: 72%; left: 14%; padding: 22px; }
  .visual-card-right { right: 0; }
  .model-flow { grid-template-columns: 1fr; }
  .method-heading { align-items: center; }
  .method-steps { grid-template-columns: 1fr; }
  .method-steps span { min-height: 44px; }
  .certificate-card dl { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*:before,*:after { transition: none !important; }
}
