/* =========================================
   1. RESET Y ESTILOS GENERALES
   ========================================= */
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body { font-family: Arial, sans-serif; background-color: #fff; color: #555; font-size: 11px; }
   
   #container { width: 100%; max-width: 940px; margin: 0 auto; background-color: #fff; position: relative; }
   
   /* =========================================
      2. ENCABEZADO Y MENÚ
      ========================================= */
   #encabezado { padding: 15px 0 0 0; text-align: left; }
   .logo img { height: 75px; border: none; display: block; margin-bottom: 5px; }
   
   #menu { width: 100%; position: relative; z-index: 1000; }
   .menu-toggle { display: none; cursor: pointer; padding: 10px; border: 1px solid #ddd; border-radius: 4px; width: 40px; margin-bottom: 10px; }
   .menu-toggle span { display: block; width: 100%; height: 3px; background-color: #75373C; margin: 4px 0; }
   a.menu-link { text-decoration: none; display: block; color: #333; }
   
   #menu > ul { list-style: none; display: flex; justify-content: flex-start; border-top: 1px dotted #ccc; padding-top: 10px; margin-top: 5px; padding-left: 0; }
   #menu > ul > li { padding-right: 15px; margin-right: 15px; border-right: 1px dotted #999; text-align: left; cursor: pointer; position: relative; }
   #menu > ul > li:last-child { border-right: none; }
   #menu span { font-weight: bold; font-size: 11px; display: block; text-transform: uppercase; }
   #menu p { font-style: italic; font-size: 11px; color: #777; font-family: "Times New Roman", serif; margin-top: 2px; }
   .active { color: #75373C !important; }
   
   /* Submenu Desktop (Flotante) */
   .submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 8px rgba(0,0,0,0.15); list-style: none; padding: 0; z-index: 2000; }
   .submenu li { padding: 10px 15px; border-bottom: 1px solid #eee; border-right: none !important; margin-right: 0 !important; position: relative; white-space: normal; }
   .submenu li:hover { background-color: #f4f4f4; }
   .submenu li a { color: #555; font-size: 11px; text-transform: uppercase; font-weight: bold; }
   .submenu li:hover > a { color: #75373C; }
   @media (min-width: 769px) { li:hover > .submenu { display: block; } .submenu .submenu { top: 0; left: 100%; margin-top: -1px; } }
   
   #barra { background-color: #75373C; height: 18px; width: 100%; margin: 0 0 15px 0; }
   
   /* =========================================
      3. HOME Y LAYOUT GENERAL
      ========================================= */
   .main-banner { background: url("https://www.rosanaruiz.com.ar/artestatic/img/bg-sliderr.png") no-repeat center top; background-size: 940px auto; width: 100%; height: 290px; position: relative; overflow: hidden; }
   .zona-rotativa { position: absolute; background: #fff; overflow: hidden; box-shadow: 1px 1px 5px rgba(0,0,0,0.3); }
   .zona-rotativa img { width: 100%; height: 100%; object-fit: cover; display: block; }
   .slide { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
   .slide.active { display: block; }
   #zona-1 { width: 250px; height: 230px; left: 45px; top: 35px; z-index: 5; }
   #zona-2 { width: 250px; height: 230px; right: 45px; top: 35px; z-index: 5; }
   #zona-3 { width: 130px; height: 130px; left: 390px; top: 90px; z-index: 8; }
   
   .novedades-container { padding: 0 0 10px 0; display: none; }
   .titulo-seccion { font-size: 18px; color: #483E37; text-align: center; margin-top: 15px; margin-bottom: 20px; border-bottom: 1px dotted #ccc; display: inline-block; padding-bottom: 5px; letter-spacing: 2px; font-weight: bold; position: relative; left: 50%; transform: translateX(-50%); }
   #novedades-list { display: flex; flex-wrap: wrap; justify-content: space-between; }
   .nota { width: 48%; display: flex; margin-bottom: 20px; background: #fff; padding: 10px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 1px solid #eee; border-radius: 4px; height: 140px; overflow: hidden; }
   .nota-img { width: 100px; min-width: 100px; margin-right: 15px; border: 1px solid #ccc; padding: 2px; }
   .nota-img img { width: 100%; height: 100%; object-fit: cover; }
   .nota-content { flex: 1; overflow: hidden; }
   .nota-content h3 a { color: #E65D00; text-decoration: none; font-weight: bold; }
   
   /* =========================================
      4. PÁGINA INTERNA Y GALERÍA (DESKTOP)
      ========================================= */
   #pagina-interna { margin-top: 20px; min-height: 400px; }
   .page-layout { display: flex; align-items: flex-start; }
   
   #sidebar-interna { width: 220px; min-width: 220px; border-right: 1px dotted #ccc; padding-right: 15px; margin-right: 20px; }
   #sidebar-toggle-btn { display: none; } 
   #sidebar-lista { list-style: none; }
   #sidebar-lista li { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #eee; }
   #sidebar-lista li a { text-decoration: none; color: #555; text-transform: uppercase; display: block; padding-left: 10px; background: url('https://www.rosanaruiz.com.ar/artestatic/img/bullet.gif') no-repeat left center; }
   #sidebar-lista li a:hover, #sidebar-lista li a.current { color: #E65D00; font-weight: bold; }
   
   #contenido-dinamico { flex: 1; width: 100%; } 
   #page-title { font-size: 18px; color: #E65D00; margin-bottom: 15px; font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 5px; }
   #page-title::before { content: "» "; color: #BA4C4D; }
   
   .titulo-desc-inline { 
       color: #BA4C4D; 
       margin-left: 10px; 
       text-transform: uppercase; 
       font-size: 11px; 
       font-weight: normal; 
   }
   .titulo-desc-inline a { color: #BA4C4D; text-decoration: none; }
   .titulo-desc-inline a:hover { text-decoration: underline; }
   
   .contenido-img-principal { width: 100%; margin-bottom: 15px; border: 5px solid #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.3); }
   .texto-html { line-height: 1.5; color: #444; }
   
   /* GRID DESKTOP (3x3) */
   .galeria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
   .galeria-card { width: 100%; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; position: relative; }
   .card-img-container { width: 100%; height: 180px; overflow: hidden; margin-bottom: 0; cursor: pointer; border: 1px solid #eee; background-color: #fff; }
   .card-img-container img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s; }
   .card-img-container:hover img { transform: scale(1.05); }
   .card-separator { width: 100%; border-top: 1px dotted #E65D00; margin: 8px 0; }
   .card-info { width: 100%; text-align: center; }
   .card-title { font-size: 11px; font-weight: bold; color: #333; margin-bottom: 3px; word-wrap: break-word; white-space: normal; line-height: 1.2; }
   .card-attributes { font-size: 10px; color: #666; text-align: center; line-height: 1.2; word-wrap: break-word; }
   
   /* ESTILOS CONTACTO MODERNO */
   .contacto-wrapper { max-width: 800px; margin: 0 auto; text-align: center; padding: 20px; }
   .contacto-intro { font-size: 14px; color: #666; margin-bottom: 30px; line-height: 1.6; }
   .btn-email-grande { display: inline-block; background-color: #E65D00; color: #fff; padding: 15px 30px; border-radius: 50px; font-size: 16px; font-weight: bold; text-decoration: none; box-shadow: 0 4px 10px rgba(230, 93, 0, 0.3); transition: all 0.3s ease; margin-bottom: 40px; }
   .btn-email-grande:hover { background-color: #BA4C4D; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(186, 76, 77, 0.4); }
   .social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 20px; justify-content: center; }
   .social-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 20px 10px; text-align: center; text-decoration: none; color: #555; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 10px; }
   .social-card i { font-size: 28px; margin-bottom: 5px; transition: color 0.3s; }
   .social-card span { font-size: 11px; font-weight: bold; text-transform: uppercase; }
   .social-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: transparent; }
   .social-card.facebook:hover i { color: #1877F2; } .social-card.instagram:hover i { color: #E4405F; } .social-card.twitter:hover i { color: #1DA1F2; } .social-card.youtube:hover i { color: #FF0000; } .social-card.blogger:hover i { color: #FF5722; } .social-card.pinterest:hover i { color: #BD081C; }
   
   /* Paginación */
   .paginacion { text-align: center; margin-top: 20px; padding-top: 10px; border-top: 1px dotted #ccc; clear: both; }
   .paginacion button { background: #fff; border: 1px solid #ccc; padding: 5px 10px; margin: 0 2px; cursor: pointer; color: #555; }
   .paginacion button.active { background: #E65D00; color: #fff; border-color: #E65D00; }
   .paginacion button:disabled { opacity: 0.5; cursor: default; }
   
   /* LIGHTBOX FIX: FORCE FLEX CENTER */
   #lightbox { 
       display: none; 
       position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
       background: rgba(0,0,0,0.85); 
       z-index: 10000; /* Z-Index muy alto */
       justify-content: center; 
       align-items: center; 
       flex-direction: column; 
   }
   #lightbox img { max-width: 90%; max-height: 80vh; border: 4px solid #fff; box-shadow: 0 0 20px #000; }
   #lightbox-close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 30px; cursor: pointer; font-weight: bold; }
   
   #pie { background: #4e4845; color: #fff6d5; padding: 8px 0; font-size: 10px; text-align: center; margin-top: 20px; border-top: 4px solid #fff; clear: both; }
   #pie a { color: #fff; text-decoration: none; }
   
   .mobile-gallery-view { display: none; }
   
   @media (max-width: 768px) {
       #container { width: 100%; padding: 0; overflow-x: hidden; }
       #encabezado { text-align: center; }
       .logo img { margin: 0 auto 10px auto; }
       .menu-toggle { display: block; margin: 0 auto; }
       
       #menu > ul { display: none; flex-direction: column; background: #fff; border-top: 1px solid #ddd; margin: 0 15px; border-radius: 0 0 5px 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
       #menu > ul > li { width: 100%; border-right: none; padding: 0; border-bottom: 1px solid #eee; }
       #menu a.menu-link { padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; text-align: left; }
       #menu span { font-size: 12px; white-space: nowrap; } 
       #menu p { margin: 0; font-size: 10px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   
       .submenu { position: static; display: none; width: 100%; box-shadow: none; border: none; background-color: #f9f9f9; padding: 0; }
       .submenu li { border-bottom: 1px solid #e0e0e0; padding-left: 20px; }
       .submenu li a { padding: 8px 10px; font-size: 11px; color: #666; display: block; }
       
       .has-children > a::after { content: ' ▼'; margin-left: auto; font-size: 10px; color: #999; }
   
       #sidebar-interna { display: none !important; }
       #sidebar-toggle-btn { display: none !important; }
       .page-layout { flex-direction: column; }
       .main-banner { background: none; height: 300px; }
       #zona-1, #zona-2 { display: none; } #zona-3 { width: 100%; height: 100%; left: 0; top: 0; }
       
       .galeria-grid { display: none; } 
       .paginacion { display: none; } 
   
       /* VISOR MÓVIL */
       .mobile-gallery-view { display: block; position: relative; width: 100vw; height: 70vh; background: #000; overflow: hidden; }
       #mobile-img { width: 100%; height: 100%; object-fit: contain; display: block; }
   
       .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); color: #fff; border: none; padding: 15px 10px; cursor: pointer; font-size: 24px; z-index: 10; }
       .nav-prev { left: 0; border-radius: 0 5px 5px 0; }
       .nav-next { right: 0; border-radius: 5px 0 0 5px; }
       
       .mobile-info-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0)); padding: 20px 15px 10px 15px; color: #fff; text-align: left; pointer-events: none; }
       .mobile-info-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; text-shadow: 1px 1px 2px #000; }
       .mobile-info-attrs { font-size: 12px; color: #ddd; text-shadow: 1px 1px 2px #000; }
       
       #page-title { font-size: 14px; margin-bottom: 8px; padding-left: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
       .titulo-desc-inline { margin-left: 0; font-size: 0.9em; }
       
       .social-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
       .btn-email-grande { width: 100%; }
   }