html {
    scroll-behavior: smooth;
}
/* Contenedores */
.element {
    padding: 140px 20px;
}
.e-column {
    display: flex;
}
.e-column>.e-col-50 {
    flex: 0 0 50%;
}
.e-icono {
    max-width: 56px;
    width: 100%;
    height: 56px;
    object-fit: contain;
    margin-bottom: 20px;
}
/* Tipografía */
body {
    font-family: var(--font-body);
    font-size: var(--body);
    font-weight: var(--regular);
    line-height: 1.25em;
    background-color: var(--c-beige-bg);
}
p {
    font-family: var(--font-body);
    font-size: var(--body);
    font-weight: var(--regular);
    line-height: 1.5em;
    margin-bottom: 1.5em;
}
.element-widget-text>p:last-child {
    margin-bottom: 0;
}
.element-widget-text a {
    color: var(--c-azul);
    text-decoration: none;
}
p+ul {
    margin-top: 0;
}
ul {
    padding-left: 20px;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
ul>li:not(:last-child) {
    margin-bottom: 10px;
}
h1 {
    font-family: var(--font-title);
    font-size: var(--title-extra-large);
    line-height: 1em;
    margin-bottom: 20px;
}
h2 {
    font-family: var(--font-title);
    font-size: var(--title-large);
    line-height: 1.25em;
    margin-bottom: 20px;
}
h3 {
    font-family: var(--font-title);
    font-size: var(--title-medium);
    line-height: 1.25em;
    margin-bottom: 20px;
}
.tit {
    font-family: var(--font-title);
    font-size: var(--title-small);
    line-height: 1.25em;
    margin-bottom: 20px;
}
.subtit {
    font-family: var(--font-body);
    font-size: var(--title-xs);
    font-weight: var(--bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.25em;
    margin-bottom: 20px;
}
.smallsubtit {
    font-family: var(--font-body);
    font-size: var(--title-xxs);
    font-weight: var(--bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.25em;
    margin-bottom: 20px;
}
.nombresprod {
    font-family: var(--font-body);
    font-size: var(--nombres-prod);
    font-weight: var(--bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.25em;
    margin-bottom: 20px;
}
table {
    margin: 0 0 1.5em;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
}
table,
td,
th {
    border: 1px solid rgba(0, 0, 0, .1);
}
th {
    font-weight: var(--bold);
    border-width: 0 1px 1px 0;
}
td,
th {
    padding: 8px;
}
td {
    border-width: 0 1px 0px 0;
}
/* Clases */
.no-mb {
    margin-bottom: 0;
}
.mtp {
    margin-top: 10px;
    margin-bottom: 10px;
}
.bg-naranja {
    background-color: var(--c-naranja);
    color: var(--c-blanco);
}
.bg-verde {
    background-color: var(--c-verde);
    color: var(--c-blanco);
}
.bg-beige {
    background-color: var(--c-beige);
}
.bg-gris-claro {
    background-color: var(--c-gris-light);
}
.txt-white {
    color: var(--c-blanco);
}
/* Botones */
.btn-norm a,
.btn-enviar input[type=submit] {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--body);
    background-color: var(--c-azul);
    font-weight: var(--bold);
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    color: var(--c-blanco);
    height: 40px;
    padding: 12px 30px;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
}
.btn-norm a:hover,
.btn-enviar input[type=submit]:hover {
    background-color: var(--c-negro);
}
/* Formulario */
.default-form label {
    font-weight: 500;
    display: inline-block;
    margin-bottom: 10px;
}
.default-form input[type="text"],
.default-form input[type="email"],
.default-form input[type="url"],
.default-form input[type="password"],
.default-form input[type="search"],
.default-form input[type="tel"],
.default-form input[type="number"],
.default-form textarea,
.default-form select {
    background-color: rgba(255, 255, 255);
    border: none;
    border-radius: 0;
    width: 100%;
    font-size: var(--body);
}
.default-form textarea {
    max-height: 150px;
}
.default-form .datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.default-form .datos>div {
    flex: 0 0 48%;
    max-width: 48%;
}
.default-form .datos>div.full-w {
    flex: 0 0 100%;
    max-width: 100%;
}
.default-form .datos>div.full-w input {
    width: 100%;
}
.default-form .rgpd {
    display: flex;
    align-items: center;
    column-gap: 5px;
    margin: 20px 0;
}
.default-form .rgpd input {
    position: static;
    margin: 0;
}
.txt-legal {
    margin-bottom: 0;
    font-size: 0.8rem;
}
.txt-legal .tab-legal {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    column-gap: 4px;
    /* margin-bottom: 15px; */
}
.txt-legal .tab-legal p {
    font-size: 1.2em;
    margin-bottom: 10px;
}
.txt-legal .tab-legal:hover {
    cursor: pointer;
}
.txt-legal .tab-legal .plus-icon {
    margin-top: 4px;
}
.txt-legal .tab-legal .plus-icon svg {
    max-width: 13px;
    transform: rotate(45deg);
}
.txt-legal .let-peq {
    margin: 0;
    padding-left: 1px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}
.txt-legal .let-peq>p {
    font-size: 0.8rem;
    line-height: 1.25em !important;
    margin-bottom: 0;
}
.btn-enviar {
    margin-top: 20px;
}
/* Información legal */
body.legal .element {
    padding: 60px 20px;
    background-color: var(--c-gris-light);
}
/* Filtración industrial */
.filtracion-industrial p.subtit {
    margin-bottom: 10px;
}
.filtracion-industrial #scroll-arrow:hover {
    cursor: pointer;
}
.filtracion-industrial .head-slider .tns-item {
    width: 100%;
}
.filtracion-industrial .head-slider .place {
    position: absolute;
    top: 0;
    background-color: transparent;
    height: 100%;
    align-items: center;
    padding: 0 40px;
}
.filtracion-industrial .head-slider .place .txt {
    flex-direction: row;
    justify-content: space-around;
    max-width: 100%;
}
.filtracion-industrial .head-slider .place .col-1 {
    max-width: 410px;
}
.filtracion-industrial .head-slider .place .col-2 {
    align-self: flex-end;
}
.filtracion-industrial .place-1 {
    height: auto;
}
.filtracion-industrial .mosaic .ficha {
    height: auto;
    min-height: 350px;
}
.filtracion-industrial .mosaic .ficha:nth-child(4) {
    background-color: #ECE5E0;
}
.filtracion-industrial .mosaic .ficha:nth-child(2) {
    background-color: #E0D4CB;
}
.filtracion-industrial .mosaic .ficha .title {
    font-size: 30px;
}
.filtracion-industrial .place-3 {
    height: 800px !important;
}
.filtracion-industrial .place-3 .image img {
    object-position: 50% 40%;
}
.filtracion-industrial .place-3 .title,
.filtracion-industrial .place-3 .subtitle {
    color: #fff !important;
}
.filtracion-industrial .place-3 .overlay {
    background-color: rgba(0, 0, 0, 0.35);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.filtracion-industrial .place-4 {
    flex-direction: column;
    height: auto;
    padding: 100px 40px;
    background-color: #fff;
}
@media screen and (min-width: 1200px) {
    .filtracion-industrial .place-4 .rueda {
        padding: 0;
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
    }
    .filtracion-industrial .place-4 .rueda .bloque {
        padding: 0;
    }
    .filtracion-industrial .place-4 .rueda .bloque-item {
        display: flex;
        align-items: center;
        column-gap: 10px;
        background-color: #fff;
        padding: 10px;
        margin-top: -20px;
        z-index: 1;
    }
    .filtracion-industrial .place-4 .rueda .bloque-item .number {
        width: auto;
    }
    .filtracion-industrial .place-4 .rueda .bloque::before {
        top: initial;
    }
    .filtracion-industrial .place-4 .rueda .bloque:first-child {
        grid-area: 1 / 2 / 2 / 3;
        padding-bottom: 20px;
    }
    .filtracion-industrial .place-4 .rueda .bloque:first-child::before {
        bottom: 15px;
        width: 60px;
    }
    .filtracion-industrial .place-4 .rueda .bloque:nth-child(2) {
        grid-area: 2 / 3 / 3 / 4;
    }
    .filtracion-industrial .place-4 .rueda .bloque:nth-child(3) {
        grid-area: 3 / 3 / 4 / 4;
        transform: translate(-60px, -35px);
    }
    .filtracion-industrial .place-4 .rueda .bloque:nth-child(3)::before {
        transform: rotate(-140deg);
    }
    .filtracion-industrial .place-4 .rueda .rotor {
        grid-area: 2 / 2 / 3 / 3;
        padding: 20px;
    }
    .filtracion-industrial .place-4 .rueda .rotor img {
        position: relative;
        z-index: 1;
        background-color: #fff;
        border-radius: 100%;
        margin-top: 0;
    }
    .filtracion-industrial .place-4 .rueda .bloque:nth-child(4) {
        grid-area: 3 / 1 / 4 / 2;
        transform: translate(175px, -10px);
    }
    .filtracion-industrial .place-4 .rueda .bloque:nth-child(4)::before {
        transform: rotate(-60deg);
    }
    .filtracion-industrial .place-4 .rueda .bloque:nth-child(5) {
        grid-area: 2 / 1 / 3 / 2;
    }
}
.filtracion-industrial .place-4 .rueda p {
    color: #31312D;
    margin-bottom: 0;
}
.filtracion-industrial .place-5 {
    background-color: #ECE5E0;
    padding: 100px 40px;
    height: auto;
}
.filtracion-industrial .place-5 .column {
    display: flex;
    justify-content: center;
    align-items: center;
}
.filtracion-industrial .place-5 .column .col-1 {
    max-width: 100%;
    background-color: #fff;
    padding: 40px;
    border-radius: 20px;
    margin-right: -60px;
    z-index: 1;
}
.filtracion-industrial .place-5 .column .col-1 * {
    color: #31312D;
}
.filtracion-industrial .place-5 .column .col-2 {
    flex: 0 0 50%;
}
.filtracion-industrial .place-5 .column img {
    max-width: 100%;
    width: 100%;
    max-height: 800px;
    object-fit: cover;
}
.filtracion-industrial .full-color {
    height: auto;
    padding: 120px 40px;
}
.filtracion-industrial .full-color .box {
    margin: 0;
}
.filtracion-industrial .full-color .btn {
    margin-top: -20px;
}
/* Slider de productos */
.filtracion-industrial .place-6 {
    flex-direction: column;
    background-color: var(--c-blanco);
    padding: 120px 40px;
    height: auto;
}
.sliderProductos {
    width: 100%;
    height: 100%;
    padding-bottom: 60px !important;
}
.sliderProductos .swiper-slide>div {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    text-align: center;
}
.sliderProductos .swiper-slide h3 {
    margin-bottom: 0;
}
.sliderProductos .swiper-pagination {
    top: initial;
    bottom: 0 !important;
}
.sliderProductos .swiper-pagination .swiper-pagination-bullet {
    background-color: var(--c-beige);
    opacity: 1;
}
.sliderProductos .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--c-azul);
}
.sliderProductos .swiper-button-next::after,
.sliderProductos .swiper-button-prev::after {
    content: none;
}
.sliderProductos .swiper-button-next,
.sliderProductos .swiper-button-prev {
    width: auto;
    top: initial;
    bottom: 0;
}
.sliderProductos .swiper-button-next svg,
.sliderProductos .swiper-button-prev svg {
    width: 40px;
}
.sliderProductos .swiper-button-next svg path,
.sliderProductos .swiper-button-prev svg path {
    fill: var(--c-azul);
}
.sliderProductos .swiper-button-next {
    transform: rotate(-90deg);
}
.sliderProductos .swiper-button-prev {
    transform: rotate(90deg);
}
/* Contacto */
.contacto .info-contacto .subtit {
    margin-bottom: 10px;
}
.contacto .tel {
    display: block;
    margin-top: 10px;
    font-size: var(--title-xs);
}
.contacto #element-1 .element-form-widget {
    padding-left: 120px;
}
.contacto #element-2 .e-con-boxed {
    padding: 60px 120px;
}
@media screen and (max-width: 1200px) {
    /* Contenedores */
    .element {
        padding: 100px 20px;
    }
    /* Formulario */
    .default-form .datos {
        gap: 18px;
    }
    /* Contacto */
    .contacto #element-1 .element-form-widget {
        padding-left: 50px;
    }
    .contacto #element-2 .e-con-boxed {
        padding: 50px 100px;
    }
}
@media screen and (max-width: 1024px) {
    /* Contenedores */
    .element {
        padding: 60px 20px;
    }
    .e-column {
        flex-direction: column;
    }
    /* Filtración industrial */
    .filtracion-industrial h2.title {
        font-size: 30px;
    }
    .filtracion-industrial h2.subtitle {
        font-size: 25px;
    }
    .filtracion-industrial .place {
        height: auto;
        padding: 80px 20px;
    }
    .filtracion-industrial .head-slider .place .txt {
        justify-content: space-between;
        width: 100%;
    }
    .filtracion-industrial .place-1 {
        padding: 0 !important;
    }
    .filtracion-industrial .place-1 .ficha {
        max-height: 350px;
        padding: 40px 20px;
        justify-content: flex-start;
    }
    .filtracion-industrial .place-3 {
        justify-content: flex-start;
        height: 60vh !important;
    }
    .filtracion-industrial .place-3 .txt {
        max-width: 60%;
        width: 100%;
    }
    .filtracion-industrial .place-3 .txt.no-visible {
        display: none;
    }
    .filtracion-industrial .full-color {
        padding: 80px 20px;
    }
    .sliderProductos .swiper-button-next,
    .sliderProductos .swiper-button-prev {
        display: none;
    }
    .sliderProductos .swiper-pagination {
        bottom: 10px !important;
    }
    /* Contacto */
    .contacto #element-1 .element-form-widget {
        padding-left: 0;
        margin-top: 60px;
    }
    .contacto #element-2 .e-con-boxed {
        padding: 60px 20px;
    }
}
@media screen and (max-width: 600px) {
    table {
        display: block;
        overflow: scroll;
    }
    table::-webkit-scrollbar {
        display: none;
        appearance: none;
    }
    /* Formulario */
    .default-form .datos {
        flex-direction: column;
    }
    .default-form .datos>div {
        max-width: 100%;
    }
    .default-form .rgpd {
        align-items: flex-start;
    }
    /* Filtración industrial */
    .filtracion-industrial h2.title {
        font-size: 25px;
    }
    .filtracion-industrial h2.subtitle {
        font-size: 20px;
    }
    .filtracion-industrial .head-slider .place {
        padding: 20px;
        position: static;
        background-color: #000;
    }
    .filtracion-industrial .place-1 {
        padding: 0 !important;
    }
    .filtracion-industrial .mosaic {
        display: flex;
        flex-direction: column;
    }
    .filtracion-industrial .mosaic .ficha {
        height: auto;
    }
    .filtracion-industrial .mosaic .ficha:nth-child(2) {
        background-color: #ECE5E0;
    }
    .filtracion-industrial .mosaic .ficha .title {
        font-size: 26px;
    }
    .filtracion-industrial .place-4 {
        padding: 40px 20px;
    }
    .filtracion-industrial .place-4 h2 {
        text-align: center;
    }
    .filtracion-industrial .place-5 {
        padding: 40px 20px;
    }
    .filtracion-industrial .place-5 .column {
        flex-direction: column-reverse;
    }
    .filtracion-industrial .place-5 .column .col-1 {
        margin-right: 0;
        margin-top: -60px;
        padding: 20px;
        width: calc(100% - 20px);
    }
}
/* ==========================================================================
   RUEDA · proceso.php + filtracion-industrial.php
   Pegar AL FINAL de css/styles-child.css
   >= 1200px     -> reglas originales de escritorio (no se tocan)
   768 - 1199px  -> tablet: escenario fijo de 690x730 px, líneas en un SVG de fondo
   <= 767px      -> móvil: lista vertical y la rueda al final
   ========================================================================== */
/* ---------- TABLET: misma composición que en escritorio ---------- */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    /* Escenario: todo se coloca con coordenadas fijas dentro de este cuadro.
       Las 5 líneas de colores van dibujadas en el SVG de fondo (mismas
       coordenadas que los bloques), así no se pueden descolocar. */
    .rueda {
        position: relative;
        flex: none;
        display: block;
        width: 690px;
        height: 730px;
        margin: 60px auto;
        padding: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='690' height='730' viewBox='0 0 690 730' fill='none' stroke-width='4'%3E%3Cpath d='M345 180V220' stroke='%23E0D4CB'/%3E%3Cpath d='M428 275H472' stroke='%23818386'/%3E%3Cpath d='M394 392L432 434' stroke='%233CB7CF'/%3E%3Cpath d='M296 392L258 434' stroke='%23F0854D'/%3E%3Cpath d='M218 275H262' stroke='%238DC567'/%3E%3C/svg%3E") 0 0 / 690px 730px no-repeat;
    }
    .rueda .bloque {
        position: absolute;
        width: 210px;
        max-width: none;
        margin: 0;
        padding: 0;
        transform: none;
    }
    /* Posición de cada bloque dentro del escenario (si hace falta afinar, es aquí) */
    .rueda .bloque:nth-child(1) { left: 240px; top: 0; }
    .rueda .bloque:nth-child(2) { left: 480px; top: 235px; }
    .rueda .bloque:nth-child(3) { left: 425px; top: 444px; }
    .rueda .bloque:nth-child(4) { left: 55px;  top: 444px; }
    .rueda .bloque:nth-child(5) { left: 0;     top: 235px; }
    .rueda .bloque .number {
        flex: none;
        width: 40px;
        font-size: 48px;
        line-height: 1;
    }
    /* proceso: .txt  |  filtración: .bloque-item */
    .rueda .bloque .txt,
    .rueda .bloque-item {
        flex: 1;
        width: auto;
        min-width: 0;
    }
    .rueda .bloque-item {
        display: flex;
        gap: 10px;
    }
    .rueda .bloque-item p {
        flex: 1;
        min-width: 0;
    }
    .rueda .bloque p {
        margin-bottom: 0;
    }
    .rueda .rotor {
        position: absolute;
        left: 260px;
        top: 228px;
        width: 170px;
        height: 170px;
        margin: 0;
        padding: 0;
    }
    .rueda .rotor img {
        display: block;
        width: 170px;
        height: 170px;
        margin: 0;
    }
}
/* ---------- MÓVIL: lista vertical + rueda al final (igual en las dos páginas) ---------- */
@media screen and (max-width: 767px) {
    .rueda {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 40px 20px;
        background: none;
    }
    /* en filtración la rueda ya va dentro de .place-4, que tiene su propio padding */
    .place-4 .rueda {
        width: 100%;
        margin-top: 30px;
        padding: 0;
    }
    .rueda .bloque {
        position: static;
        width: auto;
        max-width: 360px;
        margin: 0 auto;
        padding: 0;
        transform: none;
    }
    .rueda .bloque + .bloque {
        margin-top: 20px;
    }
    .rueda .bloque .number {
        flex: none;
    }
    .rueda .bloque-item {
        display: flex;
        flex: 1;
        gap: 10px;
    }
    .rueda .bloque-item p {
        flex: 1;
        min-width: 0;
    }
    .rueda .rotor {
        position: static;
        width: auto;
        height: auto;
        margin: 20px 0 0;
        padding: 0;
        text-align: center;
    }
    .rueda .rotor img {
        display: inline-block;
        width: 260px;
        max-width: 100%;
        height: auto;
        margin: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .place-4 .rueda {
        height: 620px;
        margin-bottom: 0;
    }
}
header nav > ul > li > a.active,
header nav > ul > li > span.active,
header nav > ul > li > ul > li a.active {
    color: var(--c-azul);
}
@media only screen and (max-width: 600px) {
    header nav > ul > li > a.active,
    header nav > ul > li > span.active,
    header nav > ul > li > ul > li a.active {
        color: var(--c-blanco);
        background-color: rgba(255, 255, 255, 0.2);
    }
}
header nav > ul > li > span {
    cursor: pointer;
}
header nav > ul > li.open > span {
    color: var(--c-azul);
}
@media only screen and (min-width: 600px) {
    header nav > ul > li.open > ul {
        display: block;
    }
}