/* 1. Importación de la fuente desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/* 2. Aplicación global a todo el sitio */
body, h1, h2, h3, h4, h5, h6, p, a, li, span, div {
    font-family: 'Inter', sans-serif !important;
}

.material-icons {
    font-family: 'Material Icons' !important;
}

.col .responsive-img,
.video-responsive{
border-radius: 24px;
}

.header img,
.footer img,
.icons img {
border-radius:0!important;
}

.dynamicform:has(> .margin-block) {
  overflow: hidden;
  padding: 24px;
}

.dynamicform:has(> .center) {
    display: flex;
    align-items: center;
    max-width: 1024px;
    padding: 42px;
   }


@media only screen and (max-width: 992px) {
.dynamicform:has(> .center) {
  flex-wrap: wrap;
  }

.dynamicform:has(> .center.reverse) {
  flex-direction: column-reverse;
  }
}


/* ==========================================================================
   1. ESTILOS BASE Y TIPOGRAFÍA
========================================================================== */
body {
    background-color: #fff;
}

h1 {
    display: block !important;
    width: 100% !important;
    font-size: 4.5rem !important;
    font-weight: 700 !important;
    line-height: 0.95 !important;
    word-wrap: normal !important;
}

h2 { 
    font-size: 40px; 
    margin-top: 120px;
}

h3 { 
    color: #1C1D1F; 
    font-size: 28px; 
}

p { 
    font-size: 17px; 
    color: #1C1D1F; 
}

.button-white a {
    padding: 14px 46px;
    background-color: #fff;
    border-radius: 99px;
    color: #1d1d1d;
    font-size: 18px;
    display: inline-block;
    min-width: 320px;
    text-align: center;
    transition: 0.3s;
}

.button-white a:hover{
    box-shadow: 0 3px 7px rgb(0 0 0 / 47%);
}
 
.button a {
    padding: 14px 46px;
    background-color: #1d1d1d;
    border-radius: 99px;
    color: #fff;
    font-size: 18px;
    display: inline-block;
    min-width: 320px;
    text-align: center;
    transition: 0.3s;
    display: inline-block;
}

.button a:hover{
    box-shadow: 0 3px 7px rgb(0 0 0 / 47%);
}

.button-second a{
    color: #1d1d1d;
    background-color: #fff;
    border: 1px solid #1d1d1d;
    margin-top: 24px;
    padding: 14px 46px;
    border-radius: 99px;
    font-size: 18px;
    display: inline-block;
    min-width: 320px;
    text-align: center;
    transition: 0.3s;
}

.button-second a:hover{
    background-color: #f5f6f7;
    box-shadow: 0 3px 7px rgb(0 0 0 / 15%);
}


/* ====================================================
   2. HERO (row 2)
   ==================================================== */
.col.s12 > .row:nth-of-type(2) > .dynamicform {
   padding-top: 40px;
}


/* ====================================================
   3. Especialidades  (.soluciones)
   ==================================================== */

.col.soluciones {
  position: relative;
  border-radius: 30px;
  overflow: hidden; 
}

.col.soluciones img{
    filter: brightness(0.6);
}

/* Si hay imagen, que quede debajo */
.col.soluciones  img,
.col.soluciones  div:nth-of-type(1){
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: 24px;
  transition: filter 0.45s ease; /* <- animación del oscurecimiento */
}

/* Overlay encima y ajustado EXACTO a la caja */
.col.soluciones  div:nth-of-type(2){
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 30px;
  background: rgba(0,0,0,0);
  transition: background 0.45s ease;
  padding: 3rem;
  box-sizing: border-box;
  pointer-events: none;
}

/* Textos siempre blancos y por encima */
.col.soluciones div:nth-of-type(2) h3,
.col.soluciones div:nth-of-type(2) p{
  color: #fff;
  position: absolute;      /* <- para animar posición sin saltos */
  left: 1.5rem;
  right: 1.5rem;
  z-index: 3;
  margin: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

/* H3 abajo en estado normal */
.col.soluciones div:nth-of-type(2) h3{
  bottom: 0;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.45s ease, opacity 0.35s ease; 
}

/* P oculto en estado normal */
.col.soluciones div:nth-of-type(2) p{
  top: calc(3rem + 5.2rem); /* tu posición base */
  opacity: 0;
  transform: translateY(12px); /* <- arranca un pelín más abajo */
  transition: transform 0.45s ease, opacity 0.35s ease; /* <- suave */
}

/* Hover: oscurece imagen */
.col.soluciones:hover img{
  filter: brightness(0.3);
}

/* Hover: h3 sube con movimiento sutil */
.col.soluciones:hover div:nth-of-type(2) h3{
  transform: translateY(-290px); /* <- sube “bonito” sin saltar */
}

/* Hover: aparece p con subida y fade (ligero delay para efecto pro) */
.col.soluciones:hover div:nth-of-type(2) p{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.08s, 0.08s; /* <- primero h3, luego p */
  pointer-events: none;
}

@media (max-width: 768px) {
   .col.soluciones:hover div:nth-of-type(2) h3{
       transform: translateY(-205px);
  }
}

/* ====================================================
   4. Gráfico todo en una plataforma
   ==================================================== */

.col.l5.m6.s12.grafico {
    padding-top: 40px;
}

.col.l7.m6.s12.plataforma-completa,
.col.l7.m6.s12.grafico{
  padding-top: 86px;
}



/* ====================================================
   CARDS 
   ==================================================== */

/* Contenedor que solo afecta al bloque que tiene cards CMS */
.dynamicform:has(.card > div[id^="cms-module-"]){
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch; /* <-- todas mismas alturas */
}

/* Card base (independiente del grid l4/l6/etc) */
.dynamicform .card:has(> div[id^="cms-module-"]){
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
  padding: 24px !important;
  overflow: hidden;

  /* Layout interno */
  display: grid !important;
  grid-template-columns: 48px 1fr 56px;
  grid-template-rows: auto 1fr auto; /* clave para altura uniforme */
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;

  /* Altura consistente */
  min-height: 220px;

  /* Comportamiento flexible */
  flex: 1 1 320px;
}

/* Reset Materialize */
.dynamicform .card:has(> div[id^="cms-module-"]) .row{
  margin: 0 !important;
}
.dynamicform .card:has(> div[id^="cms-module-"]) .col.s12{
  padding: 0 !important;
}

/* =========================
   1) ICONO
   ========================= */
.dynamicform .card:has(> div[id^="cms-module-"])
> div[id^="cms-module-"]:nth-of-type(1){
  grid-column: 1;
  grid-row: 1;
}

.dynamicform .card:has(> div[id^="cms-module-"])
> div[id^="cms-module-"]:nth-of-type(1) img{
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
  display: block;
}

/* =========================
   2) TEXTO
   ========================= */
.dynamicform .card:has(> div[id^="cms-module-"])
> div[id^="cms-module-"]:nth-of-type(2){
  grid-column: 2;
  grid-row: 1 / span 2; /* ocupa espacio central */
}

/* Título */
.dynamicform .card:has(> div[id^="cms-module-"])
> div[id^="cms-module-"]:nth-of-type(2) h3{
  margin: 0 0 6px 0 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #111 !important;
}

/* Descripción */
.dynamicform .card:has(> div[id^="cms-module-"])
> div[id^="cms-module-"]:nth-of-type(2) p{
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  color: rgba(0,0,0,0.70) !important;
}

/* =========================
   3) BOTÓN REDONDO
   ========================= */
.dynamicform .card:has(> div[id^="cms-module-"])
> div[id^="cms-module-"]:nth-of-type(3){
  grid-column: 3;
  grid-row: 3; /* SIEMPRE abajo */
  align-self: end;
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* Estilo botón */
.dynamicform .card:has(> div[id^="cms-module-"])
> div[id^="cms-module-"]:nth-of-type(3) img{
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: #111 !important;
  padding: 11px !important;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}

/* Hover elegante */
.dynamicform .card:has(> div[id^="cms-module-"]){
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dynamicform .card:has(> div[id^="cms-module-"]):hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0,0,0,0.10) !important;
}

.dynamicform .card:has(> div[id^="cms-module-"]):hover
> div[id^="cms-module-"]:nth-of-type(3) img{
  transform: translateX(2px);
}



/* ====================================================
   LISTA DE MÓDULOS SIN KLINIKARE
   ==================================================== */

/* Contenedor columna donde están los items */
.dynamicform > .col.l4.m4.s1{
  min-height: 500px;
  display: flex;
  flex-direction: column;
    justify-content: center;
}

/* Cada item = cada cms-module */
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"]{
  position: relative;
  padding: 22px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* El último sin línea */
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"]:last-child{
  border-bottom: 0;
}

/* Convertimos el contenido del módulo en “fila” */
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"] .row,
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"] .col.s12{
  margin: 0 !important;
  padding: 0 !important;
}

/* El wrapper del texto ocupa el ancho, dejando hueco para el botón */
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"] .col.s12 > div{
  padding-right: 56px; /* reserva espacio para el botón */
}

/* Texto (tu span inline con font-size) */
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"] p{
  margin: 0 !important;
}

.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"] strong{
  font-weight: 800;
  color: #111;
}

/* Si el CMS mete spans con estilos, los respetamos pero afinamos */
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"] strong span{
  font-size: 20px !important;
  line-height: 1.2;
}

/* =========================
   Botón redondo (probable ::after del módulo)
   ========================= */
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"]::after{
  content: ""; /* por si no lo define */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #111;
  
  /* Flecha en el centro (si no tienes imagen real) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;

  pointer-events: none; /* el click sigue siendo de la fila (si aplica) */
}

/* Hover opcional: leve slide del botón */
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"]{
  transition: transform 0.2s ease;
}
.dynamicform > .col.l4.m4.s1 > div[id^="cms-module-"]:hover{
  transform: translateX(0); /* por si luego quieres animar */
}








/* =========================================================
   SECCIÓN "Empieza con Klinikare"
========================================================= */

/* CONTENEDOR PRINCIPAL */
.dynamicform:has(> .programa-left):has(> .programa-right){
  display: grid !important;
  grid-template-columns: 7fr 5fr;   /* lista con ancho suficiente */
  grid-template-rows: auto 1fr;
  column-gap: 16px;                /* separación pequeña */
  align-items: center;
  padding-top: 130px;
}

/* Subimos los módulos de la izquierda al grid */
.dynamicform:has(> .programa-left):has(> .programa-right) > .programa-left{
  display: contents;
}

/* TÍTULO arriba a 12 columnas */
.dynamicform:has(> .programa-left):has(> .programa-right)
> .programa-left > div[id^="cms-module-"]:has(h2){
  grid-column: 1 / -1;
  grid-row: 1;
  text-align: center;
  margin-bottom: 40px;
}

/* IMAGEN debajo del título */
.dynamicform:has(> .programa-left):has(> .programa-right)
> .programa-left > div[id^="cms-module-"]:has(h2) + div[id^="cms-module-"]{
  grid-column: 1;
  grid-row: 2;
}

/* Imagen */
.programa-left img{
  width: 108%;
  max-width: none;
  display: block;
}

/* LISTA DERECHA */
.dynamicform:has(> .programa-left):has(> .programa-right) > .programa-right{
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: start;
  width: 80%;
}

/* =========================================================
   ITEMS LISTA 
   ========================================================= */

.dynamicform:has(> .programa-left):has(> .programa-right)
> .programa-right > div[id^="cms-module-"]{
  position: relative;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
}

.dynamicform:has(> .programa-left):has(> .programa-right)
> .programa-right > div[id^="cms-module-"]:last-child{
  border-bottom: 0;
}

/* Reset Materialize */
.dynamicform:has(> .programa-left):has(> .programa-right)
> .programa-right .row,
.dynamicform:has(> .programa-left):has(> .programa-right)
> .programa-right .col.s12{
  margin: 0 !important;
  padding: 0 !important;
}

/* CONTENEDOR DE TEXTO */
.dynamicform:has(> .programa-left):has(> .programa-right)
> .programa-right .col.s12 > div{
  display: flex;
  align-items: center;
  width: 100%;
  padding-right: 56px; /* reserva botón */
}

/* TEXTO */
.dynamicform:has(> .programa-left):has(> .programa-right)
> .programa-right strong span{
  display: block;
  width: 100%;
  font-size: 19px !important;
  line-height: 1.25;
  white-space: normal; /* si no cabe (móvil), baja a 2 líneas */
}

/* BOTÓN */
.dynamicform:has(> .programa-left):has(> .programa-right)
> .programa-right > div[id^="cms-module-"]::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 37px;
  border-radius: 999px;
  background: #111;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;

  pointer-events: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px){
  .dynamicform:has(> .programa-left):has(> .programa-right){
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .dynamicform:has(> .programa-left):has(> .programa-right) > .programa-right{
    grid-column: 1;
    grid-row: 3;
    margin-top: 20px;
  }

  .programa-left img{
    width: 100%;
  }
}


/* ====================================================
   SOFTWARE SOLIDO
   ==================================================== */

.solido .row:nth-of-type(2) .dynamicform{
    display: block;
    overflow: hidden;
}

.solido .row:nth-of-type(2) {
    overflow: visible;
    display: block;
    padding-bottom: 64px;
    padding-top: 64px;
    margin-bottom: 64px;
    position: relative; 
}

.solido .row:nth-of-type(2)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); 
    width: 80%; 
    height: 1px;
    background-color: #E6E7E9;
}

.dynamicform:has(> .solido-2){
   padding-bottom: 64px;   
   padding-top: 64px;
}

.dynamicform:has(> .solido) img,
.dynamicform:has(> .solido-2) img {
   max-height: 40px;
   width: auto!important;
}



/* ====================================================
PARTNERS   ==================================================== */
 .dynamicform:has(> .partners){
    background-color: #E6E7E9;
    padding-bottom: 64px;
    overflow: hidden;
    margin-top: 84px;
    min-width: 100%;
}

.dynamicform:has(> .carrousell) {
    overflow: hidden;
    min-width: 100%;
}

.swiper-slide img{
   width: auto!important;
}


/*===============================================================================================================

RESPONSIVE (Media Queries)
   =======================================================*/

/* --- MÓVIL (Hasta 600px) --- */
@media only screen and (max-width: 600px) {
    /* Títulos */
    h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        }

    h3 {
       line-height: 100%;
          } 

   .hero p{
       text-align: center;
          }

/* ---- SOLUCIONES----*/

   .soluciones:hover div:nth-of-type(2) h3{
        transform: translateY(-150px);
         }

   .soluciones:hover div:nth-of-type(2) h3, 
   .soluciones:hover div:nth-of-type(2) p{
        left: 0;
        right: 0; 
         }


/* ---- CARD ----*/
   .dynamicform:has(.card){
    flex-wrap: wrap;
   }
}


/* ====================================
   CONTACT FORM
   ==================================== */

.dynamicform:has(> .contact-form) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #EEEEEE!important;
    border-radius: 24px;
    padding: 62px;
    margin: 120px auto;
}

.dynamicform .contact-form.card:has(> div[id^="cms-module-"]) {
    grid-template-columns: auto;
}

.contact-form .col > div p:nth-of-type(2){
    padding: 50px;
    background-color: #BFCAD8;
    border-radius: 18px;
    margin-top: 64px;
}

@media (max-width: 768px) {
.dynamicform:has(> .contact-form){
    padding: 12px;
   }
}