/* ══════════════════════════════════════════════════════════════════════════
   BERCO WINES · estilo común del sitio
   ──────────────────────────────────────────────────────────────────────────
   Lo enlazan todas las páginas del sitio (no las landings de cada club) ANTES
   de su propio <style>, así cada página puede pisar un token si lo necesita.

   Acá viven:
     1. los tokens de marca (salen de Berco - Design system/ds-bundle/tokens);
     2. el menú de arriba, el menú de celular y el pie, que son iguales en
        todo el sitio (el markup lo copia herramientas/estampar.mjs);
     3. el bloque "Dejanos tus datos";
     4. utilidades del estilo óleo para las fases siguientes.

   Nada de reglas globales sobre etiquetas (body, h1, a…): cada página sigue
   siendo dueña de su tipografía y sus colores. Todo lo de acá va colgado de
   [data-header], [data-menu-panel], [data-pie] o .bc-*.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- 1 · Tokens ---- */
:root{
  --color-bg:#F7F0E4;
  --color-surface:#F0E5D2;
  --color-text:#3A2A22;
  --color-divider:color-mix(in srgb,#3A2A22 16%,transparent);
  --color-ink:#2C0912;

  --color-accent:#7A1B31;
  --color-accent-100:#F6EBE4; --color-accent-200:#EAD5CB; --color-accent-300:#D6AC9E;
  --color-accent-400:#B87367; --color-accent-500:#7A1B31; --color-accent-600:#66152A;
  --color-accent-700:#4C0F1F; --color-accent-800:#370A16; --color-accent-900:#26060F;

  --color-accent-2:#B08A4A;
  --color-accent-2-100:#F7EEDC; --color-accent-2-200:#EFDFBE; --color-accent-2-300:#E0C795;
  --color-accent-2-400:#C9A868; --color-accent-2-500:#B08A4A; --color-accent-2-600:#94713A;
  --color-accent-2-700:#75592C; --color-accent-2-800:#56411F; --color-accent-2-900:#3A2B14;

  --color-neutral-100:#f9f4ed; --color-neutral-200:#eee7db; --color-neutral-300:#dcd3c4;
  --color-neutral-400:#c0b6a5; --color-neutral-500:#a19786; --color-neutral-600:#82796a;
  --color-neutral-700:#645c50; --color-neutral-800:#474238; --color-neutral-900:#2e2b25;

  /* el óleo de la etiqueta Berco */
  --oleo-cielo:#7A9ED4;
  --oleo-cielo-claro:#BFCDEB;
  --oleo-nube:#D6D6EA;
  --oleo-sombra:#3E5A9E;
  --oleo-bruma:#E7ECF7;
  --lava:#F07A2A;

  --font-heading:"Cormorant Garamond",Georgia,serif;
  --font-heading-weight:400;
  --font-body:Karla,system-ui,sans-serif;

  --space-1:4.4px; --space-2:8.8px; --space-3:13.2px; --space-4:17.6px; --space-6:26.4px; --space-8:35.2px;
  --leading:28px; --half:14px; --edge:clamp(20px,5vw,72px);
  --radius-sm:8px; --radius-md:16px; --radius-lg:28px;

  --shadow-sm:0 1px 2px color-mix(in srgb,#2C0912 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#2C0912 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2C0912 22%,transparent);
}

@keyframes bercoRing{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.85);opacity:0}100%{transform:scale(1.85);opacity:0}}

/* ---- 2 · Menú de arriba ---- */
[data-header]{font-family:var(--font-body);-webkit-font-smoothing:antialiased}
[data-header] *,[data-menu-panel] *,[data-pie] *{box-sizing:border-box}
[data-header] img,[data-pie] img{display:block;max-width:100%}
[data-header] a,[data-menu-panel] a,[data-pie] a{text-decoration:none;text-underline-offset:3px}
/* las páginas tienen su propio .btn: acá se fija todo lo que podría heredarse */
[data-header] .btn,[data-menu-panel] .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);line-height:1.2;border:1px solid transparent;
  min-height:0;height:auto;text-transform:none;letter-spacing:.01em;box-shadow:none;text-shadow:none}
[data-header] .btn-primary,[data-menu-panel] .btn-primary{background:var(--color-accent);background-image:none;color:var(--color-bg)}
[data-navlink],[data-menu-link]{text-transform:none;letter-spacing:normal;font-weight:400}
[data-header] .btn-primary:hover,[data-menu-panel] .btn-primary:hover{background:var(--color-accent-600);color:var(--color-bg)}

[data-navlink]{font-family:var(--font-body);font-size:14px;color:var(--color-text);white-space:nowrap;transition:color .45s ease}
[data-navlink]:hover{color:var(--color-accent) !important}
[data-navlink][aria-current="page"]{text-decoration:underline;text-decoration-color:var(--color-accent-2);text-decoration-thickness:1.5px;text-underline-offset:6px}
/* portada oscura: hasta que el menú se compacta, los links van en crema */
[data-header][data-portada="oscura"]:not(.bc-compacto) [data-navlink]{color:#F7F0E4}
[data-header][data-portada="oscura"]:not(.bc-compacto) [data-menu-toggle]{color:#F7F0E4 !important}

[data-menu-link]:not(.btn){font-family:var(--font-heading);font-weight:400;font-size:clamp(28px,7.6vw,42px);line-height:1.22;color:#F7F0E4}
[data-menu-link]:not(.btn):hover{color:var(--color-accent-2-300)}
[data-menu-link][aria-current="page"]{color:var(--color-accent-2-300)}
[data-menu-panel] :focus-visible,[data-pie] :focus-visible{outline:2px solid var(--color-accent-2-300);outline-offset:3px}
[data-header] :focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

@media (max-width:1080px){
  [data-header] nav[aria-label="Secciones"]{display:none !important}
  [data-menu-toggle]{display:flex !important}
}
/* con el menú de celular abierto, nada flotante de la página queda por encima */
html.bc-menu-abierto body > *:not([data-header]):not([data-menu-panel]):not(script):not(style){visibility:hidden !important}

/* ---- 2 · Pie ---- */
[data-pie]{font-family:var(--font-body);font-size:15px;line-height:1.55}
[data-pie] p{margin:0}
[data-pie] a,[data-pie] p,[data-pie] span{font-family:var(--font-body);font-weight:400}
.pie-sitios a{font-size:16px;color:#E8DCC8}
.pie-sitios a:hover{color:var(--color-accent-2-300)}
.pie-sitios a[aria-current="page"]{color:var(--color-accent-2-300)}
.pie-legal{max-width:1200px;margin:calc(1.5 * var(--leading)) auto 0 !important;padding-top:var(--leading);border-top:1px solid rgba(232,220,200,.18);
  font-size:14px;letter-spacing:.02em;color:rgba(232,220,200,.82);text-align:center}

/* ---- 3 · Dejanos tus datos ---- */
.bc-contacto{position:relative;background:var(--color-ink);color:#E8DCC8;font-family:var(--font-body);font-size:15px;line-height:1.55;
  padding:calc(3 * var(--leading)) var(--edge)}
.bc-contacto *{box-sizing:border-box}
/* foco visible sobre el bordó (el de cada página es bordó y acá no se ve) */
.bc-contacto :focus-visible{outline:2px solid var(--color-accent-2-300);outline-offset:3px}
/* cuando el contacto va justo antes del pie: sin franja crema y con una línea que los separa */
.bc-contacto + [data-pie]{margin-top:0 !important;padding-top:var(--leading) !important}
.bc-contacto + [data-pie] > div:nth-child(2){border-top:1px solid rgba(232,220,200,.14);padding-top:calc(1.5 * var(--leading))}
.bc-contacto-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:900px){.bc-contacto-grid{grid-template-columns:1fr}}
.bc-contacto .bc-kicker{margin:0 0 var(--half);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--color-accent-2-400)}
.bc-contacto h2{margin:0 0 var(--leading);font-family:var(--font-heading);font-weight:400;font-size:clamp(38px,5vw,64px);line-height:1.04;letter-spacing:-.02em;color:#F7F0E4}
.bc-contacto h2 em{display:block;font-style:italic;font-weight:300;color:var(--color-accent-2-300)}
.bc-contacto .bc-texto{margin:0 0 var(--leading);max-width:44ch;font-size:16.5px;line-height:1.65;color:rgba(232,220,200,.88)}
.bc-contacto .bc-otro{margin:var(--leading) 0 0;font-size:14.5px;line-height:1.7;color:rgba(232,220,200,.72)}
.bc-contacto .bc-otro a{color:var(--color-accent-2-300);text-decoration:underline;text-underline-offset:3px}
.bc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 30px;font-family:var(--font-heading);
  font-size:18px;line-height:1.2;white-space:nowrap;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.bc-btn svg{width:20px;height:20px;flex:none}
.bc-btn-primario{background:var(--color-accent);color:#F7F0E4}
.bc-btn-primario:hover{background:#8E2340;color:#F7F0E4;box-shadow:0 12px 28px rgba(0,0,0,.35);transform:translateY(-2px)}
.bc-btn-primario:active{transform:translateY(0)}
.bc-btn[disabled]{opacity:.6;cursor:progress;transform:none}

.bc-form{background:rgba(247,240,228,.06);border:1px solid rgba(247,240,228,.16);border-radius:calc(1.6 * var(--radius-lg));
  padding:clamp(22px,3.4vw,40px);display:flex;flex-direction:column;gap:18px}
.bc-form h3{margin:0;font-family:var(--font-heading);font-weight:400;font-size:clamp(24px,2.4vw,29px);line-height:1.15;color:#F7F0E4}
.bc-form .bc-sub{margin:4px 0 0;font-size:14px;color:rgba(232,220,200,.72)}
.bc-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.bc-fila{grid-template-columns:1fr}}
.bc-campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.bc-campo label{font-size:13.5px;color:rgba(232,220,200,.8)}
.bc-campo label span{color:rgba(232,220,200,.68)}
.bc-campo input{width:100%;font:inherit;font-size:16px;color:#F7F0E4;background:rgba(247,240,228,.1);border:1px solid rgba(247,240,228,.28);
  border-radius:999px;padding:13px 18px;transition:border-color .25s ease,background .25s ease}
.bc-campo input::placeholder{color:rgba(247,240,228,.42)}
.bc-campo input:focus{outline:none;border-color:var(--color-accent-2-300);background:rgba(247,240,228,.14)}
.bc-campo input[aria-invalid="true"]{border-color:#E8A0A0}
.bc-form .bc-btn{width:100%;margin-top:4px}
.bc-legal{margin:0;font-size:12.5px;line-height:1.5;color:rgba(232,220,200,.6)}
.bc-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.bc-estado{font-size:14.5px;line-height:1.5;border-radius:14px;padding:0}
.bc-estado:empty{display:none}
.bc-estado.ok{padding:12px 16px;background:rgba(176,138,74,.18);color:#F3E3C2}
.bc-estado.error{padding:12px 16px;background:rgba(232,160,160,.14);color:#F3CFC9}
.bc-estado a{color:inherit;text-decoration:underline}

/* ---- 4 · Utilidades del óleo (fases siguientes) ---- */
/* Grano de lienzo: se suma con class="bc-lienzo" a cualquier bloque con position. */
.bc-lienzo{position:relative;isolation:isolate}
.bc-lienzo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .23  0 0 0 0 .16  0 0 0 0 .13  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

@media (prefers-reduced-motion:reduce){
  [data-header],[data-header] *,[data-menu-panel],.bc-btn{transition:none !important}
}