/* =====================================================================
   TIPOGRAFÍA GLOBAL  ·  Talleres Benalúa
   ---------------------------------------------------------------------
   Títulos  → Oswald 16px
   Párrafos → Roboto Condensed 14px

   Para cambiar fuentes o tamaños basta con tocar las variables de :root.

   Las plantillas y las páginas guardadas en la base de datos traen sus
   propios <style> DESPUÉS de esta hoja, algunos con !important. Por eso
   cada regla empieza por html:not(#_):not(#_), que no selecciona nada
   distinto pero sube la especificidad para ganarles a todos.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;500;600;700&family=Roboto+Condensed:ital,wght@0,400;1,400&display=swap');

:root {
    --tb-font-titulos: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    --tb-font-parrafos: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    --tb-size-titulos: 16px;
    --tb-size-parrafos: 14px;
}

/* --- Párrafos y texto general ---
   Quedan fuera los iconos, los emojis decorativos, el logotipo "TB" y la
   barra de administración: cambiarles la fuente o el tamaño los rompería. */
html:not(#_):not(#_) body,
html:not(#_):not(#_) :is(
    div, section, article, aside, header, footer, nav, main,
    p, li, dt, dd, blockquote, figcaption, address, cite,
    a, span, strong, b, em, small, u, mark, time, abbr,
    td, th, caption, label, legend, summary,
    button, input, select, textarea, option
):where(:not(
    [aria-hidden="true"],
    [class*="icon"], [class*="icon"] *,
    [class*="brand-mark"], [class*="brand-mark"] *,
    [class*="dashicons"],
    .fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"],
    #wpadminbar, #wpadminbar *
)) {
    font-family: var(--tb-font-parrafos) !important;
    font-size: var(--tb-size-parrafos) !important;
    font-weight: 400 !important;
}

/* --- Títulos: encabezados reales y lo que hace de título sin serlo --- */
html:not(#_):not(#_) :is(
    h1, h2, h3, h4, h5, h6,
    h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
    .site-title, .site-title a, .entry-title, .entry-title a, .widget-title,
    .tbxg-brand-text strong, .tbx-brand-text strong,
    .tbxg-dropdown-head strong, .tbx-submenu-head strong,
    .tbxg-mobile-services-head strong,
    .tbxg-footer-col > strong,
    .tbx-proof-card strong,
    .tbxh-contact-title strong, .tbxh-reviews-copy strong
):where(:not(
    [aria-hidden="true"],
    [class*="icon"], [class*="icon"] *,
    #wpadminbar, #wpadminbar *
)) {
    font-family: var(--tb-font-titulos) !important;
    font-size: var(--tb-size-titulos) !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}

/* --- Los títulos no pierden la negrita con la regla de texto normal ---
   Lo que va dentro de un encabezado hereda su grosor, y los títulos hechos
   con <strong> van en negrita. */
html:not(#_):not(#_) :is(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *) {
    font-weight: inherit !important;
}

html:not(#_):not(#_) :is(
    .site-title, .site-title a, .entry-title a, .widget-title,
    :is(h1, h2, h3, h4, h5, h6) :is(strong, b),
    .tbxg-brand-text strong, .tbx-brand-text strong,
    .tbxg-dropdown-head strong, .tbx-submenu-head strong,
    .tbxg-mobile-services-head strong,
    .tbxg-footer-col > strong,
    .tbx-proof-card strong,
    .tbxh-contact-title strong, .tbxh-reviews-copy strong
) {
    font-weight: 700 !important;
}

/* --- El logotipo conserva su tamaño, solo cambia de fuente --- */
html:not(#_):not(#_) :is([class*="brand-mark"], [class*="brand-mark"] *) {
    font-family: var(--tb-font-titulos) !important;
}

/* --- Móvil: con menos de 16px en un campo, iPhone hace zoom al escribir --- */
@media (max-width: 768px) {
    html:not(#_):not(#_) :is(input, select, textarea) {
        font-size: 16px !important;
    }
}

/* =====================================================================
   INICIO  ·  Cabecera con la foto a todo el ancho
   El título principal es la única excepción a los 16px de los títulos.
   ===================================================================== */
html:not(#_):not(#_) .tbxh-portada {
    position: relative;
    overflow: hidden;
    background: #0a1f44;
    color: #fff;
}

html:not(#_):not(#_) .tbxh-portada-foto {
    position: absolute;
    inset: 0;
    background: var(--tbxh-hero-image, url('/wp-content/uploads/2026/06/talleres-benalua-hero-1-1536x745.webp')) center / cover no-repeat;
    opacity: .38;
}

html:not(#_):not(#_) .tbxh-portada-in {
    position: relative;
    width: min(1500px, 100% - 2 * clamp(16px, 2.5vw, 40px));
    margin-inline: auto;
    padding: 70px 0 44px;
    text-align: center;
}

html:not(#_):not(#_) .tbxh-portada-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #fff;
    font-size: 13px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
}

html:not(#_):not(#_) .tbxh-portada-kicker::before {
    content: "";
    width: 34px;
    height: 4px;
    border-radius: 4px;
    background: #ffc61a;
}

html:not(#_):not(#_) .tbxh-portada h1 {
    margin: 16px 0 0;
    color: #fff;
    font-size: 42px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

html:not(#_):not(#_) .tbxh-portada-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

html:not(#_):not(#_) .tbxh-portada-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 12px;
    color: #fff !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

html:not(#_):not(#_) .tbxh-portada-btn--main {
    border-color: #ffc61a;
    background: #ffc61a;
    color: #0a1f44 !important;
}

html:not(#_):not(#_) .tbxh-portada-btn svg {
    width: 20px;
    height: 20px;
    flex: none;
}

html:not(#_):not(#_) .tbxh-portada-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 44px;
}

html:not(#_):not(#_) .tbxh-portada-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 20px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    background: rgba(10, 31, 68, .55);
    color: #fff !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

html:not(#_):not(#_) .tbxh-portada-card:hover,
html:not(#_):not(#_) .tbxh-portada-card:focus-visible {
    border-color: #ffc61a;
}

html:not(#_):not(#_) .tbxh-portada-card svg {
    width: 26px;
    height: 26px;
    color: #ffc61a;
}

@media (max-width: 767px) {
    html:not(#_):not(#_) .tbxh-portada-foto {
        background-position: 38% center;
    }

    html:not(#_):not(#_) .tbxh-portada-in {
        padding: 44px 0 28px;
    }

    html:not(#_):not(#_) .tbxh-portada-kicker {
        font-size: 12px !important;
        letter-spacing: .12em;
    }

    html:not(#_):not(#_) .tbxh-portada h1 {
        font-size: 30px !important;
    }

    html:not(#_):not(#_) .tbxh-portada-btns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
    }

    html:not(#_):not(#_) .tbxh-portada-btn {
        justify-content: center;
        padding: 0 10px;
    }

    html:not(#_):not(#_) .tbxh-portada-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 28px;
    }

    html:not(#_):not(#_) .tbxh-portada-card {
        padding: 16px 8px;
        font-size: 14px !important;
    }
}

/* =====================================================================
   INICIO  ·  Servicios y reseñas
   ---------------------------------------------------------------------
   Una sola columna de hasta 1500px, centrada: las reseñas quedan justo
   debajo de los servicios. Los 14 servicios van en 7 columnas y 2 filas,
   sin caja y con los iconos sin fondo, a la izquierda del título.
   ===================================================================== */
html:not(#_):not(#_) .tbxh-content-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    width: min(1500px, 100% - 2 * clamp(16px, 2.5vw, 40px));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

html:not(#_):not(#_) .tbxh-service-card,
html:not(#_):not(#_) .tbxh-service-card:hover,
html:not(#_):not(#_) .tbxh-service-card:focus-within,
html:not(#_):not(#_) .tbxh-service-card:active {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

/* Icono a la izquierda del título y descripción debajo de los dos */
html:not(#_):not(#_) .tbxh-service-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    justify-items: start;
    text-align: left;
}

html:not(#_):not(#_) .tbxh-service-icon {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
}

html:not(#_):not(#_) .tbxh-service-card h3,
html:not(#_):not(#_) .tbxh-service-card p {
    margin: 0;
}

html:not(#_):not(#_) .tbxh-service-card p {
    grid-column: 1 / -1;
}

/* Todo el servicio es clicable: el enlace del título se extiende a todo el bloque */
html:not(#_):not(#_) .tbxh-service-card {
    position: relative;
    cursor: pointer;
}

html:not(#_):not(#_) .tbxh-service-card h3 a {
    color: inherit !important;
    font-weight: 100 !important;
    text-decoration: none !important;
}

html:not(#_):not(#_) .tbxh-service-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

html:not(#_):not(#_) .tbxh-service-card:hover h3 a {
    text-decoration: underline !important;
}

/* En pantallas menores no caben 7 columnas: se mantienen las de la plantilla */
@media (min-width: 1000px) {
    html:not(#_):not(#_) .tbxh-services-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 28px 16px;
    }
}

/* Móvil: 2 servicios por fila, con icono y título, sin descripción */
@media (max-width: 767px) {
    html:not(#_):not(#_) .tbxh-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
    }

    html:not(#_):not(#_) .tbxh-service-card p {
        display: none;
    }
}

/* =====================================================================
   CAJAS DE INICIO, "¿HABLAMOS?" Y PIE  ·  Contenido de hasta 1500px, centrado
   El fondo de cada sección sigue ocupando todo el ancho.
   ===================================================================== */
html:not(#_):not(#_) .tbxg-footer-grid,
html:not(#_):not(#_) .tbxg-footer-note,
html:not(#_):not(#_) .tbxh-promo-grid,
html:not(#_):not(#_) .tbxh-contact .tbxh-contact-inner {
    width: min(1500px, 100% - 2 * clamp(16px, 2.5vw, 40px));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/* =====================================================================
   PIE  ·  Móvil: todo centrado, desde el logo hasta la nota final
   ===================================================================== */
@media (max-width: 767px) {
    html:not(#_):not(#_) .tbxg-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    html:not(#_):not(#_) .tbxg-footer .tbxg-brand {
        justify-content: center;
    }

    html:not(#_):not(#_) .tbxg-footer .tbxg-brand-text {
        text-align: center;
    }

    html:not(#_):not(#_) .tbxg-footer p {
        margin-inline: auto;
    }

    html:not(#_):not(#_) .tbxg-footer-col {
        justify-items: center;
    }

    html:not(#_):not(#_) .tbxg-footer-note {
        display: grid;
        justify-items: center;
        justify-content: center;
        text-align: center;
    }
}