/* ================= RESET ================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'DM Sans', sans-serif;
}

body{
  padding-top:85px; /* Espacio para header fijo */
}

/* ================= HEADER ================= */

/* =====================================================
   HEADER
===================================================== */

header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;

  z-index: 9999;

  padding: 15px 8%;

  background: rgba(238, 231, 222, 0.96);

  border-bottom: 1px solid rgba(156, 157, 117, 0.15);

  box-shadow: 0 3px 20px rgba(104, 76, 54, 0.07);

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  box-sizing: border-box;
}


/* =====================================================
   CONTENEDOR
===================================================== */

.nav-container {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


/* =====================================================
   LOGO
===================================================== */

.logo img {

  display: block;

  height: 58px;

  width: auto;
}


/* =====================================================
   MENU DESKTOP
===================================================== */

.menu {

  display: flex;

  align-items: center;

  gap: 28px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.menu li a {

  position: relative;

  display: inline-block;

  padding: 8px 0;

  color: #684c36;

  text-decoration: none;

  font-family: 'Montserrat', sans-serif;

  font-size: 13px;

  font-weight: 500;
}


.menu li:not(.social) a::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: 2px;

  width: 0;
  height: 1px;

  background: #606742;

  transition: width 0.3s ease;
}


.menu li:not(.social) a:hover::after {

  width: 100%;
}


/* =====================================================
   REDES
===================================================== */

.social a {

  display: flex !important;

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

  width: 30px;
  height: 30px;

  padding: 0 !important;
}


.social i {

  font-size: 16px;

  color: #684c36;
}


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

.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;

  position: relative;
  z-index: 10001;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background: #684c36;
  border-radius: 5px;
  transition: all .3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 900px) {

  header {
    padding: 12px 20px;
  }

  .logo img {
    height: 50px;
  }

  .hamburger {
    display: flex !important;
  }

  .menu {
    position: absolute !important;

    top: calc(100% + 10px);
    right: 15px;

    width: 260px;
    box-sizing: border-box;

    margin: 0;
    padding: 22px;

    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;

    background: rgba(238,231,222,.98);

    border: 1px solid rgba(156,157,117,.2);
    border-radius: 18px;

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-10px);

    transition:
      opacity .25s ease,
      transform .25s ease,
      visibility .25s ease;

    z-index: 10000;
  }

  .menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .menu li {
    width: 100%;
  }

  .menu li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 5px;
  }

  .menu .social {
    width: auto;
    display: inline-flex;
    margin-top: 8px;
  }

  .menu .social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* =====================================================
   MOBILE PEQUEÑO
===================================================== */

@media (max-width: 600px) {

  .menu {
    right: 12px;
    width: calc(100vw - 24px);
  }

}

/* ===================================================== */
/* HERO — DESKTOP */
/* ===================================================== */

.hero{
    position:relative;
    min-height:calc(100vh - 85px);
    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    align-items:stretch;
    background:#eee7de;
    overflow:hidden;
}


/* ===================================================== */
/* CONTENIDO */
/* ===================================================== */

.hero-content{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:80px 7% 190px 10%;
    max-width:700px;
}


/* ===================================================== */
/* TAG */
/* ===================================================== */

.hero-tag{
    display:inline-flex;
    align-items:center;
    width:max-content;
    margin-bottom:22px;

    color:#606742;
    font-family:'Montserrat',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
}

.hero-tag::before{
    content:"";
    width:28px;
    height:1px;
    background:#9c9d75;
    margin-right:12px;
}


/* ===================================================== */
/* TÍTULO */
/* ===================================================== */

.hero h1{
    margin:0 0 22px;

    color:#684c36;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(48px,5vw,72px);
    font-weight:500;
    line-height:.98;
    letter-spacing:-1.5px;
}

.hero h1 em{
    color:#606742;
    font-style:italic;
    font-weight:500;
}


/* ===================================================== */
/* SUBTÍTULO */
/* ===================================================== */

.hero-sub{
    max-width:520px;
    margin:0 0 14px;

    color:#606742;
    font-family:'Montserrat',sans-serif;
    font-size:17px;
    line-height:1.7;
    font-weight:400;
}


/* ===================================================== */
/* EXPERIENCIA */
/* ===================================================== */

.hero-exp{
    margin:0 0 32px;

    color:#684c36;
    font-family:'Montserrat',sans-serif;
    font-size:13px;
    letter-spacing:.3px;
    font-weight:500;
}


/* ===================================================== */
/* BOTONES */
/* ===================================================== */

.hero-buttons{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
}

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    font-family:'Montserrat',sans-serif;
    font-size:13px;
    font-weight:600;
    text-decoration:none;

    border-radius:40px;
    transition:all .3s ease;
}

.btn-primary{
    padding:14px 27px;
    background:#606742;
    color:#fff;
}

.btn-primary:hover{
    background:#684c36;
    transform:translateY(-2px);
}

.btn-secondary{
    padding:12px 25px;
    border:1px solid #606742;
    color:#606742;
}

.btn-secondary:hover{
    background:#606742;
    color:#fff;
    transform:translateY(-2px);
}


/* ===================================================== */
/* IMAGEN */
/* ===================================================== */

.hero-image{
    position:relative;
    min-height:calc(100vh - 85px);
    overflow:hidden;
}

.hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform 1s ease;
}

.hero:hover .hero-image img{
    transform:scale(1.025);
}


/* ===================================================== */
/* DEGRADÉ */
/* ===================================================== */

.hero-image-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(238,231,222,.65) 0%,
        rgba(238,231,222,.12) 18%,
        rgba(96,103,66,.05) 100%
    );

    pointer-events:none;
}


/* ===================================================== */
/* HERO CARDS */
/* ===================================================== */

.hero-cards{
    position:absolute;
    left:50%;
    bottom:30px;

    transform:translateX(-50%);

    width:90%;
    max-width:1400px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;

    z-index:10;
}


/* ===================================================== */
/* CARDS */
/* ===================================================== */

.hero-card{
    min-height:115px;

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

    padding:20px 22px;

    background:rgba(238,231,222,.90);
    border:1px solid rgba(255,255,255,.75);
    border-radius:18px;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 15px 40px rgba(104,76,54,.14);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.hero-card:hover{
    transform:translateY(-6px);
    background:rgba(238,231,222,.97);

    box-shadow:
        0 20px 45px rgba(104,76,54,.20);
}


/* ===================================================== */
/* ICONO */
/* ===================================================== */

.hero-card-icon{
    width:42px;
    height:42px;
    min-width:42px;

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

    border-radius:50%;

    background:#606742;
    color:#eee7de;

    font-size:15px;
}


/* ===================================================== */
/* TEXTO */
/* ===================================================== */

.hero-card strong{
    display:block;

    margin-bottom:6px;

    color:#684c36;
    font-family:'Montserrat',sans-serif;
    font-size:13px;
    font-weight:600;
    line-height:1.3;
}

.hero-card small{
    display:block;

    color:#3e422a;
    font-family:'Montserrat',sans-serif;
    font-size:11px;
    line-height:1.45;
}


/* ===================================================== */
/* CARD DESTACADA */
/* ===================================================== */

.hero-card.highlight{
    background:rgba(181,158,125,.90);
}

.hero-card.highlight:hover{
    background:rgba(181,158,125,.97);
}

.hero-card.highlight .hero-card-icon{
    background:#684c36;
}


/* ===================================================== */
/* TABLET */
/* ===================================================== */

@media(max-width:1200px){

    .hero{
        grid-template-columns:1fr 1fr;
        min-height:700px;
    }

    .hero-content{
        padding:70px 6% 180px 8%;
    }

    .hero h1{
        font-size:clamp(44px,5vw,62px);
    }

    .hero-sub{
        font-size:15px;
    }

    .hero-cards{
        width:92%;
        gap:14px;
        bottom:22px;
    }

    .hero-card{
        min-height:100px;
        padding:16px;
        gap:12px;
    }

    .hero-card-icon{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:13px;
    }

    .hero-card strong{
        font-size:11px;
    }

    .hero-card small{
        font-size:9px;
    }
}


/* ===================================================== */
/* TABLET VERTICAL / MOBILE GRANDE */
/* ===================================================== */

@media(max-width:900px){

    .hero{
        display:flex;
        flex-direction:column;

        min-height:auto;

        overflow:hidden;
    }


    /* IMAGEN ARRIBA */

    .hero-image{
        order:1;

        width:100%;
        height:52vw;
        min-height:320px;
        max-height:480px;
    }

    .hero-image img{
        object-position:center;
    }


    /* CONTENIDO */

    .hero-content{
        order:2;

        width:100%;
        max-width:none;

        padding:55px 30px 45px;

        text-align:center;
        align-items:center;
    }


    .hero-tag{
        margin-bottom:18px;
    }

    .hero-tag::before{
        width:22px;
        margin-right:9px;
    }


    .hero h1{
        max-width:650px;

        margin-bottom:18px;

        font-size:clamp(42px,8vw,58px);
        line-height:1;
    }


    .hero-sub{
        max-width:600px;

        font-size:14px;
        line-height:1.7;

        margin-bottom:12px;
    }


    .hero-exp{
        margin-bottom:25px;
        font-size:12px;
    }


    .hero-buttons{
        justify-content:center;
    }


    /* CARDS */

    .hero-cards{
        order:3;

        position:relative;

        left:auto;
        bottom:auto;

        transform:none;

        width:100%;

        padding:10px 25px 45px;

        display:grid;
        grid-template-columns:repeat(2,1fr);

        gap:14px;

        background:#eee7de;
    }


    .hero-card{
        min-height:100px;

        padding:18px;

        gap:12px;
    }


    .hero-card-icon{
        width:38px;
        height:38px;
        min-width:38px;
    }


    .hero-card strong{
        font-size:11px;
    }


    .hero-card small{
        font-size:9px;
    }

}


/* ===================================================== */
/* MOBILE */
/* ===================================================== */

@media(max-width:600px){

    .hero-image{
        height:68vw;
        min-height:280px;
        max-height:380px;
    }


    .hero-content{
        padding:45px 22px 35px;
    }


    .hero-tag{
        font-size:10px;
        letter-spacing:2px;
    }


    .hero h1{
        font-size:clamp(38px,11vw,50px);
        line-height:1.02;
        letter-spacing:-1px;
    }


    .hero-sub{
        font-size:13px;
        line-height:1.65;
    }


    .hero-exp{
        font-size:11px;
        margin-bottom:22px;
    }


    .hero-buttons{
        width:100%;
        flex-direction:column;
        gap:10px;
    }


    .btn-primary,
    .btn-secondary{
        width:100%;
        max-width:280px;
    }


    /* CARDS UNA DEBAJO DE OTRA */

    .hero-cards{
        grid-template-columns:1fr;

        padding:5px 20px 35px;

        gap:12px;
    }


    .hero-card{
        width:100%;
        min-height:85px;

        padding:16px;
    }


    .hero-card-icon{
        width:36px;
        height:36px;
        min-width:36px;
    }


    .hero-card strong{
        font-size:11px;
    }


    .hero-card small{
        font-size:9px;
    }

    
}

@media(min-width:901px){

    .hero{
        margin-bottom:70px;
    }

}
/* ===================================================== */
/* INTRO SERVICIOS */
/* ===================================================== */

.servicios{
    padding:20px 8% 100px;
}

@media (max-width:600px){
    .servicios{
        padding:75px 20px 90px;
    }
}

.servicios-intro{
    position:relative;
    z-index:2;
    max-width:700px;
    margin:0 auto 65px;
    text-align:center;
}

.servicios-tag{
    display:inline-block;
    margin-bottom:18px;
    color:#606742;
    font-family:'Montserrat', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:3px;
}

.servicios-intro h2{
    margin:0 0 20px;
    color:#684c36;
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(42px,5vw,62px);
    line-height:1;
    font-weight:500;
    letter-spacing:-.8px;
}

.servicios-intro p{
    max-width:600px;
    margin:0 auto;
    color:#606742;
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    line-height:1.8;
}


/* ===================================================== */
/* GRID */
/* ===================================================== */

.grid-cards{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    max-width:1200px;
    margin:0 auto;
}


/* ===================================================== */
/* CARD */
/* ===================================================== */

.card{
    position:relative;
    height:330px;
    overflow:hidden;
    border-radius:24px;
    cursor:pointer;
    background:#eee7de;
    box-shadow:0 12px 35px rgba(104,76,54,.10);
    transition:transform .4s ease, box-shadow .4s ease;
    pointer-events:auto;
}

.card:hover{
    transform:translateY(-7px);
    box-shadow:0 22px 50px rgba(104,76,54,.18);
}

.card img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    pointer-events:none;
    transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.card:hover img{
    transform:scale(1.06);
    filter:saturate(.95);
}

.overlay{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    padding:32px;
    overflow:hidden;
    pointer-events:none;
}

.overlay::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:62%;
    background:linear-gradient(
        to top,
        rgba(55,49,38,.82) 0%,
        rgba(55,49,38,.55) 32%,
        rgba(55,49,38,.18) 70%,
        transparent 100%
    );
    pointer-events:none;
}

.card-line{
    position:relative;
    z-index:3;
    display:block;
    width:30px;
    height:1px;
    margin-bottom:14px;
    background:#b59e7d;
    transition:width .4s ease;
}

.card:hover .card-line{
    width:55px;
}

.overlay h3{
    position:relative;
    z-index:3;
    margin:0;
    color:#fff;
    font-family:'Cormorant Garamond', serif;
    font-size:36px;
    font-weight:500;
    line-height:1;
    letter-spacing:.2px;
    transition:transform .35s ease;
}

.card:hover .overlay h3{
    transform:translateY(-3px);
}

.overlay p{
    position:relative;
    z-index:3;
    margin:9px 0 0;
    max-width:330px;
    color:rgba(255,255,255,.9);
    font-family:'Montserrat', sans-serif;
    font-size:12px;
    line-height:1.6;
    letter-spacing:.2px;
}

.card-arrow{
    position:absolute;
    right:25px;
    bottom:25px;
    z-index:3;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    color:white;
    font-size:17px;
    opacity:.85;
    transition:background .3s ease, transform .3s ease, border-color .3s ease;
}

.card:hover .card-arrow{
    background:rgba(238,231,222,.18);
    border-color:rgba(255,255,255,.8);
    transform:translate(3px,-3px);
}


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

.modal{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(55,49,38,.58);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease, visibility .3s ease;
}

.modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.modal-box{
    position:relative;
    width:100%;
    max-width:560px;
    max-height:85vh;
    padding:45px 38px;
    overflow-y:auto;
    overflow-x:hidden;
    background:#f7f4ef;
    border-radius:24px;
    box-shadow:0 30px 80px rgba(55,49,38,.30);
    transform:translateY(20px) scale(.98);
    transition:transform .35s ease;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}

.modal.active .modal-box{
    transform:translateY(0) scale(1);
}


/* ===================================================== */
/* CABECERA MODAL (sticky en todos los tamaños para que    */
/* el botón de cerrar nunca desaparezca al scrollear una   */
/* lista larga de tratamientos)                            */
/* ===================================================== */

.modal-top{
    position:sticky;
    top:0;
    z-index:20;

    padding:0 45px 25px 0;
    margin-bottom:25px;

    background:#f7f4ef;
}

.modal-tag{
    display:block;
    margin-bottom:10px;
    color:#606742;
    font-family:'Montserrat', sans-serif;
    font-size:10px;
    font-weight:600;
    letter-spacing:3px;
}

.modal-box h2{
    margin:0;
    color:#684c36;
    font-family:'Cormorant Garamond', serif;
    font-size:40px;
    line-height:1;
    font-weight:500;
}


/* ===================================================== */
/* BOTÓN CERRAR */
/* ===================================================== */

.modal-close{
    position:absolute;
    top:18px;
    right:18px;
    z-index:30;

    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;

    border:1px solid rgba(96,103,66,.18);
    border-radius:50%;
    background:#f7f4ef;
    color:#684c36;
    font-size:24px;
    line-height:1;
    cursor:pointer;

    box-shadow:0 3px 12px rgba(55,49,38,.08);

    transition:background .3s ease, color .3s ease, transform .3s ease;
}

.modal-close:hover{
    background:#606742;
    color:#fff;
    transform:rotate(90deg);
}

.modal-close:focus-visible{
    outline:2px solid #606742;
    outline-offset:3px;
}


/* ===================================================== */
/* LISTA */
/* ===================================================== */

.modal-box ul{
    list-style:none;
    padding:0;
    margin:0;
}


/* ===================================================== */
/* TRATAMIENTO */
/* ===================================================== */

.tratamiento-item{
    border-bottom:1px solid rgba(96,103,66,.15);
}


/* ===================================================== */
/* BOTÓN DEL ACORDEÓN                                     */
/* (antes era un <div>, ahora es <button> — reseteamos    */
/* los estilos nativos del navegador para que se vea      */
/* exactamente igual)                                     */
/* ===================================================== */

.tratamiento-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    width:100%;

    min-height:54px;
    padding:14px 0;

    cursor:pointer;

    color:#684c36;
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    font-weight:500;
    text-align:left;

    background:none;
    border:none;
    border-radius:0;

    transition:color .3s ease;

    -webkit-tap-highlight-color:transparent;
}

.tratamiento-header:hover{
    color:#606742;
}

.tratamiento-header:focus-visible{
    outline:2px solid #606742;
    outline-offset:3px;
}

.icono{
    flex-shrink:0;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(96,103,66,.2);
    border-radius:50%;
    color:#606742;
    font-size:18px;
    transition:transform .35s ease, background .3s ease, color .3s ease;
}

.tratamiento-item.active .icono{
    transform:rotate(45deg);
    background:#606742;
    color:#fff;
}

.tratamiento-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.tratamiento-body p{
    margin:0;
    padding:0 35px 18px 0;
    color:#606742;
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    line-height:1.7;
}

.tratamiento-item.active .tratamiento-body{
    max-height:400px;
}


/* ===================================================== */
/* TABLET */
/* ===================================================== */

@media(max-width:900px){

    .servicios{
        padding:90px 6% 110px;
    }

    .servicios-intro{
        margin-bottom:50px;
    }

    .grid-cards{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .card{
        height:290px;
    }

    .overlay{
        padding:25px;
    }

    .overlay h3{
        font-size:32px;
    }

    .card-arrow{
        right:20px;
        bottom:20px;
    }

    .modal{
        padding:15px;
    }

    .modal-box{
        max-width:520px;
        max-height:88vh;
        padding:40px 30px;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    .modal-close{
        width:44px;
        height:44px;
    }
}


/* ===================================================== */
/* MOBILE */
/* ===================================================== */

@media(max-width:600px){

    .servicios{
        padding:75px 20px 90px;
    }

    .servicios-intro{
        margin-bottom:40px;
    }

    .servicios-intro h2{
        font-size:42px;
    }

    .servicios-intro p{
        font-size:13px;
        line-height:1.7;
    }

    .grid-cards{
        grid-template-columns:1fr;
        gap:18px;
    }

    .card{
        height:280px;
        border-radius:20px;
    }

    .overlay{
        padding:24px;
    }

    .overlay h3{
        font-size:32px;
    }

    .overlay p{
        font-size:11px;
    }

    .card-arrow{
        width:35px;
        height:35px;
        right:18px;
        bottom:18px;
    }

    .modal{
        padding:12px;
        align-items:center;
        touch-action:auto;
    }

    .modal-box{
        width:100%;
        max-width:none;
        max-height:90vh;
        padding:38px 22px 28px;
        border-radius:20px;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        touch-action:pan-y;
    }

    .tratamiento-header{
        min-height:58px;
        padding:15px 0;
        gap:15px;
        font-size:13px;
        touch-action:manipulation;
    }

    .tratamiento-header span:first-child{
        max-width:calc(100% - 45px);
        line-height:1.4;
    }

    .icono{
        width:30px;
        height:30px;
        min-width:30px;
    }

    .tratamiento-body p{
        padding:0 35px 18px 0;
        font-size:12px;
        line-height:1.75;
    }

    .tratamiento-item.active .tratamiento-body{
        max-height:500px;
    }

}

/* ===================================================== */
/* SOBRE NOSOTRAS — CORTE VISUAL ORGÁNICO */
/* ===================================================== */

.sobre-nosotras{
  position:relative;
  padding:150px 8%;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 12% 85%,
      rgba(156,157,117,.20) 0%,
      rgba(156,157,117,0) 38%
    ),
    linear-gradient(
      115deg,
      #eee7de 0%,
      #eee7de 42%,
      #e5e5d9 68%,
      #d9ded2 100%
    );
}


/* ===================================================== */
/* FORMA DECORATIVA SUPERIOR */
/* ===================================================== */

.sobre-nosotras::before{
  content:"";

  position:absolute;

  width:650px;
  height:650px;

  left:-400px;
  top:-330px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(96,103,66,.12) 0%,
      rgba(96,103,66,.04) 45%,
      transparent 70%
    );

  pointer-events:none;
}





/* ===================================================== */
/* CONTENEDOR */
/* ===================================================== */

.sobre-container{
  position:relative;
  z-index:2;

  max-width:1250px;

  margin:0 auto;

  display:grid;

  grid-template-columns:1.05fr .95fr;

  align-items:center;

  gap:100px;
}


/* ===================================================== */
/* IMAGEN */
/* ===================================================== */

.sobre-img{
  position:relative;

  display:flex;

  justify-content:center;

  align-items:center;

  min-height:520px;
}


/* Imagen */

.sobre-img img{
  position:relative;

  z-index:3;

  width:100%;

  max-width:520px;

  height:520px;

  object-fit:cover;

  border-radius:
    45% 45% 12px 45%;

  display:block;

  box-shadow:
    0 25px 55px rgba(104,76,54,.18);

  transition:
    transform .6s ease,
    box-shadow .6s ease;
}


/* Hover */

.sobre-img:hover img{
  transform:translateY(-6px);

  box-shadow:
    0 32px 65px rgba(104,76,54,.22);
}


/* ===================================================== */
/* FORMA VERDE DETRÁS DE LA FOTO */
/* ===================================================== */

.sobre-img::before{
  content:"";

  position:absolute;

  z-index:1;

  width:430px;
  height:430px;

  left:5%;
  top:8%;

  border-radius:
    48% 52% 45% 55%;

  background:#606742;

  opacity:.14;

  transform:rotate(-12deg);
}


/* ===================================================== */
/* SEGUNDA FORMA */
/* ===================================================== */

.sobre-img::after{
  content:"";

  position:absolute;

  z-index:0;

  width:330px;
  height:330px;

  right:0;
  bottom:25px;

  border-radius:50%;

  border:1px solid rgba(104,76,54,.18);

  transform:rotate(15deg);
}


/* ===================================================== */
/* TEXTO */
/* ===================================================== */

.sobre-texto{
  max-width:550px;

  position:relative;
}


/* ===================================================== */
/* ETIQUETA */
/* ===================================================== */

.sobre-texto::before{
  content:"NUESTRA HISTORIA";

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:20px;

  color:#606742;

  font-family:'Montserrat',sans-serif;

  font-size:10px;

  font-weight:600;

  letter-spacing:3px;
}


/* Línea de etiqueta */

.sobre-texto::after{
  content:"";

  position:absolute;

  left:0;
  top:7px;

  width:32px;
  height:1px;

  background:#9c9d75;

  transform:translateX(-45px);
}


/* ===================================================== */
/* TÍTULO */
/* ===================================================== */

.sobre-texto h2{
  margin:0 0 28px;

  color:#684c36;

  font-family:'Cormorant Garamond',serif;

  font-size:clamp(48px,5vw,70px);

  font-weight:500;

  line-height:.92;

  letter-spacing:-1px;
}


/* palabra destacada */

.sobre-texto h2 em{
  color:#606742;

  font-style:italic;
}


/* ===================================================== */
/* TEXTO */
/* ===================================================== */

.sobre-texto p{
  max-width:510px;

  margin:0 0 16px;

  color:#30301c;

  font-family:'Montserrat',sans-serif;

  font-size:13px;

  line-height:1.85;

  font-weight:400;
}


/* ===================================================== */
/* PEQUEÑO DETALLE FINAL */
/* ===================================================== */

.sobre-texto p:last-child{
  margin-bottom:0;

  padding-left:20px;

  border-left:1px solid #9c9d75;
}


/* ===================================================== */
/* TABLET */
/* ===================================================== */

@media(max-width:1000px){

  .sobre-nosotras{
    padding:110px 6%;
  }

  .sobre-container{
    gap:60px;
  }

  .sobre-img{
    min-height:430px;
  }

  .sobre-img img{
    height:430px;
  }

  .sobre-img::before{
    width:350px;
    height:350px;
  }

  .sobre-texto h2{
    font-size:55px;
  }

}


/* ===================================================== */
/* MOBILE */
/* ===================================================== */

@media(max-width:900px){

  .sobre-nosotras{
    padding:90px 25px;
  }

  .sobre-container{
    display:flex;

    flex-direction:column;

    gap:55px;

    text-align:center;
  }

  .sobre-img{
    order:1;

    width:100%;

    min-height:auto;
  }

  .sobre-texto{
    order:2;

    max-width:650px;
  }

  .sobre-texto::before{
    justify-content:center;
  }

  .sobre-texto::after{
    display:none;
  }

  .sobre-texto h2{
    font-size:50px;
  }

  .sobre-texto p{
    margin-left:auto;
    margin-right:auto;

    font-size:13px;
  }

  .sobre-texto p:last-child{
    text-align:left;

    margin-top:20px;
  }

  .sobre-img img{
    width:90%;

    max-width:450px;

    height:430px;
  }

  .sobre-img::before{
    width:350px;
    height:350px;

    left:4%;
    top:5%;
  }

}


/* ===================================================== */
/* MOBILE PEQUEÑO */
/* ===================================================== */

@media(max-width:600px){

  .sobre-nosotras{
    padding:75px 20px;
  }

  .sobre-texto h2{
    font-size:44px;
  }

  .sobre-texto p{
    font-size:12px;

    line-height:1.75;
  }

  .sobre-img img{
    width:92%;

    height:360px;

    border-radius:
      40% 40% 10px 40%;
  }

  .sobre-img::before{
    width:290px;
    height:290px;
  }

  .sobre-img::after{
    width:220px;
    height:220px;
  }

}
/* ===================================================== */
/* BANNER SOPRANO ICE */
/* ===================================================== */

.banner-soprano{
    position:relative;
    overflow:hidden;

    padding:90px 8%;

    background:#f7f4ef;
}


/* ===================================================== */
/* CONTENEDOR */
/* ===================================================== */

.soprano-content{
    max-width:1250px;
    margin:0 auto;

    display:grid;
    grid-template-columns:0.9fr 1.1fr;

    align-items:center;

    gap:80px;
}


/* ===================================================== */
/* TEXTO */
/* ===================================================== */

.soprano-text{
    max-width:520px;
}


/* Etiqueta */

.soprano-text::before{
    content:"DEPILACIÓN DEFINITIVA";

    display:block;

    margin-bottom:18px;

    color:#606742;

    font-family:'Montserrat', sans-serif;

    font-size:11px;
    font-weight:600;

    letter-spacing:3px;
}


/* Título */

.soprano-text h2{
    margin:0 0 22px;

    color:#684c36;

    font-family:'Cormorant Garamond', serif;

    font-size:clamp(38px,4vw,54px);

    line-height:1.05;

    font-weight:500;

    letter-spacing:-.5px;
}


/* Texto */

.soprano-sub{
    margin:0 0 28px;

    color:#606742;

    font-family:'Montserrat', sans-serif;

    font-size:14px;

    line-height:1.8;

    font-weight:400;
}


/* ===================================================== */
/* LOGO SOPRANO */
/* ===================================================== */

.soprano-logo{
    width:155px;

    display:block;

    margin-top:12px;

    opacity:.85;

    transition:.3s ease;
}

.soprano-logo:hover{
    opacity:1;
}


/* ===================================================== */
/* IMAGEN EQUIPO */
/* ===================================================== */

.soprano-img{
    position:relative;

    width:100%;

    display:flex;

    justify-content:flex-end;
}


/* Imagen principal */

.soprano-img img{
    width:100%;

    max-width:620px;

    height:440px;

    object-fit:cover;

    object-position:center;

    display:block;

    border-radius:30px;

    box-shadow:
        0 20px 45px rgba(104,76,54,.13);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


/* Hover muy sutil */

.soprano-img:hover img{
    transform:translateY(-4px);

    box-shadow:
        0 25px 55px rgba(104,76,54,.17);
}


/* ===================================================== */
/* DETALLE DECORATIVO */
/* ===================================================== */

.soprano-img::after{
    content:"";

    position:absolute;

    right:-12px;
    bottom:-12px;

    width:110px;
    height:110px;

    border-right:2px solid #9c9d75;
    border-bottom:2px solid #9c9d75;

    border-radius:0 0 25px 0;

    z-index:0;

    pointer-events:none;
}


/* ===================================================== */
/* TABLET */
/* ===================================================== */

@media(max-width:900px){

    .banner-soprano{
        padding:75px 6%;
    }

    .soprano-content{
        grid-template-columns:1fr;

        gap:50px;

        text-align:center;
    }

    .soprano-text{
        max-width:650px;

        margin:0 auto;
    }

    .soprano-text::before{
        margin-bottom:15px;
    }

    .soprano-text h2{
        font-size:44px;
    }

    .soprano-sub{
        font-size:14px;
    }

    .soprano-logo{
        margin:15px auto 0;
    }

    .soprano-img{
        justify-content:center;
    }

    .soprano-img img{
        height:400px;
        max-width:650px;
    }

}


/* ===================================================== */
/* MOBILE */
/* ===================================================== */

@media(max-width:600px){

    .banner-soprano{
        padding:65px 20px;
    }

    .soprano-content{
        gap:40px;
    }

    .soprano-text h2{
        font-size:37px;
    }

    .soprano-sub{
        font-size:13px;
        line-height:1.7;
    }

    .soprano-logo{
        width:140px;
    }

    .soprano-img img{
        height:320px;

        border-radius:22px;
    }

    .soprano-img::after{
        width:70px;
        height:70px;

        right:-5px;
        bottom:-7px;

        border-radius:0 0 18px 0;
    }

}

/* ===================================================== */
/* RESEÑAS — ESTILO LP ESTÉTICA */
/* ===================================================== */

.reseñas{
  position:relative;
  padding:110px 8% 120px;
  background:#eee7de;
  text-align:center;
  overflow:hidden;
}


/* ===================================================== */
/* DETALLE DECORATIVO DE FONDO */
/* ===================================================== */

.reseñas::before{
  content:"";

  position:absolute;
  top:-180px;
  right:-180px;

  width:420px;
  height:420px;

  border-radius:50%;

  background:#9c9d75;
  opacity:.10;

  pointer-events:none;
}

.reseñas::after{
  content:"";

  position:absolute;
  bottom:-220px;
  left:-180px;

  width:420px;
  height:420px;

  border-radius:50%;

  background:#baa99a;
  opacity:.12;

  pointer-events:none;
}


/* ===================================================== */
/* ENCABEZADO */
/* ===================================================== */

.reseñas-header{
  position:relative;
  z-index:2;

  max-width:700px;
  margin:0 auto 45px;
}


.reseñas-header h2{
  margin:0 0 12px;

  color:#684c36;

  font-family:'Cormorant Garamond', serif;

  font-size:clamp(38px,4vw,52px);

  font-weight:500;

  line-height:1.05;

  letter-spacing:-.5px;
}


.reseñas-header p{
  margin:0;

  color:#606742;

  font-family:'Montserrat', sans-serif;

  font-size:13px;

  letter-spacing:.4px;
}


/* ===================================================== */
/* RESUMEN GOOGLE */
/* ===================================================== */

.google-resumen{
  position:relative;
  z-index:2;

  width:100%;
  max-width:600px;

  margin:0 auto 55px;

  padding:28px 35px;

  background:rgba(255,255,255,.55);

  border:1px solid rgba(255,255,255,.75);

  border-radius:22px;

  box-shadow:
    0 15px 40px rgba(104,76,54,.08);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}


/* Google */

.google-resumen-logo{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:8px;

  margin-bottom:8px;
}


.google-resumen-logo img{
  width:23px;
  height:23px;
}


.google-resumen-logo span{
  color:#684c36;

  font-family:'Montserrat', sans-serif;

  font-size:14px;

  font-weight:600;

  letter-spacing:.3px;
}


/* ===================================================== */
/* ESTRELLAS */
/* ===================================================== */

.google-rating{
  display:flex;
  justify-content:center;
  align-items:center;

  margin:3px 0 5px;
}


.google-rating strong{
  color:#b59e7d;

  font-family:'Montserrat', sans-serif;

  font-size:25px;

  letter-spacing:4px;
}


.estrellas-grandes{
  color:#b59e7d;

  font-size:22px;

  letter-spacing:3px;
}


/* Texto */

.google-resumen p{
  margin:8px 0 20px;

  color:#606742;

  font-family:'Montserrat', sans-serif;

  font-size:12px;
}


/* ===================================================== */
/* BOTÓN GOOGLE */
/* ===================================================== */

.google-ver-todas{
  display:inline-flex;

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

  padding:11px 23px;

  border:1px solid #606742;

  border-radius:30px;

  color:#606742;

  background:transparent;

  text-decoration:none;

  font-family:'Montserrat', sans-serif;

  font-size:11px;

  font-weight:600;

  letter-spacing:.2px;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}


.google-ver-todas:hover{
  background:#606742;

  color:#eee7de;

  transform:translateY(-2px);
}


/* ===================================================== */
/* GRID RESEÑAS */
/* ===================================================== */

.reseñas-google-grid{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:25px;

  width:100%;
  max-width:1200px;

  margin:0 auto;
}


/* ===================================================== */
/* CARD RESEÑA */
/* ===================================================== */

.google-reseña-card{
  position:relative;

  padding:27px;

  background:rgba(255,255,255,.68);

  border:1px solid rgba(255,255,255,.8);

  border-radius:20px;

  text-align:left;

  box-shadow:
    0 12px 35px rgba(104,76,54,.07);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}


.google-reseña-card:hover{
  transform:translateY(-6px);

  background:rgba(255,255,255,.82);

  box-shadow:
    0 20px 45px rgba(104,76,54,.12);
}


/* ===================================================== */
/* HEADER CARD */
/* ===================================================== */

.google-reseña-header{
  display:flex;

  justify-content:space-between;
  align-items:center;

  margin-bottom:17px;
}


.google-autor{
  display:flex;

  align-items:center;

  gap:11px;
}


.google-avatar{
  width:42px;
  height:42px;

  border-radius:50%;

  object-fit:cover;

  border:2px solid #eee7de;
}


.google-autor-info strong{
  display:block;

  color:#684c36;

  font-family:'Montserrat', sans-serif;

  font-size:13px;

  font-weight:600;
}


.google-autor-info span{
  display:block;

  margin-top:3px;

  color:#9c9d75;

  font-family:'Montserrat', sans-serif;

  font-size:10px;
}


/* ===================================================== */
/* ESTRELLAS CARD */
/* ===================================================== */

.google-stars{
  color:#b59e7d;

  font-size:13px;

  letter-spacing:1px;
}


/* ===================================================== */
/* TEXTO RESEÑA */
/* ===================================================== */

.google-reseña-texto{
  color:#606742;

  font-family:'Montserrat', sans-serif;

  font-size:13px;

  line-height:1.7;
}


/* ===================================================== */
/* FOOTER CARD */
/* ===================================================== */

.google-reseña-footer{
  margin-top:20px;

  padding-top:14px;

  border-top:1px solid rgba(156,157,117,.25);
}


.google-reseña-footer a{
  color:#9c9d75;

  font-family:'Montserrat', sans-serif;

  font-size:10px;

  text-decoration:none;

  transition:.3s ease;
}


.google-reseña-footer a:hover{
  color:#684c36;
}


/* ===================================================== */
/* LOADING */
/* ===================================================== */

.reseña-loading{
  grid-column:1 / -1;

  padding:45px;

  color:#606742;

  font-family:'Montserrat', sans-serif;

  font-size:13px;
}


.reseña-loading i{
  display:block;

  margin-bottom:10px;

  color:#606742;

  font-size:23px;
}


/* ===================================================== */
/* ERROR */
/* ===================================================== */

.reseña-error{
  grid-column:1 / -1;

  padding:35px;

  color:#606742;

  font-family:'Montserrat', sans-serif;

  font-size:13px;
}


/* ===================================================== */
/* TABLET */
/* ===================================================== */

@media(max-width:900px){

  .reseñas{
    padding:90px 6% 100px;
  }


  .reseñas-google-grid{
    grid-template-columns:repeat(2,1fr);
  }

}


/* ===================================================== */
/* MOBILE */
/* ===================================================== */

@media(max-width:600px){

  .reseñas{
    padding:75px 20px 85px;
  }


  .reseñas-header{
    margin-bottom:35px;
  }


  .reseñas-header h2{
    font-size:38px;
  }


  .reseñas-header p{
    font-size:12px;
    line-height:1.6;
  }


  .google-resumen{
    padding:25px 18px;

    margin-bottom:40px;
  }


  .google-rating strong{
    font-size:22px;
  }


  .reseñas-google-grid{
    grid-template-columns:1fr;

    gap:16px;
  }


  .google-reseña-card{
    padding:23px;
  }


  .reseñas::before{
    width:280px;
    height:280px;

    top:-120px;
    right:-130px;
  }


  .reseñas::after{
    width:280px;
    height:280px;

    bottom:-130px;
    left:-130px;
  }

}
/* ===================================================== */
/* FOOTER — LP ESTÉTICA */
/* ===================================================== */

.footer{
  position:relative;

  background:#966B4C;

  color:#deeeeb;

  padding:75px 8% 25px;

  margin-top:0;

  overflow:hidden;
}


/* ===================================================== */
/* DETALLES DECORATIVOS */
/* ===================================================== */

.footer::before{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  top:-280px;
  right:-150px;

  border-radius:50%;

  border:1px solid rgba(238,231,222,.10);

  pointer-events:none;
}


.footer::after{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  bottom:-200px;
  left:-130px;

  border-radius:50%;

  background:#606742;

  opacity:.12;

  pointer-events:none;
}


/* ===================================================== */
/* CONTENEDOR */
/* ===================================================== */

.footer-container{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:1.3fr 1fr .65fr;

  gap:65px;

  max-width:1250px;

  margin:0 auto;
}


/* ===================================================== */
/* TÍTULOS */
/* ===================================================== */

.footer h3{
  margin:0 0 18px;

  color:#FCFCFC;

  font-family:'Cormorant Garamond', serif;

  font-size:32px;

  font-weight:500;

  line-height:1;
}


.footer h4{
  margin:0 0 20px;

  color:#FCFCFC;

  font-family:'Montserrat', sans-serif;

  font-size:11px;

  font-weight:600;

  letter-spacing:2.5px;

  text-transform:uppercase;
}


/* ===================================================== */
/* INFORMACIÓN */
/* ===================================================== */

.footer-info{
  min-width:0;
}


.footer-info > p{
  max-width:430px;

  margin-bottom:25px;

  color:#FCFCFC;

  font-family:'Montserrat', sans-serif;

  font-size:13px;

  line-height:1.8;
}


/* ===================================================== */
/* DATOS */
/* ===================================================== */

.footer-datos{
  list-style:none;

  padding:0;
  margin:0;
}


.footer-datos li{
  margin-bottom:10px;

  color:#FCFCFC;

  font-family:'Montserrat', sans-serif;

  font-size:12px;

  line-height:1.5;
}


/* ===================================================== */
/* MAPA */
/* ===================================================== */

.footer-mapa{
  min-width:0;
}


.footer-mapa iframe{
  width:100%;

  height:190px;

  display:block;

  border:0;

  border-radius:14px;

  opacity:.9;

  filter:saturate(.7);

  box-shadow:
    0 15px 35px rgba(0,0,0,.12);
}


/* ===================================================== */
/* BOTÓN CÓMO LLEGAR */
/* ===================================================== */

.btn-mapa{
  display:inline-flex;

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

  margin-top:14px;

  padding:10px 20px;

  background:#606742;

  color:#eee7de;

  border:1px solid rgba(238,231,222,.15);

  border-radius:30px;

  text-decoration:none;

  font-family:'Montserrat', sans-serif;

  font-size:11px;

  font-weight:600;

  transition:
    background .3s ease,
    transform .3s ease;
}


.btn-mapa:hover{
  background:#9c9d75;

  color:#684c36;

  transform:translateY(-2px);
}


/* ===================================================== */
/* REDES */
/* ===================================================== */

.footer-redes{
  min-width:0;
}


.redes-icons{
  display:flex;

  flex-direction:column;

  gap:14px;
}


.redes-icons a{
  position:relative;

  display:inline-flex;

  align-items:center;

  width:max-content;

  color:#FCFCFC;

  text-decoration:none;

  font-family:'Montserrat', sans-serif;

  font-size:12px;

  transition:
    color .3s ease,
    transform .3s ease;
}


/* Línea elegante */

.redes-icons a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-5px;

  width:0;
  height:1px;

  background:#b59e7d;

  transition:width .3s ease;
}


.redes-icons a:hover{
  color:#eee7de;

  transform:translateX(4px);
}


.redes-icons a:hover::after{
  width:100%;
}


/* ===================================================== */
/* SEPARADOR */
/* ===================================================== */

.footer-bottom{
  position:relative;
  z-index:2;

  max-width:1250px;

  margin:55px auto 0;

  padding-top:20px;

  border-top:1px solid rgba(238,231,222,.15);

  text-align:center;
}


.footer-bottom p{
  margin:0;

  color:rgba(238,231,222,.55);

  font-family:'Montserrat', sans-serif;

  font-size:10px;

  letter-spacing:.3px;
}


/* ===================================================== */
/* TABLET */
/* ===================================================== */

@media(max-width:1000px){

  .footer-container{
    grid-template-columns:1fr 1fr;

    gap:50px;
  }

  .footer-info{
    grid-column:1 / -1;
  }

}


/* ===================================================== */
/* MOBILE */
/* ===================================================== */

@media(max-width:600px){

  .footer{
    padding:60px 25px 22px;
  }


  .footer-container{
    display:flex;

    flex-direction:column;

    gap:45px;
  }


  .footer-info{
    text-align:center;
  }


  .footer-info > p{
    margin-left:auto;
    margin-right:auto;
  }


  .footer-datos{
    display:flex;

    flex-direction:column;

    align-items:center;
  }


  .footer-mapa{
    text-align:center;
  }


  .footer-mapa iframe{
    height:200px;
  }


  .footer-redes{
    text-align:center;
  }


  .redes-icons{
    align-items:center;
  }


  .footer h3{
    font-size:29px;
  }


  .footer-bottom{
    margin-top:45px;
  }

}

/* =====================================================
   WHATSAPP FLOTANTE
===================================================== */

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 58px;
    height: 58px;

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

    background: #606742;
    color: #fff;

    border-radius: 50%;

    text-decoration: none;

    font-size: 27px;

    box-shadow:
        0 8px 25px rgba(55, 49, 38, .22);

    z-index: 9998;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.whatsapp-float:hover {
    background: #684c36;
    color: #fff;

    transform: translateY(-4px) scale(1.04);

    box-shadow:
        0 12px 30px rgba(55, 49, 38, .28);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .whatsapp-float {
        right: 18px;
        bottom: 18px;

        width: 54px;
        height: 54px;

        font-size: 25px;
    }

}