:root{
  --brand:#598982;         /* Verde Ideas 360 */
  --ink:#373637;           /* Gris oscuro */
  --bg:#fafafa;            /* Fondo general */
  --muted:#6e6e6e;         /* Texto secundario */
  --radius:18px;           /* Radio de bordes */
  --strip-pad:40px;        /* Padding lateral de strips */
}

/* Base */
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}

/* Helpers */
.fw-800{font-weight:800}
.bg-ink{background:var(--ink)!important}
.text-ink{color:var(--ink)!important}
.border-white-10{border-color:rgba(255,255,255,.12)!important}
.btn-brand{background:var(--brand);color:#fff;border:none}
.btn-brand:hover{filter:brightness(.95);color:#fff}
.shadow-text{text-shadow:0 2px 16px rgba(0,0,0,.45)}
.logo{height:46px;width:auto}
.logo-invert{height:56px;filter:invert(1) hue-rotate(180deg) saturate(.6)}

/* Navbar */
.navbar .nav-link{font-size:.85rem;font-weight:600;color:var(--ink);opacity:.95}
.navbar .nav-link:hover{color:var(--brand)}
.topbar{position:sticky;top:0;z-index:1030}

/* Carousel caption fondo sutil (mejor legibilidad) */
.carousel-caption{bottom:0;top:0;left:0;right:0}
.carousel-caption::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.15));z-index:-1}

/* Secciones */
.section-title{font-family:Montserrat,Inter,sans-serif}

/* Cards intro productos */
.product-card .card-body h3{font-family:Montserrat,Inter,sans-serif}
.badge.bg-ink{background:var(--ink)!important}

/* Parallax headings */
.parallax{position:relative;min-height:42vh;display:grid;place-items:center;color:#fff;text-align:center}
.parallax-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.parallax-title{position:relative;font-family:Montserrat,Inter,sans-serif;font-size:clamp(28px,4vw,48px);margin:0;text-shadow:0 2px 16px rgba(0,0,0,.45)}
/* Asignación de imágenes */
.parallax-venezia .parallax-bg{background-image:url('assets/banners/venezia.jpg');background-attachment:fixed;filter:brightness(.5)}
.parallax-creative .parallax-bg{background-image:url('assets/banners/creative.jpg');background-attachment:fixed;filter:brightness(.5)}
.parallax-edfan .parallax-bg{background-image:url('assets/banners/edfan.jpg');background-attachment:fixed;filter:brightness(.5)}
@media (max-width: 576px){
  .parallax-venezia .parallax-bg,
  .parallax-creative .parallax-bg,
  .parallax-edfan .parallax-bg{background-attachment:scroll}
}

/* Strips de producto */
.strip .container{padding-left:var(--strip-pad);padding-right:var(--strip-pad)}
.strip .tin{aspect-ratio:1/1;border-radius:var(--radius);background:linear-gradient(145deg,#e8f1ef,#ffffff);border:1px solid #e6e6e6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.strip .img-cover{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.strip .badge{border-radius:999px}

/* --- STRIPS: sin pastilla de marca --- */
.strip .badge{ 
  display:none !important;
}

/* --- STRIPS: achicar imagen ~40% y centrar --- */
.strip .tin{
  width:100%;              /* 60% = 40% más chica respecto a su columna */
  margin-inline:auto;     /* centrar */
}

/* Opcional: en mobile un poquito más grande para legibilidad */
@media (max-width: 992px){
  .strip .tin{ width:70%; }
}
@media (max-width: 576px){
  .strip .tin{ width:80%; }
}


/* Inspiración: scroller horizontal */
.inspire-wrap{position:relative}
.inspire-scroller{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.inspire-item{flex:0 0 auto;width:340px;height:260px;object-fit:cover;scroll-snap-align:start;border-radius:16px;border:1px solid #eaeaea}
.inspire-controls{position:absolute;right:0;top:-48px;display:flex;gap:6px}
@media (min-width: 992px){.inspire-item{width:420px;height:300px}}

/* Empresa (50/50 en desktop) */
.empresa-photo{border-radius:20px;border:1px solid #eaeaea;min-height:380px;background:#ddd url('assets/frente-local.jpg') center/cover}

/* Footer */
.footer{background:var(--ink)}
.social{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff}
.social:hover{background:rgba(255,255,255,.08);color:#fff}

/* Footer: lista de contacto con íconos */
.contact-list{list-style:none;margin:0 0 1rem 0;padding:0}
.contact-item{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.contact-ico{
  flex:0 0 28px; width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:var(--brand); color:#fff;
  font-size:14px; line-height:1;
}
.contact-item a{ text-decoration: none; }
.contact-item a:hover{ text-decoration: underline; }

/* Hero: layout del caption con subtítulo y CTAs */
.caption-inner{max-width: 980px}
.caption-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* HERO: asegurar overlay de texto por encima de la imagen */
.hero--cinema .carousel-item,
.hero--banner .carousel-item{
  position: relative;
  overflow: hidden;
}

/* Capa oscura sutil para mejorar contraste del texto */
.hero--cinema .carousel-item::before,
.hero--banner .carousel-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
  z-index:1;
}

/* El caption ocupa todo el slide y queda arriba del overlay */
.hero--cinema .carousel-caption,
.hero--banner .carousel-caption{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:2rem;
  z-index:2;               /* <-- clave: por encima del ::before y de la imagen */
  text-align:center;
}

/* Contenedor del texto y botones dentro del caption */
.caption-inner{max-width:980px}
.caption-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Ajuste responsivo de tipografías en el hero */
@media (max-width: 576px){
  .carousel-caption h1{font-size:1.6rem}
  .carousel-caption .lead{font-size:1rem}
}

/* === AJUSTES SOLICITADOS (v-hero & productos) ===================== */

/* HERO: proporción más horizontal + imagen a cover */
.hero--cinema{ 
  min-height: 76vh;                 /* banner más apaisado (como la versión anterior) */
}
.hero--cinema .carousel-item img{
  height: 76vh;                      /* fija la altura del slide */
  width: 100%;
  object-fit: cover;                 /* recorte estético */
}

/* HERO: tipografía más bold y sombra más notoria en el título */
.carousel-caption h1{
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 800;                  /* más “cuerpo”, estilo versión anterior */
  letter-spacing: -0.2px;
  text-shadow:
    0 6px 28px rgba(0,0,0,.55),
    0 2px  6px rgba(0,0,0,.35);
}
/* refuerza la clase existente si se usa en otros títulos del hero */
.shadow-text{
  text-shadow:
    0 6px 28px rgba(0,0,0,.55),
    0 2px  6px rgba(0,0,0,.35) !important;
}

/* SECTION TITLES: más “cuerpo” (para el H2 de Productos) */
.section-title{
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 800;                  /* más peso */
  font-size: clamp(28px, 3.6vw, 44px);
}

/* PRODUCTOS (intro): imagen un poco más grande sin tocar el HTML */
@media (min-width: 576px){
  /* ensanchar la columna de imagen y ajustar la de texto */
  .product-card .row > .col-5,
  .product-card .row > .col-sm-4{
    flex: 0 0 45% !important;
    max-width: 45% !important;
  }
  .product-card .row > .col-7,
  .product-card .row > .col-sm-8{
    flex: 0 0 55% !important;
    max-width: 55% !important;
  }
}
/* un pequeño “boost” de tamaño de la imagen */
.product-card .img-fluid{
  transform: scale(1.08);
  transform-origin: center;
}

/* opcional: suaviza el texto bajo el H2 de productos si lo quisieras */
#productos .card .card-body p{ line-height: 1.55; }

/* === AJUSTE PRODUCTOS: prevenir desborde de imágenes =============== */

/* Forzar que la tarjeta sea un poco más alta y contenga mejor la imagen */
.product-card .card{
  min-height: 200px;   /* altura mínima mayor que la estándar */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contenedor de la imagen dentro de la card */
.product-card .col-5,
.product-card .col-sm-4{
  display: flex;
  align-items: center;     /* centra verticalmente */
  justify-content: center; /* centra horizontalmente */
  overflow: hidden;        /* recorta cualquier exceso */
}

/* Imagen ajustada y sin “desborde” */
.product-card .img-fluid{
  max-height: 180px;   /* límite de altura */
  width: auto;
  height: auto;
  transform: scale(1.05);   /* leve zoom */
  border-radius: 12px;      /* opcional, se ve más prolijo */
}

/* === AJUSTE TIPOGRAFÍA PARALLAX TITLES ======================= */
.parallax-title{
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 600;                        /* más bold */
  font-size: clamp(32px, 4.5vw, 52px);     /* un poco más grande */
  letter-spacing: -0.3px;                  /* leve ajuste óptico */
  text-shadow: 0 6px 24px rgba(0,0,0,.55); /* sombra fuerte como en hero */
}

/* === AJUSTE BOTONES "ESPACIOS QUE INSPIRAN" =================== */
.inspire-controls{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;  /* separa en extremos */
  padding: 0 12px;                 /* espacio interno */
  pointer-events: none;            /* deja pasar clicks salvo en botones */
}

.inspire-controls button{
  pointer-events: auto;            /* activa los botones */
  background: rgba(55, 54, 55, 0.55);  /* fondo sutil oscuro */
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inspire-controls button:hover{
  background: rgba(55, 54, 55, 0.75);
}


/* === AJUSTES NAVBAR MOBILE ================================== */

/* Quitar recuadro del ícono hamburguesa */
.navbar-toggler {
  border: none;              /* elimina el borde */
  box-shadow: none !important;
  padding: .25rem .5rem;
}

/* Hacer el ícono hamburguesa solo líneas */
.navbar-toggler-icon {
  background-image: none; /* quitamos el svg por defecto */
  width: 28px;
  height: 2px;
  background-color: var(--ink);
  position: relative;
  transition: all .3s ease;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 28px;
  height: 2px;
  background-color: var(--ink);
  transition: all .3s ease;
}
.navbar-toggler-icon::before {
  top: -8px;
}
.navbar-toggler-icon::after {
  top: 8px;
}

/* Menú desplegado ocupa toda la pantalla en mobile */
@media (max-width: 991.98px){
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(100vh - 56px); /* ocupa todo menos la barra */
    background: #fff;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  /* Links más grandes */
  .navbar-nav .nav-link {
    font-size: 1.4rem;
    padding: 1rem;
    text-align: center;
    width: 100%;
  }
}

/* === NAVBAR MOBILE CON OVERLAY OSCURO ======================= */
@media (max-width: 991.98px){
  .navbar-collapse {
    position: fixed;
    top: 56px; /* altura de la barra */
    left: 0;
    width: 100%;
    height: calc(100vh - 56px);
    background: rgba(0,0,0,0.92);   /* overlay oscuro */
    backdrop-filter: blur(4px);     /* efecto vidrio sutil */
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 2000; /* por encima de otros elementos */
  }

  .navbar-nav .nav-link {
    font-size: 1.6rem;      /* más grandes */
    font-weight: 600;
    color: #fff !important; /* blancos sobre fondo oscuro */
    padding: 1rem;
    text-align: center;
    width: 100%;
  }

  .navbar-nav .nav-link:hover {
    color: var(--brand) !important; /* verde corporativo al hover */
  }
}
/* === AJUSTE: fondos grises para secciones Productos, Obras y Empresa === */
#productos,
#obras,
#empresa{
  background-color: #f2f2f2;   /* gris claro como en la versión 05 */
}

/* === AJUSTE: proporción más vertical en OBRAS ================== */
.inspire-item {
  width: 320px;
  height: 320px;     /* más alto, formato vertical */
}

@media (min-width: 992px){
  .inspire-item {
    width: 380px;
    height: 360px;   /* aún más alto en desktop */
  }
}