/*
Theme Name: Tenasfalt Tienda
Description: Tema hijo que aplica la marca de tenasfalt.cl a la tienda. Los
  colores y los radios NO se escriben aqui: los genera
  `scripts/generar_tema_tienda.py` desde `web/src/styles/global.css`, que es la
  fuente de verdad del diseno. El CSS de WooCommerce se edita en
  `tienda/plantilla-style.css`, no en este archivo: este se sobrescribe.
Template: twentytwentyfive
Version: 2.0.0
Text Domain: tenasfalt-tienda
*/

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fuentes/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

:root {
  --color-tinta: #141a24;
  --color-tenue: #5b6472;
  --color-azul: #113a97;
  --color-azul-vivo: #204ce5;
  --color-azul-claro: #527eff;
  --color-papel: #ffffff;
  --color-papel-2: #f2f5ff;
  --color-borde: #dde5fb;
  --color-asfalto: #1c2029;
  --color-vial: #ffc400;
  --radius-tarjeta: 12px;
  --radius-caja: 10px;
  --radius-boton: 8px;
  --font-texto: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ==========================================================================
   WooCommerce

   `theme.json` solo puede con la paleta y la tipografía. La composición de la
   tienda —las tarjetas, el precio, la ficha— vive en el marcado clásico de
   WooCommerce, y eso hay que escribirlo aquí.

   Sin esto, la tienda queda en Inter y en azul pero con la maquetación de
   Twenty Twenty-Five: limpia, pero no se parece al sitio. Cambiar un negro por
   otro negro casi idéntico no se nota; lo que hace que tenasfalt.cl se vea
   como se ve son las tarjetas con borde fino, el precio en monoespaciada y el
   ritmo de espacios.

   Esta parte se escribe a mano. Solo las variables de arriba se generan.
   ========================================================================== */

/* ==========================================================================
   Tienda en BLOQUES

   Esta es la que se usa de verdad. WooCommerce sobre un tema de bloques no
   pinta `ul.products li.product`: pinta `ul.wc-block-product-template` con
   `li.wc-block-product` dentro. Las reglas del marcado clásico, más abajo, no
   llegan aquí — por eso una primera versión dejó los botones azules (esos sí
   comparten clase) pero las tarjetas sin marco.
   ========================================================================== */

/*
  Los bloques de WooCommerce traen sus propias clases de alineación y tamaño
  —`has-text-align-center`, `has-medium-font-size`, `align-center`,
  `--aspect-ratio-1-1`— puestas en el marcado por la plantilla del bloque.
  Ganan por especificidad a cualquier regla de tema, así que aquí hace falta
  `!important`. No es pereza: es la única forma de imponerse a una clase que
  el propio bloque escribe en el HTML.
*/
.wc-block-product-template {
  display: grid !important;
  /* `auto-fit`, no `auto-fill`: con tres productos, auto-fill deja columnas
     vacías a la derecha y las tarjetas se quedan encogidas a la izquierda.
     auto-fit colapsa las vacías y reparte el ancho entre las que hay. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important;
  gap: 1.3rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

li.wc-block-product {
  display: flex !important;
  flex-direction: column;
  width: auto !important;
  margin: 0 !important;
  padding: 0 0 1.2rem !important;
  background: var(--color-papel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-tarjeta);
  overflow: hidden;
  text-align: left;
  transition: border-color 0.18s ease;
}
li.wc-block-product:hover {
  border-color: var(--color-azul-vivo);
}

/* La foto, a sangre en la parte de arriba y con recorte fijo: las tres se ven
   parejas aunque los originales tengan proporciones distintas. */
li.wc-block-product .wc-block-components-product-image {
  margin: 0 0 0.9rem;
  border-radius: 0;
}
li.wc-block-product .wc-block-components-product-image a,
li.wc-block-product .wc-block-components-product-image__inner-container {
  display: block;
  border-radius: 0;
}
li.wc-block-product .wc-block-components-product-image img,
li.wc-block-product .wc-block-components-product-image--aspect-ratio-1-1 img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover;
  border-radius: 0 !important;
  background: #edf1fa;
  display: block;
}

li.wc-block-product .wp-block-post-title,
li.wc-block-product h2.wp-block-post-title {
  padding: 0 1.15rem;
  margin: 0 0 0.4rem !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
  text-align: left !important;
}
li.wc-block-product .wp-block-post-title a {
  color: var(--color-tinta);
  text-decoration: none;
}
li.wc-block-product .wp-block-post-title a:hover {
  color: var(--color-azul);
}

/* El precio se ancla al pie con una línea encima: con nombres de distinto
   largo, las tres tarjetas alinean el precio a la misma altura. */
li.wc-block-product .wp-block-woocommerce-product-price {
  margin-top: auto;
  margin-bottom: 0 !important;
}
li.wc-block-product .wc-block-components-product-price {
  display: block;
  padding: 0.85rem 1.15rem 0;
  border-top: 1px solid var(--color-borde);
  font-family: var(--font-mono);
  font-size: 0.92rem !important;
  font-weight: 500;
  color: var(--color-tinta);
  text-align: left !important;
}

li.wc-block-product .wc-block-components-product-button {
  padding: 0.9rem 1.15rem 0;
  text-align: left !important;
  justify-content: flex-start !important;
}
/* `align-center` es una clase que el bloque escribe en el HTML: hay que
   anularla explícitamente o el botón se queda centrado. */
li.wc-block-product .wc-block-components-product-button.align-center {
  text-align: left !important;
  justify-content: flex-start !important;
}
li.wc-block-product .wc-block-components-product-button__button {
  width: auto !important;
  text-align: center !important;
}

/* La cuenta de resultados y el orden, en una sola línea discreta. */
.wc-block-product-results-count,
.wc-block-product-sort-select select {
  font-size: 0.85rem;
  color: var(--color-tenue);
}
.wc-block-product-sort-select select {
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-boton);
  min-height: 40px;
  padding: 0 0.7rem;
  background: var(--color-papel);
}

/* --- Rejilla clásica -------------------------------------------------------
   Se conserva por si alguna plantilla antigua la usa. Misma tarjeta. */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: var(--color-papel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-tarjeta);
  overflow: hidden;
  text-align: left;
  transition: border-color 0.18s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--color-azul-vivo);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: #edf1fa;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0 1.15rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-tinta);
  margin: 0.9rem 0 0.35rem;
}

/* El precio se ancla al pie de la tarjeta: con resúmenes de distinto largo,
   todas alinean su línea de precio a la misma altura. */
.woocommerce ul.products li.product .price {
  margin-top: auto;
  padding: 0.8rem 1.15rem 0;
  border-top: 1px solid var(--color-borde);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-tinta);
}
.woocommerce ul.products li.product .price del {
  color: var(--color-tenue);
  font-weight: 400;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: 0.9rem 1.15rem 1.2rem;
  align-self: flex-start;
}

.woocommerce span.onsale {
  background: var(--color-azul-vivo);
  color: var(--color-papel);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  min-height: 0;
  line-height: 1.6;
  top: 0.7rem;
  left: 0.7rem;
  right: auto;
  margin: 0;
}

/* --- Ficha de producto ---------------------------------------------------- */
.woocommerce div.product .product_title {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.14;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-tinta);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-tenue);
  max-width: 34rem;
}

.woocommerce div.product div.images img {
  border-radius: var(--radius-tarjeta);
  border: 1px solid var(--color-borde);
}

.woocommerce div.product form.cart .variations {
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-caja);
  padding: 0.3rem 0.9rem;
  background: var(--color-papel-2);
}
.woocommerce div.product form.cart .variations label {
  font-weight: 500;
  color: var(--color-tinta);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--color-borde);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-color: var(--color-borde);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 1.4rem 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  content: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 0.8rem 0;
  font-weight: 500;
  color: var(--color-tenue);
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--color-azul);
  border-bottom-color: var(--color-azul-vivo);
}

/* Las tablas, con el mismo aire que las de ensayos del sitio. */
.woocommerce table.shop_attributes,
.woocommerce table.shop_table {
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-caja);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_table th {
  background: var(--color-papel-2);
  color: var(--color-azul);
  font-weight: 500;
  text-align: left;
}
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--color-borde);
  font-style: normal;
}

/* --- Botones --------------------------------------------------------------
   El botón es la pieza que más delata si la tienda es «otro sitio». */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  background: var(--color-azul-vivo);
  color: var(--color-papel);
  border-radius: var(--radius-boton);
  font-family: var(--font-texto);
  font-weight: 500;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  line-height: 1.4;
  border: 0;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
  background: var(--color-azul);
  color: var(--color-papel);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--color-azul-vivo);
  color: var(--color-papel);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-azul);
}

/* --- Los botones que venden, en amarillo vial ----------------------------
   La misma regla que `.boton--vial` en el sitio: amarillo solo para las
   acciones que convierten —añadir al carrito, ir a pagar, pagar—. Los demás
   (aplicar cupón, actualizar carrito) siguen azules: si todo es amarillo,
   nada destaca.

   Texto asfalto sobre amarillo, 11:1. Nunca al revés. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce a.checkout-button,
.woocommerce #place_order,
li.wc-block-product .wc-block-components-product-button__button,
.wc-block-components-product-button__button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-mini-cart-checkout-button-block,
.wc-block-mini-cart__footer-checkout {
  background: var(--color-vial) !important;
  color: var(--color-asfalto) !important;
  border: 1px solid rgb(20 26 36 / 0.12) !important;
  font-weight: 600 !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover,
.wc-block-components-product-button__button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-mini-cart-checkout-button-block:hover,
.wc-block-mini-cart__footer-checkout:hover {
  background: color-mix(in srgb, var(--color-vial) 88%, var(--color-asfalto)) !important;
  color: var(--color-asfalto) !important;
}
.woocommerce button.single_add_to_cart_button:focus-visible,
.wc-block-components-product-button__button:focus-visible,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
  outline: 2px solid var(--color-asfalto);
  outline-offset: 3px;
}

/* --- Precios en cualquier bloque ------------------------------------------ */
.woocommerce .price,
.wc-block-components-product-price,
.wc-block-formatted-money-amount,
.woocommerce-Price-amount {
  font-family: var(--font-mono);
  color: var(--color-tinta);
}

/* --- Formularios ---------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-caja);
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-texto);
}
.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus {
  outline: 3px solid var(--color-azul-vivo);
  outline-offset: 2px;
  border-color: var(--color-azul-vivo);
}

/* --- Avisos --------------------------------------------------------------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
  border-top: 3px solid var(--color-azul-vivo);
  background: var(--color-papel-2);
  border-radius: var(--radius-caja);
  color: var(--color-tinta);
}
.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--color-azul-vivo);
}

/* --- Migas y orden -------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
  font-size: 0.8rem;
  color: var(--color-tenue);
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--color-azul);
}
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count {
  font-size: 0.85rem;
  color: var(--color-tenue);
}

/* --- Cabecera y pie del tema ---------------------------------------------- */
.wp-block-site-title a {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-tinta);
  text-decoration: none;
}
.wp-block-navigation a:hover {
  color: var(--color-azul);
}

/* ==========================================================================
   Ficha de producto en BLOQUES

   El tema de bloques no pinta `.product_title`: pinta `.wp-block-post-title`,
   igual que en cualquier entrada. Sin esto la jerarquía queda al revés —el
   nombre del producto diminuto y el precio enorme—, que es justo lo contrario
   de lo que hace falta para decidir una compra.
   ========================================================================== */

/* Un tramo de discontinua amarilla sobre el título de cada ficha y de cada
   página, como el que llevan los rótulos del sitio (`.rotulo::before`). */
body.single-product .wp-block-post-title::before,
body.page h1.wp-block-post-title::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 4px;
  margin-bottom: 0.9rem;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-vial) 0 1rem,
    transparent 1rem 1.4rem
  );
}

body.single-product .wp-block-post-title {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.035em;
  line-height: 1.14 !important;
  text-align: left !important;
  margin-bottom: 0.6rem;
}

body.single-product .wc-block-components-product-price,
body.single-product p.price,
body.single-product .woocommerce-Price-amount {
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  letter-spacing: 0;
}

/* El titular de la pestaña abierta compite con el nombre del producto. */
body.single-product .woocommerce-Tabs-panel > h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 1rem;
}

/* El botón de la tarjeta, pegado a la izquierda como los enlaces del sitio.
   `align-center` lo centra desde el propio marcado, así que no basta con
   `text-align`: hay que empujarlo con el margen. */
li.wc-block-product .wc-block-components-product-button {
  display: block !important;
}
li.wc-block-product .wc-block-components-product-button__button {
  margin-left: 0 !important;
  margin-right: auto !important;
  display: inline-flex !important;
}

/* ==========================================================================
   Cabecera, cinta y pie

   Esto NO es cuestión de CSS solo: la cabecera y el pie son plantillas de
   bloque, y viven en `parts/header.html` y `parts/footer.html` del tema. Un
   tema hijo de bloques las sustituye por nombre de archivo.

   Sin esto, la tienda hereda la cabecera de Twenty Twenty-Five —con «My Blog»
   y su menú de ejemplo— y por mucho que coincidan los colores parece otro
   sitio: la cabecera es lo primero que se mira.
   ========================================================================== */

.tf-cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-borde);
  margin-block: 0 !important;
}
.tf-cabecera__fila {
  gap: 1.25rem;
  min-height: 62px;
}
.tf-cabecera .tf-logo {
  margin: 0 !important;
}
.tf-cabecera__nav {
  gap: 0.3rem !important;
  align-items: center;
}
/* El carrito va antes que el menu en el HTML porque en movil se queda en la
   barra, al lado de la hamburguesa. En escritorio se manda al final con
   `order`, que es donde la gente lo busca. */
.tf-cabecera__carro {
  order: 3;
  gap: 0 !important;
  margin: 0 !important;
}
.tf-cabecera__cola {
  gap: 0.6rem !important;
  align-items: center;
  margin: 0 !important;
}

/* --- El boton del menu ---------------------------------------------------
   Nace oculto y lo revela `menu.js`. La regla base es `display: none` y no
   solo el atributo `hidden`: si la unica regla fuera esa, al revelarlo el
   boton saldria tambien en pantallas anchas junto al menu ya desplegado, y
   pulsarlo no haria nada visible. Es el mismo error que ya se corrigio en el
   sitio. */
.tf-cabecera__boton {
  display: none;
  order: 4;
  width: 44px;
  height: 44px;
  place-items: center;
  background: none;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-boton);
  cursor: pointer;
  color: var(--color-tinta);
  padding: 0;
}
.tf-cabecera__boton:hover {
  border-color: var(--color-azul-vivo);
}

/* Tres barras que se convierten en aspa al abrir, sin cambiar el marcado. */
.tf-cabecera__barras,
.tf-cabecera__barras::before,
.tf-cabecera__barras::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.16s ease;
}
.tf-cabecera__barras {
  position: relative;
}
.tf-cabecera__barras::before,
.tf-cabecera__barras::after {
  content: "";
  position: absolute;
  left: 0;
}
.tf-cabecera__barras::before {
  top: -6px;
}
.tf-cabecera__barras::after {
  top: 6px;
}
[aria-expanded="true"] .tf-cabecera__barras {
  background: transparent;
}
[aria-expanded="true"] .tf-cabecera__barras::before {
  transform: translateY(6px) rotate(45deg);
}
[aria-expanded="true"] .tf-cabecera__barras::after {
  transform: translateY(-6px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .tf-cabecera__barras,
  .tf-cabecera__barras::before,
  .tf-cabecera__barras::after {
    transition: none;
  }
}

.tf-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tf-enlace {
  margin: 0 !important;
  font-size: 0.88rem !important;
}
/* Dos formas para lo mismo: las entradas sueltas son `<p class="tf-enlace"><a>`
   —asi las serializa el bloque de parrafo— y la que tiene submenu es un
   `<a class="tf-enlace">` directo, porque necesita una lista hermana. Las dos
   tienen que pintarse igual; con solo el primer selector, «Aplicacion» salia
   azul y subrayada. */
.tf-enlace a,
.tf-menu-padre > .tf-enlace {
  display: block;
  color: #454e5c !important;
  text-decoration: none !important;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-boton);
}
.tf-enlace a:hover,
.tf-menu-padre > .tf-enlace:hover {
  color: var(--color-azul) !important;
  background: var(--color-papel-2);
}

/* Marca de calzada bajo la sección actual: el mismo motivo que el fondo del
   sitio, para que la tienda no sea un pegote sino una continuación. */
.tf-enlace--activo a {
  color: var(--color-azul) !important;
  font-weight: 500;
  position: relative;
}
.tf-enlace--activo a::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  /* Amarilla, como la del sitio (`Header.astro`). */
  background: repeating-linear-gradient(
    90deg,
    var(--color-vial) 0 7px,
    transparent 7px 12px
  );
}

.tf-cta {
  margin: 0 !important;
}
.tf-cta a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  /* Gemelo de `.cabecera__cta` del sitio: amarillo vial, texto asfalto. */
  background: var(--color-vial);
  color: var(--color-asfalto) !important;
  border: 1px solid rgb(20 26 36 / 0.12);
  border-radius: var(--radius-boton);
  padding: 0 1.1rem;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}
.tf-cta a:hover {
  background: color-mix(in srgb, var(--color-vial) 88%, var(--color-asfalto));
}

/* La cinta de datos, igual que en el sitio.

   Lo que hace que una marquesina no se vea barata: minúsculas en lugar de
   versales, velocidad lenta, y un desvanecido con `mask-image` en los dos
   bordes para que ninguna palabra se corte a hueso contra el borde de la
   pantalla. El contenido va duplicado para que el bucle no tenga costura, y
   la segunda copia lleva `aria-hidden` o un lector de pantalla lo leería dos
   veces. */
/* Es una calzada: asfalto de fondo y la marca amarilla de la línea central
   separando cada dato. Espejo exacto de `Cinta.astro` en el sitio; si se toca
   uno hay que tocar el otro.

   La máscara va en la VENTANA y no aquí, que es quien pinta el asfalto: fuera,
   el desvanecido se comería también el fondo y la franja acabaría en dos
   puntas difuminadas. Con el fondo blanco de antes no se notaba. Y tampoco
   puede ir en la pista, que se desplaza: viajaría con ella. */
.tf-cinta {
  position: relative;
  background: var(--color-asfalto);
  margin-block: 0 !important;
}

/* Las dos líneas de borde de la calzada. Van sobre `.tf-cinta` y no sobre la
   ventana, así que la máscara de los bordes no las toca: cruzan la franja de
   lado a lado. Metidas 3 px y no pegadas al canto: ese hilo de asfalto que
   queda fuera es la berma, y es lo que la hace carretera y no un borde. */
.tf-cinta::before,
.tf-cinta::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: rgb(255 255 255 / 0.45);
  pointer-events: none;
}
.tf-cinta::before {
  top: 3px;
}
.tf-cinta::after {
  bottom: 3px;
}

.tf-cinta__ventana {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 9%,
    #000 91%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.tf-cinta__pista {
  display: flex;
  width: max-content;
}

.tf-cinta__grupo {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  /* El relleno de la derecha es el mismo hueco que el `gap`, para que en la
     costura entre las dos copias el guion no quede pegado al texto anterior. */
  padding: 0.73rem 1.4rem 0.73rem 0;
  white-space: nowrap;
}

.tf-cinta__grupo li {
  font-size: 0.82rem;
  /* Gris claro y no blanco puro: sobre asfalto el blanco al 100 % vibra, y
     además dejaría al amarillo sin sitio para destacar. */
  color: rgb(255 255 255 / 0.68);
  margin: 0;
}
/* El amarillo se rebaja con `opacity` en vez de cambiar el token: asi
   `--color-vial` sigue siendo el amarillo de linea de verdad y aqui solo se
   baja el volumen. */
.tf-cinta__grupo li strong {
  font-weight: 500;
  color: var(--color-vial);
  opacity: 0.82;
}

/* El separador es un guion de línea central, no un punto. Va en todos los
   elementos, también en el primero, para que la costura mantenga el ritmo. */
.tf-cinta__grupo li::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 1px;
  background: var(--color-vial);
  opacity: 0.7;
  vertical-align: 0.25em;
  margin-right: 1.4rem;
}

/* 48 segundos por vuelta: se nota que se mueve y no distrae al leer. */
@media (prefers-reduced-motion: no-preference) {
  .tf-cinta__pista {
    animation: tf-deslizar 48s linear infinite;
  }
  .tf-cinta:hover .tf-cinta__pista {
    animation-play-state: paused;
  }
}

@keyframes tf-deslizar {
  to {
    transform: translateX(-50%);
  }
}

/* --- Pie ------------------------------------------------------------------ */
/* El pie se apoya en la calzada, como la franja de foto del sitio: una
   discontinua amarilla a todo el ancho sobre su borde superior. */
.tf-pie {
  position: relative;
}
.tf-pie::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-vial) 0 46px,
    transparent 46px 80px
  );
}

.tf-pie {
  border-top: 1px solid var(--color-borde);
  margin-block-start: 4rem !important;
}
.tf-pie__logo {
  margin: 0 0 1rem !important;
}
.tf-pie__titulo {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--color-tinta) !important;
  letter-spacing: 0 !important;
  margin: 0 0 0.75rem !important;
}
.tf-pie__dato,
.tf-pie__lista {
  font-size: 0.85rem !important;
  line-height: 1.9;
  color: var(--color-tenue);
  margin: 0 0 0.8rem !important;
}
.tf-pie__dato a,
.tf-pie__lista a {
  color: var(--color-tenue) !important;
  text-decoration: none !important;
}
.tf-pie__dato a:hover,
.tf-pie__lista a:hover {
  color: var(--color-azul) !important;
  text-decoration: underline !important;
}
/* Fila de enlaces legales, sobre el copyright. Mismo sitio y mismo aspecto que
   en tenasfalt.cl: es de las pocas cosas que el comprador busca a propósito. */
.tf-pie__legales {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  border-top: 1px solid var(--color-borde);
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
  padding-top: 0.7rem;
}
.tf-pie__legales a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-tenue) !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
}
.tf-pie__legales a:hover {
  color: var(--color-azul) !important;
  text-decoration: underline !important;
}

.tf-pie__legal {
  border-top: 1px solid var(--color-borde);
  margin-top: 0.7rem !important;
  padding-top: 1.1rem;
  font-size: 0.8rem !important;
  color: var(--color-tenue);
}
.tf-pie__legal a {
  color: var(--color-azul) !important;
}

/* --- Migas y etiqueta de categoría, como en la ficha del sitio ------------- */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.74rem !important;
  letter-spacing: 0.02em;
}

/* El mismo umbral que el sitio: a 48rem la cinta se veía en uno y no en el
   otro, que es justo la clase de diferencia que delata dos sitios. */
@media (max-width: 40rem) {
  /* En móvil la cinta ocupa una franja que no compensa. */
  .tf-cinta {
    display: none;
  }
}

/* ==========================================================================
   Móvil y tableta: el panel baja bajo la cabecera.

   Esto es el gemelo del bloque de 62rem de `Header.astro`, y el umbral es el
   mismo a propósito. Antes aquí no había menú: la tienda dejaba los siete
   enlaces en una fila y les bajaba la letra a 0.8rem para que cupieran. En un
   teléfono eso son siete destinos táctiles de 12 px pegados unos a otros.

   `absolute` con `top: 100%`, nunca `fixed`: `.tf-cabecera` lleva
   `backdrop-filter`, y eso la convierte en el bloque contenedor de sus
   descendientes `fixed`. El panel se colocaría DENTRO de una cabecera de 76 px
   en vez de contra la ventana. Ya costó caro en el sitio.
   ========================================================================== */
@media (max-width: 62rem) {
  /* Solo aquí aparece el botón, y solo si el script lo ha revelado. */
  .tf-cabecera__boton:not([hidden]) {
    display: grid;
  }
  .tf-cabecera__carro {
    order: 2;
  }

  .tf-cabecera__nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    max-height: 82dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0 !important;
    margin: 0 !important;
    padding: 1rem 1.25rem 2rem;
    background: var(--color-papel);
    border-top: 1px solid var(--color-borde);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tf-cabecera__boton[aria-expanded="false"] + .tf-cabecera__nav {
    display: none;
  }

  /* Cada entrada, una fila de 52 px de alto con su separador. Es lo que hace
     que se pueda pulsar con el pulgar sin apuntar. */
  .tf-enlace {
    width: 100%;
    font-size: 1.02rem !important;
  }
  .tf-enlace a,
  .tf-menu-padre > .tf-enlace {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.6rem 0 !important;
    border-radius: 0;
    border-bottom: 1px solid var(--color-borde);
  }
  .tf-enlace a:hover {
    background: none !important;
  }
  .tf-enlace--activo a::after {
    left: 0;
    right: auto;
    width: 34px;
    bottom: 0.55rem;
  }

  /* Redes y «Cotizar» al pie del panel, el botón arriba de los iconos. */
  .tf-cabecera__cola {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1.4rem !important;
    margin-top: 1.6rem !important;
    width: 100%;
  }
  .tf-cta {
    width: 100%;
  }
  .tf-cta a {
    display: flex;
    justify-content: center;
    min-height: 48px;
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   Contenido de la pestaña Descripción

   La descripción que trae el CSV lleva sus propios `h3` y una tabla de
   propiedades. Sin estas reglas, `theme.json` los pinta con el tamaño de un
   titular de página —más grandes que «Descripción», que es el título de la
   pestaña— y la tabla sale sin marco, con las etiquetas pegadas a los valores.
   ========================================================================== */

body.single-product .woocommerce-Tabs-panel {
  padding-top: 0.5rem;
}

/* Medida de lectura. A todo el ancho, una línea de 1.100 px obliga a buscar
   dónde empieza la siguiente. */
body.single-product .woocommerce-Tabs-panel p,
body.single-product .woocommerce-Tabs-panel ul {
  max-width: 44rem;
  font-size: 0.94rem !important;
  line-height: 1.75;
  color: var(--color-tenue);
}
body.single-product .woocommerce-Tabs-panel p strong {
  color: var(--color-tinta);
  font-weight: 600;
}

/* Rótulo de sección, como en el sitio: pequeño y en azul, no un titular. */
body.single-product .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-Tabs-panel h3 {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
  color: var(--color-azul) !important;
  margin: 2.2rem 0 0.9rem !important;
}
body.single-product .woocommerce-Tabs-panel > h2:first-child {
  margin-top: 0 !important;
}

/* La tabla de propiedades, con el mismo aire que las de ensayos del sitio. */
body.single-product .woocommerce-Tabs-panel table {
  width: 100%;
  max-width: 44rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-caja);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 0 0 1.4rem;
  font-size: 0.9rem;
}
body.single-product .woocommerce-Tabs-panel table th,
body.single-product .woocommerce-Tabs-panel table td {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: top;
}
body.single-product .woocommerce-Tabs-panel table th {
  text-align: left !important;
  width: 45%;
  font-weight: 500;
  color: var(--color-tinta);
  background: transparent;
}
body.single-product .woocommerce-Tabs-panel table td {
  color: var(--color-tenue);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
body.single-product .woocommerce-Tabs-panel table tr:last-child th,
body.single-product .woocommerce-Tabs-panel table tr:last-child td {
  border-bottom: 0;
}

/* La lista de usos: viñeta azul y algo más apretada. */
body.single-product .woocommerce-Tabs-panel ul {
  padding-left: 1.1rem;
  margin: 0 0 1.4rem;
}
body.single-product .woocommerce-Tabs-panel ul li {
  margin-bottom: 0.35rem;
}
body.single-product .woocommerce-Tabs-panel ul li::marker {
  color: var(--color-azul-claro);
}

/* El enlace de vuelta a la ficha del sitio, destacado como una nota. */
body.single-product .woocommerce-Tabs-panel p:last-child {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-borde);
  font-size: 0.86rem !important;
}

/* --- Páginas legales ------------------------------------------------------ */
/* El HTML lo genera `scripts/generar_legales_tienda.py` desde el mismo Markdown
   que publica tenasfalt.cl/legales/, así que estas reglas son la contraparte de
   las de `web/src/pages/legales/[slug].astro`: el texto tiene que leerse igual
   a los dos lados de la compra. Van acotadas a `body.page` para no alcanzar a
   las fichas de producto. */

/* El título de la página lo pinta la plantilla de WordPress, y por omisión sale
   pequeño y centrado: parecía un pie de foto encima del texto. Aquí se iguala
   al de `.titulo` del sitio — ligero, grande y a la izquierda. */
body.page .wp-block-post-title,
body.page h1.wp-block-post-title {
  max-width: 44rem;
  margin: 0 auto 2.2rem !important;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem) !important;
  font-weight: 300 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.035em;
  color: var(--color-tinta) !important;
  text-align: left !important;
  text-wrap: balance;
}

/* `margin-inline: auto` y no solo `max-width`: sin él la columna se queda
   pegada al borde izquierdo del contenedor y la página se ve descuadrada. */
body.page .wp-block-post-content {
  max-width: 44rem;
  margin-inline: auto;
}

body.page .wp-block-post-content h2 {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  color: var(--color-tinta) !important;
  text-align: left !important;
  margin: 2.4rem 0 0.9rem !important;
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-borde);
}
body.page .wp-block-post-content h2:first-child {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: 0;
}
body.page .wp-block-post-content h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--color-tinta) !important;
  text-align: left !important;
  margin: 1.8rem 0 0.7rem !important;
}

body.page .wp-block-post-content p,
body.page .wp-block-post-content li {
  font-size: 0.94rem !important;
  line-height: 1.75;
  color: var(--color-tenue);
  text-align: left !important;
}
body.page .wp-block-post-content p {
  margin: 0 0 1rem !important;
}
body.page .wp-block-post-content ul,
body.page .wp-block-post-content ol {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
}
body.page .wp-block-post-content li {
  margin-bottom: 0.45rem;
}
body.page .wp-block-post-content li::marker {
  color: var(--color-azul-claro);
}
body.page .wp-block-post-content strong {
  color: var(--color-tinta);
  font-weight: 600;
}
body.page .wp-block-post-content a {
  color: var(--color-azul) !important;
}
body.page .wp-block-post-content code {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

/* Las tablas comparan plazos y derechos: son el núcleo de estas páginas. En
   móvil se desbordan dentro de su propio scroll antes que aplastarse. */
body.page .wp-block-post-content table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: 0.88rem;
}
body.page .wp-block-post-content th,
body.page .wp-block-post-content td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-borde);
  color: var(--color-tenue);
  line-height: 1.6;
}
body.page .wp-block-post-content th {
  color: var(--color-tinta);
  font-weight: 600;
  white-space: nowrap;
}

body.page .wp-block-post-content blockquote {
  margin: 1.4rem 0;
  padding: 1rem 1.2rem;
  background: var(--color-papel-2);
  border-left: 3px solid var(--color-azul-claro);
  border-radius: 0 var(--radius-caja) var(--radius-caja) 0;
}
body.page .wp-block-post-content blockquote p:last-child {
  margin-bottom: 0 !important;
}

body.page .wp-block-post-content hr {
  border: 0;
  border-top: 1px solid var(--color-borde);
  margin: 2rem 0;
}
/* Cada h2 ya dibuja su línea superior. Con el `---` del Markdown delante salen
   dos rayas juntas y parecen una fila vacía. Manda el `hr`. */
body.page .wp-block-post-content hr + h2 {
  border-top: 0;
  padding-top: 0;
}

.tf-legal-pie {
  margin-top: 2.5rem !important;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-borde);
  font-size: 0.82rem !important;
}

/* --- Redes sociales ------------------------------------------------------- */
/* Mismo marcado y mismas medidas que `Redes.astro` en el sitio: SVG en línea
   que hereda el color del texto, 18 px de dibujo dentro de 44 px de destino
   táctil. El nombre viaja oculto para los lectores de pantalla, porque un
   enlace que solo contiene un dibujo no se anuncia. */
.tf-redes {
  display: flex;
  /* Que envuelvan. En el pie viven dentro de una columna estrecha y a ~820px
     el cuarto icono se salia de la columna y del viewport: 4 x 44px no caben
     y un flex no encoge por debajo de su contenido. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.tf-redes li {
  margin: 0 !important;
}
.tf-redes a {
  display: grid !important;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #8d96a5 !important;
  border-radius: var(--radius-boton);
  text-decoration: none !important;
}
.tf-redes svg {
  width: 18px;
  height: 18px;
  display: block;
}
.tf-redes a:hover {
  color: var(--color-azul-vivo) !important;
  background: var(--color-papel-2);
}
.tf-redes__nombre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tf-redes--pie a {
  color: var(--color-tenue) !important;
}
/* En el pie los iconos arrancan pegados al borde izquierdo de su columna. */
.tf-redes--pie {
  margin-left: -0.6rem !important;
}

.tf-pie__titulo--redes {
  margin-top: 1.4rem !important;
}

/* En la cabecera comparten fila con el carrito y el botón de cotizar. Por
   debajo de 64rem sobra el espacio justo para eso y no para cuatro iconos
   más: ahí se esconden y quedan solo en el pie, como en el sitio. */
/* 63.99 y no 64: el sitio las muestra desde `min-width: 64rem`, asi que con
   `max-width: 64rem` justo a 1024px se veian en el sitio y no en la tienda. */
@media (max-width: 63.99rem) {
  .tf-redes--cabecera {
    display: none !important;
  }
}
/* Por debajo de 62rem ya no están en la barra sino dentro del panel, donde
   sobra sitio: reaparecen centrados al pie, igual que en el sitio. */
@media (max-width: 62rem) {
  .tf-redes--cabecera {
    display: flex !important;
    justify-content: center;
  }
}

/* --- Submenú de la cabecera ---------------------------------------------- */
/* Misma mecánica que en el sitio: se abre con `:hover` y `:focus-within`, sin
   JavaScript, y por eso también funciona con el teclado. Lo genera
   `scripts/generar_tema_tienda.py` desde `nav` en `sitio.ts`, así que el menú
   de la tienda no puede separarse del menú del sitio. */
.tf-menu-padre {
  position: relative;
  display: flex;
  align-items: center;
}
.tf-menu-padre > .tf-enlace {
  margin: 0 !important;
}

.tf-submenu {
  list-style: none;
  margin: 0 !important;
  padding: 0.35rem !important;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  background: var(--color-papel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-caja);
  box-shadow: 0 8px 24px rgb(17 58 151 / 0.12);
  /* `visibility` y no `display: none`: `display: none` saca el enlace del orden
     de tabulación y `:focus-within` no llegaría a dispararse nunca. */
  visibility: hidden;
  opacity: 0;
  z-index: 30;
}
.tf-menu-padre:hover .tf-submenu,
.tf-menu-padre:focus-within .tf-submenu {
  visibility: visible;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .tf-submenu {
    transition: opacity 0.16s ease;
  }
}

.tf-submenu li {
  margin: 0 !important;
}
.tf-submenu a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-boton);
  color: var(--color-tenue) !important;
  font-size: 0.88rem;
  text-decoration: none !important;
  white-space: nowrap;
}
.tf-submenu a:hover {
  color: var(--color-azul) !important;
  background: var(--color-papel-2);
}

/* En pantallas estrechas la cabecera se apila y un desplegable flotante estorba
   más que ayuda: el hijo pasa a ser una entrada más, sangrada bajo su padre. */
@media (max-width: 63.99rem) {
  .tf-menu-padre {
    flex-direction: column;
    align-items: flex-start;
  }
  .tf-submenu {
    position: static;
    visibility: visible;
    opacity: 1;
    min-width: 0;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .tf-submenu a {
    padding-left: 0.9rem;
    border-left: 2px solid var(--color-borde);
    border-radius: 0;
  }
}

/* Dentro del panel el hijo es una fila mas, no un bloque con caja: ocupa el
   ancho entero y cuelga de su padre con una barrita. Va DESPUES del bloque de
   arriba a proposito —entre 62 y 64rem sigue mandando aquel, que es donde la
   cabecera es una fila de escritorio estrecha. */
@media (max-width: 62rem) {
  .tf-menu-padre,
  .tf-submenu,
  .tf-submenu li {
    width: 100%;
  }
  .tf-submenu a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.6rem 0 0.6rem 1.6rem !important;
    font-size: 0.95rem;
    color: var(--color-tenue) !important;
    border-left: 0;
    border-bottom: 1px solid var(--color-borde);
  }
  .tf-submenu a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    border-radius: 2px;
    background: var(--color-borde);
  }
}