/*=========================================
=          SUCURSALES KIYOSHI 2026        =
=========================================*/


/***************************
        HERO
****************************/

.page-header{

margin-bottom:70px;

}


.page-header h2{

font-size:56px;

font-weight:800;

letter-spacing:1px;

text-shadow:
0 5px 15px rgba(0,0,0,.30);

}


.page-header p{

font-size:20px;

}



/***************************
      TARJETA
****************************/

.sucursal-card{

background:#fff;

border-radius:22px;

overflow:hidden;

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

transition:.35s;

height:100%;

display:flex;

flex-direction:column;

}


.sucursal-card:hover{

transform:translateY(-8px);

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

}



/***************************
      IMAGEN
****************************/

.sucursal-imagen{

overflow:hidden;

}


.sucursal-img{

width:100%;

height:300px;

object-fit:cover;

transition:.45s;

display:block;

}


.sucursal-card:hover
.sucursal-img{

transform:scale(1.06);

}



/***************************
      CUERPO
****************************/

.sucursal-body{

padding:30px;

display:flex;

flex-direction:column;

height:100%;

}

/***************************
        TITULO
****************************/

.sucursal-title{

font-size:34px;

font-weight:800;

color:#222;

margin-bottom:18px;

line-height:1.2;

}



/***************************
      DESCRIPCION
****************************/

.sucursal-description{

font-size:16px;

line-height:1.8;

color:#666;

margin-bottom:20px;

min-height:90px;

}



/***************************
        LINEA
****************************/

.linea{

width:100%;

height:1px;

background:#ececec;

margin:22px 0;

}



/***************************
      INFORMACION
****************************/

.sucursal-info{

display:flex;

align-items:flex-start;

gap:14px;

margin-bottom:16px;

font-size:16px;

color:#444;

line-height:1.6;

}


.sucursal-info i{

width:24px;

font-size:20px;

margin-top:3px;

color:#fbaf32;

flex-shrink:0;

}


.sucursal-info span{

flex:1;

}



/***************************
      EFECTO ICONOS
****************************/

.sucursal-card:hover
.sucursal-info i{

transform:scale(1.15);

transition:.25s;

}

/***************************
       SERVICIOS
****************************/

.sucursal-servicios{

display:flex;

flex-wrap:wrap;

gap:10px;

margin:25px 0;

}


.servicio{

background:#fff8ea;

color:#a86b00;

border:1px solid #ffd27a;

padding:8px 14px;

border-radius:30px;

font-size:14px;

font-weight:700;

transition:.30s;

}


.servicio:hover{

background:#fbaf32;

color:#fff;

transform:translateY(-2px);

}



/***************************
        BOTONES
****************************/

.sucursal-buttons{

display:grid;

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

gap:12px;

margin-top:auto;

}



/***************************
     BOTON GENERAL
****************************/

.btn-sucursal{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

padding:14px 10px;

border-radius:12px;

font-weight:700;

font-size:15px;

text-decoration:none;

transition:.30s;

cursor:pointer;

}



/***************************
     BOTON MENU
****************************/

.btn-menu{

background:#fbaf32;

color:#fff;

}


.btn-menu:hover{

background:#e09a20;

color:#fff;

transform:translateY(-3px);

}



/***************************
   BOTON WHATSAPP
****************************/

.btn-whatsapp{

background:#25D366;

color:#fff;

}


.btn-whatsapp:hover{

background:#1db954;

color:#fff;

transform:translateY(-3px);

}



/***************************
      BOTON MAPA
****************************/

.btn-mapa{

background:#f5f5f5;

color:#444;

border:1px solid #ddd;

}


.btn-mapa:hover{

background:#333;

color:#fff;

transform:translateY(-3px);

}

/***************************
      RESPONSIVE
****************************/

@media(max-width:991px){

.sucursal-body{

padding:25px;

}

.sucursal-title{

font-size:28px;

}

.sucursal-description{

min-height:auto;

}

.sucursal-buttons{

grid-template-columns:1fr;

}

}


@media(max-width:767px){

.page-header{

padding:120px 0 70px;

margin-bottom:40px;

}

.page-header h2{

font-size:38px;

}

.page-header p{

font-size:17px;

}

.sucursal-card{

border-radius:18px;

}

.sucursal-img{

height:230px;

}

.sucursal-body{

padding:22px;

}

.sucursal-title{

font-size:26px;

margin-bottom:15px;

}

.sucursal-description{

font-size:15px;

line-height:1.7;

}

.sucursal-info{

font-size:15px;

}

.sucursal-info i{

font-size:18px;

width:20px;

}

.servicio{

font-size:13px;

padding:7px 12px;

}

.btn-sucursal{

padding:15px;

font-size:15px;

}

}



/***************************
      PEQUEÑOS DETALLES
****************************/

.sucursal-card *{

transition:.25s;

}

.sucursal-card:hover .sucursal-title{

color:#fbaf32;

}

.sucursal-card:hover .linea{

background:#fbaf32;

}

.sucursal-buttons a{

text-decoration:none;

}

.sucursal-buttons a:hover{

text-decoration:none;

}

.sucursal-img{

background:#f5f5f5;

}