/* 100 GOSSOS DE L'HOSPITALET */

:root{
  --color-crema: #fbf8f2;
  --color-crema-suave: #f7f2ea;
  --color-blanco-roto: #f4eee6;
  --color-taupe: #332a26;
  --color-texto: #332a26;
  --color-muted: #746761;
  --color-beige: #e7ddd1;
  --color-acento: #c9b8aa;
  --color-linea: #ded3c7;
  --fuente-titulo: 'Playfair Display', serif;
  --fuente-cuerpo: 'Lora', serif;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  font-family:var(--fuente-cuerpo);
  background:var(--color-crema);
  color:var(--color-taupe);
  line-height:1.8;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

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

.navbar{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(251,248,242,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-linea);
}

.nav-contenedor{
  max-width:1300px;
  margin:auto;
  padding:1.5rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo a{
  text-decoration:none;
  font-family:var(--fuente-titulo);
  color:var(--color-taupe);
  font-size:1.6rem;
  letter-spacing:2px;
}

.menu{
  display:flex;
  gap:2.5rem;
  list-style:none;
}

.menu a{
  text-decoration:none;
  color:var(--color-taupe);
  font-size:.95rem;
  transition:.3s;
}

.menu a:hover{
  opacity:.65;
}

.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  color:var(--color-taupe);
}

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

.dogs-hero{
  max-width:1300px;
  margin:auto;
  padding:7rem 2rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:start;
}

.dogs-hero h1{
  font-family:var(--fuente-titulo);
  font-size:clamp(3rem,7vw,6rem);
  line-height:.95;
  font-weight:400;
  margin-bottom:2rem;
}

.dogs-hero em{
  font-style:italic;
}

.dogs-hero img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:10px;
}

.dogs-caption{
  margin-top:1rem;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:.8rem;
  color:var(--color-muted);
}

.dogs-synopsis{
  margin-top:3rem;
}

.dogs-synopsis span{
  font-size:.8rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--color-muted);
}

.dogs-synopsis p{
  margin-top:1rem;
  max-width:55ch;
}

/* =====================
ESTADO DEL PROYECTO
===================== */

.dogs-status{
  max-width:1000px;
  margin:0 auto;
  padding:6rem 2rem;
}

.dogs-status h2{
  font-family:var(--fuente-titulo);
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:400;
  line-height:1.15;
  margin-bottom:3rem;
}

.counter{
  font-family:var(--fuente-titulo);
  font-size:5rem;
}

.counter small{
  font-size:2rem;
}

.progress-line{
  height:1px;
  background:var(--color-linea);
  margin:2rem 0;
}

.status-meta{
  display:flex;
  justify-content:space-between;
  color:var(--color-muted);
}

/* =====================
SECCIONES
===================== */

.dogs-featured,
.dogs-how,
.dogs-expo,
.dogs-faq{
  max-width:1300px;
  margin:auto;
  padding:7rem 2rem;
}

.dogs-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
}

.kicker{
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:.8rem;
  margin-bottom:1rem;
  color:var(--color-muted);
}

.dogs-two h2{
  font-family:var(--fuente-titulo);
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.15;
  font-weight:400;
  margin-bottom:1.5rem;
}

.dogs-two em{
  font-style:italic;
}

/* =====================
COLLAGE
===================== */

.dog-collage{
  margin-top:4rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}

.dog-collage img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:10px;
}

/* =====================
PASOS
===================== */

.dogs-how-grid{
  display:grid;
  grid-template-columns:minmax(320px,480px) 1fr;
  gap:5rem;
  align-items:start;
}

.dogs-left h2{
  margin-bottom:2rem;
}

.dogs-image{
  margin-top:36px;
  max-width:420px;
}

.dogs-image img{
  width:100%;
  aspect-ratio:3 / 4;
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:10px;
}

.steps{
  display:flex;
  flex-direction:column;
  gap:3rem;
  padding-top:8rem;
}

.step{
  display:flex;
  gap:2rem;
  align-items:flex-start;
}

.step-number{
  flex-shrink:0;
  font-family:var(--fuente-titulo);
  font-size:2.5rem;
  color:var(--color-taupe);
  line-height:1;
}

.step h3{
  font-family:var(--fuente-titulo);
  font-size:1.5rem;
  font-weight:400;
  margin-bottom:.8rem;
}

.step p{
  color:var(--color-muted);
  line-height:1.8;
}

/* =====================
EXPOSICIÓN
===================== */

.expo-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(180px,1fr));
  gap:1.8rem 3rem;
  margin-top:3rem;
}

.expo-meta div{
  display:block;
}

.expo-meta span{
  display:block;
  margin-bottom:.35rem;
  font-size:.75rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--color-muted);
}

.expo-meta strong{
  display:block;
  font-family:var(--fuente-cuerpo);
  font-weight:700;
  font-size:1rem;
  line-height:1.5;
}

.dogs-expo .dogs-two{
  grid-template-columns:0.85fr 1.15fr;
  gap:6rem;
  align-items:center;
}

.dogs-expo .dogs-two > div:first-child{
  max-width:520px;
  justify-self:center;
}

.dogs-expo .dogs-two > div:first-child img{
  width:100%;
  height:620px;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
}

.dogs-expo .dogs-two > div:nth-child(2){
  max-width:700px;
  width:100%;
}

.dogs-expo h2{
  max-width:12ch;
  font-size:clamp(2.4rem,4vw,4rem);
  line-height:1.1;
}

.expo-aportacion{
  margin:4rem auto 0 auto;
  padding:2rem;
  background:rgba(231,221,209,.45);
  border:1px solid var(--color-linea);
  border-radius:18px;
  max-width:640px;
  width:100%;
}

.expo-aportacion span{
  display:block;
  margin-bottom:1rem;
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.expo-aportacion p{
  margin:0;
  line-height:1.9;
  color:var(--color-taupe);
}

/* =====================
FAQ
===================== */

.faq-list{
  display:flex;
  flex-direction:column;
}

.faq-item{
  border-bottom:1px solid var(--color-linea);
}

.faq-question{
  width:100%;
  padding:1.8rem 0;
  border:none;
  background:transparent;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-family:var(--fuente-cuerpo);
  color:var(--color-taupe);
  font-size:1.05rem;
  text-align:left;
}

.faq-icon{
  transition:transform .3s ease;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.faq-answer p{
  padding:0 0 1.8rem;
  color:var(--color-muted);
  line-height:1.8;
  max-width:58ch;
}

.faq-item.active .faq-answer{
  max-height:200px;
}

.faq-item.active .faq-icon,
.faq-item.active .faq-question span:last-child{
  transform:rotate(45deg);
}

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

footer{
  text-align:center;
  padding:3rem;
  border-top:1px solid rgba(61,46,46,.08);
  color:var(--color-muted);
}

.footer-links,
.footer-social{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.7rem;
}

.footer-links a,
.footer-social a{
  color:var(--color-taupe);
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
}

.footer-links a:hover,
.footer-social a:hover{
  opacity:.6;
}

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

@media (max-width:900px){

  .menu{
    display:none;
  }

  .menu.active{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--color-crema);
    padding:2rem;
    gap:1.5rem;
  }

  .menu-toggle{
    display:block;
    font-size:1.6rem;
    cursor:pointer;
  }

  .nav-contenedor{
    padding:1.2rem 1.2rem;
  }

  .logo a{
    font-size:1.15rem;
  }

  .dogs-hero,
  .dogs-two{
    grid-template-columns:1fr;
    gap:3rem;
  }

  .dogs-hero{
    padding:4rem 1.2rem;
  }

  .dogs-featured,
  .dogs-how,
  .dogs-expo,
  .dogs-faq{
    padding:4.5rem 1.2rem;
  }

  .dog-collage{
    grid-template-columns:1fr;
  }

  .status-meta{
    flex-direction:column;
    gap:1rem;
  }

  .counter{
    font-size:4rem;
  }

  .dogs-how-grid{
    grid-template-columns:1fr;
    gap:3rem;
  }

  .steps{
    padding-top:0;
  }

  .step{
    gap:1.4rem;
  }

  /* EXPOSICIÓN RESPONSIVE */

  .dogs-expo .dogs-two{
    grid-template-columns:1fr !important;
    gap:3rem;
    align-items:start;
  }

  .dogs-expo .dogs-two > div:first-child,
  .dogs-expo .dogs-two > div:nth-child(2){
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;
  }

  .dogs-expo .dogs-two > div:first-child{
    order:1;
  }

  .dogs-expo .dogs-two > div:nth-child(2){
    order:2;
  }

  .dogs-expo .dogs-two > div:first-child img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    display:block;
    margin:0 auto;
  }

  .dogs-expo h2{
    max-width:none !important;
    font-size:clamp(2.4rem,11vw,3.5rem) !important;
    line-height:1.05 !important;
    margin-bottom:1.5rem;
  }

  .dogs-expo p{
    max-width:none;
  }

  .expo-meta{
    grid-template-columns:1fr !important;
    gap:1.5rem;
    margin-top:2.5rem;
  }

  .expo-aportacion{
    width:100%;
    max-width:100% !important;
    margin-top:3rem;
  }
}

@media (max-width:520px){

  .dogs-hero h1{
    font-size:clamp(3rem,14vw,4rem);
  }

  .dogs-status{
    padding:4rem 1.2rem;
  }

  .dogs-status h2{
    font-size:2.3rem;
  }

  .dogs-two h2,
  .dogs-expo h2{
    font-size:2.65rem !important;
  }

  .expo-aportacion{
    padding:1.4rem;
  }

  footer{
    padding:2.2rem 1.2rem;
  }
}

@media (max-width:900px){

  .dogs-expo .dogs-two{
    display:flex !important;
    flex-direction:column !important;
    gap:2.5rem !important;
  }

  .dogs-expo .dogs-two > div:first-child{
    order:1;
    width:100% !important;
    max-width:100% !important;
  }

  .dogs-expo .dogs-two > div:nth-child(2){
    order:2;
    width:100% !important;
    max-width:100% !important;
  }

  .dogs-expo .dogs-two > div:first-child img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:4/5;
    object-fit:cover;
    object-position:center top;
    border-radius:10px;
  }

  .dogs-expo h2{
    max-width:none !important;
    font-size:clamp(2.4rem,10vw,3.4rem) !important;
    line-height:1.05 !important;
  }
}

/* =====================
   TEXTOS JUSTIFICADOS
===================== */

.dogs-synopsis p,
.expo-aportacion p{
  text-align: justify;
  text-justify: inter-word;
  text-wrap: pretty;
  hyphens: auto;
}

/* SLIDER IGUAL QUE INDEX */

.dogs-gallery-slider{
  margin-top:4rem;
  width:100%;
  overflow:hidden;
  padding-bottom:1rem;
}

.dogs-gallery-slider .swiper-slide img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:10px;
}

.dogs-gallery-slider .swiper-button-prev,
.dogs-gallery-slider .swiper-button-next{
  color:var(--color-taupe);
}

.dogs-gallery-slider .swiper-button-prev::after,
.dogs-gallery-slider .swiper-button-next::after{
  font-size:1.5rem;
}

@media (max-width:768px){
  .dogs-gallery-slider .swiper-button-prev,
  .dogs-gallery-slider .swiper-button-next{
    display:none;
  }
}