/* Páginas de país. Va encima de latam.css: menú, migas, pie y contenido
   relacionado siguen saliendo de scripts/enlaces.py con sus clases.
   Lo único propio de cada país es la bandera (badge, mástil y tarjeta). */
.pais{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:#0b1220; background:#fff; overflow-x:hidden; }
.pais h1,.pais h2,.pais h3,.pais .btn,.pais .logo,.pais .store b,.pais .indice-card b{ font-family:'Montserrat','Inter',system-ui,sans-serif; }
.pais .deco{ position:absolute; pointer-events:none; height:auto; z-index:1; }
.pais .wrap{ max-width:1248px; } /* mismo ancho que el resto del sitio (latam.css) */
.pais .btn-green{ background:#22c55e; box-shadow:0 10px 26px rgba(34,197,94,.35); }

/* HERO */
.pais .pais-hero{ background:radial-gradient(ellipse 30% 45% at 88% 20%,rgba(96,165,250,.32) 0%,transparent 70%),radial-gradient(circle at 72% 38%,rgba(37,99,235,.45) 0%,rgba(37,99,235,.12) 30%,transparent 50%),linear-gradient(120deg,#06142c 0%,#071d42 55%,#0a2a5e 100%); padding:0 24px 14px; }
.pais .pais-hero::before{ opacity:.6; }
.pais-grid{ position:relative; z-index:2; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; padding-top:6px; }
.pais-copy{ text-align:left; position:relative; z-index:3; }
.pais .badge{ background:rgba(37,99,235,.18); border-color:rgba(96,165,250,.45); color:#fff; font-size:.82rem; margin-bottom:12px; }
.pais .badge img{ width:20px; height:auto; border-radius:2px; }
.pais .pais-hero h1{ font-size:2.6rem; line-height:1.08; margin-bottom:12px; }
.pais .pais-hero h1 .hl{ display:block; color:#4f8dfd; }
.pais .pais-hero .sub{ margin:0 0 20px; max-width:520px; font-size:1rem; line-height:1.55; color:rgba(255,255,255,.85); }
.pais .cta-row{ justify-content:flex-start; align-items:center; gap:10px; }
.pais .pais-hero .cta-row{ flex-wrap:nowrap; }
.pais .pais-hero .cta-row .btn-green{ padding:14px 20px; font-size:.95rem; white-space:nowrap; }
.pais .pais-hero .stores{ flex-wrap:nowrap; gap:8px; }
.pais .pais-hero .store{ padding:7px 11px 7px 9px; }
.pais .pais-hero .store b{ font-size:.9rem; }
.pais .stores{ display:flex; gap:10px; flex-wrap:wrap; }
.pais .store{ display:inline-flex; align-items:center; gap:9px; background:rgba(4,12,28,.85); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:10px; padding:8px 14px 8px 11px; line-height:1.1; }
.pais .store:hover{ border-color:#fff; }
.pais .store svg{ width:22px; height:22px; flex:none; }
.pais .store small{ display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; opacity:.85; }
.pais .store b{ font-size:.98rem; font-weight:600; }
.pais .checks{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:18px; color:rgba(255,255,255,.85); font-size:.82rem; }
.pais .checks span{ display:inline-flex; align-items:center; }
.pais .checks span::before{ content:'✓'; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-right:8px; border-radius:50%; background:#2563eb; color:#fff; font-size:.66rem; font-weight:800; }
.pais .pais-hero .h-ola{ left:-300px; bottom:60px; width:460px; opacity:.85; transform:rotate(-72deg); }
.pais .pais-hero .deco-1{ left:-22px; bottom:150px; width:64px; }
.pais .pais-hero .deco-2{ left:44%; top:130px; width:44px; }
.pais .pais-hero .deco-7{ left:4%; top:150px; width:52px; }
.pais .pais-hero .deco-8{ left:5.5%; bottom:70px; width:26px; }

/* Composición: auto detrás a la derecha, bandera arriba, equipos delante */
.pais-visual{ position:relative; width:calc(100% + 50px); margin:-112px -60px -30px 10px; aspect-ratio:780 / 620; }
.pais-visual img{ position:absolute; height:auto; }
.pais-visual .h-auto{ right:-7%; bottom:3%; width:44%; z-index:1; -webkit-mask-image:radial-gradient(ellipse 68% 70% at 30% 55%,#000 45%,transparent 92%); mask-image:radial-gradient(ellipse 68% 70% at 30% 55%,#000 45%,transparent 92%); }
.pais-visual .h-bandera{ right:3%; top:20%; width:20%; z-index:1; }
.pais-visual .h-equipos{ left:3%; bottom:5%; width:80%; z-index:2; filter:drop-shadow(0 24px 40px rgba(0,0,0,.45)); }

/* Celular con captura real del sistema (moneda del país) */
.cel-real{ position:absolute; aspect-ratio:390 / 844; padding:6px; /* el % de padding se mide contra el padre, no contra el celular */ background:linear-gradient(145deg,#2b3446,#0b1220 40%); border-radius:15% / 7%; box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 24px 44px rgba(0,0,0,.45); z-index:3; }
.pais-visual .cel-real img,.cel-real img{ position:static; display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:12% / 5.6%; }
/* Barra de estado e isla, para que la captura se lea como la pantalla de un teléfono y los
   íconos de la app no queden cortados por las esquinas redondeadas */
.pais-visual .cel-real img,.cel-real img{ border-top:solid #0e1628; border-top-width:max(14px,7.5cqw); }
.cel-real{ container-type:inline-size; }
.cel-real::before{ content:'9:41'; position:absolute; left:13%; top:calc(6px + 1.6cqw); color:#fff; font:600 max(7px,4.6cqw)/1 'Inter',system-ui,sans-serif; z-index:1; }
.cel-real::after{ content:''; position:absolute; left:50%; top:calc(6px + 1.4cqw); width:30%; height:max(8px,4.6cqw); transform:translateX(-50%); background:#000; border-radius:99px; z-index:1; }
.pais-visual .cel-hero{ left:3.6%; bottom:5%; width:24.6%; }
.pais-foto .cel-intro{ right:0; top:-4%; width:36%; }

/* INTRO */
.pais-intro{ position:relative; padding:56px 0 40px; overflow-x:clip; background:linear-gradient(180deg,#fff 0%,#f7faff 100%); }
.pais-intro .wrap{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr); gap:44px; align-items:start; position:relative; z-index:2; }
.pais-intro .prose{ max-width:none; font-size:1rem; line-height:1.75; color:#1e293b; }
.pais-intro .prose p{ text-align:justify; }
.pais-intro .prose h2{ color:#0b1220; font-size:2rem; line-height:1.22; margin:0 0 18px; }
.pais-intro .prose h2:not(:first-child){ margin-top:32px; }
.pais-intro .prose strong{ color:#0b1220; }
.pais-foto{ position:relative; padding:4px 70px 40px 0; }
.pais-foto .i-foto{ display:block; width:100%; height:auto; border-radius:22px; box-shadow:0 24px 50px rgba(15,40,90,.22); }
.pais-foto .i-cel{ position:absolute; right:-10px; top:6%; width:42%; height:auto; filter:drop-shadow(0 20px 30px rgba(15,40,90,.3)); }
.pais-foto .tarjeta{ position:absolute; left:3%; bottom:12px; display:flex; align-items:center; gap:14px; padding:14px 18px; background:rgba(10,22,48,.92); border:1px solid rgba(96,165,250,.35); border-radius:16px; color:#fff; font-weight:600; font-size:.95rem; line-height:1.3; box-shadow:0 14px 30px rgba(0,0,0,.3); }
.pais-foto .tarjeta svg{ width:40px; height:40px; fill:#3b82f6; flex:none; padding:6px; border-radius:10px; background:rgba(37,99,235,.18); box-sizing:content-box; }
.pais-foto .tarjeta img{ width:36px; height:auto; border-radius:4px; margin-left:10px; }
.pais .pais-intro .deco-3{ left:-40px; top:58%; width:110px; opacity:.85; }
.pais .pais-intro .deco-4{ right:6%; top:34px; width:78px; opacity:.85; z-index:3; }

/* En computadora: la foto acompaña al primer bloque de texto y el segundo bloque ocupa el ancho
   completo con sus dos párrafos lado a lado, para no dejar un hueco al costado de la foto. */
@media(min-width:961px){
  .pais-intro .wrap{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); column-gap:48px; row-gap:0; align-items:start; }
  .pais-intro .prose{ display:contents; }
  .pais-intro .prose > *{ grid-column:1; min-width:0; }
  .pais-intro .prose > :nth-child(1){ grid-row:1; }
  .pais-intro .prose > :nth-child(2){ grid-row:2; }
  .pais-intro .prose > :nth-child(3){ grid-row:3; }
  .pais-intro .pais-foto{ grid-column:2; grid-row:1 / span 3; align-self:center; }
  .pais-intro .prose > :nth-child(4){ grid-column:1 / -1; grid-row:4; margin-top:30px; }
  .pais-intro .prose > :nth-child(5){ grid-column:1; grid-row:5; }
  .pais-intro .prose > :nth-child(6){ grid-column:2; grid-row:5; }
  .pais-intro .prose > :nth-child(5):last-child{ grid-column:1 / -1; }
  /* Segunda sección de texto (título y párrafo, dos veces): un bloque por columna */
  .pais-texto .prose{ display:grid; grid-template-columns:1fr 1fr; column-gap:48px; align-items:start; }
  .pais-texto .prose > :nth-child(1){ grid-column:1; grid-row:1; }
  .pais-texto .prose > :nth-child(2){ grid-column:1; grid-row:2; }
  .pais-texto .prose > :nth-child(3){ grid-column:2; grid-row:1; }
  .pais-texto .prose > :nth-child(4){ grid-column:2; grid-row:2; }
  .pais-intro .prose{ font-size:1rem; }
  .pais-intro .wrap > .prose > *{ font-size:1rem; line-height:1.75; color:#1e293b; }
  .pais-intro .wrap > .prose > h2{ font-size:2rem; line-height:1.22; color:#0b1220; margin-bottom:18px; }
  .pais-intro .wrap > .prose > p{ text-align:justify; margin-bottom:18px; }
}

/* SEGUNDA SECCIÓN DE TEXTO (solo en algunas páginas) */
.pais .pais-texto{ padding:8px 0 44px; background:#f7faff; }
.pais-texto .prose{ max-width:1200px; font-size:1rem; line-height:1.75; color:#1e293b; }
.pais-texto .prose h2{ text-align:left; color:#0b1220; font-size:1.6rem; line-height:1.25; margin:24px 0 14px; }
.pais-texto .prose p{ text-align:justify; }

/* FUNCIONES */
.pais .pais-func{ position:relative; background:linear-gradient(180deg,#eef5ff 0%,#f4f8ff 100%); overflow:hidden; padding:44px 0 40px; }
.pais .eyebrow{ font-size:.8rem; }
.pais .pais-func h2{ font-size:2.2rem; margin-bottom:26px; }
.pais .feat-grid{ grid-template-columns:repeat(2,1fr); gap:22px 24px; max-width:none; margin:0 auto; position:relative; z-index:2; }
.pais .feat{ display:flex; align-items:flex-start; gap:30px; background:rgba(255,255,255,.95); border:1px solid #e3ecf8; border-radius:18px; padding:28px 34px; box-shadow:0 12px 30px rgba(15,40,90,.06); }
.pais .feat .ic{ display:flex; align-items:center; justify-content:center; font-size:2.4rem; line-height:1; width:88px; height:88px; flex:none; margin:0; border-radius:16px; }
.pais .feat h3{ font-size:1.28rem; margin:4px 0 8px; }
.pais .feat p{ font-size:1.06rem; line-height:1.55; color:#64748b; }
.pais .pais-func .deco-5{ left:-170px; bottom:-30px; width:420px; opacity:.45; }
.pais .pais-func .deco-6{ right:-70px; top:42%; width:190px; opacity:.6; }
.pais .pais-func .deco-9{ right:5%; top:30%; width:44px; opacity:.6; }
.pais .pais-func .deco-10{ left:2.5%; bottom:60px; width:40px; opacity:.6; }

/* Íconos sin pieza en el kit: el emoji sobre un cuadro pastel como los del kit */
.pais .feat .ic-azul{ background:#e9f0ff; } .pais .feat .ic-verde{ background:#e5f7ee; } .pais .feat .ic-naranja{ background:#fff0e3; } .pais .feat .ic-morado{ background:#f1ecff; }
.pais .feat div.ic{ box-shadow:0 2px 6px rgba(15,40,90,.06) inset; }

/* PREGUNTAS (la sección no tiene clase propia: es la <section> sin clase entre funciones y relacionados) */
.pais section:not([class]){ padding:36px 0 4px; }
.pais section:not([class]) .faq{ margin-top:22px !important; }
.pais .faq details{ background:#fff; border-color:#e3ecf8; box-shadow:0 6px 18px rgba(15,40,90,.04); }
.pais .faq summary{ font-family:'Montserrat','Inter',sans-serif; font-size:1rem; }

/* RELACIONADOS (los genera enlaces.py) */
.pais .relacionados{ background:#fff; padding:40px 0 48px; }
.pais .relacionados .lead{ margin-bottom:26px; }
.pais .indice-grid.rel-3{ max-width:none; gap:20px; }
.pais .rel-card{ background:#fff; border:1px solid #dfe8f6; border-radius:18px; padding:28px 34px 30px; box-shadow:0 10px 26px rgba(15,40,90,.05); }
.pais .rel-card.rel-sistema{ background:#eef5ff; border-color:#d6e4f7; }
.pais .indice-card .rel-tag{ display:block; font-size:.8rem; letter-spacing:.05em; color:#2563eb; }
.pais .indice-card .rel-tag::first-letter{ font-size:1.9rem; line-height:1; vertical-align:middle; margin-right:14px; letter-spacing:0; }
.pais .rel-card b{ font-size:1.32rem; line-height:1.3; }
.pais .indice-card span{ font-size:1.1rem; line-height:1.5; color:#64748b; }
.pais .indice-card .rel-ir{ font-size:1.1rem; font-weight:800; padding-top:14px; color:#1d5fe0; }

/* CTA FINAL: banda horizontal con la ola y el cepillo del kit a la derecha */
.pais .cta-final{ position:relative; overflow:hidden; text-align:left; padding:48px 0; background:radial-gradient(circle at 30% 50%,#1d4ed8 0%,transparent 60%),linear-gradient(100deg,#0b2a78 0%,#1240b8 55%,#0b2a78 100%); }
.pais .cta-final::before{ content:''; position:absolute; top:0; bottom:0; right:0; width:min(60%,820px); background:url('/assets/pais/cta-ola.webp') right bottom / auto 100% no-repeat; -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 12%,#000 42%); mask-image:linear-gradient(90deg,transparent 0%,transparent 12%,#000 42%); }
.pais .cta-final .wrap{ position:relative; z-index:1; }
.pais .cta-final .wrap{ display:flex; align-items:center; justify-content:flex-start; gap:24px 64px; flex-wrap:wrap; }
.pais .cta-final h2{ text-align:left; font-size:2rem; margin:0 0 6px; }
.pais .cta-final p{ margin:0; font-size:1.08rem; }
.pais .cta-final .btn-green{ padding:18px 48px; font-size:1.05rem; }
.pais .cta-final .deco-11{ left:-30px; bottom:-34px; width:110px; opacity:.85; }
.pais .cta-final .deco-12{ left:5%; top:22px; width:30px; opacity:.85; }

@media(max-width:960px){
  .pais-grid{ grid-template-columns:1fr; }
  .pais-copy{ text-align:center; }
  .pais .pais-hero .sub{ margin:0 auto 26px; }
  .pais .cta-row,.pais .stores,.pais .checks{ justify-content:center; }
  .pais .pais-hero .cta-row{ flex-wrap:wrap; }
  .pais-visual{ width:100%; max-width:620px; margin:4px auto -14px; }
  .pais .pais-hero .deco-2{ display:none; }
  .pais-intro .wrap{ grid-template-columns:1fr; gap:40px; }
  .pais-foto{ max-width:560px; margin:0 auto; width:100%; }
  .pais .feat-grid{ grid-template-columns:1fr; max-width:560px; }
  .pais .cta-final{ text-align:center; }
  .pais .cta-final::before{ width:100%; background-size:auto 70%; -webkit-mask-image:none; mask-image:none; opacity:.5; }
  .pais .cta-final .wrap{ justify-content:center; padding-right:24px; }
  .pais .cta-final h2{ text-align:center; }
}
@media(max-width:760px){
  .pais .pais-hero{ padding:0 16px 10px; }
  .pais .pais-hero .sub{ margin-bottom:16px; }
  .pais .checks{ margin-top:14px; gap:6px 16px; }
  .pais-visual{ max-width:290px; margin-bottom:-22px; }
  .pais .pais-hero h1{ font-size:1.72rem; }
  .pais .pais-hero .sub{ font-size:1rem; }
  .pais .wrap{ padding:0 16px; }
  .pais .pais-hero .h-ola{ width:260px; left:-80px; bottom:-20px; }
  .pais-intro{ padding:44px 0 32px; }
  .pais-intro .prose p,.pais-texto .prose p{ hyphens:auto; -webkit-hyphens:auto; }
  .pais-intro .prose h2{ font-size:1.5rem; }
  .pais-foto{ padding:0 40px 34px 0; }
  .pais-foto .tarjeta{ font-size:.8rem; gap:10px; padding:10px 12px; }
  .pais-foto .tarjeta svg{ width:28px; height:28px; }
  .pais-foto .tarjeta img{ width:28px; margin-left:4px; }
  .pais .pais-func h2,.pais .cta-final h2{ font-size:1.6rem; }
  .pais .feat{ gap:18px; padding:20px; }
  .pais .feat .ic{ width:58px; height:58px; }
  .pais .pais-func .deco-5{ width:180px; }
  .pais .pais-func .deco-6,.pais .pais-func .deco-9,.pais .pais-intro .deco,.pais .pais-hero .deco-7{ display:none; }
  .pais .cta-final{ padding:44px 0 150px; }
  .pais .cta-final::before{ background-size:auto 140px; opacity:1; }
}