/* =====================================================================
   responsive.css  -  Toldos Gennius
   Se carga SIEMPRE después de reset.css, style.css y grid.css.
   - Las reglas SIN @media reproducen lo que antes estaba en línea (escritorio igual que antes).
   - @media (max-width:1019px): diseño fluido (tablet).
   - @media (max-width:768px):  móvil (menú hamburguesa, una columna...).
   ===================================================================== */

/* ---------- Escritorio: lo que antes estaba "en línea" en index.html ---------- */

/* Vídeo (antes #apDiv1 en <style> con "height:191" sin unidad) */
#apDiv1 {position:absolute; width:298px; height:191px; z-index:1; left:345px; top:69px; margin-left:10px}

/* Tarjeta derecha (antes style="float:right" en línea) */
.container_12 .grid_6.omega {float:right}

/* Idioma / bandera (antes estilos en línea) */
.idioma {float:right; width:25px}
.idioma img {float:right; margin:27px 10px 0 0}

/* Miniaturas de la galería (antes se aplicaba con jQuery: width 320px + float right) */
div#thumbs {float:right}

/* Ventana promocional (antes estilos en línea) */
#close {border:0 !important; background:transparent; left:260px; top:160px; position:fixed; width:595px; z-index:9999}
#close img {max-width:100%; height:auto}
/* Botón cerrar hecho con CSS (antes era la imagen 6.png / TANCAR.png): texto pequeño y claro + cuadro rojo con × */
#close .promo-close {float:right; display:inline-flex; align-items:center; gap:7px; margin:0 0 4px 0; padding:5px 5px 5px 10px; min-height:30px;
    background:rgba(0,0,0,.62); border-radius:4px; color:#e9e9e9; font:700 12px/20px Arial, Helvetica, sans-serif; letter-spacing:.06em; text-transform:uppercase; text-decoration:none}
#close .promo-close:hover {background:rgba(0,0,0,.8); color:#fff}
#close .promo-close-x {display:block; width:20px; height:20px; border-radius:3px; background:#e5242b; color:#fff; font:700 17px/20px Arial, Helvetica, sans-serif; text-align:center; letter-spacing:0}
#close.is-hidden {display:none}

/* Textos */
.company-name {color:#950916; font-weight:bold; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:16px; text-align:center}
.text-links a {text-decoration:underline}
.contact-line a {color:#950916; font-weight:bold}
.contact-line a.addr {text-decoration:none}
.addr-l {display:block}
.tel-line {display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 8px}
.tel-line a {line-height:1.6}
.tel-line .sep {font-weight:bold}
.footer-line a.tel-footer {color:#fff; text-decoration:none}

/* Elementos solo móvil: ocultos en escritorio */
.menu-toggle {display:none}
.callbar {display:none}

/* Efectos de estación (hojas, nieve...) */
.elementoEstacion {position:fixed; left:0; top:0; z-index:9; pointer-events:none; user-select:none; background:transparent; border:0; box-shadow:none; will-change:transform}

/* Mejor foco para teclado (accesibilidad) */
a:focus-visible, button:focus-visible {outline:3px solid #ff9601; outline-offset:2px}

/* =====================================================================
   TABLET Y MÓVIL  (≤ 1019 px): diseño fluido
   ===================================================================== */
@media (max-width:1019px) {
    html, body {max-width:100%; overflow-x:hidden}
    body {min-width:0}
    img {max-width:100%}

    .main, .container_12 {width:auto; max-width:980px; padding-left:16px; padding-right:16px}
    .container_12 .container_12 {padding-left:0; padding-right:0}

    /* Rejilla: columnas apiladas */
    .container_12 [class*="grid_"],
    .container_12 [class*="grid_"].omega,
    .container_12 .grid_6.omega {float:none; width:auto; margin-left:0; margin-right:0; display:block}

    /* Cabecera */
    .row-1 {height:auto; min-height:71px}
    .menu {width:100%; display:flex}
    .menu li {float:none; flex:1 1 20%}
    .menu li a {width:auto; font-size:clamp(14px, 2.3vw, 21px); letter-spacing:0; padding:21px 4px 24px}

    .row-2 .container_12 {display:flex; align-items:center; justify-content:space-between}
    .row-2 .container_12 .grid_9 {flex:1 1 auto; min-width:0}
    h1 {margin-left:0; padding:10px 0 0}
    .logo {font-size:clamp(28px, 7.5vw, 53px); letter-spacing:-0.05em}
    h1 span {display:block; font-size:clamp(16px, 4vw, 38px); letter-spacing:-0.03em; padding:0 0 14px}
    .idioma {float:none; width:auto; flex:0 0 auto}
    .idioma img {float:none; display:block; margin:0 0 0 12px}

    /* Galería: diapositiva a ancho completo, miniaturas debajo */
    .bg-top-shadow {padding:24px 0 36px}
    .gallery {padding:16px}
    div.content {float:none; width:100%; max-width:620px; height:auto; margin:0 auto}
    div.slideshow-container {height:0; padding-bottom:65%; /* 403/620 */ }
    div.slideshow {position:absolute; left:0; top:0; width:100%; height:100%}
    div.slideshow span.image-wrapper,
    div.slideshow a.advance-link {width:100%; height:100%}
    div.slideshow a.advance-link img {width:100%; height:100%; object-fit:cover}

    div#thumbs {float:none; width:100%; height:auto; overflow:hidden; margin-top:12px}
    ul.thumbs {float:none; width:auto; display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:6px}
    ul.thumbs li {float:none; flex:0 0 auto; width:104px; height:auto; margin:0}
    ul.thumbs li img {width:100%; height:auto; display:block}
    div.content a span, div.navigation a span {width:100%; height:100%}

    /* Texto de bienvenida */
    .inner {padding:0}
    .title {float:none; display:block; font-size:clamp(30px, 9vw, 49px); line-height:1.2; letter-spacing:-0.05em; padding:0; margin:0 0 8px; background:none; text-align:center}
    .img-indent3 {float:none; margin:0}
    .extra-wrap {overflow:visible}

    /* Galería multimedia */
    h3 {font-size:clamp(26px, 6vw, 36px); letter-spacing:-0.04em}
    .container_12 .wrapper > article.grid_6 {display:flex; align-items:center; gap:16px; max-width:480px; margin:0 auto 20px}
    .grid_6 .img-indent, .grid_6 .img-indent4 {float:none; margin:0; flex:0 0 auto; max-width:120px}
    .grid_6 .frame img {display:block; width:100%; height:auto}
    .grid_6 .extra-wrap {flex:1 1 auto; min-width:0}
    .grid_6 .indent-top {padding-top:0}
    .grid_6 .indent-top p, article .clear {display:none}

    /* Vídeo: deja de estar posicionado en absoluto */
    #apDiv1 {position:static; width:100%; max-width:480px; height:auto; margin:8px auto 24px}
    #apDiv1 video {display:block; width:100%; height:auto; background:#000}

    /* Separadores &nbsp; -> márgenes */
    .container_12 > p {display:none}
    .weather {max-width:100%; overflow-x:auto; margin:24px 0}
    .footer-line p {padding:0 8px}
}

/* =====================================================================
   MÓVIL  (≤ 768 px)
   ===================================================================== */
@media (max-width:768px) {
    body {padding-bottom:64px; /* hueco para la barra de llamada */ -webkit-text-size-adjust:100%}
    .main {font-size:16px; line-height:1.55}

    /* Menú hamburguesa */
    .row-1 {background:#262626; min-height:0}
    .row-1 .main, .row-1 .container_12 {padding-left:0; padding-right:0}
    .menu-toggle {display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:0 16px; border:0; background:#262626; color:#fff;
                  font:700 18px "Trebuchet MS", Arial, sans-serif; letter-spacing:.04em; text-transform:uppercase; text-align:left; cursor:pointer}
    .menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after {display:block; width:24px; height:3px; background:#fff; border-radius:2px; content:""; position:relative}
    .menu-toggle-icon::before {position:absolute; top:-8px}
    .menu-toggle-icon::after {position:absolute; top:8px}
    .menu {display:block; background:#262626}
    .js .menu {display:none}
    .js .menu.open {display:block}
    .menu li {float:none; background:none}
    .menu li:first-child {background:none}
    .menu li a {width:auto; text-align:left; font-size:18px; padding:15px 16px; color:#fff; letter-spacing:.02em; background:none; border-top:1px solid rgba(255,255,255,.15)}
    .menu li a:hover, .menu li a.active {background:#ff9601; color:#262626}

    /* Cabecera */
    .row-2 {min-height:0}
    .row-2 .main {padding:0 16px}
    .row-2 .container_12 {padding:0}
    h1 {padding-top:12px}

    /* Textos */
    .company-name {font-size:18px}
    .text-links {text-align:center; margin:12px 0; font-size:0; /* oculta las comas entre enlaces */}
    .text-links a {display:inline-block; font-size:16px; line-height:1.4; padding:8px 8px}
    .contact-line {font-size:16px; line-height:1.6; margin-bottom:8px}
    .contact-line a {display:inline-block; padding:6px 4px}
    .contact-line a.addr {display:block; padding:6px 0}
    .tel-line a {padding:4px 2px}
    .list-1 li {font-size:20px; letter-spacing:0; line-height:1.3; padding:0 0 0 12px}
    .list-1 li a {display:inline-block; padding:12px 0}

    /* Ventana promocional centrada y con tamaño de móvil */
    #close {left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 32px); max-width:595px; max-height:90vh; overflow:auto}

    /* Barra de llamada fija abajo */
    .callbar {display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9998; box-shadow:0 -2px 8px rgba(0,0,0,.35)}
    .callbar a {flex:1 1 50%; display:flex; align-items:center; justify-content:center; min-height:56px; padding:0 8px; font:700 16px Arial, Helvetica, sans-serif; text-align:center; text-decoration:none}
    .callbar-a {background:#ff9601; color:#262626}
    .callbar-b {background:#262626; color:#fff}
    .callbar a span {margin-left:.4em; font-weight:400}
}

@media (max-width:380px) {
    .callbar a span {display:none}
    .menu-toggle {font-size:16px}
}

/* Contenido de otras páginas que comparten style.css (formularios, carrusel...) */
@media (max-width:1019px) {
    #contact-form input, #contact-form textarea, #subscribe-form .subscribe-field, #subscribe-form input, #search-form .search-field {float:none; width:100%; max-width:100%}
    #contact-form textarea {height:160px}
    .text-form {float:none; width:auto}
    .carousel {width:100%}
    .price-list li a {float:none}
    .padding img, .box img, .frame img {max-width:100%; height:auto}
    table {display:block; max-width:100%; overflow-x:auto}
}

/* En móvil la revista no se muestra ni se descarga */
@media (max-width:768px) {
    iframe.revista, noscript iframe {display:none}
}

/* Respeta a quien pide menos animación */
@media (prefers-reduced-motion:reduce) {
    .elementoEstacion {display:none}
}