/* =====================================================
   Responsive styles - no altera el diseño de escritorio
   ===================================================== */

/* Previene que el body se expanda más allá del viewport */
html {
  overflow-x: hidden;
}

/* Precio en páginas SAS: tamaño uniforme en todos los dispositivos */
.header-box-bottom .text1 {
  font-size: 17px !important;
  line-height: 1.4 !important;
}

@media screen and (max-width: 989px) {

  body {
    min-width: 0;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
  }

  /* ---- Header ---- */
  header {
    display: block;
    overflow: hidden;
    width: 100%;
  }

  .header {
    height: auto;
    position: relative;
    overflow: hidden;
  }

  .header .logo {
    position: relative;
    display: block;
    margin: 15px 0;
  }

  .header .top-menu {
    position: relative;
    margin: 0;
  }

  /* Menú centrado — Cufon controla font-size, no se toca */
  .top-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .top-menu li,
  .top-menu li a {
    float: none;
    display: inline-block;
  }

  .top-menu li a {
    padding: 10px 12px;
  }

  .top-menu img {
    display: none;
  }

  /* ---- Header box ---- */
  .header-box {
    overflow: hidden;
    width: 100%;
  }

  .header-box .row-box,
  .header-box .clear {
    overflow: hidden;
    width: 100%;
  }

  .header-box .row-box-1,
  .header-box .row-box-2 {
    float: none;
    width: 100% !important;
    overflow: hidden;
  }

  .list-header {
    width: 100% !important;
    box-sizing: border-box;
    background-size: 100% 100%;
  }

  /* Ajuste de items en el panel verde para móvil */
  .list-header li {
    height: auto !important;
    line-height: 1.6 !important;
    padding: 6px 20px !important;
  }

  /* header-box-bottom: oculto si solo es decorativo.
     En páginas SAS tiene botón y precio — se muestra con fondo verde */
  .header-box-bottom {
    display: none;
  }

  .header-box-bottom:has(.button) {
    display: block !important;
    background: #6b8e23 !important;
    height: auto !important;
    padding: 15px 20px;
    text-align: left;
  }

  .header-box-bottom:has(.button) .button {
    position: relative !important;
    display: inline-block !important;
    margin: 0 10px 0 0 !important;
    vertical-align: middle;
  }

  .header-box-bottom:has(.button) .text1,
  .header-box-bottom:has(.button) .text2 {
    position: relative !important;
    display: inline !important;
    color: #ffffff;
    font-size: 15px;
  }

  /* ---- Slider ---- */
  /* Truco aspect-ratio: padding-bottom mantiene proporción 451/663 ≈ 68% */
  #faded {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 68.02% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* El div interno debe llenar todo el espacio del contenedor */
  #faded > div {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }

  /* Imágenes llenan el espacio; object-fit las escala sin distorsión */
  #faded > div img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* Paginación: reubicada abajo a la derecha */
  #faded ul.pagination {
    position: absolute !important;
    margin: 0 !important;
    bottom: 10px;
    right: 5px;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    background: rgba(0, 0, 0, 0.4);
    padding: 5px 3px;
    border-radius: 4px;
  }

  /* ---- Content columns ---- */
  .col-1,
  .col-2,
  .col-3,
  .col-4 {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .row-box-1,
  .row-box-2,
  .row-box-3,
  .row-box-4 {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* layout.css overrides */
  #page1 #content .col-1,
  #page1 #content .col-2,
  #page1 #content .col-3,
  #page2 #content .col-1,
  #page2 #content .col-2,
  #page2 #content .col-3,
  #page3 #content .col-1,
  #page3 #content .col-2,
  #page4 #content .col-1,
  #page4 #content .col-2,
  #page4 #content .col-3,
  #page5 #content .col-1,
  #page5 #content .col-2,
  #page5 #content .col-3,
  #page6 #content .col-1 {
    width: 100% !important;
    margin-left: 0 !important;
  }

  #page3 #content .row-box-1,
  #page3 #content .row-box-2 {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* ---- Images ---- */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Imágenes de contenido centradas en móvil */
  .col-1 img,
  .col-2 img,
  .col-3 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Separación entre botón "Leer mas" y el siguiente título */
  .button {
    margin-bottom: 30px;
  }

  /* ---- Descargas: centradas manteniendo layout de 2 columnas ---- */
  .col-2 .row-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    float: none !important;
    width: 100% !important;
  }

  .col-2 .row-box-1,
  .col-2 .row-box-2 {
    float: none !important;
    width: auto !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    text-align: center;
  }

  /* ---- Row list ---- */
  .row-list ul {
    float: none;
    width: 100%;
  }

  .row-list .list-indent {
    margin-left: 0;
    margin-top: 10px;
  }

  /* ---- Footer ---- */
  .footer-list li {
    padding: 0 10px 0 0;
  }

}

@media screen and (max-width: 600px) {

  .main {
    padding: 0 6px;
  }

  /* El menú ya se centra desde el breakpoint de 989px */

  /* ---- Header text ---- */
  /* NO se toca font-size de h3 porque Cufon lo controla */
  .header-text h3 {
    padding: 15px 0 15px 15px;
  }

  /* ---- Footer ---- */
  .footer-list li {
    float: none;
    display: block;
    padding: 4px 0;
  }

  /* ---- Form ---- */
  #page3 .form .input,
  .form .textarea {
    width: 100% !important;
    box-sizing: border-box;
  }

  #page5 .form .form-2 {
    width: 100%;
  }

  #page5 .form .textarea,
  #page5 .form .input {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ---- Tablas en footer ---- */
  .footer-list table {
    display: none;
  }

}