/*
 Theme Name: Carthago Global Trade Child
 Template: hello-elementor
*/

/* ================================
   CARTHAGO GLOBAL TRADE – UI KIT
   ================================ */
:root{
  --navy:#0d2a5e;
  --navy-900:#0b1f3a;
  --cyan:#1EA3B8;
  --text:#0f172a;
  --muted:#5b6a7f;
  --line:#e6ecf4;
  --soft:#f6f8fb;
  --white:#fff;

  --radius:14px;
  --shadow:0 10px 24px rgba(13,42,94,.08);
  --container:1100px;

  /* Imagen HERO portada */
  --hero-image-url:url('https://carthagoglobaltrade.com/wp-content/uploads/2025/08/2f0d60141831c95bebe0958f6ad2e796fb94ca6accf4362920afae741706e9f1.png');
}

/* =================
   BASE & TIPOGRAFÍA
   ================= */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}
img{ max-width:100%; height:auto; display:block }

.container{ width:min(var(--container),92%); margin-inline:auto }
.narrow{ width:min(820px,92%); margin-inline:auto }
.section{ padding:72px 0 }
.section--soft{ background:linear-gradient(180deg,#f6f8fb 0%, #f3f6fb 100%) }
.section--white{ background:#fff }

/* Títulos corporativos */
h1,h2,h3,h4{ color:var(--navy); margin:0 0 10px }
h1{ font-size:42px; line-height:1.15 }
h2{ font-size:32px }
h3{ font-size:22px }

/* Texto y utilidades */
.muted{ color:var(--muted); font-weight:600 }

/* Enlaces corporativos SOLO en contenido (no footer/botones) */
main a, .section a, .entry-content a{
  color:var(--navy);
  text-decoration:none;
}
main a:hover, .section a:hover, .entry-content a:hover{
  color:var(--navy-900);
  text-decoration:underline;
}

/* Énfasis */
main b, main strong{ color:var(--navy); font-weight:700 }
i, em{ color:inherit }

/* ==============
   BOTONES
   ============== */
.btn{
  display:inline-block;
  border-radius:10px;
  border:1px solid transparent;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
}
.btn-dark{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
  box-shadow:var(--shadow);
}
.btn-dark:hover{ background:var(--navy-900); color:#fff }
.btn-outline{ border-color:var(--navy); color:var(--navy); background:#fff }
.btn-light{ background:#fff; color:var(--navy); border:1px solid #fff }

/* Botones más compactos en tarjetas */
.card .btn{ padding:10px 14px; font-weight:700 }

/* ===========================
   HEADER + HERO (portada)
   =========================== */
.hero-header{
  position:relative; isolation:isolate;
  min-height:50vh;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.hero-header .hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,18,34,.10) 0%, rgba(6,18,34,.30) 35%, rgba(6,18,34,.65) 80%),
    var(--hero-image-url) center/cover no-repeat;
}

/* Stack central */
.navbar.hero-stack{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:20px;
  width:min(var(--container),94%);
  margin:auto;
  background:rgba(13,42,94,.38);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
}

/* Logo protagonista */
.navbar.hero-stack .brand,
.custom-logo-link{ display:inline-block; max-width:none !important }
.navbar.hero-stack .brand img,
.navbar.hero-stack .custom-logo,
.navbar.hero-stack .custom-logo-link img{
  height:220px !important;
  width:auto !important; max-height:none !important;
  object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.35));
}

/* Copys HERO */
.navbar.hero-stack .hero-copy{ position:static; text-align:center; width:100%; max-width:1000px }
.navbar.hero-stack .hero-copy h1{
  color:#fff; font-size:42px; line-height:1.2; margin:0 0 8px;
  text-transform:uppercase; letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.navbar.hero-stack .hero-copy .hero-sub{
  color:#fff; font-size:18px; font-weight:600; margin:0;
  text-shadow:0 1px 8px rgba(0,0,0,.40);
}
/* Sin botones en el hero */
.navbar.hero-stack .hero-copy .btn{ display:none !important }

/* ===========================
   HEADER simple (resto)
   =========================== */
.site-header{ position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); z-index:50 }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 }
.site-header .brand img{ max-height:60px; width:auto; height:auto; object-fit:contain }
.site-header .menu{ list-style:none; display:flex; gap:22px; margin:0; padding:0 }
.site-header .menu a{ color:var(--text) !important; font-weight:600 }

/* ==========================
   TÍTULOS con guion
   ========================== */
.title-with-ico{ display:block; margin-bottom:16px }
.title-with-ico h2{
  position:relative; font-size:32px; color:var(--navy);
  margin:0 0 10px; padding-bottom:6px;
}
.title-with-ico h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:68px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--navy) 0%, var(--cyan) 100%);
  opacity:.25;
}
.title-with-ico h1{
  position:relative; font-size:32px; line-height:1.25;
  margin:0 0 10px; padding-bottom:6px; color:var(--navy);
}
.title-with-ico h1::after{
  content:""; position:absolute; left:0; bottom:0; width:68px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--navy) 0%, var(--cyan) 100%); opacity:.25;
}

/* ==========================
   TARJETAS / GRIDS
   ========================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
}
.card h3{ font-size:18px; margin-top:6px }
.card .muted{ font-weight:500 }
.card .thumb{ height:120px; border-radius:12px; background:#e9eef5; display:flex; align-items:center; justify-content:center }

/* ======= Servicios (2×2) ======= */
.services{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
.services .service{
  display:grid; grid-template-columns:48px 1fr; gap:12px;
  padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border-color:rgba(13,42,94,.08);
}
.services .service:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(13,42,94,.10); border-color:rgba(13,42,94,.18) }
.service-ico{
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(180deg,#eef3f9 0%, #e7eef7 100%);
  border:1px solid rgba(13,42,94,.07);
  color:#16365f; display:flex; align-items:center; justify-content:center;
}
.service h4{ margin:0 0 4px }
.service p{ margin:0; color:var(--muted) }

/* ======= Por qué elegirnos ======= */
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:12px }
.value{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:18px; box-shadow:var(--shadow);
}
.value h3{ margin:0 0 6px; font-size:18px; color:var(--navy) }
.value p{ margin:0; color:var(--muted) }

/* ==============
   UNDER HERO
   ============== */
.under-hero{ background:transparent; padding:40px 0 30px; text-align:center }
.intro-title{ margin:0 0 12px; font-size:28px; font-weight:700; color:var(--navy) }
.intro-text{ margin:0 auto; max-width:720px; font-size:18px; line-height:1.6; color:var(--muted) }
@media (max-width:640px){
  .intro-title{ font-size:24px }
  .intro-text{ font-size:16px }
}

/* ==============
   REVEAL
   ============== */
[data-reveal]{ opacity:0; transform:translateY(18px) scale(.98); transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease; will-change:transform, opacity }
[data-reveal].in-view{ opacity:1; transform:translateY(0) scale(1) }
[data-reveal="fade-right"]{ transform:translateX(-24px) }
[data-reveal="fade-right"].in-view{ transform:translateX(0) }
[data-reveal="fade-left"]{ transform:translateX(24px) }
[data-reveal="fade-left"].in-view{ transform:translateX(0) }

/* ==============
   MARQUESINA
   ============== */
.brand-marquee{ overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff }
.brand-marquee__track{ display:flex; gap:36px; padding:14px 18px; animation:marquee 28s linear infinite }
.brand-marquee img{ height:42px; width:auto; object-fit:contain; opacity:.9; filter:grayscale(10%) }
.brand-marquee img:hover{ opacity:1; filter:none }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* =====================
   SECCIONES “SPLIT”
   ===================== */
.split{ display:grid; gap:24px; align-items:center; grid-template-columns:1.1fr 1fr }
.split--reverse{ grid-template-columns:1fr 1.1fr }
.split .split-img{
  height:320px; border-radius:16px; background:#e9eef5 center/cover no-repeat;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.split .split-media{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow) }
.split .split-media video{ width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.fade-scroll{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease }
.fade-scroll.in-view{ opacity:1; transform:translateY(0) }

/* Orden móvil: texto primero */
@media (max-width:980px){
  .split{ grid-template-columns:1fr }
  .split .split-copy{ order:1 }
  .split .split-media{ order:2 }
  .split .split-img{ height:240px }
}

/* Hover tarjetas */
.cards .card{ transition:transform .18s ease, box-shadow .18s ease }
.cards .card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(13,42,94,.12) }

/* ==============
   FORMULARIOS
   ============== */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.contact input, .contact textarea{
  width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease; font-size:16px; line-height:1.4;
}
.contact input:focus, .contact textarea:focus{
  outline:0; border-color:#2b6cb0; box-shadow:0 0 0 3px rgba(43,108,176,.15);
}
.contact button{ margin-top:10px }
.small{ font-size:12px; color:var(--muted) }
.contact .consent{ margin:10px 0 14px; font-size:14px; color:#444 }
.contact .consent input{ margin-right:8px }

@media (max-width:720px){
  .grid2{ grid-template-columns:1fr }
  .contact button.btn{ width:100% }
}

/* Accesibilidad: labels ocultos */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* =================
   CTA (por defecto)
   ================= */
.section.cta{
  background:#f2f4f7;
  color:#0d2a5e;
  text-align:center;
  margin-bottom:0;
  padding:48px 0;
  overflow:hidden;
}
.section.cta h2{ color:#0d2a5e; }
.section.cta p{ color:#334155; margin:0 0 10px; }
.section.cta .btn{ margin-top:10px; }
.section.cta .btn-dark{
  background:#0d2a5e;
  color:#fff;
  border:1px solid #0d2a5e;
}
.section.cta .btn-dark:hover{
  background:#1e3a8a;
  color:#fff;
}

/* CTA con fondo blanco */
.section.section--white.cta{
  background:#fff !important;
  color:var(--text);
}
.section.section--white.cta h2{ color:var(--navy); }
.section.section--white.cta p{ color:var(--text); }

/* Enlaces de texto (no botones) dentro del CTA blanco */
.section.section--white.cta a:not(.btn){
  color:var(--navy);
  text-decoration:none;
}
.section.section--white.cta a:not(.btn):hover{
  color:var(--navy-900);
  text-decoration:underline;
}

/* Botón oscuro dentro del CTA blanco */
.section.section--white.cta .btn-dark{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.section.section--white.cta .btn-dark:hover{
  background:var(--navy-900);
  color:#fff;
}

/* ============================
   "Cómo trabajamos" 2×2 (solo aquí)
   ============================ */
.how-we-work .cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
@media (max-width:980px){
  .how-we-work .cards{ grid-template-columns:1fr; }
}

/* ==============================
   SOBRE NOSOTROS (unificación color)
   ============================== */
#sobre-nosotros p{
  color:var(--muted);
  font-weight:600;
  line-height:1.6;
}
#sobre-nosotros p strong{
  color:var(--navy);
  font-weight:700;
}
#sobre-nosotros p em{
  color:var(--muted);
  font-style:italic;
}

/* ==============================
   LISTAS CORPORATIVAS (global)
   ============================== */
.about-list, .sector-list{
  list-style:disc;
  padding-left:1.25rem;
  margin:.5rem 0 0;
}
.about-list li, .sector-list li{ margin:.5rem 0; line-height:1.55 }

/* — títulos/enfasis dentro del bullet — */
.about-list li strong, .sector-list li strong{
  color:var(--navy);
  font-weight:700;
}

/* — CUERPO del bullet —
   Forzamos gris corporativo para igualar “Sectores…” */
.about-list li{
  color:var(--muted);
  font-weight:600;
}
.about-list li em{ color:var(--muted); font-style:italic }

/* Enlaces de sectores (cuando son enlaces) */
.sector-list a.sector-link{ color:var(--navy); text-decoration:none }
.sector-list a.sector-link:hover{ color:var(--navy-900); text-decoration:underline }
.sector-list .muted, .about-list .muted{ color:var(--muted) }

/* ==============================
   ANTÍDOTOS EDITORES (WP)
   ============================== */
[class*="has-"][class*="-color"]{ color:inherit !important }

/* ==============
   FOOTER
   ============== */
.site-footer{
  position:relative;
  background:transparent;
  color:#dbe5f7;
  padding:50px 0 20px;
  border-radius:0 !important;
  margin-top:0; /* pegado a CTA */
}
.site-footer::before{
  content:"";
  position:absolute; inset:0;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  background:var(--navy);
  z-index:-1;
}
.site-footer a{ color:#dbe5f7 }
.site-footer a:hover{ color:#fff; text-decoration:underline }

/* grid footer */
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:32px;
  width:min(var(--container),92%);
  margin-inline:auto;
}
.footer-logo{ display:flex; align-items:center; gap:14px }
.footer-logo img{ height:56px; width:auto; object-fit:contain; display:block }
.footer-text h4{ margin:0; font-size:16px; color:#fff }
.footer-text p{ margin:2px 0 0; font-size:14px; color:#dbe5f7 }

.footer-col{ display:flex; flex-direction:column; align-items:flex-start; gap:6px }
.footer-col h4{ margin:0 0 10px; font-size:16px; color:#fff }
.footer-col p, .footer-col a{ font-size:14px; margin:0; color:#dbe5f7; line-height:1.5 }
.footer-col a{text-decoration:none}
.footer-col a:focus{ outline:none }
.footer-col a:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px }

/* Icono LinkedIn & Telegram */
.footer-col a[href*="linkedin"], .footer-col a[href*="lnkd.in"],
.footer-col a.telegram-link{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.footer-col a[href*="linkedin"]::before, .footer-col a[href*="lnkd.in"]::before{
  content:""; width:16px; height:16px; background:currentColor; opacity:.95;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM0 8h5v16H0V8zm7.5 0H12v2.2h.06c.62-1.17 2.14-2.4 4.41-2.4C21.4 7.8 24 10 24 14.3V24h-5v-8.6c0-2.05-.04-4.69-2.86-4.69-2.86 0-3.3 2.23-3.3 4.53V24H7.5V8z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM0 8h5v16H0V8zm7.5 0H12v2.2h.06c.62-1.17 2.14-2.4 4.41-2.4C21.4 7.8 24 10 24 14.3V24h-5v-8.6c0-2.05-.04-4.69-2.86-4.69-2.86 0-3.3 2.23-3.3 4.53V24H7.5V8z"/></svg>') center/contain no-repeat;
}
.footer-col a.telegram-link::before{
  content:""; width:16px; height:16px; background:currentColor; opacity:.95;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 0C5.373 0 0 5.373 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12C24 5.373 18.627 0 12 0zm5.657 7.293-1.53 7.211c-.115.514-.416.637-.842.397l-2.328-1.72-1.123 1.082c-.124.124-.228.228-.47.228l.168-2.386 4.348-3.926c.189-.168-.041-.262-.293-.094l-5.377 3.389-2.316-.723c-.504-.158-.514-.504.105-.746l9.06-3.497c.416-.147.783.1.649.736z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 0C5.373 0 0 5.373 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12C24 5.373 18.627 0 12 0zm5.657 7.293-1.53 7.211c-.115.514-.416.637-.842.397l-2.328-1.72-1.123 1.082c-.124.124-.228.228-.47.228l.168-2.386 4.348-3.926c.189-.168-.041-.262-.293-.094l-5.377 3.389-2.316-.723c-.504-.158-.514-.504.105-.746l9.06-3.497c.416-.147.783.1.649.736z"/></svg>') center/contain no-repeat;
}

/* Línea inferior footer */
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  width:min(var(--container),92%); margin:30px auto 0; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.15); gap:18px; font-size:13px;
}
.footer-legal-links{ display:flex; flex-wrap:wrap; gap:14px }
.footer-legal-links a{ color:#dbe5f7; text-decoration:none; white-space:nowrap }
.footer-legal-links a:hover{ text-decoration:underline }
.copy{ white-space:nowrap }

/* ===========
   RESPONSIVE
   =========== */
@media (max-width:980px){
  .hero-header{ min-height:44vh }
  .navbar.hero-stack{ gap:14px; padding:14px }
  .navbar.hero-stack .brand img{ height:110px !important }
  .navbar.hero-stack .hero-copy h1{ font-size:28px }
  .navbar.hero-stack .hero-copy .hero-sub{ font-size:15px }
  .cards, .services{ grid-template-columns:1fr }
  .value-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:780px){
  .footer-grid{ grid-template-columns:1fr; gap:18px }
  .footer-logo, .footer-col{ align-items:center; text-align:center }
  .footer-col a[href*="linkedin"], .footer-col a[href*="lnkd.in"]{ justify-content:center }
  .footer-bottom{ flex-direction:column; align-items:center; gap:10px; text-align:center }
}
@media (max-width:640px){
  .value-grid{ grid-template-columns:1fr }
}