/* =========================================================
   CAJAS DE CATEGORÍA  ([tetera_category_box])
   ---------------------------------------------------------
   - Las cajas se colocan en columnas de WPBakery. La columna
     que contiene cajas se convierte en flex vertical con una
     altura fija (--tetera-boxes-h) y cada caja se reparte esa
     altura según su clase tetera-box--h-XX (flex-grow).
   - En móvil (<1000px) la altura de cada caja es fija.
   - Para cambiar la altura total en una fila concreta, añade
     una clase a la fila y redefine la variable, p. ej.:
       .boxes-tall { --tetera-boxes-h: calc(680 / 1440 * 100vw); }
   ========================================================= */

:root {
  --neutral: #efebe5;
  --tetera-boxes-h: calc(540 / 1440 * 100vw);
  --tetera-box-gap: calc(14 / 1440 * 100vw);
  --tetera-box-h-mobile: calc(170 / 390 * 100vw);
  --tetera-box-radius: 6px;
  --tetera-box-ease: cubic-bezier(0.625, 0.05, 0, 1);
  --tetera-box-dur: 0.7s;
}

/* Columna contenedora */
.wpb_wrapper:has(> .tetera-box) {
  display: flex;
  flex-direction: column;
  gap: var(--tetera-box-gap);
  height: var(--tetera-boxes-h);
}

/* Caja */
.tetera-box,
.tetera-box *,
.tetera-box *::before,
.tetera-box *::after {
  box-sizing: border-box;
}

.tetera-box {
  --box-bg: var(--neutral);
  --box-fg: var(--accent);
  --box-hover-bg: var(--accent);
  --box-hover-fg: var(--light);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex: 50 1 0;
  min-height: 0;
  margin: 0 !important;
  padding: calc(26 / 1440 * 100vw);
  border-radius: var(--tetera-box-radius);
  background-color: var(--box-bg);
  color: var(--box-fg);
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Alturas (proporción dentro de la columna) */
.tetera-box--h-25 { flex-grow: 25; }
.tetera-box--h-30 { flex-grow: 30; }
.tetera-box--h-35 { flex-grow: 35; }
.tetera-box--h-40 { flex-grow: 40; }
.tetera-box--h-45 { flex-grow: 45; }
.tetera-box--h-50 { flex-grow: 50; }
.tetera-box--h-55 { flex-grow: 55; }
.tetera-box--h-60 { flex-grow: 60; }
.tetera-box--h-65 { flex-grow: 65; }
.tetera-box--h-70 { flex-grow: 70; }
.tetera-box--h-75 { flex-grow: 75; }
.tetera-box--h-100 { flex-grow: 100; }

/* Relleno de hover: círculo que crece desde la esquina de la ilustración */
.tetera-box__fill {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 300%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--box-hover-bg);
  transform: translate(50%, 50%) scale(0);
  transition: transform var(--tetera-box-dur) var(--tetera-box-ease);
  pointer-events: none;
}

.tetera-box__title {
  position: relative;
  display: block;
  max-width: 11ch;
  font-family: var(--secondary-font);
  font-size: var(--fnt-size-medium);
  font-weight: 400;
  line-height: 1.15;
  color: currentColor;
  transition: transform var(--tetera-box-dur) var(--tetera-box-ease);
}

.tetera-box__img {
  position: absolute;
  right: calc(26 / 1440 * 100vw);
  bottom: calc(26 / 1440 * 100vw);
  width: calc(130 / 1440 * 100vw);
  height: calc(130 / 1440 * 100vw);
  max-height: calc(100% - 4.2em);
  object-fit: contain;
  object-position: right bottom;
  transform-origin: 100% 100%;
  transition: transform var(--tetera-box-dur) var(--tetera-box-ease);
  pointer-events: none;
}

.tetera-box__img--tint {
  background-color: currentColor;
  -webkit-mask: var(--box-img) right bottom / contain no-repeat;
  mask: var(--box-img) right bottom / contain no-repeat;
}

.tetera-box,
.tetera-box__img--tint {
  transition:
    color var(--tetera-box-dur) var(--tetera-box-ease),
    background-color var(--tetera-box-dur) var(--tetera-box-ease),
    transform var(--tetera-box-dur) var(--tetera-box-ease);
}

/* Estados */
@media (hover: hover) and (pointer: fine) {
  .tetera-box:hover {
    color: var(--box-hover-fg);
  }
  .tetera-box:hover .tetera-box__fill {
    transform: translate(50%, 50%) scale(1);
  }
  .tetera-box:hover .tetera-box__img {
    transform: scale(1.06) rotate(-3deg);
  }
}

.tetera-box:focus-visible {
  color: var(--box-hover-fg);
  outline: 2px solid var(--box-hover-bg);
  outline-offset: 3px;
}
.tetera-box:focus-visible .tetera-box__fill {
  transform: translate(50%, 50%) scale(1);
}

/* Fondo base */
.tetera-box--bg-accent { --box-bg: var(--accent); --box-fg: var(--light); }
.tetera-box--bg-secondary { --box-bg: var(--secondary); --box-fg: var(--accent); }
.tetera-box--bg-dark { --box-bg: var(--dark); --box-fg: var(--light-dark); }
.tetera-box--bg-light-dark { --box-bg: var(--light-dark); --box-fg: var(--dark); }
.tetera-box--bg-green { --box-bg: var(--green); --box-fg: var(--light); }
.tetera-box--bg-yellow { --box-bg: var(--yellow); --box-fg: var(--accent); }
.tetera-box--bg-dark-light { --box-bg: var(--dark-light); --box-fg: var(--accent); }
.tetera-box--bg-light { --box-bg: var(--light); --box-fg: var(--accent); }
.tetera-box--bg-neutral { --box-bg: var(--neutral); --box-fg: var(--accent); }

/* Fondo en hover (con su color de texto automático) */
.tetera-box--hover-accent { --box-hover-bg: var(--accent); --box-hover-fg: var(--light); }
.tetera-box--hover-secondary { --box-hover-bg: var(--secondary); --box-hover-fg: var(--accent); }
.tetera-box--hover-dark { --box-hover-bg: var(--dark); --box-hover-fg: var(--light-dark); }
.tetera-box--hover-light-dark { --box-hover-bg: var(--light-dark); --box-hover-fg: var(--dark); }
.tetera-box--hover-green { --box-hover-bg: var(--green); --box-hover-fg: var(--light); }
.tetera-box--hover-yellow { --box-hover-bg: var(--yellow); --box-hover-fg: var(--accent); }
.tetera-box--hover-dark-light { --box-hover-bg: var(--dark-light); --box-hover-fg: var(--accent); }
.tetera-box--hover-light { --box-hover-bg: var(--light); --box-hover-fg: var(--accent); }
.tetera-box--hover-neutral { --box-hover-bg: var(--neutral); --box-hover-fg: var(--accent); }

/* Color de texto en hover forzado (va después: gana al automático) */
.tetera-box--hover-text-accent { --box-hover-fg: var(--accent); }
.tetera-box--hover-text-secondary { --box-hover-fg: var(--secondary); }
.tetera-box--hover-text-dark { --box-hover-fg: var(--dark); }
.tetera-box--hover-text-light-dark { --box-hover-fg: var(--light-dark); }
.tetera-box--hover-text-green { --box-hover-fg: var(--green); }
.tetera-box--hover-text-yellow { --box-hover-fg: var(--yellow); }
.tetera-box--hover-text-dark-light { --box-hover-fg: var(--dark-light); }
.tetera-box--hover-text-light { --box-hover-fg: var(--light); }
.tetera-box--hover-text-neutral { --box-hover-fg: var(--neutral); }

/* Móvil: altura fija por caja */
@media (max-width: 999px) {
  :root {
    --tetera-box-gap: calc(10 / 390 * 100vw);
  }

  .wpb_wrapper:has(> .tetera-box) {
    height: auto;
  }

  .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .tetera-box) {
    margin-bottom: var(--tetera-box-gap) !important;
  }

  .tetera-box {
    flex: none;
    height: var(--tetera-box-h-mobile);
    padding: calc(20 / 390 * 100vw);
  }

  .tetera-box__img {
    right: calc(20 / 390 * 100vw);
    bottom: calc(20 / 390 * 100vw);
    width: calc(110 / 390 * 100vw);
    height: calc(110 / 390 * 100vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tetera-box,
  .tetera-box *,
  .tetera-box__fill {
    transition-duration: 0.01s !important;
  }
}