/* Casa Camí de la Victòria — manual de la casa
   Paleta inspirada en la casa (ocre de la fachada, verde de las contraventanas),
   el mar de la bahía y los pinos de Mallorca. */
:root{
  --paper:#FAF6EC;        /* cal cálida */
  --card:#FFFFFF;
  --ink:#243029;         /* verde muy oscuro */
  --ink-soft:#5C6760;
  --pine:#2E5D45;        /* verde contraventana / pino  (color principal) */
  --pine-deep:#214433;
  --pine-tint:#E4EDE6;
  --sea:#15788A;         /* mar mediterráneo (enlaces, mapas) */
  --sea-tint:#DEEDEF;
  --ochre:#D99A2B;       /* fachada / sol (acento cálido) */
  --ochre-tint:#F7E8C8;
  --alert:#C0492F;       /* emergencias */
  --line:#E6DDC9;
  --radius:14px;
  --shadow:0 1px 3px rgba(36,48,41,.08), 0 8px 24px rgba(36,48,41,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:60px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 "Source Sans 3", system-ui, sans-serif;
  -webkit-text-size-adjust:100%;
}
main{max-width:680px; margin:0 auto; padding:0 18px 48px}
h1,h2{font-family:"Fraunces", Georgia, serif; font-weight:600; line-height:1.15; margin:0}
a{color:var(--sea)}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:3px solid var(--ochre); outline-offset:2px; border-radius:4px}

/* ---------- barra superior ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 18px; background:rgba(250,246,236,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .home{
  font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:15px;
  color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.langs{display:flex; gap:3px}
.langs a{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:700; letter-spacing:.04em; text-decoration:none;
  color:var(--ink-soft); padding:5px 8px; border-radius:8px;
}
.langs a.active{background:var(--pine); color:#fff}
.langs a:not(.active):hover{background:var(--pine-tint)}
.flag{width:20px; height:14px; border-radius:3px; display:block; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(36,48,41,.12); overflow:hidden}
/* En móvil estrecho mostramos solo las banderas para que quepan */
@media (max-width:540px){
  .langs a{padding:5px 6px; gap:0}
  .langs .lang-code{display:none}
}

/* ---------- cabecera con foto ---------- */
.hero{
  position:relative; min-height:300px; display:flex; align-items:flex-end;
  background:#3a4a3f url("img/hero.jpg") center 38% / cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(33,68,51,.12) 0%, rgba(33,68,51,.20) 45%, rgba(28,40,33,.82) 100%);
}
.hero-text{position:relative; z-index:1; max-width:680px; margin:0 auto; width:100%; padding:26px 18px 22px; color:#fff}
.hero .eyebrow{margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre)}
.hero h1{font-size:clamp(32px,7.5vw,44px); color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.25)}
.hero .subtitle{margin:8px 0 0; font-size:17px; color:rgba(255,255,255,.92)}
@media (min-width:560px){ .hero{min-height:360px} }

/* ---------- índice ---------- */
.toc{margin:24px 0 8px}
.toc-h{font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; font-family:"Source Sans 3",sans-serif; font-weight:700}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  font-size:14px; font-weight:600; padding:8px 13px 8px 9px; border-radius:999px;
}
.chip:hover{border-color:var(--pine); background:var(--pine-tint)}
.chip-n{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--pine-tint); color:var(--pine-deep); font-size:12px; font-weight:700;
}
.chip-tel{background:var(--ochre-tint); border-color:#E9D29B; padding-left:13px}

/* ---------- tarjeta rápida (WiFi + propietario) ---------- */
.quick{display:grid; gap:12px; margin:14px 0 8px}
.wifi-card,.owner-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; position:relative; overflow:hidden;
}
.wifi-card::before,.owner-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--sea);
}
.owner-card::before{background:var(--ochre)}
.wifi-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.wifi-row + .wifi-row{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
.wifi-label{display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.wifi-value{font-size:20px; font-variant-ligatures:none; letter-spacing:.01em; word-break:break-all}
.btn-copy{
  flex-shrink:0; font:700 14px/1 "Source Sans 3", sans-serif; color:#fff; background:var(--pine);
  border:0; border-radius:10px; padding:10px 16px; cursor:pointer;
}
.btn-copy.ok{background:#2E7D4F}
.owner-card{display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink)}
.owner-call{font-size:14px; font-weight:700; color:var(--ochre)}

/* ---------- intro ---------- */
.intro{margin-top:18px}
.intro p{margin:0 0 14px}

/* ---------- secciones ---------- */
section{margin:42px 0; padding-top:6px}
section h2{
  display:flex; align-items:center; gap:14px;
  font-size:26px; color:var(--pine-deep); margin-bottom:14px;
  padding-bottom:10px; border-bottom:2px solid var(--ochre-tint);
}
.sec-n{
  flex-shrink:0;
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--pine); color:#fff;
  font-family:"Source Sans 3",sans-serif; font-size:19px; font-weight:700;
}
section p{margin:0 0 13px}
section ul{margin:0 0 13px; padding-left:22px}
section li{margin-bottom:6px}
.sec-lead{color:var(--ink-soft); font-size:15px}

/* ---------- fotos ---------- */
.photos{display:grid; gap:12px; margin-top:16px}
.photos.cols-2{grid-template-columns:repeat(2,1fr)}
.photos.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){ .photos.cols-2,.photos.cols-3{grid-template-columns:1fr} }
figure{margin:0}
figure img{border-radius:12px; border:1px solid var(--line); width:100%; height:auto; object-fit:cover}
figcaption{font-size:13px; color:var(--ink-soft); margin-top:6px}

/* ---------- teléfonos ---------- */
.phones .place{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:12px;
}
.place-emergency{background:var(--ochre-tint); border-color:#E9D29B;
  display:flex; align-items:center; justify-content:space-between; gap:12px}
.place-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.place-head strong{font-size:17px}
.place-dist{font-size:13px; font-weight:700; color:var(--ink-soft); white-space:nowrap}
.place-desc{font-size:14px; color:var(--ink-soft); margin:3px 0 0}
.place-addr{font-size:14px; margin:6px 0 10px}
.place-actions{display:flex; flex-wrap:wrap; gap:8px}
.btn-tel,.btn-map{
  display:inline-block; text-decoration:none; font-size:14px; font-weight:700;
  padding:8px 13px; border-radius:10px;
}
.btn-tel{background:var(--pine); color:#fff}
.btn-map{background:var(--sea-tint); color:var(--sea)}
.btn-112{background:var(--alert); color:#fff; font-size:22px; padding:10px 22px; border-radius:12px}

/* ---------- puntos de interés (restaurantes / supermercados) ---------- */
.poi-area{
  font-family:"Fraunces",Georgia,serif; font-size:18px; color:var(--pine-deep);
  margin:22px 0 10px; padding-bottom:4px; border-bottom:1px solid var(--line);
}
.poi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 16px; margin-bottom:10px;
}
.poi-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.poi-head strong{font-size:16px}
.poi-price{font-size:13px; font-weight:700; color:var(--ochre); white-space:nowrap}
.poi-meta{font-size:13px; font-weight:600; color:var(--ink-soft); margin-top:2px}
.poi-closed{margin-left:8px; color:var(--alert)}
.poi-closed::before{content:"· "}
.poi-desc{font-size:14px; margin:8px 0 10px}
.poi-actions{display:flex; flex-wrap:wrap; gap:8px}
.poi-actions .btn-tel{padding:6px 12px}
.poi-actions .btn-map{padding:6px 12px}

/* ---------- pie ---------- */
footer{
  text-align:center; font-size:13px; color:var(--ink-soft);
  padding:26px 18px 40px; border-top:1px solid var(--line); margin-top:20px;
}

/* ---------- portada de selección de idioma (respaldo sin JS) ---------- */
body.landing{display:flex; min-height:100svh; flex-direction:column}
.land-main{flex:1; display:grid; place-items:center; padding:32px 18px; max-width:none}
.land-card{
  width:100%; max-width:430px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow); padding:34px 30px; text-align:center;
  border-top:6px solid var(--pine);
}
.land-card h1{font-size:clamp(32px,9vw,42px); color:var(--pine-deep)}
.land-sub{font-size:14px; color:var(--ink-soft); margin:12px 0 24px}
.lang-grid{display:grid; gap:10px}
.lang-card{
  display:block; text-decoration:none; font-size:18px; font-weight:700; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:13px;
}
.lang-card:hover{border-color:var(--pine); background:var(--pine-tint); color:var(--pine-deep)}
body.landing footer{border-top:0}

/* ---------- registro de viajeros ---------- */
.reg-form{display:flex; flex-direction:column; gap:10px; margin:4px 0 16px}
.btn-reg{
  display:inline-block; align-self:flex-start; text-decoration:none;
  background:var(--pine); color:#fff; font-size:16px; font-weight:700;
  padding:13px 22px; border-radius:12px; box-shadow:var(--shadow);
}
.btn-reg:hover{background:var(--pine-deep)}
.reg-url{font-size:13px; color:var(--sea); word-break:break-all}

/* ---------- volver al índice ---------- */
.back-top{
  display:inline-block; margin-top:18px; font-size:13px; font-weight:700;
  text-decoration:none; color:var(--ink-soft); padding:6px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--card);
}
.back-top:hover{border-color:var(--pine); color:var(--pine-deep); background:var(--pine-tint)}

/* ---------- fotos apiladas (basura: cubo, calendario, mapa) ---------- */
.photos.stack{grid-template-columns:1fr; gap:16px; max-width:460px}
.photos.stack figure img{
  max-height:560px; object-fit:contain; object-position:left center; background:#fff;
}