/* ===== PALETA (exacta) ===== */
:root{
  --verde: #689f81;   /* principal */
  --verde-dark: #4f8068; /* ~20% más oscuro */	
  --beige: #e8d7cc;   /* principal */
  --azul:  #176787;   /* principal */
  --comp1: #1f879f;   /* complementario */
  --comp2: #5bc6d0;   /* complementario */
  --txt:   #000000;   /* textos   */
  --txtw:  #ffffff;   /* textos blancos */

  --logo-nav: 100px;
  --logo-hero: 90px;
  --logo-foot: 48px;
}

*{box-sizing:border-box}
body{font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; color:var(--txt); }

/* estado normal */
.navbar{ background: var(--verde); transition: background-color .25s ease, box-shadow .25s ease; }

/* cuando scrollea */
.navbar.navbar-scrolled{
  background: var(--verde-dark)!important;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.navbar .nav-link{ color:#fff!important; font-weight:600; font-size: 20px }
.navbar .nav-link:hover{ opacity:1; text-decoration:underline; }

.logo-nav{ height:var(--logo-nav); width:auto; display:block; }
.logo-hero{ height:var(--logo-hero); width:auto; display:block; }
.logo-foot{ height:var(--logo-foot); width:auto; display:block; }

.section{ padding: 72px 0; }
.section-beige{ background: var(--beige); }
.section-verde{ background: var(--verde); color:#fff; }
.section-verde .lead, .section-verde p, .section-verde h2{ color:#fff; }

.hero{
  min-height: 60vh;
  background: #000 url('<?=htmlspecialchars($hero_home)?>') center/cover no-repeat;
  position:relative; color:#fff;
}
.hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.30); }
.hero .hero-inner{ position:relative; z-index:2; padding: 56px 0 40px; }
.hero h1{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; }

.btn-brand{ background:var(--azul); color:#fff; border:none; }
.btn-brand:hover{ opacity:.9; color:#fff; }
.btn-light-ghost{ background:transparent; color:#fff; border:2px solid #fff; }
.btn-light-ghost:hover{ background:#fff; color:#000; }

.img-block{ width:70%; height:70%; object-fit:cover; border-radius:8px; }

.resenas{
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url('<?=htmlspecialchars($bg_resenas)?>') center/cover no-repeat;
  color:#fff; padding: 88px 0;
}
.card-resena{ background: rgba(255,255,255,.95); border:0; border-radius:12px; padding:18px; }

.cta-beige{ background: var(--beige); padding: 64px 0; }
.canal{
  background:
    linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.40)),
    url('<?=htmlspecialchars($bg_canal)?>') center/cover no-repeat;
  color:#fff; padding:72px 0;
}

footer{ background:#f5f1ee; padding:24px 0; }
.footer-note{ font-size:.85rem; color:#444; }

/* HERO como carrusel */
.hero-carousel{ position:relative; }
.hero-carousel .carousel-item{ height: 60vh; }
.hero-carousel .hero-slide{
  height: 100%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.30);
  z-index: 2;
}
.hero-content{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  color:#fff; text-align:center; padding-top:16px;
}
.hero-content h1{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.hero-content .logo-hero{ margin-top:.5rem; }
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{ z-index:4; }

/* ===== Reseñas estilo mock ===== */
.resenas-hero{
  position: relative;
  color: #fff;
  padding: 110px 0 80px;
  overflow: hidden;
}
.resenas-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url('<?=htmlspecialchars($bg_resenas)?>') center/cover no-repeat;
  z-index:0;
}
.resenas-hero .resenas-inner{ position:relative; z-index:1; }

.resenas-title{
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .5px;
  font-size: 4.1rem;
}
.resenas-sub{
  font-size: clamp(1rem, 1.2vw + 12px, 1.6rem);
  opacity: .95;
}

/* Cards */
.resena-card{
  background: #F5EFD1;
  border: 0;
  border-radius: 22px;
  padding: 22px 20px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  min-height: 140px;
  color: #000;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;	
}

/* Cinta de estrellas (badge superior) */
.star-badge{
  position: absolute;
  left: 50%; transform: translate(-50%, -50%);
  top: 0;
  background: #ffb239;          /* naranja similar al mock */
  color:#fff;
  font-weight: 800;
  border-radius: 8px;
  padding: 6px 14px;
  line-height:1;
  font-size: 1rem;
  letter-spacing:.5px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.star-badge .star{ margin:0 2px; }

/* Ajustes responsivos */
@media (max-width: 992px){
  .resena-card{ margin-top: 24px; 
	}	
}

/* que la imagen llene el contenedor sin deformarse */
.object-fit-cover{ object-fit: cover; }

/* botón destacado */
.btn-cta{
  background: var(--azul);
  color:#fff;
  border:2px solid #0f4e65;
  box-shadow: 0 8px 18px rgba(23,103,135,.25);
  font-weight: 700;
  letter-spacing:.2px;
}
.btn-cta:hover{
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(23,103,135,.32);
}
.btn-cta:focus{
  color:#fff;
  box-shadow: 0 0 0 .25rem rgba(23,103,135,.25);
}
/* Botón pill global del sitio */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 28px;
  border-radius: 9999px;
  background: #ffffff;
  color: #111 !important;
  border: 0;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  text-decoration: none;
}
.btn-pill:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.22); opacity:.95; }
.btn-pill:active{ transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.btn-pill:focus{ outline: none; box-shadow: 0 0 0 .2rem rgba(255,255,255,.35); }

/* Opcional: tamaños */
.btn-pill-lg{ padding: 14px 34px; font-size: 1.05rem; }
.btn-pill-sm{ padding: 8px 20px;  font-size: .95rem; }

/* Si querés una versión invertida (para fondos claros) */
.btn-pill-dark{
  background:#111; color:#fff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.btn-pill-dark:hover{ opacity:.92; }

/* Texto general */
html, body {
  font-family: var(--font-body);
  font-weight: 400;
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 500; /* ajustá según estética */
  letter-spacing: .2px;
}

/* Para títulos en versión condensada si querés en alguna sección */
.hero-carousel h2,
.page-hero h1 {
  font-family: "Coolvetica Condensed", var(--font-head);
}

/* Cuando quieras itálica de Coolvetica */
.tagline {
  font-family: "Coolvetica Italic", var(--font-head);
  font-style: italic;
}

/* === Variables de marca === */
:root{
  --font-display: "Coolvetica", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Arimo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* === Texto base (bloques, párrafos, listas, etc.) === */
/* alta especificidad suave para ganar a estilos previos */
html body{
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, .lead, li, ul, ol, blockquote, dd, dt, small {
  font-family: var(--font-text);
}

/* Formularios (para que no queden en una tipografía distinta) */
input, textarea, select, button {
  font-family: inherit;
}

/* === Botones con Coolvetica === */
.btn,
.btn-pill,
.btn-primary,
.btn-outline-primary,
.navbar .btn {
  font-family: var(--font-display);
  letter-spacing: .2px;           /* opcional, afiná si hace falta */
  font-weight: 400;               /* Coolvetica suele ser regular */
  text-transform: none;           /* o 'uppercase' si lo quieres en mayúsculas */
}

/* Si tenés un componente de botón propio */
a.btn-pill, button.btn-pill {
  font-family: var(--font-display);
}

/* Badges/chips (si querés que sigan la de botones) */
.badge-chip{
  font-family: var(--font-display);
}

/* === Prioridad sobre Google Fonts previas (como Poppins) === */
/* Si ves que algo se resiste, subí la especificidad con clases contenedoras */
body .container, body .section, body .box {
  font-family: var(--font-text);
}

/* Altura aproximada del navbar */
:root{ --nav-h: 88px; }              /* desktop */
@media (max-width: 991.98px){ 
  :root{ --nav-h: 106px; }           /* en mobile suele ser más alto */
}

/* Anclas suaves + compensación global para los #ids */
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

/* Por si alguna sección se resiste, añadí esta clase en el contenedor con id */
.section-anchor,
section[id]{ 
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

/* Reseñas slider: que los controles no tapen el contenido */
#carouselResenasMobile .carousel-control-prev,
#carouselResenasMobile .carousel-control-next,
#carouselResenasDesktop .carousel-control-prev,
#carouselResenasDesktop .carousel-control-next{
  width: 10%;
}

/* Que no se achique el contenido por los controles */
#carouselResenasMobile .carousel-inner,
#carouselResenasDesktop .carousel-inner{
  padding: 0 24px;
}

/* En mobile: asegurar una card centrada y linda */
@media (max-width: 767.98px){
  #carouselResenasMobile .carousel-inner{
    padding: 0 12px;
  }
}



/* 1) Transición más suave y un poquito más larga */
#carouselResenasMobile .carousel-item,
#carouselResenasDesktop .carousel-item{
  transition: transform .85s cubic-bezier(.22, .61, .36, 1) !important;
  backface-visibility: hidden;
  will-change: transform;
}


/* Carrusel: que recorte bien y no se vean slides vecinos */
#carouselResenasMobile .carousel-inner,
#carouselResenasDesktop .carousel-inner{
  overflow: hidden;
}

/* Suavidad del movimiento */
#carouselResenasMobile .carousel-item,
#carouselResenasDesktop .carousel-item{
  transition: transform .85s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
  backface-visibility: hidden;
}

/* Dejá espacio arriba dentro de la card para el badge */
#carouselResenasMobile .resena-card,
#carouselResenasDesktop .resena-card{
  padding-top: 34px; /* ajustá 28–40 si querés */
  position: relative;
}

/* Badge de estrellas: adentro de la card (no se corta) */
#carouselResenasMobile .star-badge,
#carouselResenasDesktop .star-badge{
  position: absolute;
  top: 10px;           /* dentro de la card */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

/* Recorte correcto del carrusel */
#carouselResenasMobile .carousel-inner,
#carouselResenasDesktop .carousel-inner{
  overflow: hidden !important;
  padding: 0 24px;
  transform: translate3d(0,0,0); /* GPU sin romper translateX */
}

/* Mobile padding más chico */
@media (max-width: 767.98px){
  #carouselResenasMobile .carousel-inner{
    padding: 0 12px;
  }
}

/* Transición más smooth */
#carouselResenasMobile .carousel-item,
#carouselResenasDesktop .carousel-item{
  transition: transform .85s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
  backface-visibility: hidden;
}

/* Controles */
#carouselResenasMobile .carousel-control-prev,
#carouselResenasMobile .carousel-control-next,
#carouselResenasDesktop .carousel-control-prev,
#carouselResenasDesktop .carousel-control-next{
  width: 10%;
}

/* Badge dentro de la card (ya no se corta) */
#carouselResenasMobile .resena-card,
#carouselResenasDesktop .resena-card{
  padding-top: 34px; /* espacio para el badge */
}

/* Estrellas ubicadas dentro */
#carouselResenasMobile .resena-card .star-badge,
#carouselResenasDesktop .resena-card .star-badge{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

/* MOBILE: que no asome el slide vecino */
@media (max-width: 767.98px){

  #carouselResenasMobile .carousel-inner{
    overflow: hidden !important;
    padding: 0 !important;          /* clave: sin padding acá */
  }

  /* cada slide tiene su propio padding, así no se ve el vecino */
  #carouselResenasMobile .resena-slide{
    padding: 0 28px;                /* ajustá 20–36 a gusto */
    display: flex;
    justify-content: center;
	
  }

  /* limitar ancho de la tarjeta para que entre cómoda */
  #carouselResenasMobile .resena-card{
    width: 100%;
    max-width: 420px;               /* ajustá según diseño */
  }

  /* flechas más finas y que no "muerdan" la tarjeta */
  #carouselResenasMobile .carousel-control-prev,
  #carouselResenasMobile .carousel-control-next{
    width: 12%;
    opacity: .85;
  }
	
    #carouselResenasMobile .carousel-control-prev,
  #carouselResenasMobile .carousel-control-next{
    display: none !important;
  }	
}

/* ===== RESEÑAS DESKTOP: 3 visibles, avanza 1, aire + flechas afuera ===== */
@media (min-width: 768px){

  /* contenedor del carrusel */
  #carouselResenasDesktop{
    position: relative;
    padding: 0 72px;            /* espacio para flechas afuera */
  }

  /* viewport */
  #carouselResenasDesktop .carousel-inner{
    overflow: hidden;
    transform: translate3d(0,0,0); /* GPU sin pisar translateX */
  }

  /* transición smooth (NO repetir en otro lado) */
#carouselResenasDesktop .carousel-item{
  transition: transform 3s cubic-bezier(.16, 1, .3, 1) !important;
  will-change: transform;
  backface-visibility: hidden;
}

  /* SOLO los items que participan (active/prev/next) deben ser flex */
  #carouselResenasDesktop .carousel-item.active,
  #carouselResenasDesktop .carousel-item-next,
  #carouselResenasDesktop .carousel-item-prev{
    display: flex !important;
    gap: 28px;                   /* separación entre cards */
    align-items: stretch;
    padding: 0 28px;             /* aire lateral DURANTE el slide */
    box-sizing: border-box;
  }

  /* 3 cards exactas dentro del espacio útil (gap 28*2 = 56) */
  #carouselResenasDesktop .carousel-item.active > .resena-card,
  #carouselResenasDesktop .carousel-item-next > .resena-card,
  #carouselResenasDesktop .carousel-item-prev > .resena-card{
    flex: 0 0 calc((100% - 56px) / 3);
  }

  /* flechas por fuera del contenido (sin tapar cards) */
  #carouselResenasDesktop .carousel-control-prev,
  #carouselResenasDesktop .carousel-control-next{
    width: 56px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .9;
  }

  #carouselResenasDesktop .carousel-control-prev{ left: 0; }
  #carouselResenasDesktop .carousel-control-next{ right: 0; }

  /* opcional: un poquito más chicas */
  #carouselResenasDesktop .carousel-control-prev-icon,
  #carouselResenasDesktop .carousel-control-next-icon{
    transform: scale(.9);
  }
}


/* ===== HERO DESKTOP (consistente) ===== */
@media (min-width: 992px){

  /* alto consistente sin depender del tamaño de la imagen */
  #heroCarousel .carousel-item{
    height: clamp(520px, 60vh, 820px); /* min / relativo / max */
  }

  #heroCarousel .carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* ajustable por slide */
    display: block;
  }
}




/* ===== HERO indicators (mobile) ===== */
@media (max-width: 991.98px){

  #heroCarousel .carousel-indicators{
    position: absolute;
    bottom: 16px;          /* 🔥 SUBÍ / BAJÁ ESTO */
    margin: 0;
    z-index: 10;
  }

  #heroCarousel .carousel-indicators [data-bs-target]{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    opacity: .5;
    background-color: #fff;
  }

  #heroCarousel .carousel-indicators .active{
    opacity: 1;
    transform: scale(1.2);
  }
}

#heroCarousel .carousel-indicators{
  background: rgba(0,0,0,.25);
  padding: 6px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* =========================
   HERO (Carrusel) - ÚNICO
   Desktop consistente + Mobile puntitos + sin flechas
   ========================= */

.hero-carousel{ position: relative; }

/* el carrusel es el marco de referencia */
#heroCarousel{
  position: relative;
  overflow: hidden; /* clave para que los puntitos no caigan al beige */
}

/* DESKTOP */
@media (min-width: 992px){
  #heroCarousel .carousel-item{
    height: clamp(520px, 60vh, 820px);
  }
}

/* MOBILE */
@media (max-width: 991.98px){
  #heroCarousel .carousel-item{
    height: 310px; /* si querés responsive: clamp(320px, 55vh, 520px) */
  }

  /* ocultar flechas */
  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next{
    display: none !important;
  }
}

/* imagen llena el alto del slide (pisando el height:auto inline) */
#heroCarousel .carousel-item img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}

/* ===== HERO indicators: finitos ===== */
#heroCarousel .carousel-indicators{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;

  display: inline-flex;
  width: fit-content;

  gap: 10px;
  margin: 0;

  padding: 2px 8px;          /* 🔥 finito */
  border-radius: 999px;

  background: rgba(0,0,0,.18); /* más sutil */
  /* backdrop-filter: blur(2px); */  /* opcional: si querés, dejalo, pero suave */
  z-index: 10;
}