/* =========================================================
   TANIK · Hoja de estilos principal
   Estructura: backgrounds full-width, contenido en container 1320px
   Proporciones de banners basadas en referencia Jordan Winery
   ========================================================= */

:root {
  /* Paleta TANIK */
  --tk-verde: #4A5439;
  --tk-grafito: #2B2B2B;
  --tk-blanco: #F5F5F3;
  --tk-acento: #C96A3D;
  --tk-bg-suave: #F2F2F3;
  --tk-borde: rgba(43, 43, 43, 0.14);

  /* Escala de grises AA-safe (texto pequeño ≥4.5:1) */
  --tk-texto: #2B2B2B;          /* grafito, 14:1 sobre blanco */
  --tk-texto-medio: #4F4F4F;    /* AA sobre blanco y suave */
  --tk-texto-suave: #5C5C5C;    /* AA sobre blanco */
  --tk-acento-btn: #B85C2E;     /* acento oscurecido para botones (AA con blanco) */

  /* Tipografía */
  --tk-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tk-font-editorial: 'Libre Baskerville', Georgia, "Times New Roman", serif;

  /* ===== ESCALA TIPOGRÁFICA (jerarquía consistente en todo el sitio) ===== */
  /* Display / títulos grandes (hero, banners) — DM Sans */
  --tk-fs-display:    clamp(28px, 3vw, 42px);   /* H1 hero / banner */
  --tk-lh-display:    1.25;
  /* H2 — títulos de sección */
  --tk-fs-h2:         clamp(24px, 2.4vw, 32px);
  --tk-lh-h2:         1.3;
  /* H3 — subtítulos de bloque */
  --tk-fs-h3:         clamp(20px, 2vw, 26px);
  --tk-lh-h3:         1.35;
  /* H4 — títulos pequeños / labels destacados */
  --tk-fs-h4:         18px;
  --tk-lh-h4:         1.4;
  /* Cuerpo de texto — Inter */
  --tk-fs-body:       17px;
  --tk-lh-body:       1.75;
  --tk-fw-body:       400;
  /* Cuerpo pequeño / secundario */
  --tk-fs-small:      14px;
  --tk-lh-small:      1.6;
  /* Caption / etiquetas uppercase */
  --tk-fs-caption:    11px;
  --tk-lh-caption:    1.5;
  --tk-ls-caption:    0.14em;
  /* Editorial (itálica Libre Baskerville) */
  --tk-fs-editorial:  clamp(19px, 2vw, 26px);
  --tk-lh-editorial:  1.55;

  /* Layout — sistema de anchos tipo Jordan */
  --tk-container-max: 1320px;   /* contenido / texto */
  --tk-media-max:     1600px;   /* imágenes grandes: hero, banners, cierres */

  /* Proporciones de banner (referencia Jordan) */
  --tk-hero-ratio: 20 / 9;      /* Hero principal del Home */
  --tk-banner-ratio: 24 / 7;    /* Banners de secciones internas (más anchos) */
}

/* =========================================================
   Reset / base
   ========================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--tk-font-body);
  font-weight: 300;
  color: var(--tk-grafito);
  background: #FFFFFF;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Container a 1320px en pantallas grandes */
@media (min-width: 1400px) {
  .container, .container-xxl { max-width: var(--tk-container-max); }
  /* La Tienda mantiene el ancho amplio (como el Hero). */
  .container.tk-tienda__container { max-width: var(--tk-media-max); }
}

/* =========================================================
   Sistema de anchos tipo Jordan
   - .container (1320px): contenido y texto
   - .tk-media (1600px): imágenes grandes (hero, banners, cierres)
   En pantallas < al max, la imagen ocupa el ancho disponible.
   En QHD, se topa en el max y queda centrada (no se descuadra).
   ========================================================= */
.tk-media {
  width: 100%;
  max-width: var(--tk-media-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}
@media (max-width: 767px) {
  .tk-media { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 400px) {
  .tk-media { padding-left: 20px; padding-right: 20px; }
}

/* =========================================================
   Sección: wrapper full-width para el color de fondo,
   contenido dentro de .container
   ========================================================= */
.tk-section { width: 100%; position: relative; }
.tk-section--blanco { background: #FFFFFF; }
.tk-section--suave  { background: var(--tk-bg-suave); }
.tk-section--verde  { background: var(--tk-verde); color: var(--tk-blanco); }
.tk-section--white { background-color: var(--tk-blanco); }

/* =========================================================
   Botones / CTA
   ========================================================= */
.tk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--tk-acento-btn);
  color: #FFFFFF;
  font-family: var(--tk-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 28px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease;
}
.tk-btn:hover { background: #A34E24; color: #FFFFFF; }
.tk-btn__arrow {
  font-size: 16px; font-weight: 300; line-height: 1;
  transition: transform 0.25s ease;
}
.tk-btn:hover .tk-btn__arrow { transform: translateX(5px); }

.tk-btn--outline {
  background: transparent;
  color: var(--tk-acento-btn);
  border: 1px solid var(--tk-acento-btn);
}
.tk-btn--outline:hover { background: var(--tk-acento-btn); color: #FFFFFF; }

/* =========================================================
   Header
   ========================================================= */
.tk-header {
  width: 100%;
  background: #FFFFFF;
  border-bottom: 1px solid var(--tk-borde);
  position: relative;
  z-index: 100;
}
.tk-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.tk-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding-left: 4px;
}
.tk-logo__img {
  height: 26px;
  width: auto;
  display: block;
}
.tk-nav { display: flex; align-items: center; gap: 32px; }
.tk-nav__links { display: flex; align-items: center; gap: 30px; }
.tk-nav__link {
  font-family: var(--tk-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tk-grafito);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
  padding-bottom: 4px;
}
/* Underline que crece desde el centro hacia los costados */
.tk-nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--tk-acento);
  transition: width 0.3s ease, left 0.3s ease, background 0.2s ease;
}
/* Hover: underline naranja */
.tk-nav__link:hover::after {
  width: 100%;
  left: 0;
  background: var(--tk-acento);
}
/* Activo: underline VERDE fijo */
.tk-nav__link--active::after {
  width: 100%;
  left: 0;
  background: var(--tk-verde);
}
.tk-nav__link:hover { color: var(--tk-acento); }
.tk-nav__link--active { color: var(--tk-grafito); }

.tk-nav__icons { display: flex; gap: 18px; margin-left: 10px; align-items: center; }
.tk-nav__icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tk-grafito); text-decoration: none;
  position: relative;
}
.tk-nav__icon svg { width: 20px; height: 20px; }
.tk-nav__cart-count {
  position: absolute; top: -6px; right: -8px;
  background: var(--tk-acento); color: #fff;
  font-family: var(--tk-font-display); font-size: 9px; font-weight: 600;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.tk-nav__toggle { display: none; background: none; border: none; padding: 4px; cursor: pointer; }
.tk-nav__toggle span { display: block; width: 24px; height: 2px; background: var(--tk-grafito); margin: 5px 0; }

@media (max-width: 991px) {
  .tk-nav__links { display: none; }
  .tk-nav__toggle { display: block; }
}

/* =========================================================
   HERO principal (Home) — proporción Jordan ~20:9
   Fondo blanco (sin banda de color), borde inferior irregular
   ========================================================= */
.tk-hero { padding: 0; background: #FFFFFF; }
.tk-hero__frame {
  position: relative;
  aspect-ratio: var(--tk-hero-ratio);
  max-height: 620px;
  overflow: hidden;
  background: #FFFFFF;
}
.tk-hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
/* Bordes irregulares removidos (pendiente asset de Lía) */
.tk-edge-bottom, .tk-edge-top { display: none; }
.tk-hero__content {
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 38%;
  z-index: 3;
}
.tk-hero__title {
  font-family: var(--tk-font-display);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--tk-grafito);
  margin: 0;
}
.tk-hero__title strong { font-weight: 600; }
.tk-hero__divider { width: 44px; height: 3px; background: var(--tk-verde); margin: 22px 0; }

.tk-hero__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 6%;
  background: linear-gradient(135deg, #F5F5F3 0%, #F5F5F3 38%, #E8E4DC 52%, #C8BFB0 72%, #A89882 100%);
  color: rgba(43, 43, 43, 0.30);
  font-family: var(--tk-font-display);
  font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase;
}

@media (max-width: 767px) {
  .tk-hero__frame { aspect-ratio: 3 / 4; max-height: none; }
  .tk-hero__content { max-width: 82%; left: 7%; }
}

/* =========================================================
   BANNER de secciones internas — proporción ~24:7
   Fondo blanco, borde inferior irregular
   ========================================================= */
.tk-banner { padding: 0; background: #FFFFFF; }
.tk-banner__frame {
  position: relative;
  height: 550px;
  overflow: hidden;
  background: #FFFFFF;
}
.tk-banner__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.tk-banner__content {
  position: absolute;
  left: 6%;
  top: 15%;
  z-index: 3;
  max-width: 45%;
}
.tk-banner__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-display);
  line-height: var(--tk-lh-display);
  font-weight: 400;
  color: var(--tk-grafito);
  margin: 0;
}
.tk-banner__divider { width: 44px; height: 3px; background: var(--tk-verde); margin: 18px 0 0; }
.tk-banner__placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #F5F5F3 0%, #E8E4DC 45%, #C8BFB0 75%, #A89882 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(43, 43, 43, 0.28);
  font-family: var(--tk-font-display);
  font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase;
}
@media (max-width: 767px) {
  .tk-banner__frame { height: 60vh; max-height: 460px; }
  .tk-banner__content { max-width: 80%; top: 12%; }
}

/* =========================================================
   Breadcrumb
   ========================================================= */
.tk-breadcrumb {
  font-family: var(--tk-font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tk-texto-medio);
  padding: 0;
  margin: 0;
}
.tk-breadcrumb a { text-decoration: none; }
.tk-breadcrumb a:hover { color: var(--tk-acento); opacity: 1; }

/* =========================================================
   Título de sección genérico
   ========================================================= */
.tk-page-title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-display);
  line-height: var(--tk-lh-display);
  font-weight: 400;
  color: var(--tk-grafito);
  margin: 12px 0 0;
}
.tk-page-title__divider { width: 44px; height: 3px; background: var(--tk-verde); margin: 20px 0 0; }

/* =========================================================
   Home · Propuesta de valor
   ========================================================= */
.tk-valor { padding: 90px 0; }
.tk-valor__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.tk-valor__image { aspect-ratio: 4 / 3; background: #E8E4DC; overflow: hidden; }
.tk-valor__image img { width: 100%; height: 100%; object-fit: cover; }
.tk-valor__text {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2); font-weight: 500; line-height: var(--tk-lh-h2);
  font-style: normal;
  color: var(--tk-grafito);
  margin: 0;
}
.tk-valor__divider { width: 44px; height: 2px; background: var(--tk-verde); margin: 26px 0 0; }
@media (max-width: 767px) {
  .tk-valor { padding: 56px 0; }
  .tk-valor__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   Home · Vinos disponibles
   ========================================================= */
.tk-vinos { padding: 90px 0; }
.tk-vinos__header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 20px;
}
.tk-vinos__divider { width: 44px; height: 3px; background: var(--tk-verde); margin: 0 0 44px; }
.tk-vinos__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2); line-height: var(--tk-lh-h2);
  font-weight: 500; color: var(--tk-grafito); margin: 0;
}
.tk-vinos__link {
  font-family: var(--tk-font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--tk-grafito); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.tk-vinos__link:hover { color: var(--tk-acento); }
.tk-vinos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.tk-vino-card__image {
  aspect-ratio: 1 / 1; background: #FFFFFF; overflow: hidden; margin-bottom: 18px;
}
.tk-vino-card__image img { width: 100%; height: 100%; object-fit: cover; }
.tk-vino-card__body { text-align: center; }
.tk-vino-card__vina {
  font-family: var(--tk-font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tk-texto-medio); margin-bottom: 5px;
}
.tk-vino-card__name {
  font-family: var(--tk-font-display);
  font-size: 13px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--tk-grafito); margin: 0 0 4px;
}
.tk-vino-card__variety {
  font-family: var(--tk-font-body); font-size: 12px; font-weight: 500;
  color: var(--tk-texto-medio); margin: 10px 0 10px;
  letter-spacing: 0.04em;
}
.tk-vino-card__price {
  font-family: var(--tk-font-display); font-size: 13px; font-weight: 500;
  color: var(--tk-grafito); margin: 0 0 16px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  justify-content: center;
}
/* Precio normal tachado (cuando hay rebaja) */
.tk-vino-card__price del {
  color: var(--tk-texto-medio);
  font-weight: 400;
  opacity: 0.75;
}
.tk-vino-card__price del .woocommerce-Price-amount { font-size: 12px; }
/* Precio rebajado destacado */
.tk-vino-card__price ins {
  text-decoration: none;
  color: var(--tk-grafito);
  font-weight: 600;
}
/* Badge de descuento tipo "16% OFF" */
.tk-vino-card__price .tk-sale-badge {
  display: inline-block;
  background: var(--tk-verde);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}
.tk-vino-card__cta {
  font-family: var(--tk-font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--tk-grafito); text-decoration: none;
  border-top: 1px solid var(--tk-borde);
  padding: 14px 16px 12px; display: block;
  text-align: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tk-vino-card__cta:hover {
  background: var(--tk-acento-btn);
  color: #fff;
  border-color: var(--tk-acento-btn);
}
@media (max-width: 767px) {
  .tk-vinos { padding: 56px 0; }
  .tk-vinos__grid { grid-template-columns: 1fr; gap: 32px; }
  .tk-vinos__header { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* =========================================================
   Home · Productores
   ========================================================= */
.tk-productores { padding: 90px 0; }
.tk-productores__grid {
  display: grid; grid-template-columns: 3fr 2fr; gap: 70px; align-items: center;
}
.tk-productores__image { aspect-ratio: 4 / 3; background: #E8E4DC; overflow: hidden; }
.tk-productores__image img { width: 100%; height: 100%; object-fit: cover; }
.tk-productores__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2); line-height: var(--tk-lh-h2); font-weight: 500;
  color: var(--tk-grafito); margin: 0 0 20px;
}
.tk-productores__divider { width: 44px; height: 2px; background: var(--tk-verde); margin: 0 0 20px; }
.tk-productores__text {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body); line-height: var(--tk-lh-body);
  color: var(--tk-texto-suave); margin: 0 0 30px;
}
@media (max-width: 767px) {
  .tk-productores { padding: 56px 0; }
  .tk-productores__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   Home · CTA Nosotros (reemplazo de las tres cards)
   ========================================================= */
.tk-nosotros-cta { padding: 90px 0; }
.tk-nosotros-cta__grid {
  display: grid; grid-template-columns: 2fr 3fr; gap: 70px; align-items: center;
}
.tk-nosotros-cta__divider { width: 44px; height: 2px; background: var(--tk-verde); margin: 24px 0 30px; }
.tk-nosotros-cta__text {
  font-family: var(--tk-font-editorial);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5;
  color: var(--tk-grafito); margin: 0 0 30px;
}
.tk-nosotros-cta__image { aspect-ratio: 4 / 3; background: #E8E4DC; overflow: hidden; }
.tk-nosotros-cta__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .tk-nosotros-cta { padding: 56px 0; }
  .tk-nosotros-cta__grid { grid-template-columns: 1fr; gap: 32px; }
  .tk-nosotros-cta__image { order: -1; }
}

/* =========================================================
   Home · Cierre (banner ancho con imagen y overlay)
   Fondo blanco, bordes irregulares arriba y abajo
   ========================================================= */
.tk-cierre { padding: 0; background: #FFFFFF; }
.tk-cierre__frame {
  position: relative;
  height: 600px;
  overflow: hidden; background: #FFFFFF;
}
.tk-cierre__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.tk-cierre__content {
  position: absolute; left: 6%; top: 50%; transform: translateY(-50%);
  max-width: 40%; z-index: 5;
}
.tk-cierre__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2); font-weight: 500; line-height: var(--tk-lh-h2);
  color: var(--tk-grafito); margin: 0;
}
.tk-cierre__divider { width: 44px; height: 3px; background: var(--tk-verde); margin: 18px 0 0; }
.tk-cierre__placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #D8CFC2 0%, #C8BFB0 50%, #A89882 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(43,43,43,0.30);
  font-family: var(--tk-font-display); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase;
}
@media (max-width: 767px) {
  /* Texto debajo de la imagen en móvil */
  .tk-cierre__frame { height: auto; overflow: visible; }
  .tk-cierre__image { position: relative; height: 60vh; max-height: 440px; }
  .tk-cierre__content {
    position: static; transform: none;
    max-width: 100%; left: auto; top: auto;
    padding: 28px 24px 8px;
    background: #FFFFFF;
  }
}

/* =========================================================
   Footer
   ========================================================= */
.tk-footer {
  background: var(--tk-blanco);
  padding: 80px 0 32px;
  position: relative;
  background-image: url('../img/vector%20footer.png');
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: initial;
}

.tk-footer-trail{
	position: absolute;
	top: -20px;
	width: 100%;
	height: 56px;
	background-repeat: repeat-x;
	background-size: initial;
	background-image: url('../img/vector-pincel-bordes.svg');
}

.tk-trail-top:before,
.tk-trail-bottom:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 56px;
	background-repeat: repeat-x;
	background-size: initial;
	background-image: url('../img/vector-pincel-bordes.svg');
	z-index: 1;
}

.tk-trail-top:before{
	top: -20px;
}

.tk-trail-bottom:after{
	bottom: -20px;
}

.tk-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px;
  margin-bottom: 50px;
}
.tk-footer__brand { margin-bottom: 22px; }
.tk-footer__brand-img { height: 34px; width: auto; display: block; }
.tk-footer__socials { display: flex; gap: 16px; }
.tk-footer__socials a { color: var(--tk-verde); text-decoration: none; transition: color 0.2s; }
.tk-footer__socials a:hover { color: var(--tk-acento-btn); }
.tk-footer__col-title {
  font-family: var(--tk-font-editorial);
  font-style: normal;
  font-size: 14px; color: var(--tk-grafito);
  margin: 0 0 18px; border-bottom: 1px solid var(--tk-borde); padding-bottom: 10px;
}
.tk-footer__list { list-style: none; padding: 0; margin: 0; }
.tk-footer__list li { margin-bottom: 9px; }
.tk-footer__list a {
  font-family: var(--tk-font-body); font-size: 13px; font-weight: 500;
  color: var(--tk-texto-medio); text-decoration: none; transition: color 0.2s;
}
.tk-footer__list a:hover { color: var(--tk-acento-btn); }
.tk-footer__bottom {
  padding-top: 28px; border-top: 1px solid var(--tk-borde);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--tk-font-body); font-size: 13px;
  color: var(--tk-texto-medio);
}
.tk-footer__credit { line-height: 1.8; font-size: 13px; }
.tk-footer__credit a { color: var(--tk-verde); text-decoration: none; font-weight: 600; }
.tk-footer__credit a:hover { color: var(--tk-acento-btn); text-decoration: underline; }
@media (max-width: 767px) {
  .tk-footer__grid { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .tk-footer__brand-block { grid-column: 1 / -1; margin-bottom: 32px; }
  .tk-footer__brand-img { margin: 0 auto; }
  .tk-footer__socials { justify-content: center; }

  /* Columnas como acordeones */
  .tk-footer__col {
    border-top: 1px solid var(--tk-borde);
    text-align: left;
  }
  .tk-footer__col:last-of-type { border-bottom: 1px solid var(--tk-borde); }
  .tk-footer__col-title {
    text-align: left;
    margin: 0;
    padding: 18px 4px;
    border-bottom: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-style: normal;
    font-family: var(--tk-font-display);
    font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .tk-footer__col-toggle {
    display: inline-flex;
    transition: transform 0.3s ease;
    color: var(--tk-verde);
  }
  .tk-footer__col.is-open .tk-footer__col-toggle { transform: rotate(180deg); }
  .tk-footer__list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 4px;
  }
  .tk-footer__col.is-open .tk-footer__list {
    max-height: 300px;
    padding: 0 4px 18px;
  }
  .tk-footer__list li { margin-bottom: 12px; }

  .tk-footer__bottom { flex-direction: column; gap: 14px; text-align: center; margin-top: 8px; }
  .tk-footer__credit { text-align: center; }
}

/* En desktop las columnas del footer se muestran normal */
@media (min-width: 768px) {
  .tk-footer__col-toggle { display: none; }
}

/* =========================================================
   PÁGINAS INTERNAS
   ========================================================= */

/* --- Bloque de intro de sección (breadcrumb + título) --- */
.tk-intro { padding: 44px 0 0; }
.tk-intro__lead {
  font-family: var(--tk-font-editorial);
  font-style: italic;
  font-size: 16px; line-height: 1.7;
  color: var(--tk-texto-suave);
  margin: 20px 0 0; max-width: 380px;
}

/* =========================================================
   TIENDA · grid con filtros
   ========================================================= */
.tk-tienda { padding: 40px 0 90px; }
/* Solo en Tienda: contenedor más ancho (como el Hero) para ganar espacio.
   Los filtros quedan igual (220px) y las columnas de productos crecen. */
.tk-tienda__container { max-width: var(--tk-media-max); }
.tk-tienda__layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 50px;
  align-items: start;
}

/* Sidebar filtros */
.tk-filtros__title {
  font-family: var(--tk-font-display);
  font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--tk-grafito); margin: 0 0 24px;
  display: flex; align-items: center; gap: 8px;
}
.tk-filtros__group { border-bottom: 1px solid var(--tk-borde); padding: 16px 0; }
.tk-filtros__group-title {
  font-family: var(--tk-font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tk-grafito); margin: 0 0 14px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
}
.tk-filtros__option {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--tk-font-body); font-size: 13px;
  color: var(--tk-texto-suave);
  margin-bottom: 10px; cursor: pointer;
}
.tk-filtros__option input { accent-color: var(--tk-acento); width: 14px; height: 14px; }
.tk-filtros__range { padding: 8px 0; }
.tk-filtros__range input { width: 100%; accent-color: var(--tk-acento); }
.tk-filtros__range-labels {
  display: flex; justify-content: space-between;
  font-family: var(--tk-font-body); font-size: 11px; color: var(--tk-grafito); opacity: 0.6;
  margin-top: 6px;
}
.tk-filtros__clear {
  font-family: var(--tk-font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tk-grafito); opacity: 0.7;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 20px 0 0;
}
.tk-filtros__clear:hover { color: var(--tk-acento); opacity: 1; }

/* Toolbar de resultados */
.tk-tienda__toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 32px;
}
.tk-tienda__count {
  font-family: var(--tk-font-body); font-size: 13px;
  color: var(--tk-grafito); opacity: 0.7;
}
.tk-tienda__sort {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--tk-font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tk-grafito);
}
.tk-tienda__sort select {
  font-family: var(--tk-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--tk-borde); background: #fff;
  padding: 8px 32px 8px 14px; color: var(--tk-grafito);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%232B2B2B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Grid de productos */
.tk-tienda__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* Paginación */
.tk-pagination {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: 60px;
}
.tk-pagination a, .tk-pagination span {
  font-family: var(--tk-font-display); font-size: 13px; font-weight: 500;
  color: var(--tk-grafito); text-decoration: none;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.tk-pagination a:hover { color: var(--tk-acento); }
.tk-pagination .is-active { background: var(--tk-verde); color: #fff; }
.tk-pagination__arrow { font-size: 18px; }

@media (max-width: 991px) {
  .tk-tienda__layout { grid-template-columns: 1fr; gap: 32px; }
  .tk-tienda__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 575px) {
  .tk-tienda__grid { grid-template-columns: 1fr; }
  .tk-tienda__toolbar { flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* =========================================================
   FICHA DE PRODUCTO
   ========================================================= */
.tk-producto { padding: 40px 0 90px; }
.tk-producto__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}
.tk-producto__image {
  background: #F5F5F3; overflow: hidden;
}
.tk-producto__image img { width: 100%; height: auto; display: block; }
.tk-producto__vina {
  font-family: var(--tk-font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tk-texto-medio); margin: 0 0 10px;
}
.tk-producto__name {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2); line-height: var(--tk-lh-h2); font-weight: 400;
  color: var(--tk-grafito); margin: 0 0 8px;
}
.tk-producto__variety {
  font-family: var(--tk-font-display);
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tk-texto-medio); margin: 0 0 8px;
}
.tk-producto__valle {
  font-family: var(--tk-font-display);
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tk-texto-medio); margin: 0;
}
.tk-producto__divider { width: 44px; height: 2px; background: var(--tk-verde); margin: 22px 0; }
.tk-producto__desc {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body); line-height: var(--tk-lh-body);
  color: var(--tk-texto-suave); margin: 0 0 28px;
}
.tk-producto__price {
  font-family: var(--tk-font-display);
  font-size: 24px; font-weight: 500; color: var(--tk-grafito); margin: 0 0 6px;
}
.tk-producto__price span {
  font-family: var(--tk-font-body); font-size: 13px; font-weight: 300;
  color: var(--tk-texto-medio);
}
.tk-producto__buy {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 14px; row-gap: 12px;
  align-items: center;
  margin: 26px 0 14px; padding-top: 26px;
  border-top: 1px solid var(--tk-borde);
}
.tk-producto__buy .stock {
  grid-column: 1; grid-row: 1; margin: 0; white-space: nowrap;
  font-family: var(--tk-font-body); font-size: 16px; color: var(--tk-texto-medio);
}
.tk-qty {
  display: flex; align-items: center; border: 1px solid var(--tk-borde);
}
.tk-qty__btn {
  width: 42px; height: 100%; background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--tk-grafito); display: flex; align-items: center; justify-content: center;
}
.tk-qty__input {
  width: 42px; text-align: center; border: none; border-left: 1px solid var(--tk-borde);
  border-right: 1px solid var(--tk-borde); font-family: var(--tk-font-display); font-size: 14px;
  -moz-appearance: textfield;
}
.tk-qty__input::-webkit-outer-spin-button, .tk-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tk-producto__addcart { flex: 1; justify-content: center; }
.tk-producto__ficha-btn {
  grid-column: 1 / 3; grid-row: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-sizing: border-box; margin: 0; padding: 14px 20px;
}

/* Ficha · precio y botones nativos de WooCommerce con estilo TANIK
   (corrige tamaño del precio y layout cantidad + agregar al carrito) */
.tk-producto__price .woocommerce-Price-amount {
  font-family: var(--tk-font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--tk-grafito);
}
.tk-producto__price del .woocommerce-Price-amount { font-size: 16px; opacity: 0.7; }
.tk-producto__price ins { text-decoration: none; }
.tk-producto__buy form.cart {
  display: contents;
}
.tk-producto__buy .quantity {
  grid-column: 2; grid-row: 1;
  min-height: 52px;
  display: flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--tk-borde);
}
.tk-producto__buy .quantity .qty {
  width: 64px; height: auto; text-align: center;
  border: none; background: transparent;
  font-family: var(--tk-font-display); font-size: 14px;
}
.tk-producto__buy .single_add_to_cart_button {
  grid-column: 3; grid-row: 1; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--tk-acento-btn); color: #FFFFFF;
  font-family: var(--tk-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px 28px; border: none; border-radius: 0; cursor: pointer;
  transition: background 0.25s ease;
}
.tk-producto__buy .single_add_to_cart_button:hover { background: #A34E24; color: #FFFFFF; }

/* Móvil: stock arriba, [cantidad][agregar], ficha a ancho completo */
@media (max-width: 600px) {
  .tk-producto__buy { grid-template-columns: 1fr auto; }
  .tk-producto__buy .stock { grid-column: 1 / -1; grid-row: 1; white-space: normal; }
  .tk-producto__buy .quantity { grid-column: 1; grid-row: 2; }
  .tk-producto__buy .single_add_to_cart_button { grid-column: 2; grid-row: 2; }
  .tk-producto__ficha-btn { grid-column: 1 / -1; grid-row: 3; }
}

/* Maridaje */
.tk-maridaje { padding: 90px 0; }
.tk-maridaje__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.tk-maridaje__image { aspect-ratio: 4 / 3; background: #E8E4DC; overflow: hidden; }
.tk-maridaje__image img { width: 100%; height: 100%; object-fit: cover; }
.tk-maridaje__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2); line-height: var(--tk-lh-h2); font-weight: 500;
  color: var(--tk-grafito); margin: 0 0 16px;
}
.tk-maridaje__divider { width: 44px; height: 2px; background: var(--tk-verde); margin: 0 0 18px; }
.tk-maridaje__intro {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body); line-height: var(--tk-lh-body);
  color: var(--tk-texto-suave); margin: 0 0 18px;
}
.tk-maridaje__list { list-style: none; padding: 0; margin: 0; }
.tk-maridaje__list li {
  font-family: var(--tk-font-body); font-size: 1.1rem; font-weight: 400; line-height: 1.5;
  color: var(--tk-texto); margin-bottom: 10px; padding-left: 18px; position: relative;
}
.tk-maridaje__list li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; background: var(--tk-texto); border-radius: 50%;
}
.tk-maridaje__list strong { font-weight: 600; }

/* Relacionados */
.tk-relacionados { padding: 90px 0; }

@media (max-width: 767px) {
  .tk-producto__grid { grid-template-columns: 1fr; gap: 32px; }
  .tk-maridaje { padding: 56px 0; }
  .tk-maridaje__grid { grid-template-columns: 1fr; gap: 32px; }
  .tk-relacionados { padding: 56px 0; }
}

/* =========================================================
   PRODUCTORES · bloques alternados imagen/texto
   ========================================================= */
.tk-prod-content { padding: 40px 0 90px; }
.tk-prod-block {
  display: grid; gap: 70px; align-items: center;
  margin-bottom: 70px;
}
/* Imagen a la derecha: texto(40%) izq / imagen(60%) der */
.tk-prod-block--img-right { grid-template-columns: 2fr 3fr; }
/* Imagen a la izquierda: imagen(60%) izq / texto(40%) der */
.tk-prod-block--img-left { grid-template-columns: 3fr 2fr; }
.tk-prod-block:last-child { margin-bottom: 0; }
.tk-prod-block__image { aspect-ratio: 4 / 3; background: #E8E4DC; overflow: hidden; }
.tk-prod-block__image img { width: 100%; height: 100%; object-fit: cover; }
.tk-prod-block__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h3); line-height: var(--tk-lh-h3); font-weight: 500;
  color: var(--tk-grafito); margin: 0 0 16px;
}
.tk-prod-block__divider { width: 44px; height: 2px; background: var(--tk-verde); margin: 0 0 18px; }
.tk-prod-block__text {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body); line-height: var(--tk-lh-body);
  color: var(--tk-texto-suave); margin: 0;
}
@media (max-width: 767px) {
  .tk-prod-content { padding: 32px 0 56px; }
  .tk-prod-block,
  .tk-prod-block--img-left,
  .tk-prod-block--img-right { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .tk-prod-block__image { order: -1 !important; }
}

/* =========================================================
   EMPRESA
   ========================================================= */
.tk-empresa-intro { padding: 44px 0 80px; }
.tk-empresa-intro__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-display); font-weight: 400; line-height: var(--tk-lh-display);
  color: var(--tk-grafito); margin: 12px 0 0;
}
.tk-empresa-intro__divider { width: 44px; height: 3px; background: var(--tk-verde); margin: 20px 0; }
.tk-empresa-intro__text {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body); line-height: var(--tk-lh-body);
  color: var(--tk-texto-suave); max-width: 780px; margin: 0 0 30px;
}
.tk-empresa-block {
  display: grid; gap: 70px; align-items: center;
  padding: 80px 0;
}
/* imagen izq (60%) / texto der (40%) */
.tk-empresa-block--img-left { grid-template-columns: 3fr 2fr; }
/* texto izq (40%) / imagen der (60%) */
.tk-empresa-block--img-right { grid-template-columns: 2fr 3fr; }
.tk-empresa-block__image { aspect-ratio: 1 / 1; background: #E8E4DC; overflow: hidden; }
.tk-empresa-block__image img { width: 100%; height: 100%; object-fit: cover; }
.tk-empresa-block__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h3); line-height: var(--tk-lh-h3); font-weight: 500;
  color: var(--tk-grafito); margin: 0 0 18px;
}
.tk-empresa-block__divider { width: 44px; height: 2px; background: var(--tk-verde); margin: 0 0 18px; }
.tk-empresa-block__text {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body); line-height: var(--tk-lh-body);
  color: var(--tk-texto-suave); margin: 0;
}
.tk-empresa-block__list { list-style: none; padding: 0; margin: 0; }
.tk-empresa-block__list li {
  font-family: var(--tk-font-body); font-size: 1.1rem; font-weight: 400; line-height: 1.5;
  color: var(--tk-texto); margin-bottom: 10px; padding-left: 18px; position: relative;
}
.tk-empresa-block__list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; background: var(--tk-texto); border-radius: 50%;
}
@media (max-width: 767px) {
  .tk-empresa-block,
  .tk-empresa-block--img-left,
  .tk-empresa-block--img-right { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .tk-empresa-block__image { order: -1 !important; }
}

/* =========================================================
   NOSOTROS
   ========================================================= */
.tk-nosotros-intro { padding: 44px 0 80px; }
.tk-nosotros-intro__text {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body); line-height: var(--tk-lh-body);
  color: var(--tk-texto-suave); max-width: 820px; margin: 0 0 20px;
}
.tk-pilares { padding: 80px 0; }
.tk-pilares__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2); line-height: var(--tk-lh-h2); font-weight: 500;
  color: var(--tk-grafito); text-align: center; margin: 0 0 12px;
}
.tk-pilares__divider { width: 44px; height: 2px; background: var(--tk-verde); margin: 0 auto 50px; }
.tk-pilares__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.tk-pilar { text-align: center; }
.tk-pilar__icon {
  width: 48px; height: 48px; margin: 0 auto 18px;
  color: var(--tk-verde);
}
.tk-pilar__icon svg { width: 100%; height: 100%; }
.tk-pilar__name {
  font-family: var(--tk-font-display);
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tk-grafito); margin: 0 0 10px;
}
.tk-pilar__text {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small); line-height: var(--tk-lh-small);
  color: var(--tk-texto-suave); margin: 0 0 24px;
}
.tk-pilar__image { aspect-ratio: 3 / 2; background: #E8E4DC; overflow: hidden; }
.tk-pilar__image img { width: 100%; height: 100%; object-fit: cover; }

.tk-quote {
  padding: 0;
  margin-bottom: 80px;
}
.tk-quote__frame {
  position: relative; height: 600px;
  overflow: hidden; background: #E8E4DC;
}
.tk-quote__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.tk-quote__content {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  max-width: 29%; z-index: 3;
}
.tk-quote__text {
  font-family: var(--tk-font-editorial); font-style: italic;
  font-size: clamp(16px, 1.8vw, 22px); line-height: 1.6;
  color: var(--tk-grafito); margin: 0;
}
.tk-quote__text strong { font-weight: 700; font-style: normal; }
/* Estilo normal: H2 igual al cierre del Home (DM Sans) */
.tk-quote__text--titulo {
  font-family: var(--tk-font-display); font-style: normal;
  font-size: var(--tk-fs-h2); font-weight: 500; line-height: var(--tk-lh-h2);
  color: var(--tk-grafito); margin: 0;
}
.tk-quote__text--titulo strong { font-weight: 500; }
.tk-quote__divider { width: 44px; height: 2px; background: var(--tk-verde); margin: 18px 0 0; }
.tk-quote__placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #E8E4DC, #C8BFB0);
  display: flex; align-items: center; justify-content: flex-start; padding-left: 5%;
  color: rgba(43,43,43,.28); font-family: var(--tk-font-display);
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
}
@media (max-width: 767px) {
  .tk-pilares { padding: 48px 0; }
  .tk-pilares__grid { grid-template-columns: 1fr; gap: 40px; }
  .tk-quote__frame { height: auto; overflow: visible; }
  .tk-quote__image { position: relative; height: 60vh; max-height: 440px; }
  .tk-quote__content {
    position: static; transform: none;
    max-width: 100%; right: auto; left: auto; top: auto;
    padding: 28px 24px 8px;
    background: #FFFFFF;
  }
}

/* =========================================================
   CONTACTO
   ========================================================= */
.tk-contacto { padding: 44px 0 90px; }
.tk-contacto__grid {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; align-items: start;
}
.tk-contacto__form-wrap {
  background: var(--tk-bg-suave); padding: 40px;
}
.tk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.tk-form-field { display: flex; flex-direction: column; }
.tk-form-field--full { grid-column: 1 / -1; }
.tk-form-field label {
  font-family: var(--tk-font-display);
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--tk-grafito); margin-bottom: 8px;
}
.tk-form-field input, .tk-form-field textarea {
  font-family: var(--tk-font-body); font-size: 14px;
  border: 1px solid var(--tk-borde); background: #fff;
  padding: 12px 14px; color: var(--tk-grafito);
  transition: border-color 0.2s;
}
.tk-form-field input:focus, .tk-form-field textarea:focus {
  outline: none; border-color: var(--tk-acento);
}
.tk-form-field textarea { resize: vertical; min-height: 110px; }
.tk-form-field input::placeholder, .tk-form-field textarea::placeholder { color: rgba(43,43,43,0.35); }
.tk-contacto__submit { display: flex; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 767px) {
  .tk-contacto__grid { grid-template-columns: 1fr; gap: 32px; }
  .tk-contacto__form-wrap { padding: 28px; }
  .tk-form-row { grid-template-columns: 1fr; gap: 16px; }
}

/* =========================================================
   EFECTOS
   ========================================================= */

/* --- Scroll reveal: aparición al hacer scroll --- */
.tk-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.tk-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Retardo escalonado para grupos */
.tk-reveal--d1 { transition-delay: 0.08s; }
.tk-reveal--d2 { transition-delay: 0.16s; }
.tk-reveal--d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .tk-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Zoom hover en imágenes de contenido (NO header) --- */
.tk-zoom {
  overflow: hidden;
}
.tk-zoom img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tk-zoom:hover img {
  transform: scale(1.06);
}

/* Aplicar zoom a los frames de imagen existentes */
.tk-valor__image,
.tk-vino-card__image,
.tk-productores__image,
.tk-nosotros-cta__image,
.tk-prod-block__image,
.tk-empresa-block__image,
.tk-pilar__image,
.tk-producto__image,
.tk-maridaje__image {
  overflow: hidden;
}
.tk-valor__image img,
.tk-vino-card__image img,
.tk-productores__image img,
.tk-nosotros-cta__image img,
.tk-prod-block__image img,
.tk-empresa-block__image img,
.tk-pilar__image img,
.tk-producto__image img,
.tk-maridaje__image img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tk-valor__image:hover img,
.tk-vino-card__image:hover img,
.tk-productores__image:hover img,
.tk-nosotros-cta__image:hover img,
.tk-prod-block__image:hover img,
.tk-empresa-block__image:hover img,
.tk-pilar__image:hover img,
.tk-producto__image:hover img,
.tk-maridaje__image:hover img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .tk-zoom img, [class*="__image"] img { transition: none; }
  .tk-zoom:hover img, [class*="__image"]:hover img { transform: none; }
}

/* --- Margen inferior en cierres (no pegados al footer) --- */
.tk-cierre { margin-bottom: 80px; }
@media (max-width: 767px) {
  .tk-cierre { margin-bottom: 48px; }
}

/* =========================================================
   HOME · Hero (banner alto, media 1600px)
   Header blanco normal arriba (igual a las internas)
   ========================================================= */
.tk-home-hero { padding: 0; background: #FFFFFF; }
.tk-home-hero__frame {
  position: relative;
  height: 700px;
  overflow: hidden;
  background: #E8E4DC;
}
.tk-home-hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.tk-home-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
}
.tk-home-hero__content {
  max-width: 40%;
  margin-left: 6%;
}
.tk-home-hero__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2);
  line-height: var(--tk-lh-h2);
  font-weight: 400;
  color: var(--tk-grafito);
  margin: 0;
}
.tk-home-hero__title span { font-weight: 600; }
.tk-home-hero__divider { width: 44px; height: 3px; background: var(--tk-verde); margin: 22px 0; }

/* Efecto fade-in del hero home al cargar */
@keyframes tkHeroFade {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes tkHeroContentFade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.tk-home-hero__image {
  animation: tkHeroFade 1.2s ease-out both;
}
.tk-home-hero__content {
  animation: tkHeroContentFade 1s ease-out 0.3s both;
}
@media (prefers-reduced-motion: reduce) {
  .tk-home-hero__image, .tk-home-hero__content { animation: none; }
}

@media (max-width: 767px) {
  /* Hero home móvil: imagen arriba (altura fija), texto+botón debajo */
  .tk-home-hero__frame {
    height: auto;
    overflow: visible;
  }
  .tk-home-hero__image {
    position: relative;
    height: 60vh;
    max-height: 480px;
  }
  .tk-home-hero__overlay {
    position: static;
    display: block;
  }
  .tk-home-hero__content {
    max-width: 100%;
    margin-left: 0;
    padding: 28px 4px 8px;
    background: #FFFFFF;
  }
}
/* =========================================================
   CARRITO
   ========================================================= */
.tk-cart { padding: 50px 0 90px; }
.tk-cart__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: start;
}

/* Lista de items */
.tk-cart__items { border-top: 1px solid var(--tk-borde); }
.tk-cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--tk-borde);
  align-items: center;
}
.tk-cart-item__image {
  width: 100px; height: 120px;
  background: var(--tk-bg-suave);
  overflow: hidden;
}
.tk-cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.tk-cart-item__vina {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-caption); font-weight: 600;
  letter-spacing: var(--tk-ls-caption); text-transform: uppercase;
  color: var(--tk-texto-medio); margin: 0 0 6px;
}
.tk-cart-item__name {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h4); font-weight: 500;
  color: var(--tk-grafito); margin: 0 0 4px;
}
.tk-cart-item__variety {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small);
  color: var(--tk-texto-medio); margin: 0 0 12px;
}
.tk-cart-item__price-unit {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small);
  color: var(--tk-texto-medio); margin: 0;
}
.tk-cart-item__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  height: 100%;
  justify-content: space-between;
}
.tk-cart-item__subtotal {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h4); font-weight: 600;
  color: var(--tk-grafito); margin: 0;
}
.tk-cart-item__remove {
  background: none; border: none; cursor: pointer;
  font-family: var(--tk-font-display); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tk-texto-medio); text-decoration: underline;
  padding: 0;
  transition: color 0.2s;
}
.tk-cart-item__remove:hover { color: var(--tk-acento-btn); }

/* Selector de cantidad (reutiliza tk-qty de ficha) */
.tk-cart-item .tk-qty { height: 40px; }

/* Resumen del pedido */
.tk-summary {
  background: var(--tk-bg-suave);
  padding: 32px;
  position: sticky;
  top: 20px;
}
.tk-summary__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h3); font-weight: 500;
  color: var(--tk-grafito); margin: 0 0 24px;
}
.tk-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0;
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body);
  color: var(--tk-texto-medio);
}
.tk-summary__row--total {
  border-top: 1px solid var(--tk-borde);
  margin-top: 12px; padding-top: 20px;
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h3); font-weight: 600;
  color: var(--tk-grafito);
}
.tk-summary__shipping-note {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small);
  color: var(--tk-texto-medio); font-style: italic;
  margin: 4px 0 0;
}
.tk-summary__btn { width: 100%; justify-content: center; margin-top: 24px; }
.tk-summary__continue {
  display: block; text-align: center; margin-top: 16px;
  font-family: var(--tk-font-display); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tk-texto-medio); text-decoration: none;
}
.tk-summary__continue:hover { color: var(--tk-acento-btn); }

/* Carrito vacío */
.tk-cart-empty { text-align: center; padding: 80px 0; }
.tk-cart-empty__icon { color: var(--tk-borde); margin-bottom: 24px; }
.tk-cart-empty__icon svg { width: 64px; height: 64px; }
.tk-cart-empty__text {
  font-family: var(--tk-font-display); font-size: var(--tk-fs-h3);
  color: var(--tk-texto-medio); margin: 0 0 24px;
}

@media (max-width: 991px) {
  .tk-cart__layout { grid-template-columns: 1fr; gap: 40px; }
  .tk-summary { position: static; }
}
@media (max-width: 575px) {
  .tk-cart-item { grid-template-columns: 80px 1fr; gap: 16px; }
  .tk-cart-item__image { width: 80px; height: 96px; }
  .tk-cart-item__right { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}

/* =========================================================
   CHECKOUT (una sola página, tipo Jordan)
   ========================================================= */
.tk-checkout { padding: 50px 0 90px; }
.tk-checkout__layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 70px;
  align-items: start;
}
.tk-checkout__section { margin-bottom: 44px; }
.tk-checkout__section-title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h3); font-weight: 500;
  color: var(--tk-grafito); margin: 0 0 4px;
  display: flex; align-items: center; gap: 12px;
}
.tk-checkout__section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--tk-verde); color: #fff;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.tk-checkout__section-sub {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small);
  color: var(--tk-texto-medio); margin: 0 0 24px; padding-left: 40px;
}

/* Métodos de despacho */
.tk-shipping-options { display: flex; flex-direction: column; gap: 12px; }
.tk-shipping-option {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--tk-borde);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.tk-shipping-option:hover { border-color: var(--tk-verde); }
.tk-shipping-option input { accent-color: var(--tk-verde); width: 18px; height: 18px; }
.tk-shipping-option__info { flex: 1; }
.tk-shipping-option__name {
  font-family: var(--tk-font-display); font-size: var(--tk-fs-body); font-weight: 500;
  color: var(--tk-grafito); margin: 0 0 2px;
}
.tk-shipping-option__desc {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small);
  color: var(--tk-texto-medio); margin: 0;
}
.tk-shipping-option__price {
  font-family: var(--tk-font-display); font-size: var(--tk-fs-body); font-weight: 600;
  color: var(--tk-grafito);
}
.tk-shipping-option__price--calc {
  font-size: var(--tk-fs-small); color: var(--tk-texto-medio); font-weight: 400; font-style: italic;
}

/* Nota Starken */
.tk-shipping-calc-note {
  background: #FBF7F3;
  border-left: 3px solid var(--tk-acento-btn);
  padding: 14px 18px;
  margin-top: 16px;
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small);
  color: var(--tk-texto-medio); line-height: 1.6;
}

/* Métodos de pago */
.tk-payment-options { display: flex; flex-direction: column; gap: 12px; }
.tk-payment-option {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--tk-borde);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.tk-payment-option:hover { border-color: var(--tk-verde); }
.tk-payment-option input { accent-color: var(--tk-verde); width: 18px; height: 18px; }
.tk-payment-option__label {
  font-family: var(--tk-font-display); font-size: var(--tk-fs-body); font-weight: 500;
  color: var(--tk-grafito);
}
.tk-payment-badge {
  margin-left: auto;
  font-family: var(--tk-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tk-verde);
  border: 1px solid var(--tk-verde);
  padding: 4px 10px;
}

/* Resumen del pedido en checkout */
.tk-order-summary {
  background: var(--tk-bg-suave);
  padding: 32px;
  position: sticky; top: 20px;
}
.tk-order-summary__item {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--tk-borde);
}
.tk-order-summary__img {
  width: 56px; height: 68px; background: #fff; overflow: hidden; position: relative;
}
.tk-order-summary__img img { width: 100%; height: 100%; object-fit: cover; }
.tk-order-summary__qty {
  position: absolute; top: -6px; right: -6px;
  background: var(--tk-verde); color: #fff;
  width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--tk-font-display); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.tk-order-summary__name {
  font-family: var(--tk-font-display); font-size: var(--tk-fs-small); font-weight: 500;
  color: var(--tk-grafito); margin: 0;
}
.tk-order-summary__price {
  font-family: var(--tk-font-display); font-size: var(--tk-fs-small); font-weight: 600;
  color: var(--tk-grafito);
}
@media (max-width: 991px) {
  .tk-checkout__layout { grid-template-columns: 1fr; gap: 40px; }
  .tk-order-summary { position: static; order: -1; }
}

/* =========================================================
   MENÚ MÓVIL · Drawer desde la derecha
   ========================================================= */
.tk-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 43, 43, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
}
.tk-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.tk-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: 300px;
  max-width: 85vw;
  background: #FFFFFF;
  z-index: 999;
  transform: translateX(101%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 28px 28px 40px;
  box-shadow: none;
}
.tk-drawer.is-open {
  transform: translateX(0);
  box-shadow: -8px 0 30px rgba(0,0,0,0.12);
}

.tk-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.tk-drawer__logo img { height: 22px; width: auto; display: block; }
.tk-drawer__close {
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tk-grafito);
}
.tk-drawer__close svg { width: 22px; height: 22px; }

.tk-drawer__links { display: flex; flex-direction: column; }
.tk-drawer__link {
  font-family: var(--tk-font-display);
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--tk-grafito);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid var(--tk-borde);
  transition: color 0.2s;
}
.tk-drawer__link:hover { color: var(--tk-acento-btn); }

.tk-drawer__icons {
  display: flex;
  gap: 24px;
  margin-top: auto;
  padding-top: 30px;
}
.tk-drawer__icons a { color: var(--tk-grafito); display: inline-flex; }
.tk-drawer__icons svg { width: 22px; height: 22px; }

body.tk-drawer-active { overflow: hidden; }


/* =========================================================
   PUNTO 6: Imágenes hero/banner/cierre FULLWIDTH en tablet y móvil
   Rompen el padding lateral del .tk-media
   ========================================================= */
@media (max-width: 991px) {
  .tk-media {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* El contenido de texto dentro de media SÍ necesita margen:
     se lo damos a los bloques internos, no a las imágenes */
  .tk-home-hero__content,
  .tk-valor__grid,
  .tk-vinos__header,
  .tk-vinos__grid,
  .tk-productores__grid,
  .tk-nosotros-cta__grid,
  .tk-prod-content .container,
  .tk-cierre__content {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 400px) {
  .tk-home-hero__content,
  .tk-valor__grid,
  .tk-vinos__header,
  .tk-vinos__grid,
  .tk-productores__grid,
  .tk-nosotros-cta__grid,
  .tk-cierre__content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================================================
   TIENDA · Filtros colapsables (acordeón, como el footer)
   ========================================================= */
.tk-filtros__group-title[data-tk-filter-acc] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.tk-filtros__toggle {
  display: inline-flex;
  transition: transform 0.3s ease;
  color: var(--tk-verde);
}
.tk-filtros__group.is-open .tk-filtros__toggle { transform: rotate(180deg); }
.tk-filtros__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.tk-filtros__group.is-open .tk-filtros__body {
  max-height: 400px;
  padding-top: 12px;
}
/* Variedad: lista larga → scroll vertical interno, sin estirar la tienda */
.tk-filtros__group--tk_variedad.is-open .tk-filtros__body {
  max-height: 260px;
  overflow-y: auto;
}


/* Fix overflow horizontal móvil: imágenes fullwidth exactas */
@media (max-width: 991px) {
  .tk-home-hero__image,
  .tk-cierre__image,
  .tk-quote__image,
  .tk-banner__image {
    width: 100%;
    max-width: 100%;
    left: 0;
  }
  .tk-home-hero__frame,
  .tk-cierre__frame,
  .tk-quote__frame,
  .tk-banner__frame {
    max-width: 100%;
    overflow-x: hidden;
  }
}
html, body { max-width: 100%; }


/* El fade del hero no debe causar overflow en móvil */
@media (max-width: 991px) {
  @keyframes tkHeroFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .tk-home-hero__image { animation: tkHeroFade 1.2s ease-out both; }
  /* Contenedor de imagen recorta cualquier desborde */
  .tk-home-hero__image {
    overflow: hidden;
  }
}

/* =========================================================
   TIENDA · Filtros móvil (botón "Filtrar" + panel lateral)
   En desktop: sidebar con acordeones (ya existente)
   En móvil: oculto el sidebar, muestro botón que abre panel
   ========================================================= */
.tk-filtros-toggle {
  display: none;
}
.tk-filtros-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(43,43,43,0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
}
.tk-filtros-panel-overlay.is-open { opacity: 1; visibility: visible; }

@media (max-width: 991px) {
  /* Botón Filtrar visible en móvil/tablet */
  .tk-filtros-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid var(--tk-verde);
    color: var(--tk-verde);
    font-family: var(--tk-font-display);
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .tk-filtros-toggle:hover { background: var(--tk-verde); color: #FFFFFF; }
  .tk-filtros-toggle svg { width: 16px; height: 16px; }

  /* El sidebar se convierte en panel lateral deslizante */
  .tk-filtros.is-panel {
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    width: 320px; max-width: 88vw;
    background: #FFFFFF;
    z-index: 999;
    transform: translateX(-101%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow-y: auto;
    padding: 24px;
    box-shadow: none;
  }
  .tk-filtros.is-panel.is-open {
    transform: translateX(0);
    box-shadow: 8px 0 30px rgba(0,0,0,0.12);
  }
  /* Cabecera del panel con botón cerrar */
  .tk-filtros-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tk-borde);
  }
  .tk-filtros-panel-close {
    background: none; border: none; cursor: pointer;
    color: var(--tk-grafito);
    display: inline-flex;
  }
  .tk-filtros-panel-close svg { width: 22px; height: 22px; }
  /* Botón aplicar filtros abajo del panel */
  .tk-filtros-panel-apply {
    width: 100%; justify-content: center;
    margin-top: 24px;
  }
}
@media (min-width: 992px) {
  /* En desktop no se muestra la cabecera del panel */
  .tk-filtros-panel-head { display: none; }
}

/* =========================================================
   BUSCADOR · Overlay que se abre con efecto
   ========================================================= */
.tk-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.98);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 18vh;
}
.tk-search-overlay.is-open { opacity: 1; visibility: visible; }
.tk-search-overlay__close {
  position: absolute;
  top: 32px; right: 40px;
  background: none; border: none; cursor: pointer;
  color: var(--tk-grafito);
  display: inline-flex;
}
.tk-search-overlay__close svg { width: 28px; height: 28px; }
.tk-search-overlay__inner {
  width: 90%;
  max-width: 680px;
  transform: translateY(20px);
  transition: transform 0.4s ease 0.1s;
}
.tk-search-overlay.is-open .tk-search-overlay__inner { transform: translateY(0); }
.tk-search-overlay__label {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-caption);
  letter-spacing: var(--tk-ls-caption);
  text-transform: uppercase;
  color: var(--tk-texto-medio);
  margin-bottom: 16px;
  display: block;
}
.tk-search-overlay__field {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--tk-verde);
  padding-bottom: 16px;
}
.tk-search-overlay__field svg { width: 26px; height: 26px; color: var(--tk-verde); flex-shrink: 0; }
.tk-search-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--tk-font-display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 400;
  color: var(--tk-grafito);
}
.tk-search-overlay__input::placeholder { color: rgba(43,43,43,0.3); }
.tk-search-overlay__hint {
  margin-top: 20px;
  font-family: var(--tk-font-body);
  font-size: var(--tk-fs-small);
  color: var(--tk-texto-medio);
}
.tk-search-overlay__suggestions {
  margin-top: 40px;
}
.tk-search-overlay__sugg-title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-caption);
  letter-spacing: var(--tk-ls-caption);
  text-transform: uppercase;
  color: var(--tk-texto-medio);
  margin-bottom: 16px;
}
.tk-search-overlay__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tk-search-overlay__tag {
  font-family: var(--tk-font-body);
  font-size: var(--tk-fs-small);
  color: var(--tk-grafito);
  border: 1px solid var(--tk-borde);
  padding: 8px 16px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.tk-search-overlay__tag:hover { border-color: var(--tk-verde); color: var(--tk-verde); }

/* =========================================================
   RESULTADOS DE BÚSQUEDA
   ========================================================= */
.tk-search-results { padding: 40px 0 90px; }
.tk-search-results__header { margin-bottom: 40px; }
.tk-search-results__query {
  font-family: var(--tk-font-body);
  font-size: var(--tk-fs-body);
  color: var(--tk-texto-medio);
  margin: 0;
}
.tk-search-results__query strong { color: var(--tk-grafito); font-weight: 600; }

/* =========================================================
   AUTENTICACIÓN · Login / Registro
   ========================================================= */
.tk-auth { padding: 60px 0 90px; }
.tk-auth__wrap {
  max-width: 460px;
  margin: 0 auto;
}
.tk-auth__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2);
  font-weight: 400;
  color: var(--tk-grafito);
  text-align: center;
  margin: 0 0 8px;
}
.tk-auth__subtitle {
  font-family: var(--tk-font-body);
  font-size: var(--tk-fs-body);
  color: var(--tk-texto-medio);
  text-align: center;
  margin: 0 0 36px;
}
.tk-auth__field { margin-bottom: 20px; }
.tk-auth__field label {
  display: block;
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-small);
  font-weight: 500;
  color: var(--tk-grafito);
  margin-bottom: 8px;
}
.tk-auth__field input {
  width: 100%;
  border: 1px solid var(--tk-borde);
  padding: 14px 16px;
  font-family: var(--tk-font-body);
  font-size: var(--tk-fs-body);
  color: var(--tk-grafito);
  outline: none;
  transition: border-color 0.2s;
}
.tk-auth__field input:focus { border-color: var(--tk-verde); }
.tk-auth__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.tk-auth__checkbox {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small);
  color: var(--tk-texto-medio);
  cursor: pointer;
}
.tk-auth__checkbox input { accent-color: var(--tk-verde); }
.tk-auth__link {
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small);
  color: var(--tk-acento-btn); text-decoration: none;
}
.tk-auth__link:hover { text-decoration: underline; }
.tk-auth__btn { width: 100%; justify-content: center; }
.tk-auth__divider {
  display: flex; align-items: center;
  text-align: center;
  margin: 32px 0;
  color: var(--tk-texto-medio);
  font-family: var(--tk-font-body); font-size: var(--tk-fs-small);
}
.tk-auth__divider::before, .tk-auth__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--tk-borde);
}
.tk-auth__divider span { padding: 0 16px; }
.tk-auth__switch {
  text-align: center;
  margin-top: 28px;
  font-family: var(--tk-font-body); font-size: var(--tk-fs-body);
  color: var(--tk-texto-medio);
}
.tk-auth__switch a { color: var(--tk-acento-btn); text-decoration: none; font-weight: 500; }
.tk-auth__switch a:hover { text-decoration: underline; }

/* =========================================================
   MI CUENTA · Layout WooCommerce (sidebar + contenido)
   ========================================================= */
.tk-account { padding: 50px 0 90px; }
.tk-account__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: start;
}
/* Navegación lateral (WooCommerce my-account nav) */
.tk-account__nav {
  border: 1px solid var(--tk-borde);
}
.tk-account__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-body);
  color: var(--tk-texto-medio);
  text-decoration: none;
  border-bottom: 1px solid var(--tk-borde);
  transition: background 0.2s, color 0.2s;
}
.tk-account__nav-item:last-child { border-bottom: none; }
.tk-account__nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.tk-account__nav-item:hover { background: var(--tk-bg-suave); color: var(--tk-grafito); }
.tk-account__nav-item.is-active {
  background: var(--tk-verde);
  color: #FFFFFF;
  font-weight: 500;
}
/* Contenido */
.tk-account__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2);
  font-weight: 400;
  color: var(--tk-grafito);
  margin: 0 0 8px;
}
.tk-account__divider { width: 44px; height: 3px; background: var(--tk-verde); margin: 0 0 28px; }
.tk-account__intro {
  font-family: var(--tk-font-body);
  font-size: var(--tk-fs-body);
  color: var(--tk-texto-medio);
  line-height: var(--tk-lh-body);
  margin: 0 0 32px;
}
.tk-account__intro strong { color: var(--tk-grafito); font-weight: 600; }

/* Tabla de pedidos */
.tk-orders-table {
  width: 100%;
  border-collapse: collapse;
}
.tk-orders-table th {
  text-align: left;
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-caption);
  letter-spacing: var(--tk-ls-caption);
  text-transform: uppercase;
  color: var(--tk-texto-medio);
  padding: 14px 16px;
  border-bottom: 2px solid var(--tk-borde);
}
.tk-orders-table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--tk-borde);
  font-family: var(--tk-font-body);
  font-size: var(--tk-fs-small);
  color: var(--tk-grafito);
}
.tk-order-status {
  display: inline-block;
  font-family: var(--tk-font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}
.tk-order-status--completed { background: #E6F0E4; color: #2E6B2A; }
.tk-order-status--processing { background: #FBF0E4; color: #A05A1E; }
.tk-order-status--pending { background: #F0F0F0; color: #666; }
.tk-order-action {
  font-family: var(--tk-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tk-acento-btn); text-decoration: none;
}
.tk-order-action:hover { text-decoration: underline; }

/* Tarjetas de dirección */
.tk-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.tk-address-card {
  border: 1px solid var(--tk-borde);
  padding: 28px;
}
.tk-address-card__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h4);
  font-weight: 500;
  color: var(--tk-grafito);
  margin: 0 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.tk-address-card__edit {
  font-family: var(--tk-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tk-acento-btn); text-decoration: none;
}
.tk-address-card__text {
  font-family: var(--tk-font-body);
  font-size: var(--tk-fs-small);
  line-height: 1.7;
  color: var(--tk-texto-medio);
  margin: 0;
}
/* Dashboard cards */
.tk-dash-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.tk-dash-card {
  border: 1px solid var(--tk-borde);
  padding: 24px;
  text-align: center;
}
.tk-dash-card__num {
  font-family: var(--tk-font-display);
  font-size: 32px; font-weight: 600;
  color: var(--tk-verde);
  margin: 0 0 4px;
}
.tk-dash-card__label {
  font-family: var(--tk-font-body);
  font-size: var(--tk-fs-small);
  color: var(--tk-texto-medio);
  margin: 0;
}

@media (max-width: 991px) {
  .tk-account__layout { grid-template-columns: 1fr; gap: 32px; }
  .tk-address-grid { grid-template-columns: 1fr; }
  .tk-dash-cards { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .tk-orders-table thead { display: none; }
  .tk-orders-table, .tk-orders-table tbody, .tk-orders-table tr, .tk-orders-table td { display: block; width: 100%; }
  .tk-orders-table tr {
    border: 1px solid var(--tk-borde);
    margin-bottom: 16px;
    padding: 8px;
  }
  .tk-orders-table td {
    border: none;
    padding: 8px 12px;
    display: flex; justify-content: space-between;
  }
  .tk-orders-table td::before {
    content: attr(data-label);
    font-family: var(--tk-font-display);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--tk-texto-medio);
  }
}

/* =========================================================
   FIXES WORDPRESS · Overrides para ganar a WooCommerce/Bootstrap
   ========================================================= */

/* --- PUNTO 2: Logo del header a tamaño correcto (blindado) --- */
.tk-header .tk-logo__img,
.tk-logo .tk-logo__img,
header .tk-logo img,
.custom-logo {
  height: 40px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain;
}

/* --- PUNTO 1: Footer · logo más chico + línea divisoria + títulos bold --- */
.tk-footer .tk-footer__logo-img,
.tk-footer .tk-footer__brand-img,
.tk-footer__brand-block img {
  height: 34px !important;
  width: auto !important;
  max-width: 150px !important;
  margin-bottom: 18px;
  display: block;
}
/* Línea divisoria entre logo y redes sociales */
.tk-footer__socials {
  padding-top: 18px;
  border-top: 1px solid var(--tk-borde);
  display: flex;
  gap: 18px;
  max-width: 150px;
}
.tk-footer__socials a { color: var(--tk-verde); display: inline-flex; }
.tk-footer__socials a:hover { color: var(--tk-acento-btn); }
/* Títulos del footer en negrita */
.tk-footer__col-title {
  font-weight: 700 !important;
  font-family: var(--tk-font-display);
}

/* --- PUNTO 4: Líneas azules de WooCommerce → verde TANIK --- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
.woocommerce-error,
.woocommerce-store-notice {
  border-top-color: var(--tk-verde) !important;
}
.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--tk-verde) !important;
}
.woocommerce-message,
.woocommerce-info {
  border-top: 3px solid var(--tk-verde) !important;
}
/* Botones de WooCommerce con color TANIK (naranjo = CTA de marca) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--tk-acento-btn) !important;
  color: #fff !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: #A34E24 !important;
}
/* Enlaces DENTRO del contenido de WooCommerce en naranja TANIK
   (acotado: NO afecta header ni footer) */
.woocommerce-MyAccount-content a:not(.button),
.woocommerce-cart-form a:not(.button),
.woocommerce-checkout .woocommerce a:not(.button),
.tk-wc-wrapper .woocommerce-info a,
.tk-wc-wrapper .woocommerce-message a {
  color: var(--tk-acento-btn);
}

/* --- PUNTO 3: Menú lateral de Mi cuenta que no se corte --- */
.tk-account__layout {
  grid-template-columns: 260px 1fr;
  gap: 60px;
}
.tk-account__nav,
.woocommerce-MyAccount-navigation {
  width: 100%;
  min-width: 260px;
}
/* Los ítems del nav muestran el texto completo (ícono + label alineados) */
.tk-account__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}
.tk-account__nav-item svg { flex-shrink: 0; }
/* La lista nativa de WooCommerce (li > a) también estilizada */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation ul li { margin: 0; }
@media (max-width: 991px) {
  .tk-account__layout { grid-template-columns: 1fr; gap: 32px; }
  .tk-account__nav, .woocommerce-MyAccount-navigation { min-width: 0; }
}

/* =========================================================
   FIX v2 · Mi cuenta nav activo blanco (blindado) + estilos WC content
   ========================================================= */
/* Ítem activo: fondo verde, texto e íconos BLANCOS (gana al naranja de WC) */
.tk-account__nav-item.is-active,
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--tk-verde) !important;
  color: #FFFFFF !important;
}
.tk-account__nav-item.is-active svg,
.woocommerce-MyAccount-navigation ul li.is-active a svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
/* Ítems normales del nav: texto grafito, NO naranja */
.tk-account__nav-item {
  color: var(--tk-texto-medio) !important;
}
.tk-account__nav-item:hover {
  background: var(--tk-bg-suave) !important;
  color: var(--tk-grafito) !important;
}
.tk-account__nav-item.is-active:hover {
  background: var(--tk-verde) !important;
  color: #FFFFFF !important;
}
/* El wrapper de mi cuenta vía shortcode no necesita padding extra */
.tk-account--wc { padding: 40px 0 60px; }


/* =========================================================
   CARRITO VACÍO · estilo tarjeta centrada (ref. Geociclos)
   ========================================================= */
.tk-cart-empty {
  max-width: 420px;
  margin: 20px auto 0;
  text-align: center;
  border: 1px solid var(--tk-borde);
  border-radius: 4px;
  padding: 50px 40px;
}
.tk-cart-empty__icon {
  color: #C8C8C4;
  margin-bottom: 20px;
}
.tk-cart-empty__icon svg { width: 60px; height: 60px; }
.tk-cart-empty__text {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h3);
  color: var(--tk-grafito);
  margin: 0 0 8px;
}

/* =========================================================
   LAZY BLOCKS · Variantes de posición de foto (izq/der)
   ========================================================= */
/* Productores/Media+Texto: por defecto foto izq (3fr 2fr).
   Variante foto derecha: invierte a texto izq (40%) / foto der (60%) */
.tk-productores__grid--img-right {
  grid-template-columns: 2fr 3fr;
}
.tk-productores__grid--img-right .tk-productores__image {
  order: 2;
}
/* Valor/Cita: por defecto foto izq. Variante foto derecha */
.tk-valor__grid--img-right .tk-valor__image {
  order: 2;
}
@media (max-width: 767px) {
  /* En móvil, la imagen siempre arriba, sin importar la variante */
  .tk-productores__grid--img-right,
  .tk-valor__grid--img-right {
    grid-template-columns: 1fr;
  }
  .tk-productores__grid--img-right .tk-productores__image,
  .tk-valor__grid--img-right .tk-valor__image {
    order: -1;
  }
}

/* Datos de temperatura y guarda en el maridaje */
.tk-maridaje__datos {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tk-borde);
}
.tk-maridaje__dato {
  font-family: var(--tk-font-body);
  font-size: 14px;
  color: var(--tk-texto-medio);
  margin: 0 0 6px;
}
.tk-maridaje__dato strong {
  color: var(--tk-grafito);
  font-weight: 600;
}

/* =========================================================
   FORMULARIO CONTACT FORM 7 · clases tk-form-card / tk-field
   Estiliza el formulario de contacto CF7 con el look TANIK.
   ========================================================= */
.tk-form-card {
  background: #fff;
  border: 1px solid var(--tk-borde);
  padding: 36px;
}
.tk-form-card .tk-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}
.tk-form-card .tk-field label {
  font-family: var(--tk-font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--tk-grafito);
  margin-bottom: 8px;
}
/* Los inputs de CF7 vienen envueltos en <span class="wpcf7-form-control-wrap"> */
.tk-form-card .tk-field .wpcf7-form-control-wrap {
  display: block;
}
.tk-form-card .tk-field input,
.tk-form-card .tk-field textarea {
  width: 100%;
  font-family: var(--tk-font-body);
  font-size: 14px;
  border: 1px solid var(--tk-borde);
  background: #fff;
  padding: 12px 14px;
  color: var(--tk-grafito);
  transition: border-color 0.2s;
  border-radius: 0;
}
.tk-form-card .tk-field input:focus,
.tk-form-card .tk-field textarea:focus {
  outline: none;
  border-color: var(--tk-acento);
}
.tk-form-card .tk-field textarea {
  resize: vertical;
  min-height: 130px;
}
.tk-form-card .tk-field input::placeholder,
.tk-form-card .tk-field textarea::placeholder {
  color: rgba(43, 43, 43, 0.35);
}
/* Botón enviar (submit de CF7) con estilo tk-btn */
.tk-form-card .text-end {
  text-align: right;
  margin-top: 8px;
}
.tk-form-card input[type="submit"],
.tk-form-card .wpcf7-submit {
  font-family: var(--tk-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tk-acento-btn);
  border: none;
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 0;
}
.tk-form-card input[type="submit"]:hover,
.tk-form-card .wpcf7-submit:hover {
  background: #A34E24;
}
/* Mensajes de validación de CF7 */
.tk-form-card .wpcf7-not-valid-tip {
  font-family: var(--tk-font-body);
  font-size: 12px;
  color: #C0392B;
  margin-top: 4px;
}
.tk-form-card .wpcf7-response-output {
  font-family: var(--tk-font-body);
  font-size: 13px;
  margin: 16px 0 0;
  padding: 12px 16px;
}

/* =========================================================
   FIXES · Carrito / Checkout / Footer (observaciones Hugo/Luis)
   ========================================================= */

/* 5b · Enlaces y RRSS del footer: forzar color de marca aunque WooCommerce
   (en checkout/carrito) intente pintarlos con su color de enlace (naranjo).
   Se sube la especificidad para ganarle a las reglas .woocommerce a. */
.tk-footer .tk-footer__socials a { color: var(--tk-verde); }
.tk-footer .tk-footer__socials a:hover { color: var(--tk-acento-btn); }
.tk-footer .tk-footer__list a { color: var(--tk-texto-medio); }
.tk-footer .tk-footer__list a:hover { color: var(--tk-acento-btn); }
.tk-footer .tk-footer__credit a { color: var(--tk-verde); }
.tk-footer .tk-footer__credit a:hover { color: var(--tk-acento-btn); }

/* 6 · Sub-ítems del menú del footer (ej. categorías bajo "Categorías") */
.tk-footer__list .sub-menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--tk-borde);
}
.tk-footer__list .sub-menu li { margin-bottom: 8px; }
.tk-footer__list .sub-menu a {
  font-family: var(--tk-font-body);
  font-size: 13px;
  color: var(--tk-texto-medio);
  text-decoration: none;
  transition: color 0.2s;
}
.tk-footer__list .sub-menu a:hover { color: var(--tk-acento-btn); }
.tk-footer__list .menu-item-has-children > a { font-weight: 500; color: var(--tk-grafito); }

/* (El footer en carrito/checkout ahora es full width de forma natural,
   porque esas páginas se cargan como plantilla completa — ver functions.php.) */

/* Rango de precio · inputs min/max */
.tk-filtros__price { display: flex; align-items: center; gap: 8px; }
.tk-filtros__price-input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--tk-borde); background: #fff;
  font-family: var(--tk-font-body); font-size: 13px; color: var(--tk-grafito);
  -moz-appearance: textfield;
}
.tk-filtros__price-input::-webkit-outer-spin-button,
.tk-filtros__price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tk-filtros__price-sep { color: var(--tk-texto-medio); }

/* Paginación de WooCommerce con estilo TANIK (página activa en grafito, no verde) */
.woocommerce-pagination { margin-top: 60px; }
.woocommerce-pagination ul.page-numbers {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  list-style: none; margin: 0; padding: 0; border: none;
}
.woocommerce-pagination ul.page-numbers li { margin: 0; border: none; }
.woocommerce-pagination ul.page-numbers li .page-numbers {
  font-family: var(--tk-font-display); font-size: 13px; font-weight: 500;
  color: var(--tk-grafito); text-decoration: none;
  min-width: 34px; height: 34px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 0;
  transition: color 0.2s, background 0.2s;
}
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover { color: var(--tk-acento); background: transparent; }
.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce-pagination ul.page-numbers li .page-numbers.current {
  background: var(--tk-verde); color: #fff;
}

/* =========================================================
   PUNTO 5 · TIPOGRAFÍA UNIFICADA
   Párrafos y listas de contenido: 400 / 1.1rem / 1.70, normal.
   (No afecta chrome: footer, nav, tarjetas, filtros, precios.)
   ========================================================= */
.tk-intro__lead,
.tk-productores__text,
.tk-empresa-intro__text,
.tk-empresa-block__text,
.tk-prod-block__text,
.tk-nosotros-intro__text,
.tk-pilar__text,
.tk-maridaje__intro,
.tk-entry-content p,
.tk-entry-content li {
  font-family: var(--tk-font-body);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.70;
  font-style: normal;            /* normal por defecto; la cursiva se reserva para citas */
  color: var(--tk-texto);
}

/* =========================================================
   PUNTO 3 · CONTENIDO INSERTADO DIRECTAMENTE EN EL EDITOR
   (páginas de solo texto tipo "Términos y condiciones":
   títulos, subtítulos, párrafos y listas del editor Gutenberg)
   ========================================================= */
.tk-entry-content { color: var(--tk-texto); }
.tk-entry-content > *:first-child { margin-top: 0; }
.tk-entry-content h1,
.tk-entry-content h2,
.tk-entry-content h3,
.tk-entry-content h4,
.tk-entry-content h5,
.tk-entry-content h6 {
  font-family: var(--tk-font-display);
  color: var(--tk-grafito);
  font-weight: 600;
  line-height: 1.25;
  margin: 1.8em 0 0.6em;
}
.tk-entry-content h1 { font-size: clamp(28px, 4vw, 40px); }
.tk-entry-content h2 { font-size: clamp(24px, 3vw, 32px); }
.tk-entry-content h3 { font-size: clamp(20px, 2.4vw, 26px); }
.tk-entry-content h4 { font-size: 20px; }
.tk-entry-content h5 { font-size: 17px; }
.tk-entry-content h6 { font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.tk-entry-content p,
.tk-entry-content ul,
.tk-entry-content ol { margin: 0 0 1.2em; }
.tk-entry-content ul,
.tk-entry-content ol { padding-left: 1.4em; }
.tk-entry-content ul { list-style: disc; }
.tk-entry-content ol { list-style: decimal; }
.tk-entry-content li { margin-bottom: 0.5em; }
.tk-entry-content a { color: var(--tk-acento-btn); text-decoration: underline; }
.tk-entry-content a:hover { color: #A34E24; }
.tk-entry-content strong,
.tk-entry-content b { font-weight: 600; color: var(--tk-grafito); }
.tk-entry-content em,
.tk-entry-content i { font-style: italic; }
.tk-entry-content blockquote {
  font-family: var(--tk-font-editorial); font-style: italic;
  font-size: 1.2rem; line-height: 1.6;
  border-left: 3px solid var(--tk-verde);
  margin: 1.5em 0; padding: 0.4em 0 0.4em 1.2em;
  color: var(--tk-grafito);
}
.tk-entry-content img { max-width: 100%; height: auto; }
.tk-entry-content hr { border: none; border-top: 1px solid var(--tk-borde); margin: 2em 0; }

/* =========================================================
   PUNTOS 4 y 5.4 · Modificadores de estilo de texto por bloque
   (el selector Normal/Cursiva de cada Lazy Block)
   Se declaran al final para ganar en la cascada.
   ========================================================= */
.tk-text--cursiva { font-family: var(--tk-font-editorial); font-style: italic; }
.tk-text--normal  { font-family: var(--tk-font-body); font-style: normal; }

/* =========================================================
   PUNTOS 8 y 9 · HOMOLOGACIÓN DE PÁRRAFOS
   Mismo tamaño, grosor, interlineado, color y margen inferior
   en los párrafos de los bloques Y en el contenido insertado
   directamente en Gutenberg (páginas de solo texto).
   Se declara al final para ganar en la cascada.
   ========================================================= */
.tk-intro__lead,
.tk-productores__text,
.tk-empresa-intro__text,
.tk-empresa-block__text,
.tk-prod-block__text,
.tk-nosotros-intro__text,
.tk-pilar__text,
.tk-maridaje__intro,
.tk-entry-content p,
.tk-entry-content li {
  font-family: var(--tk-font-body);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--tk-texto);
}
/* Margen inferior homologado */
.tk-intro__lead,
.tk-productores__text,
.tk-empresa-intro__text,
.tk-empresa-block__text,
.tk-prod-block__text,
.tk-nosotros-intro__text,
.tk-maridaje__intro,
.tk-entry-content p { margin: 0 0 1.1em; }
.tk-entry-content li { margin: 0 0 0.4em; }
.tk-entry-content ul,
.tk-entry-content ol { margin: 0 0 1.1em; }
.tk-entry-content > *:last-child { margin-bottom: 0; }

/* PUNTO 7 · separar el contenido del título en páginas de solo texto */
.tk-page-content .tk-page-title__divider { margin-bottom: 34px; }

/* =========================================================
   PUNTO 7 · ACORDEÓN (Preguntas frecuentes)
   ========================================================= */
.tk-faq { padding: 70px 0; }
.tk-faq__title {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fs-h2); line-height: var(--tk-lh-h2);
  font-weight: 500; color: var(--tk-grafito); margin: 0;
}
.tk-faq__divider { width: 44px; height: 3px; background: var(--tk-verde); margin: 20px 0 40px; }
.tk-faq__list { max-width: 820px; }
.tk-faq__item { border-bottom: 1px solid var(--tk-borde); }
.tk-faq__q {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: none; padding: 22px 40px 22px 0;
  position: relative;
  font-family: var(--tk-font-display); font-size: 1.15rem; font-weight: 500;
  color: var(--tk-grafito); line-height: 1.4;
  transition: color 0.2s;
}
.tk-faq__q:hover { color: var(--tk-acento); }
.tk-faq__q::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234A5439' stroke-width='1.6'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E");
  transition: transform 0.25s;
}
.tk-faq__item.is-open .tk-faq__q::after { transform: rotate(45deg); }
.tk-faq__a {
  overflow: hidden; max-height: 0;
  transition: max-height 0.3s ease;
}
.tk-faq__a-inner { padding: 0 0 24px; }
.tk-faq__a-inner p {
  font-family: var(--tk-font-body); font-weight: 400;
  font-size: 1.1rem; line-height: 1.5; color: var(--tk-texto); margin: 0 0 1em;
}
.tk-faq__a-inner p:last-child { margin-bottom: 0; }

/* =========================================================
   PUNTO 3 · SLIDER DE PRECIO (Tienda)
   ========================================================= */
.tk-filtros__group--price .tk-filtros__body { padding-top: 8px; }
.tk-price { padding: 4px 8px 0; }
.tk-price__slider { position: relative; height: 30px; }
.tk-price__track,
.tk-price__fill { position: absolute; top: 13px; height: 4px; border-radius: 2px; }
.tk-price__track { left: 0; right: 0; background: var(--tk-borde); }
.tk-price__fill { background: var(--tk-verde); left: 0; right: 0; }
.tk-price__range {
  position: absolute; top: 0; left: 0; width: 100%; height: 30px;
  margin: 0; background: transparent; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.tk-price__range::-webkit-slider-runnable-track { background: transparent; border: none; height: 30px; }
.tk-price__range::-moz-range-track { background: transparent; border: none; }
.tk-price__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; margin-top: 7px; border-radius: 50%;
  background: var(--tk-verde); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--tk-borde); cursor: pointer;
}
.tk-price__range::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tk-verde); border: 2px solid #fff; cursor: pointer;
}
.tk-price__values {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--tk-font-body); font-size: 13px; color: var(--tk-texto-medio);
}

/* PUNTO 8 · separar el texto del divisor en Contacto */
.tk-contacto .tk-intro__lead { margin-top: 26px; }

/* PUNTO 9 · ancho del contenido en Mi cuenta */
.woocommerce-account .woocommerce-MyAccount-content { width: 90%; }

/* =========================================================
   FIX · Banner de la Tienda en móvil
   WooCommerce aplica ".woocommerce img { height:auto }", que gana en
   especificidad y rompe el object-fit del banner (deja hueco blanco).
   Se restituye el alto completo solo para el banner.
   ========================================================= */
.woocommerce .tk-banner__image,
.woocommerce-page .tk-banner__image {
  height: 100%;
}

/* =========================================================
   Tienda · título + breadcrumb bajo el hero en móvil
   Escritorio: el título va en el hero (overlay).
   ≤768px: se oculta el overlay y el título aparece abajo,
   junto al breadcrumb, igual que el resto de secciones.
   ========================================================= */
.tk-tienda__mhead { display: none; }
@media (max-width: 768px) {
  .tk-tienda__mhead { display: block; margin-bottom: 6px; }
  .tk-banner__content { display: none; }
}

/* Botón "Finalizar" en la página de gracias */
.tk-thankyou-actions { margin-top: 28px; }

/* =========================================================
   CARRITO LATERAL (SIDE CART) + "Complementa tu compra"
   ========================================================= */
.tk-sidecart-overlay {
  position: fixed; inset: 0; background: rgba(43,43,43,0.45);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1200;
}
.tk-sidecart-overlay.is-open { opacity: 1; visibility: visible; }

.tk-sidecart {
  position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 400px;
  background: #fff; z-index: 1201; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.32s ease;
  box-shadow: -6px 0 30px rgba(43,43,43,0.12);
}
.tk-sidecart.is-open { transform: translateX(0); }

.tk-sidecart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--tk-borde); flex: 0 0 auto;
}
.tk-sidecart__title {
  font-family: var(--tk-font-display); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tk-grafito);
}
.tk-sidecart__close {
  background: transparent; border: none; cursor: pointer; padding: 4px;
  color: var(--tk-grafito); line-height: 0;
}
.tk-sidecart__close svg { width: 22px; height: 22px; }

.tk-sidecart__body { flex: 1 1 auto; overflow-y: auto; padding: 20px 22px 28px; }

/* Ítems del carrito */
.tk-sidecart__items { list-style: none; margin: 0; padding: 0; }
.tk-sidecart__item {
  position: relative;
  display: grid; grid-template-columns: 40% 1fr; gap: 14px; align-items: center;
  padding: 16px 26px 16px 0; border-bottom: 1px solid var(--tk-borde);
}
.tk-sidecart__item-thumb { display: block; }
.tk-sidecart__item-thumb img,
.tk-sidecart ul.woocommerce-mini-cart li img {
  width: 100% !important; height: auto !important; float: none !important; margin: 0 !important;
  object-fit: cover; display: block;
}
.tk-sidecart__item-info { display: flex; flex-direction: column; gap: 4px; }
.tk-sidecart__item-name {
  font-family: var(--tk-font-display); font-size: 0.95rem; font-weight: 500;
  color: var(--tk-grafito); text-decoration: none; line-height: 1.25;
}
.tk-sidecart__item-name:hover { color: var(--tk-acento); }
.tk-sidecart__item-qty { font-family: var(--tk-font-body); font-size: 13px; color: var(--tk-texto-medio); }
.tk-sidecart__remove {
  position: absolute; top: 16px; right: 0; z-index: 2;
  font-size: 18px; line-height: 1; color: var(--tk-texto-medio);
  text-decoration: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.2s, color 0.2s;
}
.tk-sidecart__remove:hover { background: var(--tk-bg-suave); color: var(--tk-acento); }

/* Subtotal + acciones */
.tk-sidecart__subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 18px 0 4px; font-family: var(--tk-font-display);
}
.tk-sidecart__subtotal-label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tk-texto-medio); }
.tk-sidecart__subtotal-amount { font-size: 1.25rem; font-weight: 600; color: var(--tk-grafito); }
.tk-sidecart__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
.tk-sidecart__viewcart-btn { justify-content: center; }
.tk-sidecart__empty { font-family: var(--tk-font-body); color: var(--tk-texto-medio); text-align: center; padding: 30px 0; }

/* "Complementa tu compra" */
.tk-sidecart__related { margin-top: 26px; }
.tk-sidecart__rel-title {
  font-family: var(--tk-font-display); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tk-verde);
  border-top: 1px solid var(--tk-borde); padding-top: 20px; margin: 0 0 14px;
}
.tk-sidecart__rel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.tk-sidecart__rel-item { display: grid; grid-template-columns: 40% 1fr; gap: 12px; align-items: center; }
.tk-sidecart__rel-thumb { display: block; }
.tk-sidecart__rel-thumb img { width: 100%; height: auto; object-fit: cover; display: block; }
.tk-sidecart__rel-info { display: flex; flex-direction: column; gap: 2px; }
.tk-sidecart__rel-vina {
  font-family: var(--tk-font-display); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tk-texto-medio);
}
.tk-sidecart__rel-name {
  font-family: var(--tk-font-display); font-size: 0.9rem; font-weight: 500;
  color: var(--tk-grafito); text-decoration: none; line-height: 1.2;
}
.tk-sidecart__rel-name:hover { color: var(--tk-acento); }
.tk-sidecart__rel-price { font-family: var(--tk-font-body); font-size: 13px; color: var(--tk-grafito); }
.tk-sidecart__rel-price del { color: var(--tk-texto-medio); font-weight: 400; margin-right: 4px; }
.tk-sidecart__rel-add {
  margin-top: 4px; align-self: flex-start; cursor: pointer;
  font-family: var(--tk-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tk-acento-btn); background: transparent;
  border: 1px solid var(--tk-acento-btn); padding: 6px 14px; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.tk-sidecart__rel-add:hover { background: var(--tk-acento-btn); color: #fff; }
.tk-sidecart__rel-add.loading { opacity: 0.6; pointer-events: none; }
.tk-sidecart__rel-add.added { background: var(--tk-verde); border-color: var(--tk-verde); color: #fff; }

@media (max-width: 480px) {
  .tk-sidecart { max-width: 100%; }
}

/* =========================================================
   AVISO "Estás a $X de envío gratis"
   ========================================================= */
.tk-freeship-notice { margin: 0 0 18px; }
.tk-freeship-notice:empty { display: none; }
.tk-freeship-notice__text {
  font-family: var(--tk-font-body); font-size: 0.9rem; color: var(--tk-texto);
  margin: 0 0 8px; text-align: center; line-height: 1.4;
}
.tk-freeship-notice__text strong { color: var(--tk-acento); }
.tk-freeship-notice__text--done { color: var(--tk-verde); font-weight: 600; }
.tk-freeship-notice__bar {
  height: 6px; border-radius: 3px; background: var(--tk-borde); overflow: hidden;
}
.tk-freeship-notice__bar span {
  display: block; height: 100%; background: var(--tk-verde);
  border-radius: 3px; transition: width 0.4s ease;
}
/* En carrito y checkout, un poco más de aire */
.tk-wc-notices .tk-freeship-notice,
.woocommerce-checkout .tk-freeship-notice { max-width: 520px; margin: 0 auto 22px; }

/* =========================================================
   VALIDACIÓN DE EDAD (18+)
   ========================================================= */
body.tk-agegate-active { overflow: hidden; }
.tk-agegate {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(43,43,43,0.92); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity 0.3s ease;
}
.tk-agegate.is-open { display: flex; opacity: 1; }
.tk-agegate__box {
  background: #fff; max-width: 460px; width: 100%; padding: 42px 34px;
  text-align: center; border-top: 4px solid var(--tk-verde);
}
.tk-agegate__logo { display: inline-block; margin-bottom: 18px; }
.tk-agegate__logo svg, .tk-agegate__logo img { max-height: 34px; width: auto; }
.tk-agegate__title {
  font-family: var(--tk-font-display); font-size: clamp(20px, 3vw, 26px);
  font-weight: 500; color: var(--tk-grafito); margin: 0 0 12px; line-height: 1.2;
}
.tk-agegate__text {
  font-family: var(--tk-font-body); font-size: 0.95rem; line-height: 1.5;
  color: var(--tk-texto-medio); margin: 0 0 26px;
}
.tk-agegate__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.tk-agegate__yes { justify-content: center; }
.tk-agegate__no {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--tk-font-display); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tk-texto-medio); padding: 6px;
  transition: color 0.2s;
}
.tk-agegate__no:hover { color: var(--tk-grafito); }
.tk-agegate__deny p {
  font-family: var(--tk-font-body); font-size: 0.95rem; color: var(--tk-acento);
  margin: 0; padding: 10px 0;
}
.tk-agegate__legal {
  font-family: var(--tk-font-body); font-size: 11px; color: var(--tk-texto-suave);
  margin: 22px 0 0; letter-spacing: 0.02em;
}

/* Botón "Realizar el pedido" deshabilitado (fuera de zona de despacho) */
#place_order.tk-disabled,
.tk-btn.tk-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
/* Mensaje cuando no hay despacho para la dirección */
.tk-no-shipping {
  font-family: var(--tk-font-body); font-size: 0.85rem; line-height: 1.4;
  color: var(--tk-acento); margin: 0;
}
/* Flechas nativas del input de cantidad en la ficha: forzar visibilidad */
.tk-producto__buy .quantity .qty::-webkit-inner-spin-button,
.tk-producto__buy .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button !important; opacity: 1; height: 32px;
}