/* =========================================================
   MI CUENTA · BUSCADOR · 404  (/mi-cuenta/, /buscar/?q=…, /404.html)
   Solo reglas propias de estas tres páginas (prefijo va-). Se enlaza después de jicalab.css y reutiliza
   sus tokens y componentes: cat-hero, section-head, card, pack, ptile/need, search-page, pills, ph-note,
   af-book, facts, band, link-arrow, link-inline.
   Los campos siguen el modelo de /contacto/: borde visible, 16 px de letra y foco en el propio borde
   (border-color + box-shadow inset, sin un segundo anillo).
   ========================================================= */

/* ---------- Cabeceras ---------- */
.va-hero .cat-hero__head { padding-bottom: clamp(36px, 4.4vw, 60px); }
.va-hero--search .cat-hero__head { padding-bottom: clamp(20px, 2.4vw, 32px); }
.va-hero__side { display: grid; gap: 22px; justify-items: start; }
.va-hero__side .lead { margin: 0; text-wrap: pretty; } /* evita una palabra sola en la última línea */
/* 404: el titular es una frase (texto real de la 404 actual), algo más contenido que el de categoría */
.va-title-404 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.02; max-width: 15ch; hyphens: manual; }
@media (max-width: 760px) { .va-title-404 { font-size: min(42px, 10vw); max-width: none; } }

/* ---------- Buscador grande (cabecera de /buscar/ y de la 404) ---------- */
.va-search { display: grid; gap: 12px; padding-bottom: clamp(32px, 4vw, 56px); }
.va-search__label { font: 600 12px/1.3 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: var(--green-soft); }
.va-search__field { position: relative; }
.va-search__ico { position: absolute; left: 26px; top: 50%; width: 24px; height: 24px; margin-top: -12px; color: var(--green-soft); pointer-events: none; }
.va-search__input {
  display: block; width: 100%; height: 76px; padding: 0 176px 0 64px;
  border: 1px solid rgb(255 255 255 / .55); border-radius: var(--pill); background: rgb(0 0 0 / .14);
  color: var(--white); font: 300 clamp(20px, 1.9vw, 26px)/1.2 var(--font); letter-spacing: -.02em;
  -webkit-appearance: none; appearance: none; transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.va-search__input::placeholder { color: rgb(255 255 255 / .74); opacity: 1; }
.va-search__input:hover { border-color: rgb(255 255 255 / .85); }
.va-search__input:focus { outline: none; border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); background: rgb(255 255 255 / .07); }
.va-search__input::-webkit-search-cancel-button, .va-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* el botón va dentro del campo; se posiciona con top/bottom (no con transform, que usa el hover de .btn) */
.va-search__go { position: absolute; top: 10px; right: 10px; bottom: 10px; min-height: 0; padding-inline: 30px; }
.va-search__go .icon { display: none; }

/* Atajos claros sobre la hoja verde: pills de borde blanco */
.va-quick { display: grid; gap: 12px; justify-items: start; }
.va-quick__label { font: 600 12px/1.3 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: var(--green-soft); }
.sheet--deep .va-quick .pill { min-height: 44px; border-color: rgb(255 255 255 / .38); color: var(--white); }
.sheet--deep .va-quick .pill .icon { width: 17px; height: 17px; color: var(--green-soft); transition: color .2s; }
.sheet--deep .va-quick .pill:hover { background: var(--white); border-color: var(--white); color: var(--green-deep); }
.sheet--deep .va-quick .pill:hover .icon { color: var(--green); }
.af-book .va-quick { justify-items: center; margin-top: 10px; }
.af-book .va-quick .pills { justify-content: center; }
@media (max-width: 760px) { .va-quick { width: 100%; } .va-quick .pills--duo { width: 100%; } }
/* «Quizás buscabas»: cada pill en una sola línea («PREGUNTAS FRECUENTES» y «ANÁLISIS FACIAL IA» no caben en media columna
   a 320-414 px). Por encima de 480 px, pills a su ancho que bajan de fila centradas (patrón flex); hasta 480, una columna */
@media (max-width: 760px) {
  .va-quick .pills--duo { display: flex; flex-wrap: wrap; justify-content: center; }
  .va-quick .pills--duo .pill { white-space: nowrap; }
}
@media (max-width: 480px) {
  .va-quick .pills--duo { display: grid; grid-template-columns: 1fr; width: 100%; }
  .va-quick .pills--duo .pill { width: 100%; white-space: nowrap; }
}

/* ---------- Resultados (/buscar/) ---------- */
.va-results.section { padding-top: clamp(44px, 5.4vw, 80px); }
.va-q { overflow-wrap: anywhere; } /* una búsqueda larga sin espacios no desborda */
.va-results .section-head .lead { text-wrap: balance; } /* sin una palabra sola en la última línea */
.va-block + .va-block { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.va-block__head { display: grid; justify-items: center; gap: 8px; text-align: center; margin-bottom: clamp(20px, 2.4vw, 30px); }
.va-block__title { font-size: clamp(24px, 2.4vw, 34px); font-weight: 450; letter-spacing: -.02em; line-height: 1.1; }
.va-block__sub { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 52ch; }

/* Rejilla centrada: filas completas de 4 · 3 · 2 y la última fila, si queda corta, centrada (sin columnas vacías a un lado) */
.va-grid { --cols: 4; --gap: clamp(10px, 1.2vw, 16px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.va-grid > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; height: auto; } /* auto: así la fila las estira y precio y botón quedan alineados */
.va-grid--pages { --cols: 3; }
.va-grid--pages .search-page { min-height: 76px; border: 1px solid transparent; transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.va-grid--pages .search-page:hover { border-color: var(--green-soft); box-shadow: 0 10px 26px rgb(30 34 22 / .07); }
.va-grid--pages .search-page:hover .m-go { color: var(--green); }
.va-grid--pages .search-page:focus-visible { outline: none; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); } /* foco en el propio borde */
@media (max-width: 1100px) { .va-grid { --cols: 3; } .va-grid--pages { --cols: 2; } }
@media (max-width: 760px) {
  .va-grid { --cols: 2; --gap: 8px; }
  .va-grid .card__name { font-size: 16px; }
}
@media (max-width: 560px) { .va-grid--pages { --cols: 1; } }
/* Dos columnas estrechas: «Acné e imperfecciones» baja a dos líneas y descolocaba el nombre respecto a la tarjeta de al lado.
   Todas las etiquetas reservan dos líneas, así nombre, precio y botón quedan a la misma altura en cada fila. */
@media (max-width: 480px) { .va-grid .card__concern { min-height: 2.4em; } }
/* Móviles muy estrechos (tarjetas de ~130 px): la etiqueta «Acné e imperfecciones» no llega al borde de la tarjeta */
@media (max-width: 360px) {
  .va-grid .card__body { padding-inline: 6px; }
  .va-grid .card__concern { font-size: 10px; letter-spacing: .06em; }
}
/* 320 px: «antiimperfecciones» (112 px) no cabía en la descripción (106 px) y salía cortada; a 11,5 px mide 103 */
@media (max-width: 340px) { .va-grid .card__desc { font-size: 11.5px; } }

/* Packs encontrados: 1 o 2 tarjetas al ancho de siempre y centradas (3 ya ocupan la fila en jicalab.css) */
@media (min-width: 1101px) {
  .va-packs[data-n="1"], .va-packs[data-n="2"] { grid-template-columns: repeat(var(--n), calc((100% - 3 * clamp(10px, 1.2vw, 16px)) / 4)); justify-content: center; }
}
@media (max-width: 1100px) { .va-packs[data-n="1"] { justify-content: center; } }

/* Sugerencias: búsquedas populares en pills */
.va-popular { display: grid; justify-items: center; gap: 14px; }
.va-popular__label { font: 600 12px/1.3 var(--font-alt); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.va-popular .pills { justify-content: center; }
.va-popular .pills > li, .va-quick .pills > li { display: flex; }
.va-popular .pill { min-height: 44px; }

/* ---------- Mi cuenta: acceso y registro ---------- */
.va-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); max-width: 1120px; margin-inline: auto; }
.va-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-card); background: var(--cream); border: 1px solid var(--line);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.va-card:hover { border-color: var(--line-strong); box-shadow: 0 14px 34px rgb(30 34 22 / .06); }
.va-card.todo { outline-offset: -1px; }
.va-card .todo-tag { top: auto; bottom: -12px; right: 18px; max-width: calc(100% - 36px); } /* abajo: no tapa el título */
.va-form { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.va-form__head { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center; }
.va-form__ico { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--green-dark); transition: background .25s var(--ease), color .25s var(--ease); }
.va-card:hover .va-form__ico { background: var(--green); color: var(--white); }
.va-form__ico .icon { width: 21px; height: 21px; }
.va-form__title { font-size: clamp(22px, 2vw, 28px); font-weight: 450; letter-spacing: -.02em; line-height: 1.1; }
.va-form__intro { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
/* Las dos tarjetas en paralelo: la entradilla reserva las mismas líneas en ambas, así los campos arrancan a la misma altura */
@media (min-width: 901px) { .va-forms .va-form__intro { min-height: 3em; } }                         /* 2 líneas */
@media (min-width: 901px) and (max-width: 1023px) { .va-forms .va-form__intro { min-height: 4.5em; } } /* 3 líneas */
.va-form__foot { margin-top: auto; }
.va-form__foot .btn { width: 100%; }

.va-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.va-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
/* Etiqueta en bloque: el asterisco va pegado a la última palabra con   (nunca solo en otra línea) */
.va-field > label, .va-legend { display: block; min-height: 22px; font: 600 11.5px/1.5 var(--font-alt); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.va-req { color: var(--green-dark); font-weight: 700; }
.va-opt { display: inline-flex; align-items: center; vertical-align: 1px; margin-left: 4px; min-height: 20px; padding: 0 8px; border-radius: var(--pill); background: var(--white); border: 1px solid var(--line-strong); font: 600 10px/1 var(--font-alt); letter-spacing: .08em; color: var(--muted); }
.va-input { width: 100%; min-height: 54px; padding: 13px 18px; border: 1px solid var(--soft); border-radius: 16px; background: var(--white); font: 400 16px/1.4 var(--font); color: var(--ink);
  -webkit-appearance: none; appearance: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.va-input::placeholder { color: var(--muted); opacity: 1; }
.va-input:hover { border-color: var(--muted); }
.va-input:focus { outline: none; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.va-input[aria-invalid="true"] { border-color: var(--sale); box-shadow: inset 0 0 0 1px var(--sale); }
.va-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px var(--sale); }
.va-help { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.va-error { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; line-height: 1.4; color: var(--sale); }
.va-error[hidden] { display: none; }
.va-error .icon { width: 16px; height: 16px; margin-top: 1px; }

/* Contraseña con botón de mostrar/ocultar dentro del campo */
.va-pass { position: relative; }
.va-pass .va-input { padding-right: 60px; }
.va-pass__toggle { position: absolute; right: 5px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); transition: color .2s, background .2s; }
.va-pass__toggle:hover { color: var(--green-dark); background: var(--green-tint); }
.va-pass__toggle:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 12px; }
.va-pass__toggle .icon { width: 20px; height: 20px; }
.va-pass__toggle .va-eye-off, .va-pass__toggle[aria-pressed="true"] .va-eye { display: none; }
.va-pass__toggle[aria-pressed="true"] .va-eye-off { display: block; }

/* Recordarme + contraseña olvidada en la misma fila; casillas con toda la línea pulsable */
.va-form__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 18px; }
.va-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 10px; font-size: 15px; line-height: 1.5; color: var(--text); cursor: pointer; }
.va-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--green); cursor: pointer; }
.va-check input:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-radius: 4px; } /* en el propio borde de la casilla, como en /checkout/ */
.va-check input[aria-invalid="true"] { outline: 2px solid var(--sale); outline-offset: 2px; border-radius: 4px; }
.va-consent { display: grid; gap: 2px; }
.va-forgot { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.va-forgot:focus-visible, .va-card .link-inline:focus-visible { outline-offset: 0; border-radius: 4px; } /* sin hueco ni esquinas de 10 px alrededor del texto */
.va-legal { padding: 14px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted); }
.va-legal b { color: var(--ink); font-weight: 600; }

/* ---------- Mi cuenta: vista de ejemplo del panel ---------- */
.va-panel-head .ph-note { justify-self: center; text-wrap: balance; } /* en móvil, dos líneas parejas */
.va-acc { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); align-items: start; max-width: 1120px; margin-inline: auto; }
.va-acc__nav { position: sticky; top: calc(var(--header-h) + 2 * var(--gutter) + 12px); display: grid; gap: 4px; padding: 10px; border-radius: var(--r-card); background: var(--white); }
.va-tabs { display: grid; gap: 4px; }
.va-tab, .va-logout {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 8px 14px 8px 8px;
  border-radius: 16px; text-align: left; font: 600 12px/1.25 var(--font-alt); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.va-tab:hover, .va-logout:hover { background: var(--card); }
.va-tab[aria-selected="true"] { background: var(--green-tint); color: var(--green-deep); }
.va-tab:focus-visible, .va-logout:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 16px; }
.va-tab__ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--green-dark); transition: background .2s var(--ease), color .2s var(--ease); }
.va-tab__ico .icon { width: 18px; height: 18px; }
.va-tab[aria-selected="true"] .va-tab__ico { background: var(--green); color: var(--white); }
.va-tab .m-go, .va-logout .m-go { width: 14px; height: 14px; color: var(--muted); }
.va-logout { position: relative; margin-top: 6px; color: var(--muted); }
.va-logout::before { content: ''; position: absolute; left: 8px; right: 8px; top: -5px; border-top: 1px solid var(--line); }
.va-logout .va-tab__ico { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.va-logout:hover { color: var(--ink); }

.va-acc__main { min-width: 0; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-card); background: var(--white); }
.va-pane[hidden] { display: none; }
.va-pane:focus { outline: none; } /* el foco llega con las flechas de las pestañas; el anillo lo lleva la pestaña */
.va-pane__head { display: grid; gap: 6px; padding-bottom: 20px; margin-bottom: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--line); }
.va-pane__title { font-size: clamp(24px, 2.2vw, 30px); font-weight: 450; letter-spacing: -.02em; line-height: 1.1; }
.va-pane__head p { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 60ch; }

.va-empty { display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(30px, 4vw, 56px) 20px; border-radius: var(--r-card); background: var(--cream); }
.va-empty__ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--green-dark); }
.va-empty__ico .icon { width: 26px; height: 26px; }
.va-empty__title { font-size: clamp(20px, 1.8vw, 24px); font-weight: 450; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.va-empty p { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 44ch; }
.va-empty .btn { margin-top: 6px; }

.va-addrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(10px, 1.2vw, 14px); }
.va-addr { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(18px, 2vw, 24px); border-radius: var(--r-card); background: var(--cream); border: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.va-addr:hover { border-color: var(--green-soft); box-shadow: 0 12px 30px rgb(30 34 22 / .07); }
.va-addr__head { display: flex; align-items: center; gap: 12px; }
.va-addr__head .va-tab__ico { flex: none; width: 40px; height: 40px; background: var(--white); } /* flex: none: sin él, el círculo se encogía en óvalo cuando el título baja a dos líneas */
.va-addr h4 { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.va-addr p { font-size: 14.5px; color: var(--muted); }
.va-addr .btn { margin-top: auto; }

.va-fieldset { display: grid; gap: 20px; margin: 4px 0 0; padding: 22px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.va-fieldset .va-legend { padding: 0; float: left; width: 100%; } /* float: la leyenda entra en la rejilla como un hijo más */
/* La leyenda encabeza un grupo de campos: en verde, como los kickers, para no confundirse con las etiquetas de los campos */
.va-fieldset .va-legend { font-size: 12px; letter-spacing: .14em; color: var(--green); }
.va-acc__main .va-form__foot { margin-top: 4px; }
.va-acc__main .va-form__foot .btn { width: auto; min-width: 220px; }

/* ---------- Responsive ---------- */
@media (min-width: 1600px) { .va-forms, .va-acc { max-width: 1240px; } } /* pantallas grandes: algo más de ancho, sin estirar los campos */
@media (max-width: 1100px) {
  .va-acc { grid-template-columns: minmax(0, 1fr); }
  /* columnas a la medida del texto: a 761-900 px «Datos de la cuenta» y «Cerrar sesión» ya no se parten en dos líneas */
  .va-acc__nav { position: static; grid-template-columns: minmax(0, 1fr) auto; }
  .va-tabs { grid-template-columns: repeat(3, auto); }
  .va-tab, .va-logout { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 8px 10px 8px 8px; }
  .va-tab__ico { width: 34px; height: 34px; }
  .va-tab .m-go, .va-logout .m-go { display: none; }
  .va-logout { margin-top: 0; }
  .va-logout::before { left: -3px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 1px solid var(--line); }
}
@media (max-width: 900px) { .va-forms { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }
@media (max-width: 760px) {
  .va-acc__nav { grid-template-columns: minmax(0, 1fr); }
  .va-tabs { grid-template-columns: minmax(0, 1fr); }
  .va-tab, .va-logout { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; min-height: 54px; }
  .va-tab__ico { width: 38px; height: 38px; }
  .va-tab .m-go, .va-logout .m-go { display: block; }
  .va-logout { margin-top: 6px; }
  .va-logout::before { left: 8px; right: 8px; top: -5px; bottom: auto; border-left: 0; border-top: 1px solid var(--line); }
  .va-acc__main .va-form__foot .btn { width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .va-row, .va-addrs { grid-template-columns: minmax(0, 1fr); }
  .va-search__input { height: 60px; padding: 0 64px 0 50px; font-size: 18px; }
  .va-search__ico { left: 19px; width: 20px; height: 20px; margin-top: -10px; }
  .va-search__go { top: 7px; right: 7px; bottom: 7px; width: 46px; padding: 0; }
  .va-search__go .icon { display: block; width: 19px; height: 19px; }
  .va-search__go-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .va-card { padding: 22px 18px; }
  /* la etiqueta de pendiente ocupa dos líneas y montaba sobre «Crear cuenta»: más aire abajo mientras se ve */
  body:not(.hide-todo) .va-card.todo { padding-bottom: 36px; }
}
@media (max-width: 380px) {
  .va-search__input { font-size: 16px; padding-left: 44px; }
  .va-search__ico { left: 16px; }
}
@media (max-width: 340px) { /* a 320 px el texto «¿Qué estás buscando?» se cortaba: menos relleno a los lados, 16 px de letra (sin zoom en iOS) */
  .va-search__input { padding: 0 56px 0 41px; }
  .va-search__ico { left: 14px; }
  .va-search__go { width: 44px; }
}
@media (max-width: 359px) {
  .va-form__head { grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; }
  .va-form__ico { width: 42px; height: 42px; }
  .va-acc__main { padding: 20px 16px; }
}

/* Táctil: el enlace de la primera capa legal (info@jicalab.com, 17 px de alto) y el de la casilla de privacidad (20 px)
   ganan 44 px de área sin mover el texto, como en la newsletter y en /checkout/.
   «Inicio» de la miga de la 404: la misma ampliación que las migas de .cat-hero (jicalab.css), que aquí no aplica
   porque la cabecera es .va-404; queda por encima del arte gracias al z-index de más abajo */
@media (pointer: coarse) {
  .va-legal a, .va-check a { position: relative; }
  .va-legal a::after { content: ''; position: absolute; inset: -14px -4px; }
  .va-check a::after { content: ''; position: absolute; inset: -12px -4px; }
  .va-404 .crumbs a::after { content: ''; position: absolute; inset: -14.5px -6px; }
}
.va-check a { white-space: nowrap; } /* «política de privacidad» en una pieza: el área táctil no se parte entre dos líneas */

/* ---------- 404: cabecera con el fondo de marca (estilo de las teselas de estudio) ----------
   El foco de luz del fondo queda a la derecha, detrás de un «404» enorme y translúcido y de los productos con su sombra;
   el texto va a la izquierda, sobre el verde. En móvil, la composición arriba y el texto debajo. */
.va-404 { background: #4f6328 url(https://jicalab.com/wp-content/uploads/2026/10/fondo-hero.webp) 4% 42% / 150% auto no-repeat; }
/* Velo verde bajo el texto. Con .2 al 45 % las últimas palabras de la entradilla quedaban a 2,8-3,8:1 (901-1440 px);
   así quedan por encima de 4,5:1 y el foco de luz sigue detrás de los productos */
.va-404::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(43 53 25 / .62) 0%, rgb(43 53 25 / .48) 47%, rgb(43 53 25 / 0) 68%); }
.va-404 > .container { position: relative; }
/* Aire entre la miga y el kicker: el mismo que deja .cat-hero__head en el resto de cabeceras (23-36 px de texto a texto);
   hasta 900 px la imagen va entre la miga y el texto, y allí basta con 4-9 px (ver el bloque de 900) */
.va-404 > .container > .crumbs { padding-bottom: clamp(20px, 2.6vw, 36px); }
.va-404__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 24px clamp(24px, 4vw, 64px); }
.va-404__copy { display: grid; gap: 18px; justify-items: start; padding-bottom: clamp(32px, 4vw, 56px); }
.va-404__copy .lead { margin: 0; max-width: 46ch; text-wrap: pretty; color: rgb(255 255 255 / .9); } /* el .78 general se quedaba corto sobre el foco de luz */
.va-404__copy .va-search { width: 100%; max-width: 560px; padding-bottom: 0; margin-top: 6px; }
.va-404 .crumbs, .va-404 .crumbs a { color: rgb(255 255 255 / .72); }
.va-404 .crumbs [aria-current], .va-404 .crumbs a:hover { color: var(--white); }
.va-404 .crumbs .sep { color: rgb(255 255 255 / .35); }
/* El arte (posicionado y después en el DOM) y el «404» gigante subían por encima de la miga a 320-768 px y se comían
   parte de «Inicio», también con ratón: el enlace va por encima */
.va-404 .crumbs a { position: relative; z-index: 1; }
.va-404__art { position: relative; display: grid; place-items: end center; align-self: stretch; min-height: clamp(320px, 34vw, 500px); }
.va-404__num { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font: 300 clamp(170px, 22vw, 340px)/1 var(--font); letter-spacing: -.05em; color: rgb(255 255 255 / .26); white-space: nowrap; user-select: none; }
.va-404__prod { position: relative; width: min(92%, 520px); height: auto; margin-bottom: clamp(20px, 3vw, 44px); }
/* 901-1000 px: la columna del texto es estrecha y el relleno de 176 px del botón «BUSCAR» cortaba «¿Qué estás buscando?»
   (le faltaban hasta 35 px). El mismo botón de solo icono que se usa a 560 px o menos, redondo a la altura de este campo */
@media (min-width: 901px) and (max-width: 1000px) {
  .va-404 .va-search__input { padding-right: 76px; }
  .va-404 .va-search__go { width: 56px; padding: 0; }
  .va-404 .va-search__go .icon { display: block; width: 20px; height: 20px; }
  .va-404 .va-search__go-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 900px) {
  .va-404 > .container > .crumbs { padding-bottom: clamp(4px, 1vw, 12px); }
  .va-404 { background-position: 50% 0; background-size: auto 140%; }
  /* Aquí el foco de luz ocupa toda la columna central y el texto caía sobre lo más claro (kicker 1,6:1, miga 2,1:1, h1 2,7:1
     y entradilla 3,1:1 a 320 px). Dos velos: uno corto arriba, para la miga, y otro anclado al propio bloque de texto,
     que empieza justo encima del kicker en todos los anchos (con porcentajes, unas veces tapaba los productos y otras no
     llegaba al texto). El arte va después en el DOM y se pinta encima: los productos no se oscurecen */
  .va-404::before { background: linear-gradient(180deg, rgb(43 53 25 / .66) 0, rgb(43 53 25 / .46) 40px, rgb(43 53 25 / .14) 80px, rgb(43 53 25 / 0) 115px); }
  .va-404 .crumbs, .va-404 .crumbs a { color: rgb(255 255 255 / .86); }
  .va-404__copy { position: relative; z-index: 0; }
  .va-404__copy::before {
    content: ''; position: absolute; z-index: -1; top: -110px; bottom: -120px; left: -50vw; right: -50vw; pointer-events: none; /* .sheet lo recorta (overflow: clip) */
    background: linear-gradient(180deg, rgb(43 53 25 / 0) 0, rgb(43 53 25 / .08) 28px, rgb(43 53 25 / .3) 58px, rgb(43 53 25 / .58) 86px, rgb(43 53 25 / .76) 110px, rgb(43 53 25 / .8) 100%);
  }
  .va-404__grid { grid-template-columns: minmax(0, 1fr); }
  .va-404__art { order: -1; min-height: 0; aspect-ratio: 16 / 10; margin-top: 4px; }
  .va-404__prod { width: min(78%, 420px); margin-bottom: 0; }
  .va-404__num { top: 32%; font-size: clamp(130px, 38vw, 240px); }
}
@media (max-width: 760px) { .va-404__art { aspect-ratio: 4 / 3; } }

/* Fila de ámbito (docs/04, buscador-02; estilo común .search-scope en jicalab.css): centrada bajo el titular, como los bloques */
.va-scope { display: flex; justify-content: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.va-scope .search-scope { margin: 0; }