/* =====================================================================
   Mejoras visuales sobre el diseño original de 2016 (app.css).
   Se carga en último lugar: solo sobreescribe, no sustituye, para
   mantener la esencia del diseño (blanco/gris oscuro con rojo #fc0f10).
   ===================================================================== */

/* ---- Tipografía y base ---- */
html {
    scroll-behavior: smooth;
}

body {
    /* El CSS de 2016 pedía "soleil" (Typekit), una fuente que nunca se
       carga; se usa Roboto, que sí se sirve desde functions.php */
    color: #333;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    /* el peso 100 del original no existe en la Roboto cargada */
    font-weight: 300;
}

::selection {
    background: #fc0f10;
    color: #fff;
}

/* ---- Accesibilidad ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #fc0f10;
    outline-offset: 2px;
}

.skip-link {
    background: #fc0f10;
    color: #fff;
    font-size: .8em;
    left: -9999px;
    letter-spacing: 1px;
    padding: .8em 1.2em;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    z-index: 1000;
}

.skip-link:focus {
    left: 0;
}

/* ---- Cabecera ---- */
.header {
    /* Contexto de apilamiento propio por encima del hero: sin esto, los
       desplegables del menú quedaban por detrás de la imagen de cabecera */
    position: relative;
    z-index: 100;
}

.header__container {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.header__telephone-link {
    color: #fc0f10;
}

@media only screen and (min-width: 64.0625em) {
    .header__search {
        align-items: center;
        display: inline-flex;
        height: 50px;
        /* El icono de la lupa se solapa sobre el input con un margin
           negativo, asi que el hueco visible hasta el telefono es menor
           que este margen: de ahi que haga falta holgura de sobra */
        margin-right: 3.5em;
    }

    input.header__search-input {
        border: 1px solid #ddd;
        border-radius: 19px;
        font-size: .9em;
        height: 38px;
        margin: 0;
        padding: 0 2.6em 0 1.3em;
        transition: border-color .2s ease, box-shadow .2s ease;
        width: 320px;
    }

    input.header__search-input:focus {
        border-color: #fc0f10;
        box-shadow: 0 0 0 3px rgba(252, 15, 16, 0.12);
        outline: none;
    }

    .header__search-button {
        align-items: center;
        background: none;
        border: 0;
        cursor: pointer;
        display: flex;
        margin-left: -2.2em;
        padding: 0;
    }

    .header__search-icon {
        fill: #7f7f7f;
        margin: 0;
    }

    .header__telephone-link {
        align-items: center;
        /* Filete separador: marca la frontera con el buscador sin depender
           solo del hueco, que se lee corto por el ancho del input */
        border-left: 1px solid #e6e6e6;
        display: inline-flex;
        font-weight: 500;
        height: 50px;
        letter-spacing: 2px;
        padding-left: 2.5em;
    }

    .header__telephone-link:hover .header__telephone-number {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .header__telephone-icon {
        margin: 0 .5em 0 0;
    }
}

/* ---- Títulos de página con subrayado rojo ---- */
.page-heading h1,
.single-title h1,
.page-article h1 {
    padding-bottom: .55em;
    position: relative;
}

.page-heading h1::after,
.single-title h1::after,
.page-article h1::after {
    background: #fc0f10;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 64px;
}

/* En móvil el título de producto era diminuto (1em) */
.single-title h1 {
    font-size: 1.3em;
}

@media only screen and (min-width: 64.0625em) {
    .single-title h1 {
        font-size: 1em; /* el contenedor ya escala a 2em en escritorio */
    }
}

/* ---- Contenido ---- */
.page__content {
    line-height: 1.9;
}

/* Tarjeta blanca para las páginas de contenido genéricas (page.php),
   que antes volcaban el texto directamente sobre el fondo gris */
.page-article {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-left: auto;
    margin-right: auto;
    /* .row llega a 99.75rem: sin este tope, en pantallas grandes la linea de
       texto pasa de 130 caracteres y no hay quien lea un aviso legal */
    max-width: 52rem;
    padding: 2em 1.25em;
}

@media only screen and (min-width: 64.0625em) {
    .page-article {
        padding: 3em 4em;
    }
}

.page-article h1 {
    font-size: 1.6em;
}

.page__content h2,
.page__content h3 {
    margin-top: 1.5em;
}

.page__content li {
    margin: .4em 0;
}

.page__content li::marker,
.single-content li::marker {
    color: #fc0f10;
}

.page__content table {
    margin-bottom: 1.5em;
    width: 100%;
}

.page__content th,
.page__content td {
    border-bottom: 1px solid #eee;
    padding: .6em .8em;
    text-align: left;
}

.page__content blockquote {
    border-left: 3px solid #fc0f10;
    color: #666;
    margin: 1.5em 0;
    padding: .5em 1.5em;
}

/* Tarjetas de subpáginas (ej. "Tu taller" enlaza a sus hijas) */
.child-pages {
    margin-top: 1.5em;
}

.child-page-card {
    background: #f5f5f5;
    border-left: 3px solid #fc0f10;
    color: #333;
    display: block;
    font-size: .85em;
    font-weight: 500;
    letter-spacing: 1.5px;
    padding: 1.4em 1.2em;
    text-transform: uppercase;
    transition: background-color .25s ease, color .25s ease;
}

.child-page-card:hover {
    background: #333;
    color: #fff;
}

/* ---- Quiénes somos: bloque de Historia ----
   Dos arreglos. Uno: app.css deja .history-content en flex sin dirección, así
   que el título y el párrafo se colocaban en fila. Dos: el texto salía pegado
   al borde de la pantalla porque ".row.collapse > .column" (app.css:444) anula
   el padding lateral de la tarjeta, y gana por especificidad; se devuelve aquí
   con el mismo peso de selector. */
.history-content {
    /* align-items: center venía de app.css pensando en una fila. Al pasar a
       columna, el eje transversal es el horizontal, así que encogía el título y
       el párrafo al ancho de su texto en vez de dejarlos ocupar la tarjeta */
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
}

.row.collapse > .history-content {
    padding-left: 2em;
    padding-right: 2em;
}

/* app.css le da a la foto height:100% y object-fit:cover, pero se olvida del
   ancho: la imagen se quedaba en su tamaño original y dejaba un hueco blanco
   a la derecha, con lo que las dos mitades no cuadraban */
.history-image img,
.quality-policy-image img {
    width: 100%;
}

.history-content-title,
.history-content-content {
    width: 100%;
}

.history-content-title {
    margin: 0 0 .75em;
}

.history-content-content {
    margin: 0;
}

/* ---- Quiénes somos / Servicio técnico: contadores y línea temporal ---- */
.stats-content .counter {
    color: #fc0f10;
    font-weight: 700;
    letter-spacing: 2px;
}

.stats-content-content {
    color: #7f7f7f;
    font-size: .8em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.timeline-item img {
    height: 220px;
    object-fit: cover;
    width: 100%;
}

.timeline-item-content h3 {
    margin-top: .5em;
}

.timeline-item-content-content {
    color: #7f7f7f;
    font-weight: 300;
}

/* ---- Paso a paso: pasos numerados en rojo ---- */
.step-by-step-content ul {
    counter-reset: paso;
}

.step-by-step-content li {
    counter-increment: paso;
}

.step-by-step-content-image {
    max-width: 350px;
    width: 100%;
}

.step-by-step-content-content {
    font-size: .85em;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 0 1em;
    text-transform: uppercase;
}

.step-by-step-content-content::before {
    color: #fc0f10;
    content: counter(paso) ". ";
    font-weight: 700;
}

/* ---- Ficha de producto ---- */
.single-product-image {
    display: block;
    height: auto;
    margin: 0 auto 1.5em;
    max-width: 100%;
}

/* ---- Portada: "Maquiauto Recomienda" ----
   Fotos de producto de proporciones dispares: se encuadran todas igual,
   completas sobre fondo blanco, como las tarjetas del catálogo */
.index__recommended-products .grid-block__image {
    aspect-ratio: 4 / 3;
    background: #fff;
    object-fit: contain;
    padding: .5em;
    width: 100%;
}

/* ---- Portada: las dos mitades a la misma altura ----
   La derecha son 4 fotos en cuadrícula 2x2 de proporción fija; la izquierda es
   una sola foto de proporción libre más el bloque gris de texto, así que las dos
   columnas nunca coincidían. Poniendo la fila en flex, la columna de kits estira
   hasta igualar la de productos y la foto absorbe la diferencia: se saca del
   flujo (posición absoluta) para que su alto natural no arrastre la columna. */
@media only screen and (min-width: 64.0625em) {
    .index__row {
        display: flex;
        flex-wrap: wrap;
    }

    .index__row > .column {
        display: flex;
        flex-direction: column;
    }

    .index__row > .column:first-child .grid-block {
        display: flex;
        flex: 1;
        min-height: 0;
    }

    .index__row .grid-block__card--large {
        flex: 1;
        min-height: 0;
    }

    /* La foto se saca del flujo: si contase su alto natural, sería ella la que
       marcase la altura de la fila y la columna de productos quedaría corta */
    .index__row .grid-block__card--large > a {
        bottom: 0;
        display: block;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .index__row .grid-block__card--large .grid-block__image {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }
}

/* ---- Contacto ---- */
.contact-details h3 {
    margin-top: 1.5em;
}

.contact-details h3:first-child {
    margin-top: 0;
}

.contact-details a {
    color: #fc0f10;
    transition: color .3s ease;
}

.contact-details a:hover {
    color: #7f7f7f;
}

.contact-details__mail {
    display: inline-block;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 1em;
}

.contact-map-iframe {
    border: 0;
    display: block;
    height: 100%;
    min-height: 350px;
    width: 100%;
}

/* Formulario de contacto (sin plugins, envía por wp_mail) */
.contact-form {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 2em;
    padding: 2em 1.25em;
}

@media only screen and (min-width: 64.0625em) {
    .contact-form {
        padding: 2.5em 3em;
    }
}

.contact-form__title {
    margin-bottom: 1em;
}

.contact-form__notice {
    font-weight: 500;
    margin-bottom: 1.5em;
    padding: .9em 1.2em;
}

.contact-form__notice--ok {
    background: #eef7ee;
    border-left: 3px solid #2e7d32;
    color: #2e7d32;
}

.contact-form__notice--error {
    background: #fdeeee;
    border-left: 3px solid #fc0f10;
    color: #b00d0e;
}

.contact-form__hp {
    left: -9999px;
    position: absolute;
}

.contact-form__label {
    color: #333;
    display: block;
    font-size: .8em;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: .4em;
    text-transform: uppercase;
}

.contact-form__input,
.contact-form__textarea {
    border: 1px solid #ddd;
    border-radius: 3px;
    display: block;
    font-family: inherit;
    font-size: .95em;
    margin-bottom: 1.2em;
    padding: .7em .9em;
    transition: border-color .2s ease, box-shadow .2s ease;
    width: 100%;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    border-color: #fc0f10;
    box-shadow: 0 0 0 3px rgba(252, 15, 16, 0.12);
    outline: none;
}

.contact-form__submit {
    background: #333;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: .85em;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 1em 2.5em;
    text-transform: uppercase;
    transition: background-color .25s ease;
}

.contact-form__submit:hover {
    background: #fc0f10;
}

/* ---- Hero de página (imagen fija o slider en portada) ----
   Sustituye al metaslider del sitio de 2016; misma proporción 1905x396 */
.page-hero {
    background: #333;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.page-hero__slides {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-hero__slide {
    margin: 0;
}

.page-hero__slide img {
    display: block;
    height: auto;
    max-height: 400px;
    min-height: 180px;
    object-fit: cover;
    width: 100%;
}

.page-hero__caption {
    background: rgba(20, 20, 20, 0.55);
    bottom: 1.5em;
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    left: 0;
    letter-spacing: 1px;
    line-height: 1.5;
    margin: 0 5%;
    max-width: 90%;
    padding: .7em 1.1em;
    position: absolute;
    text-transform: uppercase;
    z-index: 3;
}

.page-hero__caption p {
    font-weight: 700;
    margin: 0;
}

@media only screen and (min-width: 64.0625em) {
    .page-hero__caption {
        font-size: 1.4em;
        margin: 0 10%;
    }
}

/* Modo slider (portada): las diapositivas se apilan y se funden.
   La primera define la altura; sin JS solo se ve esa. */
.page-hero--slider .page-hero__slide {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .9s ease;
    width: 100%;
    z-index: 1;
}

.page-hero--slider .page-hero__slide:first-child {
    position: relative;
}

.page-hero--slider .page-hero__slide.is-active,
.page-hero--slider:not(.js-ready) .page-hero__slide:first-child {
    opacity: 1;
    z-index: 2;
}

.page-hero__arrow {
    background: rgba(20, 20, 20, 0.35);
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 1.4em;
    height: 2.2em;
    line-height: 1;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .25s ease, background-color .25s ease;
    width: 2.2em;
    z-index: 4;
}

.page-hero:hover .page-hero__arrow,
.page-hero__arrow:focus-visible {
    opacity: 1;
}

.page-hero__arrow:hover {
    background: #fc0f10;
}

.page-hero__arrow--prev { left: 1em; }
.page-hero__arrow--next { right: 1em; }

.page-hero__dots {
    bottom: .6em;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 4;
}

.page-hero__dot {
    background: rgba(255, 255, 255, 0.45);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 10px;
    margin: 0 5px;
    padding: 0;
    transition: background-color .25s ease;
    width: 10px;
}

.page-hero__dot.is-active,
.page-hero__dot:hover {
    background: #fc0f10;
}

/* ---- Catálogo ---- */
.catalog-grid {
    margin: 0;
}

.catalog-grid .grid-block__image {
    aspect-ratio: 4 / 3;
    background: #fff;
    object-fit: cover;
    width: 100%;
}

.catalog-grid--products .grid-block__image {
    object-fit: contain;
    padding: .5em;
}

.catalog-grid .grid-block__footer {
    font-size: .8em;
    letter-spacing: 1px;
    padding: .6em .4em 1em;
}

.catalog-grid .grid-block__footer a {
    color: #333;
    transition: color .2s ease;
}

.catalog-grid .grid-block__footer a:hover {
    color: #fc0f10;
}

/* Miga de pan del catálogo */
.catalog-breadcrumb {
    color: #7f7f7f;
    font-size: .8em;
    letter-spacing: 1px;
    margin-bottom: 1.5em;
    text-transform: uppercase;
}

.catalog-breadcrumb a {
    color: #7f7f7f;
    transition: color .2s ease;
}

.catalog-breadcrumb a:hover {
    color: #fc0f10;
}

.catalog-empty {
    font-weight: 300;
    padding: 2em 0;
    text-align: center;
}

/* ---- Tu taller: tarjetas de las páginas hijas ---- */
.taller-card {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    display: block;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.taller-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
    transform: translateY(-3px);
}

.taller-card__image {
    aspect-ratio: 19 / 14;
    display: block;
    object-fit: cover;
    width: 100%;
}

.taller-card__title {
    border-left: 3px solid #fc0f10;
    color: #333;
    display: block;
    font-size: .9em;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 1.2em 1em;
    text-transform: uppercase;
}

.taller-card:hover .taller-card__title {
    color: #fc0f10;
}

/* ---- Resultados de búsqueda ---- */
.search__results-header {
    margin-bottom: 2em;
    text-align: center;
}

.search-result {
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 1em;
    padding: 1.5em 2em;
    transition: box-shadow .25s ease;
}

.search-result:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.search-result__title {
    font-size: 1em;
    margin-bottom: .4em;
    transition: color .2s ease;
}

.search-result__link {
    color: #333;
}

.search-result__link:hover .search-result__title {
    color: #fc0f10;
}

.search-result__excerpt {
    color: #666;
    font-size: .9em;
    line-height: 1.7;
}

.search__pagination {
    margin: 2em 0;
    text-align: center;
}

.search__pagination .page-numbers {
    color: #333;
    display: inline-block;
    padding: .5em .9em;
}

.search__pagination .page-numbers.current {
    background: #fc0f10;
    color: #fff;
}

.page__content ul,
.single-content ul {
    list-style: disc outside;
    margin: 0 0 1em 1.2em;
}

.page__content a {
    color: #fc0f10;
    transition: color .3s ease;
}

.page__content a:hover {
    color: #7f7f7f;
}

.page__image {
    margin-bottom: 2em;
}

/* ---- Tarjetas y botones ---- */
.grid-block__card {
    border-radius: 3px;
    overflow: hidden;
}

.grid-block__image--shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.grid-block__button:hover,
.index__kits-button:hover {
    background: #fc0f10;
    color: #fff;
}

.search__form-submit[type="submit"] {
    cursor: pointer;
    transition: background-color .25s ease;
}

.search__form-submit[type="submit"]:hover {
    background: #fc0f10;
}

.search__form-input {
    transition: border-color .2s ease;
}

.search__form-input:focus {
    border-color: #fc0f10;
    outline: none;
}

.search__form-input::placeholder {
    color: #aaa;
    font-family: inherit;
}

/* ---- Proyectos: tarjetas de categoría (filtros de la galería) ---- */
.project-category-item {
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.project-category-item:hover,
.project-category-item.is-active {
    background-color: #333;
    color: #fff;
}

.project-category-item:hover svg,
.project-category-item.is-active svg {
    fill: #fff;
}

/* Fotos de proyecto de proporciones muy variadas: encuadre uniforme */
.project-project .grid-block__image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

/* ---- Marcas (logos de partners) ---- */
.brand__title {
    color: #9a9a9a;
}

.brand__image {
    filter: grayscale(1);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease;
}

.brand__image-container:hover .brand__image {
    filter: none;
    opacity: 1;
}

/* ---- Pie ---- */
.footer-content__title {
    color: #9a9a9a;
}

.footer-content__link {
    transition: color .2s ease;
}

.footer-content__link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}