/* =====================================================
   SALUD_MENTAL.CSS

   Función:
   Hoja base reutilizable del sistema. Centraliza variables,
   componentes generales y utilidades para reducir estilos
   embebidos en archivos PHP.

   Modificar aquí:
   - Paleta institucional.
   - Tipografía global.
   - Botones, cards, formularios, tablas y utilidades.
   ===================================================== */

/* =====================================================
   VARIABLES: PALETA INSTITUCIONAL
   ===================================================== */
:root{
  --azul:#98C3DA;
  --verde:#BCED0E;
  --oro:#D8B379;
  --morado:#CABAD8;
  --gris:#EEBEBA;
  --fisica:#98C3DA;
  --mental:#BCDEDE;
  --emocional:#D8B379;
  --espiritual:#CABAD8;
  --valores:#EEEBEA;
  --fortaleza:#008C95;
  --trabajar:#F2BD45;
  --prioridad:#C6005B;
  --texto:#4A4A4A;
  --borde:#5B5B5B;
  --titulo:#207C80;
  --blanco:#FFFFFF;
  --suave:#F8F7F5;
}

/* =====================================================
   TIPOGRAFÍA GLOBAL
   Función: base consistente para textos del sistema.
   ===================================================== */
@font-face{
  font-family:"Lato";
  src:url("../fonts/Lato-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Lato";
  src:url("../fonts/Lato-Bold.ttf") format("truetype");
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}

body,
html,
p,
span,
div,
a,
button,
input,
select,
textarea,
label,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6{
  font-family:'Lato', sans-serif;
}

body{
  color:var(--texto);
}

.titulo-azul,
.titulo-blanco,
.titulo2-azul,
.titulo2-blanco,
.titulo3-azul,
.titulo3-blanco{
  margin:0;
  font-weight:800;
  font-family:'Lato', sans-serif;
  letter-spacing:0;
  line-height:1.04;
}

.titulo-azul{
  color:var(--titulo);
  font-size:clamp(47px,6.7vw,86px);
}

.titulo-blanco{
  color:var(--blanco);
  font-size:clamp(47px,6.7vw,86px);
}

.titulo2-azul{
  color:var(--titulo);
  font-size:clamp(30px,4vw,46px);
}

.titulo2-blanco{
  color:var(--blanco);
  font-size:clamp(30px,4vw,46px);
}

.titulo3-azul{
  color:var(--titulo);
  font-size:clamp(20px,2.6vw,28px);
}

.titulo3-blanco{
  color:var(--blanco);
  font-size:clamp(20px,2.6vw,28px);
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

/* =====================================================
   LAYOUTS
   Función: contenedores reutilizables para páginas amplias.
   ===================================================== */
.contenedorPrincipal{
  width:95%;
  margin:0 auto;
}

.contenidoInterior{
  width:100%;
  padding:25px;
}

.sm-layout-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.sm-layout-results{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  align-items:flex-start;
  margin-top:12px;
}

.sm-flex-1{
  flex:1;
  min-width:320px;
}

.sm-flex-summary{
  flex:1;
  min-width:260px;
}

.contacto-card{
  gap:30px;
  align-items:center;
  padding:30px;
  border-color:rgba(32,124,128,.24);
  box-shadow:0 20px 46px rgba(32,124,128,.12);
}

.contacto-toast{
  display:block;
  margin:0 0 16px;
  border-radius:14px;
  padding:14px 16px;
  line-height:1.45;
}

.contacto-form{
  display:grid;
  gap:16px;
}

.contacto-copy{
  max-width:560px;
}

.contacto-intro{
  max-width:520px;
  line-height:1.68;
  margin-bottom:18px;
}

.contacto-form-panel{
  width:100%;
  max-width:480px;
  padding:22px;
  border:1px solid rgba(32,124,128,.18);
  border-radius:18px;
  background:rgba(255,255,255,.68);
  box-shadow:0 16px 36px rgba(32,124,128,.12);
  backdrop-filter:blur(8px);
}

.contacto-field{
  display:grid;
  gap:7px;
}

.contacto-label{
  color:var(--titulo);
  font-size:13px;
  font-weight:800;
}

.contacto-input-wrap{
  position:relative;
  display:block;
}

.contacto-icon{
  position:absolute;
  left:15px;
  top:50%;
  width:20px;
  height:20px;
  color:var(--titulo);
  transform:translateY(-50%);
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.contacto-input{
  width:100%;
  min-height:54px;
  padding:14px 16px 14px 48px;
  border:1.5px solid rgba(91,91,91,.24);
  border-radius:15px;
  background:rgba(255,255,255,.88);
  color:var(--texto);
  font-size:15px;
  transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.contacto-input::placeholder{
  color:#7a858b;
  opacity:1;
}

.contacto-input:hover{
  border-color:rgba(32,124,128,.52);
  background:var(--blanco);
}

.contacto-input:focus{
  border-color:var(--titulo);
  box-shadow:0 0 0 4px rgba(152,195,218,.34);
  background:var(--blanco);
  outline:0;
}

.contacto-trust{
  display:grid;
  gap:4px;
  padding:13px 14px;
  border:1px solid rgba(216,179,121,.34);
  border-radius:14px;
  background:rgba(248,247,245,.76);
  color:var(--texto);
  font-size:13px;
  line-height:1.45;
}

.contacto-trust strong{
  color:var(--titulo);
  font-size:14px;
}

.contacto-submit{
  width:100%;
  min-height:54px;
  border-color:var(--titulo);
  background:var(--titulo);
  color:var(--blanco);
  font-size:15px;
  box-shadow:0 12px 26px rgba(32,124,128,.24);
}

.contacto-submit:hover{
  background:var(--fortaleza);
  border-color:var(--fortaleza);
  box-shadow:0 16px 30px rgba(0,140,149,.24);
}

.contacto-submit:disabled,
.contacto-submit.is-loading{
  cursor:wait;
  opacity:.72;
  transform:none;
  box-shadow:none;
}

.contacto-caption{
  margin-top:10px;
  text-align:center;
  font-size:12px;
}

/* =====================================================
   BOTONES
   Función: estilos reutilizables para acciones del sistema.
   Modificar aquí: colores, tamaño, bordes.
   ===================================================== */
/* =====================================================
   BOTONES PREMIUM ISY HEALTH COACH

   Función:
   Moderniza los botones principales del sistema con un
   estilo institucional similar al botón de referencia:
   "¡Quiero comenzar mi transformación!".

   Clases disponibles:
   - .btn-salud: base reutilizable.
   - .btn-salud-outline: fondo blanco, borde y texto oro.
   - .btn-salud-primary: fondo titulo institucional.
   - .btn-salud-success: fondo fortaleza institucional.

   Compatibilidad:
   También se aplica a .btn para modernizar progresivamente
   botones ya existentes sin cambiar lógica PHP.
   ===================================================== */
body .btn,
.btn-salud{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border:1.5px solid var(--oro);
  border-radius:14px;
  background:var(--blanco);
  color:var(--oro);
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  text-decoration:none;
  box-shadow:none;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
  cursor:pointer;
}

body .btn:hover,
.btn-salud:hover{
  background:var(--oro);
  border-color:var(--oro);
  color:var(--blanco);
  box-shadow:0 8px 20px rgba(216,179,121,.25);
  transform:translateY(-1px);
  opacity:1;
}

body .btn:active,
.btn-salud:active{
  transform:translateY(0);
}

body .btn:focus-visible,
.btn-salud:focus-visible{
  outline:3px solid rgba(216,179,121,.28);
  outline-offset:3px;
}

body .btn.btn-ghost,
.btn-salud-outline{
  background:var(--blanco);
  border-color:var(--oro);
  color:var(--oro);
}

body .btn.btn-ghost:hover,
.btn-salud-outline:hover{
  background:var(--oro);
  border-color:var(--oro);
  color:var(--blanco);
  box-shadow:0 8px 20px rgba(216,179,121,.25);
}

.btn-salud-primary{
  background:var(--titulo);
  border-color:var(--titulo);
  color:var(--blanco);
}

.btn-salud-primary:hover{
  background:var(--fortaleza);
  border-color:var(--fortaleza);
  color:var(--blanco);
  box-shadow:0 8px 20px rgba(32,124,128,.22);
}

.btn-salud-success{
  background:var(--fortaleza);
  border-color:var(--fortaleza);
  color:var(--blanco);
}

.btn-salud-success:hover{
  background:var(--titulo);
  border-color:var(--titulo);
  color:var(--blanco);
  box-shadow:0 8px 20px rgba(0,140,149,.22);
}

/* =====================================================
   BOTONES INSTITUCIONALES POR COLOR

   Función:
   Variantes reutilizables para dar jerarquía visual sin
   perder identidad institucional.

   Mapa sugerido:
   - .btn-azul: iniciar sesión, realizar test, continuar.
   - .btn-azul-outline: ver progreso, consultar.
   - .btn-oro: comprar, confirmar, acciones principales.
   - .btn-oro-outline: crear cuenta, más información.
   ===================================================== */
.btn-oro,
.btn-oro-outline,
.btn-azul,
.btn-azul-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border-radius:14px;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:all .25s ease;
  border:1.5px solid transparent;
}

.btn-oro{
  background:#D8B379;
  border-color:#D8B379;
  color:#FFFFFF;
}

.btn-oro:hover{
  background:#c8a065;
  border-color:#c8a065;
  color:#FFFFFF;
  box-shadow:0 8px 20px rgba(216,179,121,.25);
  transform:translateY(-1px);
}

.btn-oro-outline{
  background:#FFFFFF;
  border-color:#D8B379;
  color:#D8B379;
}

.btn-oro-outline:hover{
  background:#D8B379;
  border-color:#D8B379;
  color:#FFFFFF;
  box-shadow:0 8px 20px rgba(216,179,121,.25);
  transform:translateY(-1px);
}

.btn-azul{
  background:#98C3DA;
  border-color:#98C3DA;
  color:#FFFFFF;
}

.btn-azul:hover{
  background:#7fb2cd;
  border-color:#7fb2cd;
  color:#FFFFFF;
  box-shadow:0 8px 20px rgba(152,195,218,.28);
  transform:translateY(-1px);
}

.btn-azul-outline{
  background:#FFFFFF;
  border-color:#98C3DA;
  color:#207C80;
}

.btn-azul-outline:hover{
  background:#98C3DA;
  border-color:#98C3DA;
  color:#FFFFFF;
  box-shadow:0 8px 20px rgba(152,195,218,.28);
  transform:translateY(-1px);
}

.btn-oro:active,
.btn-oro-outline:active,
.btn-azul:active,
.btn-azul-outline:active{
  transform:translateY(0);
}

@media (max-width:768px){
  body .btn,
  .btn-salud,
  .btn-oro,
  .btn-oro-outline,
  .btn-azul,
  .btn-azul-outline{
    width:100%;
    max-width:360px;
    padding:13px 22px;
  }
}

.sm-btn-payment{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border:1.5px solid var(--oro);
  border-radius:14px;
  background:var(--blanco);
  color:var(--oro);
  font-weight:800;
  text-decoration:none;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
  cursor:pointer;
}

.sm-btn-payment:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.sm-btn-mp{
  background:var(--titulo);
  border-color:var(--titulo);
  color:var(--blanco);
}

.sm-btn-stripe{
  background:var(--fortaleza);
  border-color:var(--fortaleza);
  color:var(--blanco);
}

.sm-btn-simulator{
  background:var(--blanco);
  border-color:var(--oro);
  color:var(--oro);
}

.sm-btn-payment:hover{
  background:var(--oro);
  border-color:var(--oro);
  color:var(--blanco);
  box-shadow:0 8px 20px rgba(216,179,121,.25);
  transform:translateY(-1px);
}

.sm-btn-payment:active{
  transform:translateY(0);
}

/* =====================================================
   CARDS Y ALERTAS
   Función: bloques visuales reutilizables.
   ===================================================== */
.sm-payment-box{
  margin-top:10px;
  padding:12px;
  border:1px solid #eee;
  border-radius:12px;
}

.sm-payment-options{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}

/* =====================================================
   RESULTADOS: RUEDA Y TABLA
   Función: estilos migrados desde resultado.php.
   ===================================================== */
.rueda-wrap{
  display:flex;
  gap:20px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:nowrap;
  margin:10px 0 18px;
}

.rueda-left{
  flex:1 1 60%;
  min-width:0;
}

.rueda-right{
  flex:0 0 40%;
  display:flex;
  justify-content:center;
  min-width:320px;
}



.rueda-left{
  flex:0 0 60%;
  min-width:0;
}

.rueda-right{
  flex:0 0 40%;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  min-width:320px;
}
 

.wheel-box{
  width:420px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  left:-100px;
}

.brand-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-row img{
  height:46px;
  width:auto;
  object-fit:contain;
}

.banner-title{
  flex:1;
  background:linear-gradient(90deg,#7b2ea0,#b143a8);
  color:var(--blanco);
  padding:12px 16px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.5px;
  box-shadow:0 10px 18px rgba(0,0,0,.12);
  text-transform:uppercase;
  font-size:16px;
}

.form-mini{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.form-mini .row{
  display:grid;
  grid-template-columns:180px 1fr;
  align-items:center;
  gap:10px;
}

.form-mini label{
  font-weight:700;
  color:#555;
  font-size:13px;
}

.form-mini .box{
  border:2px solid #2e7d32;
  border-radius:6px;
  padding:8px 10px;
  min-height:18px;
  background:var(--blanco);
  min-width:0;
  overflow-wrap:anywhere;
}

.tablaResponsive{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.tbl-dim{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
  font-size:13px;
  table-layout:fixed;
}

.tablaResponsive .tbl-dim,
.tablaResponsive table{
  min-width:720px;
}

.tbl-dim td{
  border:1px solid #cfd8dc;
  padding:8px 10px;
  vertical-align:middle;
  word-wrap:break-word;
}

.tbl-dim .c1{
  width:220px;
  font-weight:900;
  color:var(--blanco);
}

.tbl-dim .c2{
  background:#f6fbf6;
  color:#222;
  font-weight:600;
}

.tbl-dim .c3{
  width:90px;
  text-align:center;
  font-weight:900;
  background:var(--blanco);
}

.tbl-dim th{
  border:1px solid #cfd8dc;
  padding:8px 10px;
  background:#f2f2f2;
  font-weight:900;
  text-align:left;
}

.tbl-dim th.c3{
  text-align:center;
}
/*
.wheel-box{
  width:420px;
  max-width:100%;
  margin-left:auto;
}*/
.wheel-box{
  width:420px;
  max-width:100%;
  margin-left:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}




.wheel-box svg{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  margin:0 auto;
}

.wheel-hint{
  text-align:center;
  font-size:12px;
  color:#6b7280;
  margin-top:6px;
}

.hidden-chart-export{
  position:absolute;
  left:-10000px;
  top:auto;
  width:720px;
  height:720px;
  overflow:hidden;
  visibility:hidden;
}

.resultChartWrap,
.chartWrap,
.graficaWrap{
  width:100%;
  max-width:100%;
  min-height:320px;
  position:relative;
  overflow:visible;
}

.resultChartWrap canvas,
.chartWrap canvas,
.graficaWrap canvas{
  width:100% !important;
  height:320px !important;
  max-width:100%;
  display:block !important;
}

.resultActions,
.pdfActions,
.paymentActions,
.actions,
.sm-payment-options{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
  position:relative;
  z-index:2;
}

.resultActions .btn,
.pdfActions .btn,
.paymentActions .btn,
.actions .btn,
.resultActions button,
.pdfActions button,
.paymentActions button,
.actions button,
.sm-payment-options .sm-btn-payment{
  position:relative;
  z-index:3;
  pointer-events:auto;
}

/* =====================================================
   FAQ USUARIO FINAL
   Función: sección de preguntas frecuentes para personas
   que realizan el test, sin contenido administrativo.
   ===================================================== */
.faq-section{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:40px;
  align-items:start;
  margin:36px auto 10px;
  padding:22px 0 8px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.faq-heading{
  position:sticky;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.faq-heading::after{
  content:"";
  width:96px;
  height:5px;
  margin-top:18px;
  border-radius:999px;
  background:var(--titulo);
}

.faq-list{
  display:grid;
  gap:14px;
}

.faq-item{
  overflow:hidden;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(91,91,91,.16);
  border-radius:18px;
  box-shadow:none;
  backdrop-filter:blur(4px);
  transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.faq-item.is-open{
  background:rgba(255,255,255,.58);
  border-color:rgba(32,124,128,.32);
  box-shadow:0 10px 24px rgba(32,124,128,.08);
}

.faq-question{
  width:100%;
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 18px 18px 22px;
  border:0;
  background:transparent;
  color:var(--titulo);
  font:inherit;
  font-size:16px;
  font-weight:800;
  line-height:1.32;
  text-align:left;
  cursor:pointer;
}

.faq-question:hover{
  color:var(--titulo);
}

.faq-question:focus-visible{
  outline:3px solid rgba(152,195,218,.55);
  outline-offset:-5px;
  border-radius:14px;
}

.faq-icon{
  position:relative;
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1.5px solid var(--titulo);
  background:rgba(255,255,255,.7);
}

.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:2px;
  border-radius:2px;
  background:var(--titulo);
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .25s ease;
}

.faq-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

.faq-item.is-open .faq-icon{
  background:var(--titulo);
  border-color:var(--titulo);
}

.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after{
  background:var(--blanco);
}

.faq-item.is-open .faq-icon::after{
  transform:translate(-50%,-50%) rotate(90deg) scaleX(0);
  opacity:0;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .32s ease;
}

.faq-answer p{
  margin:0;
  padding:0 22px 22px;
  color:var(--texto);
  font-size:15px;
  line-height:1.65;
}

/* =====================================================
   RESPONSIVE GENERAL
   ===================================================== */
@media (max-width:980px){
  .faq-section{
    grid-template-columns:1fr;
    gap:24px;
    padding:18px 0 8px;
  }

  .faq-heading{
    position:static;
  }

  .rueda-wrap{
    flex-direction:column;
    flex-wrap:wrap;
  }

  .rueda-right{
    min-width:0;
    justify-content:flex-start;
  }

  .wheel-box{
    width:100%;
  }
}

@media(max-width:768px){
  .faq-section{
    margin-top:24px;
    padding:12px 0 4px;
  }

  .faq-heading .titulo-azul{
    font-size:clamp(37px,11.8vw,52px);
  }

  .faq-heading .titulo2-azul{
    font-size:clamp(25px,8vw,34px);
  }

  .faq-heading::after{
    width:68px;
    height:4px;
    margin-top:16px;
  }

  .faq-question{
    min-height:58px;
    padding:15px 14px 15px 16px;
    gap:14px;
    font-size:15px;
  }

  .faq-icon{
    flex-basis:32px;
    width:32px;
    height:32px;
  }

  .faq-answer p{
    padding:0 16px 18px;
    font-size:14px;
  }

  .card,
  .resultadoCard,
  .testCard,
  .questionCard{
    width:100% !important;
    max-width:100%;
    padding:16px;
    box-sizing:border-box;
  }

  .testContainer,
  .testShell{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }

  .testGrid,
  .questionGrid,
  .preguntaGrid,
  .pilarBox{
    grid-template-columns:1fr !important;
  }

  .pregunta,
  .question,
  .opcion,
  .option,
  .respuesta,
  .qRow,
  .qTitle,
  .testContent,
  .testTextBlock{
    max-width:100%;
    min-width:0;
    overflow-wrap:break-word;
    word-wrap:break-word;
  }

  .opcion,
  .option,
  .respuesta,
  .scoreBtn{
    width:100% !important;
    min-height:48px;
    padding:12px;
    font-size:16px;
    box-sizing:border-box;
  }

  .testActions{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:10px;
    width:100%;
  }

  .testActionsGroup{
    width:100%;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .testActions button,
  .testActions .btn{
    width:100%;
    max-width:320px;
    margin:0 auto;
    display:flex !important;
    justify-content:center;
  }

  .brand-row,
  .datosResultado,
  .resultadoHeader,
  .resultadoGrid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:14px;
  }

  .brand-row{
    align-items:start;
  }

  .brand-row img{
    max-width:160px;
  }

  .banner-title{
    font-size:14px;
    line-height:1.25;
    padding:10px 12px;
  }

  .form-mini .row{
    grid-template-columns:1fr;
    gap:6px;
  }

  .tablaResponsive{
    margin-top:10px;
  }

  .tablaPilares{
    font-size:13px;
  }

  .tablaPilares th,
  .tablaPilares td{
    padding:10px 8px;
    vertical-align:middle;
  }

  .rueda-wrap{
    width:100%;
    min-width:0;
    overflow:visible;
  }

  .rueda-left,
  .rueda-right{
    width:100%;
    min-width:0;
  }

  .wheel-box{
    width:100%;
    margin-left:0;
  }

  .wheel-box svg{
    max-width:100%;
  }

  .sm-layout-results{
    flex-direction:column;
    gap:24px;
  }

  .sm-flex-1,
  .sm-flex-summary{
    width:100%;
    min-width:0;
  }

  .resultChartWrap,
  .chartWrap,
  .graficaWrap{
    min-height:280px;
    overflow:visible;
  }

  .resultChartWrap canvas,
  .chartWrap canvas,
  .graficaWrap canvas{
    height:280px !important;
    display:block !important;
  }

  .resultActions,
  .pdfActions,
  .paymentActions,
  .actions,
  .sm-payment-options{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:10px;
    width:100%;
  }

  .resultActions .btn,
  .pdfActions .btn,
  .paymentActions .btn,
  .actions .btn,
  .resultActions button,
  .pdfActions button,
  .paymentActions button,
  .actions button,
  .sm-payment-options .sm-btn-payment,
  .sm-payment-options form{
    width:100%;
    max-width:320px;
  }

  .resultActions .btn,
  .pdfActions .btn,
  .paymentActions .btn,
  .actions .btn,
  .resultActions button,
  .pdfActions button,
  .paymentActions button,
  .actions button,
  .sm-payment-options .sm-btn-payment{
    display:flex !important;
    justify-content:center;
  }

  .resultadoGrid,
  .resultsGrid,
  .dashboardGrid{
    grid-template-columns:1fr !important;
  }
}
.titulos-img{
     display:block;
    height:50px;
        max-width:100%;
    width:auto;
    object-fit:contain;
}
.titulos-dobles-img{
     display:block;
    height:90px;
      max-width:100%;
    width:auto;
    object-fit:contain;
}
.titulos-triple-img{
     display:block;
    height:130px;
      max-width:100%;
    width:auto;
    object-fit:contain;
}
.reporte-incluye{
    background:transparent;
    border:2px solid #98C3DA;
    border-radius:18px;
    padding:24px 28px;
    margin:20px 0;
}

.reporte-incluye h3{
    margin:0 0 18px;
    color:#3b4b5a;
    font-size:1.3rem;
    font-weight:700;
    line-height:1.4;
}

.reporte-incluye ul{
    list-style:none;
    margin:0;
    padding:0;
}

.reporte-incluye li{
    position:relative;
    padding:10px 0 10px 32px;
    line-height:1.6;
    color:#4b5563;
}

.reporte-incluye li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:10px;
    color:#98C3DA;
    font-size:18px;
    font-weight:700;
}

.resultadoCardPago{
    max-width:900px;
    padding:18px 24px !important;
}

.resultadoCardPago .sm-payment-box{
    margin:10px 0 14px;
}

.resultadoCardPago .sm-payment-options{
    margin:12px 0 16px;
}

.resultadoCardPago .reporte-incluye{
    padding:18px 22px;
    margin:14px 0;
}

.resultadoCardPago .reporte-incluye h3{
    font-size:1.1rem;
    margin-bottom:12px;
}

.resultadoCardPago .reporte-incluye li{
    padding:7px 0 7px 28px;
    line-height:1.45;
    font-size:14px;
}

.resultadoCardPago .hr{
    margin:12px 0;
}




.casos-exito{
    padding:55px 20px;
    background:transparent;
    text-align:center;
}

.casos-exito h2{
    margin:0 0 28px;
    font-size:38px;
    font-weight:900;
    color:#0f6f82;
}

.casos-grid{
    width:min(860px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.caso-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    border-radius:10px;
    padding:18px;
    text-align:left;
    box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.caso-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#98C3DA;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
}

.stars{
    color:#D8B379;
    font-size:14px;
    letter-spacing:1px;
    line-height:1;
}

.caso-card strong{
    color:#334155;
    font-size:14px;
}

.caso-card p{
    margin:0;
    color:#1f2937;
    font-size:16px;
    line-height:1.45;
    font-weight:600;
}

.casos-btn-wrap{
    margin-top:32px;
}

.btn-casos{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#0f8b7f;
    color:#fff;
    text-decoration:none;
    padding:16px 38px;
    border-radius:8px;
    font-weight:800;
    box-shadow:0 10px 22px rgba(15,139,127,.22);
}

.btn-casos:hover{
    background:#0b746b;
}

@media(max-width:700px){
    .casos-exito h2{
        font-size:30px;
    }

    .casos-grid{
        grid-template-columns:1fr;
    }

    .btn-casos{
        width:100%;
        padding:15px 20px;
    }
}