/* =========================================================
   vínculo — planes málaga
   Sistema visual compartido (cream / coral / mostaza / carbón)
   ========================================================= */

:root {
  /* Paleta nueva — rosa / naranja / mostaza / blanco roto */
  --bone:       #F8F1E6;
  --cream:      #F6EDE0;
  --cream-2:    #EFE2D2;
  --rose:       #F4B5A5;
  --rose-deep:  #E58A78;
  --peach:      #F8D0A0;
  --coral:      #E85A2A;
  --coral-deep: #C4441C;
  --mustard:    #D4A33A;
  --mustard-deep:#A8801F;
  --olive:      #4A5A36;
  --terracota:  #B14A2A;
  --ink:        #2A1810;
  --ink-soft:   #3A2418;
  --muted:      #6B4E3A;
  --line:       #2A181033;

  /* Tema (sobre-escribible por variación) */
  --bg:    var(--cream);
  --fg:    var(--ink);
  --accent: var(--coral);
  --accent-2: var(--mustard);
  --surface: var(--bone);

  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Tipografía */
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans:  "Instrument Sans", "Neue Haas Grotesk", "Helvetica Neue", system-ui, sans-serif;

  /* Curvas */
  --ease: cubic-bezier(.65,.05,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Variaciones de tema (Home) */
body[data-theme="dark"]  {
  --bg: #1A1310; --fg: #F6EDE0; --accent: #E85A2A; --accent-2: #D4A33A; --surface: #221813;
}
body[data-theme="rose"]  {
  --bg: #F4C5B3; --fg: #2A1810; --accent: #B14A2A; --accent-2: #D4A33A; --surface: #F8D5C5;
}

/* ============== Irregular gradient background (blobs) ============== */
html {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 55% 45% at 6% 4%,   #F4B5A5cc 0%, transparent 58%),
    radial-gradient(ellipse 48% 38% at 96% 8%,  #F8D0A0d9 0%, transparent 55%),
    radial-gradient(ellipse 65% 40% at 75% 38%, #D4A33A80 0%, transparent 58%),
    radial-gradient(ellipse 45% 45% at 12% 62%, #E85A2A66 0%, transparent 60%),
    radial-gradient(ellipse 70% 35% at 88% 78%, #F4B5A5b3 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 35% 92%, #F8D0A0cc 0%, transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body[data-theme="dark"] {
  background-color: #1A1310 !important;
}
body[data-theme="dark"] ~ * , html:has(body[data-theme="dark"]) {
  /* fallback */
}
html:has(body[data-theme="dark"]) {
  background-color: #1A1310;
  background-image:
    radial-gradient(ellipse 55% 45% at 6% 4%,   #B14A2A55 0%, transparent 60%),
    radial-gradient(ellipse 48% 38% at 96% 8%,  #D4A33A40 0%, transparent 60%),
    radial-gradient(ellipse 65% 40% at 75% 38%, #E85A2A33 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 12% 75%, #F4B5A526 0%, transparent 65%);
}
html:has(body[data-theme="rose"]) {
  background-color: #F4C5B3;
  background-image:
    radial-gradient(ellipse 55% 45% at 8% 6%,   #F8D0A0cc 0%, transparent 60%),
    radial-gradient(ellipse 48% 38% at 94% 12%, #D4A33A99 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 70%, #E85A2A66 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 20% 88%, #B14A2A40 0%, transparent 65%);
}

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

html {
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-feature-settings: "ss01", "ss02";
  transition: color .6s var(--ease);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--bone); }

/* ============== Typography helpers ============== */
.serif      { font-family: var(--serif); font-weight: 400; }
.italic     { font-style: italic; }
.sans       { font-family: var(--sans); }
.upper      { text-transform: uppercase; letter-spacing: .14em; }
.eyebrow    { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.t-display  { font-family: var(--serif); font-style: italic; font-weight: 400; line-height: .92; letter-spacing: -.02em; font-size: clamp(56px, 13vw, 220px); }
.t-h1       { font-family: var(--serif); font-style: italic; line-height: .95; letter-spacing: -.02em; font-size: clamp(44px, 8vw, 120px); }
.t-h2       { font-family: var(--serif); font-style: italic; line-height: 1.0;  letter-spacing: -.02em; font-size: clamp(36px, 5.6vw, 84px); }
.t-h3       { font-family: var(--serif); font-style: italic; line-height: 1.05; letter-spacing: -.01em; font-size: clamp(28px, 3.4vw, 48px); }
.t-lead     { font-family: var(--sans);  font-size: clamp(16px, 1.4vw, 21px); line-height: 1.45; }
.t-body     { font-size: 16px; line-height: 1.55; }
.t-small    { font-size: 13px; line-height: 1.45; }

.ampersand  { font-family: var(--serif); font-style: italic; }

/* ============== Layout ============== */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ============== Custom cursor ============== */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%; mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: opacity .25s, transform .15s var(--ease-out), width .25s var(--ease-out), height .25s var(--ease-out);
}
.cursor-dot  { width: 6px; height: 6px; background: #F2DCD0; }
.cursor-ring { width: 28px; height: 28px; border: 1px solid #F2DCD0; }
body.cursor-hover .cursor-dot  { width: 0; height: 0; }
body.cursor-hover .cursor-ring { width: 70px; height: 70px; }
body.cursor-text  .cursor-ring { width: 4px; height: 30px; border-radius: 2px; background: #F2DCD0; }
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ============== Header / Nav ============== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  mix-blend-mode: difference;
  color: var(--cream);
}
.nav__logo {
  font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.nav__logo .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); transform: translateY(-3px); }
.nav__links { display: flex; gap: 28px; }
.nav__links a { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 16px;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
}
.nav__cta .arrow { width: 14px; height: 14px; }

.nav__burger { display: none; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; align-items: center; justify-content: center; }
.nav__burger span { display: block; width: 14px; height: 1px; background: currentColor; position: relative; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 14px; height: 1px; background: currentColor; }
.nav__burger span::before { top: -4px; }
.nav__burger span::after  { top:  4px; }

/* Mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink); color: var(--cream);
  transform: translateY(-100%); transition: transform .7s var(--ease);
  display: flex; flex-direction: column;
}
.menu.open { transform: translateY(0); }
.menu__top { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); }
.menu__close { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; cursor: pointer; }
.menu__list { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); gap: 12px; }
.menu__list a {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(48px, 11vw, 120px); line-height: 1;
  border-bottom: 1px solid #F2DCD022; padding-bottom: 18px;
}
.menu__list a:hover { color: var(--coral); }

/* ============== Buttons ============== */
.btn {
  --b-bg: var(--ink); --b-fg: var(--cream);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 26px 18px 30px;
  background: var(--b-bg); color: var(--b-fg);
  border-radius: 999px; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .35s var(--ease-out), background .25s;
  will-change: transform;
}
.btn--coral { --b-bg: var(--coral); --b-fg: var(--bone); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--fg); border: 1px solid var(--fg); }
.btn .arrow { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translate(4px, -4px); }
.btn.magnetic { transition: transform .25s var(--ease-out); }

/* ============== Marquee REMOVED — sustituido por banda estática .strip-static ============== */
.strip-static {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: 28px 0;
  background: transparent;
  overflow: hidden;
}
.strip-static__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px 36px;
  padding: 0 var(--gutter);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1;
}
.strip-static__row span { display: inline-flex; align-items: center; gap: 36px; }
.strip-static__row em { color: var(--accent); font-style: italic; }
.strip-static__row .nd {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral); transform: translateY(-6px);
}

/* ============== Stickers ============== */
.sticker {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  text-align: center; line-height: 1.2;
  width: 110px; height: 110px;
  transition: transform .8s var(--ease-out);
}
.sticker:hover { transform: rotate(20deg); }
.sticker--coral { background: var(--coral); color: var(--bone); }
.sticker--olive { background: var(--olive); color: var(--bone); }
.sticker--ink { background: var(--ink); color: var(--bone); }
.sticker--rose { background: var(--rose); color: var(--ink); }
.sticker svg { position: absolute; }

.sticker-text {
  font-family: var(--sans); font-size: 10px; letter-spacing: .22em;
}

/* ============== Footer ============== */
.foot {
  background: var(--ink); color: var(--cream);
  padding: 80px var(--gutter) 40px;
  margin-top: 80px;
}
.foot__big {
  font-family: var(--serif); font-style: italic; line-height: .9;
  font-size: clamp(80px, 18vw, 280px); letter-spacing: -.03em;
  display: flex; align-items: baseline; gap: 24px;
  border-bottom: 1px solid #F2DCD022; padding-bottom: 28px; margin-bottom: 40px;
}
.foot__big .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--coral); display: inline-block; }
.foot__cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
}
.foot__cols h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 16px; opacity: .55; font-weight: 500; }
.foot__cols a, .foot__cols p { color: var(--cream); opacity: .9; font-size: 14px; line-height: 1.6; }
.foot__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot__legal { display: flex; justify-content: space-between; margin-top: 60px; padding-top: 20px; border-top: 1px solid #F2DCD022; font-size: 12px; opacity: .55; letter-spacing: .08em; }
@media (max-width: 800px) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
}

/* ============== Hard offset shadow (neo-brutalist hover) ============== */
.card a,
.combo__card,
.plan-card a {
  display: block;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.card a:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--fg); }
.combo__card:hover { box-shadow: 6px 6px 0 var(--accent); }
.plan-card:hover a { transform: translate(-2px, -2px); }

/* Squared borders on media to contrast pill chrome */
.card__media, .plan-card__media, .combo__media { border-radius: 0; }

/* ============== Reveal on scroll ============== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ============== Cookie banner ============== */
.cookies {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 400;
  background: var(--ink); color: var(--cream);
  padding: 18px 22px;
  border-radius: 18px;
  display: flex; align-items: center; gap: 20px; justify-content: space-between;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  font-size: 13px;
  transform: translateY(140%); transition: transform .6s var(--ease-out);
}
.cookies.show { transform: translateY(0); }
.cookies__buttons { display: flex; gap: 10px; flex-shrink: 0; }
.cookies__buttons button {
  font: inherit; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cream); background: transparent; color: var(--cream);
  text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
}
.cookies__buttons .primary { background: var(--coral); color: var(--bone); border-color: var(--coral); }
@media (max-width: 600px) {
  .cookies { flex-direction: column; align-items: stretch; }
  .cookies__buttons { justify-content: flex-end; }
}

/* ============== Page transition ============== */
.page-trans {
  position: fixed; inset: 0; z-index: 500;
  background: var(--ink); transform-origin: bottom;
  transform: scaleY(0); pointer-events: none;
}
.page-trans.in  { animation: pt-in .55s var(--ease) forwards; }
.page-trans.out { animation: pt-out .55s var(--ease) forwards; }
@keyframes pt-in  { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@keyframes pt-out { from { transform: scaleY(1); transform-origin: top; }   to { transform: scaleY(0); transform-origin: top; } }

/* ============== Responsive ============== */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
}