@charset "UTF-8";
/* ============================================================
   TANTO LAMPS \00b7 Base de marca (global)
   Fuentes + tipografía + color + botones. Base CLARA (cream);
   la ficha de producto lleva tratamiento oscuro aparte.
   Rebranding de Blocksy vía sus variables de paleta + overrides
   propios sobre WooCommerce.
   ============================================================ */

/* ---- Fuentes de marca (self-hosted) ---- */
/* Bodoni Moda (Google Fonts, licencia OFL) — la serif de titulares.
   Sustituye a PP Editorial Old, que queda reservada para el catálogo.
   Subconjuntos latinos: el resto de alfabetos no hacen falta aquí. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodonimoda-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodonimoda-400-normal-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodonimoda-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodonimoda-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* PP Editorial Old, la tipografía del catálogo. En la web se usa solo para
   la frase de marca de la portada: es una cita, y en cursiva se lee como lo
   que es, una voz, no un titular más.

   Son recortadas (3-sep-2026): la fuente completa pesaba 84 y 83 KB para
   una sola frase corta. El recorte se comprobó contra el texto REAL que
   usa la web hoy —el de Personalizar → «Frase», o el de por defecto en
   inc/ajustes.php si está vacío— con fontTools, glifo a glifo: cubre las
   dos frases (ES y EN) entero, sin que falte ni una letra. 44 y 44 KB.

   El rango de abajo es más ancho que esa frase a propósito —todo el latino,
   comillas, rayas, puntos suspensivos, el euro, la flecha—: para que un
   cambio de texto razonable (otra frase en español o inglés) siga
   funcionando sin volver a tocar el fichero. Si algún día se pone una cita
   con un carácter fuera de eso —una ñ con otro diacrítico, un símbolo raro—,
   ese carácter en concreto caería a la fuente del sistema. Se nota: hay que
   volver a generar el recorte con el texto nuevo (mismo método, ficheros
   originales guardados aparte del repositorio). */
@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/PPEditorialOld-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+2010-2015, U+2018-201D,
                 U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+00B7, U+2192,
                 U+2190, U+00D7;
}
/* La ultraligera, para la frase de la portada. Es una cita en voz baja: con
   el trazo fino se lee como un susurro y no compite con el carrusel que
   tiene justo encima. Mismo recorte y mismo motivo que la de arriba. */
@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/PPEditorialOld-UltralightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+2010-2015, U+2018-201D,
                 U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+00B7, U+2192,
                 U+2190, U+00D7;
}

/* Instrument Sans (OFL) — cuerpo y UI, como Terria. Bodoni Moda queda
   para los titulares. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --tanto-ink: #1a1a1a;          /* texto principal (casi negro neutro, como Terria) */
  --tanto-ink-soft: #6a6a6a;     /* texto secundario (gris neutro, no pardo) */
  --tanto-cream: #f6f0e6;        /* fondo claro cálido (solo bandas de acento) */
  --tanto-cream-2: #efe7d8;      /* fondo alterno */
  --tanto-line: #e5e5e5;         /* líneas (gris neutro) */
  --tanto-ember: #c0401f;        /* ámbar de marca, algo más profundo para contraste en claro */
  --tanto-ember-2: #a5341a;      /* ámbar hover */
  --tanto-core: #e9dbc8;

  /* Rebranding de la paleta de Blocksy (la usa en enlaces, botones, acentos) */
  --theme-palette-color-1: #c0401f;   /* acento primario */
  --theme-palette-color-2: #a5341a;   /* acento hover */
  --theme-palette-color-3: #211c18;   /* texto/oscuro */
  --theme-palette-color-4: #6b6055;   /* texto suave */
  --theme-palette-color-5: #e2d7c4;   /* borde */
  --theme-palette-color-6: #efe7d8;   /* fondo alterno */
  --theme-palette-color-7: #f6f0e6;   /* fondo */
  --theme-palette-color-8: #ffffff;   /* claro puro */

  --theme-link-color: #c0401f;
  --theme-link-hover-color: #a5341a;
  --theme-text-color: #211c18;
  --theme-headings-color: #1a1512;
  --theme-border-color: #e2d7c4;

  --theme-font-family: "Instrument Sans", sans-serif;
  --theme-heading-font-family: "Bodoni Moda", Georgia, serif;
}

/* ---- Tipografía global ---- */
body {
  /* Base BLANCA (como Terria). !important: Blocksy pinta el fondo del body
     desde su Customizer y ganaba a nuestra regla normal. El cream queda
     solo para bandas de acento (pie). */
  background-color: #ffffff !important;
  color: var(--tanto-ink);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Texto que no se ve pero que sí leen los buscadores y los lectores de
   pantalla. Se usa para el H1 de la portada, que si no no existiría: el
   carrusel rota cuatro titulares y no puede ser el encabezado de la página.
   No se usa display:none ni visibility:hidden porque eso también lo
   esconde de los lectores de pantalla. */
.tanto-solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0;
}
h1, h2, h3, h4, .entry-title {
  font-family: "Bodoni Moda", Georgia, serif !important;
  font-weight: 400;
  color: var(--tanto-ink);
  letter-spacing: .005em;
  text-wrap: balance;
}

/* El NOMBRE de una pieza no es un titular: es un dato que se lee de un
   vistazo, casi siempre en una lista de veinticuatro. En serif y a dos líneas
   la retícula se llena de rasgos y cuesta comparar. En palo seco cada nombre
   se distingue del de al lado, que es lo único que tiene que hacer. Los
   titulares de sección se quedan en Bodoni: ahí sí manda la voz. */
.woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.tanto-card__title,
.tanto-prod__titulo,
.tanto-drawer__nombre {
  font-family: "Instrument Sans", sans-serif !important;
  letter-spacing: 0;
  text-wrap: balance;
}

/* «Tu carrito» es un rótulo de interfaz, no un titular de la web. Va con el
   resto de la interfaz —el mismo palo seco en versalitas de los demás
   rótulos— y no con la voz editorial de Bodoni. Lleva !important porque la
   regla de arriba se lo pone a todos los h2. */
.tanto-drawer__cab h2 { font-family: "Instrument Sans", sans-serif !important; }

/* Eyebrows / etiquetas en mayúsculas con tracking (estética editorial) */
.woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce-loop-product__title + .price,
.product_meta {
  font-family: "Instrument Sans", sans-serif;
}

/* ---- Botones de marca (ámbar sólido, en vez del azul por defecto) ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wp-element-button,
.wc-block-components-button {
  background: var(--tanto-ember) !important;
  color: #fbf4ea !important;
  border: 0 !important;
  border-radius: 2px !important;
  font-family: "Instrument Sans", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .04em;
  text-transform: none;
  transition: background .2s ease, transform .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wp-element-button:hover,
.wc-block-components-button:hover {
  background: var(--tanto-ember-2) !important;
}

/* Enlaces */
a { color: var(--tanto-ember); }
a:hover { color: var(--tanto-ember-2); }

/* ============================================================
   Listado de tienda (archive) — CLARO
   ============================================================ */
/* Título de producto en TINTA (el enlace interior heredaba el ámbar).
   Recorte a 3 líneas: los títulos de Etsy son larguísimos y desbocaban
   la altura de las tarjetas (se limpiarán/traducirán después). */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product a .woocommerce-loop-product__title {
  color: var(--tanto-ink) !important;
  font-size: 1.15rem;
  line-height: 1.28;
  margin-top: .7em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover,
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
  color: var(--tanto-ember) !important;
}
/* Precio: tinta sobria (el ámbar se reserva para las llamadas a la acción). */
.woocommerce ul.products li.product .price {
  color: var(--tanto-ink) !important;
  font-family: "Instrument Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
}
/* Etiqueta de categoría bajo la tarjeta: apagada y en versalitas. */
.woocommerce ul.products li.product .ct-woo-card-extra,
.woocommerce ul.products li.product .product-category-name {
  color: var(--tanto-ink-soft);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Título "Shop" y contadores más discretos, tipografía editorial. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  color: var(--tanto-ink-soft);
}


/* En las páginas de WooCommerce (carrito, pago) usamos nuestro propio
   encabezado; ocultamos el título de página de Blocksy ("Cart"). */
.woocommerce-cart .hero-section,
.woocommerce-checkout .hero-section { display: none; }


/* Botones de WooCommerce en NEGRO por defecto, con hover invertido (blanco,
   borde negro), como el resto de la tienda (p. ej. "Ver carrito"). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce #respond input#submit,
.woocommerce-message a.button,
.woocommerce-info a.button {
  background-color: #1a1a1a !important; color: #fff !important;
  border: 1px solid #1a1a1a !important; border-radius: 0 !important;
  transition: background-color .2s ease, color .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
  background-color: #fff !important; color: #1a1a1a !important; border-color: #1a1a1a !important;
}

/* ============================================================
   Cuenta profesional (B2B)
   Estos estilos son globales porque el precio profesional y la
   barra de sesión aparecen en TODA la tienda, no en una página.
   ============================================================ */

.tanto-barra-pro {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: center; justify-content: center;
  padding: 9px 20px;
  background: var(--tanto-ink, #1a1a1a); color: #fff;
  font-family: "Instrument Sans", sans-serif;
  font-size: 12px; letter-spacing: .04em;
}
.tanto-barra-pro strong { font-weight: 600; }
.tanto-barra-pro a { color: #fff; opacity: .7; text-decoration: underline; text-underline-offset: 2px; }
.tanto-barra-pro a:hover { opacity: 1; }

/* Precio profesional: base, desglose del IVA y PVP de referencia */
.tanto-precio-pro { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.tanto-precio-pro__base { font-weight: 500; }
.tanto-precio-pro__iva,
.tanto-precio-pro__pvp {
  font-size: .78em; color: var(--tanto-ink-soft, #6a6a6a); font-weight: 400;
}
.tanto-precio-pro__pvp { opacity: .85; }
.tanto-sin-iva {
  display: block; font-size: .72em; color: var(--tanto-ink-soft, #6a6a6a);
  letter-spacing: .04em; margin-top: 1px;
}

/* ============================================================
   Aviso de cookies
   ============================================================ */
.tanto-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--tanto-ink, #1a1a1a); color: #fff;
  font-family: "Instrument Sans", sans-serif;
  transform: translateY(100%); opacity: 0;
  transition: transform .45s cubic-bezier(0, .14, .19, 1), opacity .35s ease;
}
.tanto-cookies.is-visible { transform: none; opacity: 1; }
.tanto-cookies.is-fuera { transform: translateY(100%); opacity: 0; }

.tanto-cookies__in {
  max-width: 1240px; margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 70px);
  display: flex; gap: 26px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.tanto-cookies__texto { flex: 1 1 420px; }
.tanto-cookies__tit {
  font-family: "Instrument Sans", sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 6px; color: rgba(255, 255, 255, .6);
}
.tanto-cookies__texto p { margin: 0; font-size: .86rem; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.tanto-cookies__texto a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.tanto-cookies__botones { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
/* Aceptar y rechazar con el mismo tamaño y peso: la guía de la AEPD no
   admite que rechazar sea más difícil que aceptar. */
.tanto-cookies__btn {
  padding: 13px 24px; cursor: pointer; white-space: nowrap;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 0; font-family: inherit;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tanto-cookies__btn:hover { border-color: #fff; }
.tanto-cookies__btn--si { background: #fff; color: var(--tanto-ink, #1a1a1a); border-color: #fff; }
.tanto-cookies__btn--si:hover { background: rgba(255, 255, 255, .85); }

@media (max-width: 640px) {
  .tanto-cookies__in { padding: 18px 20px; gap: 16px; }
  .tanto-cookies__botones { width: 100%; }
  .tanto-cookies__btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tanto-cookies { transition-duration: .01ms !important; }
}

/*
 * EN PAPEL NO SE ACEPTAN COOKIES.
 *
 * Salió al generar las fichas técnicas en PDF: el navegador no tenía el
 * consentimiento guardado, así que pintaba el aviso, y el aviso salía impreso
 * en medio de la tabla de medidas. No es cosa de esa hoja: le pasa a cualquiera
 * que imprima una página de la web antes de decidir sobre las cookies.
 *
 * Un aviso con dos botones en una hoja de papel no sirve para nada, y encima
 * tapa lo que sí importa.
 */
@media print {
  .tanto-cookies { display: none !important; }
}

/* ============================================================
   ÁREA DE TOQUE MÍNIMA (WCAG 2.2, criterio 2.5.8)
   ============================================================
   Varios enlaces e iconos son más pequeños que los 24 px que pide la norma:
   el B2B mide 28x13, el selector de idioma 20x19, los iconos de redes 19x19.
   A ratón no molesta; con el pulgar en un móvil se falla.

   Se agranda el área sensible con un pseudoelemento centrado e invisible, no
   con padding: así el dibujo no se mueve ni un píxel y no hay que retocar
   ninguna maqueta. 26 px y no 44 porque algunos van pegados —ES / EN— y a 44
   se solaparían, que es cambiar un problema por otro.
   ============================================================ */

.tanto-cab__b2b,
.tanto-idiomas__op,
.tanto-pie__social a,
.tanto-prod__share a,
.tanto-hero__dot,
.tanto-panel__cerrar,
.tanto-lb__cerrar,
.reset_variations {
  position: relative;
}

.tanto-cab__b2b::after,
.tanto-idiomas__op::after,
.tanto-pie__social a::after,
.tanto-prod__share a::after,
.tanto-hero__dot::after,
.tanto-panel__cerrar::after,
.tanto-lb__cerrar::after,
.reset_variations::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  min-width: 26px; min-height: 26px;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
}

/* ============================================================
   «¿PREFIERES SEGUIR EN ESPAÑOL?»
   ============================================================
   Se ofrece el otro idioma; no se redirige a nadie. Abajo a la izquierda, en
   una esquina: es una sugerencia, no un trámite, y no debe tapar nada.

   Aparece cuando el aviso de cookies ya se ha ido, de eso se encarga su JS.
   ============================================================ */

.tanto-idioma-sug {
  position: fixed; z-index: 45;
  /* A la derecha, no a la izquierda: esa esquina es la más ocupada de la web
     —los puntos del carrusel de la portada caen en x 94-114, y en la tienda la
     columna de filtros baja entera por ahí—. Medido: cuatro puntos y dos
     casillas de filtro quedaban debajo del aviso y no se podían tocar. */
  right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px);
  max-width: min(calc(100vw - 28px), 320px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px;
  padding: 13px 17px 14px;
  /* Cristal y no un rectángulo gris: el filo claro y el desenfoque hacen que se
     lea como parte de la web y no como un mensaje del navegador. Donde no haya
     desenfoque, el fondo ya es opaco de por sí y se ve igual de bien. */
  background: rgba(20, 20, 20, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
  /* Entra desde abajo, sin llamar la atención más de lo necesario. */
  opacity: 0; transform: translateY(12px);
  /* Que se pueda leer sin que salte la línea a media palabra. */
  text-wrap: pretty;
  transition: opacity .35s ease, transform .35s cubic-bezier(.25, 1, .5, 1);
}
.tanto-idioma-sug.is-visible { opacity: 1; transform: none; }
.tanto-idioma-sug[hidden] { display: none; }

.tanto-idioma-sug__txt {
  flex: 1 1 100%; margin: 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px; line-height: 1.45;
}
.tanto-idioma-sug__si,
.tanto-idioma-sug__no {
  font-family: "Instrument Sans", sans-serif;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.tanto-idioma-sug__si {
  color: #fff !important; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .55); padding-bottom: 2px;
}
.tanto-idioma-sug__si:hover { border-bottom-color: #fff; }
.tanto-idioma-sug__no {
  padding: 0; border: 0; background: none;
  color: rgba(255, 255, 255, .6);
}
.tanto-idioma-sug__no:hover { color: #fff; }

/* En móvil el suelo está ocupado: los puntos del carrusel de la portada quedan
   a 22 px del borde, y en la tienda el botón de filtros ocupa de 18 a 63. Con
   el aviso pegado abajo los tapaba —medido: cuatro `.tanto-hero__dot` sin
   poder tocarse—, así que sube por encima de los dos y se abre a todo el
   ancho, con el mismo margen a los dos lados.

   El 780 no es un número al azar: es donde `tienda.css` deja de pintar ese
   botón de filtros. */
@media (max-width: 780px) {
  .tanto-idioma-sug {
    left: 14px; right: 14px; bottom: 80px;
    max-width: none;
  }
}

/* ============================================================
   EL BOTÓN DE MARCA
   ============================================================
   Vive aquí y no en `home.css` porque esa hoja solo se carga en la portada, y
   el mismo botón se usa en las páginas de colección y en la del taller. Allí
   salía sin relleno ni borde: un texto con un fondo pegado, de 28 px de alto.
   Con el dedo no se acierta —lo mínimo recomendado son 44—.
   ============================================================ */
.tanto-boton {
  display: inline-block; padding: 18px 30px; border: 1px solid #fff; border-radius: 0;
  background: #fff; color: #111; text-decoration: none; white-space: nowrap;
  font-family: "Instrument Sans", sans-serif; font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  transition: opacity .3s, color .3s, background-color .3s, border-color .3s, transform .3s;
}
.tanto-boton--grow:hover { transform: scale(1.06); }
.tanto-boton--oscuro { background: #fff; color: #111; border-color: #111; }
.tanto-boton--oscuro:hover { background: #111; color: #fff; border-color: #111; }
.tanto-boton--claro { background: transparent; color: var(--crema); border-color: var(--crema); }
.tanto-boton--claro:hover { background: var(--crema); color: #14110e; }

/* ============================================================
   EL CUERPO, A 16 PX
   ============================================================
   Lo medí en un teléfono de 390 px con el navegador de verdad y salía a 15.
   No es una manía tipográfica: por debajo de 16 px, Safari en iPhone HACE ZOOM
   solo al tocar un campo de formulario, y el cliente se queda con la página
   descolocada en mitad de la compra.

   El tamaño lo pone Blocksy desde su panel, que vive en la base de datos y no
   viaja al subir. Puesto aquí viaja con el tema y no depende de acordarse.
   ============================================================ */
body { font-size: 16px; }