/* =====================
   FUENTES
===================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


@font-face {
  font-family: 'Volkhov';
  src: url('../font/Volkhov-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Volkhov';
  src: url('../font/Volkhov-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Volkhov';
  src: url('../font/Volkhov-Italic.ttf') format('truetype');
  font-style: italic;
}

@font-face {
  font-family: 'Agbalumo';
  src: url('../font/Agbalumo-Regular.ttf') format('truetype');
  font-style: 400;
}

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

:root {
  --rosa: #ef7487;
  --crema: #e5e1c8;
  --blanco: #ffffff;
  --negro: #000000;
   --naranja: #f5a623;
   --celeste: #cfe5f0;

    --color-title: #c4161c;
  --color-icon: #e6007e;
  --color-text: #333333;
  --color-footer: #f06f86;
  --color-bg: #ffffff;

  --fs-title: 3.5rem;
  --fs-text: 0.875rem;
  --fs-icon: 1.125rem;
}

/* =====================
   ROOT SCALE
===================== */

html {
  font-size: 16px; /* Desktop base */
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* Mobile scale */
  }
}

/* =====================
   BASE
===================== */

body {
  margin: 0;
  font-family: 'Volkhov', serif;
  font-weight: 400;
  line-height: 1.3;
}

/* =====================
   NAVBAR
===================== */

.navbar-bahia {
  background-color: var(--rosa);
  padding: 1.5rem 0;
}

.navbar-brand img{
  width: 200px;
}

.logo-main {
  font-size: 3rem;       /* ≈48px */
  font-weight: 700;
  line-height: 1;
  color: var(--blanco);
}

.logo-sub {
  font-size: 0.875rem;   /* ≈14px */
  color: var(--blanco);
  margin-top: -0.25rem;
}

.nav-link {
  font-size: 1.25rem;    /* ≈20px */
  font-weight: 400;
  color: var(--blanco) !important;
  font-family: 'Poppins';
}

.nav-link:hover {
  opacity: 0.8;
}

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

.hero {
  position: relative;
  height: 100vh;
  background: url('../img/hero.png') center / cover no-repeat;
}

.hero-overlay-text {
  position: absolute;
  bottom: 2.5rem;
  left: 3.75rem;
}

.hero-overlay-text h1 {
  font-size: 7rem;       /* ≈96px */
  font-weight: 700;
  color: var(--blanco);
}

.hero-postres {
  /* Imagen de fondo */
  background-image: url("../img/tortas-semifrios/Semifrio.png"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Altura del hero */
  height: 40vh; 

  /* Centrado del contenido */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Opcional: oscurecer imagen */
  position: relative;
}

.hero-postres::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* oscurece la imagen */
}

.hero-postres h1 {
  position: relative; /* para que quede encima del overlay */
  color: #fff;
  font-size: 3rem;
  text-align: center;
  z-index: 1;
}

/* =====================
   CLAIM
===================== */

.claim {
  background-color: var(--crema);
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.claim p {
  margin: 0;
  font-size: 3.25rem;    /* ≈36px */
  color: var(--blanco);
  font-family: 'Agbalumo' !important;
  font-weight: 400;
}

/* =====================
   RESPONSIVE AJUSTES FINOS
===================== */

@media (max-width: 576px) {

  .hero {
    height: 50vh;
  }

  .hero-overlay-text {
    left: 1.25rem;
    bottom: 1.5rem;
  }

  .hero-overlay-text h1 {
    font-size: 4rem;     /* reduce impacto visual */
  }
}


.sabores {
  background-color: #fff;
}

.sabor-card {
  border: 0.125rem solid var(--naranja);
  padding: 2.5rem 1.5rem;
  text-align: left;
  height: 100%;
}

.sabor-card img {
  display: block;
  margin: 0 auto 1.5rem auto; /* centra solo la imagen */
  height: 18rem;
  object-fit: contain;
}

.sabor-card h3 {
  font-size: 1.75rem;
  font-family: 'Poppins';
  font-weight: 600;
  margin-bottom: 0.25rem;
  
}

/* =====================
   RATING
===================== */

.rating {
  margin-bottom: 1rem;
}

.rating span {
  font-family: 'Poppins';
  display: block;
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.stars {
  font-size: 1.5rem;
  color: var(--naranja);
  letter-spacing: 0.25rem;
}

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

@media (max-width: 576px) {

  .sabor-card {
    padding: 2rem 1.25rem;
  }

  .sabor-card img {
    height: 15rem;
  }

  .sabor-card h3 {
    font-size: 1.5rem;
  }
}

/* =====================
   BANNER PUBLICITARIO
===================== */

.ad-banner {
  width: 100%;
  height: 330px;
  overflow: hidden;
}

.ad-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* clave */
  object-position: center;
  display: block;
}

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

.sabores-lista {
  position: relative;
  padding: 5rem 0;
  overflow: hidden; /* clave para cortar imagen */
  background-color: #fff;
}

.sabores-lista {
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
}

/* Imagen lateral responsive */
.sabores-bg-img {
  position: absolute;
  top: -110px;
  right: -5%;
  height: 100%;
  max-width: 40%;
  width: auto;
  object-fit: contain;
  z-index: 1;
}

/* Contenido encima */
.sabores-content {
  position: relative;
  z-index: 2;
}


/* Contenido encima */
.sabores-content {
  position: relative;
  z-index: 2;
}

.sabores-title {
  font-family: 'Poppins';
  text-align: center;
  font-size: 3.5rem;
  font-weight: 600;
  color: #b11217;
  margin-bottom: 3rem;
}

/* Categorías */
.categoria {
  font-family: 'Poppins';
  font-weight: 400;
  font-size: 2.75rem;
  color: #b11217;
  margin-bottom: 1rem;
}

/* Listas */
.sabores-lista ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sabores-lista li {
   font-family: 'Poppins';
  font-weight: 500;
  font-size: 1.125rem;
  color: #7a7a7a;
  line-height: 1.5;
}

/* Separación cuando no hay título */
.mt-categoria {
  margin-top: 2.75rem;
}

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

@media (max-width: 992px) {
  .sabores-bg {
    display: none; /* se elimina imagen en tablet/mobile */
  }
}

@media (max-width: 576px) {
  .sabores-title {
    font-size: 2.25rem;
  }

  .categoria {
    font-size: 1.5rem;
  }

  .categoria-grasa{
    margin-top: 3rem;
  }

  .categoria-sin-azucar{
    margin-top: 3rem;
  }
}

/* =====================
   PLANETA
===================== */

.planeta {
  position: relative;
  background-color: #efe9d8;
  padding: 4rem 0;
  overflow: hidden;
}

/* TEXTO */
.planeta-texto {
  padding-left: 4rem;
}

.planeta-texto h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 1.5rem;
}

.planeta-texto p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #2b2b2b;
  
}

/* SELLO */
.planeta-sello img {
  max-width: 22rem;
  width: 100%;
}

/* PLANETA */
.planeta-ilustracion img {
  max-width: 30rem;
  width: 100%;
  display: block;
}

/* HOJA DECORATIVA */
.planeta-hoja {
  position: absolute;
  bottom: -1rem;
  left: -2rem;
  width: 100%;
  max-width: 14rem;
  z-index: 1;
}

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

@media (max-width: 992px) {

  .planeta-texto {
    padding-left: 2rem;
    margin-bottom: 2rem;
  }

  .planeta-ilustracion img {
    margin: 2rem auto 0;
  }

 
}

@media (max-width: 576px) {

  .planeta-texto h2 {
    font-size: 1.75rem;
  }

  .planeta-texto p {
    font-size: 1rem;
  }
}

/* =====================
   SECCIONES DE IMÁGENES
===================== */

.img-section {
  padding: 4rem 0;
  background: #f8f9fa;
}

.section-title {
  text-align: center;
  font-size: 3.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 3rem;
    color: var(--color-title);
    text-transform: uppercase;
}

.product-card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-align: center;
  transition: all 0.3s ease;
  padding-bottom: 1.5rem;
}

.product-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.product-card h3 {
  margin-top: 1.2rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
}

/* Hover elegante */
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
/* =====================
   REDONDEO ESPECÍFICO
===================== */

.rounded-br img {
  border-bottom-right-radius: 2.5rem;
}


/* section envasados */
.img-section-envasados {
  padding: 4rem 0;
}

.img-section--rounded-envasados{
  background-color: var(--celeste);
}

/* Título */
.section-title-envasados {
  text-align: center;
  font-size: 3.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-bottom: 3rem;
  color: var(--color-title);
  text-transform: uppercase;
}

.title-envasados{
  color: #804040;
}

/* Card base */
.img-card-envasados {
  overflow: hidden;
  height: 100%;
}

/* Imagen */
.img-card-envasados img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


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

@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .section-title {
    font-size: 1.75rem;
  }
}

.ubicaciones-section {
  background-color: var(--color-bg);
  padding-top: 3.75rem;
}

.ubicaciones-title {
  color: var(--color-title);
  font-size: var(--fs-title);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.0625rem;
}

.ubicaciones-grid {
  row-gap: 1.5rem;
  
}

.ubicacion-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--fs-text);
  color: var(--color-text);
  line-height: 1.4;
}

.ubicacion-item i {
  color: var(--color-icon);
  font-size: var(--fs-icon);
  margin-top: 0.1875rem;
}

.ubicaciones-footer {
  background-color: var(--color-footer);
  height: 8.75rem;
  margin-top: 3.125rem;
}

/* Ajuste título mobile */
@media (max-width: 36rem) {
  .ubicaciones-title {
    font-size: 1.375rem;
  }
}

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

.footer {
  padding: 4rem 0;
  margin-top: 3rem;
  border-top: 1px solid #eee;
  font-size: 1rem;
  background-color: var(--color-footer);
 
}

.footer-logo {
  width: 220px;
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  width: 40px;
  height: 40px;
  background-color: #f47b8c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: 1.25rem;
  transition: background 0.3s ease;
}

.footer-social a:hover {
  background-color: #e06274;
}

.footer-title {
  font-size: 1.25rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: var(--blanco);
}

.footer-links,
.footer-contact {
  
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  text-decoration: none;
   font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #fff;
  
}

.footer-links a:hover {
  color: #e4ddde;
}

.footer-contact li {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #fff;
}

.footer-contact i {
  color: #f1ede5;
  font-size: 1.2rem;
  margin-top: 0.2rem;
}