/* PMO · Soluciones: static page for the QR with services and solutions, based on the main theme. */
@font-face{font-family:Montserrat;src:url('assets/fonts/montserrat-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/fonts/montserrat-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/fonts/montserrat-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/fonts/montserrat-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root { --petrol:#203e4a; --petrol-deep:#18313b; --lime:#bdd631; --lime-hover:#cee25c; --powder:#fffef9; --muted:#586b70; --line:#d9dfd8; --soft:#d5dfdf; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; min-height:100vh; background:var(--petrol); color:var(--powder); font-family:Montserrat,Arial,sans-serif; font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; position:relative; isolation:isolate; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(125deg,transparent 55%,#fffef904 55%,#fffef904 75%,transparent 75%); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
figure { margin:0; }
p { margin:0 0 1em; text-wrap:pretty; }
h1,h2 { font-weight:600; line-height:1.13; letter-spacing:-.045em; margin:0 0 .55em; text-wrap:balance; }
strong { font-weight:600; }
::selection { background:var(--lime); color:var(--petrol); }
:focus-visible { outline:3px solid var(--lime); outline-offset:4px; }
.card :focus-visible { outline-color:#718400; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:10; background:var(--lime); color:var(--petrol); padding:12px 20px; font-weight:600; }
.skip-link:focus { top:10px; }
.accent { color:var(--lime); }

.eyebrow { display:flex; align-items:center; gap:12px; font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; line-height:1.6; margin-bottom:14px; }
.eyebrow::before { content:''; width:24px; height:2px; background:var(--lime); flex-shrink:0; }

/* Single continuous stroke arrow, same as the main site. */
:root { --arrow-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5 12.5 3.5H5.5 12.5V10.5'/%3E%3C/svg%3E"); }
.arrow { position:relative; display:inline-block; width:16px; height:16px; flex-shrink:0; vertical-align:middle; transition:transform .2s; }
.arrow::before { content:''; position:absolute; left:50%; top:50%; width:16px; height:16px; transform:translate(-50%,-50%); background:currentColor; -webkit-mask:var(--arrow-icon) center/contain no-repeat; mask:var(--arrow-icon) center/contain no-repeat; }
a:hover .arrow { transform:translate(2px,-2px); }

.button { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; min-height:54px; padding:0 0 0 22px; font-size:13px; font-weight:600; line-height:1.4; border:1px solid var(--lime); overflow:hidden; cursor:pointer; transition:background .2s,color .2s,transform .2s,border-color .2s; }
.button .arrow { display:grid; place-items:center; align-self:stretch; width:52px; min-height:52px; border-left:1px solid #203e4a30; }
.button-primary { background:var(--lime); color:var(--petrol); }
.button-primary:hover { background:var(--lime-hover); transform:translateY(-2px); }
.text-link { display:inline-flex; align-items:center; gap:24px; min-height:44px; border-bottom:1px solid #203e4a40; font-size:13px; font-weight:600; transition:border-color .2s; }
.text-link:hover { border-bottom-color:currentColor; }
/* On the dark brand panel: the way to the main site, below the e-mail button. */
.button-secondary { color:var(--powder); }
.button-secondary .arrow { border-left-color:#fffef938; }
.button-secondary:hover { background:#fffef909; color:var(--lime); }
/* Each card links to its full section on the main site. */
.card-link { margin-top:20px; }

/* Layout: one column on phones, brand panel + content on wide screens. */
.shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:36px 0 32px; }
.logo { width:220px; height:auto; margin-bottom:28px; }
.profile h1 { font-size:clamp(34px,4vw,50px); letter-spacing:-.055em; margin-bottom:18px; }
.profile .lead { font-size:15px; color:var(--soft); max-width:440px; margin-bottom:28px; }
.actions { display:grid; gap:12px; }
/* Service index: one strip of equal cells, divided like the main site's service index. */
.jump { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr); margin-top:32px; border-block:1px solid #fffef938; }
.jump a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:84px; padding:14px 6px 36px; text-align:center; font-size:clamp(11px,3.1vw,13px); font-weight:600; line-height:1.3; letter-spacing:-.01em; transition:background .2s,color .2s; }
.jump a + a { border-left:1px solid #fffef938; }
.jump a:hover { background:#fffef909; color:var(--lime); }
/* The brand dash from the eyebrows; it extends across the cell on hover and focus. */
.jump-cue { position:absolute; left:50%; bottom:20px; width:24px; height:2px; background:var(--lime); transform:translateX(-50%); transition:width .22s ease; }
.jump a:hover .jump-cue,.jump a:focus-visible .jump-cue { width:calc(100% - 28px); }

.content { display:flex; flex-direction:column; gap:20px; margin-top:36px; }
/* Two groups of cards, Servicios then Soluciones, each under its own heading. */
.group { display:flex; flex-direction:column; gap:20px; scroll-margin-top:24px; }
.group + .group { margin-top:28px; }
.group-title { display:flex; align-items:center; gap:18px; margin:0 0 4px; color:var(--powder); font-size:clamp(28px,3vw,34px); }
.group-title::after { content:''; flex:1; height:1px; background:#fffef938; }

.card { background:var(--powder); color:var(--petrol); scroll-margin-top:24px; }
.card-photo img { width:100%; aspect-ratio:16/8; object-fit:cover; }
.card-body { padding:28px 24px 30px; }
.card h2,.card-title { font-size:clamp(30px,3vw,38px); font-weight:600; line-height:1.13; letter-spacing:-.045em; margin:0 0 12px; text-wrap:balance; }
.card-body > p:not(.eyebrow) { font-size:14px; color:var(--muted); }
.features { list-style:none; margin:8px 0 0; padding:0; }
.features li { position:relative; padding:13px 0 13px 22px; border-top:1px solid var(--line); font-size:14px; font-weight:500; line-height:1.6; }
.features li::before { content:''; position:absolute; left:0; top:22px; width:8px; height:8px; background:var(--lime); }

.card-dark { background:var(--petrol-deep); color:var(--powder); border:1px solid #fffef926; }
.card-dark .eyebrow { color:var(--lime); }
.card-dark .card-body > p:not(.eyebrow) { color:var(--soft); }
.card-dark .tagline { color:var(--lime)!important; font-weight:600; font-size:16px!important; margin-bottom:10px; }
.card-dark .card-body > p.question { margin-bottom:4px; color:var(--powder); font-size:18px; font-weight:600; line-height:1.4; }
.card-dark .question-answer { margin-bottom:20px; }

/* Solution cards: rail car, question and short answer; the detail opens below. */
.solution .card-title { font-size:clamp(23px,2.3vw,28px); }
.solution .card-title.subsection { margin-top:40px; padding-top:32px; border-top:2px solid var(--petrol); }
.solution .card-body > .answer { color:var(--petrol); font-weight:500; }
.solution h4 { font-size:15px; font-weight:600; line-height:1.4; letter-spacing:-.01em; margin:28px 0 6px; }
.railcar { margin:4px 0 20px; }
.railcar img { width:auto; height:48px; }
.solution-detail { margin-top:24px; border-top:2px solid var(--petrol); }
.solution-detail summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0; cursor:pointer; list-style:none; }
.solution-detail summary::-webkit-details-marker { display:none; }
.summary-title { font-size:14px; font-weight:600; line-height:1.4; }
.summary-icon { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; background:var(--lime); color:var(--petrol); transition:background .2s; }
/* The site's arrow stroke, turned to point down while closed and up while open. */
.summary-icon::before { content:''; width:16px; height:16px; background:currentColor; -webkit-mask:var(--arrow-icon) center/contain no-repeat; mask:var(--arrow-icon) center/contain no-repeat; transform:rotate(135deg); transition:transform .22s ease; }
.solution-detail[open] .summary-icon::before { transform:rotate(-45deg); }
.solution-detail summary:hover .summary-icon { background:var(--lime-hover); }
.solution-body { padding-bottom:4px; }
.solution-body p { font-size:14px; color:var(--muted); }
.solution-body .tagline { font-size:16px; font-weight:600; color:var(--petrol); margin:20px 0 10px; }
.solution-body > .tagline:first-child { margin-top:4px; }
.solution-body .fit { margin:14px 0 20px; padding:14px 16px; border-left:4px solid var(--lime); background:#bdd6311f; color:var(--petrol); }
.features ul { list-style:none; margin:6px 0 0; padding:0; }
.features ul li { padding:6px 0 0 16px; border:0; font-weight:400; }
.features ul li::before { top:17px; width:8px; height:2px; }
.solution-body .text-link { margin-top:24px; }
/* Explanatory copy is justified, as on the site (client, 9 oct 2026); summaries, taglines and bullet lists keep their alignment. */
.card-body > p:not(.eyebrow, .tagline, .answer, .question, .question-answer), .solution-body > p:not(.tagline, .fit), .solution-body ol.features > li { text-align:justify; hyphens:auto; }

.contact { border-bottom:6px solid var(--lime); }
.contact-list { list-style:none; margin:8px 0 0; padding:0; }
.contact-list li { padding:18px 0; border-top:1px solid var(--line); }
.contact-list li:last-child { padding-bottom:0; }
.contact-list .label { display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.contact-list p { font-size:14px; color:var(--muted); margin:0 0 4px; }
.contact-link { display:inline-flex; align-items:center; gap:14px; min-height:44px; font-size:clamp(16px,4.6vw,20px); font-weight:500; overflow-wrap:anywhere; }

.signoff { text-align:center; padding:28px 0 8px; }
.signoff p { color:var(--lime); font-size:14px; margin-bottom:12px; }
.signoff small { font-size:10px; color:#c0cdd0; }

@media (min-width:1000px) {
 .shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px); gap:80px; align-items:start; padding-block:56px; }
 .profile { position:sticky; top:56px; }
 .logo { width:280px; }
 .content { margin-top:0; }
 .card-body { padding:36px 40px 40px; }
}
@media (max-width:999px) {
 .profile { text-align:center; }
 .logo { margin-inline:auto; }
 .profile .lead { margin-inline:auto; }
}
@media (max-width:350px) {
 .jump a { padding-inline:2px; font-size:10px; letter-spacing:-.02em; }
}

/* Scroll reveal, applied only when JavaScript runs (see script.js). */
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .62s ease,transform .62s ease; }
.js .reveal.is-visible { opacity:1; transform:none; }
.js .reveal:focus-within { opacity:1; transform:none; transition:none; }
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { transition:none!important; animation:none!important; }
 .js .reveal { opacity:1; transform:none; }
}
@media print {
 .js .reveal { opacity:1; transform:none; }
}