/*RESET*/
@charset "utf-8";a{text-decoration:none}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}




/*GENERALES*/
body { margin:0px; background-color:#FFF; overflow-x: hidden; background-image: url(../img/fondo.jpg); background-repeat: repeat;}
p, b, a, i, u, h1, h2, h3, h4, h5, h6, ul ,li, input, textarea, select, span, label {font-family: 'Montserrat', sans-serif;}
b { font-weight:700}
.clear0 { clear:both; height:0px}
.clear10 { clear:both; height:10px}
.clear20 { clear:both; height:20px}
.clear30 { clear:both; height:30px}
.clear40 { clear:both; height:40px}
.clear50 { clear:both; height:50px}
::selection {color:#CCC;background:#444;}
::-moz-selection {color:#EEE;background:#444;}
*:focus { outline:none}


.opTodo { display: none}



header { width: 100%; height: 200px; background-color: #d6185e; position: relative;}
header .logo { width: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 4%}
header .frase { width: auto; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%;}
header .risa { width: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 5%}


.cont1 { padding: 70px 0px; text-align: center;}
.promo { font-weight: bold; color: #d6185e; font-size: 45px; width: 90%; margin: auto }


.txt1 { font-weight: 500; color: #444; font-size: 22px;   line-height: 30px; width: 90%; margin: auto;  margin-bottom: 18px; max-width: 900px;  }
.txt2 {     font-weight: bold;
    color: #d6185e;
    font-size: 26px;
    line-height: 31px;
    width: 90%;
    margin: auto;
    margin-bottom: 40px;}


.cont1 .in { width: 960px; height: auto; margin: auto; margin-top: 40px;}
.izq { width: 440px; height: auto; float: left; position: relative;}
.izq img { width: 100%; -webkit-box-shadow: 0px 0px 23px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow:    0px 0px 23px 0px rgba(0, 0, 0, 0.35);
box-shadow:         0px 0px 23px 0px rgba(0, 0, 0, 0.35);}
.der { width: 100%;    height: auto;    max-width: 600px;    margin: auto;}
.formulario { margin-top: 15px;}

.campo { width: 100%; padding-bottom: 4px; background: transparent; border: none; border-bottom: 1px solid #919191; margin-bottom: 30px; font-size: 17px; letter-spacing: -1px; font-weight: 300}
.mandale { width: 100%; height: auto; text-align: center; font-size: 20px; font-weight: 500; color: #FFF;  background-color: #d6185e; margin-top: 30px; padding: 10px 0px; border: none; -moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
.mandale:hover { background-color: #b31b52;}
.campo:focus { border-bottom: 1px solid #000}

.legal { width: 90%; margin: auto; margin-top: 15px; font-size: 9px; line-height: 12px; text-transform: uppercase; font-weight: 500; opacity: 0.7}


.elcheck { width: 15px; height: 15px; float: left; margin-left: 6px;}
label { font-size: 11px; float: left; margin: 3px; margin-left: 6px;}



.cont2 { width: 100%; height: auto; background-color: #FFF; margin-top: 40px; margin-bottom: 40px; padding: 60px 0px;
-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow:    0px 0px 50px 0px rgba(0, 0, 0, 0.25);
box-shadow:         0px 0px 50px 0px rgba(0, 0, 0, 0.25);}
.cont2 .in2 { width: 840px; margin: auto; position: relative}
.cont2 p { color: #444; font-size: 22px; line-height: 30px; width: 400px; margin-bottom: 20px; padding-top: 90px;}
.cont2 .in2 .foto { width: 300px; position: absolute; right: 0px; top: 0px;}


footer { width: 100%; height: auto; background-color: #231f20; padding: 40px 0px; margin-top: 130px;}
footer .in3 { width: 1100px; height: auto; margin: auto}
footer .in3 .izq3 { width: 140px; height: auto; float: left}
footer .in3 .izq3 img { width: auto; margin-right: 5px;  margin-top: 4px;
    -moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
footer .in3 .izq3 img:hover { opacity: 1}
footer .in3 .der3 { width: 800px; height: auto; float: right}
footer .in3 .der3 p { color: #fff; font-size: 10px; line-height: 16px; text-align: right; opacity: 0.6}
footer .in3 .der3 p span { font-weight: bold; font-size: 12px;}
footer .in3 .der3 p a { color: #FFF; text-decoration: underline;}






.login { width: 220px; margin: auto; margin-top: 60px; text-align: center;}
.login .logoAdmin { margin-bottom: 30px;}
.login .cu { width: auto; height: auto; padding-bottom: 20px;}
.login .cu p { margin-bottom: 7px; width: 100%;}
.login .cu .campoAdmin { border: 1px solid #CCC; width: 100%; padding: 6px 0px; text-align: center; font-size: 14px;}
.login .campoIngresar { width: 100%; border: none; background-color: #d6185e; color: #FFF; padding: 9px 0px; }



.headerInt { width: 100%; height: 100px; background-color: #FFF;}
.headerInt .logo { float: left; margin: 10px;}
.headerInt .botSalir { background-color: #d6185e; color: #FFF; padding: 9px 30px; float: right; margin-right: 20px; margin-top: 34px; }

.listahomeAdmin { text-align: center}
.listahomeAdmin li { display: inline-block; width: 200px; height: 200px; text-align: center; background-color: #fff; margin: 20px; margin-top: 80px; position: relative}
.listahomeAdmin li p { width: 100%; position: absolute; bottom: 15px; color: #333;}

.pi1 { background-image: url(../admin/promos.jpg)}
.pi2 { background-image: url(../admin/registros.jpg)}
.pi3 { background-image: url(../admin/newsletters.jpg)}






.contCadauno { width: 400px; margin: auto; margin-top: 60px;}
.contCadauno .titAdmin { font-size: 21px}
.contCadauno .cu { width: 100%; margin-bottom: 30px;}
.contCadauno .cu img { margin-bottom: 12px;}
.contCadauno .cu p { font-size: 17px; font-weight: bold; margin-bottom: 7px;}
.contCadauno .campoAdmin2 { width: 390px; padding: 5px;}
.contCadauno .mandaleAdmin { width: 140px; text-align: center; padding: 6px; color: #FFF; background-color: #d6185e; margin: 0px 5px; border: none }
.contCadauno .cancelaAdmin { width: 140px; text-align: center; padding: 6px; color: #111; background-color: #CCC; margin: 0px 5px; border: none }



.contCadauno2 { width: 400px; margin: auto; margin-top: 100px; text-align: center}
.contCadauno2 .titAdmin { font-size:17px; margin-top: 20px; margin-bottom: 30px; line-height: 21px;}
.contCadauno2 .cu { width: 100%; margin-bottom: 30px;}
.contCadauno2 .volver { width: 160px; text-align: center; padding: 8px; color: #FFF; background-color: #d6185e; margin: auto; }




.listaRegistros { width: 1200px; margin: auto; margin-top: 60px;}
.listaRegistros .titAdmin { font-size: 21px; margin-bottom: 20px;}
.listaRegistros .cu { width: 100%; height: auto; border-bottom: 1px solid #EEE; background-color: #FFF; padding: 6px; position: relative}
.listaRegistros .cu .cu2 { width: 20%; float: left}
.listaRegistros .cu .cu2 p { padding: 6px 0px; padding-left: 5px;     font-size: 12px;    font-weight: 400;color: #444;}
.listaRegistros .cu .valida {     position: absolute;    right: -29px;    top: 9px;    width: 20px;    height: 20px; overflow: hidden; background-image: url(../admin/check.jpg); background-position: top; cursor: pointer}
.listaRegistros .cu .valida:hover { background-position: bottom}
.listaRegistros .cu .revalida { display: none}


.listaRegistros .cuVal { width: 100%; height: auto; border-bottom: 1px solid #EEE; background-color: #EEE; padding: 6px; position: relative}
.listaRegistros .cuVal .cu2 { width: 20%; float: left}
.listaRegistros .cuVal .cu2 p { padding: 6px 0px; padding-left: 5px; font-size: 14px; font-weight: 600; color: #444; opacity: 0.3}
.listaRegistros .cuVal .valida { display: none}
.listaRegistros .cuVal .revalida {     position: absolute;    right: -29px;    top: 9px;    width: 20px;    height: 20px; overflow: hidden; background-image: url(../admin/check.jpg); background-position: bottom; cursor: pointer}
.listaRegistros .cuVal .revalida:hover { background-position: top}




.listaRegistros .cuT { width: 100%; height: auto; border-bottom: 1px solid #EEE; background-color: #d6185e; padding: 6px;}
.listaRegistros .cuT .cu2 { width: 20%; float: left}
.listaRegistros .cuT .cu2 p { padding: 6px 0px; padding-left: 5px; font-size: 16px; font-weight: 400; color: #FFF;}

.listaRegistros .botBorrar { width: 180px; text-align: center; padding: 9px; color: #FFF; background-color: #d6185e; margin-top: 15px; border: none; float: right }
.botBorrar2 { width: 180px; text-align: center; padding: 9px; color: #FFF; background-color: #d6185e; margin-top: 15px; border: none; float: left }

.error { font-size: 13px; line-height: 18px; color: red; font-weight: bold; margin-top: 12px; display: none}


.listaRegistros2 { width: 400px; margin: auto; margin-top: 60px;}
.listaRegistros2 .titAdmin { font-size: 21px; margin-bottom: 20px;}
.listaRegistros2 .cu { width: 100%; height: auto; border-bottom: 1px solid #EEE; background-color: #FFF; padding: 6px;}
.listaRegistros2 .cu .cu2 { width: 20%; float: left}
.listaRegistros2 .cu .cu2 p { padding: 6px 0px; padding-left: 5px; font-size: 14px; font-weight: 600; color: #444;}

.listaRegistros2 .cuT { width: 100%; height: auto; border-bottom: 1px solid #EEE; background-color: #d6185e; padding: 6px;}
.listaRegistros2 .cuT .cu2 { width: 20%; float: left}
.listaRegistros2 .cuT .cu2 p { padding: 6px 0px; padding-left: 5px; font-size: 16px; font-weight: 400; color: #FFF;}






.aloha { width: 100%; height: auto; text-align: center; background-color: #000;}
.aloha p { width: 90%; margin: auto; font-size: 11px; padding: 12px 0px; color: #FFF; opacity: 0.5}
.aloha p:hover { text-decoration: underline}




.label { font-size: 12px; width: 100%; margin-bottom: 4px; font-weight: bold; color: #505050; text-transform: uppercase; text-align: left; line-height: 14px;}
.label span { color: #d6185e; font-size: 10px;}





.lasPreguntas { width: 100%; display: flex; flex-direction: column; margin-bottom: 35px;}
.lasPreguntas p {text-align: left;    font-size: 20px;    font-weight: 600;    margin-bottom: 10px;}
.lasPreguntas .valoracion { width: 100%; display: flex; }
.lasPreguntas .valoracion input { width: 14px; height: 14px; cursor: pointer; }
.lasPreguntas .valoracion label { font-size: 18px;  cursor: pointer;}
.lasPreguntas .valoracion label img { height: 45px; margin-top: 3px;}
.lasPreguntas .valoracion .car { display: flex; flex-direction: column; align-items: center; margin-right: 12px;}
.lasPreguntas .valoracion .car p  {  text-align: center; font-size: 15px; margin-top: 6px;}


.textComms { width: 100%; box-sizing: border-box; padding: 12px; height: 120px; resize: none;}








@media screen and (max-width: 1200px) {
    footer .in3 { width: 960px; }
     
    .cont1 .in {  }
    
    header {    height: 170px;}
    header .logo {    width: 150px;    left: 3%;}
    header .risa {    width: 75px;    right: 4%;}
    header .frase {    width: 400px;}
    
}


@media screen and (max-width: 1000px) {
    footer .in3 { width: 780px; }
    footer .in3 .der3 {    width: 600px;}
    
    header {    height: 140px;}
    header .logo {    width: 120px;    left: 3%;}
    header .risa {    width: 55px;    right: 4%;}
    header .frase {    width: 375px;}
    
    .cont1 .in {    width: 780px;}
    .der {    width: 310px;}
    
    .cont2 .in2 {    width: 780px;}
    
    label {        width: 270px;        text-align: left;        line-height: 15px;    } 
   
}


@media screen and (max-width: 820px) {
    .cont1 .in {    width: 440px;}
    .der {    width: 440px;     margin-top: 30px;}
    
    .cont2 .in2 {    width: 440px; text-align: center}
    .cont2 p {    padding-top: 20px;}
    .cont2 .in2 .foto {    width: 300px;    position: relative;    right: inherit;    top: inherit;    margin: auto; margin-top: 30px;}
   
    footer .in3 { width: 90%}
    footer .in3 .der3 {    width: 100%; margin-top: 20px; }
    footer .in3 .der3 p { text-align: left}
    footer .in3 .izq3 {    width: 100%;}
    
    label {        width: 320px;     } 
    
}

@media screen and (max-width: 720px) {
    header {    height: 100px;}
    header .risa { display: none}
    header .frase {    width: 270px; left: inherit; top: 50%; transform: translateY(-50%); right: 20px;}
    header .logo {    width: 110px; left: 20px}
    
    .promo {    font-size: 35px;}
    
    
}


@media screen and (max-width: 500px) {
    .cont1 .in { width: 90%; margin: auto; margin-top: 30px;}
    .izq { width: 100%; height: auto; margin-bottom: 40px;}
    .der {    width: 90%;    margin: auto;    float: none;}
    
    .cont2 .in2 { width: 90%;}
    .cont2 p {    width: 100%;}
    .cont2 .in2 .foto {    width: 100%;        max-width: 319px;}
    
    .promo {    font-size: 30px;}
    
    header {    height: 84px;}
    header .frase {    width: 250px; right: 14px;}
    header .logo {    width: 90px;    left: 13px;}
    
    label {        width: 200px;     } 
    
    
}

@media screen and (max-width: 400px) {
    header {    height: 65px;}
    header .frase {    width: 200px; right: 13px;}
    header .logo {    width: 70px;    left: 13px;}  
    
}










/* Cabecera nueva */
header.cabecera { height: auto; background-color: #f891a6; line-height: 0; }
header.cabecera img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }

/* Caritas como tarjetas clickeables */
.lasPreguntas .valoracion { gap: 10px; }
.lasPreguntas .valoracion .car { flex: 1 1 0; margin-right: 0; position: relative; max-width: 120px; }
.lasPreguntas .valoracion .car input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.lasPreguntas .valoracion .car label {
    width: 100% !important; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14px 6px 10px; border: 2px solid #ead7dc; border-radius: 14px; background-color: #FFF;
    transition: border-color .15s, background-color .15s, transform .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.lasPreguntas .valoracion .car label img { height: 48px; margin-top: 0; transition: transform .15s; }
.lasPreguntas .valoracion .car label p { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: #666; }
.lasPreguntas .valoracion .car label:hover { border-color: #f790a5; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(247,144,165,.25); }
.lasPreguntas .valoracion .car input:focus-visible + label { outline: 3px solid #f790a5; outline-offset: 2px; }
.lasPreguntas .valoracion .car input:checked + label { border-color: #e2577a; background-color: #fde8ee; box-shadow: 0 4px 14px rgba(226,87,122,.3); }
.lasPreguntas .valoracion .car input:checked + label img { transform: scale(1.15); }
.lasPreguntas .valoracion .car input:checked + label p { color: #e2577a; }

@media screen and (max-width: 500px) {
    .lasPreguntas .valoracion { gap: 6px; }
    .lasPreguntas .valoracion .car label { padding: 10px 2px 8px; border-radius: 10px; }
    .lasPreguntas .valoracion .car label img { height: 38px; }
    .lasPreguntas .valoracion .car label p { font-size: 14px; margin-top: 6px; }
}