/* =========================================================
   variables.css — Design tokens, reset y elementos base
   Surfcamp Ribadesella
   ========================================================= */
/* =========================================================
   Surfcamp Ribadesella — shared design system
   Extracted from Home.html, extended for transactional pages
   ========================================================= */
:root{
  --green:#069183; --green-deep:#06746a; --green-ink:#063f3a;
  --cyan:#53bbc2; --cyan-soft:#9fd9dc; --blue:#318ca0;
  --pink:#e3679d; --orange:#f47b4f; --orange-deep:#ee6336; --yellow:#f6c24b; --peach:#f7b487;
  --ink:#0e2e2b; --slate:#5a6f6c; --cream:#fbf6ee; --sand:#f4ebdd; --white:#fff;
  --black:#06201d;
  --line:rgba(14,46,43,.14); --line-soft:rgba(14,46,43,.08);
  --ok:#1f9e6f; --warn:#ee6336; --hot:#e3679d;

  --sunset:linear-gradient(95deg,#e3679d 0%,#f47b4f 50%,#f6c24b 100%);
  --sea:linear-gradient(95deg,#06746a 0%,#069183 45%,#53bbc2 100%);
  --sea-deep:linear-gradient(125deg,#052f2b 0%,#06746a 52%,#1597a8 100%);

  --ff:"Montserrat",system-ui,sans-serif;
  --hdr-h:64px; --bar-h:70px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--ff);background:var(--white);color:var(--ink);line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:22px}
.wrap-narrow{width:100%;max-width:760px;margin-inline:auto;padding-inline:22px}

/* ---- type ---- */
h1,h2,h3{font-weight:600;line-height:1.02;letter-spacing:0}
.section{padding:64px 0}
.section-head{margin-bottom:30px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.section-head h2{font-size:clamp(30px,7.5vw,52px);text-transform:uppercase;font-weight:600;letter-spacing:.005em;color:var(--green-ink);line-height:.98;text-wrap:balance}
.section-head p{margin-top:14px;color:var(--slate);font-size:16px;font-weight:400;max-width:56ch}
.lead-rule{width:54px;height:4px;background:linear-gradient(90deg,var(--green) 0%,var(--cyan) 100%);margin-bottom:18px}
.lead-rule.sunset{background:var(--sunset)}
.lead-rule.center{margin-inline:auto}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--green)}
.view-all{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--green-ink);padding-bottom:6px;border-bottom:2px solid var(--green);transition:.2s}
.view-all .ic{width:16px;height:16px;transition:transform .2s}
.view-all:hover{color:var(--green)}
.view-all:hover .ic{transform:translateX(4px)}

/* ---- icons ---- */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;width:1em;height:1em;display:block}
.ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;border:1.5px solid currentColor}
.ico .ic{width:54%;height:54%;stroke-width:1.5}

/* ---- buttons (square) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.1em;border-radius:0;padding:15px 26px;white-space:nowrap;transition:transform .22s cubic-bezier(.4,0,.1,1),background .2s ease,color .2s ease,box-shadow .25s ease,border-color .2s}
.btn .ic{width:16px;height:16px;transition:transform .22s cubic-bezier(.4,0,.1,1)}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -13px rgba(6,63,58,.65)}
.btn:hover .ic{transform:translateX(2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-deep)}
.btn-sun{background:var(--orange-deep);color:#fff}
.btn-sun:hover{background:#dd5026}
.btn-cyan{background:var(--cyan);color:var(--green-ink)}
.btn-cyan:hover{background:#3fb0b8}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{background:#0a322d}
.btn-outline{background:transparent;color:var(--green-ink);border:1.5px solid var(--ink)}
.btn-outline:hover{background:var(--green-ink);color:#fff;border-color:var(--green-ink)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-lg{padding:18px 32px;font-size:13.5px}
.btn-sm{padding:11px 18px;font-size:12px}
.btn-block{width:100%}