/* ===================================================================================
   UEB Tienda — base: reset, tipografía, utilidades, accesibilidad
   =================================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--page-bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* El banner promocional desborda a propósito (los "blobs" desenfocados); esto evita la
	   barra horizontal sin necesidad de overflow:clip, que rompería position:sticky. */
	overflow-x: hidden;
}

/* El sitio como bloque centrado de 1280px, no a sangre. Es del diseño: por encima de esa
   anchura asoma --page-bg a los lados. Por debajo de 860px pasa a ancho completo y la
   sombra desaparece, porque ya no hay nada alrededor que separar. */
.site-wrap {
	margin: 0 auto;
	background: var(--bg);
	box-shadow: var(--shadow-site);
	position: relative;
}

@media (max-width: 860px) {
	.site-wrap {
		max-width: none;
		box-shadow: none;
	}
}

/* Las pantallas de interrupción (login, 404, construcción) sí van a sangre: son fondo de
   foto completo, sin contenedor ni gris alrededor. */
.ueb-deep {
	background: var(--bg);
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

/* El diseño NO tiñe los enlaces al pasar por encima de forma global: cada componente
   decide el suyo (las migas van a verde, el pie sube la opacidad, el megamenú va a tinta).
   Un `a:hover{color:var(--accent-strong)}` global teñiría también el logo, las tarjetas de
   producto enteras y las de categoría, que son enlaces envolventes. */
a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: inherit;
}

/* Excepción: los enlaces dentro de texto editorial (entradas, páginas, descripción larga
   de producto) sí necesitan ser reconocibles como enlaces sin depender del color. */
.entry-content a:not([class]),
.tabpane p a:not([class]) {
	color: var(--accent-strong);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.entry-content a:not([class]):hover,
.tabpane p a:not([class]):hover {
	color: var(--ink);
}

button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

/* Display. El peso 800 y el apriete negativo son de todo el diseño; los tamaños y los
   line-height concretos los pone cada componente (el hero va a 58px/1.06, la ficha a
   clamp(30px,3.6vw,44px)/1.03, las cabeceras de sección a 36px). */
h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-wrap: balance;
}

h5,
h6 {
	margin: 0;
	font-family: var(--mono);
	font-weight: 600;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
}

/* ─── LOS DOS ÉNFASIS ───────────────────────────────────────────────────────────────
   El rediseño usa dos recursos distintos y no son intercambiables:

   `<b>` dentro de un titular → misma redonda, mismo peso, SOLO cambia el color.
          "Equipamiento que el entorno subacuático <b>exige</b>"
          Es el énfasis por defecto de la tienda (Home, secciones, showroom, contacto).

   `<em>` → cursiva de verdad + color. Se reserva para las pantallas de interrupción y
          para el saludo del área privada:
          "se ha quedado en el <em>fondo</em>" · "Hola, <em>Marc</em>"
          Necesita la Archivo italic real (ver fonts.css): al clamp(38px,6.4vw,84px) del
          h1 de "en construcción", una oblicua sintética se nota inmediatamente.

   El `<b>` se limita a titulares a propósito: fuera de ellos el diseño lo usa como
   elemento estructural sin color (las cifras de .stats, el nombre del pie, la marca de la
   banda, el valor de la opción elegida en la ficha). */
h1 b,
h2 b,
h3 b,
h4 b {
	color: var(--accent-strong);
	font-weight: inherit;
}

em {
	font-style: italic;
	color: var(--accent-strong);
	font-weight: 800;
}

strong,
b {
	font-weight: 700;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* --- Contenedor -------------------------------------------------------------------- */
.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding-left: var(--pad);
	padding-right: var(--pad);
}

/* --- Etiquetas monoespaciadas ------------------------------------------------------ */
.mono {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* Antetítulo de sección: filete + texto en el acento.
   El filete es un ::before de 1px, no un glifo: el guion largo tipográfico caería a una
   fuente del sistema (ver la nota de glifos en fonts.css). */
.eyebrow {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent-strong);
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.eyebrow::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

/* Variante sin filete, para cuando el antetítulo va centrado o dentro de una tarjeta. */
.eyebrow--bare::before {
	display: none;
}

/* En las pantallas oscuras el antetítulo es un punto más grande y más espaciado. */
.ueb-deep .eyebrow {
	font-size: 12px;
	letter-spacing: .18em;
}

.ueb-deep .eyebrow::before {
	width: 22px;
}

.tick {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* El rombo de marca: un cuadrado girado 45°, con la esquina apenas redondeada. */
.mark {
	width: 11px;
	height: 11px;
	background: var(--ink);
	border-radius: 3px;
	transform: rotate(45deg);
	flex-shrink: 0;
}

/* Cualquier cifra monetaria. `font-variant-numeric: tabular-nums` mantiene los precios
   alineados en columna cuando se apilan (carrito, totales, tabla de pedidos). */
.price {
	font-family: var(--mono);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --- Campos de formulario ---------------------------------------------------------
   Este bloque lo hereda también WooCommerce: inc/woocommerce/setup.php fuerza
   `class => ['field']` en woocommerce_form_field(), de modo que los campos de checkout y
   de direcciones salen ya con este aspecto sin duplicar selectores. */
.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.field.full {
	grid-column: 1 / -1;
}

.field label {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.field input,
.field textarea,
.field select {
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	color: var(--ink);
	padding: 11px 13px;
	font-family: var(--font-body);
	font-size: 13px;
	width: 100%;
	/* Safari iOS mete su propio radio y sombra interior en los inputs. */
	-webkit-appearance: none;
	appearance: none;
}

.field select {
	/* Flecha propia: un SVG en el fondo, no un glifo ▾ (que no está en el subset latin). */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238695A8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 38px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
	outline: none;
	border-color: var(--accent-strong);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.field textarea {
	resize: vertical;
	min-height: 76px;
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--ink-mute);
}

/* Campo obligatorio no cumplimentado, solo tras intentar enviar. `:user-invalid` (en vez
   de `:invalid`) evita marcar en rojo un campo vacío que el usuario aún no ha tocado. */
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid {
	border-color: var(--danger);
}

/* --- Accesibilidad ---------------------------------------------------------------- */

/* Anillo de foco visible en todo el sitio. Los mockups no tenían ninguno: se navegaba a
   ciegas con el teclado. `:focus-visible` no lo muestra al hacer clic con el ratón. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--accent-strong);
	outline-offset: 2px;
	border-radius: 1px;
}

/* Enlace de salto: fuera de pantalla hasta recibir foco.
   Va en tinta y no en menta: el menta sobre blanco no da contraste suficiente para texto. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 14px 22px;
	background: var(--ink);
	color: #fff;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
}

.skip-link:focus {
	left: 12px;
	top: 12px;
	color: #fff;
}

/* Oculto visualmente pero legible por lectores de pantalla. Mismo nombre que la clase de
   WordPress para que el marcado del núcleo y de WooCommerce lo herede gratis. */
.screen-reader-text,
.sr-only {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.screen-reader-text:focus,
.sr-only:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 14px 22px;
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1000;
	background: var(--ink);
	color: #fff;
	font-family: var(--mono);
	font-size: 12px;
}

/* --- Utilidades ------------------------------------------------------------------- */
.hide {
	display: none !important;
}

.nowrap {
	white-space: nowrap;
}