/* ==========================================================================
   BYKAMEN — hoja de estilos de producción
   Va en el CHILD THEME de Hello. No dentro de Elementor.

   Regla de oro: los colores, la tipografía y el espaciado se definen AQUÍ.
   En el builder solo se aplican clases (pestaña Avanzado → Clases CSS).
   Así el cliente puede editar contenido sin poder tocar el diseño.

   Solo tema oscuro, por decisión de proyecto.
   ========================================================================== */

:root{
  /* ---- Paleta: negro, blanco, gris y naranja de contraste ---- */
  --bk-black:#0B0B0A;
  --bk-black-1:#141413;      /* secciones alternas */
  --bk-black-2:#1E1E1C;      /* superficies elevadas */
  --bk-white:#F6F5F3;
  --bk-grey:#9C9995;         /* texto secundario */
  --bk-orange:#E58500;

  --bk-line:rgba(255,255,255,.13);
  --bk-line-strong:rgba(255,255,255,.27);
  --bk-orange-soft:rgba(229,133,0,.13);
  --bk-field:rgba(255,255,255,.04);
  /* Fondo SÓLIDO para los <select>. Equivale visualmente a --bk-field sobre
     el fondo, pero opaco. Un select translúcido abre el desplegable en
     blanco (lo pinta el sistema) y las <option> salen blanco sobre blanco. */
  --bk-opt-bg:#171716;

  /* ---- Las tres líneas: un solo naranja en tres profundidades ----
     Ordenadas por profundidad de color del líquido. No añadir hues nuevos. */
  --bk-cerveza:#E58500;
  --bk-sidra:#F2B25C;
  --bk-vermut:#B35A05;

  /* ---- Tipografía ----
     Sustituir por las webfonts reales cargadas EN LOCAL (no Google CDN).
     Titulares: condensada (Oswald / Archivo Narrow / Bebas Neue)
     Cuerpo:    serif (Lora / Source Serif) */
  --bk-f-display:"Oswald","Arial Narrow",sans-serif;
  --bk-f-body:"Lora",Georgia,serif;
  --bk-f-util:"Oswald","Arial Narrow",sans-serif;

  /* ---- Escala fluida. No replicar esto en los campos de Elementor ---- */
  --bk-fs-mega:clamp(3.1rem,10.5vw,9.5rem);
  --bk-fs-h1:clamp(2.3rem,5.6vw,4.9rem);
  --bk-fs-h2:clamp(1.7rem,3.4vw,2.9rem);
  --bk-fs-h3:clamp(1.12rem,1.7vw,1.45rem);
  --bk-fs-quote:clamp(1.85rem,4.8vw,3.75rem);
  --bk-fs-body:clamp(1rem,1.06vw,1.12rem);
  --bk-fs-sm:.875rem;
  --bk-fs-label:.69rem;

  --bk-gut:clamp(1.5rem,3.4vw,3.25rem);
}

/* ==========================================================================
   BASE
   ========================================================================== */

body{
  background:var(--bk-black);
  color:var(--bk-white);
  font-family:var(--bk-f-body);
  font-size:var(--bk-fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--bk-f-display);
  font-weight:600;
  line-height:.94;
  letter-spacing:-.005em;
  text-wrap:balance;
}

h1{font-size:var(--bk-fs-h1)}
h2{font-size:var(--bk-fs-h2)}
h3{font-size:var(--bk-fs-h3)}

:focus-visible{outline:2px solid var(--bk-orange);outline-offset:3px}

/* ---- Utilidades tipográficas ---- */
.bk-lbl{
  font-family:var(--bk-f-util);
  font-size:var(--bk-fs-label);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bk-grey);
  line-height:1.4;
}
/* Etiqueta con guion delante, para arrancar secciones */
.bk-lbl--rule{display:flex;align-items:center;gap:.7rem}
.bk-lbl--rule::before{content:"";width:26px;height:1px;background:var(--bk-orange);flex:0 0 auto}

.bk-num{font-variant-numeric:tabular-nums}
.bk-dim{color:var(--bk-grey)}

/* Cifra grande de dato. En BLANCO a propósito: cuatro cifras naranjas
   seguidas se comen la página y compiten con los botones. */
.bk-figure{
  font-family:var(--bk-f-display);
  font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1;
  color:var(--bk-white);
}
.bk-figure small{font-size:.44em;color:var(--bk-orange);margin-left:.06em}

/* ==========================================================================
   APERTURA CON FOTOGRAFÍA
   Aplicar .bk-open a la sección de apertura de la home.

   En Elementor la foto va como FONDO DE SECCIÓN (Estilo → Fondo → Imagen,
   posición Centro, tamaño Cubrir). El velo y el grano los pone este CSS,
   NO el "Superponer fondo" de Elementor: así el oscurecido es el mismo en
   todas las secciones que lo usen y se regula desde un solo sitio.

   Requisitos de la foto:
   - Horizontal, mínimo 2400 px de ancho, comprimida a WebP (< 300 KB).
   - Escena oscura de origen. Una foto clara oscurecida al 70 % se
     empastela y pierde detalle; una foto ya oscura mantiene textura.
   - Que el centro esté vacío o desenfocado: ahí van el logo y el titular.
   - Sin caras ni etiquetas legibles en el centro.
   ========================================================================== */

.bk-open{
  /* Velo GENERAL — bajo, para que la foto se vea de verdad.
     Bajar = más foto. */
  --bk-veil-top:.52;
  --bk-veil-mid:.30;
  --bk-veil-bot:.86;

  /* Scrim — pozo oscuro SOLO bajo el bloque de texto.
     Subir = más contraste para el titular. */
  --bk-scrim:.78;

  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* Velo + scrim.
   El contraste del texto NO lo da el velo general, lo da el scrim. Es lo que
   permite tener foto visible en bordes y titular legible en el centro.

   Con #E58500 esto no es opcional: si se aclara el fondo de forma uniforme,
   el naranja del titular cae a ~2:1 y no llega al mínimo legal ni para
   texto grande. El scrim mantiene el pozo oscuro donde va la palabra naranja. */
.bk-open::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* halo cálido de marca, muy tenue */
    radial-gradient(68% 50% at 50% 30%,rgba(229,133,0,.10),transparent 66%),
    /* scrim bajo el texto — mover el centro si el texto no va centrado */
    radial-gradient(ellipse 54% 48% at 50% 44%,
      rgba(11,11,10,var(--bk-scrim)) 0%,
      rgba(11,11,10,calc(var(--bk-scrim) * .62)) 46%,
      rgba(11,11,10,0) 82%),
    /* velo general */
    linear-gradient(180deg,
      rgba(11,11,10,var(--bk-veil-top)) 0%,
      rgba(11,11,10,var(--bk-veil-mid)) 40%,
      rgba(11,11,10,var(--bk-veil-bot)) 100%);
}

/* Grano. Es lo que hace que se lea como fotografía y no como degradado.
   SVG en línea: cero peticiones, no afecta a Core Web Vitals. */
.bk-open::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* El contenido de Elementor tiene que quedar por encima de velo y grano */
.bk-open > .elementor-container,
.bk-open > .e-con-inner{position:relative;z-index:3}

/* Variante con vídeo de fondo en lugar de foto: mismo velo, mismo grano.
   Elementor → Fondo → Vídeo. Añadir un cartel (poster) para el primer pintado. */
.bk-open--video video{object-fit:cover}

/* ==========================================================================
   CABECERA — logo centrado
   Aplicar .bk-header al container que tiene Sticky activado.
   Elementor le añade .elementor-sticky--effects al fijarse.
   ========================================================================== */

.bk-header-logo{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease;
  pointer-events:none;
}
.elementor-sticky--effects .bk-header-logo,
.bk-header--solid .bk-header-logo{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* Subrayado naranja al pasar por los enlaces del menú */
.bk-header .elementor-nav-menu a{position:relative}
.bk-header .elementor-nav-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--bk-orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.bk-header .elementor-nav-menu a:hover::after{transform:scaleX(1)}

/* ==========================================================================
   PANELES DE PRODUCTO
   Container por línea. Solo cambia la clase de línea — el color NUNCA
   se toca en el builder, para que los tres no se desalineen.
   ========================================================================== */

.bk-panel{
  --bk-tint:var(--bk-orange);
  position:relative;
  overflow:hidden;
  border-right:1px solid var(--bk-line);
}
.bk-panel:last-child{border-right:0}

.bk-panel--cerveza{--bk-tint:var(--bk-cerveza)}
.bk-panel--sidra{--bk-tint:var(--bk-sidra)}
.bk-panel--vermut{--bk-tint:var(--bk-vermut)}

/* Lavado de color que crece de abajo arriba */
.bk-panel::before{
  content:"";position:absolute;inset:auto 0 0 0;height:0;z-index:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bk-tint) 20%,transparent));
  transition:height .55s cubic-bezier(.22,.8,.28,1);
  pointer-events:none;
}
.bk-panel:hover::before,
.bk-panel:focus-within::before{height:78%}

/* Trazo superior */
.bk-panel::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:var(--bk-tint);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,.8,.28,1);
}
.bk-panel:hover::after,
.bk-panel:focus-within::after{transform:scaleX(1)}

/* El contenido tiene que quedar por encima del lavado */
.bk-panel > *{position:relative;z-index:2}

.bk-panel .bk-lbl{color:var(--bk-tint)}
.bk-panel .bk-link{color:var(--bk-tint)}

/* Vaso / botella / copa en SVG */
.bk-vessel{color:var(--bk-tint);opacity:.62;transition:opacity .5s ease,transform .6s cubic-bezier(.22,.8,.28,1)}
.bk-panel:hover .bk-vessel{opacity:1;transform:translateY(-6px)}

/* Ficha técnica */
.bk-specs{list-style:none;margin:0;padding:.9rem 0 0;display:grid;gap:.4rem;border-top:1px solid var(--bk-line)}
.bk-specs li{display:flex;justify-content:space-between;gap:1rem;font-family:var(--bk-f-util);font-size:.78rem;letter-spacing:.05em}
.bk-specs b{font-weight:400;color:var(--bk-grey);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem}
.bk-specs span{color:var(--bk-white);font-variant-numeric:tabular-nums}

/* Enlace con flecha */
.bk-link{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--bk-f-util);font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
}
.bk-link svg{width:26px;transition:transform .35s ease}
.bk-panel:hover .bk-link svg,
.bk-link:hover svg{transform:translateX(7px)}

@media (max-width:859px){
  .bk-panel{border-right:0;border-bottom:1px solid var(--bk-line)}
}

/* ==========================================================================
   SECUENCIA NUMERADA
   Los números van por CSS: no se pueden desordenar al reordenar containers.
   ========================================================================== */

.bk-steps{counter-reset:bk-s;border-top:1px solid var(--bk-line)}
.bk-step{counter-increment:bk-s;border-bottom:1px solid var(--bk-line)}
.bk-step::before{
  content:counter(bk-s,decimal-leading-zero);
  display:block;margin-bottom:.75rem;
  font-family:var(--bk-f-util);font-size:var(--bk-fs-label);letter-spacing:.2em;
  color:var(--bk-orange);font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   LISTA DE SOPORTE A BARRA
   ========================================================================== */

.bk-kit{list-style:none;margin:0;padding:0;border-top:1px solid var(--bk-line)}
.bk-kit li{
  border-bottom:1px solid var(--bk-line);
  padding:1.15rem 0;
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
}
.bk-kit li::before{
  content:counter(bk-k,decimal-leading-zero);
  counter-increment:bk-k;
  font-family:var(--bk-f-util);font-size:var(--bk-fs-label);letter-spacing:.2em;
  color:var(--bk-orange);font-variant-numeric:tabular-nums;
}
.bk-kit{counter-reset:bk-k}
.bk-kit strong{font-family:var(--bk-f-display);font-weight:600;font-size:1.08rem;display:block}
.bk-kit span{font-size:.92rem;color:var(--bk-grey)}

/* Caja de zonas de reparto */
.bk-zone{border:1px solid var(--bk-line);background:var(--bk-field)}

/* ==========================================================================
   TABLA DE FORMATOS — va en un widget HTML
   ========================================================================== */

.bk-table-wrap{overflow-x:auto;border-top:1px solid var(--bk-line-strong)}
.bk-table{width:100%;border-collapse:collapse;min-width:560px}
.bk-table th,
.bk-table td{
  text-align:left;padding:1.05rem 1rem 1.05rem 0;
  border-bottom:1px solid var(--bk-line);
  font-family:var(--bk-f-util);font-size:.85rem;
  font-variant-numeric:tabular-nums;
}
.bk-table thead th{
  font-size:var(--bk-fs-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bk-grey);font-weight:400;
}
.bk-table tbody th{font-weight:400;color:var(--bk-white)}
.bk-table td{color:var(--bk-grey)}
.bk-table .bk-yes{color:var(--bk-orange);font-size:1rem}

/* Aviso de "no publicamos precios" */
.bk-note{border-left:2px solid var(--bk-orange);padding-left:1rem;color:var(--bk-grey);font-size:.9rem}

/* ==========================================================================
   OPINIONES — BLOQUE CANÓNICO
   Una cita grande centrada + hilera de clientes. Es el ÚNICO tratamiento de
   prueba social del sitio: va igual en la home, en las tres fichas de
   producto y en la fábrica. No crear variantes por página — el cliente
   detecta la incoherencia inmediatamente.

   Medida en rem, NO en ch: con tipografía condensada el ch engaña y el
   bloque sale muchísimo más estrecho de lo esperado.
   ========================================================================== */

.bk-quote{max-width:min(48rem,88vw);margin-inline:auto;text-align:center}
.bk-quote blockquote{
  margin:0;font-family:var(--bk-f-display);font-weight:600;
  font-size:var(--bk-fs-quote);line-height:1.04;
  text-wrap:balance;
}
.bk-quote blockquote span{color:var(--bk-orange)}
.bk-quote cite{
  font-style:normal;font-family:var(--bk-f-util);
  font-size:var(--bk-fs-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bk-grey);
}

/* Hilera de clientes. En producción son logos (SVG en blanco al 70 %);
   mientras no los haya, nombres en la display condensada. */
.bk-logos{
  margin-top:clamp(2.8rem,6vw,4.5rem);
  padding-top:2.2rem;border-top:1px solid var(--bk-line);
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.4rem);
  align-items:center;justify-content:center;
}
.bk-logos img{max-height:34px;width:auto;opacity:.7;filter:grayscale(1) brightness(3)}
.bk-logos span{
  font-family:var(--bk-f-display);font-size:clamp(.95rem,1.6vw,1.3rem);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--bk-grey);opacity:.7;
}

/* ==========================================================================
   FORMULARIO — Elementor Pro Forms
   Aplicar .bk-form al widget de formulario.
   ========================================================================== */

.bk-form .elementor-field-group > label{
  font-family:var(--bk-f-util);font-size:var(--bk-fs-label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--bk-grey);
}

.bk-form .elementor-field-textual{
  font-family:var(--bk-f-util);font-size:.98rem;
  color:var(--bk-white);background:var(--bk-field);
  border:0;border-bottom:1px solid var(--bk-line-strong);
  border-radius:0;padding:.8rem .1rem;
  transition:border-color .28s,background .28s;
}
.bk-form .elementor-field-textual:focus{
  border-bottom-color:var(--bk-orange);
  background:var(--bk-orange-soft);
  box-shadow:none;
}

/* ---- Los <select> van APARTE. No borrar estas tres reglas ----
   El desplegable abierto lo dibuja el sistema operativo, no el CSS: con
   fondo translúcido lo pinta en blanco y las <option>, que heredan el color
   de texto claro, salen blanco sobre blanco. Hace falta fondo opaco y
   <option> pintadas a mano. El tinte de foco también se quita, porque
   reintroduce transparencia: el foco lo marca la línea inferior. */
.bk-form select.elementor-field-textual{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--bk-opt-bg);
}
.bk-form select.elementor-field-textual:focus{
  background:var(--bk-opt-bg);
  border-bottom-color:var(--bk-orange);
}
.bk-form select.elementor-field-textual option{
  background:var(--bk-opt-bg);
  color:var(--bk-white);
}

/* Checkboxes de "Líneas que te interesan" como pastillas */
.bk-form .elementor-field-subgroup{display:flex;flex-wrap:wrap;gap:.55rem}
.bk-form .elementor-field-subgroup .elementor-field-option{position:relative}
.bk-form .elementor-field-subgroup input{position:absolute;opacity:0;width:1px;height:1px}
.bk-form .elementor-field-subgroup label{
  display:block;cursor:pointer;margin:0;
  font-family:var(--bk-f-util);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.7rem 1.2rem;
  border:1px solid var(--bk-line-strong);color:var(--bk-grey);
  transition:border-color .25s,color .25s,background .25s;
}
.bk-form .elementor-field-subgroup input:checked + label{
  border-color:var(--bk-orange);color:var(--bk-orange);background:var(--bk-orange-soft);
}
.bk-form .elementor-field-subgroup input:focus-visible + label{
  outline:2px solid var(--bk-orange);outline-offset:3px;
}

/* Consentimiento */
.bk-form .elementor-field-type-acceptance{font-size:.86rem;color:var(--bk-grey);line-height:1.55}
.bk-form .elementor-field-type-acceptance input{accent-color:var(--bk-orange)}

/* Botón de envío */
.bk-form .elementor-button{
  font-family:var(--bk-f-util);font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;
  background:var(--bk-orange);color:var(--bk-black);
  border:1px solid var(--bk-orange);border-radius:0;
  padding:.95rem 1.85rem;
}
.bk-form .elementor-button:hover{background:#FF9A1B;border-color:#FF9A1B;color:var(--bk-black)}

/* ==========================================================================
   BOTONES GENERALES
   ========================================================================== */

.bk-btn .elementor-button,
a.bk-btn{
  font-family:var(--bk-f-util);font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;
  border-radius:0;padding:.95rem 1.85rem;
  border:1px solid currentColor;
  transition:background .28s,color .28s,border-color .28s;
}
/* Relleno naranja — acción principal */
.bk-btn--fill .elementor-button,
a.bk-btn--fill{background:var(--bk-orange);border-color:var(--bk-orange);color:var(--bk-black)}
.bk-btn--fill .elementor-button:hover,
a.bk-btn--fill:hover{background:#FF9A1B;border-color:#FF9A1B;color:var(--bk-black)}
/* Contorno — acción secundaria */
.bk-btn--ghost .elementor-button,
a.bk-btn--ghost{background:transparent;border-color:var(--bk-line-strong);color:var(--bk-white)}
.bk-btn--ghost .elementor-button:hover,
a.bk-btn--ghost:hover{background:rgba(255,255,255,.07);border-color:var(--bk-white)}

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ==========================================================================
   NOTAS DE MANTENIMIENTO

   1. #E58500 sobre blanco da 2,66:1 — ILEGIBLE y falla accesibilidad.
      Solo se usa sobre negro o como fondo de botón con texto negro.
      Si alguna vez hace falta naranja sobre claro: #A85E00 (4,79:1).

   2. Si Elementor gana por especificidad en algún punto, NO usar !important:
      prefijar con `body.elementor-page` y volver a comprobar.

   3. Las tres tintas de línea son un solo naranja en tres profundidades.
      No añadir colores nuevos: la paleta es de cuatro y punto.

   4. NUNCA poner max-width en un elemento que ya lleva la clase de
      contenedor de página. Gana el último de la hoja y el contenedor entero
      pasa a medir eso y se centra. El síntoma engaña: parece que el titular
      se parte raro, no que el ancho de página esté roto. Los anchos de
      medida se limitan en los HIJOS.

   5. Titulares y citas se miden en rem, nunca en ch. Con la display
      condensada el ch se calcula sobre un carácter muy estrecho y el bloque
      sale casi la mitad de ancho de lo previsto. Pasó tres veces.

   6. Con un número FIJO de tarjetas, fijar las columnas por tramo en lugar
      de usar auto-fit, y comprobar que la rejilla cierra sin huecos en todos
      los tramos. Con gap + background dibujando hairlines, un hueco no se ve
      como espacio vacío: se ve como un bloque de color.

   7. Los <select> nunca llevan fondo translúcido. Ver la sección de
      formulario.
   ========================================================================== */