/* ===== Reset & base ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{object-fit: cover
  margin:0;
  background:#edf2f6;               /* gris corporativo */
  color:#2a3852;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",
               Arial,"Noto Sans","Liberation Sans",sans-serif;
  line-height:1.6;
}

/* ===== Tokens (colores) ===== */
:root{
  --blue-700:#2f5078;   /* barra y footer */
  --blue-600:#355B8A;   /* degradado botón */
  --blue-500:#2b4f7e;   /* hover botón */
  --card:#ffffff;
  --line:#cfd8e3;
  --shadow:0 10px 28px rgba(24,39,75,.12);
}

/* ===== Header ===== */
.site-header{ background:var(--blue-700); padding:14px 0; }
.site-header .container{
  width:min(1200px,94%);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding-left:6px;                   /* evita que el logo “pegue” el borde */
}
.brand-logo{
  height:46px !important;             /* tamaño fijo (sin auto) */
  width:auto !important;
  max-width:280px;                    /* por si el PNG es enorme */
  object-fit:contain;
  display:block;
}

/* ===== Tarjeta del título ===== */
.title-card{
  width:min(1100px,94%);
  margin:28px auto 12px;
  background:var(--card);
  border-radius:0px;
  box-shadow:var(--shadow);
  padding:22px 32px;
}



.title-card h1{
  margin:0;
  text-align:center;
  font-weight:600;                    /* menos “gordo” */
  letter-spacing:.2px;
  color:#233149;
  font-size: clamp(22px, 2.4vw, 32px); /* font-size:clamp(26px,3vw,36px);*/
}

/* ===== Panel central (dos columnas) ===== */
.panel{
  width:min(1100px,94%);
  margin:10px auto 56px;
  background:var(--card);
  border-radius:0px;
  box-shadow:var(--shadow);
  padding:28px;
  display:grid;
  grid-template-columns:1.25fr .9fr;  /* izq texto / der input */
  gap:38px;
  align-items:center;
}

/* Texto izquierdo */
.panel-left p{
  margin:0 0 14px;
  text-align:justify;                 /* pedido: justificado */
  color:#2f3e53;
  font-size:1rem;                     /* más delgado y pequeño */
  font-weight:400;
}
.panel-left strong{ font-weight:600; }

/* ===== Campo de código con lupita y doble borde sutil ===== */
.panel-right label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  color:#2f3e53;
}


.input-with-icon input{
  width:100%;
  height:48px;
  border-radius:0px;
  border:1px solid var(--line);
  background:#fff;
  padding:12px 14px 12px 46px;
  font-size:1rem;
  transition:border-color .15s, box-shadow .15s;
  box-shadow:0 0 0 4px #e9eef5;

  /* ícono lupa embebido (igual que antes) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%232f5078' viewBox='0 0 16 16'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.85-3.85Zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10Z'/></svg>");
  background-repeat:no-repeat;
  background-position:14px 50%;
  background-size:20px;
}
.input-with-icon input:focus{
  outline:none;
  border-color:var(--blue-700);             /* mantiene la línea gorda */
 box-shadow:0 0 0 4px rgba(47,80,120,.18);
}





/* ===== Botón primario (más pequeño y centrado) ===== */
.btn-primary{
  display:inline-block;
  margin-top:16px;                    /* espacio respecto al input */
  padding:12px 26px;
  border:none;
  border-radius:0px;
  color:#fff;
  font-weight:700;
  letter-spacing:.25px;
  cursor:pointer;
  background-image:linear-gradient(180deg,var(--blue-600),var(--blue-700));
  box-shadow:0 8px 18px rgba(41,74,118,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; 
}
.btn-primary:hover{
 transform:translateY(-1px); filter:brightness(1.02);
}
.btn-primary:active{
 transform:translateY(0); box-shadow:0 6px 12px rgba(41,74,118,.28);
}
/* Centrado del botón dentro de la columna derecha */
.panel-right .btn-primary{ display:block; margin:16px auto 0; }





.site-footer{
  background:var(--blue-700) !important;   /* azul corporativo sólido */
  color:#fff;
  text-align:center;
  padding:28px 16px;
  margin-top:64px;
  font-size:.98rem;
}

/* Enlaces dentro del footer */
.site-footer a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.7);
}

.site-footer a:hover{
  border-bottom-color:#fff;
}




/* ===== Responsivo ===== */
@media (max-width:1024px){
  .panel{ grid-template-columns:1fr; gap:22px; }
  .panel-right .btn-primary{ margin-top:14px; }
  .title-card{ padding:18px 22px; }
}

@media (max-width:640px){
  .brand-logo{ height:38px !important; }
  .panel{ padding:22px; }
 .input-with-icon input{ height:46px; border-radius:0; } /* sin curvas en móvil */
}


/*Para que no se vea la franja gris de abajo que acrota la altura de la web*/
/* Sticky footer sólido: empuja el footer abajo y elimina cualquier franja extra */
html, body { height: 100%; }
body{
  display: flex;
  min-height: 100vh;      /* altura mínima = alto de la ventana */
  flex-direction: column; /* header (arriba) -> contenido -> footer (abajo) */
}

/* Si usas <main> o un contenedor central, dale el espacio flexible */
main, .page, .content, .wrapper{
  flex: 1 0 auto;         /* ocupa el espacio disponible entre header y footer */
}

/* El footer se pega abajo sin dejar “aire” extra */
.site-footer{
  margin-top: auto;       /* empuja hacia el fondo si hay espacio libre */
}

/* Centrado vertical del contenido principal entre header y footer */
.page{
  flex: 1 0 auto;          /* mantiene el sticky footer */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente */
  align-items: center;     /* centra horizontalmente */
  gap: 22px;               /* separación entre title-card y panel */
  padding: 40px 0;
}

/* En viewports con poca altura, volvemos a empezar “arriba” para evitar scroll raro */
@media (max-height: 740px){
  .page{
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}











/********************************************/
/* --- Botones Modernos: VER CERTIFICADO Y LINKEDIN --- */
.actions {
  display: flex;
  gap: 12px;
  margin-top: 1.5em;
}

.btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  transition: all 0.3s ease;
  color: #fff;
}

.btn-view {
  background-color: #1f4e79; /* azul corporativo oscuro */
  box-shadow: 0 3px 5px rgba(0,0,0,0.15);
}

.btn-view:hover {
  background-color: #266bb6;
  transform: translateY(-2px);
}

.btn-linkedin {
  background-color: #0077b5; /* color LinkedIn */
  box-shadow: 0 3px 5px rgba(0,0,0,0.15);
}

.btn-linkedin:hover {
  background-color: #0194e2;
  transform: translateY(-2px);
}

/* íconos */
.btn-modern i {
  font-size: 17px;
  font-style: normal; /* ← ESTA LÍNEA quita la cursiva */  
}

/* compatibilidad si no hay FontAwesome */
.btn-modern i::before {
  content: '🔗';
  font-style: normal; /* ← ESTA LÍNEA quita la cursiva */  
}
.btn-view i::before {
  content: '📄';
}
.btn-linkedin i::before {
  content: 'in';
  font-family: Arial, sans-serif;
  font-weight: 700;            /* más sólido */
  font-style: normal;          /* SIN cursiva */
  display: inline-block;       /* permite ancho/alto fijos */
  width: 24px;                 /* cuadrado */
  height: 24px;
  line-height: 24px;           /* centra verticalmente */
  text-align: center;          /* centra horizontalmente */
  background: #fff;
  color: #0a66c2;              /* azul LinkedIn */
  border-radius: 3px;
  font-size: 16px;
  padding: 0;                  /* IMPORTANTE: sin padding para que sea cuadrado */
  margin-right: 0;             /* ya usas gap en .btn-modern */
}


/********************************************/
/* --- TABLA DE RESULTADOS --- */
/* --- Tabla de Certificado --- */

.certificate-table {
  margin-top: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  width: 100%;
  max-width: 1100px;       /* antes 620px */
}




.certificate-table .row {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
}

.certificate-table .row:nth-child(even) {
  background-color: #f9f9f9;
}

.certificate-table .row:last-child {
  border-bottom: none;
}

.certificate-table .k {
  width: 45%;
  font-weight: 700;
  color: #333;
  padding: 10px 12px;
  background-color: #f2f2f2;
}

.certificate-table .v {
  width: 55%;
  padding: 10px 12px;
  color: #222;
  font-weight: 500;
}

.certificate-table .valid {
  color: #2e7d32;
  font-weight: 600;
}

.checkmark {
  color: #2ecc71;
  font-size: 18px;
  margin-right: 6px;
  vertical-align: middle;
}




/********************************************/
/********************************************/
/* --- BADGE --- */

.badge-img {
  max-width: 220px;
  height: auto;
  border: 0;
  box-shadow: none;
  background: none;
  border-radius: 0;
}






.program-title {
  margin-top: 0;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.program-desc {
  margin: 0;
  color: #333;
  line-height: 1.4;
}

/* ====== HERO (cabecera como preview v2) ====== */
.hero-card{
  width:min(1100px,94%);
  margin:24px auto 24px;
  background:var(--card);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:30px 34px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:32px;
  align-items:center;
}
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; text-align:left; }
}

.hero-title{
  margin:0 0 8px 0;
  color:#123054;
  font-weight:700;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.2px;
  font-size: clamp(24px, 2.6vw, 32px);
}
.issuer{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#123054;
  margin: 8px 0 16px;
}
.issuer .issuer-name{
  font-weight:700;
}
.issuer .badge-verify{
  width:20px; height:20px; display:inline-block;
}


.hero-desc{
  color:#2f3e53;
  margin:0 0 12px;
  line-height:1.6;
  text-align:justify;      /* ← añade justificado */
}

.hero-desc + .hero-desc{ margin-top:12px; }

/* Etiqueta sutil de sección (bullet azul) */
.section-label{
  display:flex;
  align-items:center;
  gap:10px;
  color:#355B8A;
  font-weight:600;
  margin: 10px 0 12px;
}
.section-label::before{
  content:"";
  width:8px; height:8px; border-radius:999px; background:#355B8A;
  display:inline-block;
}

/* Tarjeta inferior (tabla) igual al preview v2 */

.result-card{
  width:min(1100px,94%);
  margin:0 auto 36px;
  background:var(--card);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:28px 34px; /* un poco más de aire */
}



/* Status con ícono verde */
.status-ok{
  display:flex; align-items:center; gap:8px;
  color:#1f7a2e; font-weight:700;
}
.status-ok img{ width:18px; height:18px; display:inline-block; }



/********************************************/


/* ====== HERO (insignia + título + descripción) ====== */

/* ===== HOTFIX: legibilidad del bloque de descripción ===== */
.hero-grid{
  grid-template-columns: clamp(200px, 22vw, 260px) 1fr; /* deja más aire a la izquierda */
  align-items: start;
}

.program-title{
  font-weight: 600;
  font-size: clamp(22px, 2.0vw, 32px);
  line-height: 1.2;
  margin-bottom: 10px;
}

/* --- descripción: SIN justificado duro, SIN guiones, ancho óptimo --- */
.program-desc{
  margin: 0 0 12px 0;
  color: #24364f;
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.65;
  max-width: 72ch;              /* columna cómoda (más ancha que antes) */
  text-align: justify;             
  text-justify: auto;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;            /* navegadores modernos suavizan saltos */
}

/* insignia, un pelín más grande y nunca cortada */
.badge-img{
  width: clamp(200px, 24vw, 280px);
  height: auto;
  object-fit: contain;
}

/* ==== FIX CRÍTICO: check azul al lado de "Emitido por" ==== */
.issuer{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 14px 0;
  font-weight:500;
}

.issuer-name{ font-weight:600; }

/* fuerza tamaño pequeño del icono, cueste lo que cueste */
.badge-verify{
  width:20px !important;
  height:20px !important;
  flex:0 0 20px;
  display:inline-block;
  object-fit:contain;
  border:0;
  box-shadow:none;
  padding:0;
  margin:0;
  background:transparent;
}

/* por si algún “reset” global pone las imágenes en block a 100% */
.issuer img{ max-width:none; }



/* ===== PATCH UX v2: armonía hero / insignia / descripción ===== */

/* ====== PATCH: Hero afinado y “Emitido por” ====== */

/* Grid más compacto y alineado arriba */
.hero-card{ padding:24px 28px; }                 /* menos alto */
.hero-grid{
  grid-template-columns: clamp(220px, 24vw, 300px) 1fr; /* más ancho para la insignia */
  gap: 24px;                                     /* menos separación */
  align-items: start;                             /* alinear arriba */
}

/* Insignia un poco más grande, nunca cortada */
.badge-img{
  width: clamp(220px, 24vw, 300px);               /* ↑ antes 200–280 */
  height: auto;
  object-fit: contain;
}

/* Título menos “gordo” y más pegado al texto */
.program-title{
  margin: 0 0 6px 0;                              /* menos espacio debajo */
  font-weight: 600;                               /* ↓ de 700 a 600 */
  font-size: clamp(22px, 2.2vw, 30px);            /* un punto más discreto */
  line-height: 1.18;
  letter-spacing: .2px;
}

/* “Emitido por” (coincide con tu HTML actual) */
.issued-by{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px 0;                           /* baja la altura del bloque */
  color: #123054;
  font-weight: 500;
}
.issued-by .entity{ font-weight: 600; }
.verified-badge{
  width: 18px; height: 18px;
  display: inline-block;
  object-fit: contain;
}

/* Descripción: ancho cómodo y justificada, pero más baja */
.program-desc{
  margin: 0 0 10px 0;
  color: #24364f;
  font-size: clamp(14px, 1.25vw, 15.5px);         /* un pelín menor */
  line-height: 1.58;                               /* menos “alta” */
  max-width: 72ch;
  text-align: justify;
  text-justify: auto;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;
}

/* Etiqueta de sección: compacta */
.section-label{ margin: 6px 0 10px; }

/* Tarjeta inferior: mismo ancho del hero para que no quede “chica” */
.result-card{ width: min(1100px, 94%); }

/* Tabla: ocupa el ancho de la tarjeta (ya llevas max 1100px) */
.certificate-table{ max-width: 100%; }








/* === Ajustes finales de la vista de verificación === */

/* 1) Insignia centrada verticalmente en la grilla */
.hero-grid { align-items: start; }            /* mantenemos inicio para el texto */
.badge-left { align-self: center; }           /* <-- centra la insignia verticalmente */

/* 2) Quitar la “viñeta” del rótulo de sección */
.section-label::before { content: none !important; }
.section-label { gap: 0 !important; }         /* elimina el huequito que dejaba */

/* 3) Descripción más ancha y menos alta (compacta) */
.program-desc{
  max-width: 85ch !important;   /* antes 72ch: más ancho, menos columnas estrechas */
  line-height: 1.55 !important; /* más compacto (antes 1.65) */
  margin: 0 0 10px 0 !important;/* menos espacio entre párrafos */
  text-wrap: pretty;            /* evita cortes feos cuando hay espacio */
}

/********************************4) Título un poco más pequeño y más “plano” */


.program-title {
  /*  antes:  font-size: clamp(22px, 2.2vw, 30px) !important; /* antes 24px–32px */    
  font-size: clamp(20px, 1.9vw, 26px) !important; /* ↓ más pequeño y más elegante */
  line-height: 1.12 !important;   /* antes 1.15 !important; */
  margin-bottom: 6px !important;
}





/* 5) “Emitido por” un poco más pegado (menos alto total del bloque) */
.issued-by{
  margin: 4px 0 10px 0 !important;
  line-height: 1.35 !important;
}

/* 6) Icono azul de verificación: tamaño fijo y sin desbordes */
.verified-badge{
  width: 20px !important;
  height: 20px !important;
  display: inline-block;
  object-fit: contain;
}

/****************************** 7) Insignia ligeramente más grande (opcional, quedará mejor al compactar texto) */


/* ===== Ajuste uniforme de insignia (fix cross-browser) ===== */
.badge-img {
  width: 250px !important;     /* Tamaño fijo y estable en los navegadores */
  max-width: 100% !important;  /* Escala en pantallas pequeñas */
  height: auto !important;
  display: block;
  margin: 0 auto;              /* Centra horizontalmente la insignia */
  object-fit: contain;  
}


.awarded-to{
  margin: 4px 0 14px;
  color:#2f3e53;
}





/* === Mejora visual del bloque de cabecera de insignia === */

/* Contenedor derecho (texto junto al badge) */
.badge-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px; /* aire entre líneas */
}

/* "Insignia otorgada a" */
.awarded-to {
  margin: 4px 0 2px;
  font-size: 15px;
  color: #24364f;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.awarded-to strong {
  font-weight: 700;
  color: #1a2b44;
}

/* "Emitido por" */
.issued-by {
  margin: 0 0 10px 0;
  font-size: 15px;
  color: #3a4b66;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.issued-by .label {
  font-weight: 600;
  color: #233149;
}

.issued-by img {
  width: 18px;
  height: 18px;
}

/* Título del programa */
.program-title {
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 6px;
  color: #162b4d;
  letter-spacing: 0.2px;
}





/* Descripción del programa */
.program-desc {
  font-size: 15px;
  color: #2f3e53;
  text-align: justify;
  line-height: 1.55;
  margin-bottom: 6px;
}

/* Armoniza el espaciado general del hero */
.hero-card {
  padding: 30px 40px;
}

.hero-grid {
  gap: 40px; /* separa badge e información */
  align-items: center; /* centra verticalmente la insignia */
}

/* Opcional: crea una línea sutil como separación */
.hero-card::after {
  content: "";
  display: block;
  height: 1px;
  background: #dfe6ee;
  margin-top: 10px;
}











/* --- Divisor sutil entre texto (derecha) e insignia (izquierda) --- */
.badge-right{
  border-left: 1px solid #e6edf5;   /* línea muy suave */
  padding-left: 24px;               /* aire tras la línea */
}

/* En móviles quitamos el divisor */
@media (max-width: 860px){
  .badge-right{
    border-left: 0;
    padding-left: 0;
  }
}


.badge-img{
  width: 250px !important;     /* ancla el tamaño y evita “achates” */
  max-width: 100% !important;
  height: auto !important;
  display:block;
  margin:0 auto;
  object-fit: contain;
}





/* ========== Mobile polish (≤600px) ========== */
@media (max-width: 480px){

  /* Tarjetas más compactas */
  .hero-card,
  .result-card{ padding:16px; border-radius:10px; }

  /* Hero en 1 columna */
  .hero-grid{
    grid-template-columns: 1fr;
    gap:14px;
    align-items:start;
  }

  /* Insignia proporcionada y centrada */
  .badge-img{
    width: min(62vw, 220px) !important;  /* evita “gigante” en iPhone */
    height:auto !important;
    margin:0 auto 8px;                   /* centrada */
  }

  /* Título más corto en líneas */
  .program-title{
    font-size: clamp(18px, 6vw, 22px) !important;
    line-height:1.15 !important;
    margin-bottom:6px !important;
  }

  /* “Otorgada a” y “Emitido por” más livianos */
  .awarded-to{ font-size:14px; margin:0 0 6px; }
  .issued-by{ font-size:14px; margin:0 0 8px !important; line-height:1.35; }
  .verified-badge{ width:16px !important; height:16px !important; }

  /* Párrafo más cómodo */
  .program-desc{
    font-size:14px;
    line-height:1.5 !important;          /* baja el interlineado */
    max-width:none !important;            /* usa todo el ancho */
    margin-bottom:10px !important;
  }

  /* Botones: 1 columna, 100% de ancho */
  .actions{ flex-direction:column; gap:8px; }
  .actions .btn-modern{
    width:100%;
    justify-content:center;
    padding:12px;
  }

  /* Tabla: tipografía y proporciones */
  .certificate-table{ font-size:14px; }
  .certificate-table .k, .certificate-table .v{ padding:10px; }
  .certificate-table .k{ width:42%; }
  .certificate-table .v{ width:58%; }

  /* Evita “centro vertical” en páginas cortas (mejor scroll natural) */
  .page{ justify-content:flex-start; padding:16px 0; }
}



/* --- Botones LinkedIn --- */
/* Botones LinkedIn: estilo claro con borde azul (Propuesta C) */
.btn-linkedin{
  background:#EEF5FF;                 /* fondo clarito */
  color:#0A66C2;                      /* azul LinkedIn para el texto */
  border:1px solid #0A66C2;           /* borde azul */
  box-shadow:0 2px 6px rgba(10,102,194,.15);
}
.btn-linkedin:hover{
  background:#E3EEFF;                 /* un poco más intenso al pasar */
  transform:translateY(-2px);
}

/* ===== FIX: evitar que el ícono de LinkedIn se expanda ===== */
.li-mark {
  width: 28px !important;        /* tamaño fijo horizontal */
  height: 28px !important;       /* tamaño fijo vertical */
  max-width: 28px !important;    /* evita que crezca en contenedores flexibles */
  max-height: 28px !important;   /* evita expansión vertical */
  flex-shrink: 0 !important;     /* impide que el flexbox lo estire o deforme */
  flex-grow: 0 !important;       /* bloquea expansión al usar display:flex */
  object-fit: contain !important;/* mantiene proporciones del logo */
  display: inline-block !important;
  margin-right: 0px !important;  /* espacio con el texto */
  border-radius: 6px !important; /* conserva el look redondeado */
  vertical-align: middle !important;
  aspect-ratio: 1 / 1 !important;/* fuerza forma cuadrada */
}

/* === FIX CRÍTICO: bloquear tamaño del icono de LinkedIn en el botón === */
.btn-linkedin img,
.btn-linkedin svg,
.li-mark{
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  object-fit: contain !important;
  display: inline-block !important;
  margin: 0 !important;
  border-radius: 6px !important;   /* mantiene el look redondeado */
}

/* evita que el flex del botón “estire” hijos en iOS */
.btn-modern { min-width: 0; }
.btn-modern > * { flex: 0 0 auto; }

/* si el icono es el pseudo-elemento “in” (fallback) */
.btn-linkedin i::before{
  display:inline-block !important;
  width:28px !important;
  height:28px !important;
  line-height:28px !important;
}

/* ==== FIX MOBILE (iOS/WhatsApp) para que el icono de LinkedIn no se mueva ==== */
@media (max-width: 600px){

  /* ancla el tamaño del icono dentro del botón */
  .btn-linkedin img,
  .btn-linkedin svg,
  .li-mark{
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    object-fit: contain !important;
    display: inline-block !important;
    border-radius: 6px !important;
    margin: 0 !important;
  }

  /* evita que el flex del botón estire el icono/texto */
  .actions{ flex-wrap: wrap; }
  .btn-modern{ min-width: 0; }
  .btn-modern > *{ flex: 0 0 auto; }

  /* si usas el fallback con i::before (“in”), lo fijamos también */
  .btn-linkedin i::before{
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
  }
}


/* ================== FIXES MÓVIL – PEGAR AL FINAL ================== */

/* 1) Forzar SIEMPRE el estilo claro de los botones LinkedIn (anula el azul) */
.actions .btn-linkedin{
  background:#EEF5FF !important;
  color:#0A66C2 !important;
  border:1px solid #0A66C2 !important;
  box-shadow:0 2px 6px rgba(10,102,194,.15) !important;
}

/* 2) Botones más grandes y a UNA sola columna en teléfonos */
@media (max-width: 640px){
  .actions{
    flex-wrap: wrap;
    gap: 10px;
  }
  .actions .btn-modern{
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 16px;
  }
}

/* 3) Centrar la insignia roja cuando la grilla es de 1 columna */
@media (max-width: 860px){
  .badge-left{
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .badge-img{
    margin: 0 auto !important;
  }
}









/* ==== Ícono SVG transparente para "Ver Certificado" ==== */
.cert-mark {
- width: 28px !important;
- height: 28px !important;
+ width: auto !important;
+ height: 22px !important;

  max-width: 28px !important;
  max-height: 28px !important;
- object-fit: contain !important;
+ aspect-ratio: 1 / 1 !important;
  display: inline-block !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}







/* Efecto hover consistente */
.btn-view:hover .cert-mark {
  filter: brightness(1.1);
  transform: scale(1.05);
  transition: all .2s ease;
}

/* En móviles — más pequeño */
@media (max-width: 600px){
  .cert-mark {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
  }
}



/* ===== Error state (Opción E) – minimal y no invasivo ===== */
.error-card{ /* reutiliza hero-card para el contenedor */ }

.error-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:28px;
  align-items:center;
}

.error-illu{ display:flex; align-items:center; justify-content:center; }
.error-illu svg{ width:min(52vw,220px); height:auto; }

.error-title{
  color:#b3261e;               /* rojo “error” del título */
  font-weight:600;
  font-size:clamp(20px,2.6vw,26px);
  margin:0 0 6px;
}
.error-lead{ margin:0 0 8px; color:#3a4b66; }
.error-tips{ margin:10px 0 0 18px; color:#3a4b66; }
.error-tips li{ margin:.25rem 0; }

.error-actions{ margin-top:22px; }

/* Reusa tu .btn-primary pero le damos el look “pill” y tamaño */
.btn-try{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  border-radius:10px;          /* más amable que el 0px del resto */
  min-width:200px;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
}

/* Responsive */
@media (max-width: 860px){
  .error-grid{ grid-template-columns:1fr; text-align:left; }
  .error-illu{ order:-1; }
}