/* ==========================================================================
   /outsourcing-comercio-exterior/ — página pilar: consultoría y outsourcing en comercio exterior
   Solo complementa sitio.css (no reduce tamaños de letra). Clases propias con prefijo «oc-».
   ========================================================================== */

/* ---------- Encabezado ---------- */
.pagina-outsourcing .page-hero .pillars{margin-top:30px}
.pagina-outsourcing .page-hero .pillars a{min-height:44px}
.pagina-outsourcing .page-hero .pillars a:focus-visible{outline-color:#FF6B6E}
.pagina-outsourcing .page-hero .actions .btn:focus-visible{outline-color:#FF6B6E}
.pagina-outsourcing .page-hero-media{aspect-ratio:4/3}
@media (max-width:980px){
  .pagina-outsourcing .page-hero-media{aspect-ratio:16/10;max-width:720px}
}
@media (max-width:480px){
  .pagina-outsourcing .page-hero .actions .btn{flex:1 1 auto}
}

/* ---------- Modalidades: consultoría puntual u outsourcing ---------- */
.oc-modos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.oc-modo{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:14px}
.oc-modo-top{display:flex;align-items:center;gap:14px}
.oc-modo .ico{flex:none;width:48px;height:48px;border-radius:14px;background:var(--red-soft);display:grid;place-items:center}
.oc-modo .ico svg{width:24px;height:24px;color:var(--red)}
.oc-modo h3{font-size:1.4rem;margin:0;color:var(--slate-900);line-height:1.2}
.oc-modo > p{margin:0;color:var(--muted);text-wrap:pretty}
.oc-label{margin:6px 0 0;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.oc-modo .checklist li{font-size:.95rem;line-height:1.5;color:var(--ink)}
.oc-modo dl{margin:auto 0 0;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:12px}
.oc-modo dt{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.oc-modo dd{margin:2px 0 0;font-weight:600;font-size:.95rem;color:var(--slate);line-height:1.45;text-wrap:pretty}
.oc-modo .btn{align-self:flex-start;margin-top:6px}
/* Outsourcing: la modalidad principal, en oscuro */
.oc-modo--principal{background:var(--slate-900);border-color:var(--slate-900);color:#E6ECEF;position:relative;overflow:hidden;isolation:isolate}
.oc-modo--principal::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 100% 0%,rgba(211,14,17,.25),transparent 70%)}
.oc-modo--principal .ico{background:var(--red)}
.oc-modo--principal .ico svg{color:#fff}
.oc-modo--principal h3{color:#fff}
.oc-modo--principal > p{color:#C4D0D6}
.oc-modo--principal .oc-label{color:#FF6B6E}
/* Solo color: «Por ejemplo» / «Incluye» en rojo (antes los pisaba .oc-modo > p) */
.oc-modo > p.oc-label{color:var(--red)}
.oc-modo--principal > p.oc-label{color:#FF6B6E}
.oc-modo--principal .checklist li{color:#E6ECEF}
.oc-modo--principal .checklist svg{color:#FF6B6E}
.oc-modo--principal dl{border-top-color:rgba(255,255,255,.14)}
.oc-modo--principal dt{color:#A9B8BF}
.oc-modo--principal dd{color:#fff}
.oc-modo--principal :focus-visible{outline-color:#FF6B6E}

/* ---------- Tres pilares en detalle ---------- */
.oc-pilares-sec{background:var(--bg-alt)}
.oc-pilares{display:grid;gap:24px}
.oc-pilar{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr);background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;scroll-margin-top:100px;transition:box-shadow .2s}
.oc-pilar:target{box-shadow:0 0 0 3px rgba(211,14,17,.28),var(--shadow)}
.oc-pilar-head{position:relative;overflow:hidden;background:var(--slate-900);color:#fff;padding:30px 30px 28px;display:flex;flex-direction:column;align-items:flex-start}
.oc-pilar-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red)}
.oc-pilar-head::before{content:attr(data-n);content:attr(data-n) / "";position:absolute;right:18px;top:8px;font-size:4.6rem;font-weight:800;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.07)}
.oc-pilar-head .ico{width:48px;height:48px;border-radius:14px;background:var(--red);display:grid;place-items:center;margin-bottom:18px}
.oc-pilar-head .ico svg{width:24px;height:24px;color:#fff}
.oc-pilar-head h3{font-size:1.6rem;color:#fff;margin:0 0 .35em}
.oc-pilar-head p{margin:0 0 16px;color:#C4D0D6;font-size:.95rem;line-height:1.55;text-wrap:pretty}
.oc-pilar-head .oc-cuando{color:#E6ECEF;margin-bottom:20px}
.oc-pilar-head .oc-cuando b{display:block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FF6B6E;margin-bottom:4px}
.oc-pilar-head .oc-pedir{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:700;text-decoration:none}
.oc-pilar-head .oc-pedir svg{width:16px;height:16px;flex:none}
.oc-pilar-head .oc-pedir:hover{text-decoration:underline;text-underline-offset:3px}
.oc-pilar-head :focus-visible{outline-color:#FF6B6E}
.oc-serv{list-style:none;margin:0;padding:10px 32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;align-content:center}
.oc-serv li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-content:start;padding:22px 0;border-top:1px solid var(--line)}
.oc-serv li:nth-child(-n+2){border-top:0}
.oc-serv svg{grid-row:1/3;width:22px;height:22px;color:var(--red);margin-top:2px}
.oc-serv h4{grid-column:2;font-size:1.05rem;color:var(--slate-900);margin:0 0 6px;line-height:1.3;text-wrap:balance}
.oc-serv p{grid-column:2;margin:0;font-size:.95rem;color:var(--muted);line-height:1.55;text-wrap:pretty}

/* ---------- Importación y exportación ---------- */
.oc-io-intro{margin-bottom:44px}
.oc-io-intro .lead{max-width:none}
.oc-io-intro .split-media img{aspect-ratio:900/550;object-fit:cover}
.oc-origenes{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.oc-origenes li{display:inline-flex;align-items:center;gap:8px;background:var(--bg-alt);border:1px solid var(--line);border-radius:99px;padding:7px 16px 7px 10px;font-weight:700;font-size:.95rem;color:var(--slate-900)}
.oc-origenes svg{width:20px;height:20px;color:var(--red);flex:none}
.oc-sede{margin:14px 0 0;font-size:.92rem;color:var(--muted)}
.oc-io{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.oc-io article{background:var(--bg-alt);border:1px solid var(--line);border-radius:18px;padding:28px 30px}
.oc-io h3{display:flex;align-items:center;gap:12px;font-size:1.35rem;color:var(--slate-900);margin:0 0 .5em}
.oc-io h3 .ico{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.oc-io h3 .ico svg{width:22px;height:22px;color:var(--red)}
.oc-io article > p{color:var(--muted);margin:0 0 16px;text-wrap:pretty}
.oc-io .checklist li{font-size:.95rem;line-height:1.5}

/* ---------- Cómo trabajamos: quién hace qué ---------- */
.oc-roles-t{margin:56px 0 18px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#A9B8BF}
.oc-roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.oc-rol{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:22px 20px}
.oc-rol .ico{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.07);display:grid;place-items:center;margin-bottom:14px}
.oc-rol .ico svg{width:22px;height:22px;color:#FF6B6E}
.oc-rol h3{font-size:1.05rem;color:#fff;margin:0 0 6px;line-height:1.3}
.oc-rol p{margin:0;font-size:.92rem;color:#A9B8BF;line-height:1.5;text-wrap:pretty}

/* ---------- Para quién ---------- */
.oc-para .card .more{margin-top:auto}
/* 5 tarjetas: 3 + 2 en escritorio y 2 + 2 + 1 (la última a todo el ancho) en tableta, sin huecos */
@media (min-width:981px){
  .oc-para .card-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .oc-para .card{grid-column:span 2}
  .oc-para .card:nth-child(n+4){grid-column:span 3}
}
@media (min-width:601px) and (max-width:980px){
  .oc-para .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oc-para .card:last-child{grid-column:1/-1}
}

/* Enlaces de tarjeta: si el texto se parte, la flecha sigue a la última palabra (y no queda suelta al borde) */
.oc-para .card .more,.oc-links a{display:inline-block;align-self:flex-start;min-height:44px;padding:10px 0;line-height:1.4}
.oc-para .card .more svg,.oc-links a svg{display:inline-block;width:16px;height:16px;vertical-align:-2px;margin-left:6px}

/* ---------- Respaldo: experiencia y seguridad en la cadena ---------- */
.oc-extra-sec{background:var(--bg-alt)}
.oc-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.oc-extra article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;position:relative;overflow:hidden}
.oc-extra article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}
.oc-extra .oc-cq::before{background:var(--cq)}
.oc-extra .ico{width:48px;height:48px;border-radius:14px;background:var(--red-soft);display:grid;place-items:center}
.oc-extra .ico svg{width:24px;height:24px;color:var(--red)}
.oc-extra .oc-cq .ico{background:#F1E9F8}
.oc-extra .oc-cq .ico svg{color:var(--cq)}
.oc-extra h3{font-size:1.3rem;color:var(--slate-900);margin:4px 0 0;line-height:1.25;text-wrap:balance}
.oc-extra p{margin:0;color:var(--muted);text-wrap:pretty}
.oc-extra .oc-legal{font-size:.8rem;line-height:1.5;color:var(--muted)}
.oc-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:auto;padding-top:6px}
.oc-links a{font-weight:700;color:var(--red-700);text-decoration:none}
.oc-links a:hover{text-decoration:underline;text-underline-offset:3px}
.oc-extra .oc-cq .oc-links a{color:var(--cq)}

/* ---------- Preguntas frecuentes ---------- */
.oc-faq .faq{max-width:none}
.oc-faq .lead a{color:var(--red-700);font-weight:600;text-underline-offset:3px}
.oc-faq .faq a{color:var(--red-700);font-weight:600;text-underline-offset:3px}

/* ---------- Cierre: la banda sigue a las preguntas, sin doble margen ---------- */
section.block.oc-cierre{padding-top:0}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .oc-roles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .oc-modos,.oc-extra{grid-template-columns:minmax(0,1fr)}
  .oc-pilar{grid-template-columns:minmax(0,1fr)}
  .oc-pilar-head .oc-pedir{margin-top:0}
  .oc-io-intro .split-media{max-width:720px}
}
@media (max-width:860px){
  .oc-io{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .oc-serv{grid-template-columns:minmax(0,1fr);padding:4px 22px}
  .oc-serv li:nth-child(2){border-top:1px solid var(--line)}
  .oc-pilar-head{padding:26px 22px 24px}
  .oc-modo,.oc-extra article{padding:24px 22px}
  .oc-io article{padding:24px 22px}
  .oc-roles-t{margin-top:44px;padding-top:32px}
}
@media (max-width:560px){
  .oc-roles{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .oc-modo .btn{align-self:stretch}
  /* Banda de cierre: botones a todo el ancho */
  .oc-cierre .cta-band .actions .btn{flex:1 1 100%;padding-inline:1em}
}
@media (forced-colors:active){
  .oc-pilar-head .ico,.oc-modo--principal .ico{forced-color-adjust:none}
}

/* ==========================================================================
   Escala de ESCRITORIO (2026-10-01, pedido del CEO: menos texto y letra más grande).
   Solo desde 981 px; en celular y tableta los tamaños de arriba no cambian.
   Lectura 1.1rem (22 px) · datos y notas 1rem (20 px) · etiquetas en mayúsculas .9rem (18 px).
   ========================================================================== */
@media (min-width:981px){
  /* Texto de lectura */
  .oc-modo > p,.oc-modo .checklist li,.oc-pilar-head p,.oc-io article > p,.oc-io .checklist li,
  .oc-rol p,.oc-extra p,.oc-cierre .cta-band p{font-size:1.1rem}
  /* Datos, notas y enlaces */
  .oc-modo dd,.oc-origenes li,.oc-sede,.oc-extra .oc-legal,.oc-pilar-head .oc-pedir,.oc-links a{font-size:1rem}
  .oc-extra .oc-legal{line-height:1.5}
  /* Etiquetas en mayúsculas */
  .oc-modo .oc-label,.oc-modo dt,.oc-pilar-head .oc-cuando b,.oc-roles-t{font-size:.9rem}
  /* Títulos de bloque */
  .oc-modo h3{font-size:1.5rem}
  .oc-serv h4{font-size:1.25rem;margin:0}
  .oc-rol h3{font-size:1.25rem}
  .oc-extra h3{font-size:1.4rem}
  .oc-io h3{font-size:1.45rem}
  /* Pilares: encabezado oscuro más ancho y los cuatro servicios (solo título) en una lista de una columna,
     para que ambos lados queden de alto parecido y sin un hueco blanco junto al encabezado */
  .oc-pilar{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .oc-pilar-head p{margin-bottom:18px}
  .oc-serv{grid-template-columns:minmax(0,1fr);padding:10px 44px}
  .oc-serv li{grid-template-columns:24px minmax(0,1fr);column-gap:16px;align-items:center;padding:22px 0}
  .oc-serv li:nth-child(2){border-top:1px solid var(--line)}
  .oc-serv svg{grid-row:auto;width:24px;height:24px;margin-top:0}
  /* Respaldo: más ancho para la tarjeta con la nota legal, para que las dos queden de alto parecido */
  .oc-extra{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  /* Banda de cierre: botones apilados para dar más ancho al texto */
  .oc-cierre .cta-band .actions{flex-direction:column;align-items:stretch}
}