/* Formigal365 — hoja de estilos única, sin dependencias externas */

:root{
  --navy:#1f3b4d;
  --navy-dark:#152a37;
  --forest:#2e6e5e;
  --forest-dark:#205044;
  --amber:#c9642b;
  --amber-dark:#a94f1f;
  --cream:#faf8f4;
  --cream-2:#f1ece3;
  --ink:#22303a;
  --grey:#5c6b73;
  --line:#e2ddd2;
  --white:#ffffff;
  --radius:14px;
  --shadow: 0 6px 24px rgba(31,59,77,0.10);
  --maxw:1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-size:17px;
}
img{max-width:100%; display:block;}
a{color:var(--forest);}
h1,h2,h3{font-family:var(--font); color:var(--navy); line-height:1.2; margin:0 0 .5em;}
h1{font-size:2.4rem;}
h2{font-size:1.7rem;}
h3{font-size:1.2rem;}
p{margin:0 0 1em;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.section{padding:56px 0;}
.section-tight{padding:32px 0;}
.bg-cream2{background:var(--cream-2);}
.bg-navy{background:var(--navy); color:#fff;}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff;}
.center{text-align:center;}
.muted{color:var(--grey);}
.small{font-size:.9rem;}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:0; background:var(--amber); color:#fff; padding:10px 16px; z-index:200;}
.skip-link:focus{left:10px; top:10px;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,244,0.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(6px);
}
.header-inner{
  /* A centered max-width bar — identical on every page, not tied to any
     one page's hero content or JS. On very wide screens this keeps the
     whole header (logo through the language flags) centered as one block
     instead of stretching edge-to-edge, so the left gutter next to the
     logo and the right gutter next to the flags stay equal. */
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto;
  padding:14px 32px; width:100%; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.25rem; color:var(--navy); text-decoration:none;
}
.brand .dot{color:var(--navy);}
.brand-logo{
  width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0;
  box-shadow:0 0 0 2px var(--white), 0 2px 6px rgba(31,59,77,0.25);
}
footer .brand-logo{box-shadow:0 0 0 2px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.3);}
nav.main-nav{display:flex; align-items:center; gap:10px;}
nav.main-nav a{
  color:var(--navy); text-decoration:none; font-weight:600; font-size:1rem;
  padding:10px 16px; border-radius:8px; text-align:center;
}
nav.main-nav a:hover, nav.main-nav a.active{background:var(--cream-2); color:var(--forest-dark);}
.lang-switch{display:flex; gap:8px; margin-left:18px;}
.lang-switch a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; font-size:1.3rem; line-height:1;
  border:1px solid var(--line); border-radius:8px; text-decoration:none;
  filter:grayscale(55%); opacity:.7; transition:opacity .15s ease, filter .15s ease, border-color .15s ease;
}
.lang-switch a:hover{opacity:1; filter:none; border-color:var(--navy);}
.lang-switch a.current{opacity:1; filter:none; background:var(--cream-2); border-color:var(--navy);}
.nav-toggle{display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; color:var(--navy);}

@media (max-width:1360px){
  /* Verified-safe threshold for the full nav (7 links + language flags) to
     lay out in one row inside the now max-width-capped .header-inner,
     without horizontal overflow, across the site's languages (currently
     ES/EN — French is disabled for now, see gen.js/run.js). Below this,
     the hamburger menu takes over. */
  nav.main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--white); flex-direction:column; align-items:stretch;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:8px;
  }
  nav.main-nav.open{display:flex;}
  nav.main-nav a{padding:12px 14px;}
  .nav-toggle{display:block;}
  .lang-switch{margin:8px 14px 4px;}
  .header-inner{padding:14px 16px;}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:999px; font-weight:700; text-decoration:none;
  font-size:1rem; border:2px solid transparent; cursor:pointer; transition:transform .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--amber); color:#fff;}
.btn-primary:hover{background:var(--amber-dark);}
.btn-outline{background:transparent; border-color:var(--white); color:var(--white);}
.btn-outline-navy{background:transparent; border-color:var(--navy); color:var(--navy);}
.btn-ghost{background:var(--white); color:var(--navy); border-color:var(--line);}
.btn-whatsapp{background:#25923b; color:#fff;}
.btn-whatsapp:hover{background:#1c7a2e;}
.btn-block{width:100%;}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px;}

/* Hero */
.hero{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 60%, #0f1f28 100%);
  color:#fff; padding:64px 0 56px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-80px; bottom:-120px; width:360px; height:360px;
  background:radial-gradient(circle, rgba(201,100,43,0.35), transparent 70%);
}
.hero-photo{
  background-size:cover; background-position:center 30%;
  padding:110px 0 90px;
}
.hero-photo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,25,32,0.78) 0%, rgba(15,25,32,0.55) 45%, rgba(15,25,32,0.88) 100%);
}
.hero-photo::after{display:none;}
.hero-photo .container{position:relative; z-index:1;}

/* Home hero — one component, two layouts by breakpoint alone: a full-bleed
   photo with a dark overlay on mobile, and a side-by-side split (uncropped
   photo + text) from 901px up. */
.hero-home{position:relative; overflow:hidden; color:#fff;}
.hero-home-media{position:absolute; inset:0; z-index:0;}
.hero-home-media img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;}
.hero-home-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,25,32,0.78) 0%, rgba(15,25,32,0.55) 45%, rgba(15,25,32,0.88) 100%);
}
.hero-home-text{position:relative; z-index:1; padding:110px 20px 90px; max-width:var(--maxw); margin:0 auto;}
.hero-home-text .hero-tagline{margin-bottom:18px;}
.hero-home-text h1{color:#fff; font-size:2.6rem; max-width:720px; margin:0 0 .5em;}
.hero-home-text p.lead{color:#dbe4e8; font-size:1.15rem; max-width:720px; margin:0 0 1em;}
.hero-home-text .badge-row{margin-top:22px;}
.hero-home-text .btn-row{margin-top:18px;}
@media (min-width:901px){
  .hero-home{
    /* Grid, not flex: the text's five lines (tagline, title, lead, badges,
       buttons) are laid out as five row tracks, and the photo spans all of
       them (grid-row:1/-1) in the second column. That makes the photo's top
       and bottom edges lock exactly onto the top of the tagline and the
       bottom of the button row — real layout constraints, not a guessed
       height — and .hero-home-text below reuses those same tracks via
       subgrid so both columns measure against one shared ruler. */
    display:grid;
    grid-template-columns:minmax(420px,640px) 1fr;
    grid-template-rows:repeat(5, auto);
    row-gap:22px;
    padding:72px 0;
    background-image:url('../images/header-mountains.jpg');
    background-size:190% auto; background-position:35% top;
  }
  .hero-home::before{
    /* One flat, uniform tint over the mountain-photo backdrop — no gradient,
       no fade, same strength everywhere it's visible, whether that's behind
       the text or in the margin around the photo. It sits above the
       background but below the photo itself (z-index below the photo, see
       .hero-home-media img): the photo is the thing meant to catch the eye,
       so it stays fully lit, not dimmed to match the backdrop it sits on. */
    content:""; position:absolute; inset:0; z-index:1;
    background:rgba(15,31,40,.5);
  }
  .hero-home-media{
    /* z-index:2, above the .hero-home::before tint (z-index:1) — a child's
       own z-index only ranks it within ITS PARENT's stacking context, so
       having the <img> at z-index:2 while this box stayed at z-index:0 was
       not enough: the whole box, image included, was still painting under
       the tint. This is what was actually dimming the photo. */
    grid-column:2; grid-row:1 / -1; position:relative; z-index:2;
    min-height:0; padding:0 20px;
  }
  .hero-home-media::after{
    /* Cancel the mobile full-bleed dark scrim (base rule below) — the
       single .hero-home::before tint above replaces it at this breakpoint. */
    content:none;
  }
  .hero-home-media img{
    /* Absolutely positioned and centered, rather than a flex child: a grid
       item's own intrinsic size (this is a tall, ~1600px portrait photo)
       otherwise leaks into how the rows it spans get auto-sized, inflating
       every row well past what the text needs. Taking the image out of flow
       breaks that feedback loop — the grid area is sized purely from the
       text column (via subgrid), and the image then fills it exactly:
       height matches the tagline-to-buttons span, width follows from the
       image's own aspect ratio, never stretched. */
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
    height:100%; width:auto; max-width:calc(100% - 40px); display:block;
    border-radius:var(--radius); box-shadow:0 12px 32px rgba(0,0,0,.35);
  }
  .hero-home-text{
    /* A fixed-width card — tagline through buttons, including the heading,
       all one box sharing one left edge. Its horizontal position is set by
       JS (js/main.js, alignHeroHome), which centers it between the true
       left edge and the photo's actual rendered left edge — a value that
       depends on the photo's aspect ratio and the text's own height, so it
       isn't something plain CSS can compute. margin:0 auto here is only the
       no-JS fallback (centers within column 1 instead). Column 1's own
       track and column 2/the photo are untouched either way. */
    position:relative; z-index:2;
    grid-column:1; grid-row:1 / -1;
    display:grid; grid-template-rows:subgrid;
    padding:0;
    width:min(460px, 100%); margin:0 auto;
    overflow:visible;
  }
  .hero-home-text .hero-tagline{margin-bottom:0;}
  .hero-home-text h1{margin:0;}
  .hero-home-text p.lead{font-size:1.3rem; line-height:1.5; margin:0;}
  .hero-home-text .badge-row{margin:0;}
  .hero-home-text .btn-row{margin:0;}
  .hero-home-text .btn-row .btn{
    /* Slightly smaller than the site-wide .btn so the two hero buttons
       don't stretch to the card's full width, leaving a right margin that
       matches the rest of the block. */
    padding:12px 18px; font-size:.95rem;
  }
}

/* Feature photo — shown side-by-side with its caption, full and uncropped
   (a real <img>, not a background-image), instead of overlaying text on
   top of a cropped/zoomed version of it. */
.feature-split{background:var(--navy); color:#fff;}
.feature-split-inner{
  display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:wrap; padding:56px 20px;
}
.feature-split-media{
  flex:1 1 380px; max-width:460px; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,0.35);
}
.feature-split-media img{width:100%; height:auto; display:block;}
.feature-split-text{flex:1 1 320px; max-width:420px;}
.feature-split-text h2{color:#fff; margin-bottom:.4em;}
.feature-split-text p{color:#dbe4e8; font-size:1.1rem; margin:0;}
@media (max-width:700px){
  .feature-split-inner{flex-direction:column; padding:40px 20px; text-align:center;}
  .feature-split-media{max-width:320px;}
}
.hero-tagline{
  display:inline-block; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
  padding:6px 14px; border-radius:999px; font-size:.85rem; margin-bottom:18px; font-weight:600;
}
.hero h1, .hero h2, .hero h3{color:#fff;}
.hero h1{font-size:2.6rem; max-width:720px;}
.hero p.lead{font-size:1.15rem; color:#dbe4e8; max-width:720px;}
.badge-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.badge{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2); padding:8px 14px; border-radius:999px; font-size:.85rem;
}
.rating-badge{
  display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--navy);
  padding:10px 16px; border-radius:12px; font-weight:800; box-shadow:var(--shadow); text-decoration:none;
  margin-top:24px;
}
.rating-badge .score{background:var(--forest); color:#fff; padding:4px 14px; border-radius:8px; font-size:1.3rem; line-height:1.4;}
.rating-badge span.txt{font-weight:600; color:var(--grey); font-size:.85rem;}

/* Direct-booking-is-cheaper note */
.savings-note{
  display:flex; align-items:flex-start; gap:12px; background:#fff7ec; border:1px solid #f0d9b8;
  border-radius:12px; padding:16px 18px; margin:18px 0; color:var(--ink);
}
.savings-note .icn{font-size:1.4rem; line-height:1;}
.savings-note strong{color:var(--amber-dark);}
.savings-note a{color:var(--forest-dark);}
.hero .savings-note, .bg-navy .savings-note{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.3); color:#eef3f5;}
.hero .savings-note strong, .bg-navy .savings-note strong{color:#f5b47c;}
.hero .savings-note a, .bg-navy .savings-note a{color:#bfe3d6;}

/* Cards / grids */
.grid{display:grid; gap:22px;}
.grid-top{align-items:start;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:800px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }
@media (min-width:801px) and (max-width:1000px){ .grid-4{grid-template-columns:repeat(2,1fr);} }

.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.gallery .photo-placeholder{aspect-ratio:1/1;}
.gallery .photo-placeholder.wide{grid-column:span 2; aspect-ratio:2/1;}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr);} .gallery .photo-placeholder.wide{grid-column:span 2;} }
@media (max-width:520px){ .gallery{grid-template-columns:1fr;} .gallery .photo-placeholder.wide{grid-column:span 1; aspect-ratio:4/3;} }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow); color:var(--ink);
}
.card h3{margin-bottom:.35em; color:var(--navy);}
.icon{font-size:1.6rem;}

/* Link cards — icon badge + chip CTA, used for the ski-prep / useful-links grids */
.link-card{display:flex; flex-direction:column; height:100%;}
.link-card .icon-badge{margin-bottom:14px;}
.link-card h3{font-size:1.05rem;}
.link-card p{flex:1;}
.icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; font-size:1.3rem; flex-shrink:0;
  background:var(--cream-2);
}
.icon-badge.amber{background:#fbe6d8;}
.icon-badge.forest{background:#dcece6;}
.icon-badge.navy{background:#dde6ea;}
.chip-link{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin-top:14px; padding:8px 16px; border-radius:999px; font-weight:700; font-size:.88rem;
  text-decoration:none; background:var(--cream-2); color:var(--navy); border:1px solid var(--line);
  transition:background .12s ease, transform .12s ease;
}
.chip-link:hover{background:var(--forest); color:#fff; transform:translateY(-1px);}
.bg-navy .chip-link{background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.25);}
.bg-navy .chip-link:hover{background:var(--amber); border-color:var(--amber);}

/* On mobile, turn the link-card CTA into a clear full-width button bar
   instead of a small left-aligned chip — easier to spot and to tap. */
@media (max-width:600px){
  .link-card .chip-link{
    align-self:stretch; justify-content:center;
    padding:13px 16px; font-size:1rem; background:var(--forest); color:#fff; border-color:var(--forest);
  }
  .bg-navy .link-card .chip-link{background:var(--amber); color:#fff; border-color:var(--amber);}
}

/* Horizontal, wrapping row of chip-links — keeps groups of shop/business
   links compact instead of a tall one-per-line list with lots of blank
   space below when a sibling card has fewer items. */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.chip-row .chip-link{margin-top:0;}

/* Brand buttons — Booking.com / Airbnb, styled in their own recognisable colors */
.btn-booking{background:#003580; color:#fff;}
.btn-booking:hover{background:#00224f;}
.btn-airbnb{background:#FF385C; color:#fff;}
.btn-airbnb:hover{background:#d92e4d;}

.photo-placeholder{
  aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg, var(--cream-2), #dfe7e2);
  display:flex; align-items:center; justify-content:center; color:var(--grey);
  font-size:.85rem; text-align:center; padding:16px; border:1px dashed var(--line);
}
.photo-placeholder img{width:100%; height:100%; object-fit:cover;}

/* Amenity list */
.amenities{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0;}
.amenity{display:flex; gap:12px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:16px;}
@media (max-width:900px){ .amenities{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .amenities{grid-template-columns:1fr;} }

/* Table */
table.price-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
table.price-table th, table.price-table td{padding:16px; text-align:left; border-bottom:1px solid var(--line);}
table.price-table th{background:var(--navy); color:#fff;}
table.price-table tr:last-child td{border-bottom:none;}
table.price-table td.price{font-weight:800; color:var(--forest-dark); font-size:1.15rem;}

/* Route cards */
.route-card{border-left:5px solid var(--forest);}
.route-meta{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; font-size:.85rem;}
.route-meta span{background:var(--cream-2); padding:4px 10px; border-radius:999px; color:var(--navy); font-weight:600;}
.difficulty-facil{border-left-color:#2e6e5e;}
.difficulty-muy-facil{border-left-color:#4c9a6a;}
.difficulty-media{border-left-color:#c9642b;}

/* Booking form */
.booking-form{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
@media (max-width:700px){ .form-row{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-weight:700; font-size:.9rem; color:var(--navy);}
.field input, .field select, .field textarea{
  padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-size:1rem; font-family:var(--font);
  background:var(--cream);
}
.field textarea{resize:vertical; min-height:90px;}
.form-note{font-size:.85rem; color:var(--grey); margin-top:14px;}

/* Map */
.map-wrap{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line);}
.map-wrap iframe{width:100%; height:340px; border:0; display:block;}

.piste-map-wrap{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); background:#fff; padding:10px; margin-top:14px;
}
.piste-map-wrap img{width:100%; height:auto; border-radius:8px;}

/* Footer */
footer.site-footer{background:var(--navy-dark); color:#cfd9dd; padding:48px 0 24px; margin-top:40px;}
footer.site-footer a{color:#e7edef; text-decoration:none;}
footer.site-footer a:hover{text-decoration:underline;}
.footer-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:28px;}
@media (max-width:800px){ .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.footer-grid h4{color:#fff; font-size:.95rem; margin-bottom:12px;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:8px; font-size:.92rem;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); margin-top:32px; padding-top:20px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.82rem; color:#9fb0b6;
}
.social-row{display:flex; gap:12px; margin-top:10px;}
.social-row a{background:rgba(255,255,255,0.08); padding:8px 12px; border-radius:8px; font-size:.85rem;}

/* Utility */
.mt0{margin-top:0;} .mb0{margin-bottom:0;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}