/*
 * Capa de basecore sobre la maqueta Renovex.
 *
 * custom.css es la hoja de la maqueta tal cual (con dos sustituciones
 * mecánicas para la identidad: `border-radius: 10px` → var(--radius) y
 * `padding: 100px 0` → var(--section-py)). Todo lo que basecore necesita
 * encima va aquí, para que actualizar la maqueta sea reemplazar custom.css
 * sin perder nada:
 *
 *   1. Los ajustes del prototipo de pepemino, que iban en un <style> del
 *      index.html contra ids (#metodo, #sectores). Aquí van contra clases,
 *      porque los ids de sección los pone el motor (anchor) y pueden ir
 *      numerados si un tipo se repite.
 *   2. Texto sobre la marca por luminancia: la maqueta escribe el negro
 *      (--primary-color) sobre el amarillo; con una marca oscura sería
 *      ilegible. --on-accent-color lo fija el puente del layout.
 *   3. El contrato del panel de Apariencia: --section-text para el color
 *      de texto configurable. El degradado ya lo pinta _core/appearance.css.
 *   4. Markup que basecore genera distinto al de la maqueta (redes del pie,
 *      horario desde el editor).
 */

/* ---- 1. Ajustes del prototipo ------------------------------------------ */

.hero-slider .swiper-slide img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

@media (max-width: 991px) {
    .hero-slider .swiper-slide img {
        height: 360px;
        margin-top: 40px;
    }
}

/* Método: línea temporal aplanada y sin números. */
.our-working-process-silver .working-process-item-list-silver {
    align-items: stretch;
    justify-content: center;
}

.our-working-process-silver .working-process-item-silver {
    margin: 0 !important;
    gap: 0 !important;
}

@media (min-width: 992px) {
    .our-working-process-silver .working-process-item-silver {
        width: calc(20% - 24px) !important;
    }
}

/* Sectores: la foto completa, sin la máscara decorativa de la maqueta. */
.our-features .feature-item {
    gap: 24px;
}

.our-features .feature-item-shape-image figure {
    mask-image: none;
    -webkit-mask-image: none;
    background-image: none;
    width: 100%;
    height: 210px;
    border-radius: var(--radius);
    overflow: hidden;
}

.our-features .feature-item-shape-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Los fondos con foto del prototipo (hero, método, pie) no van aquí: la
   foto la elige cada sección en su panel de Apariencia y el pie en la
   configuración, y el velo oscuro lo ponen las maquetas. */

/* ---- 2. Texto sobre la marca ------------------------------------------- */

.btn-default,
.btn-default.btn-highlighted,
.footer-social-links a:hover,
.renovex-social a:hover {
    color: var(--on-accent-color, var(--primary-color));
}

/* ---- 3. Panel de Apariencia -------------------------------------------- */

/* Toda sección de Renovex lleva .renovex-sec; el color configurable entra
   por ahí a títulos, párrafos y listas sin tocar los botones. */
.renovex-sec[style*="--section-text"] h1,
.renovex-sec[style*="--section-text"] h2,
.renovex-sec[style*="--section-text"] h3,
.renovex-sec[style*="--section-text"] h4,
.renovex-sec[style*="--section-text"] p,
.renovex-sec[style*="--section-text"] li {
    color: var(--section-text);
}

/* ---- 4. Markup de basecore --------------------------------------------- */

/* Redes en el pie: el partial del motor pinta <a> sueltos, no <ul><li>. */
.renovex-social {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    width: 100%;
    padding-top: 40px;
    margin-top: 30px;
    border-top: 1px solid var(--dark-divider-color);
}

.renovex-social a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--white-color);
    line-height: normal;
    background: var(--dark-divider-color);
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 20px;
    transition: all 0.4s ease-in-out;
}

.renovex-social a:hover {
    background: var(--accent-color);
}

/* El horario viene del editor (párrafos), no de una lista. */
.footer-working-hours div,
.footer-working-hours p {
    color: var(--white-color);
    font-weight: 500;
    line-height: 1.4em;
    margin-bottom: 10px;
}

.footer-working-hours p:last-child {
    margin-bottom: 0;
}

/* Logo de la cabecera: la maqueta no lo limitaba; el prototipo sí. */
.navbar-brand img {
    max-height: 50px;
    width: auto;
}

/* ---- 5. Maquetas de basecore sin bloque en el prototipo ----------------- */

/* Texto (prose): ancho, alineación, tamaño y columnas configurables. */
.prose-sec .prose-block {
    max-width: var(--prose-width, 820px);
    margin: 0 auto;
    text-align: var(--prose-align, left);
}

.prose-sec .prose-body {
    font-size: var(--prose-size, 16px);
    column-count: var(--prose-cols, 1);
    column-gap: 40px;
}

/* Tarjeta de noticia sin foto: el texto es blanco y necesita fondo. */
.post-item--sin-foto .post-featured-image figure {
    background: var(--primary-color);
    aspect-ratio: 1 / 1.064;
    border-radius: var(--radius);
}

.post-item--sin-foto .post-featured-image figure::before {
    display: none;
}

/* Detalle de noticia. */
.article-sec .post-image {
    margin-bottom: 40px;
}

.article-sec .post-image img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--radius);
}

.article-sec .post-single-meta {
    margin-bottom: 20px;
}

.article-sec .post-back {
    margin-top: 40px;
}

.blog-empty {
    color: var(--text-color);
}

/* ---- 6. Iconos de Font Awesome dentro de .icon-box ----------------------- */

/* La maqueta pone SVG negros de 30px en cajas amarillas y los invierte a
   blanco al pasar el ratón. Cuando el usuario elige un icono del selector
   (una clase de Font Awesome), se pinta con el mismo tamaño, el mismo negro
   y el mismo cambio a blanco. */
.icon-box i {
    position: relative;
    z-index: 1;
    font-size: 28px;
    line-height: 1;
    color: var(--on-accent-color, var(--primary-color));
    transition: all 0.4s ease-in-out;
}

.about-body-item:hover .icon-box i,
.what-we-do-item:hover .icon-box i,
.working-process-item-silver:hover .icon-box i,
.contact-info-item:hover .icon-box i {
    color: var(--white-color);
}

/* ---- 7. Piezas del hero y de los clientes ------------------------------ */

.hero .hero-subtitle {
    color: var(--white-color);
    margin-bottom: 30px;
}

.hero .hero-subtitle p:last-child {
    margin-bottom: 0;
}

.our-clients .client-logo {
    max-height: 55px;
    width: auto;
    margin: 18px auto;
}

/* Sección de clientes: el bloque no existe en la maqueta, hereda el
   espaciado de cualquier otro. */
.our-clients {
    padding: var(--section-py) 0;
}

/* Puntos del bloque about con texto del editor (párrafos, no <p> suelto). */
.about-body-item-content p:last-child,
.what-we-do-item-body p:last-child,
.working-process-item-content-silver p:last-child,
.feature-item-content p:last-child,
.service-item-content p:last-child {
    margin-bottom: 0;
}

/* Los <li> de contacto del pie son flex: los espacios entre "Teléfono:" y el
   enlace se pierden y quedaba "Teléfono:+34 …" pegado. */
.footer-contact-links ul li > a {
    margin-left: .35em;
}