/* ==========================================================================
   RESET Y BASE
   ========================================================================== */
   *{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;text-decoration:none}
   body{background-color:#1b1d21;color:#fff}
   .container{max-width:1200px;margin:0 auto;overflow:hidden}
   
   /* ==========================================================================
      UTILIDADES
      ========================================================================== */
   .solo-mobile{display:none}
   .solo-computadoras{display:block}
   
   /* ==========================================================================
      HEADER
      ========================================================================== */
   .top-bar{background-color:#0f1117;color:#00c3ff;height:30px;display:flex;align-items:center;justify-content:flex-end;padding:0 15px;font-size:14px;font-style:italic;text-align:right}
   .logo{display:flex;align-items:center;justify-content:flex-start;color:#333;height:100%;padding-top:20px}
   nav{align-self:flex-end;margin-bottom:20px}
   .menuItems{list-style:none;display:flex}
   .menuItems li{margin:0 10px;font-size:14px}
   .menuItems li a{position:relative;display:block;padding:4px 0;font-family:Lato,sans-serif;color:#ecf0f1;text-decoration:none;text-transform:uppercase;transition:0.5s}
   .menuItems li a::after{position:absolute;content:"";top:100%;left:0;width:100%;height:3px;background:#3498db;transform:scaleX(0);transform-origin:right;transition:transform 0.5s}
   .menuItems li a:hover{color:#95a5a6}
   .menuItems li a:hover::after{transform:scaleX(1);transform-origin:left}
   .menuItems li a:hover::before{width:100%;transition:all 0.5s ease-in-out}
   
   /* ==========================================================================
      LAYOUT PRINCIPAL
      ========================================================================== */
   .main-content{display:flex;min-height:calc(100vh - 290px)}
   .left-column{width:200px;background-color:#2a2c31;padding:10px}
   .center-column{width:800px;padding:20px;background-color:#1b1d21;color:#fff;margin:0 auto;padding:0 15px;box-sizing:border-box}
   .right-column{width:200px;background-color:#2a2c31;padding:10px}
   footer{background-color:#0f1117;color:#fff;padding:30px 15px;height:100px}
   
   /* ==========================================================================
      REDES SOCIALES
      ========================================================================== */
   .social-title{margin:20px 0 10px;font-size:16px;color:#3498db}
   .social-icons{display:flex;flex-direction:column;gap:12px;margin-top:10px}
   .social-link{display:flex;align-items:center;gap:8px;color:#ecf0f1;text-decoration:none !important;transition:color 0.3s;padding-left:48px;background-repeat:no-repeat;background-position:left center;background-size:40px 40px;height:40px;line-height:24px;border-bottom:none;outline:none}
   .social-link:hover{color:#3498db;text-decoration:none !important;border-bottom:none}
   .social-link::after{display:none !important;content:none !important}
   .x-icon{background-image:url("../images/svg/x.svg")}
   .instagram-icon{background-image:url("../images/svg/instagram.svg")}
   .telegram-icon{background-image:url("../images/svg/telegram.svg");padding-bottom:20px}
   
   .menuDer{display:flex;flex-direction:column;align-items:start;list-style-type:none}
   .menuDer li{padding:3px 0;font-size:14px}
   .menuDer li a{position:relative;display:block;padding:4px 0;font-family:Lato,sans-serif;color:#ecf0f1;text-decoration:none;text-transform:uppercase;transition:0.5s}
   .menuDer li a::after{position:absolute;content:"";top:100%;left:0;width:100%;height:3px;background:#3498db;transform:scaleX(0);transform-origin:right;transition:transform 0.5s}
   .menuDer li a:hover{color:#95a5a6}
   .menuDer li a:hover::after{transform:scaleX(1);transform-origin:left}
   
   /* ==========================================================================
      IMÁGENES CONTAINER
      ========================================================================== */
   .image-container{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px;width:100%}
   .image-container img{max-width:48%;height:auto;border-radius:4px;object-fit:cover}
   
   /* ==========================================================================
      HISTORIAS
      ========================================================================== */
   .stories-container{width:100%;overflow-x:auto;padding:15px 0;margin-bottom:20px;-ms-overflow-style:none;scrollbar-width:none}
   .stories-container::-webkit-scrollbar{display:none}
   .stories-wrapper{display:flex;gap:15px;padding:0 5px}
   .story-item{display:flex;flex-direction:column;align-items:center;cursor:pointer}
   .story-circle{width:100px;height:100px;border-radius:50%;padding:3px;margin-bottom:5px;position:relative}
   .story-circle.viewed{background:transparent}
   .story-circle.viewed .story-img{border:3px solid #0f1117}
   .story-img{width:100%;height:100%;border-radius:50%;object-fit:cover;padding:3px;border:1px solid #1b1d21;box-sizing:border-box}
   .story-username{font-size:12px;color:#fff;max-width:70px;text-align:center;overflow:hidden;text-overflow:ellipsis}
   
   /* Visor de historias */
   .story-viewer{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.9);z-index:1000;display:none;flex-direction:column}
   .story-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;color:white;z-index:10}
   .story-user-info{display:flex;align-items:center;gap:10px}
   .story-user-img{width:40px;height:40px;border-radius:50%;object-fit:cover}
   .story-close{font-size:24px;color:white;cursor:pointer}
   .story-progress{display:flex;width:100%;gap:5px;padding:0 15px;z-index:10}
   .progress-bar{height:3px;background-color:rgba(255,255,255,0.3);flex-grow:1;border-radius:3px}
   .progress-bar .fill{height:100%;width:0;background-color:white;border-radius:3px;transition:width 0.1s linear}
   .story-content{flex-grow:1;display:flex;justify-content:center;align-items:center;position:relative}
   .story-media,.story-video{max-width:100%;max-height:calc(100vh - 180px);object-fit:contain}
   .story-nav{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}
   .nav-prev,.nav-next{width:50%;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s}
   .story-viewer:hover .nav-prev,.story-viewer:hover .nav-next{opacity:1}
   .nav-arrow{width:40px;height:40px;background-color:rgba(255,255,255,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:20px}
   .nav-prev .nav-arrow{margin-right:auto;margin-left:15px}
   .nav-next .nav-arrow{margin-left:auto;margin-right:15px}
   .audio-control,.play-pause-control{position:absolute;right:15px;width:40px;height:40px;background-color:rgba(0,0,0,0.5);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;color:white}
   .audio-control{top:70px}
   .play-pause-control{top:120px}
   .control-icon{width:20px;height:20px;fill:white}
   .visit-profile{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.5);color:white;border:none;padding:10px 20px;border-radius:20px;cursor:pointer;font-size:14px;z-index:10;transition:background-color 0.3s}
   .visit-profile:hover{background-color:rgba(0,0,0,0.8)}
   
   /* ==========================================================================
      GALERÍA
      ========================================================================== */
   .gallery-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px;max-width:100%;margin-bottom:50px}
   .gallery-item{display:flex;flex-direction:column;align-items:center;text-align:center;background-color:#0f1117;border-radius:15px;padding-bottom:10px;position:relative;overflow:hidden}
   .gallery-item img{height:auto;max-height:248px;object-fit:cover;border-top-left-radius:15px;border-top-right-radius:15px}
   .gallery-item h3{margin:10px 0 5px;font-weight:bold}
   
   /* Elementos base con iconos */
   .icon-base{display:flex;align-items:center;text-transform:uppercase;white-space:nowrap}
   .icon-base::before{content:'';background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}
   
   /* Textos base con sombras */
   .nombre-modelos,.nombre-modelos-laterales,.nombre-modelos-banner-mobile{font-size:11px;position:absolute;left:50%;transform:translateX(-50%);color:white;text-shadow:-1px -1px 0 #cbbbbb,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,-2px -2px 2px #000,2px -2px 2px #000,-2px 2px 2px #000,2px 2px 2px #000;font-weight:bold;z-index:10;white-space:nowrap}
   
   .text,.text-laterales,.text-banner-mobile{margin:5px 0;font-size:11px;color:#0dff00;text-transform:uppercase;position:absolute;left:50%;transform:translateX(-50%);text-shadow:-1px -1px 0 #072f16,1px -1px 0 #072f16,-1px 1px 0 #072f16,1px 1px 0 #072f16,-2px -2px 2px #072f16,2px -2px 2px #072f16,-2px 2px 2px #072f16,2px 2px 2px #072f16;white-space:nowrap}
   
   /* Posicionamiento específico */
   .gallery-item .nombre-modelos{top:200px}
   .gallery-item .text{top:225px}
   .lateral-item .nombre-modelos-laterales{top:213px;font-size:14px;margin:0}
   .lateral-item .text-laterales{top:230px;font-size:14px}
   .banner-mobile .nombre-modelos-banner-mobile{top:510px;font-size:16px;margin:0}
   .banner-mobile .text-banner-mobile{top:530px;font-size:16px;margin:0}
   
   /* Estados con iconos */
   .gallery-item .state{margin:5px 0;font-size:12px;color:rgb(255,255,255);text-transform:uppercase;text-shadow:-1px -1px 0 #fff,1px -1px 0 #575353,-1px 1px 0 #000,1px 1px 0 #000,-2px -2px 2px #000,2px -2px 2px #000,-2px 2px 2px #000,2px 2px 2px #000;white-space:nowrap;display:flex;align-items:center}
   
   .gallery-item .state-gira{margin:5px 0;font-size:14px;color:#ff8300;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center}
   
   .gallery-item .state::before{content:'';width:17px;height:17px;margin-right:5px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff0000'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}
   
   .gallery-item .tour{margin:5px 0;font-size:10px;color:#ffffff;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center}

   /* Iconos específicos */
   .verified{position:absolute;width:25px;height:25px;display:flex;align-items:center;justify-content:center}
   .verified::before{content:'';width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff0000'%3E%3Cpath d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.5))}
   
   .serv-webcam{position:absolute;width:35px;height:35px;display:flex;align-items:center;justify-content:center}
   .serv-webcam::before{content:'';width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF1744'%3E%3Crect x='4' y='6' width='16' height='12' rx='2' ry='2' fill='%23424242' stroke='%23212121' stroke-width='0.5'/%3E%3Ccircle cx='12' cy='12' r='4' fill='%23212121' stroke='%23424242' stroke-width='0.5'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%231565C0'/%3E%3Ccircle cx='10.5' cy='10.5' r='1' fill='%2364B5F6' opacity='0.7'/%3E%3Ccircle cx='17' cy='8' r='1.5' fill='%23FF1744'/%3E%3Ccircle cx='17' cy='8' r='0.8' fill='%23FF5252'/%3E%3Crect x='10' y='18' width='4' height='2' rx='1' fill='%23424242'/%3E%3Cpath d='M8 20 h8 l-1 2 h-6 z' fill='%23616161'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.5))}
   
   .accepts-card{position:absolute;display:flex;align-items:center}
   .accepts-card::before{content:'';width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.6 53.98'%3E%3Cdefs%3E%3ClinearGradient id='blueGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%232E86AB;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23A23B72;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='85.6' height='53.98' rx='4' ry='4' fill='url(%23blueGrad)' stroke='%23333' stroke-width='0.5'/%3E%3Crect x='10' y='20' width='12' height='9' rx='1' ry='1' fill='%23FFD700' stroke='%23E6C200' stroke-width='0.3'/%3E%3Cline x1='12' y1='22' x2='12' y2='27' stroke='%23B8860B' stroke-width='0.3'/%3E%3Cline x1='14' y1='22' x2='14' y2='27' stroke='%23B8860B' stroke-width='0.3'/%3E%3Cline x1='16' y1='22' x2='16' y2='27' stroke='%23B8860B' stroke-width='0.3'/%3E%3Cline x1='18' y1='22' x2='18' y2='27' stroke='%23B8860B' stroke-width='0.3'/%3E%3Cline x1='20' y1='22' x2='20' y2='27' stroke='%23B8860B' stroke-width='0.3'/%3E%3Ccircle cx='60' cy='27' r='8' fill='%23EB001B'/%3E%3Ccircle cx='72' cy='27' r='8' fill='%23FF5F00'/%3E%3Cpath d='M66 19.5c-1.8 1.8-2.9 4.3-2.9 7.5s1.1 5.7 2.9 7.5c1.8-1.8 2.9-4.3 2.9-7.5s-1.1-5.7-2.9-7.5z' fill='%23FF5F00'/%3E%3Ctext x='66' y='41' font-family='Arial, sans-serif' font-size='3' font-weight='bold' text-anchor='middle' fill='white'%3EMASTERCARD%3C/text%3E%3Ctext x='10' y='15' font-family='Courier, monospace' font-size='4' fill='%23E0E0E0'%3E••••••••••••••••%3C/text%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:2px;flex-shrink:0}
   
   /* Posicionamiento específico por contexto */
   .gallery-item .verified{top:5px;left:3%}
   .gallery-item .serv-webcam{top:35px;left:0%}
   .gallery-item:not(:has(.verified)) .serv-webcam,.gallery-item .serv-webcam:first-child{top:5px}
   .gallery-item .verified + .serv-webcam,.gallery-item .verified ~ .serv-webcam{top:35px}
   .gallery-item .accepts-card{top:0px;right:0%}
   
   /* ==========================================================================
      BANNERS Y LATERALES
      ========================================================================== */
   .banner-mobile{display:none}
   .lateral-item{display:flex;flex-direction:column;align-items:center;text-align:center;background-color:#0f1117;border-radius:15px;padding-bottom:10px;position:relative;overflow:hidden;margin-bottom:15px;width:100%;height:350px;max-width:179px}
   .lateral-item img{width:100%;height:auto;max-height:260px;object-fit:cover;border-top-left-radius:15px;border-top-right-radius:15px}
   .lateral-item .text-laterales{font-size:14px;position:absolute;top:230px;left:50%;transform:translateX(-50%)}
   .lateral-item .nome-modelos-laterales{font-size:14px;position:absolute;top:213px;left:50%;transform:translateX(-50%);margin:0}
   .lateral-item .verified{top:10px;left:3%;width:30px;height:30px}
   .lateral-item .serv-webcam{top:35px;left:0%}
   .lateral-item:not(:has(.verified)) .serv-webcam{top:5px}
   .lateral-item .accepts-card{top:5px;right:5px}
   .lateral-item .state,.lateral-item .state-gira{margin:0;font-size:12px;text-transform:uppercase;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,-2px -2px 2px #000,2px -2px 2px #000,-2px 2px 2px #000,2px 2px 2px #000;white-space:nowrap;display:flex;align-items:center;justify-content:center;width:100%}
   
   .lateral-item .state{color:rgb(255,255,255)}
   .lateral-item .state-gira{color:#ff8300}
   
   .lateral-item .state::before{content:'';width:17px;height:17px;margin-right:5px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff0000'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}
   
   .lateral-info-container{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:90%;display:flex;flex-direction:column;align-items:center;gap:5px}
   .banners-comp-izq,.banners-comp-der{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}

   .banners-comp-izq,.banners-comp-der, .tour{    
    margin: 5px 0;
    font-size: 10px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    align-items: center;
   }

   .banners-comp-izq,.banners-comp-der, .next{    
    margin: 5px 0;
    font-size: 10px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    align-items: center;
   }

   .margen{margin-top:20px}
   
   /* ==========================================================================
      NOTIFICACIONES
      ========================================================================== */
   .notification-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column-reverse;gap:10px;max-width:100%}
   .notification{display:flex;align-items:center;background-color:white;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:12px;width:300px;max-width:calc(100vw - 40px);transform:translateX(120%);transition:transform 0.3s ease-out;animation:slide-in 0.3s forwards,fade-out 0.3s 3.7s forwards}
   @keyframes slide-in{to{transform:translateX(0)}}
   @keyframes fade-out{to{opacity:0;transform:translateX(120%)}}
   .notification-avatar{width:50px;height:50px;border-radius:50%;overflow:hidden;margin-right:12px;flex-shrink:0;border:2px solid #3498db}
   .notification-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}
   .notification-content{flex-grow:1}
   .notification-name{font-weight:bold;margin:0 0 5px 0;color:#333}
   .notification-button{background-color:#3498db;color:white;border:none;border-radius:5px;padding:6px 12px;font-size:12px;cursor:pointer;transition:background-color 0.2s}
   .notification-button:hover{background-color:#2980b9}
   
   /* ==========================================================================
      FILTROS
      ========================================================================== */
   .container-filtros{background:#0f1117;padding:20px;margin:20px 0;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,0.3)}
   .filtros-wrapper h3{color:#fff;text-align:center;margin-bottom:20px;font-size:1.5em;text-shadow:2px 2px 4px rgba(0,0,0,0.5)}
   .filtros-desktop{display:flex;gap:20px;justify-content:space-between}
   .filtro-columna{flex:1;display:flex;flex-direction:column}
   .filtros-mobile{display:none}
   .filtro-columna label,.filtro-item label{color:#ecf0f1;font-weight:bold;margin-bottom:8px;font-size:14px;text-transform:uppercase;letter-spacing:1px}
   .form-select,.form-select-mobile{background:#34495e;color:#fff;border-radius:5px;padding:10px 15px;font-size:14px;width:100%;cursor:pointer;transition:all 0.3s ease}
   .form-select:hover,.form-select-mobile:hover{background:#2c3e50;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}
   .form-select:focus,.form-select-mobile:focus{outline:none;background:#2c3e50;box-shadow:0 0 10px rgba(230,126,34,0.5)}
   .form-select option,.form-select-mobile option{background:#34495e;color:#fff;padding:5px}
   .filtros-actions{margin-top:15px;text-align:center;border-top:1px solid #736260;padding-top:15px}
   .btn-limpiar{background:#323541;color:white;border:none;padding:8px 16px;border-radius:5px;cursor:pointer;font-size:14px;transition:all 0.3s ease}
   .btn-limpiar:hover{background:#c0392b;transform:translateY(-2px)}
   .filtros-activos{display:block;margin-top:10px;color:#ecf0f1;font-size:12px;font-style:italic}
   .filtros-activos strong{color:#e67e22}
   
   /* ==========================================================================
      RESPONSIVE DESIGN
      ========================================================================== */
   @media(max-width:1200px){.container{width:100%}.center-column{width:calc(100% - 400px)}}
   @media(min-width:768px){header{width:100%;height:150px}.nav-bar{background-color:#1b1d21;height:100px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 15px}.left-column,.right-column{display:flex;flex-direction:column;align-items:center}}
   
   /* Mobile */
   @media screen and (max-width:768px){
   header{width:100%;height:80px}
   .nav-bar{background-color:#1b1d21;height:50px;padding:10px 15px;align-items:center}
   .FuenteAqui{font-size:19px;font-style:italic;text-align:right;padding-bottom:20px;color:#00c3ff}
   .left-column,.right-column{display:none}
   .solo-mobile{display:block}
   .solo-computadoras{display:none}
   .person-icon{width:24px;height:24px;fill:#ffff;margin-right:5px}
   .top-bar-mov{background-color:#0f1117;color:#fff;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 15px}
   .login{display:flex;align-items:center;text-decoration:none;color:white}
   .mobile-logo img{max-height:30px;width:auto}
   .center-column{width:100%}
   nav{display:none}
   nav ul{flex-direction:column;position:absolute;top:190px;right:0;width:100%;max-height:0;overflow:hidden;transition:max-height 0.5s;background-color:#1b1d21;z-index:100}
   nav ul.active{max-height:300px;display:flex}
   nav ul li{margin:0;text-align:center;padding:10px}
   .left-image{display:none !important}
   .right-image{max-width:100% !important;width:100% !important}
   .image-container{display:block !important}
   .logo{display:none}
   .gallery-container{grid-template-columns:repeat(2,1fr)}
   .story-circle{width:80px;height:80px}
   .story-username{max-width:60px}
   .nav-arrow{width:30px;height:30px;font-size:16px}
   .filtros-desktop{display:none}
   .filtros-mobile{display:block}
   .filtro-item{margin-bottom:15px}
   .container-filtros{margin:15px 10px;padding:15px}
   .filtros-wrapper h3{font-size:1.3em;margin-bottom:15px}
   
   /* Banner mobile */
   .banner-mobile{display:block;grid-column:1 / span 2;margin:20px auto;border-radius:15px;background-color:#0f1117;position:relative;overflow:hidden;max-width:100%;height:650px}
   .banner-mobile a{display:block;position:relative;text-decoration:none}
   .banner-mobile img{width:100%;height:570px;object-fit:cover;border-radius:15px}
   .banner-mobile .nome-modelos-banner-mobile{font-size:16px;position:absolute;top:510px;left:50%;transform:translateX(-50%);margin:0}
   .banner-mobile .text-banner-mobile{font-size:16px;position:absolute;top:530px;left:50%;transform:translateX(-50%);margin:0}
   .banner-mobile .accepts-card{position:absolute;top:10px;right:10px;width:50px;height:40px;display:flex;align-items:center;justify-content:center;z-index:15}
   .banner-mobile .accepts-card::before{width:100%;height:100%;border-radius:4px}
   .banner-mobile .verified{position:absolute;top:10px;left:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;z-index:15}
   .banner-mobile .serv-webcam{position:absolute;top:55px;left:10px;width:45px;height:45px;display:flex;align-items:center;justify-content:center;z-index:15}
   .banner-mobile:not(:has(.verified)) .serv-webcam{top:10px}
   .banner-mobile .banner-mobile-info-container{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);width:90%;display:flex;flex-direction:column;align-items:center;gap:5px;z-index:10}
   .banner-mobile .state{margin:0;font-size:14px;color:#fff;text-transform:uppercase;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,-2px -2px 2px #000,2px -2px 2px #000,-2px 2px 2px #000,2px 2px 2px #000;white-space:nowrap;display:flex;align-items:center;justify-content:center;width:100%}
   .banner-mobile .state::before{width:20px;height:20px;margin-right:5px}
   .banner-mobile .state-gira{margin:0;font-size:14px;color:#ff8300;text-transform:uppercase;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,-2px -2px 2px #000,2px -2px 2px #000,-2px 2px 2px #000,2px 2px 2px #000;white-space:nowrap;display:flex;align-items:center;justify-content:center;width:100%}
   .banner-mobile .contact-buttons{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:10px;justify-content:center;z-index:15}
   .banner-mobile .contact-buttons a{display:block}
   .banner-mobile .contact-buttons img{width:50px;height:40px;border-radius:5px}

   .banner-mobile .state{
    margin: 5px 0;
    font-size: 12px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    align-items: center;
    text-align: center;
   }

   .banner-mobile .next{
    margin: 5px 0;
    font-size: 12px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    align-items: center;
    text-align: center;
   }

   .banner-mobile .tour{
    margin: 5px 0;
    font-size: 12px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    align-items: center;
    text-align: center;
   }

   }
   
   /* Mobile pequeño */
   @media(max-width:480px){
   .form-select-mobile{padding:8px 12px;font-size:13px}
   .container-filtros{margin:10px 5px;padding:12px}
   .notification{width:calc(100vw - 40px)}
   }
   
   /* ==========================================================================
      CONTACTO
      ========================================================================== */
   .contact-buttons{display:flex;flex-wrap:wrap;justify-content:center;margin-top:10px}
   .contact-buttons a{margin:5px}
   .contact-buttons img{width:96px;height:37px}