:root {
    --desktop-container-width: 80%;
    --mobile-container-width: 90%;
    --pale-gray: #EBEBEB;
    --gray: #CCCCCC;
    --mesquita-yellow: #FDBF33;
    --mesquita-steelgray: #5E6A7D;
    --gray-text: #3A3A3A;
    --white: #FDFDFD;
    --orange: #FF5E00;
    --darker-orange: #c43f1d;
    font-size: 16px;
    background-color: var(--pale-gray);
}

body {
    margin: 0;
    font-family: sans-serif;
}

.section-banner {
    position: relative;
    height: 200px;
    background-color: #464545;
    text-align: center;
    color: var(--white);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-banner-title {
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
}

/* HEADER */

.header {
    display:flex;
    justify-content: center;
    box-sizing: border-box;
    background-color: var(--white);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* HERO BANNER */

.hero-banner {
    position: relative;
    background-color: #464545;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 5vh 0;
    box-sizing: border-box;
}

.hero-banner-content {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-wrap: wrap;
    gap: 7.5vw;
    align-items: flex-start;
    justify-content: center;
    align-items: center;
}

.info-container {
    display: flex;
    flex-direction: column;
    gap: 50px;
    box-sizing: border-box;

}

.title-container {
    width: 100%;
}


.iram-logo {
    width: 200px;
}

.iso-9001-logo {
    width: 125px;
}

.logos-container {
    display: flex;
    justify-content: space-around;
}

/* TITLE */

.hero-title,
.hero-subtitle {
    margin: 5px 0;
    color: white;
    text-align: center;
}

.hero-title {
    font-size: 2rem;
}

.hero-subtitle {
    font-size: 1.4rem;
}

/* FORM */

.form-container {
    max-width: 440px;
    border-radius: 5px;
    background-color: var(--pale-gray);
}

.form-title {
    color: #464545;
    text-align: center;
    box-sizing: border-box;
    padding: 0px 5px;
}

.quote-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--white);
    box-sizing: border-box;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: auto;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group input,
.form-group textarea {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--gray);
    border-radius: 4px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--orange);
    outline: none;
}

textarea {
    min-height: 60px;
    max-height: 80px;
    resize: vertical;
    font-family: sans-serif;
}

button{
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    background-color: var(--orange);
    color: var(--white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
}

button:hover{
    background-color: var(--darker-orange);
}


.download-btn {
  background-color: var(--mesquita-yellow);
  color: var(--gray-text); /* stays readable on yellow */
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.download-btn:hover {
  background-color: #e0aa2c; /* slightly darker yellow */
  color: var(--gray-text);   /* no flip to white */
}


/* INTRO TEXT SECTION */

.intro-text-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: var(--mobile-container-width);
    max-width: var(--container-max-width);
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px 0px;
}

.description-text-container {
    color: var(--gray-text)
}

.seo-image {
    width: 100%;
    max-width: 600px;
    display: block;
    margin-top: 1rem;
}

/* VIDEO SECTION */

.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.video-item {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    position: relative;
}

lite-youtube.lty-playbtn {
    display: block;
}

lite-youtube .lty-playbtn {
    position: absolute;
    width: 100%;
    aspect-ratio: 1/1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* VERTICAL VIDEO SECTION */

.shorts-section {
    width: 100%;
}

.shorts-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0;
}

.vertical-video-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.vertical-video {
    height: calc(100% + 0.25px);
    width: calc(100% + 0.25px);
    object-fit: cover;
}

/* PDF CATALOG SECTION */

.card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    background: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 1.5rem auto;
    max-width: 1100px;
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.pdf-catalog-section {
    background-color: var(--pale-gray);
    color: var(--gray-text);
}

/* PUERTA CORTAFUEGO VIDRIADA SECTION */
    /* Solo ajustes locales */
    .puertas-vidriadas-section {
      background-color: var(--white);
      padding: 4rem 1rem;
    }

    .puertas-vidriadas-section .section-title {
      font-size: 1.8rem;
      text-align: center;
      margin-bottom: 2rem;
    }

    .puertas-vidriadas-section .text-block {
      max-width: 800px;
      margin: 0 auto 2rem;
      text-align: center;
      color: var(--gray-text);
    }

    .puertas-vidriadas-section .text-block a {
      color: var(--main-color);
      text-decoration: underline;
    }

    .puertas-vidriadas-section .grid-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 1.5rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .grid-gallery figure {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .grid-gallery img {
      width: 100%;
      display: block;
      height: auto;
    }

    .grid-gallery figcaption {
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
      color: #444;
    }

/* FOOTER SECTION */
.footer {
    background: #000;
    color: #fff;
    font-family: 'Arial', sans-serif;
    text-align: center;
    border-top: 10px solid var(--mesquita-yellow);
}

.footer-top {
    background-color: #464545;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2rem;
}

.contact-column {
    display: flex;
    gap: 2rem;
}

.contact-text-column {
    display: flex;
    flex-direction: column;
    justify-items: space-between;
    text-align: left;
}

.contact-text-column h4 {
    font-size: 1.2rem;
    margin: 0.8rem 0;
}

.contact-text-column p {
    font-size: 0.9rem;
    margin: 0;
}

.footer-bottom {
    padding: 1.5rem 0;
}

 .headquarters-icon, .phone-icon {
    width: 125px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.social-icons a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.social-icon {
    width: 28px;
    height: 28px;
    fill: currentColor;
    transition: fill 0.3s ease, transform 0.2s ease;
}

.social-icons a:hover .social-icon {
    fill: #e0e0e0;
    transform: scale(1.1);
}

.footer p {
    font-size: 0.9rem;
    margin: 0;
}

/* Ensure crisp rendering */
.social-icon {
    shape-rendering: geometricPrecision;
}

/* WHATSAPP ICON */

  .whatsapp-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .whatsapp-icon img {
    width: 35px;
    height: 35px;
  }

/* ANIMACIONES */

/* FUEGOS */

.fire-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fire {
    position: absolute;
    top: -10%;
    width: 40px;
    height: 40px;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M11.1758045,11.5299649 C11.7222481,10.7630248 11.6612694,9.95529555 11.2823626,8.50234466 C10.5329929,5.62882187 10.8313891,4.05382867 13.4147321,2.18916004 L14.6756139,1.27904986 L14.9805807,2.80388386 C15.3046861,4.42441075 15.8369398,5.42670671 17.2035766,7.35464078 C17.2578735,7.43122022 17.2578735,7.43122022 17.3124108,7.50814226 C19.2809754,10.2854144 20,11.9596204 20,15 C20,18.6883517 16.2713564,22 12,22 C7.72840879,22 4,18.6888043 4,15 C4,14.9310531 4.00007066,14.9331427 3.98838852,14.6284506 C3.89803284,12.2718054 4.33380946,10.4273676 6.09706666,8.43586022 C6.46961415,8.0150872 6.8930834,7.61067534 7.36962714,7.22370749 L8.42161802,6.36945926 L8.9276612,7.62657706 C9.30157948,8.55546878 9.73969716,9.28566491 10.2346078,9.82150804 C10.6537848,10.2753538 10.9647401,10.8460665 11.1758045,11.5299649 Z M7.59448531,9.76165711 C6.23711779,11.2947332 5.91440928,12.6606068 5.98692012,14.5518252 C6.00041903,14.9039019 6,14.8915108 6,15 C6,17.5278878 8.78360021,20 12,20 C15.2161368,20 18,17.527472 18,15 C18,12.4582072 17.4317321,11.1350292 15.6807305,8.66469725 C15.6264803,8.58818014 15.6264803,8.58818014 15.5719336,8.51124844 C14.5085442,7.0111098 13.8746802,5.96758691 13.4553336,4.8005211 C12.7704786,5.62117775 12.8107447,6.43738988 13.2176374,7.99765534 C13.9670071,10.8711781 13.6686109,12.4461713 11.0852679,14.31084 L9.61227259,15.3740546 L9.50184911,13.5607848 C9.43129723,12.4022487 9.16906461,11.6155508 8.76539217,11.178492 C8.36656566,10.7466798 8.00646835,10.2411426 7.68355027,9.66278925 C7.65342985,9.69565638 7.62374254,9.72861259 7.59448531,9.76165711 Z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    /* animation: fall linear infinite; */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.fire-container-sibling {
    position: relative;
    z-index: 1;
}

/* SPINNER */

.loading-indicator {
  display: none;
  align-items: center;
  gap: 6px; /* space between spinner and text */
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

.loading-indicator.active {
  display: flex;
}

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- REGLAS DE RESPONSIVE DESIGN --- */

/* Por defecto, en pantallas chicas, ocultamos los fuegos del 11 en adelante */
.fire:nth-child(n + 11) {
    display: none;
}

@media (min-width: 768px) {

    /* Cuando la pantalla sea de 768px o más, los volvemos a mostrar */
    .fire:nth-child(n + 11) {
        display: block;
    }

    /* HEADER */

    .header {
        justify-content: flex-start;
        padding-left: 15%;
    }

    /* BANNER SECTION */

    .hero-banner {
        padding: 50px 0px;
    }

    .form-container {
        width: 45%;
    }

    .iram-logo {
        width: 250px;
    }
    .logos-container {
        gap: 50px;
    }

    /* INTRO TEXT SECTION */

    .intro-text-section {
        width: var(--desktop-container-width);
    }

    .description-text-container {
        width: 50%;
        max-width: 570px;
    }
    .description-image-container {
        width: 50%;
        max-width: 320px;
    }

    /* SECTION BANNERS */

    .section-banner-title {
        font-size: 2rem;
    }

    /* HORIZONTAL VIDEO SECTION */

    .video-item,
    lite-youtube .lty-playbtn {
        width: calc(100% / 3);
    }

    /* VERTICAL VIDEO SECTION */

    .shorts-container {
        flex-wrap: nowrap;
    }

    .vertical-video-wrapper {
        width: 25%;
    }

    /* PDF CATALOG SECTION */
    .card {
        grid-template-columns: 200px 1fr;
    }

    /* FOOTER SECTION */

    .footer-top {
        justify-content: space-evenly;
    }

    /* WHATSAPP */

    .whatsapp-icon {
        display: none;
    }

    /* GO TOP BUTTON */

    #goTopBtn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 50%;
        background-color: var(--mesquita-yellow);
        color: var(--mesquita-steelgray);
        /* SVG uses currentColor */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        z-index: 100;
        display: none;

        /* true centering */
        display: flex;
        align-items: center;
        justify-content: center;

        transition: transform 0.2s ease;
    }

    #goTopBtn:hover {
        transform: scale(1.1);
    }

    /* make the icon render centered, no baseline gaps */
    #goTopBtn svg {
        width: 22px;
        height: 22px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}