/* Mònica Perelló · estilos
   Colores tomados de la referencia aprobada (giselacanals.com) */
:root{
  --crema:#fffcf7;
  --beix:#ded2c4;
  --rosa:#c29e93;
  --xocolata:#514031;
  --gris-rosat:#eae4e4;
  --gris-clar:#f4f4f4;
  --text:#666666;
  --fosc:#333333;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",Helvetica,Arial,sans-serif;
  --ample:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--text);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--xocolata)}
a:hover{color:var(--rosa)}
h1,h2,h3{font-family:var(--serif);color:var(--xocolata);font-weight:400;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem)}
h2{font-size:clamp(1.8rem,4vw,2.7rem)}
h3{font-size:1.35rem}
h1 em,h2 em{font-style:italic;color:var(--rosa)}
p{margin:0 0 1em}
.contenidor{max-width:var(--ample);margin:0 auto;padding:0 22px}
.estret{max-width:760px}
.centre{text-align:center}
.salta{position:absolute;left:-999px;top:0;background:var(--xocolata);color:#fff;padding:10px 16px;z-index:100}
.salta:focus{left:10px}

/* Pendientes: se ven en amarillo para revisarlos */
.pendent{background:#fff3b0;color:#5a4a00;padding:0 .25em;border-radius:3px;font-style:normal}

/* Barra superior */
.barra-top{background:var(--rosa);color:var(--fosc);font-size:.85rem}
.barra-top .contenidor{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px;flex-wrap:wrap}
.barra-top a{color:var(--fosc);text-decoration:none}
.barra-top a:hover{text-decoration:underline;color:var(--fosc)}
.barra-top .contacte-top{display:flex;gap:18px}
.idiomes a{padding:2px 6px;border-radius:3px}
.idiomes a[aria-current="true"]{background:rgba(255,255,255,.35);font-weight:700}

/* Cabecera */
.capcalera{background:var(--crema);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--gris-rosat)}
.capcalera .contenidor{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:16px}
.logo img{width:200px;height:auto}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
.menu a{text-decoration:none;color:var(--fosc);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
.menu a[aria-current="page"],.menu a:hover{color:var(--rosa)}
.menu .boto{color:#fff}
.menu .boto:hover{color:var(--fosc)}
.obre-menu{display:none;background:none;border:1px solid var(--beix);border-radius:4px;padding:8px 12px;font:inherit;color:var(--xocolata);cursor:pointer}

/* Botones */
.boto{display:inline-block;background:var(--xocolata);color:#fff;text-decoration:none;padding:13px 26px;border-radius:2px;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;font-weight:700;border:1px solid var(--xocolata);cursor:pointer;font-family:var(--sans)}
.boto:hover{background:var(--rosa);border-color:var(--rosa);color:var(--fosc)}
.boto.clar{background:transparent;color:var(--xocolata)}
.boto.clar:hover{background:var(--xocolata);color:#fff}
.botons{display:flex;gap:12px;flex-wrap:wrap}

/* Portada */
.hero{background:var(--gris-clar);overflow:hidden}
.hero .contenidor{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:30px;min-height:520px}
.hero .text{padding:50px 0}
.hero .avantitol{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--xocolata);font-weight:700;margin-bottom:14px}
.hero .intro{font-size:1.1rem;max-width:520px}
.hero .foto{align-self:end}
.hero .foto img{max-height:560px;width:auto;margin-left:auto}
.hero.pagina .contenidor{min-height:420px}
.hero.pagina .foto{align-self:center;padding:30px 0}
.hero.pagina .foto img{border-radius:999px 999px 0 0;max-height:460px}

/* Secciones */
.seccio{padding:80px 0}
.seccio.crema{background:var(--crema)}
.seccio.beix{background:var(--beix)}
.seccio.gris{background:var(--gris-rosat)}
.seccio.fosca{background:var(--xocolata);color:#f3ece6}
.seccio.fosca h2,.seccio.fosca h3{color:#fff}
.seccio.fosca h2 em{color:var(--beix)}
.titol-deco{font-family:var(--serif);font-size:clamp(2.6rem,7vw,4.4rem);color:var(--beix);line-height:1;margin-bottom:10px}
.titol-deco::first-letter{font-style:italic}

/* Arcos (las dos rutas y los servicios) */
.rutes{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;margin:40px auto 0}
.ruta{text-decoration:none;color:inherit;text-align:center;display:block}
.arc{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:4/5;box-shadow:12px 12px 0 var(--beix)}
.arc img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ruta:hover .arc img{transform:scale(1.04)}
.ruta h3{margin-top:26px;font-size:1.7rem}
.ruta p{margin-bottom:12px}
.ruta .mes{text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;font-weight:700;color:var(--xocolata);border-bottom:1px solid var(--rosa);padding-bottom:3px}
.serveis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;margin-top:40px}
.servei{text-align:center}
.servei .arc{aspect-ratio:3/4;box-shadow:10px 10px 0 rgba(0,0,0,.25)}
.seccio:not(.fosca) .servei .arc{box-shadow:10px 10px 0 var(--beix)}
.servei h3{margin-top:22px;text-transform:uppercase;font-family:var(--sans);font-weight:700;letter-spacing:.08em;font-size:1rem}
.servei p{font-size:.95rem}
.llista-serveis{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:36px}
.llista-serveis div{background:#fff;padding:26px;border-top:3px solid var(--rosa)}
.llista-serveis h3{font-size:1.25rem}
.llista-serveis p{margin:0;font-size:.95rem}

/* Pasos numerados */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px}
.pas{border-left:1px solid var(--rosa);padding:0 26px 10px}
.pas .num{font-family:var(--serif);font-size:3rem;color:var(--fosc);line-height:1;font-weight:700}
.pas h3{font-family:var(--sans);font-variant:small-caps;font-size:1.3rem;color:var(--fosc);margin:10px 0}

/* Bloque texto + foto */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.duo .foto img{border-radius:999px 999px 0 0;box-shadow:14px 14px 0 var(--beix)}
.duo.invers .foto{order:2}

/* Galería */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}
.galeria img{width:100%;aspect-ratio:3/4;object-fit:cover}
.credits{font-size:.8rem;margin-top:14px;text-align:center}

/* Reseñas */
.ressenyes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.ressenya{background:#fff;padding:28px;margin:0}
.estrelles{color:#c9a227;letter-spacing:2px}
.ressenya blockquote{margin:10px 0 14px;font-style:italic}
.ressenya figcaption{font-weight:700;color:var(--fosc);font-size:.9rem}

/* Preguntas frecuentes */
.faq{max-width:820px;margin:36px auto 0}
.faq details{border-bottom:1px solid var(--beix);padding:18px 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.2rem;color:var(--xocolata);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rosa);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0}

/* Destacado */
.destacat{background:var(--rosa);color:var(--fosc);text-align:center;padding:28px 22px;font-family:var(--serif);font-size:1.4rem}
.destacat a{color:var(--fosc)}

/* Formulario */
.formulari{text-align:left;background:#fff;padding:34px;max-width:680px;margin:30px auto 0;display:grid;gap:16px}
.formulari .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formulari label{display:block;font-weight:700;color:var(--fosc);font-size:.9rem;margin-bottom:6px}
.formulari input,.formulari select,.formulari textarea{width:100%;padding:12px;border:1px solid var(--beix);border-radius:2px;font:inherit;color:var(--fosc);background:var(--crema)}
.formulari input:focus,.formulari select:focus,.formulari textarea:focus{outline:2px solid var(--rosa);outline-offset:1px}
.formulari .nota{font-size:.82rem;margin:0}

/* Contacto y mapa */
.dades{list-style:none;padding:0;margin:0 0 24px}
.dades li{padding:8px 0;border-bottom:1px solid var(--gris-rosat)}
.dades strong{color:var(--fosc);display:inline-block;min-width:110px}
.mapa{background:var(--gris-rosat);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:20px}
.mapa iframe{width:100%;height:100%;border:0}

/* Textos legales */
.legal{padding:60px 0}
.legal h1{font-size:2.2rem}
.legal h2{font-size:1.4rem;margin-top:1.6em}

/* Pie */
.peu{background:var(--xocolata);color:#e9e0d8;padding:60px 0 120px;font-size:.92rem}
.peu a{color:#fff}
.peu .graella{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.peu h2{font-size:1.2rem;color:#fff;margin-bottom:12px}
.peu ul{list-style:none;padding:0;margin:0}
.peu li{margin-bottom:6px}
.peu .legals{border-top:1px solid rgba(255,255,255,.2);margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:18px;font-size:.82rem}
.peu .boto{background:var(--rosa);border-color:var(--rosa);color:var(--fosc)}

/* Barra fija en el móvil */
.barra-mobil{display:none}

@media (max-width:860px){
  body{font-size:16px}
  .obre-menu{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--crema);border-bottom:1px solid var(--gris-rosat)}
  .menu.obert{display:block}
  .menu ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 18px}
  .menu li a{display:block;padding:12px 0;border-bottom:1px solid var(--gris-rosat)}
  .menu li:last-child a{border:0;margin-top:12px;text-align:center}
  .logo img{width:170px}
  .barra-top .contacte-top a:last-child{display:none}
  .hero .contenidor,.hero.pagina .contenidor{grid-template-columns:1fr;min-height:0;gap:0}
  .hero .text{padding:40px 0 20px}
  .hero .foto img{max-height:380px;margin:0 auto}
  .hero.pagina .foto{padding:0 0 30px}
  .seccio{padding:56px 0}
  .rutes{grid-template-columns:1fr 1fr;gap:18px}
  .ruta h3{font-size:1.25rem;margin-top:16px}
  .ruta p{display:none}
  .arc{box-shadow:6px 6px 0 var(--beix)}
  .passos{grid-template-columns:1fr;gap:28px}
  .duo{grid-template-columns:1fr;gap:30px}
  .duo.invers .foto{order:0}
  .galeria{grid-template-columns:repeat(2,1fr);gap:8px}
  .ressenyes{grid-template-columns:1fr}
  .formulari{padding:22px}
  .formulari .fila{grid-template-columns:1fr}
  .peu .graella{grid-template-columns:1fr;gap:28px}
  .barra-mobil{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--crema);border-top:1px solid var(--beix);box-shadow:0 -4px 14px rgba(0,0,0,.08)}
  .barra-mobil a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 11px;text-decoration:none;color:var(--xocolata);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .barra-mobil a svg{width:22px;height:22px}
  .barra-mobil a.wa{background:var(--xocolata);color:#fff}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Botón flotante de WhatsApp (verde) */
.wa-flotant{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:10px;background:var(--xocolata);color:#fff;text-decoration:none;font-weight:700;padding:12px 22px 12px 14px;border-radius:999px;border:2px solid var(--rosa);box-shadow:0 6px 22px rgba(81,64,49,.35);font-size:.95rem;transition:transform .2s}
.wa-flotant:hover{color:var(--fosc);background:var(--rosa);border-color:var(--xocolata);transform:translateY(-2px)}
.wa-flotant svg{color:var(--beix)}
.wa-flotant:hover svg{color:var(--fosc)}
.wa-flotant svg{width:28px;height:28px}
@media (max-width:860px){
  .wa-flotant{display:none} /* en el móvil ya está en la barra de abajo */
}