/* =========================
   Landing "Obra nova a Altafulla"
   (estils específics d’aquesta pàgina)
   ========================= */

/* -------- Breadcrumbs (Fil d’Ariadna) -------- */
.crumbs ol{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  font-size:.9rem;
  padding:0;
  margin:.75rem 0 1.5rem;
  list-style:none;
}
.crumbs a{
  text-decoration:none;
  color:inherit;
}
.crumbs li::after{
  content:"/";
  margin:0 .5rem;
  color:#999;
}
.crumbs li:last-child::after{ content:""; }

/* =========================
   Feature cards (secció Obra nova)
   ========================= */

/* Color icones centralitzat (agafa --clr-primary si existeix al tema) */
.features{ --icon-color:#1D5061; }

.features{
  list-style:none;
  margin:1.5rem auto 0;
  padding:0;
  display:grid;
  gap:20px;
  max-width:1000px;
}
@media (min-width:900px){
  .features{ grid-template-columns:repeat(3,1fr); }
}

.feature{
  text-align:center;
  padding:24px 18px;
  border:1px solid #eae6e2;
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
  transition:transform .2s, box-shadow .2s;
}
.feature:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* Icona al capdamunt (sense cercle, només stroke) */
.f-ico{
  width:44px;
  height:44px;
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--icon-color);     /* color heretat per l’SVG via currentColor */
}
.f-ico .ico{
  width:100%;
  height:100%;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;                   /* només contorn */
}


/* -------- Chips (pastilles) -------- */
.chips{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.6rem;
  list-style:none;   /* elimina punts */
  padding:0;         /* neteja padding per defecte */
  margin-left:0;     /* neteja marge esquerra */
}
.chips li{
  border:1px solid #ddd;
  padding:.42rem .75rem;
  border-radius:999px;
  font-size:.95rem;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  line-height:1;
  white-space:nowrap;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.chips li:hover{
  border-color:var(--clr-primary, #8a6d60);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
/* Centrar contingut de la secció "Àrees de servei" */
#t-servei-arees,
#t-servei-arees + p,
#t-servei-arees + p + .chips{
  text-align:center;
  justify-content:center;
}
.chips{justify-content:center;}


/* ===== Per què Vita · Hero de fons ===== */
.whyvita{
  position:relative;
  background:url('img/obra-nova-hero-2.webp') center/cover no-repeat;
  color:#fff;
  min-height:60vh;              /* ocupa el 60% de l’alçada de la finestra */
  display:flex;
  align-items:center;           /* centra verticalment el contingut */
  padding-top: 0px;             /* menys espai superior */
  padding-bottom:32px;          /* menys espai inferior */
}
.whyvita__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.42));
}
.whyvita .container{
  position:relative;
  z-index:1;
  width:100%;
}
.whyvita h2,
.whyvita h3,
.whyvita p,
.whyvita strong{ color:#fff; }

/* Layout 2 columnes */
.whyvita .grid-2{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
  margin-top:12px; /* menys aire entre títol i contingut */
}
@media (min-width:900px){
  .whyvita .grid-2{ grid-template-columns:1.4fr .6fr; }
}

/* Caixa lateral estil glass */
.note--glass{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  border-radius:16px;
  padding:1rem 1.2rem;
  backdrop-filter:saturate(140%) blur(3px);
  -webkit-backdrop-filter:saturate(140%) blur(3px);
  color:#fff;
}
.note--glass strong{ color:#fff; }
/* Links dins la nota glass del hero Per què Vita */
.whyvita .note--glass a{
  color:#fff;                      /* color del text del link */
  text-decoration:none;            /* treu subratllat per defecte */
  border-bottom:2px solid rgba(255,255,255,.6);  /* subratllat “custom” */
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}

.whyvita .note--glass a:hover,
.whyvita .note--glass a:focus{
  color:#fff;                      /* manté color */
  border-bottom-color:#fff;        /* subratllat més marcat al hover */
  outline:0;
}

.whyvita .note--glass a:visited{
  color:#fff;                      /* evita el morat de ‘visited’ */
  border-bottom-color:rgba(255,255,255,.6);
}

/* Opcional: versió “xip” si vols encara més destacat al hover */
.whyvita .note--glass a:hover{
  background:rgba(255,255,255,.12);
  border-radius:6px;
}


/* Opcional: en pantalles petites, separa una mica més el text de la vora */
@media (max-width:899px){
  .whyvita .container{ padding-left:16px; padding-right:16px; }
}


/* -------- Google Maps embed responsive -------- */
.map-embed{
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:#f0f0f0;
}
.map-embed iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* -------- Ajustos petits per a figures de galeria locals -------- */
#projectes-obra-nova .gallery{
  margin-top:.5rem;
}
#projectes-obra-nova .tile .caption{
  backdrop-filter:saturate(120%) blur(2px);
}


/* -------- FAQ locals (si aquesta pàgina els carrega) -------- */
#faq .faq-item{ border-color:#eee; }
#faq .faq-q span{ opacity:.6; }

/* Mapa centrat amb el mateix ample que Contacte (container) */
.map-wrap{
  width:100%;
  aspect-ratio:16/9;        /* alçada responsive */
  border:1px solid #eae6e2; /* mateix estil de targeta */
  border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
  overflow:hidden;
  background:#f4f2f1;
}
.map-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Opcional: una mica més alt en pantalles grans */
@media (min-width:1200px){
  .map-wrap{ aspect-ratio:21/9; }
}

/* utilitat d'accessibilitat si no la tens ja */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

.section.light[aria-labelledby="t-map"]{ margin-bottom:0; padding-bottom:32px; }