/*========================================
0. GENERICOS
========================================*/

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

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

body {
   background: #fff;
}

.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(> .header) {
   min-width: 100%;
}


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

.row:has(> div > .vertical-center-trigger) > div {
    display: flex;
    align-items: center;

   }
/*-----RESPONSIVE---------*/
@media only screen and (max-width: 992px) {
    .row:has(> div > .vertical-center-trigger) > div {
       flex-wrap: wrap;
    }
.dynamicform:has(> .reverse) {
  display: flex;
   flex-direction: column-reverse;
    }

}


span.blue-text {
       color: #1a3e77 !important;
}





/*================================   
1. TIPOGRAFÍA
================================*/

body h1,
body h1 *{
    display: block;
    width: 100%;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1.2 ;
    font-weight: 700 ;
    word-wrap: normal ;
    margin-top: 10px;
   font-family: 'Outfit', sans-serif!important;
}

@media (max-width: 768px) {
h1, 
.white-text {
        margin-top: 48px !important;
    }
}

body h2,
body h2 * { 
    font-size: clamp(1.875rem, 4vw, 2.5rem) !important;
    line-height: 1.3 !important;
    margin-top: 86px;
    font-family: 'Outfit', sans-serif!important;
}

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

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

.p-medium p{
 font-size: clamp(1.125rem, 2.2vw, 1.375rem) !important;
line-height: 1.45 !important;
}

.p-large p{
  font-size: clamp(1.375rem, 3vw, 1.75rem) !important;
  line-height: 1.3 !important;
} 

.row:has(> div > .vertical-center) > div {
    display: flex;
    align-items: center;
   }


.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%);
}

/**************************
VERTICAL CENTER
*************************/
.dynamicform:has(> .horizontal-center) {
  display: flex;
  flex-direction: row;
  justify-content: center;   
  align-items: center;   
}

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


/*********************
listados
********************/
/*==============================
2. LISTADOS
==============================*/

.list-square,
.list-circle,
.arrow-list,
.green-list,
.admiration-circle-blue{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.list-square ul li,
.list-circle ul li,
.arrow-list ul li,
.green-list ul li,
.admiration-circle-blue ul li{
  position: relative !important;
  padding-left: 45px !important; /* Espacio generoso para que el icono no pise el texto */
  margin-bottom: 8px !important;
  font-size: 18px;             
  color: #000000;
  line-height: 1.5;   
  display: flex;
  align-items: flex-start;      
}


.green-list ul li{
margin-bottom: 0;
}

.green-list ul li::before{
content: "";
  position: absolute;
  left: 0;
  top: 0px; 
  width: 26px;               
  height: 26px;

  /* SVG: Círculo y check en verde con trazo limpio (stroke-width: 2) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='16 9 11 14 8 11'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}


.arrow-list ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
    flex-direction: column;
    gap: 4px; 
  
  width: 20px; /* Tamaño de la flecha */
  height: 20px;
  
  /* SVG de una flecha limpia apuntando a la derecha */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}




/*------------------------------------------
Bullets círculos con admiracion azul
------------------------------------------*/
.admiration-circle-blue ul li::before{
content: ""; 
position: absolute; 
left: 0; 
top: 50%; 
transform: translateY(-50%); /* Centrado vertical perfecto */ 
width: 22px; /* Tamaño del icono circular */ 
height: 22px; 
/* SVG que dibuja el círculo con el signo de exclamación en AZUL */ 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}


.list-square ul li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Pequeño truco para centrar el icono perfectamente con la primera línea de texto */
  top: 3px; 
  width: 26px; /* Tamaño del cuadrado */
  height: 26px;
  
  /* SVG que dibuja el recuadro negro con el check blanco/transparente dentro */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cpolyline points='9 11 12 14 22 4'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}





.list-circle ul li::before{
content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);    /* Centrado vertical automático */
  width: 24px;                    /* Tamaño del círculo */
  height: 24px;
  
  /* SVG que dibuja el círculo negro con el check fino adentro */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='16 9 11 14 8 11'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}



/*=============================
MARGIN-SECTION
=============================*/
.row:has(> div > .margin-section){   
    padding: 60px 0;
    display: block;
    overflow: hidden;
}

/*======================
FONDO DIFUMINADO
=======================*/

/* Quitar el fondo de la columna interior */
.col.fondo-azul-difuminado {
    background: transparent !important;
}

/* Extender la fila hasta los bordes de la ventana */
.row:has(> .dynamicform > .fondo-azul-difuminado) {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    box-sizing: border-box;

    background-color: #fff !important;
    background-image:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 35%,
            #fff 100%
        ),
        radial-gradient(
            ellipse at 65% 10%,
            rgba(180, 205, 245, 0.6) 0%,
            rgba(220, 232, 250, 0.4) 45%,
            rgba(255, 255, 255, 0) 85%
        ) !important;

    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

/* Mantener el contenido centrado */
.row:has(> .dynamicform > .fondo-azul-difuminado)
> .dynamicform {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    background: transparent !important;
    box-sizing: border-box;
}




/****************
BLACK-BLOCK
****************/

/* Ampliar el contenedor exterior del header */
.row:has(> .dynamicform > .black-block) > .dynamicform {
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box;
}

/* Icono a la izquierda y textos a la derecha */
.dynamicform .black-block {
    display: grid !important;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center !important;
    gap: 60px !important;

    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 70px 0 !important;
    box-sizing: border-box;

    background: transparent !important;
}

/* Módulos interiores */
.dynamicform .black-block > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}

/* Módulo del icono */
.dynamicform .black-block > div:has(img) {
    grid-column: 1;
    grid-row: 1;
    align-self: center !important;
}

/* Módulo del título y antetítulo */
.dynamicform .black-block > div:has(h1) {
    grid-column: 2;
    grid-row: 1;
    align-self: center !important;
    text-align: left !important;
}

/* Limpiar espacios del CMS */
.dynamicform .black-block > div > .row,
.dynamicform .black-block > div > .row > .col {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Icono */
.dynamicform .black-block img.responsive-img {
    display: block !important;
    position: static !important;
    width: 130px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 18px !important;
    transform: none !important;
}

/* Antetítulo */
.dynamicform .black-block p {
    margin: 0 0 26px !important;
    padding: 0 !important;
    color: #4D4D4D !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

/* Título principal */
.dynamicform .black-block h1 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #4D4D4D !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 54px !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    white-space: normal !important;
}

/* Mantener el formato en spans, negritas y white-text */
.dynamicform .black-block h1 *,
.dynamicform .black-block p * {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* Tablet */
@media (max-width: 1199px) {
    .dynamicform .black-block {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 32px !important;
        padding: 50px 0 !important;
    }

    .dynamicform .black-block img.responsive-img {
        width: 100px !important;
    }

    .dynamicform .black-block p {
        font-size: 28px !important;
        margin-bottom: 20px !important;
    }

    .dynamicform .black-block h1 {
        font-size: 40px !important;
    }
}

/* Móvil */
@media (max-width: 600px) {
    .row:has(> .dynamicform > .black-block) > .dynamicform {
        padding: 0 20px !important;
    }

    .dynamicform .black-block {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px !important;
        padding: 40px 0 !important;
    }

    .dynamicform .black-block > div:has(img) {
        grid-column: 1;
        grid-row: 1;
    }

    .dynamicform .black-block > div:has(h1) {
        grid-column: 1;
        grid-row: 2;
    }

    .dynamicform .black-block img.responsive-img {
        width: 80px !important;
        border-radius: 14px !important;
    }

    .dynamicform .black-block p {
        margin-bottom: 18px !important;
        font-size: 23px !important;
    }

    .dynamicform .black-block h1 {
        font-size: 32px !important;
    }
}

/***********************
BLOCK-COLUMN-GREY
***********************/

.dynamicform:has(> .block-column-grey) {
  display: flex;
  align-items: center;
  overflow: hidden;
  clear:both;
  border-radius: 24px;
  padding: 38px;
  background-color: #f2f2f2;
  border: 1px solid #c2c2c2;
}



.block-column-grey img{
  float: left;
}

/* lista nativa */
.block-column-grey.li ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.block-column-grey.li ul li {
  position: relative !important;
  padding-left: 40px !important; 
  margin-bottom: 16px !important; 
  font-size: 16px;              
  display: flex;
  align-items: center;        
}

/* 2. Inyectamos el icono circular de exclamación antes de cada texto */
.block-column-grey.li ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);  
  width: 24px;                 
  height: 24px;            
  
  /* Dibujamos el icono exacto con SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}


@media only screen and (max-width: 1024px){
.dynamicform:has(> .block-column-grey){
  flex-wrap:wrap;
  }

}



/*===========================================
RECEPCIÓN: RECUADRO EN TRES FILAS
============================================*/

/* Aspecto común de las tres filas exteriores */
.row:has(> .dynamicform > .recepcion-titulo),
.row:has(> .dynamicform > .recepcion-tarjeta),
.row:has(> .dynamicform > .recepcion-cierre) {
    display: block !important;
    float: none !important;

    width: calc(100% - 48px) !important;
    max-width: 1384px !important;
    margin: 0 auto !important;
    box-sizing: border-box;

    background: #fff !important;
    border: 0 solid #777 !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
}

/* Inicio del recuadro */
.row:has(> .dynamicform > .recepcion-titulo) {
    border-top-width: 1px !important;
    border-radius: 26px 26px 0 0 !important;
    padding: 62px 24px 48px !important;
}

/* Parte central */
.row:has(> .dynamicform > .recepcion-tarjeta) {
    border-radius: 0 !important;
    padding: 0 24px !important;
}

/* Final del recuadro */
.row:has(> .dynamicform > .recepcion-cierre) {
    border-bottom-width: 1px !important;
    border-radius: 0 0 26px 26px !important;
    padding: 44px 24px 40px !important;
}

/* Padres interiores */
.dynamicform:has(> .recepcion-titulo),
.dynamicform:has(> .recepcion-cierre) {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Ocultar las columnas laterales vacías */
.dynamicform:has(> .recepcion-titulo) > .col:not(:has(*)),
.dynamicform:has(> .recepcion-cierre) > .col:not(:has(*)) {
    display: none !important;
}

/* Eliminar pseudoelementos del CMS */
.dynamicform:has(> .recepcion-titulo)::before,
.dynamicform:has(> .recepcion-titulo)::after,
.dynamicform:has(> .recepcion-tarjeta)::before,
.dynamicform:has(> .recepcion-tarjeta)::after,
.dynamicform:has(> .recepcion-cierre)::before,
.dynamicform:has(> .recepcion-cierre)::after {
    display: none !important;
    content: none !important;
}

/* Columnas principales */
.dynamicform > .col.recepcion-titulo,
.dynamicform > .col.recepcion-tarjeta,
.dynamicform > .col.recepcion-cierre {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Limpiar filas y columnas dentro de los módulos */
:is(.recepcion-titulo, .recepcion-tarjeta, .recepcion-cierre)
> div > .row,
:is(.recepcion-titulo, .recepcion-tarjeta, .recepcion-cierre)
> div > .row > .col {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/*===========================================
TÍTULO
============================================*/

.dynamicform > .col.recepcion-titulo {
    max-width: 720px !important;
}

.recepcion-titulo h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: #383838 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

/*===========================================
TARJETAS
============================================*/

.dynamicform:has(> .recepcion-tarjeta) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 40px;

    width: 100% !important;
    max-width: 1070px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.dynamicform > .col.recepcion-tarjeta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 26px !important;

    min-height: 222px;
    padding: 42px 20px 24px !important;

    background: #282828 !important;
    border-radius: 28px;
    text-align: center;
}

/* Espacio reservado para cada icono */
.dynamicform > .col.recepcion-tarjeta::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;

    background-image: var(--icono-recepcion);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.recepcion-tarjeta p {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.recepcion-tarjeta p * {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/*===========================================
ICONOS SVG
============================================*/

/* Teléfono */
.icono-telefono {
    --icono-recepcion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='none'%3E%3Cpath d='M25 10C23 8 20 9 17 11L12 16C8 20 11 35 20 47C30 60 44 68 57 66C63 65 67 60 69 55C70 53 69 51 67 50L54 44C52 43 50 43 48 45L41 51C33 47 27 40 23 32L29 26C31 24 31 22 30 20Z' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Puerta: llegada de un paciente */
.icono-paciente {
    --icono-recepcion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 70V12a3 3 0 0 1 3-3h37a3 3 0 0 1 3 3v58M9 70h63'/%3E%3Ccircle cx='49' cy='40' r='3.5' fill='white' stroke='none'/%3E%3C/svg%3E");
}

/* Calendario */
.icono-calendario {
    --icono-recepcion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='13' y='15' width='54' height='54' rx='2'/%3E%3Cpath d='M13 30h54M25 9v13M55 9v13M28 44l6-4v18M45 44c1-6 12-6 12 1 0 4-5 7-11 13h12'/%3E%3C/svg%3E");
}

/*===========================================
TEXTO INFERIOR
============================================*/

.dynamicform > .col.recepcion-cierre {
    max-width: 1120px !important;
}

.recepcion-cierre p {
    margin: 0 !important;
    padding: 0 !important;
    color: #111 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.recepcion-cierre p:first-child {
    max-width: 850px;
    margin: 0 auto !important;
}

.recepcion-cierre p + p {
    margin-top: 56px !important;
}

.recepcion-cierre p span {
    font-size: inherit !important;
    line-height: inherit !important;
}

.recepcion-cierre strong {
    font-weight: 700 !important;
}

/*===========================================
TABLET
============================================*/

@media (max-width: 992px) {
    .dynamicform:has(> .recepcion-tarjeta) {
        gap: 20px;
    }

    .dynamicform > .col.recepcion-tarjeta {
        padding: 32px 16px 24px !important;
    }

    .recepcion-titulo h3 {
        font-size: 28px !important;
    }

    .recepcion-cierre p {
        font-size: 22px !important;
    }
}

/*===========================================
MÓVIL
============================================*/

@media (max-width: 600px) {
    .row:has(> .dynamicform > .recepcion-titulo),
    .row:has(> .dynamicform > .recepcion-tarjeta),
    .row:has(> .dynamicform > .recepcion-cierre) {
        width: calc(100% - 32px) !important;
    }

    .row:has(> .dynamicform > .recepcion-titulo) {
        padding: 32px 20px 28px !important;
    }

    .row:has(> .dynamicform > .recepcion-tarjeta) {
        padding: 0 20px !important;
    }

    .row:has(> .dynamicform > .recepcion-cierre) {
        padding: 28px 20px 32px !important;
    }

    .dynamicform:has(> .recepcion-tarjeta) {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .dynamicform > .col.recepcion-tarjeta {
        min-height: 190px;
        gap: 20px !important;
        padding: 28px 20px !important;
        border-radius: 22px;
    }

    .dynamicform > .col.recepcion-tarjeta::before {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
    }

    .recepcion-titulo h3 {
        font-size: 25px !important;
    }

    .recepcion-cierre p {
        font-size: 19px !important;
    }

    .recepcion-cierre p + p {
        margin-top: 28px !important;
    }
}


/*===========================================
PANEL AZUL · ASISTENTE DE RECEPCIÓN
============================================*/

/* Fila exterior */
.row:has(> .dynamicform > .recepcion-panel) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px !important;
    box-sizing: border-box;
}

/* Padre de las columnas */
.dynamicform:has(> .recepcion-panel) {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar columnas laterales vacías */
.dynamicform:has(> .recepcion-panel) > .col:not(:has(*)) {
    display: none !important;
}

/* Eliminar pseudoelementos del padre */
.dynamicform:has(> .recepcion-panel)::before,
.dynamicform:has(> .recepcion-panel)::after {
    content: none !important;
    display: none !important;
}

/* Recuadro azul */
.dynamicform > .col.recepcion-panel {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 76px;
    align-items: center;

    float: none !important;
    width: 100% !important;
    max-width: 1400px !important;
    min-width: 0 !important;

    margin: 0 auto !important;
    padding: 72px 80px 90px !important;
    box-sizing: border-box;

    background: #13284F !important;
    border-radius: 26px;
    color: #fff;
}

/* Módulos interiores */
.recepcion-panel > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Limpiar espacios y anchos del CMS */
.recepcion-panel > div > .row,
.recepcion-panel > div > .row > .col {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/*===========================================
1. TÍTULO Y SUBTÍTULO
============================================*/

.recepcion-panel > div:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
}

.recepcion-panel h3 {
    margin: 0 0 32px !important;
    padding: 0 !important;

    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.recepcion-panel > div:nth-child(1) p {
    margin: 0 !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

.recepcion-panel > div:nth-child(1) p span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/*===========================================
2. LISTADO CON ICONOS SVG
============================================*/

.recepcion-panel > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
}

.recepcion-panel ul {
    display: flex;
    flex-direction: column;
    gap: 32px;

    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.recepcion-panel ul > li {
    position: relative;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 0 64px !important;

    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

.recepcion-panel ul > li::marker {
    content: "";
}

/* Check circular blanco */
.recepcion-panel ul > li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;

    width: 30px;
    height: 30px;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='13.5'/%3E%3Cpath d='m10 16 4 4 8-8'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.recepcion-panel li span,
.recepcion-panel li strong {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/*===========================================
3. CONTENEDOR BLANCO CON TEXTO AZUL
============================================*/

.recepcion-panel > div:nth-child(3) {
    grid-column: 2;
    grid-row: 3;

    padding: 32px 38px !important;
    background: #fff !important;
    border-radius: 14px;
}

.recepcion-panel > div:nth-child(3) p {
    margin: 0 !important;
    padding: 0 !important;

    color: #204982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    margin-bottom: -35px!important;
}

.recepcion-panel > div:nth-child(3) p span {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.recepcion-panel > div:nth-child(3) strong {
    color: inherit !important;
    font-weight: 700 !important;
}

/*===========================================
4. IMAGEN PNG A LA IZQUIERDA
============================================*/

.recepcion-panel > div:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

.dynamicform > .col.recepcion-panel img.responsive-img {
    display: block !important;
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 240px !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/*===========================================
TABLET
============================================*/

@media (max-width: 992px) {
    .dynamicform > .col.recepcion-panel {
        grid-template-columns: 170px minmax(0, 1fr);
        column-gap: 28px;
        row-gap: 48px;
        padding: 48px 36px !important;
    }

    .recepcion-panel h3 {
        font-size: 30px !important;
    }

    .recepcion-panel > div:nth-child(1) p {
        font-size: 23px !important;
    }

    .recepcion-panel ul > li {
        font-size: 21px !important;
        padding-left: 48px !important;
    }

    .recepcion-panel > div:nth-child(3) {
        padding: 26px !important;
    }

    .recepcion-panel > div:nth-child(3) p {
        font-size: 23px !important;
    }
}

/*===========================================
MÓVIL
============================================*/

@media (max-width: 600px) {
    .row:has(> .dynamicform > .recepcion-panel) {
        padding: 16px !important;
    }

    .dynamicform > .col.recepcion-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        padding: 36px 22px !important;
        border-radius: 22px;
    }

    .recepcion-panel > div:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .recepcion-panel > div:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .recepcion-panel > div:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
    }

    .recepcion-panel > div:nth-child(3) {
        grid-column: 1;
        grid-row: 4;
        padding: 24px !important;
    }

    .recepcion-panel h3 {
        margin-bottom: 22px !important;
        font-size: 26px !important;
    }

    .recepcion-panel > div:nth-child(1) p {
        font-size: 20px !important;
    }

    .recepcion-panel ul {
        gap: 24px;
    }

    .recepcion-panel ul > li {
        padding-left: 40px !important;
        font-size: 18px !important;
    }

    .recepcion-panel ul > li::before {
        top: 2px;
        width: 25px;
        height: 25px;
    }

    .recepcion-panel > div:nth-child(3) p {
        font-size: 21px !important;
    }

    .dynamicform > .col.recepcion-panel img.responsive-img {
        max-width: 180px !important;
    }
}











/*********************
BLACK-BLOCK-UNIK
********************/

.black-block-unik{
  display: flex;
  flex-direction: row;       
  flex-wrap: nowrap;          
  justify-content: center;   
  align-items: center;   
  background-color: #000000 !important;
  border-radius: 20px; 
  padding: 24px 40px 24px 10px;   
  margin-top: 40px;
  color:  #fff;
}


.black-block-unik img {
    background-color: #fff;
    border-radius: 8px !important;
    min-height: 54px;
    min-width: 54px;
    gap: 24px;
}


/*********************
GREY-BLOCK-UNIK
********************/

.grey-block-unik{
  display: flex;
  flex-direction: row;       
  flex-wrap: nowrap;          
  justify-content: center;   
  align-items: center;   
  background-color: #d3d3d3!important;
  border-radius: 20px; 
  padding: 24px 40px 24px 10px;   
  margin-top: 40px;
  color:  #fff;
}


.grey-block-unik img {
    border-radius: 8px !important;
    min-height: 54px;
    min-width: 54px;
    gap: 24px;
}



/************************
BLUE-BANNER
***********************/

 .dynamicform:has(> .blue-banner) {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    min-height: 468px;
}

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

.blue-banner img {
   display:none;
    }
}

/***************************
BLACK-SQUARE
***************************/

.dynamicform:has(> .black-square){
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 12px auto;
}

.black-square {
  display:flex;
  flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   padding: 18px 58px!important;
  background-color: #1d1d1b;
  border-radius: 24px;
}

.black-square img{
  background-color: #fff;
  border-radius:  8px!important;
  min-height: 56px;
  min-width: 56px;
  padding: 8px;
}

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



.contain-black > div:nth-child(2) {
    background: #111;
    border-radius: 30px;
    padding: 30px;
    color: #fff;
}



/*===================================
FONDO GRIS CON BORDES REDONDEADOS
====================================*/

.row:has(> .dynamicform > .border-radius-top) {
    border-radius: 24px 24px 0 0;
    margin: 0 24px;
}

.row:has(> .dynamicform > .border-radius-center) {
    margin: 0 24px;
}

.row:has(> .dynamicform > .border-radius-bottom) {
    border-radius: 0 0 24px 24px;
    margin: 0 24px;
}




/*===========================
IMAGEN COMPLETA
=======================*/

/* Imagen de borde a borde */
.row:has(> .dynamicform > .imagen-pantalla-completa) {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Quitar límites y espacios interiores */
.dynamicform:has(> .imagen-pantalla-completa),
.dynamicform > .col.imagen-pantalla-completa,
.imagen-pantalla-completa > div,
.imagen-pantalla-completa > div > .row,
.imagen-pantalla-completa > div > .row > .col {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Ocultar columnas laterales vacías */
.dynamicform:has(> .imagen-pantalla-completa)
> .col:not(:has(*)) {
    display: none !important;
}

/* Imagen sin bordes ni desplazamientos */
.imagen-pantalla-completa img.responsive-img {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}




/* ====================================================
   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(-100px); /* <- 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);
  }
}



/*==========================================
BOX GREY (Contenedor Principal)
==========================================*/

.box-grey {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 0 !important;
  margin-top: 20px !important;
}

/* Forzamos a que los dos primeros elementos (texto y lista) ocupen el 100% arriba */
.box-grey > div:nth-child(1),
.box-grey > div:nth-child(2) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}


/*==========================================
TARJETA INFERIOR (Hijos 3 y 4 en paralelo)
==========================================*/

/* Estilos base comunes para los dos bloques de la tarjeta */

.box-grey > div:nth-child(3),
.box-grey > div:nth-child(4) {
  background-color: #000000 !important; 
  box-sizing: border-box !important;
  margin-top: 24px; 
  margin-bottom: 24px; 
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* HIJO 3: Caja Icono */
.box-grey > div:nth-child(3) {
  width: auto !important;
  min-width: auto !important;
  justify-content: center !important;
  padding: 32px 12px 32px 20px !important; 
  border-radius: 20px 0 0 20px !important; 
}

/* Ajustes de imagen dentro del Hijo 3 */
.box-grey > div:nth-child(3) .col .responsive-img,
.box-grey > div:nth-child(3) img,
.box-grey > div:nth-child(3) > * {
  width: auto !important;
  height: 48px !important;
  border-radius: 10px !important;
}

/* HIJO 4: Caja Texto */
.box-grey > div:nth-child(4) {
  flex: 1 1 0 !important; /* Absorbe el espacio restante sin romper la línea */
  width: auto !important;
  max-width: none !important;
  justify-content: flex-start !important;
  padding: 16px 24px 16px 8px !important;
  border-radius: 0 20px 20px 0 !important; 
  margin-right: 24px;
}

/* Tipografía dentro del Hijo 4 */
.box-grey > div:nth-child(4) *,
.box-grey > div:nth-child(4) p {
  margin: 0 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
}


/*==========================================
RESPONSIVE (Móviles y Pantallas Grandes)
==========================================*/

@media (max-width: 768px) {
  .row:has(> div > .box-grey) {
    padding: 0 16px 16px 16px !important;
  }

  .box-grey > div:nth-child(3) {
    padding: 12px 8px 12px 14px !important;
    border-radius: 16px 0 0 16px !important;
  }

  .box-grey > div:nth-child(3) .col .responsive-img,
  .box-grey > div:nth-child(3) img {
    height: 38px !important;
  }

  .box-grey > div:nth-child(4) {
    padding: 12px 16px 12px 4px !important;
    border-radius: 0 16px 16px 0 !important;
    margin-right: 0;
  }

  .box-grey > div:nth-child(4) p {
    font-size: 13px !important;
  }
}



/*=======================================
FAQS
========================================*/

.row:has(> div > .faqs) {
    overflow: hidden;
    display: block;
    background-color: #ffebd6;
    border-radius: 48px;
    max-width: 1440px;
    margin: 86px auto;
    padding-bottom: 24px;
}

.faqs > div{  
  background: linear-gradient(
    180deg,
    rgb(255, 197, 140) 0%,
    rgb(255, 207, 159) 50%,
    rgb(255, 217, 178) 100%
);
  border-radius: 30px !important;
  padding: 0 48px !important;
  margin-bottom:  20px;
}

.faqs > div:first-child{
  background: transparent;
}

.faqs h3{
  color: #bf7326;
}

.faqs p{
  color: #372425;
}

/*-----RESPONSIVE-------*/

@media only screen and (max-width: 767px) {
  .faqs > div {
    padding: 0 16px !important;
   }
}


.row:has(> div > .footer) {
   background-color: #1d1d1f;
}