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

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;

}

/*==================================================
BODY
==================================================*/

body{

background-image:url("img/barberia.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;

background-color:#111;

color:white;

line-height:1.6;

}

/*==================================================
CAPA OSCURA
==================================================*/

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.60);

z-index:-1;

}

/*==================================================
BOTON REGRESAR
==================================================*/

.boton-regresar{

position:fixed;

top:20px;
left:20px;

text-decoration:none;

padding:12px 18px;

background:#c62828;

color:white;

border-radius:10px;

font-weight:bold;

transition:.3s;

z-index:1000;

}

.boton-regresar:hover{

background:#1565c0;

transform:scale(1.05);

}

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

header{

padding:80px 20px;

text-align:center;

}

.titulo{

font-size:65px;

letter-spacing:4px;

text-transform:uppercase;

text-shadow:

3px 3px 10px black;

color:white;

}

.subtitulo{

font-size:22px;

margin-top:15px;

color:#dddddd;

}

/*==================================================
SECCIONES
==================================================*/

section{

width:90%;

max-width:1100px;

margin:40px auto;

padding:30px;

background:rgba(20,20,20,.78);

backdrop-filter:blur(8px);

border-radius:20px;

box-shadow:

0 0 20px rgba(0,0,0,.5);

}

section h2{

text-align:center;

font-size:35px;

margin-bottom:25px;

color:#ffffff;

border-bottom:4px solid crimson;

padding-bottom:10px;

}

/*==================================================
SERVICIOS
==================================================*/

.tabla-servicios{

display:flex;

flex-direction:column;

gap:15px;

}

.servicio{

display:flex;

justify-content:space-between;

padding:15px;

background:#222;

border-left:8px solid crimson;

border-radius:8px;

font-size:20px;

transition:.3s;

}

.servicio:hover{

transform:translateX(8px);

background:#303030;

}

/*==================================================
FORMULARIO
==================================================*/

form{

display:flex;

flex-direction:column;

gap:20px;

}

.campo{

display:flex;

flex-direction:column;

}

label{

margin-bottom:8px;

font-weight:bold;

}

input,
select{

padding:14px;

border:none;

border-radius:10px;

font-size:17px;

background:white;

color:black;

}

button{

padding:16px;

border:none;

border-radius:10px;

background:#1565c0;

color:white;

font-size:18px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#c62828;

transform:scale(1.03);

}

/*==================================================
SLIDER
==================================================*/

.slider{

position:relative;
width:100%;
max-width:1000px;

margin:auto;

overflow:hidden;

border-radius:15px;

}

.slides{

display:flex;
transition:0.5s ease-in-out;

}

.slides img{

width:100%;
min-width:100%;

height:450px;

object-fit:contain;
background:#111;

display:block;

}

.prev,
.next{

position:absolute;

top:50%;

transform:translateY(-50%);

padding:12px 18px;

font-size:30px;

cursor:pointer;

border:none;

background:rgba(0,0,0,.5);

color:white;

z-index:5;

}

.prev{

left:10px;

}

.next{

right:10px;

}

/*==================================================
UBICACION
==================================================*/

.ubicacion p{

text-align:center;

margin-bottom:20px;

font-size:20px;

}

.mapa{

width:100%;

height:450px;

border-radius:15px;

overflow:hidden;

}

.mapa iframe{

width:100%;

height:100%;

border:none;

}

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

footer{

margin-top:50px;

padding:35px;

background:#050505;

text-align:center;

border-top:6px solid crimson;

}

footer h3{

font-size:30px;

margin-bottom:10px;

}

footer p{

margin-top:8px;

color:#cccccc;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;
height:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:crimson;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#1565c0;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

.titulo{

font-size:45px;

}

.subtitulo{

font-size:18px;

}

section{

width:95%;

padding:20px;

}

.servicio{

font-size:17px;

}

.slider img{

width:250px;

height:320px;

}

button{

font-size:16px;

}

.mapa{

height:300px;

}

}

@media(max-width:480px){

.titulo{

font-size:35px;

}

section h2{

font-size:28px;

}

.servicio{

flex-direction:column;

gap:8px;

}

.slider img{

width:220px;

height:280px;

}

.boton-regresar{

padding:10px 14px;

font-size:14px;

}

}

/*==================================
BOTON CAMBIO DE TEMA
==================================*/

.tema-btn{

position:fixed;

top:20px;
right:20px;

padding:12px 22px;

border:none;

border-radius:40px;

cursor:pointer;

font-size:16px;

font-weight:bold;

background:#222;

color:white;

box-shadow:0 5px 15px rgba(0,0,0,.3);

transition:.4s;

z-index:9999;

}

.tema-btn:hover{

transform:scale(1.05);

}

/*==================================
MODO CLARO
==================================*/

body.light{

background-color:#f5f5f5;

color:#111;

}

body.light::before{

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

}

body.light section{

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

color:#111;

}

body.light .servicio{

background:#eeeeee;

color:#111;

}

body.light footer{

background:#dddddd;

color:#111;

}

body.light footer p{

color:#333;

}

body.light .tema-btn{

background:white;

color:black;

}

/*==================================
MODO CLARO
==================================*/

body.light{

background-color:#f5f5f5;
color:#111;

}

body.light::before{

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

}

/* Tarjetas */

body.light section{

background:rgba(255,255,255,.95);
color:#111;

}

/* Títulos */

body.light h1,
body.light h2,
body.light h3{

color:#111;
text-shadow:none;

}

/* Subtítulo */

body.light .subtitulo{

color:#444;

}

/* Servicios */

body.light .servicio{

background:#f0f0f0;
color:#111;
border-left:8px solid #d32f2f;

}

/* Formularios */

body.light label{

color:#111;

}

body.light input,
body.light select{

background:white;
color:#111;
border:1px solid #bbb;

}

/* Botón */

body.light button{

background:#1976d2;
color:white;

}

/* Footer */

body.light footer{

background:#e5e5e5;
border-top:6px solid #d32f2f;

}

body.light footer h3,
body.light footer p{

color:#111;

}

/* Encabezados de sección */

body.light section h2{

border-bottom:4px solid #1976d2;

}