/* ==========================================================================
   ESTILOS PROPIOS DE GESTIONDEAVISOS.COM
   --------------------------------------------------------------------------
   Se carga la ultima, despues de style.css (que es la plantilla compilada
   desde la carpeta scss). Todo lo propio de la web va aqui y no en style.css:
   si algun dia se recompila la plantilla, esto no se pierde.
   La version (?v=) sale sola de la fecha del fichero (inc/comun.asp).
   ========================================================================== */

/* ---- Telefono de la cabecera ----
   Arriba del todo la cabecera es transparente y el telefono cae encima del
   fondo azul de la portada (#1642B9), y segun el ancho de la pantalla, justo
   en la raya entre el gris y el azul. En azul oscuro no se veia. Por eso va
   en una "pastilla" blanca, que se lee sobre cualquiera de los dos fondos.
   Al bajar, la cabecera se vuelve blanca (clase .sticky, dist/js/custom.js)
   y la pastilla sobra: se queda como texto normal. */
.header-phone {
    color: #2c2e8f;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    background: #fff;
    border-radius: 999px;
    padding: 9px 18px;
    box-shadow: 0 4px 14px rgba(6, 20, 52, .15);
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.header-phone:hover,
.header-phone:focus { color: #ff285c; }
.main-header.sticky .header-phone {
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* ---- Menu en ordenador ----
   La plantilla separa las opciones 50 px. Con el telefono y el boton a la
   derecha, el menu llegaba hasta la zona azul de la portada y el texto oscuro
   no se leia. Mas juntas caben en la zona gris en todos los anchos. */
@media (min-width: 1200px) {
    .main-header .navbar-collapse .navbar-nav { padding-left: 40px; }
    .main-header .navbar-collapse .navbar-nav .nav-item .nav-link { padding-right: 30px; }
}
.main-header .btn { white-space: nowrap; }

/* ---- Menu del movil ----
   Al abrir el menu en el movil sin haber bajado, la cabecera es transparente
   y las opciones se montaban sobre la foto. Se le da fondo blanco. */
@media (max-width: 1199px) {
    .main-header .navbar-collapse.show,
    .main-header .navbar-collapse.collapsing {
        background: #fff;
        border-radius: 15px;
        padding: 20px;
        margin-top: 12px;
        box-shadow: 0 10px 30px rgba(6, 20, 52, .12);
    }
    .main-header .navbar-collapse .navbar-nav { padding-left: 0; }
    .main-header .navbar-collapse .navbar-nav .nav-item .nav-link { padding: 8px 0; }
    .main-header .navbar-collapse .d-flex { margin-top: 12px; flex-wrap: wrap; gap: 12px; }
}

/* ---- Imagenes con width y height puestos en el HTML ----
   Se ponen para que la pagina no de saltos al cargar, pero el alto del
   atributo se quedaba fijo mientras el ancho se estiraba (clase w-100 o el
   carrusel): las fotos salian deformadas. Asi el alto sigue al ancho. */
img[width][height] { height: auto; }

/* ---- Fotos del carrusel que se amplian al pulsarlas (dist/js/custom.js) ---- */
.portfolio-slider img { cursor: zoom-in; }
.foto-ampliada {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 95vw;
    max-height: 95vh;
    overflow: visible;
}
.foto-ampliada::backdrop { background: rgba(7, 20, 52, .85); }
.foto-ampliada img { display: block; max-width: 95vw; max-height: 85vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.foto-ampliada p { color: #fff; text-align: center; margin: 12px 0 0; font-size: 15px; }
.foto-ampliada .foto-cerrar {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #061434;
    font-size: 24px;
    line-height: 40px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    cursor: pointer;
}
@media (max-width: 767px) {
    .foto-ampliada .foto-cerrar { top: -50px; right: 0; }
}

/* ---- Boton flotante de WhatsApp ---- */
.whatsapp-float { position: fixed; right: 20px; bottom: 20px; z-index: 1000; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .2s ease; text-decoration: none; }
.whatsapp-float:hover,
.whatsapp-float:focus { transform: scale(1.08); color: #fff; text-decoration: none; }
.whatsapp-float i { line-height: 1; font-size: 34px; }

/* ---- Portada: bloques añadidos ---- */
.sector-card { border: 1px solid #eee; border-radius: 16px; padding: 30px 24px; height: 100%; transition: transform .2s ease, box-shadow .2s ease; background: #fff; }
.sector-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); }
.sector-card i { font-size: 40px; color: #ff285c; }
.sector-card h3 { font-size: 20px; font-weight: 600; margin: 16px 0 8px; color: #000; }
.sector-card p { font-size: 15px; color: #555; margin: 0; }
.price-note { font-size: 14px; color: #666; max-width: 680px; margin: 14px auto 0; }
.hero-title { font-size: 55px; line-height: 1.1; }
.section-title-xl { font-size: 54px; font-weight: 600; line-height: 1.15; }
@media (max-width: 991px) {
    .hero-title { font-size: 42px; }
    .section-title-xl { font-size: 40px; }
}
@media (max-width: 767px) {
    .hero-title { font-size: 32px; line-height: 1.15; }
    .section-title-xl { font-size: 28px; }
    .fs-2 { font-size: 1.6rem !important; }
    .fs-3 { font-size: 1.4rem !important; }
}
@media (max-width: 480px) {
    .hero-title { font-size: 28px; }
    .section-title-xl { font-size: 24px; }
}

/* En el movil el titulo de la portada quedaba pegado al logo. */
@media (max-width: 767px) {
    .hero-banner .left-hero-color { padding-top: 130px; }
}

/* Los enlaces del menu (#caracteristicas, #precios...) dejarian el titulo
   debajo de la cabecera fija. Esto deja hueco arriba al saltar. */
section[id] { scroll-margin-top: 90px; }

/* ---- Formulario de contacto (fondo azul) ---- */
.form-aviso { font-size: 16px; color: #fff; background: rgba(255, 255, 255, .12); border-left: 4px solid #ff285c; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; }
.form-aviso.form-aviso-ok { border-left-color: #25d366; }

/* ---- Paginas interiores (aviso legal, privacidad, cookies, 404) ---- */
.pagina-interior { padding-top: 150px; padding-bottom: 60px; background-color: #f9f9fb; }
.pagina-interior h1 { font-size: 35px; margin-bottom: 1.5rem; }
@media (max-width: 767px) {
    .pagina-interior { padding-top: 120px; padding-bottom: 40px; }
    .pagina-interior h1 { font-size: 28px; }
}

/* ---- Pagina de error 404 ---- */
.pagina-error { text-align: center; max-width: 720px; margin: 0 auto; }
.pagina-error .error-numero { font-size: 120px; font-weight: 700; line-height: 1; color: #1642B9; margin-bottom: 10px; }
.pagina-error p { font-size: 18px; color: #555; }
.pagina-error .error-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
@media (max-width: 767px) {
    .pagina-error .error-numero { font-size: 80px; }
    .pagina-error .error-enlaces .btn { width: 100%; }
}

/* ---- Pie comun ---- */
.pie-web { padding: 40px 0 10px; }
.pie-web .pie-enlaces { margin-bottom: 10px; }
.pie-web .pie-enlaces li { margin: 0 10px 8px; }
.pie-web .pie-enlaces li a { display: inline; padding: 0; }
.pie-web .pie-datos { color: #92ACF2; font-size: 15px; margin: 10px 0 0; }
.pie-web .pie-datos a { color: #fff; text-decoration: none; }
.pie-web .copyrights { padding: 20px 0; }
.pie-web .copyrights a { color: #fff; text-decoration: none; }


/* ==========================================================================
   TEXTOS LEGALES Y CASILLA DE LOS FORMULARIOS - webs de CTA
   --------------------------------------------------------------------------
   Copiado de "Z:\COPIAS PRINCIPAL\Webs\- MODULOS\TEXTOS LEGALES CTA\5 - estilos.css"
   (23/09/2026). Si alli cambia, se trae aqui. Debajo del bloque, lo que se
   ajusta para esta web: el formulario de aqui va sobre fondo AZUL, y los
   colores del paquete (texto gris oscuro) no se leerian.
   ========================================================================== */

/* ---- La casilla ---- */
.cta-rgpd-fila { margin-bottom: 30px; }
.cta-rgpd-fila label { display: inline; margin: 0; font-size: 15px; font-weight: 400; color: #4d5b73; cursor: pointer; }
.cta-rgpd-abrir { text-decoration: underline; }

/* ---- Campos obligatorios: asterisco rojo en la esquina de la caja ----
   Va en el div que envuelve el campo porque un input no admite ::after. */
.cta-obligatorio { position: relative; }
.cta-obligatorio::after {
    content: "*";
    position: absolute;
    top: 8px;
    right: 12px;
    color: #d93025;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}
.cta-obligatorio-nota { font-size: 14px; color: #64728c; margin: -12px 0 12px; }
.cta-obligatorio-nota span { color: #d93025; font-weight: 700; }

/* ---- Trampa para robots: fuera de la pantalla, no display:none, porque
   algunos robots se saltan los campos con display:none. ---- */
.cta-trampa {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- La ventana ---- */
.cta-rgpd-ventana {
    width: calc(100% - 32px);
    max-width: 620px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border: 0;
    border-radius: 16px;
    padding: 28px 30px 22px;
    box-shadow: 0 22px 50px rgba(15, 27, 51, .13);
    color: #4d5b73;
}
.cta-rgpd-ventana::backdrop { background: rgba(7, 27, 69, .55); }
.cta-rgpd-ventana h2 { font-size: 20px; line-height: 1.3; color: #0f1b33; margin: 0 0 14px; }
.cta-rgpd-ventana p { font-size: 15px; line-height: 1.6; text-align: left; margin: 0 0 12px; }
.cta-rgpd-ventana .cta-rgpd-botones { text-align: right; margin: 18px 0 0; }
.cta-rgpd-ventana .cta-rgpd-cerrar {
    background: #0c5adb;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 30px;
    font-weight: 700;
}
@media (max-width: 480px) {
    .cta-rgpd-ventana { padding: 22px 18px 18px; }
}

/* ---- Paginas legales (aviso legal y privacidad) ---- */
.cta-legal h2 { font-size: 21px; line-height: 1.35; color: #0f1b33; margin: 30px 0 12px; }
.cta-legal h3 { font-size: 17px; line-height: 1.35; color: #0f1b33; margin: 22px 0 10px; }
.cta-legal > h2:first-child { margin-top: 0; }
/* Espacio entre parrafos propio: algunas plantillas lo quitan (p { margin-bottom: 0 }
   en nuestracartaonline) y el texto salia todo pegado. */
.cta-legal p { margin: 0 0 14px; }
.cta-legal p,
.cta-legal li { text-align: justify; }
/* En el movil, justificado deja huecos grandes entre palabras: a la izquierda. */
@media (max-width: 767px) {
    .cta-legal p,
    .cta-legal li { text-align: left; }
}
.cta-legal ol,
.cta-legal ul { padding-left: 22px; margin: 0 0 16px; }
.cta-legal ol { list-style: decimal; }
.cta-legal ul { list-style: disc; }
.cta-legal li { margin-bottom: 8px; }

.cta-legal-tabla-caja { overflow-x: auto; margin: 0 0 20px; }
.cta-legal-tabla { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.cta-legal-tabla th,
.cta-legal-tabla td { border: 1px solid #e5eaf2; padding: 9px 12px; vertical-align: top; text-align: left; }
.cta-legal-tabla th { background: #f4f7fc; color: #0f1b33; font-weight: 600; }

/* En el movil cada fila es una ficha (etiqueta: dato). Una tabla con
   desplazamiento lateral en el movil no vale (norma del 21/09/2026). Las
   etiquetas salen del atributo data-label de cada celda. */
@media (max-width: 767px) {
    .cta-legal-tabla { min-width: 0; }
    .cta-legal-tabla thead { display: none; }
    .cta-legal-tabla,
    .cta-legal-tabla tbody,
    .cta-legal-tabla tr,
    .cta-legal-tabla th,
    .cta-legal-tabla td { display: block; width: 100%; }
    .cta-legal-tabla tr { border: 1px solid #e5eaf2; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
    .cta-legal-tabla th,
    .cta-legal-tabla td { border: 0; border-bottom: 1px solid #e5eaf2; }
    .cta-legal-tabla tr > :last-child { border-bottom: 0; }
    .cta-legal-tabla tbody td:first-child { background: #f4f7fc; color: #0f1b33; font-weight: 600; }
    .cta-legal-tabla td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: #0f1b33;
        margin-bottom: 2px;
    }
}

/* ---- Ajustes del paquete legal para ESTA web ----
   La plantilla (style.css) OCULTA todos los <br> en el movil. En los textos
   legales los saltos separan datos (telefono / email, plazos de cada
   tratamiento) y sin ellos salia "6 anos.Fiscal: 4 anos." todo pegado.
   Y su interlineado de serie es muy justo para leer texto largo. */
.cta-legal br,
.cta-rgpd-ventana br { display: inline; }
.cta-legal p,
.cta-legal li { line-height: 1.6; }
.cta-legal-tabla { line-height: 1.5; }

/* (sigue: el formulario de esta web va sobre fondo azul) */
   El formulario va dentro de la seccion azul (.contact.bg-primary): el texto
   de la casilla y la nota de obligatorios, en blanco; el enlace, en el
   amarillo/rosa de los demas enlaces de esa seccion. */
.contact .cta-rgpd-fila { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.contact .cta-rgpd-fila input { flex: 0 0 auto; margin-top: 1px; }
.contact .cta-rgpd-fila label { color: #fff; font-size: 16px; }
.contact .cta-rgpd-abrir { color: #fff; font-weight: 600; font-size: 16px; }
.contact .cta-rgpd-abrir:hover { color: #ff285c; }
.contact .cta-obligatorio-nota { color: #dfe6ff; margin: 0 0 12px; }
.contact .cta-obligatorio-nota span,
.contact .cta-obligatorio::after { color: #ff285c; }
.contact .cta-obligatorio::after { top: 14px; }