/* ===== IMPORTS ===== */
@import url('footer.css');

/* ===== EXISTING STYLES ===== */

/* Minimal Base */
body {font-family:'Segoe UI',sans-serif;background:#f7f3ed;color:#0a4a3a;margin:0;padding:0;line-height:1.3;}

/* Fixed Header with Logo */
header {
  height:80px;
  background:url('nativos-logo.png') no-repeat center center;
  background-size:contain;
  border-bottom:3px solid #0a4a3a;
  background-color:#f7f3ed; /* Match body background */
}

/* Flat Cards */
.card,.recipe-card {
  transition:all 0.15s;
  border-radius:6px;
  margin-bottom:0.75rem;
}
.card:hover,.recipe-card:hover {transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,0.08);}

/* Tight Forms */
.form-wrapper {padding:0.5rem;}
.form-container {
  background:#fff;
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
  padding:1rem;
  max-width:700px;
  margin:-60px auto 0;
}

/* Compact Typography */
h1 {font-size:1.3rem;margin:0 0 0.75rem;color:#446c47;text-align:center;}

/* Dense Inputs */
label {display:block;margin-bottom:0.25rem;font-weight:600;font-size:0.85rem;}
input[type="text"],textarea,select,input[type="number"] {
  width:100%;
  padding:0.4rem;
  border:1px solid #ddd;
  border-radius:6px;
  margin-bottom:0.75rem;
  background:#fafafa;
  font-size:0.85rem;
}

/* Tight Layout */
.row {display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.5rem;}

/* Small Buttons */
button {
  background:#0a4a3a;
  color:white;
  border:none;
  border-radius:6px;
  padding:0.5rem;
  font-size:0.85rem;
  margin:0.5rem 0;
  width:100%;
}
button:hover {background:#4d7a51;}

/* Micro Components */
.ingredient-form {padding:0.6rem;margin-bottom:0.6rem;border:1px solid #eee;border-radius:4px;background:#f9f9f9;}
.efficiency-bar {height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:0.5rem;}
.efficiency-fill {height:100%;border-radius:6px;background:#4CAF50;}
.difficulty-options {display:flex;gap:0.5rem;align-items:center;}
.difficulty-options label {font-weight:normal;font-size:0.8rem;}
input[type="radio"] {accent-color:#0a4a3a;}
.burger-stats {background:#f8f9fa;padding:4px;border-radius:3px;margin-top:6px;font-size:0.8rem;}

.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: color 0.2s;
}

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

/* Estilos para Swiper news */
.news-swiper { padding-bottom: 2rem; }
.news-swiper .swiper-wrapper { align-items: stretch; }
.news-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; }
.news-card { position: relative; width: 100%; max-width: 1100px; border-radius: 6px; overflow: hidden; }
.news-card img {
    width: 100%;
    height: 380px;          /* ajustar para desktop */
    object-fit: cover;
    display: block;
}

/* Overlay con texto */
.news-body {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 12px;
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 767px) {
    .news-card img { height: 240px; }
    .news-body { font-size: 0.9rem; padding: 10px; }
}

/* ===== HERO SIZING & IMAGES ===== */
#heroCarousel .carousel-item {
    height: 70vh;
    min-height: 360px;
}
#heroCarousel .carousel-item picture,
#heroCarousel .carousel-item img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ===== CAPTION LAYOUT ===== */
.carousel-caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 700px;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
}

/* position mapping */
.caption-left  { left: 5%; right: auto; text-align: left; }
.caption-center{ left: 50%; transform: translate(-50%, -50%); text-align: center; }
.caption-right { right: 5%; left: auto; text-align: right; }

/* ===== SMART BACKGROUNDS ON THE CONTAINER =====
   We target the caption container when it has color-<name>.
   Use !important to avoid Bootstrap or other rules from overriding it.
*/
.carousel-caption.color-white {
    background-color: rgba(0,0,0,0.55) !important; /* dark bg for white text */
}

.carousel-caption.color-black,
.carousel-caption.color-primary,
.carousel-caption.color-secondary {
    background-color: rgba(255,255,255,0.78) !important; /* light bg for dark/brand text */
}

/* ===== TEXT COLOR UTILITIES (child elements keep their color unless overridden) ===== */
.color-white { color: #fff; }
.color-black { color: #000; }
.color-primary { color: var(--bs-primary); }
.color-secondary { color: var(--bs-secondary); }

/* ===== SIZE UTILITIES ===== */
.size-sm { font-size: 1rem; }
.size-md { font-size: 1.25rem; }
.size-lg { font-size: 1.75rem; }
.size-xl { font-size: 2.5rem; }

/* make sure text is readable */
.carousel-caption h2,
.carousel-caption p { text-shadow: 0 2px 8px rgba(0,0,0,0.45); }

/* ===== REMOVE ARROW SIDE BARS ON HOVER ===== */
.carousel-control-prev,
.carousel-control-next {
    background: transparent !important;
    width: auto;
    padding: 0 1rem;
}
.carousel-control-prev:hover,
.carousel-control-next:hover { background: transparent !important; }

/* keep icons visible */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.5));
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 767px) {
    #heroCarousel .carousel-item { height: 50vh; }
    .carousel-caption { max-width: 90%; padding: 1rem; }
    .size-xl { font-size: 1.5rem; }
    .size-lg { font-size: 1.25rem; }
}

/* CTA base styles */
.hero-slide .cta-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

/* Text colors based on cta_color */
.cta-color-white { color: #ffffff; }
.cta-color-black { color: #000000; }
.cta-color-primary { color: var(--primary-color, #007bff); }
.cta-color-secondary { color: var(--secondary-color, #6c757d); }

/* Backgrounds for contrast (opposite of text color) */
.cta-color-white { background-color: #000000; }
.cta-color-black { background-color: #ffffff; }
.cta-color-primary { background-color: #ffffff; }
.cta-color-secondary { background-color: #ffffff; }

/* Hover state: invert */
.cta-color-white:hover { background-color: #333333; }
.cta-color-black:hover { background-color: #f1f1f1; }
.cta-color-primary:hover { background-color: #f8f9fa; }
.cta-color-secondary:hover { background-color: #f8f9fa; }

.news-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.news-card h5 {
    font-size: 1.1rem;
    margin-bottom: .5rem;
}
.news-card p {
    font-size: 0.9rem;
    color: white;
}

@media (max-width: 767px) {
  .product-grid-mobile {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: repeat(2, auto);  /* 2 rows */
    gap: 1rem;
    overflow: hidden;
  }
  .product-grid-mobile > *:nth-child(n+5) {
    display: none !important; /* Hide items after the 4th */
  }
}

:root {
  --bs-success-rgb: 10, 74, 58; /* Example: teal-like green */
}