/* ==========================================================================
   LC Instalaciones — hoja de estilos única
   --------------------------------------------------------------------------
   Réplica del aspecto de la web antigua (Joomla 3 + plantilla Bravo Business
   de JoomShaper, framework Helix3, Bootstrap 3, preset1).
   Los valores salen de templates/bravo-business/css/template.css, del preset1
   y de los parámetros del estilo de plantilla (ver contenido/estructura/diseno.md).

   Índice:
     1. Fuentes
     2. Variables
     3. Base
     4. Rejilla
     5. Utilidades y botones
     6. Iconos
     7. Cabecera (barra superior, logo, menú, cabecera fija)
     8. Menú móvil
     9. Franja de título (páginas interiores)
    10. Contenido: secciones y bloques del page builder
    11. Contenido: bloques de la Home
    12. Pie (redes, columnas, galería, copyright)
    13. Elementos fijos (volver arriba, aviso de cookies, visor de fotos)
    14. Formularios
    15. Móvil y tablet
   ========================================================================== */


/* ==========================================================================
   1. FUENTES
   Eran Google Fonts; aquí se sirven en local (solo alfabeto latino).
   Arimo y Montserrat son fuentes variables: un fichero cubre 400 y 700.
   ========================================================================== */

@font-face {
    font-family: "Arimo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/arimo-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Arimo";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/arimo-italic-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/poppins-300-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-latin.woff2") format("woff2");
}
/* Iconos: Font Awesome 4.4 y Flaticon, los mismos ficheros que traía la plantilla */
@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    src: url("../fonts/fontawesome-webfont.woff2") format("woff2");
}
@font-face {
    font-family: "Flaticon";
    font-weight: normal;
    src: url("../fonts/flaticon.woff") format("woff");
}


/* ==========================================================================
   2. VARIABLES
   ========================================================================== */

:root {
    /* paleta (preset1 y parámetros de la plantilla) */
    --color-principal: #3497da;
    --color-principal-hover: #227cb9;
    --color-oscuro: #333333;
    --color-texto: #000000;
    --color-texto-suave: #555555;
    --color-fondo: #ffffff;
    --color-separador-top: #454545;

    /* pie */
    --pie-fondo: #040a0e;
    --pie-texto: #d5d2d2;
    --copyright-fondo: #1b1b1b;
    --copyright-texto: #ebebeb;
    --copyright-enlace: #3597db;

    /* tipografías */
    --fuente-texto: "Arimo", Helvetica, Arial, sans-serif;
    --fuente-titulos: "Poppins", sans-serif;
    --fuente-menu: "Montserrat", sans-serif;

    /* medidas de la cabecera */
    --alto-barra: 60px;
    --alto-cabecera: 125px;
    --alto-cabecera-fija: 90px;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 14px;
    line-height: 24px;
    color: var(--color-texto);
    background-color: var(--color-fondo);
}

/* títulos: Poppins, peso normal, tamaños de Bootstrap 3 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    font-weight: normal;
    line-height: 1.1;
    margin: 0;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
    margin: 0 0 10px;
}

a {
    color: var(--color-principal);
    text-decoration: none;
    transition: all 400ms;
}
a:hover,
a:focus {
    color: var(--color-principal-hover);
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

strong,
b {
    font-weight: bold;
}

ul {
    margin-top: 0;
}

/* para lectores de pantalla */
.oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ==========================================================================
   4. REJILLA
   Equivale a la de Bootstrap 3: 12 columnas, medianil de 30 px,
   contenedor de 1170 / 970 / 750 px.
   ========================================================================== */

.contenedor {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.fila {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* en móvil todas las columnas ocupan el ancho completo */
[class*="col-"] {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-4 { width: 33.3333%; }
.col-xs-6 { width: 50%; }
.col-xs-8 { width: 66.6667%; }

@media (min-width: 768px) {
    .contenedor { width: 750px; }
    .col-sm-1 { width: 8.3333%; }
    .col-sm-2 { width: 16.6667%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.3333%; }
    .col-sm-5 { width: 41.6667%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.3333%; }
    .col-sm-8 { width: 66.6667%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.3333%; }
    .col-sm-11 { width: 91.6667%; }
    .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
    .contenedor { width: 970px; }
    .col-md-1 { width: 8.3333%; }
    .col-md-2 { width: 16.6667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.3333%; }
    .col-md-5 { width: 41.6667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.3333%; }
    .col-md-8 { width: 66.6667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.3333%; }
    .col-md-11 { width: 91.6667%; }
    .col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
    .contenedor { width: 1170px; }
}


/* ==========================================================================
   5. UTILIDADES Y BOTONES
   ========================================================================== */

.tCenter { text-align: center; }
.tLeft { text-align: left; }
.fleft { float: left; }
.fright { float: right; }

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* clases auxiliares de la plantilla que aparecen dentro del contenido */
.font34 { font-size: 34px !important; }
.font24 { font-size: 24px !important; }
.font13 { font-size: 13px !important; }
.font12 { font-size: 12px !important; }
.font600 { font-weight: 600 !important; }
.font500 { font-weight: 500 !important; }
.font400 { font-weight: 400 !important; }
.font300 { font-weight: 300 !important; }
.textUppercase { text-transform: uppercase !important; }
.marBottom5 { margin-bottom: 5px !important; }
.marBottom10 { margin-bottom: 10px !important; }
.marBottom15 { margin-bottom: 15px !important; }
.marBottom20 { margin-bottom: 20px !important; }
.marBottom25 { margin-bottom: 25px !important; }
.marTop10 { margin-top: 10px !important; }
.marTop15 { margin-top: 15px !important; }
.marTop20 { margin-top: 20px !important; }
.marTop30 { margin-top: 30px !important; }
.tRight { text-align: right; }
.primary_color,
.colorPrime { color: var(--color-principal) !important; }
.fontMontserrat { font-family: var(--fuente-menu); }

/* Botón principal: píldora azul (clase original «btn_marjor_radius») */
.btn_marjor_radius {
    display: inline-block;
    padding: 0 45px;
    border: none;
    border-radius: 25px;
    background-color: var(--color-principal);
    color: #ffffff !important;
    font-family: var(--fuente-menu);
    font-size: 13px;
    font-weight: 400;
    line-height: 50px;
    text-transform: uppercase;
    transition: all 400ms;
}
.btn_marjor_radius:hover {
    background-color: var(--color-oscuro);
}
/* variante de ancho completo y esquinas rectas (.full) */
.btn_marjor_radius.full {
    width: 100%;
    padding: 0;
    border-radius: 0;
    text-align: center;
}

/* Botón secundario: píldora blanca */
.btn_white_radius {
    display: inline-block;
    padding: 0 45px;
    border-radius: 25px;
    background-color: #ffffff;
    color: var(--color-texto-suave) !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 50px;
    text-transform: uppercase;
    transition: all 400ms;
}
.btn_white_radius:hover {
    background-color: var(--color-oscuro);
    color: #ffffff !important;
}


/* ==========================================================================
   6. ICONOS
   Solo los glifos que usa la web (Font Awesome 4 y Flaticon).
   ========================================================================== */

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.fa-phone::before { content: "\f095"; }
.fa-map-marker::before { content: "\f041"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-clock-o::before { content: "\f017"; }
.fa-facebook::before { content: "\f09a"; }
.fa-twitter::before { content: "\f099"; }
.fa-instagram::before { content: "\f16d"; }
.fa-linkedin-square::before { content: "\f08c"; }
.fa-bars::before { content: "\f0c9"; }
.fa-times::before { content: "\f00d"; }
.fa-angle-up::before { content: "\f106"; }
.fa-angle-left::before { content: "\f104"; }
.fa-angle-right::before { content: "\f105"; }
.fa-calendar-plus-o::before { content: "\f271"; }
.fa-comments::before { content: "\f086"; }
.fa-folder-open::before { content: "\f07c"; }
.fa-folder-open-o::before { content: "\f115"; }
.fa-calendar-o::before { content: "\f133"; }
.fa-download::before { content: "\f019"; }
.fa-envelope-o::before { content: "\f003"; }
.fa-home::before { content: "\f015"; }
.fa-linkedin::before { content: "\f0e1"; }
.fa-user::before { content: "\f007"; }
.fa-check::before { content: "\f00c"; }

[class^="flaticon-"]::before {
    font-family: "Flaticon";
    font-style: normal;
    font-weight: normal;
}
.flaticon-work-team::before { content: "\f11e"; }
.flaticon-symbols::before { content: "\f11d"; }
.flaticon-food::before { content: "\f11c"; }
.flaticon-vector::before { content: "\f121"; }


/* ==========================================================================
   7. CABECERA
   Barra superior + cabecera transparentes, superpuestas al slider (Home)
   o a la foto de la franja de título (resto de páginas).
   ========================================================================== */

/* --- bloque que agrupa barra superior y cabecera --- */
.cabecera-sitio {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* --- barra superior (#sp-top-bar), a todo el ancho --- */
.barra-superior {
    position: relative;
    z-index: 10;
    padding: 0 15px;
    border-bottom: 1px solid var(--color-separador-top);
    color: #ffffff;
}
.barra-superior a {
    color: #ffffff;
}
.barra-superior a:hover {
    color: #3498db;
}

/* lista de contacto (.sp-contact-info) */
.contacto-superior {
    margin: 0;
    padding: 0;
    list-style: none;
}
.contacto-superior li {
    display: inline-block;
    padding: 0 40px;
    border-right: 1px solid var(--color-separador-top);
    line-height: var(--alto-barra);
}
.contacto-superior li .fa {
    margin-right: 5px;
    color: var(--color-principal);
    font-size: 16px;
}

/* --- cabecera: logo y menú (#sp-header) --- */
.cabecera {
    position: relative;
    z-index: 100;
    height: var(--alto-cabecera);
    transition: all 400ms ease;
}
.cabecera .fila {
    height: 100%;
    align-items: center;
}
.logo {
    display: flex;
    align-items: center;
    height: var(--alto-cabecera);
    margin: 0;
    transition: all 400ms ease;
}
.logo img {
    width: auto;
    max-height: 100%;
}

/* --- menú principal (.sp-megamenu-parent) --- */
.menu-principal {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-principal li {
    position: relative;
}
.menu-principal a {
    display: inline-block;
    padding: 0 0 0 50px;
    color: #ffffff;
    font-family: var(--fuente-menu);
    font-size: 13px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.menu-principal a:hover,
.menu-principal .activo > a {
    color: var(--color-principal);
}

/* botón de menú móvil (#offcanvas-toggler), oculto en escritorio */
.boton-menu {
    display: none;
    float: right;
    padding: 0;
    border: 0;
    background: none;
    color: #ffffff;
    font-size: 20px;
    line-height: 87px;
    cursor: pointer;
}
.boton-menu:hover {
    color: #ffffff;
}

/* --- cabecera fija al hacer scroll (clase añadida por js) --- */
.cabecera.fija {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    height: var(--alto-cabecera-fija);
    background-color: rgba(0, 0, 0, 0.7);
}
.cabecera.fija .logo {
    height: var(--alto-cabecera-fija);
}


/* ==========================================================================
   8. MENÚ MÓVIL
   Panel negro de 320 px que entra por la derecha (off-canvas de Helix3).
   ========================================================================== */

.menu-movil {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    width: 320px;
    max-width: 85%;
    height: 100%;
    padding: 70px 30px 30px;
    overflow-y: auto;
    background-color: #000000;
    color: #ffffff;
    visibility: hidden;
    transform: translateX(100%);
    transition: 0.5s;
}
.menu-movil ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-movil li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-movil a {
    display: block;
    padding: 5px 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
}
.menu-movil .activo > a,
.menu-movil a:hover {
    color: var(--color-principal);
}
.cerrar-menu {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid #ffffff;
    border-radius: 100%;
    background: none;
    color: #ffffff;
    font-size: 14px;
    line-height: 23px;
    cursor: pointer;
}
.velo-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.2);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}

/* estado abierto (clase en <body>) */
.menu-abierto .menu-movil {
    visibility: visible;
    transform: translateX(0);
}
.menu-abierto .velo-menu {
    visibility: visible;
    opacity: 1;
}
.menu-abierto .envoltorio {
    transform: translateX(-320px);
}
.envoltorio {
    position: relative;
    overflow-x: hidden;
    transition: transform 0.5s;
}


/* ==========================================================================
   9. FRANJA DE TÍTULO (páginas interiores)
   Foto de cabecera de cada página, con el título centrado en blanco.
   ========================================================================== */

.franja-titulo {
    padding: 270px 0 115px;
    background-color: var(--color-principal);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
}
.franja-titulo h1 {
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
}
.migas {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: #ffffff;
}
.migas li {
    display: inline-block;
}
.migas li + li::before {
    content: "/\00a0";
    padding: 0 5px;
}
.migas a {
    color: #ffffff;
}
.migas .actual {
    color: rgba(255, 255, 255, 0.8);
}


/* ==========================================================================
   10. CONTENIDO: SECCIONES Y BLOQUES DEL PAGE BUILDER
   ========================================================================== */

/* cada fila del page builder es una <section class="seccion"> */
.seccion {
    position: relative;
    z-index: 1;
    padding: 50px 0;
}
.seccion > .contenedor {
    position: relative;
    z-index: 2;
}
/* fondo fotográfico con velo oscuro */
.seccion-foto {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: fixed;
}
.seccion-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--velo, rgba(0, 0, 0, 0.8));
}

/* separador vertical (addon «empty_space») */
.espacio-50 { height: 50px; }
.espacio-30 { height: 30px; }

/* título de bloque (.sppb-addon-title) con raya azul debajo */
.titulo-bloque {
    position: relative;
    margin-bottom: 20px;
    color: var(--color-oscuro);
    font-size: 19px;
    font-weight: 500;
    text-transform: uppercase;
}
.titulo-bloque::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    margin-top: 10px;
    background-color: var(--color-principal);
}

/* --- encabezado de sección (addon «vs_heading») --- */
.encabezado {
    position: relative;
}
.encabezado .text_before {
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--color-principal);
}
.encabezado .section_title {
    display: block;
    margin-bottom: 8px;
    font-size: 36px;
    font-weight: 500;
}
.encabezado .section_title strong {
    font-weight: 500;
}
.encabezado h3.text_after {
    margin-bottom: 15px;
}
.encabezado h4.text_after {
    font-size: 14px;
    color: var(--color-principal);
}
.encabezado .text_after {
    position: relative;
    display: inline-block;
}
.encabezado p {
    display: block;
    max-width: 650px;
    margin: 15px auto 0;
    color: var(--color-texto-suave);
    font-size: 16px;
    line-height: 25px;
}
/* número gigante de fondo («38») */
.encabezado .number {
    position: absolute;
    top: -33px;
    left: 50%;
    z-index: -1;
    color: #efefef;
    font-family: var(--fuente-menu);
    font-size: 200px;
    font-weight: bold;
    line-height: 150px;
    transform: translate(-50%, 0);
}
/* dos rayas a cada lado del subtítulo (.show_line) */
.encabezado .show_line::before,
.encabezado .show_line::after,
.encabezado .show_line span::before,
.encabezado .show_line span::after {
    content: "";
    position: absolute;
    height: 1px;
    background-color: var(--color-principal);
}
.encabezado .show_line::before { top: 5px; right: 100%; width: 75px; margin-right: 10px; }
.encabezado .show_line::after { top: 10px; right: 100%; width: 55px; margin-right: 10px; }
.encabezado .show_line span {
    position: absolute;
    top: 0;
    left: 100%;
    padding-left: 10px;
}
.encabezado .show_line span::before { top: 5px; left: 10px; width: 75px; }
.encabezado .show_line span::after { top: 10px; left: 10px; width: 55px; }

/* variantes */
.encabezado.en-blanco,
.encabezado.en-blanco .section_title,
.encabezado.en-blanco .text_after,
.encabezado.en-blanco p {
    color: #ffffff;
}
.encabezado.header_video h2 {
    font-size: 50px;
    line-height: 85px;
}
.encabezado.header_video .text_before {
    margin-bottom: 10px;
}
.encabezado.heading_icon {
    margin-top: 30px;
}
.encabezado.heading_icon h2 {
    font-size: 32px;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.encabezado.heading_icon h3.text_after {
    font-size: 24px;
}
.encabezado.heading_icon p {
    margin-top: 5px;
    margin-bottom: 20px;
    padding-right: 35px;
    padding-left: 35px;
    font-size: 15px;
    line-height: 30px;
}

/* logo del Ministerio + texto (contenido de «Instaladora de Telecomunicaciones») */
.texto-ministerio {
    margin-top: 15px;
}
.texto-ministerio .logo-ministerio {
    margin: 0 auto;
}

/* bloque de texto (addon «text_block») */
.texto-bloque {
    margin-top: 15px;
}
.texto-bloque p:last-child {
    margin-bottom: 0;
}

/* imagen con título y enlace (addon «image») */
.bloque-imagen {
    margin-top: 15px;
}
.bloque-imagen img {
    display: inline-block;
}


/* ==========================================================================
   11. CONTENIDO: BLOQUES DE LA HOME
   ========================================================================== */

/* --- slider (Revolution Slider): 1170 × 815, a todo el ancho --- */
.slider {
    position: relative;
    height: 815px;
    overflow: hidden;
    background-color: #000000;
}
.diapositiva {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 1s;
}
.diapositiva.activa {
    opacity: 1;
    visibility: visible;
}
/* rejilla de 1170 px centrada donde se colocan las capas */
.rejilla-diapositiva {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1170px;
    height: 815px;
    transform: translate(-50%, -50%) scale(var(--escala, 1));
}
/* capa de texto: x desde la izquierda, y relativa al centro vertical */
.capa {
    position: absolute;
    left: calc(var(--x) * 1px);
    top: calc(50% + var(--y) * 1px);
    color: #ffffff;
    white-space: nowrap;
    line-height: 60px;
    opacity: 0;
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
    transform: translate(40px, -50%);
}
.diapositiva.activa .capa {
    opacity: 1;
    transform: translate(0, -50%);
}
.capa h3 {
    color: #ffffff;
    font-size: 24px;
}
.capa h3 span {
    color: var(--color-principal);
}
.capa h1 {
    color: #ffffff;
}
.capa p {
    margin: 0;
    font-family: var(--fuente-menu);
    font-size: 17px;
}
/* capa de imagen (logo grande de la primera diapositiva), alineada arriba */
.capa-imagen {
    position: absolute;
    left: calc(var(--x) * 1px);
    top: calc(var(--y) * 1px);
    width: 281px;
    height: 250px;
    opacity: 0;
    transform: translateX(-60px) skewX(-15deg);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.diapositiva.activa .capa-imagen {
    opacity: 1;
    transform: none;
}

/* --- «Orgullosos de decir 38 años»: tarjeta que sube 90 px sobre el slider --- */
.proud_say {
    max-width: 1370px;
    margin: -90px auto 0;
    padding: 75px 0 0;
    background-color: #f9f9f9;
}
.proud_say .encabezado .section_title {
    font-size: 36px;
}

/* --- servicios de la Home: icono + título + texto, en 3 columnas ---
   (la raya azul del título queda a la izquierda, como en el original) */
.servicio img {
    margin: 0 auto;
}
.servicio .texto-bloque {
    text-align: center;
}

/* --- contadores («vs_counters») --- */
.contadores {
    margin-top: 0;
}
.contador {
    padding-top: 45px;
}
.contador i {
    display: inline-block;
    margin-right: 15px;
    color: var(--color-principal);
    font-size: 45px;
    vertical-align: top;
    transition: all 0.2s ease-out;
}
.contador:hover i {
    transform: scale(1.1);
}
.contador .contenido-contador {
    display: inline-block;
    vertical-align: top;
    text-align: left;
}
.contador .numero {
    font-size: 24px;
}
.contador .numero span {
    font-family: var(--fuente-menu);
    font-size: 38px;
}
.contador .titulo {
    margin-top: 10px;
    color: #666666;
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
}

/* --- tarjetas «Cliente particular / Cliente empresa» («vs_banner») --- */
.tarjeta-cliente {
    border: 30px solid #ffffff;
}
.tarjeta-cliente .interior {
    position: relative;
}
.tarjeta-cliente .interior img {
    width: 100%;
}
.tarjeta-cliente .titulo {
    position: absolute;
    top: 50%;
    width: 100%;
    padding: 30px 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    transform: translate(0, -50%);
}
.tarjeta-cliente .titulo strong {
    font-weight: normal;
    color: var(--color-principal);
}
.tarjeta-cliente a {
    display: block;
}

/* --- pestañas («vs_tabs») sobre foto con velo --- */
.section_tabs {
    z-index: 4;
    padding: 0;
    --velo: rgba(0, 0, 0, 0.7);
}
.pestanas {
    color: #ffffff;
}
.pestanas a {
    color: #ffffff;
}
.pestanas .panel {
    display: none;
    padding: 100px;
}
.pestanas .panel.activa {
    display: block;
}
.pestanas .panel::after {
    content: "";
    display: table;
    clear: both;
}
.pestanas .panel img {
    float: right;
    margin-left: 30px;
}
.pestanas .panel h3,
.pestanas .panel h4 {
    color: #ffffff;
}
.pestanas .panel span {
    display: block;
}
.pestanas .panel p {
    line-height: 26px;
}
.pestanas .lista-pestanas {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pestanas .lista-pestanas li {
    width: 33.33%;
    text-align: center;
}
.pestanas .lista-pestanas button {
    display: block;
    width: 100%;
    padding: 30px 0;
    border: 0;
    background-color: #142340;
    color: #ffffff;
    font-family: var(--fuente-titulos);
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 400ms;
}
.pestanas .lista-pestanas button strong {
    display: block;
    color: var(--color-principal);
    font-weight: 300;
}
.pestanas .lista-pestanas .activa button {
    background-color: var(--color-principal);
}
.pestanas .lista-pestanas .activa button strong {
    color: #ffffff;
}

/* --- carrusel de noticias («blogHome»): una noticia cada vez --- */
.carrusel-noticias {
    position: relative;
    text-align: left;
}
.noticia {
    display: none;
}
.noticia.activa {
    display: flex;
    gap: 70px;
    align-items: flex-start;
}
.noticia .imagen-noticia {
    flex: 0 0 470px;
    overflow: hidden;
}
.noticia .imagen-noticia img {
    transition: all 0.2s;
}
.noticia .imagen-noticia:hover img {
    transform: scale(1.1);
}
.noticia .cuerpo-noticia {
    flex: 1 1 auto;
}
.noticia .fecha {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}
.noticia .fecha .fa {
    margin-right: 20px;
    color: var(--color-principal);
    font-size: 38px;
}
.noticia .fecha .dia {
    font-family: var(--fuente-menu);
    font-size: 30px;
    font-weight: 500;
    line-height: 30px;
}
.noticia .fecha .mes {
    color: var(--color-principal);
    font-family: var(--fuente-menu);
    font-size: 12px;
    text-transform: uppercase;
}
.noticia .titulo-noticia {
    margin-bottom: 10px;
    line-height: 26px;
}
.noticia .titulo-noticia a {
    color: #444444;
}
.noticia .titulo-noticia a:hover {
    color: var(--color-principal);
}
.noticia .info {
    color: var(--color-principal);
    text-transform: uppercase;
}
.noticia .info > div {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
}
.noticia .info .fa {
    font-size: 14px;
}
.noticia .extracto {
    margin: 30px 0 50px;
}
.noticia .pie-noticia {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* «Read more»: se monta 155 px sobre la foto, como en el original */
.noticia .leer-mas {
    position: relative;
    margin-left: -155px;
}
.noticia .leer-mas a {
    display: inline-block;
    padding: 0 60px;
    border-radius: 25px;
    background-color: var(--color-principal);
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 50px;
    text-transform: uppercase;
}
.noticia .leer-mas a:hover {
    background-color: var(--color-oscuro);
}
.compartir {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.compartir a {
    display: inline-block;
    width: 38px;
    border-radius: 3px;
    background-color: #f9f9f9;
    color: var(--color-texto-suave);
    line-height: 38px;
    text-align: center;
}
.compartir a:hover {
    background-color: var(--color-principal);
    color: #ffffff;
}

/* --- logos de clientes («vs_list_images»): 5 a la vez, en bucle --- */
.carrusel-logos {
    overflow: hidden;
}
.pista-logos {
    display: flex;
    transition: transform 0.5s ease;
}
.logo-cliente {
    flex: 0 0 20%;
    text-align: center;
}
.logo-cliente img {
    display: inline-block;
    transition: all 0.2s ease-out;
}
.logo-cliente:hover img {
    transform: scale(1.1);
}


/* ==========================================================================
   11b. CONTENIDO: PÁGINAS INTERIORES
   Artículos, blog, listados y bloques del page builder que no salen en la Home.
   ========================================================================== */

/* --- cuerpo de página: el de los artículos lleva 100 px arriba y abajo (#sp-main-body) --- */
.pagina-articulo {
    padding: 100px 0;
}
.pagina-articulo .seccion:first-of-type {
    padding-top: 0;
}
.seccion-anidada {
    padding: 0;
}
/* contenido del page builder metido dentro de una columna (cuerpo de un artículo del blog) */
.cuerpo-articulo .seccion {
    padding: 0;
}
.cuerpo-articulo .contenedor {
    width: auto;
    padding: 0;
}

/* --- texto de los artículos --- */
.texto-bloque ul,
.cuerpo-articulo ul {
    padding-left: 20px;
}
blockquote {
    margin: 0 0 20px;
    padding: 10px 20px;
    border-left: 5px solid var(--color-principal);
    font-size: 17.5px;
}
.texto-bloque img,
.cuerpo-articulo img {
    display: inline-block;
}
sup {
    font-size: 75%;
    line-height: 0;
}

/* títulos de artículo (páginas legales) */
.page-header {
    padding-bottom: 15px;
}
.entry-header {
    position: relative;
    margin-bottom: 30px;
}
.entry-header h2 {
    margin: 8px 0 0;
    font-size: 24px;
    line-height: 1;
}

/* --- columna lateral de los servicios: menú «Nuestros Servicios» --- */
.menu-lateral ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-lateral a {
    display: block;
    padding: 2px 0;
    color: #000000;
    line-height: 36px;
}
.menu-lateral a:hover,
.menu-lateral .activo > a {
    color: var(--color-principal);
}
.info-widget p {
    margin-bottom: 15px;
}
.info-widget .fa {
    margin-right: 5px;
    color: var(--color-principal);
    font-style: normal;
}

/* --- equipo («vs_teams») --- */
.equipo {
    margin-top: 30px;
}
.ficha-equipo {
    margin-bottom: 30px;
    padding-bottom: 15px;
    background-color: #ffffff;
    transition: all 0.2s ease-out;
}
.ficha-equipo:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}
.ficha-equipo .foto {
    overflow: hidden;
}
.ficha-equipo .foto img {
    margin: 0 auto;
    transition: all 0.2s ease-out;
}
.ficha-equipo:hover .foto img {
    transform: scale(1.1);
}
.ficha-equipo h3 {
    margin: 30px 0 10px;
    color: #444444;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
}
.ficha-equipo h4 {
    margin-bottom: 15px;
    color: var(--color-principal);
    font-size: 12px;
    text-transform: uppercase;
}
.redes-equipo {
    margin: 0;
    padding: 0;
    list-style: none;
}
.redes-equipo li {
    display: inline-block;
}
.redes-equipo span {
    display: block;
    width: 40px;
    border-radius: 3px;
    background-color: #ffffff;
    color: #444444;
    line-height: 40px;
    text-align: center;
    transition: all 400ms;
}
.redes-equipo span:hover {
    background-color: var(--color-principal);
    color: #ffffff;
}

/* --- datos de contacto («vs_info»): icono en círculo azul --- */
.datos-contacto {
    margin-top: 55px;
    background-color: #ffffff;
}
.datos-contacto .dato {
    padding-bottom: 45px;
}
.datos-contacto .dato:nth-child(2) {
    background-color: #fafafa;
}
.datos-contacto .fa {
    position: relative;
    width: 110px;
    margin-top: -55px;
    border-radius: 100%;
    background-color: var(--color-principal);
    color: #ffffff;
    font-size: 34px;
    line-height: 110px;
}
.datos-contacto .fa::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--color-oscuro);
    transform: scale(0);
    transition: all 0.2s ease-out;
}
.datos-contacto h4 {
    margin: 30px 0 15px;
    font-size: 16px;
    text-transform: uppercase;
}
.datos-contacto p {
    margin-bottom: 5px;
}

/* mapa de Google */
.mapa iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* --- tabla de precios («vs_pricing») --- */
.precios {
    font-family: var(--fuente-titulos);
}
.tarifa {
    margin-bottom: 30px;
    background-color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
.cabeza-tarifa {
    position: relative;
    overflow: hidden;
    padding: 40px 50px 50px;
    background-color: var(--color-principal);
}
.cabeza-tarifa h4 {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
}
.cabeza-tarifa::after {
    content: "";
    position: absolute;
    top: 84px;
    left: -58px;
    z-index: 1;
    width: 517px;
    height: 125px;
    border-radius: 50%;
    background-color: #ffffff;
}
.cabeza-tarifa i {
    position: absolute;
    right: 25px;
    bottom: -26px;
    z-index: 2;
    width: 85px;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--color-principal);
    font-size: 35px;
    line-height: 85px;
    text-align: center;
}
.precio-tarifa {
    padding: 20px 50px 30px;
}
.precio-tarifa .precio {
    color: var(--color-principal);
    font-size: 12px;
    text-transform: uppercase;
}
.precio-tarifa .precio strong {
    font-size: 34px;
}
.precio-tarifa span {
    display: block;
    font-weight: 300;
}
.cuerpo-tarifa ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cuerpo-tarifa li {
    padding: 10px 50px;
}
.cuerpo-tarifa li:nth-child(2n+1) {
    background-color: #f3f3f3;
}
.cuerpo-tarifa li::before {
    content: "\f00c";
    margin-right: 10px;
    color: #50db35;
    font: normal normal normal 11px/1 FontAwesome;
}
.cuerpo-tarifa > div {
    padding: 10px 50px 0;
}
.pie-tarifa {
    padding: 30px 50px 45px;
    text-align: center;
}
/* tarifa destacada: fondo azul */
.tarifa.destacada {
    background-color: var(--color-principal);
    color: #ffffff;
}
.tarifa.destacada .cabeza-tarifa {
    background-color: #142340;
}
.tarifa.destacada .precio-tarifa .precio {
    color: #ffffff;
}
.tarifa.destacada .cuerpo-tarifa li:nth-child(2n+1) {
    background-color: #2b8acd;
}
.tarifa.destacada .btn_marjor_radius {
    background-color: #ffffff;
    color: #444444 !important;
}

/* --- artículos del blog --- */
.entry-image,
.entry-video {
    margin-bottom: 30px;
}
.entry-video {
    position: relative;
    padding-bottom: 56.25%;
}
.entry-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.article-info {
    display: inline-block;
    margin: 0 0 20px;
    padding: 0 30px;
    border-radius: 30px;
    background-color: #fafafa;
    line-height: 70px;
}
.article-info dd {
    display: inline-block;
    margin: 0 15px;
    color: #666666;
    text-transform: uppercase;
}
.article-info .fa {
    margin-right: 3px;
}
.pie-articulo {
    margin-top: 30px;
}

/* --- columna derecha del blog (#sp-right) --- */
.lateral .modulo + .modulo {
    margin-top: 50px;
}
.lateral .titulo-modulo {
    margin: 0 0 20px;
    color: var(--color-oscuro);
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}
.lateral .titulo-modulo::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    margin-top: 10px;
    background-color: var(--color-principal);
}
.lista-categorias {
    margin: 0 10px;
    padding: 0;
    list-style: none;
}
.lista-categorias a {
    display: block;
    padding: 2px 0;
    color: #000000;
    line-height: 36px;
}
.lista-categorias a:hover {
    color: var(--color-principal);
}
.lateral .noticia-reciente h4 {
    margin-bottom: 5px;
    font-weight: 500;
}
.lateral .noticia-reciente h4 a {
    color: #444444;
}
.etiquetas {
    margin: 0;
    padding: 0;
    list-style: none;
}
.etiquetas li {
    display: inline-block;
}
.etiquetas span {
    display: inline-block;
    margin-bottom: 5px;
    padding: 0 20px;
    border-radius: 15px;
    background-color: #fafafa;
    color: #444444;
    font-size: 13px;
    line-height: 35px;
}

/* --- listado del blog: cada noticia separada por una línea --- */
.listado-blog .noticia {
    margin-bottom: 45px;
    padding-bottom: 45px;
    border-bottom: 1px solid #eeeeee;
}
.listado-blog .noticia.activa {
    gap: 40px;
}
.listado-blog .noticia .imagen-noticia {
    flex-basis: 350px;
}
.listado-blog .noticia .extracto {
    margin: 20px 0 40px;
}
.listado-blog .noticia .leer-mas {
    margin-left: 0;
}

/* --- listado de servicios: tarjetas en 3 columnas --- */
.rejilla-servicios > div {
    margin-bottom: 30px;
}
.tarjeta-servicio {
    height: 100%;
    border: 1px solid #f1f1f1;
}
.tarjeta-servicio .imagen {
    position: relative;
}
.tarjeta-servicio .imagen a::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-principal);
    opacity: 0;
    visibility: hidden;
    transition: all 400ms;
}
.tarjeta-servicio:hover .imagen a::before {
    opacity: 0.9;
    visibility: visible;
}
.tarjeta-servicio .imagen img {
    width: 100%;
}
.tarjeta-servicio .texto {
    padding: 30px;
}
.tarjeta-servicio h4 a {
    color: #444444;
}
.tarjeta-servicio h4 a:hover {
    color: var(--color-principal);
}
.tarjeta-servicio .extracto {
    margin-top: 10px;
}

/* --- mapa del sitio --- */
.mapa-sitio {
    margin: 0;
    padding-left: 20px;
}
.mapa-sitio li {
    line-height: 30px;
}

/* --- página 404 --- */
.pagina-404 .section_title {
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: 500;
}
.pagina-404 p {
    margin-bottom: 30px;
    color: var(--color-texto-suave);
    font-size: 16px;
}
.pagina-404 .btn_white_radius {
    border: 1px solid #dddddd;
}


/* ==========================================================================
   12. PIE
   ========================================================================== */

/* --- franja de redes sociales (posición «feature»), montada sobre el pie --- */
.franja-redes {
    position: relative;
    z-index: 2;
    padding: 50px 0 0;
}
.redes {
    display: flex;
    margin: 0 0 -50px;
    padding: 0;
    list-style: none;
}
.redes li {
    width: 33.3333%;
}
/* sin enlace: en la web antigua apuntaban a «#» */
.red {
    position: relative;
    display: block;
    overflow: hidden;
    color: #ffffff;
    font-family: var(--fuente-menu);
    font-size: 12px;
    line-height: 100px;
    text-align: center;
    text-indent: -25px;
    text-transform: uppercase;
    transition: all 400ms;
}
.red .fa {
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 50px;
    opacity: 0.1;
    text-indent: 0;
    transform: translate(0, -50%);
}
.red:hover {
    background-color: var(--color-oscuro) !important;
    text-indent: 0;
}
.red-facebook { background-color: rgba(28, 73, 168, 1); }
.red-twitter { background-color: rgba(53, 156, 240, 1); }
.red-instagram { background-color: rgba(148, 21, 15, 1); }

/* --- tres columnas (#sp-bottom) sobre foto con velo negro al 90 % --- */
.pie {
    position: relative;
    padding: 120px 0 80px;
    background-color: var(--pie-fondo);
    background-image: url("../img/bg_footer.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    color: var(--pie-texto);
}
.pie::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000000;
    opacity: 0.9;
}
.pie > .contenedor {
    position: relative;
    z-index: 1;
}
@media (min-width: 992px) {
    .pie .fila {
        margin-right: -60px;
        margin-left: -60px;
    }
    .pie .fila > [class*="col-"] {
        padding-right: 60px;
        padding-left: 60px;
    }
}
.pie a {
    color: var(--pie-texto);
}
.pie a:hover {
    color: #ffffff;
}
.pie .modulo + .modulo {
    margin-top: 50px;
}
.pie .titulo-modulo {
    margin: 8px 0 30px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
}
.pie .titulo-modulo::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    margin-top: 10px;
    background-color: var(--color-principal);
}
.pie ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pie .menu-pie a {
    display: block;
    padding: 2px 0;
    line-height: 36px;
}
.pie .logo-pie {
    margin-bottom: 20px;
}
.pie .contacto-pie li {
    padding-top: 10px;
}
.pie .contacto-pie .fa {
    width: 35px;
    margin-right: 10px;
    border-radius: 3px;
    color: #ffffff;
    background-color: var(--color-principal);
    line-height: 35px;
    text-align: center;
}

/* noticias recientes («blogRecent»): miniatura de 85 px + título + fecha */
.noticia-reciente {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.noticia-reciente .miniatura {
    width: 85px;
}
.noticia-reciente .texto {
    width: calc(100% - 100px);
}
.noticia-reciente h4 {
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;
}
.noticia-reciente .fecha {
    color: var(--color-principal);
}

/* galería de 12 miniaturas de 100 × 100 */
.galeria-pie {
    display: flex;
    flex-wrap: wrap;
}
.galeria-pie a {
    display: block;
}
.galeria-pie img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.logo-ministerio {
    margin: 0 auto;
}

/* --- copyright (#sp-footer) --- */
.copyright {
    padding: 20px 0;
    background-color: var(--copyright-fondo);
    color: var(--copyright-texto);
    text-align: center;
}
.copyright a {
    color: var(--copyright-enlace);
}
.copyright a:hover {
    color: #ffffff;
}


/* ==========================================================================
   13. ELEMENTOS FIJOS
   ========================================================================== */

/* --- botón «volver arriba» (.scrollup) --- */
.volver-arriba {
    position: fixed;
    right: 100px;
    bottom: 62px;
    z-index: 999;
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dddddd;
    background-color: rgba(255, 255, 255, 0.4);
    color: #000000;
    font-size: 25px;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
}
.volver-arriba:hover {
    background-color: #c4c4c4;
}
.volver-arriba.visible {
    display: block;
}

/* --- aviso de cookies (plugin Cookies Pro): barra negra abajo --- */
.aviso-cookies {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10001;
    width: 100%;
    padding: 4px 0;
    background: #000000;
    color: #ffffff;
    text-align: center;
}
.aviso-cookies p {
    margin: 0;
    padding: 4px;
}
.aviso-cookies button {
    margin: 0 10px;
    padding: 2px 10px;
    border: 0;
    background: var(--color-principal);
    color: #ffffff;
    cursor: pointer;
}
.aviso-cookies[hidden] {
    display: none;
}

/* --- visor de fotos de la galería (sustituye a Magnific Popup) --- */
.visor {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 11, 11, 0.8);
}
.visor[hidden] {
    display: none;
}
.visor img {
    max-width: 90%;
    max-height: 85vh;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.visor button {
    position: absolute;
    border: 0;
    background: none;
    color: #ffffff;
    font-size: 40px;
    cursor: pointer;
    opacity: 0.65;
}
.visor button:hover {
    opacity: 1;
}
.visor .cerrar { top: 10px; right: 20px; }
.visor .anterior { left: 20px; }
.visor .siguiente { right: 20px; }


/* ==========================================================================
   14. FORMULARIOS
   Aspecto de Bootstrap 3 (BreezingForms usaba sus clases).
   ========================================================================== */

.formulario .campo {
    margin-bottom: 15px;
}
.formulario label {
    display: block;
    margin-bottom: 5px;
    font-weight: normal;
}
.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario select,
.formulario textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #ffffff;
    color: #555555;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.428571429;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.formulario textarea {
    height: auto;
    min-height: 131px;
}
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.formulario .obligatorio {
    color: #d9534f;
}
.formulario button[type="submit"] {
    border: 0;
    cursor: pointer;
}
.formulario fieldset {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}
.formulario legend {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
    color: var(--color-oscuro);
    font-family: var(--fuente-titulos);
    font-size: 21px;
}
.formulario .casilla,
.formulario .opcion {
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}
.formulario .casilla input,
.formulario .opcion input {
    margin-right: 5px;
}
.formulario .etiqueta-grupo {
    display: block;
    margin-bottom: 5px;
}
/* errores devueltos por enviar.php */
.errores-formulario {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ebccd1;
    border-radius: 4px;
    background-color: #f2dede;
    color: #a94442;
}
.errores-formulario p {
    margin: 0 0 5px;
    font-weight: bold;
}
.errores-formulario ul {
    margin: 0;
    padding-left: 20px;
}
/* campo trampa antispam: fuera de la vista y de la navegación con teclado */
.campo-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ==========================================================================
   15. MÓVIL Y TABLET
   ========================================================================== */

/* por debajo de 1170 px el slider se escala entero (como Revolution Slider) */
@media (max-width: 1169px) {
    .slider {
        height: calc(100vw * 815 / 1170);
        min-height: 420px;
    }
}

/* tablet y móvil: menú plegable */
@media (max-width: 991px) {
    .menu-principal {
        display: none;
    }
    .boton-menu {
        display: block;
    }
    .contacto-superior li {
        padding: 0 20px;
    }
    .noticia.activa {
        flex-direction: column;
        gap: 30px;
    }
    .noticia .imagen-noticia {
        flex-basis: auto;
    }
    .noticia .leer-mas {
        margin-left: 0;
    }
    .pie .fila > [class*="col-"] + [class*="col-"] {
        margin-top: 50px;
    }
    .pagina-articulo {
        padding: 60px 0;
    }
    .lateral {
        margin-top: 50px;
    }
    .listado-blog .noticia .imagen-noticia {
        flex-basis: auto;
    }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    .volver-arriba {
        right: 25px;
        bottom: 25px;
    }
}

/* móvil */
@media (max-width: 767px) {
    :root {
        --alto-cabecera: 90px;
    }
    .contacto-superior {
        text-align: center;
    }
    .contacto-superior li {
        margin: 0 5px;
        padding: 0;
        border-right: 0;
        font-size: 89%;
        line-height: 30px;
    }
    .encabezado .section_title {
        font-size: 26px;
    }
    .encabezado h3.text_after {
        font-size: 16px;
    }
    .encabezado.header_video h2 {
        font-size: 34px;
        line-height: 40px;
    }
    .encabezado .number {
        font-size: 120px;
    }
    .proud_say {
        margin-top: 0;
    }
    .contador .contenido-contador {
        margin-top: 20px;
    }
    .pestanas .panel {
        padding: 35px;
    }
    .pestanas .panel img {
        float: none;
        margin: 0 0 15px;
    }
    .pestanas .panel h3 {
        margin-top: 15px;
        font-size: 28px !important;
    }
    .pestanas .panel h4 {
        font-size: 20px !important;
    }
    .pestanas .lista-pestanas {
        flex-direction: column;
    }
    .pestanas .lista-pestanas li {
        width: 100%;
    }
    .logo-cliente {
        flex-basis: 50%;
    }
    .redes {
        flex-direction: column;
    }
    .redes li {
        width: 100%;
    }
    .volver-arriba {
        right: 25px;
        bottom: 25px;
    }
    .franja-titulo {
        padding: 200px 0 60px;
        background-attachment: scroll;
    }
    .seccion-foto {
        background-attachment: scroll;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .logo-cliente {
        flex-basis: 33.3333%;
    }
}