/* ====== TITULOS Y HEXAGONO ====== */
.country-title{
  font-weight: 800;                 /* super bold */
color: rgb(82, 82, 82);
}

.country-pretitle{
  font-weight: 600;   
  color:#6c757d;
  font-size: 1.25rem;
}

.country-subtitle{
  font-weight: 800;
  color: rgb(82, 82, 82);
}

.country-badge{
  /* Ajustes rápidos */
  --size: 72px;            /* tamaño total del hex */
  --ring-fuchsia: 4px;     /* grosor borde fucsia */
  --ring-white: 3px;       /* grosor borde blanco */
  --fuchsia: #ff1f8b;      /* color borde externo */
  --round: 0px;            /* 0 = puntas nítidas (como la referencia) */
  display:inline-block;
  width: var(--size);
  aspect-ratio: 1;
}

.country-badge .hex-outer,
.country-badge .hex-inner{
  display:block;
  width: 100%;
  height: 100%;
  /* Hex regular: 120° */
  --hex: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0 50%);
  clip-path: var(--hex);
  border-radius: var(--round);
}

/* Aro fucsia */
.country-badge .hex-outer{
  background: var(--fuchsia);
  padding: var(--ring-fuchsia);
}

/* Aro blanco */
.country-badge .hex-inner{
  background:#fff;
  padding: var(--ring-white);
}

/* Imagen (bandera) */
.country-badge img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  /* Recorta la imagen al mismo hex para que no tape los bordes */
  clip-path: var(--hex);
  border-radius: var(--round);
}

/* Tamaños extra (opcional) */
.country-badge.is-sm{ --size: 56px; }
.country-badge.is-lg{ --size: 88px; }

/* Texto del cuerpo */
.country-body strong{ font-weight:800; }
.country-body em{ font-style: italic; }
.country-topnote{
  color:#6c757d;
  font-size: 1rem;
  margin-bottom: 14px;
  text-align:center;
}

/* Mascota */
.country-mascot img{ max-width: 400px; }

/* ====== CTA ====== */
/* ----- Botón centrado ----- */
.btn-country-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 220px; font-size: 1.1rem;
  background:#19a64d; color:#fff; border-radius: 14px; border: none;
  box-shadow: 0 8px 24px rgba(25,166,77,.25);
  margin: 8px auto 0;                /* <- centra horizontal */
}

.btn-country-cta:hover{
  background:#ffffff00;
  border:2px solid #80ca65;
  color:#80ca65;
}


/* ----- Píldoras (cards verdes) ----- */
.pill-card{
  background:#80ca65;                /* verde base */
  color:#fff;
  border-radius: 28px;                /* bordes bien redondeados */
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  padding: 20px 25px;
  max-height: 130px;
  margin-bottom: 40px;
}
.pill-card > .d-flex{                /* fila icono + contenido */
  align-items: center;
  gap: 1rem;
}

.pill-icon{
  width: 85px; 
  height: 85px; 
  object-fit: contain;
  filter: brightness(0) invert(1);    /* iconos blancos */
  opacity:.95;
}

.pill-title{
  font-weight: 700;
  font-size: 1.125rem;
  text-align: center;                 /* centrado como la referencia */
  margin: 0;
}

/* línea blanca corta */
.pill-divider{
  width: 120px; height: 2px;
  background: rgba(255,255,255,.65);
  margin: .4rem auto .6rem;           /* centrada bajo el título */
}

.pill-body{
  text-align: center;                 /* cuerpo centrado */
  font-size: 1.05rem;
  line-height: 1.25;
}
.pill-body small{ opacity:.9; display:block; margin-top:.25rem; }
.pill-body s{ opacity:.8; margin-right:.35rem; }

/* Responsive */
@media (max-width: 991.98px){
  .pill-card{ border-radius: 24px; }
  .pill-icon{ width: 56px; height: 56px; }
}


/* =========================
   COTIZADOR – Country page
   ========================= */

.calc-intro{
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  color:#4b4b4b;
  line-height:1.25;
  font-weight:600;
}
.country-calc{ 
  --green:#0aa34a; 
  --pink:#ff1f8b; 
  --ring:3px; 
  background: #f8f8f8;}

.calc-strip{
  background: var(--green);
  color:#fff;
  border-radius: 6px;
  margin-inline: auto;                    /* centra horizontal */
  margin-block: 0 1rem;
  height: 46px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  text-align:center;
  padding-inline: 1rem; /* aire a los lados */
}

/* Texto dentro de la franja */
.calc-strip-text{
  font-weight: 800;
  letter-spacing:.2px;
}

.calc-sticker{
  position:absolute;
  left:14px;          /* ajusta si lo quieres más dentro/fuera */
  top:-18px;
  width:72px; height:auto;
}
.calc-sticker.--css{
  display:inline-flex; align-items:center; justify-content:center;
  width:68px; height:44px; border-radius:22px;
  background:var(--pink); color:#fff; box-shadow:0 8px 20px rgba(255,31,139,.3);
  font-size:1.2rem;
}

.country-calc .calc-banner{
  background: var(--green);
  color:#fff;
  border-radius: 6px;
  height: 46px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.country-calc .calc-banner-text{
  font-weight: 700;
  letter-spacing:.2px;
}
.country-calc .calc-sticker{
  position:absolute; left:14px; top:-18px; width:72px; height:auto;
}
.country-calc .calc-sticker.--css{
  display:inline-flex; align-items:center; justify-content:center;
  width:68px; height:44px; border-radius:22px;
  background:var(--pink); color:#fff; box-shadow:0 8px 20px rgba(255,31,139,.3);
  font-size:1.2rem;
}

/* Títulos de grupo */
.country-calc .calc-group-title{
  font-size:1.05rem;
  font-weight:800;
  text-align:center;
  color:#656d78;
  margin-bottom:.6rem;
}

/* Inputs grandes */
.country-calc .calc-input input{
  width:100%; height:44px;
  border:2px solid #efefef; border-radius:10px;
  background:#fff; outline:none; padding:0 .9rem; font-weight:600;
}
.country-calc .calc-input input::placeholder{ color:#a6a6a6; font-weight:600; }

/* CTA centrado */
.country-calc .btn-calc-cta{
  background: var(--pink);
  color:#fff; border:none; border-radius:10px;
  padding:.6rem 1.6rem; font-weight:800;
  box-shadow: 0 10px 24px rgba(255,31,139,.25);
}
.country-calc .btn-calc-cta:hover{ filter:brightness(.96); color:#fff; }

/* Caja Total */
.country-calc .calc-total{
  border:3px solid var(--pink);
  border-radius:14px;
  padding:.65rem 1rem;
  font-weight:800;
  color:#7a7a7a;
}
.country-calc .calc-total strong{ color:var(--pink); font-weight:800; }

/* Minis (Flete/Seguro/Impuesto/Procesamiento) */
.country-calc .calc-mini{
  background:#fff; border:2px solid #efefef; border-radius:12px;
  padding:.45rem .7rem;
}
.country-calc .calc-mini label{
  display:block; font-size:.9rem; font-weight:700; color:#7a7a7a; margin:0;
}
.country-calc .calc-mini input{
  width:100%; border:0; background:transparent; font-weight:800; color:#6b6b6b;
  height:34px; padding:0; outline:none;
}

/* Pie de página del cotizador */
.country-calc .calc-footnote{ text-align:center; color:#6c757d; font-size:.8rem; }
.country-calc .calc-footnote p{ margin:.25rem 0; }
#country-calc { scroll-margin-top: 90px; }
/* Gráfico */
.country-calc .calc-graphic img{ max-width: 80%; height:auto; }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .country-calc .calc-sticker{ left:10px; top:-16px; width:64px; }
  .country-calc .calc-total{ font-size:1rem; }
}

@media (max-width: 576px){
  .calc-strip{ inline-size: 92%; }
}

/* ====== PROMO SUPERIOR ====== */
.country-promo{ background:#fff; }

/* Foto izq: borde redondo y sombra suave */
.promo-photo{ overflow:hidden; border-radius:24px; box-shadow:0 12px 30px rgba(0,0,0,.08); }
.promo-photo img{ display:block; }

/* Panel derecho: rosa claro con borde fucsia redondeado */
.promo-panel{
  --pink:#ff1f8b;
  --pink-bg:#fde6f3;
  background: var(--pink-bg);
  border:2px solid var(--pink);
  border-radius:28px;
  padding:28px 32px;
  display:flex; flex-direction:column; justify-content:center;
  min-height:100%;
}
.promo-mascot{ display:block; margin:0 auto 10px; max-height:120px; }

/* Línea/acento verde bajo la mascota */
.promo-accent{ width:64px; height:6px; background:#19a64d; border-radius:6px; margin:6px 0 16px; }

/* Tipografía del texto rosa */
.promo-text{ font-size: clamp(1.2rem, 1.1vw + 1rem, 1.8rem); line-height:1.25; color:#333; font-weight:700; }
.promo-text strong{ font-weight:800; }
.promo-text em, .promo-text .pink{ color:#ff1f8b; font-style:normal; }

/* ====== TARJETAS INFERIORES ====== */
.info-card{
  position:relative;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  padding:22px 24px;
  max-height: 300px;
}
/* barra verde arriba, centrada, con bordes redondeados */
.info-card::before{
  content:"";
  position:absolute;
  top:-12px; left:50%; transform:translateX(-50%);
  width:70%; max-width:420px; height:10px;
  background:#19a64d; border-radius:12px;
}
.info-title{
  text-align:center; margin:6px 0 14px;
  font-weight:800; font-size:1.05rem; color:#4f5663;
}
.info-body{ color:#3f3f3f; font-size:1rem; }
.info-body p{ margin:.5rem 0; }
.info-body strong{ font-weight:800; }

/* Responsive */
@media (max-width: 991.98px){
  .promo-panel{ border-radius:24px; }
}


/* ===== Acordeones ===== */
.country-accordions{ 
  background:#fff; 
  margin-bottom: 5%;
}

.country-accordions .acc-title{
  display:block;
  width:100%;
  text-align:center !important;
  line-height:1.15;
  font-weight:800;
  font-size: clamp(1.35rem, 1.1vw + 1rem, 2.05rem);
  margin: 0 auto;
  margin-bottom: 9%;
}

.country-accordions .col-lg-6{ text-align: initial; }



/* lista */
.acc-list{ margin-top: .25rem; }

/* item */
.acc-item{ margin: 14px 0; }

/* CABECERA (+ / -) */
.acc-head{
  all: unset; /* reset botón */
  box-sizing: border-box;
  display:flex; align-items:center; gap:12px;
  width:100%; background:#fff; cursor:pointer;
  padding: 16px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  color:#2f2f2f; font-weight:800; font-size:1.25rem;
}
.acc-head:focus-visible{ outline: 3px solid #b7e2c3; outline-offset: 2px; border-radius:10px; }

.acc-icon{
  position:relative; width:22px; height:22px; flex:0 0 22px;
}
.acc-icon::before, .acc-icon::after{
  content:""; position:absolute; background:#19924b; border-radius:2px;
}
.acc-icon::before{ width:16px; height:3px; left:50%; top:50%; transform:translate(-50%,-50%); }
.acc-icon::after{ width:3px; height:16px; left:50%; top:50%; transform:translate(-50%,-50%); }
.acc-item.is-open .acc-icon::after{ opacity:0; } /* de + a – */

/* PANEL */
.acc-panel{
  overflow: hidden;                 /* se mantiene para la animación */
  max-height: 0;
  transition: max-height .28s ease;
  padding: 0 0 10px;                /* aire inferior para que no “corte” */
  border-radius: 12px;              /* acompaña el radio del bloque interno */
}

.acc-panel-inner{
  margin: 10px 12px 0 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  padding: 18px 20px;
  color:#3c3c3c; line-height:1.6;
}

.acc-panel-inner p{ margin:.5rem 0; }

.acc-panel-inner p:last-child{ margin-bottom: 0; }

:root{
--brand:#ff2e93; /* color de tu marca */
--ok:#10b981; --warn:#f59e0b; --err:#a9206b; /* Rojo oscuro para errores */
--bg-card: rgba(255, 255, 255, 0.95);
--txt:#0f172a;
}

.notify-root{
position:fixed;
top: 20px;
right: 20px;
pointer-events:none;
z-index:2147483647;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 380px;
}

/* Card */
.alert-sheet{
position:relative;
min-width: 300px;
max-width: 380px;
background: var(--bg-card);
color: white;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px 18px;
display:grid;
grid-template-columns:36px 1fr auto;
gap:12px;
align-items: center;
animation: alertInRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
pointer-events:auto;
backdrop-filter: blur(10px);
overflow: hidden;
}
.alert-sheet::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background: linear-gradient(135deg, #ff2e93, #ff1f8b);
border-radius:14px;
opacity: 0.95;
}
.alert-sheet.--err::before{
background: linear-gradient(135deg, var(--err), #991b1b);
}
.alert-sheet.--warn::before{
background: linear-gradient(135deg, var(--warn), #b45309);
}
.alert-sheet.--ok::before{
background: linear-gradient(135deg, var(--ok), #059669);
}

.alert-ico{
width:36px;
height:36px;
display:grid;
place-items:center;
font-size:18px;
border-radius:10px;
background: rgb(255, 255, 255);
}
.alert-title{
font-weight:700;
margin:0;
font-size:1rem;
line-height:1.2;
letter-spacing:.2px;
}
.alert-msg{
margin:.15rem 0 0;
font-size:.9rem;
opacity: 0.9;
line-height: 1.4;
}
.alert-close{
background:transparent;
border:0;
font-size:20px;
opacity:.7;
cursor:pointer;
color: white;
padding: 4px;
border-radius: 4px;
transition: all 0.2s ease;
}
.alert-close:hover{
opacity:1;
background: rgba(255, 255, 255, 0.15);
}

.alert-progress{
height:3px;
background:rgba(255, 255, 255, 0.2);
border-radius:99px;
overflow:hidden;
grid-column:1/-1;
margin-top:8px;
}
.alert-progress>i{
display:block;
height:100%;
width:100%;
transform-origin:left center;
animation: deplete linear forwards;
}
.alert-sheet.--err .alert-progress>i{
background: rgba(255, 255, 255, 0.7);
}
.alert-sheet.--warn .alert-progress>i{
background: rgba(255, 255, 255, 0.7);
}
.alert-sheet.--ok .alert-progress>i{
background: rgba(255, 255, 255, 0.7);
}

@keyframes alertInRight{
from{
opacity:0;
transform: translateX(100%);
}
to{
opacity:1;
transform: translateX(0);
}
}
@keyframes alertOut{
to{
opacity:0;
transform: translateX(100%) scale(.9);
}
}
@keyframes deplete{
from {
transform: scaleX(1);
}
to{
transform: scaleX(0);
}
}

/* Hints pegados al input (se mantienen igual) */
.calc-input{ position:relative; }
.field-hint{
position:absolute; right:8px; top:-10px; transform:translateY(-100%);
background:#fff; color:#b91c1c; border:1px solid rgba(239,68,68,.28);
border-radius:10px; padding:4px 8px; font-size:.82rem; white-space:nowrap;
box-shadow: 0 10px 20px rgba(239,68,68,.14);
}
.field-hint::after{
content:""; position:absolute; left:16px; bottom:-6px; width:10px; height:10px;
background:#fff; border-left:1px solid rgba(239,68,68,.28); border-bottom:1px solid rgba(239,68,68,.28);
transform: rotate(45deg);
}
.calc-input input.is-invalid{
border-color:#ef4444 !important; box-shadow:0 0 0 .15rem rgba(239,68,68,.12);
}
.calc-input input.shake{ animation: shake .3s linear 2; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* Estado del bloque Total (se mantiene igual) */
.calc-total{ border:2px solid rgba(0,0,0,.06); border-radius:14px; padding:.6rem 1rem;}
.calc-total.--error{ border-color:#ef4444; box-shadow:0 0 0 .15rem rgba(239,68,68,.12) inset;}
.calc-total.--ok{ border-color:#10b981; box-shadow:0 0 0 .15rem rgba(16,185,129,.12) inset;}

/* ====== Robustez tipográfica (evita desbordes) ====== */
.pill-card,
.pill-title,
.pill-body {
  overflow-wrap: anywhere;    /* moderno */
  word-break: break-word;     /* fallback */
  hyphens: auto;              /* si el navegador lo soporta */
}

/* Tamaños fluidos: se adaptan al ancho disponible */
.pill-title {
  font-size: clamp(1rem, 1vw + .9rem, 1.125rem);
  line-height: 1.2;
}
.pill-body {
  font-size: clamp(.92rem, .7vw + .85rem, 1.05rem);
  line-height: 1.35;
}

/* ====== Responsivo por breakpoints ====== */

/* Tablet ↓: aflojar altura, más aire y gap menor */
@media (max-width: 991.98px){
  .pill-card{
    border-radius: 24px;
    padding: 18px 20px;
    /* si quieres mantener tope suave, súbelo un poco */
    max-height: 160px;
  }
  .pill-card > .d-flex{
    gap: .75rem;
  }
  .pill-icon{ width: 64px; height: 64px; } /* un poco más grande que tu 56px propuesto */
  .pill-divider{ width: 96px; }
}

/* Móvil ↓: apilar, centrar y SIN tope de altura */
@media (max-width: 576px){
  .pill-card{
    padding: 16px 16px;
    max-height: none;           /* ← clave para no cortar contenido */
    margin-bottom: 28px;        /* compensa menor padding */
  }
  .pill-card > .d-flex{
    flex-direction: column;     /* icono arriba, texto abajo */
    align-items: center;
    text-align: center;
  }
  .pill-icon{ width: 56px; height: 56px; }
  .pill-divider{ width: 78px; height: 2px; margin: .35rem auto .5rem; }
  .pill-body{ line-height: 1.4; }
}

/* Móviles muy estrechos ↓ (≲ 400px): micro-ajustes */
@media (max-width: 400px){
  .pill-card{ padding: 14px 14px; }
  .pill-icon{ width: 48px; height: 48px; }
  .pill-title{ font-size: clamp(.95rem, 1.4vw + .8rem, 1.02rem); }
  .pill-body{ font-size: .9rem; }
  .pill-divider{ width: 64px; }
}