:root{
/* Fuentes */
--fuenteRecta: "Arial", sans-serif;
--fuenteSerifas: "Georgia", serif;

/*TONOS PSUKHE*/
--tono01: #12aac2; 
--tono02: #ff2348;
--tono02-1: #e00c33;
--tono03: #9f21a6;
--tono05: #61b075;
--tono06: #2f1c99; 

/*TEXTOS*/
--tonoGris01: #4c5354;
--tonoLila01: #80047b;

/*PASTLES*/
--tono04: #ededed;
--tonoPastel01: #b06eaf;
--tonoPastel02: #dbe8f8;
--tonoPastel03: #fcc0c0;
--tonoPastel04: #f7dcd2;
--tonoPastel05: #f5e9e4;

/* ESPECIALES */
--tonoViril: #f2c0ad; 
--tonoVirilOscuro: #97581d;
}

body{margin: 0px;padding: 0px;text-rendering: auto;}
main{ width: 94%; margin: 0 auto; }

/* CABEZOTE CABEZOTE CABEZOTE CABEZOTE CABEZOTE */
.listaMenu01{
    display: flex;
    margin-top: -5px;
    justify-content: center;
    gap: 18px;
    align-items: center;
    padding: 27px 0px 27px 0px;
}

.barraRedesSoc01, .barraRedesSoc01foot{
width: 100%;
height: auto;
background-color: #d3f1fa;
}

.itemBallon01, .itemBallon02, .itemBallon03{
width: 10px;
height: 10px;
border-radius: 30px;
display: inline-block;
}

.itemBallon01{ background-color: var(--tono01); }
.itemBallon02{ background-color: var(--tono02); }
.itemBallon03{ background-color: var(--tono03); }

ul.listaMenu01 a {  
color: var(--tonoGris01);
font-family: var(--fuenteRecta);
font-size: 0.92rem;
font-weight: bold;
}

.listaMenu01 { list-style-type: none; }

.barraLogo02{
width: 100%;
height: auto;
background-color: var(--tono04);
display: flex;
justify-content: center;
margin-block: -0.5rem;
}

img.logocabezote01 {width: 60%;padding: 15px;}

/* == == == CIERRE CABEZOTE == == == */

.tituloA01, .tituloA02, .tituloA03, .tituloA07, 
.tituloA01footer, 
.subTituloA00, 
.subTituloA01, 
.subTituloA02, 
.subTituloA03, 
.subTituloA01footer, 
.subTituloA02foot,
.txtfoot00, 
.txtfoot01, 
.txtfoot02{
/* FUENTE */
font-family: var(--fuenteSerifas);
color: var(--tonoLila01);
text-align: center;
font-weight: normal;
}

/* ITEM INICIO */
.itemInicio{
background-color: var(--tono03);
padding: 10px;
color: white;
border-radius: 9px;
}

.tituloA03 {font-weight: bold;text-align: left;}
.tituloA07{font-size: 1.4rem;}

.tituloA01, .tituloA02, .tituloA01footer {font-size: 2.6rem;line-height: 2.65rem;margin-bottom: 0px;}
.tituloA01, .tituloA02, .tituloA01footer{font-size: 2.6rem;line-height: 2.65rem;margin-bottom: 14px;}

.subTituloA01, .subTituloA01footer, .subTituloA02, .subTituloA03 {
    line-height: 1.85rem;
    width: 90%;
    margin: 0 auto;
}

.subTituloA01{
text-transform: uppercase;
margin-top: 10px;
}



.lineaEspacio00, .lineaEspacio01, .lineaEspacio02{
width: 55%;
height: 3px;
margin: 0 auto;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
}

.lineaEspacio00{background-color: var(--tono01);}
.lineaEspacio01{background-color: var(--tono02);}
.lineaEspacio02{background-color: var(--tono01);}

.fotohipno00, .icono00{border-radius: 10px;}
img.fotohipno00 {width: 100%;}

/*.icono00{width: 80%;margin: 0 auto;}*/

.piefoto-plantilla{
/* RECTA */
font-family: var(--fuenteRecta);
font-size: 0.83rem;
line-height: calc(0.83rem + 0.35rem);
color: var(--tonoGris01);
}

.txtoGrisCredito{color: var(--tonoGris01);}

strong{ font-weight: normal; }

.boton01, .boton02, .boton03, .boton04, .boton05, .boton06, .boton07{
width: 70%;
height: auto;
padding: 5px 10px 5px 10px;
margin: 0 auto;
color: white;
/* RECTA */
font-family: var(--fuenteRecta);
font-size: 1rem;
text-align: center;
text-transform: uppercase;
border-radius: 15px;
font-weight: 800;
margin-top: 20px;
}



.boton04{width: 90%;}

.boton01{ background-color: var(--tonoPastel01);}
.boton02{ background-color: var(--tono05); }
.boton03{ background-color: var(--tono06);margin-top: 15px;}

/*PROGRAMA MENTE VIRIL*/
.boton04{ background-color: white;color: var(--tonoVirilOscuro);border: 2px solid var(--tonoVirilOscuro);padding: 0px;margin: 0px;font-size: 0.85rem;}

.boton05{ 
width: 84%;
background-color: var(--tonoPastel04);
color: var(--tonoVirilOscuro);
border:2px solid var(--tonoVirilOscuro);
}

.boton06{ background-color: var(--tono02); margin-top: 0px;}
.boton07{ background-color: var(--tono05);}

a.vinculoBotones00, a.vinculoBotones01{text-decoration-line: none;}

/* HOVER */
a.vinculoBotones00:hover, 
a.vinculoBotones01:hover, 
a.vinculoBotones02:hover, 
a.vinculoBotones03:hover,
a.vinculoBotones00:hover{
background-color: #f9dede;
border-radius: 20px;
}

.irPaginaPrincipal00:hover{
background-color: silver;
}

/* === */

.cifraB00, .cifraB01, .cifraB02 {
/* SERIFA */
font-family: var(--fuenteSerifas);
    font-size: 3.3rem;
    color: var(--tonoLila01);
    margin: 0px;
    padding: 0px;
}

/* STRONG BOLD */
.aplicarBold{font-weight: bold;}

.subtleB00, 
.subtleB01, 
.subtleB02, 
.tituloRecuadrosVinculos00,
.tituloRecuadrosVinculos01,
.subtituloRecuadrosVinculos00,
.subtituloRecuadrosVinculos01{
/* RECTA */
font-family: var(--fuenteRecta);
color: var(--tonoGris01);
font-size: 0.85rem;
line-height: 1.25rem;
}

.subtleB00, .subtleB01, .subtleB02{
padding: 10px 20px 0px 20px;
}

/* CIFRAS */

.tituloRecuadrosVinculos01, 
.subtituloRecuadrosVinculos01{
color: white;
margin-top: 11px;
width: 95%;
}

.contenedorBB {
    /* grid-template-rows: 54.9px; */
    display: grid;
    grid-template-areas:
        'cifraB00 cifraB01 cifraB02'
        'subtleB00 subtleB01 subtleB02';
    grid-template-rows: 0px;
    grid-template-rows: 44.7px;
    text-align: center;
    margin-top: 30px;
    align-items: start;
    justify-content: center;
}

/* Nombres de area */
.cifraB00{  grid-area: cifraB00; }
.subtleB00{ grid-area: subtleB00; }

.cifraB01, .subtleB01, .cifraB02, .subtleB02{
border-left: 2px solid red; 
}

.cifraB01{  grid-area: cifraB01; }
.subtleB01{ grid-area: subtleB01; }

.cifraB02{  grid-area: cifraB02; }
.subtleB02{ grid-area: subtleB02; }

/* contenedorCC */
.contenedorCC{
display: grid;
grid-template-areas:
'fotoAutor01'
'articulo00';
grid-template-columns: auto auto;
grid-template-rows: auto;
text-align: center;
margin-top: 30px;
/* Gradient */
    background: linear-gradient(0deg, var(--tono04) 0%, var(--tono04) 87%, var(--tono04) 84%, white 97%);
border-left: 3px solid var(--tono02);
border-radius: 0px 0px 30px 0px;
}

.fotoAutor01{  
    grid-area: fotoAutor01;
    margin: 0 auto;
    height: 370px;
    width: 277px;
    object-fit: cover;
    object-position: 80% -20%;
}

.articulo00{ grid-area: articulo00;  }

.subTituloA04, .autorCredito00, .autortxt00{
width: 84%;
text-align: left;
margin-left: 30px;
}

/* Tu cambio positivo personal */

.subTituloA04, .subTituloA05{
/* SERIFA */
font-family: var(--fuenteSerifas);
font-weight: normal;
margin-top: 20px;
margin-bottom: 15px;
letter-spacing: -1.4px;
}

.subTituloA04 {
    width: 88%;
    font-size: 2.6rem;
    color: var(--tono02);
    line-height: 2.4rem;
}

.subTituloA05 {
    width: 100%;
    font-size: 2.0rem;
    line-height: 2.1rem;
    color: var(--tono06);
    text-align: center;
    text-transform: uppercase;
}

.autorCredito00, .autorCredito01{
/* RECTA */
font-family: var(--fuenteRecta);
color: black;
font-weight: 800;
font-size: 0.85rem;
line-height: 1.35rem;
}

.autorCredito01 {
color: var(--tonoLila01);
border-left: 4px solid var(--tonoLila01);
padding-left: 10px;
margin-bottom: 30px;
}

.autortxt00, .articuloTextoPlantilla00, .irPaginaPrincipal00, .articuloCitas00 {
    font-size: 1rem;
    /* RECTA */
    font-family: var(--fuenteRecta);
    color: black;
    font-weight: normal;
    line-height: 1.68rem;
    hyphens: auto;
}

.articuloCitas00{
font-size: 0.87rem;
text-indent: 1rem;
color: var(--tonoGris01);
line-height: 1.45rem;
}

.articuloCitas00Final{margin-bottom: 35px}

.irPaginaPrincipal00 {
    background-color: var(--tono04);
    color: var(--tonoGris01);
    padding: 10px;
    border-radius: 10px;
    width: 70%;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
}

figure.contenedorImagenFigure00 {margin: 0 auto;}

/* CONTENEDOR TERAPIAS Y PROGRAMAS */
.seccion00{
display: grid;
grid-template-areas:
        'contenedorTitulosProgramas'
        'programasTerap00'
        'programasTerap01'
        'programasTerap02'
        'programasTerap03';
 grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 0px;
}

.contenedorTitulosProgramas{grid-area: contenedorTitulosProgramas;}
.programasTerap00{grid-area: programasTerap00;}
.programasTerap01{grid-area: programasTerap01;}
.programasTerap02{grid-area: programasTerap02;}
.programasTerap03{grid-area: programasTerap03;}

.programasTerap00, .programasTerap01, .programasTerap02, .programasTerap03{    
background-color: var(--tonoPastel02);
    border-radius: 20px;
    display: grid;
    grid-template-areas:
        'fotoPrograma00 programaTitulo00'
        'fotoPrograma00 programaTxt00';
 /*   grid-template-columns: 25% 71%;
    grid-template-rows: 40px auto;*/
    gap: 10px;
    align-items: start;
    margin: 20px 0px 0px 0px;
}

.programasTerap01{grid-template-areas:'fotoPrograma01 programaTitulo01''fotoPrograma01 programaTxt01';}
.programasTerap02{grid-template-areas:'fotoPrograma02 programaTitulo02''fotoPrograma02 programaTxt02';}
.programasTerap03{grid-template-areas:'fotoPrograma03 programaTitulo03''fotoPrograma03 programaTxt03';}

.fotoPrograma00{ grid-area: fotoPrograma00; }
.fotoPrograma01{ grid-area: fotoPrograma01; }
.fotoPrograma02{ grid-area: fotoPrograma02; }
.fotoPrograma03{ grid-area: fotoPrograma03; }

.programaTitulo00{ grid-area: programaTitulo00; }
.programaTitulo01{ grid-area: programaTitulo01; }
.programaTitulo02{ grid-area: programaTitulo02; }
.programaTitulo03{ grid-area: programaTitulo03; }

.programaTxt00{ grid-area: programaTxt00; }
.programaTxt01{ grid-area: programaTxt01; }
.programaTxt02{ grid-area: programaTxt02; }
.programaTxt03{ grid-area: programaTxt03; }

.programaTitulo00, .programaTitulo01, .programaTitulo02, .programaTitulo03,
.programaTxt00, .programaTxt01, .programaTxt02, .programaTxt03, .programaTxt04{
width: 90%;}

img.icono00.iconoRecuadroRojo00 {
width: auto;
padding: 10px;
border-radius: 20px;
}

.fotoPrograma00, 
.fotoPrograma01, 
.fotoPrograma02, 
.fotoPrograma03, 
.fotoPrograma04{ width: 90px;height: 100%;object-fit: cover;object-position: 45% 80%;background-color: white; border-radius: 10px 0px 0px 10px;}

.programaTitulo00, .programaTitulo01, .programaTitulo02, .programaTitulo03 {
    /* RECTA */
font-family: var(--fuenteRecta);
    font-size: 0.95rem;
    color: black;
    hyphens: auto;
    line-height: 18px;
}

.programasTitulotxt00, .programasSubtitulotxt00, 
.programasTitulotxt01, .programasSubtitulotxt01, 
.programasTitulotxt02, .programasSubtitulotxt02, 
.programasTitulotxt03, .programasSubtitulotxt03, .programasTitulotxt04{ 
font-size: 0.95rem;
    line-height: 0.35rem;
    /* RECTA */
font-family: var(--fuenteRecta);
    color: black;
    hyphens: auto;
}

.programasTitulotxt00, .programasTitulotxt01, .programasTitulotxt02, .programasTitulotxt03, .programasTitulotxt04{ font-weight: bold;text-align: center;}

.programasSubtitulotxt00, .programasSubtitulotxt01, .programasSubtitulotxt02, .programasSubtitulotxt03{ text-align: center;}

.programaTxt00, .programaTxt01, .programaTxt02, .programaTxt03, .programatxt04 {
    /* RECTA */
font-family: var(--fuenteRecta);
    font-size: 1rem;
    line-height: 1.3rem;
    padding-top: 2px;
    line-height: 1.52rem;
}

.programasTerap04, .seccionRecuadro04{border-radius: 15px;}

.programasTerap04{
    background-color: var(--tonoViril);
    margin-top: 40px;
    width: 100%;
    height: auto;
    padding-top: 10px;
}

.fotoPrograma04{border-radius: 10px;margin: 8px;}
.programasTitulotxt04{font-size: 1.27rem;color: var(--tonoVirilOscuro);}

/* Aqui se actualiza tamaño dado ya antes */
.seccionRecuadro04{
display: grid;
grid-template-areas:
'fotoPrograma04 programatxt04'
'fotoPrograma04 vinculoBotones01';
grid-template-columns: auto auto;
grid-template-rows: auto auto;
gap: 0px 0px;
width: 97.2%;
height: 37vh;
margin: 0 auto;
background-color: var(--tonoPastel05);
align-content: center;
align-items: center;
}

.seccionTestimonios00, .subTituloA06{width: 90%;margin: 0;}

/* Nombre de area */
section.seccionPreguntasFrecuentes00 {margin-top: 32px;}
.fotoPrograma04{ grid-area: fotoPrograma04; }
.programatxt04{ grid-area: programatxt04; width: 90%; }
.vinculoBotones01{ grid-area: vinculoBotones01; }

.subTituloA06 {
    /* SERIFA */
font-family: var(--fuenteSerifas);
    font-size: 2.3rem;
    text-align: center;
    font-weight: normal;
    line-height: 39.6px;
    /* margin-top: 25px; */
    /* margin: 25px 0% 0px 5%; */
    margin: 0 auto;
}

.seccionTestimonios00{
    width: 100%;
    height: auto;
    /* margin: auto; */
    margin-top: 30px;
}

iframe {width: 100%;}

.pesPreguntas00{
padding: 20px;
}

.pesPreguntas00{
cursor: pointer;
/* RECTA */
font-family: var(--fuenteRecta);
font-size: 1rem;
font-weight: bold;
color: white;
background-color: #0096C9;
border-radius: 8px;
height: 20px;

/* 
- display:...
- Al indicarle que sea solo inline, no se mostraba en algunos navegadores 
- Al eliminarlo, se sobreponía contenido superior
- Al indicarle que sea inline-block, 
se muestra correctamente (empuja hacia abajo) */
display: inline-block;
width: 90%;
}

.pesTema00{font-size: 1.2rem;}

.pesRespuesta00{
font-weight: normal;
margin:14px;
}

.contenedorA01footer{

}

.contentPreguntasRespuestas00{
margin-top: 20px;
background-color: white;
border-radius: 10px;
color: black;
width: 100%;
font-size: 1rem;
line-height: 1.41rem;
}

.preguntColor{
background-color: var(--tonoPastel02);
padding: 1px 1px 1px 8px;
}

.primeraPregunta{margin-top: 1.8rem;}


/* FOOT FOOT FOOT FOOT */
footer{margin-top: 40px;}

.listaMenu01foot{
display: flex;
margin-top: -5px;
justify-content: center;
gap: 19px;
align-items: center;
padding: 27px 0px 27px 0px;
}

.itemBallon01foot, .itemBallon02foot, .itemBallon03foot{
width: 10px;
height: 10px;
border-radius: 30px;
display: inline-block;
}

.itemBallon01foot{ background-color: var(--tono01); }
.itemBallon02foot{ background-color: var(--tono02); }
.itemBallon03foot{ background-color: var(--tono03); }

ul.listaMenu01foot a {  
color: var(--tonoGris01);
/* RECTA */
font-family: var(--fuenteRecta);
font-size: 0.9rem;
}

.listaMenu01foot { list-style-type: none; }

.barraLogo02foot{
width: 100%;
height: auto;
background-color: var(--tono04);
display: flex;
justify-content: center;
margin-block: -0.5rem;
}

img.logocabezote01foot {width: 60%;padding: 15px;}

/* == == == CIERRE FOOT == == == */

/* CENTRO DE HIPNOSIS */
.tituloA01footer{ grid-area: tituloA01footer; }
/* Guayaquil-Ecuador */
.subTituloA01footer{ grid-area: subTituloA01footer; }
/* botonesFooter */
.botonesFooter{ grid-area: botonesFooter; }
/* Toma el control d */
.subTituloA02foot{ grid-area: subTituloA02foot; }
/* Teléfono: +593 983  */
.txtfoot00{ grid-area: txtfoot00; }
/* info@ps */
.linkFoot00{ grid-area: linkFoot00; }

.subTituloA02foot, .txtfoot00, .txtfoot02 {
margin-top: 20px;
width: 85%;
margin: auto;
padding-top: 20px;
}

.txtfoot02 {
    font-size: 0.8rem;
    font-weight: bold;
    padding-bottom: 1rem;
    line-height: 1.35;
}

.subTituloA02foot {
    font-size: 1.7rem;
    line-height: 1.6rem;
}

.txtfoot00 {font-size: 1.3rem;}

.txtfoot00{font-size: 1.3rem;line-height: 1.85rem;}
.txtfoot01{font-size: 1.6rem;}
.linkFoot00{text-decoration-color: var(--tonoLila01);}

.seccionRecursos00{
display: grid;
grid-template-areas:
    'tituloA07 tituloA07'
    'seccionRecuadroAA seccionRecuadroAA'
    'seccionRecuadroAA seccionRecuadroAA';
grid-template-columns: auto auto;
grid-template-rows: auto auto;
gap: 14px 10px;
}

.recuadrosVinculos00{ grid-area: seccionRecuadroAA;}

.recuadrosVinculos00, 
.recuadrosVinculos01{
display: grid;
grid-template-areas:
    'icono00 tituloRecuadrosVinculos00'
    'icono00 subtituloRecuadrosVinculos00';
grid-template-columns: auto auto;
grid-template-rows: auto auto;
/* alto ancho */
gap: 0px 0px;
border: 1.65px solid red;
border-radius: 16px;
padding: 1px;
align-items: center;
}

.recuadrosVinculos01{
background-color: var(--tono02-1);
color: white;
}

/* Nombre de area */
.icono00{grid-area: icono00;width: 90%;}

.tituloRecuadrosVinculos00{
    grid-area: tituloRecuadrosVinculos00;
    grid-area: tituloRecuadrosVinculos00;
    /* height: 0px; */
    /* padding: 0px; */
    margin-top: 14px;
    margin-bottom: -10px;
    /* padding-bottom: 10px; */
    /* width: 95%; */
    padding-right: 5px;
 }

.subtituloRecuadrosVinculos00{
    grid-area: subtituloRecuadrosVinculos00;
    height: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
 }

.tituloA07{
grid-area: tituloA07;
color:var(--tono02);
margin-bottom: 0px;
}

.seccionRecuadroAA:hover{background-color: var(--tonoPastel03);}
.lineaFootblanca{background-color: white;}