:root{
    --hero-height: 95vh;
    --grid-gap: 30px;
    --accent-color: #ff020f;
    --navbar-hover-background: #e7e7e7;
    --red-rotomex: #d61513;
    --mobile-padding: 0;
    --background: #fff;
}

body{
    padding-top: 59px;
    font-family: "Poppins", sans-serif;
}
h1, h2, h3, h4, h5 {
    font-family: "Cal Sans", sans-serif;
    letter-spacing: initial;
    font-weight: 400;
}
big{
    font-size: 1.5em;
    line-height: 1.4;
    display: block;
    margin-bottom: 2rem;
}

@media (min-width: 1024px){
    big.intro{
       margin-right: 5em; 
    }
    
}

.navbar-logo{
    /**/
}
.hero{
    width: 100%;
    height: var(--hero-height);
    position: relative;
    background: #1F4362 url(/content/media/portada-inicio-rotomex.jpg) center center no-repeat;
    background-size: cover;
    color: #fff;
}
.hero .grid-container{
    height: var(--hero-height);
    place-items: center;
    overflow:hidden; /* for animations on mobile */
}
.hero-msg h1{
    font-size: 5.5em;
    text-transform: uppercase;
}
.hero-msg p{
    font-size: 1.3em;
    line-height: 1.2;;
}
.wrapper, .container {
    width: min(90%, 1320px);
    margin-inline: auto;
}

.heading-black {
    padding-bottom: 50px;
    opacity: .98;
    color: #000;
}
.heading-title {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    line-height: 1;
    padding-bottom: 10px;
}
h2 {
    font-size: 50px;
    font-weight: 600;
    line-height: .92;
    margin: 0;
}

#services h3{
    font-size: 3rem;
    font-weight: 600;
    color:#444;
}
.container75{
    width: 75%;
    margin: 0 auto;
}
.service-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 220px;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-color: #000;
}
.service-link{
    font-size: 2em;
    text-align: center;
    color: #fff;
    padding: 1em 0;
}
.service-body {
    text-align: center;
    width: 305px;
    max-width: 100%;
    position: relative;
    opacity: .999;
    z-index: 2;
    margin: 35px auto auto auto;
    padding: 30px 30px 0px 30px;
    background-color: #f7f7f7;
}
.bg-white{
    background-color: #fff;
}
.bg-gray {
    background-color: #f7f7f7;
}
.bg-1{
    background: url(/content/media/site/portada-plastica.webp) center center no-repeat;
    background-size: cover;
}
.bg-2{
    background: url(/content/media/site/portada-ceramica.webp) center center no-repeat;
    background-size: cover;
}
.bg-3{
    background: url(/content/media/site/portada-metalica.webp) center center no-repeat;
    background-size: cover;
}
footer{
    background-color: #1a2531;
    color: #ccc;
    min-height: 5em;
    padding-top: 4em;
    font-size: 0.9rem;
}
.copyright{
    font-size: 0.75rem;
    text-align: center;
    padding: 2em 0 1em;
}
footer h4{
    font-size: .9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.footer-menu{
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 1em;
}
.footer-menu li{
    margin-bottom: .2em;
}
footer a{
    text-decoration: none;
    color: #fff !important;
}
footer a:hover{
    color: #ff9b00 !important;
}
.footer-logo{
    width: 188px;
    display: block;
    margin-bottom: 1.5em;
}
.social-links{
    font-size: 1.6em;
}
.social-links a:hover{
    color: #fff;
}
.jumbotron {
    padding: 4em 2em;
    margin-bottom: 2em;
    background-color: #e9ecef;
    border-radius: .3em;
}
.img-responsive{
    width: 100%;
}
.well{
    background: #ddd;
}
.well p, .well h4{
    padding-left: 20px;
    padding-right: 20px;
}
.well h4{
    margin-top: .3em;
}

.section-header{
    position: relative;
    height: 230px;
    background: url(/content/media/headers/header-pulido.webp) bottom center no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    .overlay{
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #000000ee 0%, #00000080 30%, transparent 70%);
        z-index: 1;
    }
    .container {
        position: relative;
        z-index: 2;
    }
    h1 {
        color: #fff;
        margin-bottom:0;
    }
    .breadcrumbs {
        color: #fff;
        font-size: .9em;
    }
}
.breadcrumb {
    font-size: .9em;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}

/* --- Clase para OCULTAR en móvil y MOSTRAR en escritorio --- */
.hide-on-mobile {
  /* Por defecto (móvil), el elemento está oculto */
  display: none !important;
}
/* Cuando la pantalla sea de 768px o más (tablets/escritorio)... */
@media (min-width: 768px) {
  .hide-on-mobile {
    /* ...restauramos su valor de display original */
    display: block !important; 
  }
}

/* --- Clase para MOSTRAR en móvil y OCULTAR en escritorio --- */
.hide-on-desktop {
  /* Por defecto (móvil), el elemento es visible, así que no se necesita
     ninguna regla aquí. Se mostrará con su display natural. */
}

/* Cuando la pantalla sea de 768px o más (tablets/escritorio)... */
@media (min-width: 768px) {
    body{
        padding-top: 87px;
    }
  .hide-on-desktop {
    /* ...lo ocultamos */
    display: none !important;
  }
    /* EXCEPCIÓN: Si la clase está en estas etiquetas, se mostrará en línea */
  span.hide-on-mobile,
  a.hide-on-mobile,
  strong.hide-on-mobile,
  em.hide-on-mobile,
  small.hide-on-mobile {
    display: inline !important;
  }
}

.miniheader {
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 2px solid #ffb5b4;
    display: inline-block;
    margin-bottom: 1em;
    padding-bottom: 0.2em;
    letter-spacing: 0.01em;
    color: #444;
}

.warning1 {
    font-size: 0.78em;
    line-height: 1.2;
    color: #555;
}

    .custom-border-1 {
        border-radius: 0 100px 0 100px;
        overflow: hidden;
    }
    .custom-border-2 {
        border-radius: 100px 0 0 0;
        overflow: hidden;
    }
    .custom-border-3 {
        border-radius: 100px 100px 100px 0;
        overflow: hidden;
    }
    .custom-border-4 {
        border-radius: 200px 10px 10px 10px;
        overflow: hidden;
    }
    .custom-border-5 {
        border-radius: 0 0 100px 0;
        overflow: hidden;
    }
    .custom-border-6 {
        border-radius: 100px 0 100px 0;
        overflow: hidden;
    }
    .custom-border-7 {
        border-radius: 0 0 0 100px;
        overflow: hidden;
    }
    .custom-border-8 {
        border-radius: 0 100px 100px 100px;
        overflow: hidden;
    }
    .custom-border-9 {
        border-radius: 10px 10px 10px 200px;
        overflow: hidden;
    }
    .custom-border-10 {
        border-radius: 0 100px 0 0;
        overflow: hidden;
    }
    .cover{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;   
    }