/*====================================================
DULCE TENTACION
Autor : Angel Burgara
Versión : 1.0
====================================================*/

/*==============================
VARIABLES
==============================*/

:root {
  --colorPrincipal: #b71c1c;
  --colorSecundario: #d32f2f;

  --blanco: #ffffff;

  --gris: #f5f5f5;

  --texto: #2f2f2f;

  --dorado: #d4af37;

  --radio: 18px;

  --transicion: 0.35s;

  --sombra: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/*==============================
GENERAL
==============================*/

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;

  color: var(--texto);

  background: white;

  overflow-x: hidden;
}

section {
  padding: 90px 0;
}

.container {
  width: 92%;

  max-width: 1300px;
}

/*=========================
MENU PREMIUM
=========================*/

.nav-link {
  position: relative;

  color: white !important;

  font-weight: 600;

  margin: 0 18px;

  transition: 0.35s;

  letter-spacing: 0.4px;
}

.nav-link:hover {
  color: #ffd54f !important;
}

.nav-link::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: -8px;

  width: 0;

  height: 3px;

  border-radius: 20px;

  background: #ffd54f;

  transition: 0.35s;

  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

.navbarScroll {
  background: rgba(135, 0, 0, 0.9);

  backdrop-filter: blur(18px);

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

  padding: 12px 0;

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);

  transition: 0.4s;
}

.navbarScroll .btnCotizar {
  background: #ffd54f;

  color: #8b0000 !important;
}
.navbarScroll .btnCotizar:hover {
  background: white;

  transform: translateY(-4px);
}

.btnCotizar {
  background: #fff;

  color: #b71c1c !important;

  padding: 12px 28px;

  border-radius: 40px;

  font-weight: 600;

  transition: 0.3s;
}

.btnCotizar:hover {
  background: #ffd54f;

  color: #b71c1c !important;
}
.hero {
  position: relative;

  height: 100vh;

  background: url("../img/hero/fondo-hero.png");

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;
}
.hero-overlay {
  position: absolute;

  width: 100%;

  height: 100%;

  background: linear-gradient(rgba(90, 0, 0, 0.65), rgba(0, 0, 0, 0.6));
}
.badgeHero {
  display: flex;

  align-items: center;

  gap: 15px;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(12px);

  padding: 16px 24px;

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  color: white;

  width: max-content;
}

.badgeHero i {
  font-size: 26px;

  color: #ffd54f;
}

.badgeHero::before {
  content: "";

  width: 60px;

  height: 3px;

  background: #ffd54f;

  border-radius: 30px;
}
.hero h1 {
  font-size: 68px;

  font-weight: 800;

  line-height: 1.1;
}
.hero h1 span {
  color: #ffd54f;
}
.hero p {
  margin-top: 25px;

  font-size: 20px;

  line-height: 35px;

  max-width: 600px;
}
/*===============================
      HERO SWIPER
================================*/

.hero {
  position: relative;

  width: 100%;

  height: 100vh;

  overflow: hidden;
}

.heroSwiper {
  position: absolute;

  width: 100%;

  height: 100%;
}

.heroSwiper img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(65, 0, 0, 0.82) 0%,

    rgba(120, 0, 0, 0.55) 35%,

    rgba(0, 0, 0, 0.1) 100%
  );

  z-index: 5;
}
.hero-content {
  position: relative;

  z-index: 10;

  display: flex;

  align-items: center;

  min-height: 100vh;
}
.swiper-pagination-bullet {
  width: 14px;

  height: 14px;

  background: white;

  opacity: 0.6;
}

.swiper-pagination-bullet-active {
  background: #ffd54f;

  opacity: 1;
}
.swiper-button-next,
.swiper-button-prev {
  color: white;
}
.heroTitulo {
  font-size: clamp(4rem, 6vw, 6rem);

  font-weight: 800;

  color: #fff;

  line-height: 0.95;

  text-shadow:
    0 4px 15px rgba(0, 0, 0, 0.55),
    0 8px 30px rgba(0, 0, 0, 0.45);
}
.hero p {
  color: #fff;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
/*=================================
BOTONES HERO PREMIUM
==================================*/

.heroBotones {
  display: flex;

  gap: 20px;

  margin-top: 45px;

  flex-wrap: wrap;
}

/* Base */

.btnHero {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 18px 34px;

  border-radius: 60px;

  text-decoration: none;

  font-size: 17px;

  font-weight: 600;

  transition: 0.35s;

  overflow: hidden;

  position: relative;
}

/* Icono */

.btnHero i {
  font-size: 18px;

  transition: 0.35s;
}

/*===================

BOTON ROJO

===================*/

.btnRojo {
  background: linear-gradient(135deg, #c62828, #9d1111);

  color: white;

  box-shadow: 0 15px 35px rgba(183, 28, 28, 0.35);
}

/*===================

BOTON BLANCO

===================*/

.btnBlanco {
  border: 2px solid rgba(255, 255, 255, 0.8);

  color: white;

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(8px);
}

/*===================

HOVER

===================*/

.btnHero:hover {
  transform: translateY(-6px);
}

.btnRojo:hover {
  color: white;

  box-shadow: 0 20px 45px rgba(183, 28, 28, 0.55);
}

.btnBlanco:hover {
  background: white;

  color: #b71c1c;

  border-color: white;
}

.btnHero:hover i {
  transform: translateX(6px);
}
.btnHero::before {
  content: "";

  position: absolute;

  left: -120%;

  top: 0;

  width: 60%;

  height: 100%;

  background: rgba(255, 255, 255, 0.25);

  transform: skewX(-25deg);

  transition: 0.7s;
}

.btnHero:hover::before {
  left: 130%;
}
/*=================================
FOOTER
=================================*/

.footer {
  background: #111;

  color: white;

  padding: 70px 0 30px;
}

.footer h3 {
  font-size: 2rem;

  margin-bottom: 20px;

  color: #ffd54f;
}

.footer h5 {
  margin-bottom: 20px;

  color: #ffd54f;
}

.footer p {
  color: #d5d5d5;

  line-height: 1.8;
}

.footerRedes {
  display: flex;

  gap: 15px;

  margin-top: 20px;
}

.footerRedes a {
  width: 45px;

  height: 45px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  background: #b71c1c;

  color: white;

  transition: 0.3s;
}

.footerRedes a:hover {
  background: #ffd54f;

  color: #111;

  transform: translateY(-5px);
}

.footer hr {
  margin: 40px 0 25px;

  border-color: rgba(255, 255, 255, 0.1);
}

.footerBottom {
  text-align: center;
}

.footerBottom p {
  margin: 0;

  color: #aaa;
}

.logo {
  height: 202px;

  transition: 0.4s;
}

.logoSmall {
  height: 156px;
}

.navbar {
  animation: menuEntrada 1s ease;
}

@keyframes menuEntrada {
  from {
    opacity: 0;

    transform: translateY(-40px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

.especialidades {
  background: #faf8f6;
}

.tituloSeccion span {
  color: #b71c1c;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.tituloSeccion h2 {
  font-size: 48px;

  font-weight: 700;

  margin: 15px 0;
}

.tituloSeccion p {
  max-width: 700px;

  margin: auto;

  color: #666;
}

.cardEspecialidad {
  overflow: hidden;
  border-radius: 25px;
}

.cardEspecialidad img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: center;
  transition: 0.4s;
}

.cardEspecialidad:hover img {
  transform: scale(1.08);
}

.cardEspecialidad .contenido {
  padding: 30px;
}

.cardEspecialidad h3 {
  font-size: 28px;

  margin-bottom: 15px;
}

.cardEspecialidad p {
  color: #666;

  margin-bottom: 25px;
}

.btnCard {
  color: #b71c1c;

  font-weight: 700;

  text-decoration: none;
}

.btnCard:hover {
  color: #d32f2f;
}