@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Lato:wght@400;700&family=Montserrat:wght@400;500;600;700&family=Mulish:ital,wght@0,400;0,600;0,700;1,400&family=Nunito+Sans:wght@400;600;700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@400;500;600;700&display=swap");
/*
 * css/css.css — Presticorp
 * Sobrescrituras de tema y estilos compartidos (inclusion/head.php enlaza este archivo en páginas que usan ese head).
 * Organización: bloques comentados por archivo o conjunto de archivos; orden alfabético por ruta/nombre de archivo.
 * No se eliminaron reglas; solo agrupación y comentarios.
 * @import línea 1: fuentes Google para HTML de condiciones/privacidad guardado con CKEditor (inline font-family).
 */

/* =============================================================================
 * administracion/blog/consulta_comentarios.php
 * Botón de búsqueda junto al campo de filtro de comentarios.
 * ============================================================================= */
.botonbuscar {
    border: 1px solid rgb(224, 224, 224);
    border-radius: 0px 7px 7px 0px;
}

/* =============================================================================
 * administracion/configuracion/configuracion.php
 * Textareas de textos legales/acerca de; etiquetas en configuración; CKEditor (historia, misión, visión, política y términos).
 * También: .body-inner label en otras páginas admin que comparten el mismo patrón de formulario.
 * ============================================================================= */
/*CONFIGURACION*/
#txt_nuestra_historia,
#txt_mision,
#txt_vision,
#txt_politica_privacidad,
#txt_terminos_condiciones {
    width: 100%;
    padding: 20px;
}
.configuracion label,
.body-inner label {
    color: black;
}

/* --- CKEditor en administracion/configuracion/configuracion.php (historia, misión, visión, política y términos) --- */
/* Vista previa alineada con theme-default.css (Muli = cuerpo del sitio público) */
.configuracion .config-ckeditor-wrap .ck.ck-editor__editable {
    min-height: 220px;
    font-family: "Muli", sans-serif;
}

.configuracion .config-ckeditor-wrap .ck.ck-editor {
    max-width: 100%;
}

/* Barra CKEditor con muchas herramientas (configuracion.php): varias filas sin desbordar horizontalmente */
.configuracion .config-ckeditor-wrap .ck.ck-toolbar {
    flex-wrap: wrap;
    row-gap: 0.35rem;
    justify-content: flex-start;
}

/* Clases auxiliares de fuentes (Google Fonts en head de configuracion.php; editorConfig.fontFamily). */
.config-ckeditor-wrap .ck-content .great-vibes-regular {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
}

.config-ckeditor-wrap .ck-content .roboto-config-400 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.config-ckeditor-wrap .ck-content .inter-config-400 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.config-ckeditor-wrap .ck-content .source-sans-3-config-400 {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* =============================================================================
 * administracion (varias pantallas)
 * Cabecera moderna admin, tablas Bootstrap/DataTables, tabla leads, badges.
 * Archivos (orden alfabético): administracion/blog/ajax_visitas.php,
 * administracion/blog/consulta_comentarios.php, administracion/blog/consulta_noticias.php,
 * administracion/blog/crear_noticia.php, administracion/categorias_blog/alta.php,
 * administracion/categorias_blog/ver.php, administracion/landing_startups/consultar.php,
 * administracion/suscripciones/consultar.php, administracion/usuarios/consultar.php
 * ============================================================================= */
/* Encabezados modernos de administracion */
.admin-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
    flex-wrap: wrap;
    gap: 15px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.admin-header-modern .admin-title-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-header-modern .admin-icon {
    width: 50px;
    height: 50px;
    background-color: #f4f7fc;
    border: 1px solid #e2e8f0;
    color: #2b5fe8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.admin-header-modern .admin-title-text {
    display: flex;
    flex-direction: column;
}

.admin-header-modern .admin-title {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1e29 !important;
    line-height: 1.2 !important;
    padding-bottom: 0 !important;
    border: none !important;
}

.admin-header-modern .admin-subtitle {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
    margin-top: 4px;
}

.admin-header-modern .admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-header-modern .admin-actions .btn {
    border-radius: 4px;
    font-weight: 500;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-size: 14px;
}

/* Estilos Modernos para Tablas de Administracion */
.table-responsive,
.leads-table-wrapper {
    background: #fff;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #eaeaea !important;
    margin-bottom: 30px;
    padding: 0;
    overflow: hidden;
}

table.table {
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

table.table thead th {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 0.5px;
    padding: 16px 20px !important;
    border-bottom: 1px solid #eaeaea !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap;
}

table.table tbody td {
    padding: 16px 20px !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    color: #1a1e29 !important;
    border-bottom: 1px solid #f4f7fc !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

table.table tbody tr {
    transition: all 0.2s ease;
    background-color: #fff !important;
}

table.table tbody tr:hover {
    background-color: #f8faff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    transform: translateY(-1px);
    z-index: 10;
    position: relative;
}

/* Para ocultar bordes en tablas "bordered" de bootstrap */
table.table-bordered {
    border: none !important;
}

/* Ajustes DataTables */
.dataTables_wrapper {
    padding: 20px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 14px !important;
    margin-left: 5px;
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    background: #fff !important;
    color: #1a1e29 !important;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #2b5fe8 !important;
    color: #fff !important;
    border-color: #2b5fe8 !important;
    box-shadow: 0 4px 10px rgba(43, 95, 232, 0.2);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    background: #f4f7fc !important;
    color: #2b5fe8 !important;
    border-color: #dbe4f9 !important;
}

.dataTables_filter input {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 16px;
    margin-left: 8px;
    outline: none;
    transition: all 0.2s;
    font-size: 13px;
    color: #1a1e29;
}

.dataTables_filter input:focus {
    border-color: #2b5fe8;
    box-shadow: 0 0 0 3px rgba(43, 95, 232, 0.1);
}

.dataTables_length select {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 12px;
    outline: none;
    font-size: 13px;
}

.dataTables_info {
    font-size: 13px;
    color: #6c757d !important;
    padding-top: 15px !important;
}

/* --- TABLA LIMPIA Y MODERNA --- */
.leads-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #eaeaea;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
}

.leads-table {
    table-layout: fixed;
    width: 100%;
    min-width: 900px;
    border: none !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.leads-table thead {
    background-color: #f8f9fa;
}

.leads-table th {
    color: #6c757d !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.5px;
    padding: 16px 15px !important;
    border-bottom: 1px solid #eaeaea !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap;
    background-color: transparent !important;
}

.leads-table th i,
.leads-table th::before {
    color: #adb5bd !important;
    margin-right: 6px;
}

.leads-table td {
    padding: 16px 15px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #333 !important;
    border-bottom: 1px solid #f4f7fc !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.leads-table tbody tr {
    transition: all 0.2s ease;
    background-color: #fff !important;
}

.leads-table tbody tr:hover {
    background-color: #f8faff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    transform: translateY(-1px);
}

.leads-table .col-nombre {
    width: 14%;
    min-width: 120px;
}
.leads-table .col-email {
    width: 18%;
    min-width: 160px;
    color: #2b5fe8 !important;
    font-weight: 500;
}
.leads-table .col-telefono {
    width: 14%;
    min-width: 120px;
}
.leads-table .col-landing {
    width: 12%;
    min-width: 110px;
}
.leads-table .col-info {
    width: 16%;
    min-width: 130px;
}
.leads-table .col-ip {
    width: 14%;
    min-width: 120px;
}
.leads-table .col-fecha {
    width: 12%;
    min-width: 110px;
    color: #6c757d !important;
}

.leads-table td:nth-child(5),
.leads-table td:nth-child(6) {
    word-break: break-word;
    overflow-wrap: break-word;
}

.leads-table td:nth-child(6) small {
    display: block;
    font-size: 11px;
    color: #adb5bd;
    margin-top: 4px;
}

/* Badges estilo pastel */
.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-block;
    border: none !important;
}
.badge-info {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}
.badge-secondary {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}
.badge-primary {
    background-color: #e0e7ff !important;
    color: #4338ca !important;
}
.badge-success {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}

/* =============================================================================
 * blog.php
 * Área de suscripción usa la clase .bg_color del tema; la regla CSS está en la sección
 * inclusion/barramenus.php (misma clase en la franja superior y en blog).
 * ============================================================================= */

/* =============================================================================
 * condiciones.php · privacidad.php
 * Contenedor body-inner en páginas legales. $terminos_condiciones / $politica_privacidad (conexion/variables.php).
 * .pagina-legal-html: mismo HTML que en administracion/configuracion/configuracion.php (CKEditor); aquí se duplican
 * clases de fuente/tamaño/resaltado/tablas que en admin van bajo .ck-content y en blog bajo .blog_dtl_content, para
 * que el tema (theme-default h1–h4 ~35px) no pise el formato guardado en BD; los estilos inline del HTML siguen mandando.
 * ============================================================================= */
.pagina-legal-html {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #334155;
    max-width: 52rem;
}
/* Encabezados: em respecto al contenedor; theme-default ya no fuerza 35px; style="" en BD gana. */
.pagina-legal-html h1,
.pagina-legal-html h2,
.pagina-legal-html h3,
.pagina-legal-html h4 {
    color: inherit;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.65rem;
    line-height: 1.3;
    font-family: inherit;
}
.pagina-legal-html h1 {
    font-size: 2em;
}
.pagina-legal-html h2 {
    font-size: 1.75em;
}
.pagina-legal-html h3 {
    font-size: 1.5em;
}
.pagina-legal-html h4 {
    font-size: 1.25em;
}
.pagina-legal-html h1:first-child,
.pagina-legal-html h2:first-child,
.pagina-legal-html h3:first-child {
    margin-top: 0;
}
.pagina-legal-html p {
    margin-bottom: 1rem;
}
.pagina-legal-html ul,
.pagina-legal-html ol {
    margin: 0 0 1rem 1.25rem;
}
.pagina-legal-html a {
    color: #b91c1c;
    text-decoration: underline;
}
.pagina-legal-html a:hover {
    color: #991b1b;
}

/* Clases de fuente del desplegable CKEditor (configuracion.php editorConfig.fontFamily); antes solo en .config-ckeditor-wrap .ck-content */
.pagina-legal-html .great-vibes-regular {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
}

.pagina-legal-html .roboto-config-400 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.pagina-legal-html .inter-config-400 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.pagina-legal-html .source-sans-3-config-400 {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Presets fontSize CKEditor (tiny/small/big/huge); alineado con .blog_dtl_content en blog.css */
.pagina-legal-html .text-tiny {
    font-size: 0.7em;
}

.pagina-legal-html .text-small {
    font-size: 0.85em;
}

.pagina-legal-html .text-big {
    font-size: 1.4em;
}

.pagina-legal-html .text-huge {
    font-size: 1.8em;
}

/* Plugin Highlight (marcadores y bolígrafos) */
.pagina-legal-html mark,
.pagina-legal-html .marker-yellow {
    background-color: var(--ck-highlight-marker-yellow, #fdfd77);
}

.pagina-legal-html .marker-green {
    background-color: var(--ck-highlight-marker-green, #63f963);
}

.pagina-legal-html .marker-pink {
    background-color: var(--ck-highlight-marker-pink, #fc7999);
}

.pagina-legal-html .marker-blue {
    background-color: var(--ck-highlight-marker-blue, #72ccfd);
}

.pagina-legal-html .pen-red {
    color: var(--ck-highlight-pen-red, #e91313);
    background-color: transparent;
}

.pagina-legal-html .pen-green {
    color: var(--ck-highlight-pen-green, #118800);
    background-color: transparent;
}

/* Tablas y citas (CKEditor en textos legales) */
.pagina-legal-html figure.table {
    display: table;
    margin: 0.9em auto;
}

.pagina-legal-html table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px double #b3b3b3;
}

.pagina-legal-html table td,
.pagina-legal-html table th {
    min-width: 2em;
    padding: 0.4em;
    border: 1px solid #bfbfbf;
}

.pagina-legal-html table th {
    font-weight: bold;
    background: rgba(0, 0, 0, 0.05);
}

.pagina-legal-html blockquote {
    overflow: hidden;
    padding: 0.8em 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: 5px solid #ccc;
    color: #555;
    background: #f9f9f9;
    margin-top: 1em;
    margin-bottom: 1em;
}

.pagina-legal-html hr {
    margin: 15px 0;
    height: 4px;
    background: #dedede;
    border: 0;
}

.pagina-legal-html code {
    background-color: hsla(0, 0%, 78%, 0.3);
    padding: 0.15em;
    border-radius: 2px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9em;
}

.pagina-legal-html pre {
    padding: 1em;
    color: #353535;
    background: hsla(0, 0%, 78%, 0.3);
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    text-align: left;
    tab-size: 4;
    white-space: pre-wrap;
    font-size: 0.85em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    margin-bottom: 1em;
    overflow-x: auto;
}

.pagina-legal-html pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* administracion/configuracion/configuracion.php — mensaje tras guardar información empresa (AJAX en js/accion.js) */
.config-informacion-empresa-feedback {
    display: none;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
}
.config-informacion-empresa-feedback.is-visible {
    display: block;
}
.config-informacion-empresa-feedback.is-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.config-informacion-empresa-feedback.is-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* =============================================================================
 * index.php
 * Portada: secciones Techno (servicios, misión, portafolio, habilidades, testimonios, equipo, precios, CTA), menú meanmenu, mensaje #status.
 * Imágenes en bloques .image del tema; media query responsive para home/our-contact/skill.
 * ============================================================================= */
.success {
    color: green;
    font-size: 17px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.bg-up {
    height: auto;
}
.single-testimonial {
    background: #580000;
}
.home-button a {
    background: linear-gradient(110deg, rgb(94 0 0) 0%, rgb(249 36 36) 100%);
}
.home-button a:hover {
    background: linear-gradient(110deg, rgb(249 36 36) 100%, rgb(94 0 0) 0%);
}
.button a {
    background: rgb(143, 0, 0);
}
.button a:before {
    background: rgb(249 36 36);
}
.button.two a {
    color: white;
}
.team_style_three_content:before {
    background: #580000;
}
.service-section {
    background-image: url(../imagenes/fondos/fondo1.jpg);
}
.portfolio-section {
    background-color: #580000;
    background-image: url(../imagenes/fondos/portafolio.png);
    background-repeat: no-repeat;
    background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
}
.section_main_title h1 span {
    color: #ff0000;
}
.home-title h1 span {
    color: #ff0000;
}
.color-full {
    color: #ff0000;
}
.section_sub_title h6 {
    color: #ff0000;
}
li.current a {
    background: #ac0000;
}
.mission-section .accordion a.active {
    color: #db0c0c !important;
}
.pricing_style_four_button a {
    background: #580000;
}
.pricing_style_four_button a:before {
    background: #d70000;
}
.skill-section {
    background-image: url(../imagenes/fondos/habilidades.png);
}
.call-do-section {
    background-image: url(../imagenes/fondos/comencemos.png);
}
.mean-container .mean-bar::before {
    content: "" !important;

    display: block;
    width: 50px; /* Ajusta el tamaño */
    height: 50px;
    background-image: url("https://presticorp.com/landings/presticorp.com/imagenes/logo/logo.png");
    background-size: cover;
    background-position: center;
}
.mean-container .mean-bar {
    background: #040404;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pricing_style_four_body ul li {
    color: black;
}
.image img {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* =============================================================================
 * inclusion/barramenus.php
 * Franja superior del header (header_top_menu) incluida en index y otras vistas que cargan este partial.
 * ============================================================================= */
.bg_color {
    background: #580000;
}

/* =============================================================================
 * login.php
 * Checkbox "Recordar", logo y toggle de contraseña en el formulario de acceso.
 * ============================================================================= */
.recordar {
    color: black !important;
}

/*
 * Página de login (login.php): columna única centrada en el viewport.
 * El tema (theme-default.css) define body { text-align: left }; login-page-body + login-page-inner
 * fuerzan un bloque con margin auto y ancho máximo común para logo y formulario.
 */
.login-page .login-page-stack {
    width: 100%;
}

/* Contenedor estrecho centrado: logo y form comparten el mismo eje (evita “logo a la izquierda”) */
body.login-page-body .login-page-inner {
    box-sizing: border-box;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* La fila Bootstrap no añade ancho extra fuera del bloque centrado */
body.login-page-body .login-page-inner .login-page-form-row {
    margin-left: 0;
    margin-right: 0;
}

/* Logo e imagen centrados (login.php + inclusion/head.php) */
body.login-page-body .login-page-logo-wrap {
    display: block;
    width: 100%;
    /* blog.css alinea .text-center a la izquierda en desktop; login no usa esa clase */
    text-align: center;
    float: none;
}
body.login-page-body .login-page-logo-link {
    display: inline-block;
    vertical-align: middle;
}
body.login-page-body .login-page-logo-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    float: none;
}

/* Formulario: ya limitado por .login-page-inner */
body.login-page-body .login-form-column {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-top: 50px;
    width: 100%;
}

/* Botón ojo: mostrar/ocultar contraseña (js/accion.js) */
.login-password-toggle {
    cursor: pointer;
}

/* =============================================================================
 * Variable class_fondo_menu (header) — opciones en administracion/configuracion/configuracion.php
 * Clases aplicadas al <header> según configuración y en inclusion/barramenus vía variables globales.
 * Archivos con header dinámico (orden alfabético): administracion/blog/crear_noticia_yellowtext.php,
 * administracion/landing_startups/consultar.php, administracion/suscripciones/consultar.php,
 * administracion/usuarios/consultar.php, … (mismo patrón en otras pantallas admin).
 * ============================================================================= */
.verde {
    background: #00913f !important;
    color: white !important;
}
.rojo {
    background: #ae2029 !important;
    color: white !important;
}
.azul {
    background: #0000ff !important;
    color: white !important;
}
.amarillo {
    background: #ffff00 !important;
    color: green !important;
}
.naranja {
    background: #ffa500 !important;
    color: white !important;
}
.negro {
    background: black !important;
    color: white !important;
}
.gris {
    background: #2f2f2f !important;
    color: white !important;
}

.blanco {
    background: white !important;
    color: black !important;
}

.salmon {
    background: rgb(238, 92, 88) !important;
    background: -moz-linear-gradient(
        90deg,
        rgba(238, 92, 88, 1) 0%,
        rgba(237, 106, 80, 1) 35%,
        rgba(245, 120, 101, 1) 100%
    ) !important;
    background: -webkit-linear-gradient(
        90deg,
        rgba(238, 92, 88, 1) 0%,
        rgba(237, 106, 80, 1) 35%,
        rgba(245, 120, 101, 1) 100%
    ) !important;
    background: linear-gradient(
        90deg,
        rgba(238, 92, 88, 1) 0%,
        rgba(237, 106, 80, 1) 35%,
        rgba(245, 120, 101, 1) 100%
    ) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ee5c58",endColorstr="#f57865",GradientType=1) !important;
    color: white !important;
}
.salmon label,
.salmon p,
.salmon h2,
.salmon h4 {
    color: white !important;
}
.dorado {
    background: rgb(171, 129, 0);
    background: -moz-linear-gradient(
        90deg,
        rgba(171, 129, 0, 1) 0%,
        rgba(168, 134, 7, 1) 35%,
        rgba(228, 184, 69, 1) 100%
    ) !important;
    background: -webkit-linear-gradient(
        90deg,
        rgba(171, 129, 0, 1) 0%,
        rgba(168, 134, 7, 1) 35%,
        rgba(228, 184, 69, 1) 100%
    ) !important;
    background: linear-gradient(
        90deg,
        rgba(171, 129, 0, 1) 0%,
        rgba(168, 134, 7, 1) 35%,
        rgba(228, 184, 69, 1) 100%
    ) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ab8100",endColorstr="#e4b845",GradientType=1) !important;
    color: white !important;
}
.dorado label,
.dorado p,
.salmon h2,
.dorado h4,
.dorado h2 {
    color: white !important;
}
.rosa {
    background: #ffc0cb;
    color: black;
}

/* =============================================================================
 * inclusion/piepagina.php — Carrusel "Artículos populares" (Owl en js/accion.js): 1 slide; imagen solo si is_file (variables.php).
 * Sin imagen: metadescripcion (o extracto contenido). Textos en blanco para pie oscuro (.style-four).
 * ============================================================================= */
.footer-pop-slide {
    box-sizing: border-box;
}

.footer-blog-pop-carousel .footer-pop-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(173, 176, 190, 0.45);
}

.footer-blog-pop-carousel .footer-pop-media {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 6px;
    line-height: 0;
    background: rgba(0, 0, 0, 0.2);
}

.footer-blog-pop-carousel .footer-pop-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 110px;
    max-height: 200px;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.25s ease, transform 0.35s ease;
}

.footer-blog-pop-carousel .footer-pop-media:hover .footer-pop-img {
    opacity: 0.92;
    transform: scale(1.02);
}

.footer-blog-pop-carousel .footer-pop-meta-desc {
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.65rem 0.7rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    line-height: 1.45;
    color: #ffffff;
    min-height: 3.5rem;
}

.footer-blog-pop-carousel .footer-pop-body {
    width: 100%;
    max-width: 100%;
    padding-top: 0.65rem;
}

.footer-blog-pop-carousel .footer-pop-title {
    margin: 0 0 0.45rem;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}

.footer-blog-pop-carousel .footer-pop-title a {
    display: block;
    width: 100%;
    color: #ffffff !important;
    text-decoration: none;
}

.footer-blog-pop-carousel .footer-pop-title a:hover {
    color: #c7ddff !important;
}

.footer-blog-pop-carousel .footer-pop-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
}

.footer-blog-pop-carousel .footer-pop-line {
    display: block;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.footer-blog-pop-carousel .footer-pop-lbl {
    display: inline-block;
    margin-right: 0.35rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
}

.footer-blog-pop-carousel .footer-pop-author,
.footer-blog-pop-carousel .footer-pop-date {
    color: #ffffff;
}

.footer-blog-pop-carousel .owl-stage-outer {
    overflow: hidden;
}

/* Sin .owl-nav / .owl-dots: carrusel solo automático (js/accion.js). */

/* =============================================================================
 * Media queries (al final; orden: pantalla más grande → más chica, max-width descendente)
 * max-width 768px: administracion (cabecera .admin-header-modern)
 * max-width 600px: index.php (home, contacto, botones, skill-thumb)
 * ============================================================================= */
@media (max-width: 768px) {
    .admin-header-modern {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-header-modern .admin-actions {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .home-thumb img {
        margin: 0px;
    }
    .our-contact {
        display: block;
        margin-top: 10px;
    }
    .our-contact img {
        display: none;
    }
    .our-contact p {
        margin-top: 10px;
    }
    .home-button {
        margin-bottom: 20px;
    }
    .skill-thumb img {
        margin: 0 auto;
    }
}