/* ===========================
   MENU HAMBURGUESA
=========================== */

.hamburger-btn{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
}

.hamburger-btn span{
    width:22px;
    height:2px;
    background:var(--ink);
    border-radius:2px;
}

@media(max-width:780px){
    .hamburger-btn{
        display:flex;
    }

    .nav-cta{
        display:none;
    }
}

/* ===========================
   MENU MOVIL
=========================== */

.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:199;
}

.mobile-overlay.active{
    opacity:1;
    visibility:visible;
}

.mobile-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:320px;
    max-width:90%;
    height:100vh;
    background:#fff;
    z-index:200;
    display:flex;
    flex-direction:column;
    transition:right .3s ease;
    box-shadow:-10px 0 30px rgba(0,0,0,.15);
}

.mobile-menu.active{
    right:0;
}

.mobile-menu-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid var(--line);
}

.mobile-menu-close{
    background:none;
    border:none;
    font-size:22px;
    cursor:pointer;
}

.mobile-menu-body{
    flex:1;
    padding:20px;
}

.mobile-nav-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-weight:500;
}

.nav-icon{
    font-size:18px;
}

.mobile-menu-footer{
    padding:20px;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mobile-telegram-btn,
.mobile-terms-btn{
    border:none;
    border-radius:8px;
    padding:12px;
    text-align:center;
    cursor:pointer;
    font-weight:600;
}

.mobile-telegram-btn{
    background:#229ED9;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.mobile-terms-btn{
    background:#f5f5f5;
}

/* ===========================
   COMENTARIOS
=========================== */

.comments-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:24px;
}

@media(max-width:900px){
    .comments-grid{
        grid-template-columns:1fr;
    }
}

.rating-summary{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:32px;
}

.rating-big{
    font-size:3rem;
    font-weight:700;
}

.rating-stars-display{
    color:#ffb400;
    font-size:1.3rem;
}

.rating-count{
    color:var(--ink-dim);
    margin-top:4px;
}

.comment-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px;
    margin-bottom:14px;
}

.comment-card h4{
    margin-bottom:8px;
}

.comment-card p{
    color:var(--ink-dim);
    line-height:1.6;
}

.comment-form-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px;
}

.star-row{
    display:flex;
    gap:6px;
    margin:16px 0;
}

.star-btn{
    background:none;
    border:none;
    font-size:28px;
    color:#d1d5db;
    cursor:pointer;
    transition:.2s;
}

.star-btn.active,
.star-btn:hover{
    color:#ffb400;
}

.form-field{
    margin-bottom:16px;
}

.form-field label{
    display:block;
    margin-bottom:6px;
    font-size:.9rem;
    font-weight:500;
}

.form-field input,
.form-field textarea{
    width:100%;
    padding:12px;
    border:1px solid var(--line);
    border-radius:8px;
    font-family:inherit;
}

.form-field textarea{
    min-height:120px;
    resize:vertical;
}

.comment-msg{
    font-size:.85rem;
    margin-bottom:12px;
}

.no-comments{
    color:var(--ink-dim);
}

/* ===========================
   TELEGRAM FLOAT
=========================== */

.telegram-float{
    position:fixed;
    bottom:74px;
    right:24px;

    width:60px;
    height:60px;

    border:none;
    border-radius:50%;

    background:#229ED9;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:900;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    transition:.25s ease;
}

.telegram-float svg{
    width:28px;
    height:28px;
    fill:#fff;
}

.telegram-float-label{
    display:none;
}
@media(max-width:680px){
    .telegram-float-label{
        display:none;
    }

    .telegram-float{
        width:56px;
        height:56px;
        justify-content:center;
        padding:0;
    }
}

/* ===========================
   MODAL
=========================== */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.modal-overlay.active{
    display:flex;
}

.modal-box{
    background:white;
    width:100%;
    max-width:800px;
    border-radius:14px;
    max-height:85vh;
    overflow:hidden;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 22px;
    border-bottom:1px solid var(--line);
}

.modal-close{
    background:none;
    border:none;
    font-size:22px;
    cursor:pointer;
}

.modal-body{
    padding:24px;
    overflow-y:auto;
    max-height:70vh;
}

.modal-body h4{
    margin-top:18px;
    margin-bottom:8px;
}

.modal-body p{
    color:var(--ink-dim);
    line-height:1.7;
}

/* ===========================
   FOOTER LINKS
=========================== */

.foot-links{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.foot-links button{
    background:none;
    border:none;
    cursor:pointer;
    color:inherit;
    font-size:inherit;
}

.telegram-popup{
    position:fixed;

    right:24px;
    bottom:100px;

    width:320px;
    max-width:calc(100vw - 40px);

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.18);

    z-index:999;

    opacity:0;
    visibility:hidden;

    transform:translateY(30px) scale(.85);

    transform-origin:bottom right;

    transition:
        opacity .25s ease,
        transform .25s cubic-bezier(.2,.8,.2,1),
        visibility .25s;
}

.telegram-popup.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}
.telegram-popup-header{

    background:#229ED9;

    color:white;

    padding:18px;
}

.telegram-popup-header h3{

    font-size:1.5rem;
    margin-bottom:4px;
}

.telegram-popup-body{

    padding:18px;
}

.telegram-user{

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:18px;
}

.telegram-avatar{

    width:58px;
    height:58px;

    border-radius:50%;

    background:#229ED9;

    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:700;
}

.telegram-status{

    display:inline-block;

    margin-top:6px;

    padding:4px 8px;

    border-radius:5px;

    background:#dff7e5;

    color:#0f9d58;

    font-size:.75rem;
}

.telegram-chat-btn{

    width:100%;

    background:#229ED9;

    color:white;

    border:none;

    padding:12px;

    border-radius:10px;

    cursor:pointer;

    font-weight:600;
}

.telegram-popup-close{

    position:absolute;

    top:8px;
    right:10px;

    background:none;
    border:none;

    color:white;

    font-size:20px;

    cursor:pointer;
}

.telegram-message{

    background:#f5f7fb;

    padding:12px;

    border-radius:10px;

    margin-bottom:16px;

    font-size:.9rem;

    opacity:0;

    transform:translateY(10px);
}

.telegram-popup.active .telegram-message{

    animation:msgIn .35s .2s forwards;

}

@keyframes msgIn{

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ===========================
   MANTENIMIENTO
=========================== */

#maintenance-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 32, 63, 0.97);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

#maintenance-overlay .container {
  margin: auto;
  max-width: 1024px;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}

#maintenance-overlay .box {
  width: auto;
  height: 500px;
  background: #fff;
  margin-top: 50px;
  margin-left: 100px;
  margin-right: 100px;
  border-radius: 5px;
  box-shadow: 6px 18px 18px rgba(0,0,0,0.08), -6px 18px 18px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#maintenance-overlay .animation {
  display: inline-block;
  margin-bottom: 5%;
}

#maintenance-overlay h1 {
  font-size: 32px;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--navy);
}

#maintenance-overlay p {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-dim);
  margin: 0 0 6px;
  line-height: 1.6;
}

#maintenance-overlay a {
  color: #f6921e;
  font-weight: bold;
  text-decoration: none;
  margin-left: 5px;
}

#maintenance-overlay a:hover {
  text-decoration: underline;
}

/* Engranajes */
#maintenance-overlay .one,
#maintenance-overlay .two,
#maintenance-overlay .three {
  display: block;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#maintenance-overlay .one {
  width: 80px;
  height: 80px;
  margin-top: -10px;
  margin-right: 8px;
  background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2281px%22%20height%3D%2280.5px%22%20viewBox%3D%220%200%2081%2080.5%22%20style%3D%22overflow%3Ascroll%3Benable-background%3Anew%200%200%2081%2080.5%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23383838%3B%7D%0A%3C%2Fstyle%3E%0A%3Cdefs%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M30.3%2C68.2c1.2%2C0.2%2C2.3%2C0.9%2C3.8%2C1.2c1.6%2C0.3%2C2.7%2C0.6%2C4%2C0.4l4.9%2C9.6c0.6%2C0.9%2C1.4%2C1.1%2C2.3%2C0.9l15.3-4.9%0A%09c0.5-0.3%2C1-1%2C0.9-2.3l-1.8-10.6c2-1.6%2C3.6-3.7%2C5.3-5.8l10.5%2C0.6c1.1%2C0.6%2C2.1-0.4%2C2.3-1.1L81%2C40.7c0.2-0.8-0.4-2.1-1.1-2.3l-10.2-3.8%0A%09c-0.3-2.5-1.4-4.8-2.5-7.5l5.9-8.5c0.6-1.1%2C0.4-1.9-0.2-2.9l-12-10.7c-0.3-0.5-1.6-0.3-2.5%2C0.3l-8%2C6.9c-1.2-0.2-2.3-0.9-3.8-1.2%0A%09c-1.6-0.3-2.7-0.6-4-0.4L37.7%2C1c-0.6-0.9-1.4-1.1-2.3-0.9L20.1%2C5c-0.5%2C0.3-1%2C1-0.9%2C2.3l1.8%2C10.6c-2%2C1.6-3.6%2C3.7-5.3%2C5.8L5.3%2C23%0A%09c-0.8-0.2-1.7%2C0.4-2%2C1.6L0%2C40.2c-0.2%2C0.8%2C0.4%2C2.1%2C1.1%2C2.3l9.8%2C3.7c0.7%2C2.6%2C1.4%2C5.2%2C2.5%2C7.5l-6%2C8.9c-0.6%2C0.7-0.4%2C2%2C0.3%2C2.5l12%2C10.7%0A%09c0.7%2C0.5%2C1.9%2C0.8%2C2.4%2C0.1L30.3%2C68.2z%20M26.7%2C37.3c1.6-7.4%2C9.1-12.3%2C16.5-10.8S55.6%2C35.7%2C54%2C43.1c-1.6%2C7.4-9.1%2C12.3-16.5%2C10.7%0A%09C30.1%2C52.3%2C25.1%2C44.7%2C26.7%2C37.3L26.7%2C37.3z%22%2F%3E%0A%3C%2Fsvg%3E');
}

#maintenance-overlay .two {
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22103px%22%20height%3D%22103.7px%22%20viewBox%3D%220%200%20103%20103.7%22%0A%09%20style%3D%22overflow%3Ascroll%3Benable-background%3Anew%200%200%20103%20103.7%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23F6921E%3B%7D%0A%3C%2Fstyle%3E%0A%3Cdefs%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M87.3%2C64.8c0.3-1.5%2C1.1-2.9%2C1.6-4.9c0.4-2%2C0.7-3.5%2C0.5-5.1l12.3-6.3c1.2-0.8%2C1.4-1.8%2C1.1-2.9l-6.3-19.6%0A%09c-0.4-0.6-1.3-1.3-2.9-1.1l-13.5%2C2.3c-2.1-2.5-4.7-4.7-7.4-6.8l0.8-13.4C74.3%2C5.8%2C73%2C4.5%2C72%2C4.3L52.1%2C0c-1-0.2-2.7%2C0.5-2.9%2C1.5%0A%09l-4.8%2C13c-3.2%2C0.4-6.1%2C1.8-9.5%2C3.2l-10.9-7.5c-1.4-0.8-2.5-0.5-3.7%2C0.3L6.5%2C25.8c-0.6%2C0.4-0.4%2C2%2C0.4%2C3.2l8.8%2C10.2%0A%09c-0.3%2C1.5-1.1%2C2.9-1.5%2C4.9c-0.4%2C2-0.7%2C3.5-0.6%2C5.1L1.2%2C55.4c-1.2%2C0.8-1.4%2C1.8-1.1%2C2.9l6.3%2C19.6c0.4%2C0.6%2C1.3%2C1.3%2C2.9%2C1.1l13.5-2.3%0A%09c2.1%2C2.5%2C4.7%2C4.7%2C7.4%2C6.8l-0.8%2C13.4c-0.2%2C1%2C0.6%2C2.2%2C2.1%2C2.5l20%2C4.2c1%2C0.2%2C2.7-0.5%2C2.9-1.5l4.7-12.6c3.3-0.9%2C6.6-1.7%2C9.5-3.2L80.1%2C94%0A%09c0.9%2C0.7%2C2.5%2C0.5%2C3.2-0.4L97%2C78.3c0.7-0.9%2C1-2.4%2C0.1-3.1L87.3%2C64.8z%20M47.8%2C69.5C38.3%2C67.5%2C32%2C57.8%2C34%2C48.3%0A%09c2-9.5%2C11.7-15.8%2C21.2-13.8c9.5%2C2%2C15.7%2C11.7%2C13.7%2C21.2C66.9%2C65.2%2C57.3%2C71.5%2C47.8%2C69.5L47.8%2C69.5z%22%2F%3E%0A%3C%2Fsvg%3E');
}

#maintenance-overlay .three {
  width: 80px;
  height: 80px;
  margin-top: -50px;
  margin-left: -10px;
  background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2281px%22%20height%3D%2280.5px%22%20viewBox%3D%220%200%2081%2080.5%22%20style%3D%22overflow%3Ascroll%3Benable-background%3Anew%200%200%2081%2080.5%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23383838%3B%7D%0A%3C%2Fstyle%3E%0A%3Cdefs%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M30.3%2C68.2c1.2%2C0.2%2C2.3%2C0.9%2C3.8%2C1.2c1.6%2C0.3%2C2.7%2C0.6%2C4%2C0.4l4.9%2C9.6c0.6%2C0.9%2C1.4%2C1.1%2C2.3%2C0.9l15.3-4.9%0A%09c0.5-0.3%2C1-1%2C0.9-2.3l-1.8-10.6c2-1.6%2C3.6-3.7%2C5.3-5.8l10.5%2C0.6c1.1%2C0.6%2C2.1-0.4%2C2.3-1.1L81%2C40.7c0.2-0.8-0.4-2.1-1.1-2.3l-10.2-3.8%0A%09c-0.3-2.5-1.4-4.8-2.5-7.5l5.9-8.5c0.6-1.1%2C0.4-1.9-0.2-2.9l-12-10.7c-0.3-0.5-1.6-0.3-2.5%2C0.3l-8%2C6.9c-1.2-0.2-2.3-0.9-3.8-1.2%0A%09c-1.6-0.3-2.7-0.6-4-0.4L37.7%2C1c-0.6-0.9-1.4-1.1-2.3-0.9L20.1%2C5c-0.5%2C0.3-1%2C1-0.9%2C2.3l1.8%2C10.6c-2%2C1.6-3.6%2C3.7-5.3%2C5.8L5.3%2C23%0A%09c-0.8-0.2-1.7%2C0.4-2%2C1.6L0%2C40.2c-0.2%2C0.8%2C0.4%2C2.1%2C1.1%2C2.3l9.8%2C3.7c0.7%2C2.6%2C1.4%2C5.2%2C2.5%2C7.5l-6%2C8.9c-0.6%2C0.7-0.4%2C2%2C0.3%2C2.5l12%2C10.7%0A%09c0.7%2C0.5%2C1.9%2C0.8%2C2.4%2C0.1L30.3%2C68.2z%20M26.7%2C37.3c1.6-7.4%2C9.1-12.3%2C16.5-10.8S55.6%2C35.7%2C54%2C43.1c-1.6%2C7.4-9.1%2C12.3-16.5%2C10.7%0A%09C30.1%2C52.3%2C25.1%2C44.7%2C26.7%2C37.3L26.7%2C37.3z%22%2F%3E%0A%3C%2Fsvg%3E');
}

/* Animaciones — nombres únicos para no chocar con el resto del sitio */
@keyframes maint-spin-one {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-359deg); }
}
@keyframes maint-spin-two {
  from { transform: rotate(0deg); }
  to   { transform: rotate(359deg); }
}

#maintenance-overlay .spin-one {
  animation: maint-spin-one 1.5s infinite linear;
}
#maintenance-overlay .spin-two {
  animation: maint-spin-two 2s infinite linear;
}

/* Responsive */
@media (max-width: 600px) {
  #maintenance-overlay .box {
    margin-left: 20px;
    margin-right: 20px;
    height: auto;
    padding: 40px 20px;
  }
}