/* ==========================================================================
   LA FINCA · Sistema de diseño base
   Space Moon Studios · lafincamusical.com
   ========================================================================== */

/* ---------- Fuentes (autoalojadas, subset latino) ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/allura-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Paleta de marca */
  --verde: #1B2F24;
  --arena: #D7C6A4;
  --oro: #C9A96A;
  --negro: #080B0B;
  --crema: #F5F1E6;

  /* Derivados */
  --oro-claro: #E6CF9B;
  --oro-oscuro: #94753F;
  --verde-claro: #2A4535;
  --verde-oscuro: #12211A;
  --negro-2: #0E1312;
  --negro-3: #141A19;
  --negro-4: #1C2322;
  --papel: #FBF8F0;

  --texto: var(--crema);
  --texto-2: rgba(245, 241, 230, .74);
  --texto-3: rgba(245, 241, 230, .5);
  --linea: rgba(201, 169, 106, .3);
  --linea-2: rgba(245, 241, 230, .11);
  --linea-3: rgba(245, 241, 230, .2);

  --oro-grad: linear-gradient(100deg, #8C6B35 0%, #C9A96A 26%, #F1DDAA 50%, #C9A96A 74%, #8C6B35 100%);

  --ok: #9CC7A4;
  --aviso: #E8B75C;
  --error: #E58A6F;
  --peligro: #C8553D;

  /* Tipografía */
  --f-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-script: 'Allura', 'Brush Script MT', cursive;

  /* Movimiento */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* Forma */
  --radio: 16px;
  --radio-s: 10px;
  --gutter: clamp(1.1rem, 4.2vw, 3rem);
  --max: 1320px;
  --header-h: 72px;
  --sombra: 0 30px 80px -30px rgba(0, 0, 0, .65);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
:where(ul[role='list'], ol[role='list']) { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--oro); color: var(--negro); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }

html { scrollbar-color: var(--oro-oscuro) var(--negro); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--negro); }
::-webkit-scrollbar-thumb { background: #3a3325; border-radius: 10px; border: 2px solid var(--negro); }
::-webkit-scrollbar-thumb:hover { background: var(--oro-oscuro); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 1000;
  background: var(--oro); color: var(--negro); padding: .7rem 1.2rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; transition: top .3s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Iconos ---------- */
.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.icon--fill { fill: currentColor; stroke: none; }
.icon--lg { width: 1.6em; height: 1.6em; }

/* ---------- Layout ---------- */
.container { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.container--estrecho { width: min(100% - var(--gutter) * 2, 880px); }
.container--medio { width: min(100% - var(--gutter) * 2, 1080px); }
.seccion { position: relative; padding-block: clamp(5rem, 11vw, 10rem); }
.seccion--compacta { padding-block: clamp(3.5rem, 7vw, 6rem); }
.stack > * + * { margin-top: var(--stack, 1.25rem); }
.centrado { text-align: center; }

/* ---------- Tipografía ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .9em;
  font-size: .68rem; line-height: 1.4; letter-spacing: .34em; text-transform: uppercase;
  font-weight: 600; color: var(--oro);
}
.eyebrow::before { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: .8; }
.eyebrow--sin-linea::before { display: none; }
.eyebrow--centro::after { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: .8; }

.titulo {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.4rem);
  font-weight: 300; line-height: 1.06; letter-spacing: -.012em;
}
.titulo--xl { font-size: clamp(2.6rem, 1.3rem + 5.6vw, 7rem); line-height: 1; }
.titulo--mayus { text-transform: uppercase; letter-spacing: .04em; }
.titulo em, .serif-it {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  letter-spacing: -.01em; text-transform: none;
}
.oro { color: var(--oro); }
.oro-texto {
  background: var(--oro-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.script { font-family: var(--f-script); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1; }
.lead {
  font-size: clamp(1.05rem, .96rem + .45vw, 1.3rem);
  line-height: 1.75; font-weight: 300; color: var(--texto-2);
}
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.etiqueta {
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
}
.num-tab { font-variant-numeric: tabular-nums; }
p + p { margin-top: 1em; }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: transparent; --btn-color: var(--crema); --btn-borde: var(--linea);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  min-height: 52px; padding: 0 1.7rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-color); border: 1px solid var(--btn-borde);
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.2; text-align: center; white-space: nowrap;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease), opacity .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 1.35em; height: 1.35em; transition: transform .5s var(--ease); }
.btn:hover .icon--mover { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .45; pointer-events: none; }

.btn--oro { --btn-bg: var(--oro); --btn-color: var(--negro); --btn-borde: var(--oro); }
.btn--oro::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 246, 220, .75) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn--oro:hover { --btn-bg: var(--oro-claro); --btn-borde: var(--oro-claro); }
.btn--oro:hover::after { transform: translateX(120%); }
.btn--linea:hover { --btn-borde: var(--oro); --btn-color: var(--oro-claro); }
.btn--crema { --btn-bg: var(--crema); --btn-color: var(--negro); --btn-borde: var(--crema); }
.btn--crema:hover { --btn-bg: var(--oro); --btn-borde: var(--oro); }
.btn--oscuro { --btn-bg: var(--negro); --btn-color: var(--crema); --btn-borde: var(--negro); }
.btn--oscuro:hover { --btn-bg: var(--verde); --btn-borde: var(--verde); }
.btn--linea-oscura { --btn-color: var(--negro); --btn-borde: rgba(8, 11, 11, .28); }
.btn--linea-oscura:hover { --btn-borde: var(--negro); --btn-bg: var(--negro); --btn-color: var(--crema); }
.btn--whatsapp { --btn-bg: #1f3b2c; --btn-color: var(--crema); --btn-borde: rgba(156, 199, 164, .35); }
.btn--whatsapp:hover { --btn-bg: #28503b; --btn-borde: rgba(156, 199, 164, .7); }
.btn--peligro { --btn-bg: var(--peligro); --btn-color: #fff; --btn-borde: var(--peligro); }
.btn--peligro:hover { --btn-bg: #b04632; --btn-borde: #b04632; }
.btn--lg { min-height: 60px; padding: 0 2.3rem; font-size: .76rem; }
.btn--sm { min-height: 40px; padding: 0 1.1rem; font-size: .64rem; letter-spacing: .16em; }
.btn--bloque { width: 100%; }
.btn--icono { width: 48px; min-height: 48px; padding: 0; }
.btn--icono.btn--sm { width: 40px; min-height: 40px; }

.enlace {
  display: inline-flex; align-items: center; gap: .5em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s var(--ease), color .3s;
}
.enlace:hover { background-size: 100% 1px; }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: .5rem; }
.campo > label, .campo__label {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--texto-2);
}
.campo__opcional { color: var(--texto-3); letter-spacing: .08em; text-transform: none; font-weight: 400; }
.input, .select, .textarea {
  width: 100%; min-height: 54px; padding: .85rem 1rem;
  background: rgba(245, 241, 230, .04); color: var(--crema);
  border: 1px solid var(--linea-3); border-radius: 12px;
  font-size: 1rem; font-weight: 400; letter-spacing: .01em;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.select {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A96A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px;
}
.select option { background: var(--negro-3); color: var(--crema); }
.input::placeholder, .textarea::placeholder { color: var(--texto-3); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(245, 241, 230, .32); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--oro); background-color: rgba(245, 241, 230, .06);
  box-shadow: 0 0 0 4px rgba(201, 169, 106, .16);
}
.campo.tiene-error .input, .campo.tiene-error .select, .campo.tiene-error .textarea { border-color: var(--error); }
.campo__error { font-size: .78rem; color: var(--error); min-height: 0; }
.campo__ayuda { font-size: .78rem; color: var(--texto-3); }

.check { position: relative; display: flex; gap: .85rem; align-items: flex-start; cursor: pointer; font-size: .86rem; color: var(--texto-2); line-height: 1.5; }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.check__caja {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 1px solid var(--linea-3);
  display: grid; place-items: center; transition: background-color .25s, border-color .25s;
}
.check__caja svg { width: 14px; height: 14px; stroke: var(--negro); stroke-width: 2.4; fill: none; opacity: 0; transform: scale(.6); transition: .25s var(--ease); }
.check input:checked + .check__caja { background: var(--oro); border-color: var(--oro); }
.check input:checked + .check__caja svg { opacity: 1; transform: none; }
.check input:focus-visible + .check__caja { outline: 2px solid var(--oro); outline-offset: 3px; }
.check a { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; }

.interruptor { position: relative; display: inline-flex; align-items: center; gap: .8rem; cursor: pointer; font-size: .9rem; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista { width: 46px; height: 26px; border-radius: 999px; background: rgba(245, 241, 230, .14); position: relative; transition: background-color .3s; flex: none; }
.interruptor__pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--crema); transition: transform .35s var(--ease); }
.interruptor input:checked + .interruptor__pista { background: var(--oro); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(20px); background: var(--negro); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--oro); outline-offset: 3px; }

/* ---------- Chips y badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border: 1px solid var(--linea); border-radius: 999px;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  background: rgba(8, 11, 11, .35); color: var(--crema); white-space: nowrap;
}
.chip .icon { color: var(--oro); width: 1.2em; height: 1.2em; }

/* ---------- Grano fotográfico ---------- */
.grano::after {
  content: ''; position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}