/*
    $Id$

    Diseminado Comunicación. Dpto. Desarrollo Web
    https://dscomunicacion.es

    Copyright (c) 2025 David Carlos Soler Domínguez.

    dlys v5.0

    ../activos/css/estilos.css
*/
@font-face{font-family: 'sun';src: url('../fuentes/sun/Sun.otf');src: local('sun'), url('../fuentes/sun/Sun.otf') format('opentype');font-weight: normal;font-style: normal;font-variant: normal;font-display: swap;}
@font-face{font-family: 'kenyan';src: url('../fuentes/kenyan.ttf');src: local('kenyan'), url('../fuentes/kenyan.ttf') format('truetype');font-weight: normal;font-style: normal;font-variant: normal;font-display: swap;}
@font-face{font-family: 'Pacifico';src: url('../fuentes/Pacifico.ttf');src: local('kenyan'), url('../fuentes/Pacifico.ttf') format('truetype');font-weight: normal;font-style: normal;font-variant: normal;font-display: swap;}
@font-face{font-family: 'social';src: url('../fuentes/social.otf');src: local('social'), url('../fuentes/social.otf') format('opentype');font-weight: normal;font-style: normal;font-variant: normal;font-display: swap;}

.blog h2{font-family: "sun";}

/*** CABECERA ***/
header{display: block; width: 100%;position: fixed;background-color: #4a4a4a;border-bottom: solid;border-bottom-width: 6px;border-color: rgba(0, 0, 0, 0.5);z-index: 3;margin: 0%;padding: 0%;}
header a{text-decoration: none; color: #FF66C4;}
header a:hover{text-decoration: none;}
.linea-corporativa{grid-column: 1 / 13; grid-row: 1; background: linear-gradient(#FF5FAF, transparent); width: 100%;}
.contenedor-logo{grid-column: 1 / 8; grid-row: 2; margin-top: 0; cursor: pointer; z-index: 1;}
.contenedor-logo a{display: flex; align-items: center; justify-content: flex-start; text-decoration: none; width: auto;}
.logo{display: block;}
.logo figure{display: block; float: none; margin: 0; padding: 0;}
.n_empresa{margin-left: 10px;}
.n_empresa p{color: #FFF; font-family: Arial, Helvetica, sans-serif; font-weight: 800; padding-top: 0; text-align: center; margin: 0; line-height: 1.1;}
.linea-frase{grid-column: 1 / 13; grid-row: 2;}
.linea-frase p{font-size: 2em; color: #fff; font-weight: 100; text-align: center; font-family: "sun";}
.linea-eslogan{grid-column: 1 / 13; grid-row: 3; margin-bottom: 0.2em;}
.linea-eslogan p{font-family: 'kenyan'; text-align: center; font-weight: 100; color: rgb(255,255,255);}

/*** MENÚ ***/
.caja-menu{grid-row: 2;}
.menu{color: #fff; text-align: center; cursor: pointer; background: linear-gradient(#FF5FAF, transparent); border-radius: 5px; padding: 5px;}
.boton-menu{padding: 0;display: block;background-position: right top;position: relative;}
.boton-menu p{font-family: "roboto-b";color: #FFF;text-align: center;}
.boton-menu span{display: block; width: 80%; height: 5px; background-color: rgb(255,255,255); margin-top: 4px; margin-left: 10%;}
label{cursor: pointer;}
#palanca-menu{display: none; float: right;}
#menu-oculto{display: none; text-align: left; text-decoration: none; list-style: none; padding: 0 10px; width: 100%; float: left; position: absolute; z-index: 100;margin-top: 0px;}
#menu-oculto li a{display: block; color: #FFF; font-family: 'roboto-r';text-decoration: none; background: rgb(0, 0, 0);padding: 5px;}
#menu-oculto li a:hover{background-color: rgb(100, 100, 100); color: #FFF;} #menu-oculto > li > ul > li a{text-decoration: none; background: rgb(50, 50, 50);padding-left: 25px;}
#palanca-menu:checked + #menu-oculto{display: block; width: 80%;}
nav hr{color: #CCC;width: 100%;}

/*********************/
/****** CUERPO *******/
/*********************/

/*** MAIN ***/
main{display: block;width: 100%;height: 100vh;position: relative;text-align: center;background-repeat: no-repeat;background-position: center center;background-size: cover;object-fit: cover;}
main h1{color: #FFF;text-align: center;padding: 5vh 3vw 0 0;font-family: 'Open Sans';font-weight: 800;margin: 0 0.3em;text-shadow: 2px 2px 2px black;}
main h2{font-size: 3em;padding-top: 10px;}
.main-1{grid-column: 1 / 13;grid-row: 1; width: 100%;}
.main-2{grid-column: 1 / 13;grid-row: 2; width: 100%;}
.main-3{grid-column: 1 / 13;grid-row: 3; width: 100%;}

/*** CUERPO ***/
section, article{display: block;}
article p{margin: 10px 0;}
.art-1{grid-column: 1 / 13; grid-row: 1;}
.art-2{grid-column: 1 / 13; grid-row: 2;}
.art-2 > ul > li{line-height: 0;margin: -0.5em;padding: 0;}
.art-2 > hr{margin-top: 1em; color: #FF66C4;}
.art-3{grid-column: 1 / 13; grid-row: 3;text-align: center;border: 1px solid #ff66c4; margin: 0.2em; border-radius: 10px; padding: 0.5em;}
.art-interno{text-align: center;margin: 0.2em;padding: 10px;}
.destaca{background-color: #000000;border-radius: 15px;}
.destaca h2, .destaca h3, .destaca h4, .destaca p{color: #fefefe;}
.destaca > .art-2 > p{padding: 20px;}
.encabezado h2{font-size: 6vw;color: #4a4a4a;}
.servicios h3{text-align: left;}
.servicios .art-3{border: 0;}
.imagen-izqu{display: inline;height: auto;float: left;margin-top: 0;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
.imagen-derc{display: inline;height: auto; float: right;margin-top: 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.imagen-blog{display: inline;width: 100%; height: auto;float: left;margin-top: 0;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
.comparte{font-family: "social"; font-size: 2em; margin: 0.2em 0 0 0; padding: 0 0.2em; color: #ff66c4;}
.comparte a{color: #ff66c4; text-shadow: 3px 5px 2px #000;}
.comparte a:hover{color: #888;}

.boton{display: inline-block; min-width: 48px; min-height: 48px; padding: 12px 20px; margin: 0; font-size: 1rem; text-align: center; text-decoration: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; box-sizing: border-box;}
button{padding: 10px; border-radius: 5px; background:linear-gradient( #ff66c4, #000); color: #ffffff !important;}
button:hover{background:linear-gradient(#000, #ff66c4); color: #fff !important;}
button a{color:#FFF !important;}
button:hover a{color: #FFF !important;}
span{font-family: "social"; font-size: 1.5em;}
address{font-style: normal;}
address > div > p{text-align: center;}
.datos-empresa > p{text-align: center;}

.benefits{list-style: none;padding: 0;}.benefits li{margin: 0;display: flex;align-items: center;}.benefits li::before{content: "✔";color: #ff66c4;margin-right: 10px;}

.testimoniales, .garantia{margin-top: 20px;}.testimonio{background: #f9f9f9;padding: 10px;border-left: 4px solid #ff66c4;margin-bottom: 10px;}

/*** DESPLEGABLE ***/
details{position: relative; z-index: 1; margin-top: -10px;margin-bottom: -10px;}
details summary{list-style: none; cursor: pointer; padding: 1em 0 1em 1em; background: linear-gradient(0deg, transparent, #FF66C450); border-left: 4px solid #FF66C4; border-radius: 5px;} 
details summary{font-weight: 600;}
details summary p{text-align: left; max-width: 90%;} 
details[open] summary{font-weight: 600;}
details summary::after{position: absolute;font-size: 1em;color: #000;} 
details[open] summary::after{position: absolute;font-size: 1em;color: #000;}

.planes{gap: 10px;}
.plan-1{margin-top: 10px; border: solid 1px #FF66C4; border-radius: 15px; padding: 10px;}
.plan-2{margin-top: 10px; border: solid 1px #FF66C4; border-radius: 15px;padding: 10px;}
.plan-3{grid-column: 1 / 13; grid-row: 1; margin-top: 10px; border: solid 1px #FF66C4; border-radius: 15px;padding: 10px;}

form{margin-top: 20px;}form input, form textarea{background-color: #FF66c410;} form input, form textarea, form button{display: block;width: 100%;margin-bottom: 10px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;}form button{background:linear-gradient(#ff66c4, #000);color: #fff;border: none;cursor: pointer;}form button:hover{background: linear-gradient(#000, #ff66c4);}form button p{text-align: center;}

/* Estilos para el modal */
.modal {display: none; /* Oculto por defecto */position: fixed;z-index: 1;left: 0;top: 0;width: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.5);}.modal-content{background-color: #fefefe;margin: 10% auto;border: 1px solid #888;width: 90%;border-radius: 5px;}.close{color: #aaa;float: right;font-size: 28px;font-weight: bold;cursor: pointer;}.close:hover{color: #000;}
.form-descargar{width: 95%;height: 100%;}
form input[type="text"], form input[type="email"], form input[type="tel"]{width: 100%;padding: 8px;margin: 6px 0;box-sizing: border-box;align-items: center;} form button{color: white;padding: 10px 20px;border: none;cursor: pointer;border-radius: 3px;} form input[type="checkbox"]{margin-top: 18px; align-items: end;}form input p[type="checkbox"]{text-align: right; align-items: baseline;} textarea{width: 100%;padding: 8px;margin: 6px 0;box-sizing: border-box;align-items: center;}

/* Clientes */
.caja-3{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(max-content, auto); width: 100%; padding: 0; margin: 0;gap: 2em;}

/** BLOG **/
.blog-imagen{grid-column: 1 / 6; grid-row: 1;}
.blog-texto{grid-column: 7 / 13; grid-row: 1;}
/************************/
/****** Articulos *******/
/************************/

/* ========================================= */
/* ESTILOS POR DEFECTO (PANTALLAS GRANDES) */
/* ========================================= */

.navegacion-blog {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 0;
    /* Margen amplio para escritorio: 50px */
    margin: 0 50px; 
}

/* Estilos de los enlaces */
.navegacion-blog a {
    color: #ff66c4;
    text-decoration: none;
    line-height: 1.4; /* Mejora la lectura de los títulos en varias líneas */
}

/* Alineación y margen de 10px para el contenido dentro de cada bloque */
.enlace-anterior {
    margin-left: 10px;
    text-align: left;
    max-width: 45%; /* Limita el ancho para que el otro enlace no se monte */
}

.enlace-siguiente {
    margin-right: 10px;
    text-align: right;
    max-width: 45%; /* Limita el ancho */
}

/* Estilo para el nombre del artículo (si está dentro de un <span> en el <a>) */
.nombre-articulo {
    display: block; 
    font-size: 0.9em;
    font-style: italic;
    font-weight: normal;
}


/* ========================================= */
/* MEDIA QUERY PARA SMARTPHONES */
/* ========================================= */

@media (max-width: 600px) {
    
    .navegacion-blog {
        /* Sobrescribe el margen para hacerlo mínimo: 5px */
        margin: 0 5px; 
        padding: 15px 0;
    }
    
    .enlace-anterior,
    .enlace-siguiente {
        /* Asegura que los márgenes internos de 10px también se reduzcan un poco */
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .enlace-anterior span,
    .enlace-siguiente span {
        font-size: 0.8em; /* Opcional: reduce el tamaño de fuente para ahorrar espacio */
    }
}


/**********************/
/******* FOOTER *******/
/**********************/
footer{display: block; width: 100%; height: auto; background: linear-gradient(360deg, #FF66C4, transparent); text-align: center; font-size: 1em;}
footer h4{font-size: 1.2em;}
footer p{font-size: 1em; text-align: center;}
footer a{text-decoration: none; color: #000;}
footer a:hover{color: #4a4a4a;}
footer ul {list-style: none; padding: 0; margin: 0;}
.copy p{font-size: 0.8em; text-align: center; color: #000;}
.copy p > a{font-size: 1em; text-align: center; color: #000; text-decoration: none;}
.copy p > a:hover{color: #4a4a4a;}
.siguenos{font-family: "social"; font-size: 2em; margin: 0.2em 0 0 0; padding: 0 0.2em;}
.pie-1-1 h4, .pie-1-2 h4, .pie-1-3 h4, .pie-2-1 h4{font-weight: bold; font-size: 2.5em; font-family: "sun";}
.pie-2-1 li, .pie-2-3 li{line-height: 2;}

/*** MEDIA ***/
@media screen and (max-height: 450px){#menu-oculto{height: 250%; overflow: scroll;}}
@media screen and (max-height: 280px){#menu-oculto{height: 150%;}}
@media screen and (max-width: 600px){.linea-frase, .boton-menu p{display: none;}}
@media screen and (min-width: 239px){h2, h3{font-size: 1.4em;letter-spacing: 0;}h4{font-size: 1.2em;}p{font-size: 1em; text-align: left;}header{min-height: 90px;}.linea-corporativa{height: 15px;}.logo{margin-left: 0.5em;} .logo figure{width: 2.5em;height: 2.5em;}.n_empresa p{font-size: 0.8em;}.linea-eslogan p{font-size: 0.8em;margin-top: 5px;}.caja-menu{grid-column: 10 / 13;margin-right: 1em; width: 40px;}.menu{width: 100%;}#menu-oculto ul{overflow: hidden;}#menu-oculto li a{font-size: 0.8em;}main{height: 350px;}.main-1{padding-top: 5em;}main h1{color: #ffffff;}main h2{color: #ff66c4;}main h1, main h2{font-size: 1em; text-shadow: 2px 2px 2px black;}section, article{background-color: #FFFFFF;} article{padding: 1.5em 1em;}.imagen-izqu{width: 100%;}.imagen-derc{width: 100%;}details summary p{margin-right: 1em;} details summary::after{content: " + "; top: 1.5em; right: 0.3em;}details[open] summary::after{content: " - "; top: 1.5em; right: 0.3em;}.modal {height: 90%; margin-top: 60px;}.modal-content{padding: 10px;max-width: 240px;}.plan-1{grid-column: 1 / 13; grid-row: 1;}.plan-2{grid-column: 1 / 13; grid-row: 2;}.pie-1-1{grid-column: 1 / 13; grid-row: 1; margin-top: 20px;}.pie-1-2{grid-column: 1 / 13; grid-row: 3; margin-top: 20px;}.pie-1-3{grid-column: 1 / 13; grid-row: 5; margin-top: 20px;}.pie-2-1{grid-column: 1 / 13; grid-row: 2;}.pie-2-2{grid-column: 1 / 13; grid-row: 4;}.pie-2-3{grid-column: 1 / 13; grid-row: 6;}.copy{grid-column: 1 / 13; grid-row: 7; margin-top: 20px; padding-bottom: 20px;}}
@media screen and (min-width: 300px){h2, h3{font-size: 2em;}h4{font-size: 1.5em;} main h1, main h2{font-size: 1.2em;}}
@media screen and (min-width: 320px){.linea-eslogan p{font-size: 1em;}.modal-content{max-width: 320px;}}
@media screen and (min-width: 345px){main{height: 380px;}main h1, main h2{font-size: 1.3em;}}
@media screen and (min-width: 370px){h2, h3{font-size: 2.2em;}.linea-eslogan p{font-size: 1.1em; margin-top: 10px;}.caja-menu{grid-column: 11 / 13;}}
@media screen and (min-width: 400px){p{text-align: justify;}#menu-oculto li a{font-size: 1em;}details summary::after{right: 1em;}details[open] summary::after{right: 1em;}.modal{margin-top: 80px;}}
@media screen and (min-width: 420px){h2, h3{font-size: 2.4em;}.linea-corporativa{height: 20px;}.logo figure{width: 3em;height: 3em;}.n_empresa p{font-size: 1em; margin-top: 0.2em; line-height: 1em;}.linea-eslogan p{font-size: 1.2em; margin-top: 0;}details summary p{margin-right: 1.2em;}}
@media screen and (min-width: 460px){h2{font-size: 2.8em;}main h1{font-size: 1.6em;} main h2{font-size: 1.4em;}}
@media screen and (min-width: 500px){h2{font-size: 3em;}h3{font-size: 1.6em;}h4{font-size: 1.8em;}.linea-corporativa{height: 25px;}.logo{margin-left: 1em;}.linea-eslogan{font-size: 1.5em;margin-top: 0.5em;}main{padding-top: 90px; height: 400px;}main h1{font-size: 2em; padding-top: 0; margin-top: -1em;}main h2{font-size: 1.8em;}.modal{margin-top: 120px;}.pie-1-1{grid-column: 1 / 6; grid-row: 1;}.pie-1-2{grid-column: 1 / 13; grid-row: 3;}.pie-1-3{grid-column: 6 / 13; grid-row: 1;}.pie-2-1{grid-column: 1 / 6; grid-row: 2;}.pie-2-2{grid-column: 1 / 13; grid-row: 4;}.pie-2-3{grid-column: 6 / 13; grid-row: 2;}.copy{grid-column: 1 / 13; grid-row: 3; padding: 5vh 0;}}
@media screen and (min-width: 530px){.main-2{max-width: 90%;margin-left: 5%;}}
@media screen and (min-width: 580px){main h1{font-size: 2.2em;}}
@media screen and (min-width: 601px){.linea-eslogan{margin-top: 0;}.caja-menu{grid-column: 12; width: 50px;margin-right: 1.5em;}.boton-menu p{font-size: 1em;}main{padding-top: 140px;}.imagen-izqu{width: 45%; margin-right: 2vw;}.imagen-derc{width: 45%; margin-left: 2vw;}details summary p{margin-right: 100px;} details summary::after{content: " Ver + ";}details[open] summary::after{content: " Ver - ";}.modal {height: 100%;}.modal-content{padding: 20px;max-width: 500px;}.plan-1{grid-column: 1 / 7; grid-row: 1;}.plan-2{grid-column: 7 / 13; grid-row: 1;}}
@media screen and (min-width: 630px){main h1{font-size: 2.6em;margin-top: -1.8em;}}
@media screen and (min-width: 700px){h2{letter-spacing: -2px;font-size: 3.5em;}.logo figure{width: 3.2em;height: 3.2em;}.n_empresa p{font-size: 1.1em;}section{max-width: 80%;margin: 20px auto;background: #fff;padding: 0 20px;border-radius: 8px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}article{margin: 0 5vw; padding: 1.5em 0;}.modal{margin-top: 100px;}.pie-1-1{grid-column: 1 / 4; grid-row: 1;}.pie-1-2{grid-column: 5 / 9; grid-row: 1;}.pie-1-2 h4{line-height: 0.8em;}.pie-1-3{grid-column: 10 / 13; grid-row: 1;}.pie-2-1{grid-column: 1 / 4; grid-row: 2;}.pie-2-2{grid-column: 5 / 9; grid-row: 2;}.pie-2-3{grid-column: 10 / 13; grid-row: 2;}.copy{grid-column: 1 / 13; grid-row: 3; padding: 5vh 0;}}
@media screen and (min-width: 740px){main{padding-top: 200px;}main h1{font-size: 2.8em;margin-top: -2.5em;}main h2{font-size: 2em;}}
@media screen and (min-width: 800px){details summary p{margin-right: 150px;}details summary::after{content: " Pincha para ver + ";}details[open] summary::after{content: " Pincha para ver - ";}}
@media screen and (min-width: 801px){main{padding-top: 250px;}main h1{font-size: 3.5em;margin-top: -180px;}}
@media screen and (min-width: 805px){main h2{font-size: 2.5em;}}
@media screen and (min-width: 900px){p{font-size: 1.2em;}.logo figure{width: 4em;height: 4em;}.n_empresa p{font-size: 1.2em;margin-top: 0.4em;}}
@media screen and (min-width: 1001px){main h1{font-size: 3.8em;}main h2{line-height: 1.2em;}}
@media screen and (min-width: 1087px){main{padding-top: 300px;}main h1{font-size: 4em;margin-top: -220px;}main h2{font-size: 2.6em;}}
@media screen and (min-width: 1106px){main h2{font-size: 2.8em;}}
@media screen and (min-width: 1144px){main h2{font-size: 3.2em;}}
@media screen and (min-width: 1200px){h2{font-size: 4em;}.linea-eslogan{font-size: 2em; margin-top: -0.2em;}.linea-frase{font-size: 1.5em;}.caja-menu{margin: 0 2em 0 4em;}main h1{margin-top: -180px;}.modal{margin-top: 60px;}}
@media screen and (min-width: 1400px){h3{font-size: 1.6em;}p{font-size: 1.4em;}}
@media screen and (min-width: 1410px){main{height: 600px;}main h1{font-size: 5em};main h2{font-size: 4em;}}
@media screen and (min-width: 1430px){main h1{font-size: 5.5em};}
@media screen and (min-width: 1573px){main h2{font-size: 4.5em;}}
@media screen and (min-width: 1600px){h2{font-size: 4.5em;}h3{font-size: 3em;}}
@media screen and (min-width: 1700px){main{padding-top: 400px;}main h1{font-size: 6em;margin-top: -250px;}}
@media screen and (min-width: 1410px){main h2{font-size: 5em;}}
@media screen and (min-width: 1800px){#menu-oculto li a{font-size: 1.5em;}}
@media screen and (min-width: 1900px){main h1{font-size: 6.5em;}}
@media screen and (min-width: 2310px){main h2{font-size: 5.5em;}}
@media screen and (min-width: 2500px){.logo figure{width: 5em;height: 5em;}.n_empresa p{font-size: 1.8em;margin-top: 0.2em;}.linea-eslogan{font-size: 2.5em;margin-top: -1em;}}
@media screen and (min-width: 2561px){main h1{font-size: 8em;}}