/* styles.css */

/* Font */
@font-face { font-family: 'Roboto'; src: url('font/Roboto-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; }
html { width: 100%; height: 100%; scroll-behavior: smooth; }

/* structure */
body { width: 100%; height: 100%; display: flex; flex-direction: column; font-family: 'Roboto', sans-serif; font-size: 1rem; }
.pagina { width: 100%; }
.separador { width: 80%; height: 1px; background-color: #fff; margin:40px auto; }
.capa-ocultacion { position: fixed; top:0; left:0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index:999; }
.invisible { display: none; }
.visibleBlock { display: block; }
.visibleFlex { display: flex; }
.visibleIBlock { display: inline-block; }
.capa-info {  position:absolute;  top:10%; left: 50%; transform: translateX(-50%);  max-width: 1100px; width: 80%;  height: auto; padding:20px; background-color: #fff;  border-radius: 10px;  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); flex-direction: column;  justify-content: center; align-items: center; z-index: 1000; }
.capa-info-content { width: 100%; padding: 40px; }
.capa-info-content > h2 { color: #61663C; margin-bottom: 30px; }
.capa-info-content > h3 { margin-bottom: 20px; }
.capa-info-content > h4 { margin-bottom: 20px; }
.capa-info-content > p { margin-bottom: 30px; text-align: justify; }
.capa-info-content > p > a { color: #61663C; }
.capa-info-content table { border:1px solid #666; margin-bottom: 20px; }
.capa-info-content table tr td { padding:10px; background-color: #fff; }
.capa-info-content table tr th { padding:10px; background-color: #ddd; }
.capa-info-close { position: sticky; width: 100%; top:5px;  left:0; z-index: 1001; background-color: transparent; text-align: right; }
.capa-info-close > span { display: inline-block; border: 1px solid #ccc; padding: 10px 10px 8px 10px; background-color: #fff; border-radius: 5px; }
.capa-info-close > span > img { cursor: pointer; background-color: #fff; width: 24px; height: 24px; padding: 0; margin: 0; border: 0; }
#msg-form { display:none; padding: 20px; color: #fff; font-size: 1.2em; }
.global-link { color: #fff; }
.underline { text-decoration: underline; }

/* header */
header { display: flex; flex-direction: row; width: 100%; background-color: #61663C; }
header > div:first-child > img { width: auto; max-height: 100px; padding:10px; }
header > div:nth-child(2) { flex-grow: 1; display: flex; align-content: center; align-items: center; justify-content: start; }
header > div:nth-child(2) > h1 { color: #fff; font-weight: 800; font-style: italic; font-size: 1.8em; font-family: Georgia, 'Times New Roman', Times, serif; }
header > div:last-child { flex-grow: 1; display: flex; flex-direction: column; }
header > div:last-child > div:first-child { display: flex; flex-direction: row; flex-grow: 1; align-items: center; justify-content: end; gap: 10px; padding:10px 0px 10px 10px; }
header > div:last-child > div:first-child > span { display: none; color: #fff; font-weight: normal; font-size: 1.6em; }
header > div:last-child > div:last-child { display: flex; flex-direction: row; flex-grow: 1; align-items: center; justify-content: end; gap:10px; padding:10px; }
header > div:last-child > div:last-child > a { background-color: #D6D7CB; padding:5px; color: #61663C; font-weight: bold; border-radius: 50%; }
header > div:last-child > div:first-child > a:nth-child(2) { margin-right: 10px; }
header > div:last-child > div:first-child > a > img { width: 24px; height:24px; }

/* banners */
.banner-container { display: block; width: 100%; min-height: 200px; height: 200px; background-image: url('../img/banners/6.jpg'); background-size: cover; background-position: 40% 60%; }
/*.banner-container { animation: bannerAnim 15s ease-in-out infinite alternate; }*/
.banner2-container { display: none; width: 100%; min-height: 300px; height: 300px; background-image: url('../img/banners/3.jpg'); background-size: cover; background-position: 40% 30%; }   
.banner2-container { animation: bannerAnim 15s ease-in-out infinite alternate; }
@keyframes bannerAnim {
    0% { background-position: 40% 30%; }
    100% { background-position: 40% 50%; }
}

 /* main */
.nosotros-container { background-color: #ddd; padding:20px; text-align: justify; }
.nosotros-container > p { margin-bottom: 20px; }

/* servicios */
.servicios-container { background-color: #fefefe; padding:20px; }
.servicios-container > h2 { color: #61663C; margin-bottom: 20px; }
.servicios-container > div > div { display: flex; align-items:start; gap: 20px; padding: 15px; border-radius: 8px; }
.servicios-container img { width: 32px; height: auto; }
.servicios-container .servicio-texto { display: flex; flex-direction: column; }
.servicios-container > div > div > div > h3 { text-align: left; }
.servicios-container > div > div > div > p { text-align: justify; }

/* contacto container */
.modulo2-container { margin-bottom: 20px; }

/* cookies */
.cookies-botones { display: flex; flex-direction: column; width: 100%; gap:20px; margin-bottom: 40px; }
.cookies-botones > div:first-child { text-align: center; flex-grow: 1; }
.cookies-botones > div:nth-child(2) { text-align: center; flex-grow: 1; }
.cookies-botones > div:last-child { text-align: center; flex-grow: 1; }
.cookie-link { display: inline-block; background-color: #61663C; color: white; text-decoration: none; font-size: 16px; font-weight: bold; padding: 10px 20px; border-radius: 5px; transition: background-color 0.3s ease; }
.cookie-link:hover { background-color: #1f704b; }
.cookieconf-container { display: flex; flex-direction: column; gap: 30px;}
.cookieconf-titulo { color: #61663C; margin-bottom: 30px; }
.cookieconf-contenido { display: flex; flex-direction: column; }
.cookieconf-contenido-menu { display: flex; flex-direction: column; }
.cookieconf-contenido-menu-item { border: 1px solid #999; padding:10px; cursor: pointer; }
.cookieconf-contenido-menu-item:hover { background-color: #B7E3CF; }
.cookieconf-contenido-menu-text { border: 1px solid #999; padding:20px 10px; background-color: #ddd; }
.cookieconf-contenido-menu-text > p { margin-bottom: 20px; }
.cookieconf-botones { display:flex; flex-direction:column; gap: 10px; }
.cookieconf-botones > div > a { width: 100%; text-align: center; font-weight: normal; }
#titprivacidad { background-color: #61663C; color: #fff; }
#txtprivacidad { padding:30px 20px; }
#txtnecesarias { display: none; padding:30px 20px; }
#txtnecesarias > p:first-child { margin: 10px 0px 20px 0px; }
#txtanalisis { display: none; padding:30px 20px; }
#txtanalisis > p:first-child { margin: 10px 0px 20px 0px; }
#txtpublicidad { display: none; padding:30px 20px; }
#txtpublicidad > p:first-child { margin: 10px 0px 20px 0px; }
#txt2privacidad { display: none;}
#txt2necesarias { display: none; }
#txt2analisis { display: none; }
#txt2publicidad { display: none; }

/* Formulario */
.contacto-container { background-color: #61663C; padding: 40px; }
.contacto-container > h2 { color: #fff; margin-bottom: 20px; }
label { font-weight: bold; color: #fff; display: block; margin-top: 10px; }
input  { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; font-size: 1rem; margin:10px 0px; }
textarea { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; font-size: 1rem; margin:10px 0px; }
textarea { resize: none; height: 100px; font-family: 'Roboto'; }
.btn-submit { width: 100%; background: #dbe0b6; color: #61663C; font-weight: bold; padding: 10px; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; margin-top: 15px; }
.btn-submit:hover { background: #2a2b21; color: #fff; }
.checkbox-container { display: flex; align-items: center; margin: 10px 0px 30px 0px; }
.checkbox-container input { margin-right: 10px; flex-shrink: 0; width: auto; }
.checkbox-container label { font-weight: normal; }
#smsvalidation { display: none; }
#smsvalidationlabel { display:none; }
input#smsvalidation { width: 100px; }
label#smsvalidationlabel { font-weight: normal; }


/* footer */
footer { width: 100%; background-color: #aaa; color: #fff; text-align: center; padding:20px; display: flex; flex-direction: column; }
footer > div:first-child { margin-top: 20px; }
footer > div:first-child > p { margin-bottom: 20px; }
footer > div:nth-child(3) { display: flex; justify-content: center; align-items: center; }
footer > div:last-child { display: flex; justify-content: center; align-items: center; }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; gap:20px;  flex-direction: column; margin-bottom: 40px;  }
footer ul li a { color: #fff;  text-decoration: none; }
footer ul li a:hover { text-decoration: underline; }


.inputanalisis { display: inline; margin: 0px; padding: 0px; width: auto; } 

/* Tablets (mínimo 768px) */
@media (min-width: 768px) {

    /* header */
    header > div:nth-child(2) { display: flex; }
    header > div:nth-child(2) > h1 { font-size: 3em; }
    header > div:last-child { flex-direction: column; }
    header > div:first-child > img { width: auto; max-height: 150px; padding:10px; }
    header > div:last-child > div:first-child { padding:10px; align-items: end; }
    header > div:last-child > div:first-child > span { display: inline; }
    header > div:last-child > div:first-child > a:nth-child(2) { margin-right: 20px; }

    /* banners */
    .banner-container { min-height: 400px; height: 400px; }   
    .banner2-container { min-height:auto; height: auto; flex: 1; display: flex; }   
    .contacto-container { flex: 1; }
    
    /* structure */
    .pagina { max-width: 1200px; margin: 0px auto; }
    .nosotros-container { padding:50px; font-size: 1.5em; }    

    /* contacto  */
    .modulo2-container { display: flex; flex-direction: row; justify-content: stretch; gap:20px; }

    /* servicio */
    .servicios-container > div { display: flex; flex-direction: row; justify-content:space-between; gap:50px; flex-wrap: wrap; }
    .servicios-container > div > div { flex: 1 1 300px; max-width: 400px; text-align: center;}
    .servicios-container > div > div:nth-child(1) { order:1; }
    .servicios-container > div > div:nth-child(2) { order:4; }
    .servicios-container > div > div:nth-child(3) { order:6; }
    .servicios-container > div > div:nth-child(4) { order:5; }
    .servicios-container > div > div:nth-child(5) { order:2; }
    .servicios-container > div > div:nth-child(6) { order:3; }
    
    /* footer */
    footer { flex-direction: row; gap: 20px; justify-content: space-around; }
    footer ul { margin-bottom: 0; }
    footer > div:first-child, footer > div:last-child { margin-top: 0; align-content: center; }
    footer > div > .separador { width:1px; height: 100%; margin:0; align-content: center; }

}

/* Escritorio (mínimo 1024px) */
@media (min-width: 950px) { 
    /* cookies */
    .cookieconf-botones { flex-direction:row; }
    .cookieconf-botones > div { flex-grow:1; text-align: center; }
    .cookie-link { display: inline; }    
}