/*
Theme Name: Johnson Surf
Theme URI: https://johnsonsurf.com.ar/
Author: Johnson Surf · Buenos Aires
Author URI: https://johnsonsurf.com.ar/
Description: Tema de bloques para Johnson Surf, fábrica textil y de estampados de Hudson, Buenos Aires, desde 1984. Vende por catálogo y toma trabajos personalizados para colegios, clubes y empresas. Calcomanía de vinilo llevada a escala de sitio: azul profundo, arco de colores, keyline blanco de troquel y una voz de datos en monoespaciada. WooCommerce completo, español rioplatense.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: johnson-surf
Tags: e-commerce, block-patterns, full-site-editing, custom-colors, custom-menu, wide-blocks, accessibility-ready, translation-ready
*/

/* ============================================================
   1 · FICHAS DEL SISTEMA
   Los colores, tipografías y espacios viven en theme.json.
   Acá quedan sólo las piezas que el editor no sabe describir.
   ============================================================ */
:root{
	/* --- tinta --------------------------------------------------------- */
	--navy:var(--wp--preset--color--navy);
	--noche:var(--wp--preset--color--noche);
	--celeste:var(--wp--preset--color--celeste);
	--celeste-pale:var(--wp--preset--color--celeste-pale);
	--bruma:var(--wp--preset--color--bruma);
	--blanco:var(--wp--preset--color--blanco);
	--naranja:var(--wp--preset--color--naranja);
	--naranja-fuerte:var(--wp--preset--color--naranja-fuerte);
	--oro:var(--wp--preset--color--oro);

	/* El naranja de relleno no sirve como tinta: #C4400F sobre bruma da
	   4,39:1 y no llega al 4,5:1 que pide el texto chico. Este pasa en los
	   tres fondos claros (blanco 6,5 · bruma 5,6 · celeste pálido 4,8), así
	   que todo naranja que sea LETRA usa este, y el relleno sigue con el otro. */
	--naranja-tinta:#AA350D;

	/* grises de nota: uno solo, medido. Antes había cuatro y tres de ellos
	   no llegaban al contraste mínimo sobre blanco. */
	--nota:#55677D;
	--tinta-clara:#CBD9E8;   /* prosa sobre banda oscura */
	--tinta-pie:#B9C8DA;
	--tinta-legal:#8FA3BC;
	--gris-mudo:#5E7188;     /* chapa de agotado: fondo con letra blanca */

	--display:var(--wp--preset--font-family--archivo);
	--mono:var(--wp--preset--font-family--mono);

	/* --- eje de ancho de Archivo --------------------------------------
	   Archivo es variable de 62% a 125%. Antes se usaban NUEVE valores
	   distintos entre 100% y 125% sin criterio, y los títulos iban a
	   118-125%: eso es la letra literalmente ensanchada. Quedan tres
	   registros, y ningún componente declara un porcentaje propio. */
	--ancho-cartel:112%;
	--ancho-titulo:106%;
	--ancho-ui:100%;

	/* --- escala de texto ----------------------------------------------
	   Antes: veinte tamaños sueltos en noventa y seis declaraciones, con
	   etiquetas de 10 y 11px y prosa de tarjeta a 15px cuando el cuerpo
	   del sitio es 17px. Ahora son once roles y ningún número suelto.
	   Nada baja de 12px, y la prosa de tarjeta sube a 16px. */
	--t-etiqueta-sm:.75rem;      /* 12px · dato secundario: pie de foto, conteo */
	--t-etiqueta:.8125rem;       /* 13px · la etiqueta que estructura: cota, eyebrow, label */
	--t-dato:.9375rem;           /* 15px · dato que se lee o se clickea: año, precio viejo, paginado */
	--t-cuerpo-sm:1rem;          /* 16px · prosa densa: listas, notas, tarjetas */
	--t-cuerpo:var(--wp--preset--font-size--medium);   /* 17px · prosa */
	--t-nav:.9375rem;
	--t-menu:1.5rem;
	--t-boton:.9375rem;
	--t-guia:var(--wp--preset--font-size--large);
	--t-marca:clamp(.95rem,1.5vw,1.15rem);
	--t-precio:clamp(1.0625rem,1.3vw,1.1875rem);
	--t-precio-grande:clamp(1.5rem,2.6vw,1.875rem);
	--t-ficha:clamp(1rem,1.4vw,1.125rem);      /* título de tarjeta */
	--t-sub:clamp(1.125rem,1.9vw,1.3125rem);   /* h3 */
	--t-puerta:clamp(1.25rem,2.2vw,1.5rem);
	--t-titulo:var(--wp--preset--font-size--x-large);
	--t-cartel:var(--wp--preset--font-size--xx-large);
	--t-cifra:clamp(1.75rem,3.4vw,2.5rem);
	--t-cifra-grande:clamp(2.5rem,5.5vw,3.75rem);

	/* --- troquel: filete, esquina y golpe ----------------------------- */
	--troquel:3px;
	--troquel-fino:2px;
	--radio:3px;
	--radio-ficha:4px;

	/* sombra dura de imprenta, sin desenfoque */
	--golpe:6px 6px 0 var(--navy);
	--golpe-celeste:8px 8px 0 var(--celeste);
	--golpe-corto:4px 4px 0 var(--navy);

	/* --- ritmo --------------------------------------------------------
	   Antes cada componente inventaba su propio clamp: veintidós valores
	   distintos para el mismo puñado de decisiones, y de ahí salía el
	   espaciado desparejo. Ahora son diez, y cambiar la densidad del
	   sitio es cambiar estos valores, no perseguir componentes. */
	--aire-banda:clamp(3rem,6vw,5.5rem);        /* alto de una sección */
	--aire-portada:clamp(3.5rem,7vw,6rem);
	--aire-seccion:clamp(2rem,4vw,3rem);
	--aire-cabeza:clamp(1.5rem,3vw,2.5rem);     /* título de sección al contenido */
	--aire-columna:clamp(1.5rem,3.6vw,3rem);    /* entre las dos columnas de un par */
	--aire-grilla:clamp(.9rem,1.8vw,1.35rem);   /* entre tarjetas */
	--aire-ficha:clamp(1.1rem,2.2vw,1.5rem);    /* dentro de una tarjeta */
	--aire-ficha-grande:clamp(1.4rem,2.8vw,2rem);
	--aire-fila:clamp(1rem,2.4vw,2rem);
	--riel-sangria:clamp(2rem,4.5vw,3.4rem);

	--ancho:1240px;
	--medida:760px;

	--curva:cubic-bezier(.2,.9,.3,1);
}


/* ============================================================
   2 · BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }

/* En las páginas cortas —404, mi cuenta, carrito vacío— el pie quedaba a
   media pantalla y abajo aparecía una franja del fondo del body. El pie va
   al piso siempre. */
.wp-site-blocks{ display:flex; flex-direction:column; min-height:100vh; }
.wp-site-blocks > main{ flex:1 0 auto; }
img{ max-width:100%; height:auto; }

::selection{ background:var(--oro); color:var(--navy); }

:where(a):focus-visible,
:where(button, input, select, textarea, summary, [tabindex]):focus-visible{
	outline:3px solid var(--naranja);
	outline-offset:3px;
	border-radius:2px;
}

/* Contenedores propios: reparten con su propia grilla o flex, así que el
   margen de flujo que el núcleo pone en :not(:first-child) sobra y además
   descuadra las columnas entre sí. */
.parte > *,
.rubros > *,
.beneficios > *,
.historia > *,
.lista > *,
.tienda > *,
.producto > *,
.seccion__cabeza > *,
.portada__grilla > *,
.footer__grilla > *,
.footer__legal > *,
.sitio-header__barra > *,
.header__acciones > *,
.marca > *,
.marca__texto > *,
.parte__item > *,
.hitos > *{ margin-block:0; }

/* medidas: .ancho llega a 1240, .medida a 760.
   La clase repetida gana al layout «constrained» del núcleo, que si no
   recorta a contentSize todo lo que cuelgue directo de <main>. */
.ancho.ancho{ max-width:var(--ancho); margin-inline:auto; width:100%; }
.medida.medida{ max-width:var(--medida); margin-inline:auto; width:100%; }

/* El eje de ancho de Archivo. theme.json describe el resto de las cabeceras
   (familia, peso, interlínea), pero no admite font-stretch dentro de
   «styles» — sólo dentro de fontFace —, así que el ancho se declara acá.
   Va con :where() para no pisar los anchos propios de cada pieza. */
:where(h1, h2, h3, .wp-block-site-title){ font-stretch:var(--ancho-titulo); }
:where(h4, h5, h6){ font-stretch:var(--ancho-ui); }

/* ============================================================
   3 · LA REGLA DE COLORES
   El arco del calco, aplanado. Marca el borde de cada sección:
   es estructura, no adorno — si no hay corte, no va.
   ============================================================ */
.regla{
	height:7px; width:100%; border:0; margin:0; padding:0; flex:0 0 auto;
	/* El tercer cuarto era blanco, tomado del keyline del calco. Sobre la
	   bruma y sobre el blanco eso no es un color: es un hueco, y la regla
	   se leía cortada en dos. Va el navy, que es el filete del troquel y
	   se lee contra los dos fondos. */
	background:linear-gradient(
		to right,
		var(--naranja) 0 25%,
		var(--oro)     25% 50%,
		var(--navy)    50% 75%,
		var(--celeste) 75% 100%
	);
}
.regla--fina{ height:4px; }

/* Sobre el azul del encabezado y el del pie, el navy es el que desaparece:
   ahí el cuarto vuelve a ser blanco. Es la misma regla leída contra el
   fondo contrario. */
.sitio-header .regla,
.sitio-footer .regla,
.banda--navy > .regla,
.banda--noche > .regla{
	background:linear-gradient(
		to right,
		var(--naranja) 0 25%,
		var(--oro)     25% 50%,
		var(--blanco)  50% 75%,
		var(--celeste) 75% 100%
	);
}

/* ============================================================
   4 · VOZ DE DATOS
   Monoespaciada en versalitas para todo lo que se lee como
   lectura de instrumento: precios, talles, stock, fechas, conteos.
   ============================================================ */
.dato,
.eyebrow{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.14em; text-transform:uppercase; line-height:1.3;
	margin:0;
}
.eyebrow{ color:var(--naranja-tinta); }
.sobre-navy .eyebrow{ color:var(--oro); }

/* ============================================================
   5 · BANDAS
   ============================================================ */
.banda{ position:relative; }
.banda--navy{ background:var(--navy); color:var(--bruma); }
.banda--noche{ background:var(--noche); color:var(--bruma); }
.banda--celeste{ background:var(--celeste-pale); color:var(--navy); }
.banda--bruma{ background:var(--bruma); color:var(--navy); }

.sobre-navy,
.banda--navy :where(h1,h2,h3,h4,h5),
.banda--noche :where(h1,h2,h3,h4,h5){ color:var(--blanco); }
.banda--navy p, .banda--noche p{ color:var(--tinta-clara); }
/* las fichas blancas sobre banda oscura vuelven a la tinta del tema:
   si no, heredan el celeste pensado para el fondo azul y quedan ilegibles */
.banda--navy .calco, .banda--noche .calco,
.banda--navy .calco p, .banda--noche .calco p,
.banda--navy .calco :where(h1,h2,h3,h4,h5),
.banda--noche .calco :where(h1,h2,h3,h4,h5){ color:var(--navy); }
.banda--navy a:not(.wp-element-button),
.banda--noche a:not(.wp-element-button){ color:var(--celeste); }

/* Dos bandas seguidas del mismo fondo son una sola sección a la vista, así
   que la segunda no repite el aire de arriba. Esto estaba resuelto a mano,
   con un padding-top:0 escrito dentro de un patrón: el tipo de parche del
   que sale el ritmo desparejo. Ahora lo decide el sistema. */
.banda--bruma + .banda--bruma,
.banda--blanca + .banda--blanca,
.banda--celeste + .banda--celeste,
.banda--navy + .banda--navy,
.banda--noche + .banda--noche{ padding-top:0; }

/* La nota gris está medida contra blanco y contra bruma. Sobre el celeste
   pálido se queda en 4,24:1, así que ahí la nota pasa a tinta plena. */
.banda--celeste .nota,
.banda--celeste .zonas__nota,
.banda--celeste .campo__ayuda,
.banda--celeste .muestra__q,
.banda--celeste .marco figcaption{ color:var(--navy); }

/* ============================================================
   6 · EL ARCO
   El calco es un círculo con un arco de colores. Ampliado y
   sangrado por el borde, ese mismo arco sostiene la portada.
   ============================================================ */
.arco{
	position:absolute; z-index:0; pointer-events:none;
	width:min(64vw,720px); aspect-ratio:1; border-radius:50%;
	background:transparent;
	box-shadow:
		0 0 0 clamp(10px,1.7vw,20px) var(--naranja),
		0 0 0 clamp(20px,3.4vw,40px) var(--oro),
		0 0 0 clamp(27px,4.6vw,54px) var(--blanco),
		0 0 0 clamp(34px,5.8vw,68px) var(--celeste);
	opacity:.9;
}
.arco--portada{ right:-16%; top:-28%; }

@media (prefers-reduced-motion:no-preference){
	.arco{ animation:arco-entra 1.1s var(--curva) both; }
	@keyframes arco-entra{
		from{ transform:scale(.86) translateY(18px); opacity:0; }
		to  { transform:none; opacity:.9; }
	}
}

/* ============================================================
   7 · CALCOS
   Cualquier cosa que se comporte como una calcomanía: filete
   blanco de troquel, esquina viva y golpe de tinta.
   ============================================================ */
.calco{
	position:relative; display:block; background:var(--blanco); color:var(--navy);
	border:var(--troquel) solid var(--navy); border-radius:var(--radio-ficha);
	box-shadow:var(--golpe-corto);
	transition:transform .22s var(--curva), box-shadow .22s var(--curva);
}
.sobre-navy .calco, .banda--navy .calco, .banda--noche .calco{
	border-color:var(--blanco); box-shadow:4px 4px 0 var(--celeste);
}
a.calco:hover, .calco:focus-within{
	transform:translate(-3px,-3px); box-shadow:var(--golpe);
}
.sobre-navy a.calco:hover, .banda--navy a.calco:hover, .banda--noche a.calco:hover{
	box-shadow:var(--golpe-celeste);
}

/* la chapa: lo único que se permite ir torcido, porque de verdad
   es una calcomanía pegada encima */
.chapa{
	display:inline-block; font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.12em; text-transform:uppercase;
	background:var(--oro); color:var(--navy);
	border:var(--troquel) solid var(--blanco); border-radius:2px;
	padding:5px 10px; box-shadow:3px 3px 0 rgba(10,27,51,.55);
	transform:rotate(-6deg);
}
.chapa--oferta{ background:var(--naranja); color:var(--blanco); }
.chapa--agotado{ background:var(--gris-mudo); color:var(--blanco); }

/* ============================================================
   8 · BOTONES

   El botón primario se dibuja como un calco: relleno, filete y
   golpe de tinta. El filete y el golpe iban SIEMPRE en navy, así
   que sobre una banda navy desaparecían los dos y quedaba el
   naranja flotando: #C4400F sobre #12305E da 2,54:1, menos que
   el 3:1 que pide un elemento de interfaz. Por eso el botón de
   la portada no se veía.

   Sobre fondo oscuro el primario pasa al oro, que es el papel
   que el oro ya tenía en el sistema: 7,44:1 contra el navy, y
   7,44:1 de la letra navy contra el oro. Filete blanco y golpe
   celeste, igual que hace .calco sobre banda oscura.
   ============================================================ */
.wp-element-button,
.wp-block-button__link{
	display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
	font-family:var(--display); font-stretch:var(--ancho-ui); text-decoration:none;
	font-size:var(--t-boton);
	border:var(--troquel) solid var(--navy);
	box-shadow:var(--golpe-corto);
	transition:transform .18s var(--curva), box-shadow .18s var(--curva),
	           background-color .18s ease, color .18s ease, border-color .18s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover{ transform:translate(-2px,-2px); box-shadow:var(--golpe); }
.wp-element-button:active,
.wp-block-button__link:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--navy); }

/* --- primario sobre banda oscura: oro con letra navy --- */
.sobre-navy .wp-element-button,
.sobre-navy .wp-block-button__link,
.banda--navy .wp-element-button,
.banda--navy .wp-block-button__link,
.banda--noche .wp-element-button,
.banda--noche .wp-block-button__link{
	background:var(--oro); color:var(--navy);
	border-color:var(--blanco); box-shadow:4px 4px 0 var(--celeste);
}
.sobre-navy .wp-element-button:hover,
.sobre-navy .wp-block-button__link:hover,
.banda--navy .wp-element-button:hover,
.banda--navy .wp-block-button__link:hover,
.banda--noche .wp-element-button:hover,
.banda--noche .wp-block-button__link:hover{
	background:var(--blanco); color:var(--navy);
	box-shadow:var(--golpe-celeste);
}
.sobre-navy .wp-element-button:active,
.sobre-navy .wp-block-button__link:active,
.banda--navy .wp-block-button__link:active,
.banda--noche .wp-block-button__link:active{ box-shadow:2px 2px 0 var(--celeste); }

/* las fichas blancas que cuelgan de una banda oscura llevan su propio
   fondo, así que el botón que va adentro vuelve a la versión clara */
.banda--navy .calco .wp-block-button__link,
.banda--noche .calco .wp-block-button__link,
.banda--navy .placa .wp-block-button__link,
.banda--noche .placa .wp-block-button__link{
	background:var(--naranja-fuerte); color:var(--blanco);
	border-color:var(--navy); box-shadow:var(--golpe-corto);
}

/* --- secundario: hueco, para no competir con el primario --- */
.wp-block-button.is-style-hueco > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link{
	background:transparent; color:var(--navy); border-color:var(--navy);
}
.sobre-navy .wp-block-button.is-style-hueco > .wp-block-button__link,
.sobre-navy .wp-block-button.is-style-outline > .wp-block-button__link,
.banda--navy .wp-block-button.is-style-hueco > .wp-block-button__link,
.banda--noche .wp-block-button.is-style-hueco > .wp-block-button__link{
	background:transparent; color:var(--blanco);
	border-color:var(--blanco); box-shadow:4px 4px 0 var(--celeste);
}
.sobre-navy .wp-block-button.is-style-hueco > .wp-block-button__link:hover,
.sobre-navy .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.banda--navy .wp-block-button.is-style-hueco > .wp-block-button__link:hover,
.banda--noche .wp-block-button.is-style-hueco > .wp-block-button__link:hover{
	background:var(--blanco); color:var(--navy);
}

/* ============================================================
   9 · ENCABEZADO
   ============================================================ */
.sitio-header{
	position:sticky; top:0; z-index:60;
	background:var(--navy);
	/* el color se declara acá: los enlaces de core/navigation heredan
	   currentColor y, sin esto, salían azules sobre azul */
	color:var(--bruma);
}
.admin-bar .sitio-header{ top:32px; }
@media (max-width:782px){ .admin-bar .sitio-header{ top:46px; } }

.sitio-header__barra{
	display:flex; align-items:center; gap:var(--aire-fila);
	max-width:var(--ancho); margin-inline:auto; width:100%;
	padding-block:.75rem;
}
.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto; }
.marca img, .marca .custom-logo{
	width:clamp(38px,4.4vw,50px); height:auto; display:block;
	filter:drop-shadow(0 2px 5px rgba(0,0,0,.4));
}
.marca__texto{ display:flex; flex-direction:column; line-height:1; }
.marca__nombre{
	font-family:var(--display); font-weight:900; font-stretch:var(--ancho-titulo);
	text-transform:uppercase; letter-spacing:-.02em; font-size:var(--t-marca);
	color:var(--blanco);
}
.marca__lugar{
	font-family:var(--mono); font-size:var(--t-etiqueta-sm); font-weight:700; letter-spacing:.2em;
	text-transform:uppercase; color:var(--celeste); margin-top:.3rem;
}

.sitio-header .wp-block-navigation{ flex:1 1 auto; }
.sitio-header .wp-block-navigation a,
.sitio-header .wp-block-navigation .wp-block-navigation-item__content{
	font-family:var(--display); font-weight:700; font-stretch:var(--ancho-ui);
	text-transform:uppercase; letter-spacing:.04em; font-size:var(--t-nav);
	color:var(--bruma); text-decoration:none; padding:.45rem .1rem;
}
.sitio-header .wp-block-navigation__responsive-container.is-menu-open{
	background:var(--navy); padding-top:clamp(3rem,8vw,5rem);
}
.sitio-header .wp-block-navigation__responsive-container.is-menu-open a{ font-size:var(--t-menu); }
.sitio-header .wp-block-navigation__responsive-container-open,
.sitio-header .wp-block-navigation__responsive-container-close{ color:var(--bruma); }

/* WooCommerce inserta solo su bloque de cuenta en el encabezado */
.sitio-header .wp-block-woocommerce-customer-account{ display:flex; align-items:center; }
.sitio-header .wp-block-woocommerce-customer-account a{ color:var(--bruma); text-decoration:none; }
.sitio-header .wp-block-woocommerce-customer-account a:hover{ color:var(--oro); }
.sitio-header .wp-block-woocommerce-customer-account svg{ fill:currentColor; }
.sitio-header .wp-block-navigation a:hover{ color:var(--oro); }
.sitio-header .wp-block-navigation .current-menu-item a{
	color:var(--blanco); box-shadow:inset 0 -3px 0 var(--naranja);
}

.header__acciones{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; margin-left:auto; }
.header__acciones .wp-block-search__button,
.header__acciones .wc-block-mini-cart__button{
	background:transparent; border:2px solid rgba(231,238,244,.35); border-radius:var(--radio);
	color:var(--bruma); box-shadow:none;
}
.header__acciones .wc-block-mini-cart__button:hover{ border-color:var(--oro); color:var(--oro); }
.header__acciones .wc-block-mini-cart__badge{
	background:var(--naranja); color:var(--blanco); border:2px solid var(--navy);
	font-family:var(--mono); font-weight:700;
}
.header__acciones .wp-block-search__input{
	background:rgba(255,255,255,.08); border:2px solid rgba(231,238,244,.3);
	border-radius:var(--radio); color:var(--blanco); padding:.5rem .75rem; font-size:var(--t-cuerpo-sm);
	min-width:min(34vw,240px);
}
.header__acciones .wp-block-search__input::placeholder{ color:rgba(231,238,244,.6); }
.header__acciones .wp-block-search__input:focus{ border-color:var(--celeste); outline:none; }

/* ============================================================
   10 · PORTADA
   ============================================================ */
.portada{ position:relative; overflow:hidden; }
.portada__grilla{
	position:relative; z-index:2;
	display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);
	gap:var(--aire-columna); align-items:center;
	max-width:var(--ancho); margin-inline:auto; width:100%;
	padding-block:var(--aire-portada);
}
.portada__titulo{
	font-size:var(--t-cartel);
	font-weight:900; font-stretch:var(--ancho-cartel); line-height:.94; letter-spacing:-.025em;
	text-transform:uppercase; color:var(--blanco); margin:.6rem 0 0;
}
.portada__titulo em{
	font-style:normal; color:var(--oro);
	display:block;
}
.portada__bajada{
	font-size:var(--t-guia); line-height:1.5; max-width:46ch;
	color:var(--tinta-clara); margin:1.25rem 0 0;
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

.portada__calco{ position:relative; z-index:2; justify-self:center; }
/* el arco está posicionado: sin esto le gana en pintura al texto, que es
   contenido estático, y se le come el titular */
.portada > .ancho,
.portada > .medida{ position:relative; z-index:2; }
.portada__calco img{
	width:clamp(190px,25vw,330px); display:block;
	transform:rotate(-5deg);
	filter:drop-shadow(10px 12px 0 rgba(10,27,51,.45));
}
@media (prefers-reduced-motion:no-preference){
	.portada__calco img{ animation:calco-entra .9s var(--curva) .15s both; }
	@keyframes calco-entra{
		from{ transform:rotate(-14deg) scale(.9); opacity:0; }
		to  { transform:rotate(-5deg) scale(1); opacity:1; }
	}
	.portada__grilla > * > *{ animation:sube .6s var(--curva) both; }
	.portada__grilla > * > *:nth-child(2){ animation-delay:.06s; }
	.portada__grilla > * > *:nth-child(3){ animation-delay:.12s; }
	.portada__grilla > * > *:nth-child(4){ animation-delay:.18s; }
	@keyframes sube{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
}

/* ============================================================
   11 · EL PARTE
   Tira de datos reales de la tienda, leída como parte de olas.
   ============================================================ */
.parte{
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
	align-items:stretch;
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
.parte__item{
	display:flex; flex-direction:column; gap:.3rem;
	padding:var(--aire-ficha);
	border-left:2px solid rgba(18,48,94,.18);
}
.parte__item:first-child{ border-left:0; }
.parte__clave{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.18em; text-transform:uppercase; color:var(--navy); opacity:.66;
}
.parte__valor{
	font-family:var(--display); font-weight:800; font-stretch:var(--ancho-titulo);
	font-size:var(--t-sub); text-transform:uppercase;
	letter-spacing:-.01em; color:var(--navy);
}

/* ============================================================
   12 · SECCIONES
   ============================================================ */
.seccion{ padding-block:var(--aire-banda); }
.seccion__cabeza{
	display:flex; align-items:flex-end; justify-content:space-between;
	gap:1.25rem; flex-wrap:wrap; margin-bottom:var(--aire-cabeza);
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
.seccion__cabeza h2{ margin:.4rem 0 0; }
.seccion__enlace{
	font-family:var(--mono); font-size:var(--t-dato); font-weight:700;
	letter-spacing:.12em; text-transform:uppercase;
	text-decoration:none; border-bottom:3px solid var(--naranja); padding-bottom:3px;
}
.seccion__enlace:hover{ border-bottom-color:var(--navy); }

/* --- rubros: cuatro calcos --- */
.rubros{
	display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
	gap:var(--aire-grilla);
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
/* La foto la pone el rubro: es la prenda más nueva del cajón. Sin imagen
   estas fichas eran cuatro rectángulos vacíos que parecían fotos rotas. */
.rubro{
	position:relative; display:block; overflow:hidden; padding:0;
	aspect-ratio:4/5; text-decoration:none; background:var(--navy);
}
.rubro__foto{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	transition:transform .55s var(--curva);
}
a.rubro:hover .rubro__foto,
a.rubro:focus-visible .rubro__foto{ transform:scale(1.05); }

/* velo: el nombre tiene que leerse sobre cualquier foto, clara u oscura */
.rubro::after{
	content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:linear-gradient(to top,
		rgba(10,27,51,.94) 0%,
		rgba(10,27,51,.74) 24%,
		rgba(10,27,51,.22) 56%,
		rgba(10,27,51,0) 82%);
}
.rubro__cuerpo{
	position:absolute; inset:auto 0 0 0; z-index:2;
	display:flex; flex-direction:column; gap:.3rem; padding:1.1rem;
}
.rubro__nombre{
	font-family:var(--display); font-weight:900; font-stretch:var(--ancho-titulo);
	text-transform:uppercase; letter-spacing:-.015em;
	font-size:var(--t-sub); color:var(--blanco); line-height:1;
}
.rubro__n{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.16em; text-transform:uppercase; color:var(--oro);
	font-variant-numeric:tabular-nums;
}

/* --- historia: una línea de años de verdad --- */
.historia{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
	gap:var(--aire-columna); align-items:start;
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
.hitos{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.hito{
	display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.1rem;
	padding:1rem 0; border-top:2px solid rgba(231,238,244,.22);
}
.hito:last-child{ border-bottom:2px solid rgba(231,238,244,.22); }
.hito__ano{
	font-family:var(--mono); font-size:var(--t-dato); font-weight:700;
	letter-spacing:.06em; color:var(--oro); padding-top:.15rem;
}
.hito__que{ margin:0; color:var(--tinta-clara); }
.hito__que b{ color:var(--blanco); font-weight:700; }

/* --- beneficios --- */
.beneficios{
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
	gap:var(--aire-grilla);
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
.beneficio{ padding:var(--aire-ficha); }
.beneficio h3{ margin:.55rem 0 .4rem; font-size:var(--t-sub); }
.beneficio p{ margin:0; font-size:var(--t-cuerpo-sm); line-height:1.55; }

/* --- lista --- */
.lista{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
	gap:var(--aire-columna); align-items:center;
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
.lista .wp-block-search__inside-wrapper{ gap:.6rem; flex-wrap:wrap; }
.lista .wp-block-search__input{ min-width:0; flex:1 1 12rem; }
.lista .wp-block-search__input{
	background:var(--blanco); border:var(--troquel) solid var(--navy); border-radius:var(--radio);
	padding:.85rem 1rem; font-size:var(--t-cuerpo); color:var(--navy);
}

/* ============================================================
   13 · PIE
   ============================================================ */
.sitio-footer{ background:var(--noche); color:var(--tinta-pie); }
.footer__grilla{
	display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
	gap:var(--aire-columna);
	max-width:var(--ancho); margin-inline:auto; width:100%;
	padding-block:var(--aire-banda);
}
.footer__grilla h2{ font-size:var(--t-etiqueta); font-family:var(--mono); font-weight:700;
	letter-spacing:.16em; text-transform:uppercase; color:var(--celeste);
	font-stretch:var(--ancho-ui); margin:0 0 1rem; padding-bottom:.6rem;
	border-bottom:2px solid rgba(116,172,223,.3); }
.footer__grilla ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer__grilla a{ color:var(--tinta-pie); text-decoration:none; font-size:var(--t-cuerpo-sm); overflow-wrap:anywhere; }
.footer__grilla a:hover{ color:var(--oro); text-decoration:underline; }
.footer__marca img{ width:104px; margin-bottom:1rem; }
.footer__legal{
	display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
	max-width:var(--ancho); margin-inline:auto; width:100%;
	padding-block:1.25rem; border-top:2px solid rgba(185,200,218,.16);
	font-family:var(--mono); font-size:var(--t-etiqueta-sm); letter-spacing:.06em; color:var(--tinta-legal);
}

/* ============================================================
   14 · WOOCOMMERCE · CATÁLOGO

   product-collection envuelve al <ul.wc-block-product-template>
   junto con la paginación y el bloque «sin resultados». La grilla
   va en el <ul>, nunca en el envoltorio: ahí adentro WooCommerce
   reparte con auto-fill sobre el ancho real y, si el envoltorio
   ya era grilla, termina dibujando una tarjeta por fila.
   El selector lleva el tipo (ul) para ganarle a
   .wc-block-product-template__responsive.columns-N.
   ============================================================ */
.wp-block-woocommerce-product-collection{ display:block; --cols:3; }
.wp-block-woocommerce-product-collection.cols-2{ --cols:2; }
.wp-block-woocommerce-product-collection.cols-4{ --cols:4; }

.wp-block-woocommerce-product-collection > ul.wc-block-product-template{
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr));
	gap:var(--aire-grilla);
}
.wc-block-product-template{ list-style:none; margin:0; padding:0; }

/* --- la ficha de producto --- */
li.wc-block-product{
	position:relative; display:flex; flex-direction:column;
	background:var(--blanco); color:var(--navy);
	border:var(--troquel) solid var(--navy); border-radius:var(--radio-ficha);
	padding:.85rem .85rem 1.1rem; margin:0; width:auto; max-width:none;
	transition:transform .22s var(--curva), box-shadow .22s var(--curva);
}
li.wc-block-product:hover,
li.wc-block-product:focus-within{ transform:translate(-4px,-4px); box-shadow:var(--golpe-celeste); }
li.wc-block-product > *{ margin-block:0; }

/* la foto: sin recorte, porque la chapa de oferta cuelga afuera */
li.wc-block-product .wc-block-components-product-image,
.wc-block-components-product-image{
	position:relative; margin:0 0 .85rem; overflow:visible;
	border:2px solid rgba(18,48,94,.16); border-radius:2px;
	background:linear-gradient(165deg,#F4F8FB 0%,#DDE7F0 100%);
}
.wc-block-components-product-image a{ display:block; border-radius:inherit; }
.wc-block-components-product-image img{
	display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:inherit;
}

li.wc-block-product .wc-block-components-product-title,
li.wc-block-product .wp-block-post-title{
	font-family:var(--display); font-weight:800; font-stretch:var(--ancho-titulo);
	text-transform:uppercase; letter-spacing:-.012em; line-height:1.1;
	font-size:var(--t-ficha); margin:0 0 .5rem; color:var(--navy);
}
li.wc-block-product .wc-block-components-product-title a,
li.wc-block-product .wp-block-post-title a{ color:inherit; text-decoration:none; }
li.wc-block-product .wc-block-components-product-title a:hover,
li.wc-block-product .wp-block-post-title a:hover{ text-decoration:underline; text-decoration-color:var(--naranja); text-underline-offset:3px; }

/* rubro de la ficha, en voz de dato */
li.wc-block-product .wc-block-components-product-category-list,
li.wc-block-product .wp-block-post-terms{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.14em; text-transform:uppercase; color:var(--naranja-tinta);
	margin:0 0 .35rem;
}
li.wc-block-product .wp-block-post-terms a{ color:inherit; text-decoration:none; }

/* precios: monoespaciada, cifras tabulares */
li.wc-block-product .wc-block-components-product-price,
.wc-block-components-product-price{
	display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem;
	font-family:var(--mono); font-weight:700; font-size:var(--t-precio);
	font-variant-numeric:tabular-nums; color:var(--navy);
	margin:0 0 .9rem;
}
.wc-block-components-product-price__value.is-discounted,
.wc-block-components-product-price ins{ text-decoration:none; color:var(--naranja-tinta); }
.wc-block-components-product-price del,
.wc-block-components-product-price__regular{
	font-size:var(--t-dato); font-weight:400; color:var(--nota);
	text-decoration:line-through; text-decoration-thickness:2px;
	text-decoration-color:var(--naranja); opacity:1; order:-1;
}

li.wc-block-product .wp-block-woocommerce-product-button{ margin-top:auto; }
li.wc-block-product .wp-block-button,
li.wc-block-product .wc-block-components-product-button{ width:100%; }
li.wc-block-product .wp-block-button.wc-block-components-product-button > .wp-block-button__link{ width:100%; }
li.wc-block-product .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link{
	width:100%; justify-content:center;
	font-family:var(--display); font-size:var(--t-boton); font-weight:700; font-stretch:var(--ancho-ui);
	letter-spacing:.03em; text-transform:uppercase;
	padding:.8rem 1rem; border-radius:var(--radio);
	border:var(--troquel) solid var(--navy);
	background:var(--naranja-fuerte); color:var(--blanco); box-shadow:var(--golpe-corto);
}
li.wc-block-product .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover{
	background:var(--navy); color:var(--blanco);
}

/* la chapa de oferta, torcida y colgando de la esquina */
li.wc-block-product .wc-block-components-product-sale-badge,
.wc-block-components-product-sale-badge{
	position:absolute; top:-14px; left:-12px; right:auto; z-index:3; margin:0;
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.12em; text-transform:uppercase;
	background:var(--naranja); color:var(--blanco);
	border:var(--troquel) solid var(--blanco); border-radius:2px;
	padding:5px 10px; box-shadow:3px 3px 0 rgba(10,27,51,.5);
	transform:rotate(-6deg);
}
.wc-block-components-product-sale-badge__text{ font:inherit; }

/* ============================================================
   14b · WOOCOMMERCE · LA GRILLA VIEJA

   Dos lugares del recorrido no usan `wc-block-product` sino el
   marcado anterior, `wc-block-grid`: los relacionados de la ficha
   («Puede que te interese») y las recomendaciones del carrito
   vacío. Nunca habían recibido estilo, así que ahí el sitio se
   caía a los enlaces subrayados de fábrica de WooCommerce —justo
   en el carrito vacío, que es donde hay que ofrecer algo.
   Se les da la misma ficha que al resto del catálogo.
   ============================================================ */
.wc-block-grid__products{
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
	gap:var(--aire-grilla);
}
.wc-block-grid.has-3-columns{ --cols:3; }
.wc-block-grid.has-4-columns{ --cols:4; }

/* WooCommerce le pone a la celda `flex:1 0 25%` y `max-width:25%`. Dentro de
   una grilla ese 25% se mide contra la propia columna, no contra el
   contenedor: la ficha quedaba de 76px de ancho, con el texto en vertical.
   El selector lleva el `>` para ganarle en peso y sacarle las tres. */
.wc-block-grid__products > li.wc-block-grid__product{
	/* El `!important` va porque la regla de WooCommerce viene de una hoja a
	   la que el tema no le puede ganar por peso, y sin esto la ficha mide
	   76px. Es el mismo caso que la nota de `.wc-block-components-panel`
	   más abajo. */
	flex:initial !important;
	max-width:none !important;
	width:auto !important;
	min-width:0;
}
li.wc-block-grid__product{
	position:relative; display:flex; flex-direction:column;
	background:var(--blanco); color:var(--navy);
	border:var(--troquel) solid var(--navy); border-radius:var(--radio-ficha);
	box-shadow:var(--golpe-corto);
	padding:.85rem .85rem 1.1rem; margin:0; max-width:none; text-align:left;
	transition:transform .22s var(--curva), box-shadow .22s var(--curva);
}
li.wc-block-grid__product:hover,
li.wc-block-grid__product:focus-within{ transform:translate(-4px,-4px); box-shadow:var(--golpe-celeste); }
a.wc-block-grid__product-link{ text-decoration:none; color:inherit; }
/* WooCommerce centra título, precio y botón en esta grilla; el resto del
   catálogo los alinea a la izquierda. Se unifica. */
.wc-block-grid__product-title,
.wc-block-grid__product-price,
.wc-block-grid__product-onsale,
.wc-block-grid__product-rating{ text-align:left; justify-content:flex-start; }

.wc-block-grid__product-image{
	display:block; margin:0 0 .85rem; overflow:visible;
	border:var(--troquel-fino) solid rgba(18,48,94,.16); border-radius:2px;
	background:linear-gradient(165deg,#F4F8FB 0%,#DDE7F0 100%);
}
.wc-block-grid__product-image img{
	display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:inherit; margin:0;
}

.wc-block-grid__product-title{
	font-family:var(--display); font-weight:800; font-stretch:var(--ancho-titulo);
	text-transform:uppercase; letter-spacing:-.012em; line-height:1.1;
	font-size:var(--t-ficha); margin:0 0 .5rem; color:var(--navy);
}
.wc-block-grid__product-title a{ color:inherit; text-decoration:none; }
.wc-block-grid__product-title a:hover{
	text-decoration:underline; text-decoration-color:var(--naranja); text-underline-offset:3px;
}

.wc-block-grid__product-price{
	display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem;
	font-family:var(--mono); font-weight:700; font-size:var(--t-precio);
	font-variant-numeric:tabular-nums; color:var(--navy);
	margin:0 0 .9rem;
}
.wc-block-grid__product-price del{
	font-size:var(--t-dato); font-weight:400; color:var(--nota);
	text-decoration:line-through; text-decoration-thickness:2px;
	text-decoration-color:var(--naranja); opacity:1; order:-1;
}
.wc-block-grid__product-price ins{ text-decoration:none; color:var(--naranja-tinta); }

.wp-block-button.wc-block-grid__product-add-to-cart{ margin-top:auto; width:100%; }
.wp-block-button.wc-block-grid__product-add-to-cart > .wp-block-button__link{
	width:100%; justify-content:center;
	font-size:var(--t-boton); letter-spacing:.03em; text-transform:uppercase;
	padding:.8rem 1rem;
}

.wc-block-grid__product-onsale{
	position:absolute; top:-14px; left:-12px; right:auto; z-index:3; margin:0;
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.12em; text-transform:uppercase;
	background:var(--naranja); color:var(--blanco);
	border:var(--troquel) solid var(--blanco); border-radius:2px;
	padding:5px 10px; box-shadow:3px 3px 0 rgba(10,27,51,.5);
	transform:rotate(-6deg);
}

/* El carrito vacío: el título del núcleo trae un icono propio y queda
   centrado y suelto. Se le da la voz del sitio y una medida legible. */
.wc-block-cart__empty-cart__title{
	max-width:var(--medida); margin-inline:auto;
	font-size:var(--t-titulo);
}
.wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(.wc-block-cart__empty-cart__title){
	max-width:var(--ancho); margin:var(--aire-seccion) auto var(--aire-cabeza);
	text-align:left; font-size:var(--t-sub);
}
.wp-block-woocommerce-empty-cart-block .regla{ margin-block:var(--aire-seccion); }

@media (max-width:900px){ .wc-block-grid__products{ --cols:2; } }
@media (max-width:560px){ .wc-block-grid__products{ --cols:1; } }

/* ============================================================
   15 · WOOCOMMERCE · TIENDA (barra, filtros, paginación)
   ============================================================ */
.tienda{
	display:grid; grid-template-columns:270px minmax(0,1fr);
	gap:var(--aire-columna); align-items:start;
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
.tienda__barra{
	display:flex; align-items:center; justify-content:space-between;
	gap:1rem; flex-wrap:wrap; min-width:0;
	padding-bottom:.9rem; margin-bottom:1.5rem; border-bottom:var(--troquel) solid var(--navy);
}
.wp-block-woocommerce-product-results-count,
.wc-block-product-results-count{ font-family:var(--mono); font-size:var(--t-dato); letter-spacing:.06em; color:var(--navy); margin:0; }
/* El desplegable de orden mide 380px de contenido mínimo («Orden
   predeterminado» con su flecha), y en un contenedor flex los ítems no bajan
   de ahí: en el celular se salía 41px de la columna. Las filas flex del tema
   llevan min-width:0 para poder encogerse. */
.tienda__barra > *,
.seccion__cabeza > *,
.footer__legal > *,
.umbral__pie > *,
.horarios li > *{ min-width:0; max-width:100%; }

.wp-block-woocommerce-catalog-sorting select,
.wc-block-catalog-sorting select{
	max-width:100%;
	font-family:var(--mono); font-size:var(--t-dato); letter-spacing:.06em; text-transform:uppercase;
	color:var(--navy); background:var(--blanco);
	border:2px solid var(--navy); border-radius:var(--radio); padding:.6rem 2.2rem .6rem .85rem; cursor:pointer;
}

/* --- panel de filtros --- */
.filtros{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
.filtros .wc-block-product-filters,
.filtros .wc-block-product-filters__overlay,
.filtros .wc-block-product-filters__overlay-wrapper,
.filtros .wc-block-product-filters__overlay-dialog,
.filtros .wc-block-product-filters__overlay-content{ display:grid; gap:1rem; }
.filtros .wc-block-product-filters,
.filtros .wc-block-product-filters__overlay-content > *{ min-width:0; }
.filtros fieldset{ border:0; margin:0; padding:0; min-inline-size:0; }

.filtros .wp-block-woocommerce-product-filter-taxonomy,
.filtros .wp-block-woocommerce-product-filter-attribute,
.filtros .wp-block-woocommerce-product-filter-price,
.filtros .wp-block-woocommerce-product-filter-status,
.filtros .wp-block-woocommerce-product-filter-rating{
	background:var(--blanco); border:var(--troquel) solid var(--navy);
	border-radius:var(--radio-ficha); padding:1rem 1.1rem 1.15rem; box-shadow:var(--golpe-corto);
}
.filtros .filtro__h{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700; font-stretch:var(--ancho-ui);
	letter-spacing:.16em; text-transform:uppercase; color:var(--navy); line-height:1.2;
	margin:0 0 .85rem; padding-bottom:.55rem; border-bottom:3px solid var(--naranja);
}

/* la casilla se viste por las variables del propio bloque; sólo el
   trazo y el tamaño piden regla completa, porque WooCommerce los fija
   con input[type="checkbox"].clase */
.filtros .wp-block-woocommerce-product-filter-checkbox-list{
	--wc-product-filter-checkbox-list-option-element:var(--blanco);
	--wc-product-filter-checkbox-list-option-element-border:var(--navy);
	--wc-product-filter-checkbox-list-option-element-selected:var(--blanco);
	--wc-product-filter-checkbox-list-label-element:var(--navy);
}
.filtros .wc-block-product-filter-checkbox-list__input-wrapper::before{ display:none; }
.filtros .wc-block-product-filter-checkbox-list__input-wrapper{ flex:0 0 auto; }
.filtros .wc-block-product-filter-checkbox-list__items{ display:grid; gap:.15rem; margin:0; padding:0; list-style:none; }
.filtros .wc-block-product-filter-checkbox-list__label{
	display:flex; align-items:center; gap:.65rem; width:100%; margin:0;
	font-size:var(--t-cuerpo-sm); color:var(--navy); padding:.35rem .4rem; border-radius:2px; cursor:pointer;
	transition:background .16s ease;
}
.filtros .wc-block-product-filter-checkbox-list__label:hover{ background:var(--celeste-pale); }
.filtros input[type="checkbox"].wc-block-product-filter-checkbox-list__input{
	width:18px; height:18px; border-width:2px; border-radius:2px;
	transition:background .16s ease, border-color .16s ease;
}
.filtros input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked{
	background:var(--naranja-fuerte); border-color:var(--navy);
}
.filtros svg.wc-block-product-filter-checkbox-list__mark{ width:18px; height:18px; padding:3px; }
.filtros .wc-block-product-filter-checkbox-list__text-wrapper{
	display:flex; align-items:center; justify-content:space-between; gap:.5rem;
	flex:1; min-width:0; font-size:1em;
}
.filtros .wc-block-product-filter-checkbox-list__count{
	flex:0 0 auto; font-family:var(--mono); font-size:var(--t-etiqueta-sm); color:var(--nota); font-variant-numeric:tabular-nums;
}

.filtros .wc-block-product-filter-price-slider__content{ display:grid; gap:.4rem; }
.filtros .wc-block-product-filter-price-slider__range{
	position:relative; height:6px; margin:1.1rem .35rem 1rem;
	background:var(--celeste-pale); border:2px solid var(--navy); border-radius:99px;
}
.filtros .wc-block-product-filter-price-slider__range .range-bar{ background:var(--naranja); border-radius:99px; }
.filtros .wc-block-product-filter-price-slider__range input[type="range"]{ accent-color:var(--naranja-fuerte); }
.filtros .wc-block-product-filter-price-slider__content .text{ display:flex; }
.filtros .wc-block-product-filter-price-slider__left.text{ justify-content:flex-start; }
.filtros .wc-block-product-filter-price-slider__right.text{ justify-content:flex-end; }
.filtros .wp-block-woocommerce-product-filter-price input[type="text"]{
	width:100%; max-width:110px; font-family:var(--mono); font-size:var(--t-dato); color:var(--navy);
	background:var(--blanco); border:2px solid var(--navy); border-radius:var(--radio);
	padding:.5rem .6rem; text-align:center; font-variant-numeric:tabular-nums;
}
.filtros .wc-block-product-filter-removable-chips__items{
	display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none;
}
.filtros .wc-block-product-filter-removable-chips__item{
	display:inline-flex; align-items:center; gap:.5rem;
	font-family:var(--mono); font-size:var(--t-etiqueta-sm); font-weight:700; letter-spacing:.06em;
	padding:.4rem .7rem; border:2px solid var(--navy); border-radius:2px;
	background:var(--oro); color:var(--navy);
}
.filtros .wc-block-product-filter-clear-button{
	font-family:var(--mono); font-size:var(--t-etiqueta-sm); font-weight:700; letter-spacing:.1em;
	text-transform:uppercase; color:var(--naranja-tinta);
}
.filtros .wc-block-product-filters__open-overlay{
	font-family:var(--display); font-weight:700; font-stretch:var(--ancho-ui); font-size:var(--t-boton);
	text-transform:uppercase; letter-spacing:.04em;
	padding:.8rem 1.2rem; border:var(--troquel) solid var(--navy); border-radius:var(--radio);
	background:var(--blanco); color:var(--navy); box-shadow:var(--golpe-corto); cursor:pointer;
}

/* --- paginación --- */
.wp-block-query-pagination{ margin-top:var(--aire-seccion); gap:.5rem; }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers{
	font-family:var(--mono); font-size:var(--t-dato); font-weight:700;
	min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
	border:2px solid var(--navy); border-radius:var(--radio);
	background:var(--blanco); color:var(--navy); text-decoration:none;
}
.wp-block-query-pagination .current{ background:var(--navy); color:var(--blanco); }

/* --- la miga de pan ---
   No tenía una sola regla del tema: llegaba con el `white-space:nowrap` de
   WooCommerce y en el celular empujaba la página 47px a la derecha, con
   scroll horizontal en toda la ficha de producto. */
.woocommerce-breadcrumb{
	display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .5rem;
	white-space:normal; margin:0;
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.12em; text-transform:uppercase; line-height:1.4;
}
.woocommerce-breadcrumb a{ text-decoration:none; }
.woocommerce-breadcrumb a:hover{ text-decoration:underline; text-underline-offset:3px; }
.banda--navy .woocommerce-breadcrumb,
.banda--noche .woocommerce-breadcrumb{ color:var(--celeste-pale); }

/* ============================================================
   16 · WOOCOMMERCE · FICHA, CARRITO Y PAGO
   ============================================================ */
.producto{
	display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
	gap:var(--aire-columna); align-items:start;
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
.producto .wc-block-components-product-image img,
.wp-block-woocommerce-product-image-gallery img{ border:var(--troquel) solid var(--navy); border-radius:var(--radio-ficha); }
.wp-block-woocommerce-product-price .woocommerce-Price-amount{
	font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
}
.producto .wp-block-woocommerce-product-price{ font-size:var(--t-precio-grande); color:var(--navy); }

.wc-block-cart, .wc-block-checkout{ color:var(--navy); }
.wc-block-cart-items th,
.wc-block-components-totals-item__label{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount{ font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; }
.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block{
	border-color:rgba(18,48,94,.2)!important;
}
.wp-block-woocommerce-checkout-order-summary-block{
	background:var(--blanco); border:var(--troquel) solid var(--navy);
	border-radius:var(--radio-ficha); box-shadow:var(--golpe-corto); padding:1.25rem;
}
.wc-block-components-product-badge.wc-block-components-sale-badge{
	background:var(--oro); color:var(--navy); border:2px solid var(--navy); border-radius:2px;
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700; padding:3px 8px;
}

/* Campos del checkout. WooCommerce antepone .wc-block-components-form a
   estos selectores, así que la regla del tema necesita ese peso o vuelve
   al blanco de fábrica. El alto propio evita que la etiqueta flotante
   corte el valor del <select>. */
.wc-block-components-form .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
.wc-block-components-form .wc-block-components-textarea,
.wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-blocks-components-select .wc-blocks-components-select__select{
	width:100%; font-family:var(--display); font-size:var(--t-cuerpo); line-height:1.4; color:var(--navy);
	background:var(--blanco); border:2px solid var(--navy); border-radius:var(--radio);
	height:auto; min-height:58px; padding:1.4rem 1rem .5rem; box-shadow:none;
	transition:border-color .16s ease, box-shadow .16s ease;
}
.wc-block-components-form .wc-block-components-textarea{ border-radius:var(--radio); min-height:120px; }
.wc-block-components-form .wc-block-components-text-input input::placeholder{ color:var(--nota); }
.wc-block-components-form .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]):focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus{
	outline:none; border-color:var(--naranja); box-shadow:0 0 0 3px var(--celeste-pale);
}
.wc-block-components-form .wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label{
	left:1.05rem; font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.1em; text-transform:uppercase; color:var(--nota);
}
.wc-block-components-button:not(.is-link){
	font-family:var(--display); font-weight:700; font-stretch:var(--ancho-ui); text-transform:uppercase;
	letter-spacing:.04em; border-radius:var(--radio);
	border:var(--troquel) solid var(--navy); box-shadow:var(--golpe-corto);
	background:var(--naranja-fuerte); color:var(--blanco);
}
.wc-block-components-button:not(.is-link):hover{ background:var(--navy); transform:translate(-2px,-2px); box-shadow:var(--golpe); }
/* Los avisos del carrito y del pago venían con el verde y el rojo de fábrica
   de WooCommerce, que no son colores de este sitio. Van con la ficha del
   tema y una barra de color al costado, igual que .aviso en el formulario. */
.wc-block-components-notice-banner{
	border-radius:var(--radio-ficha); border:var(--troquel-fino) solid var(--navy);
	background:var(--blanco); color:var(--navy);
	padding:1rem 1.2rem; font-size:var(--t-cuerpo-sm);
}
.wc-block-components-notice-banner > svg{ fill:var(--navy); }
.wc-block-components-notice-banner.is-success{ border-left:8px solid var(--celeste); }
.wc-block-components-notice-banner.is-info{ border-left:8px solid var(--oro); }
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning{ border-left:8px solid var(--naranja); }
.wc-block-components-notice-banner.is-error > svg,
.wc-block-components-notice-banner.is-warning > svg{ fill:var(--naranja-tinta); }
.wc-block-components-notice-banner a{ color:var(--naranja-tinta); }

/* ============================================================
   16b · WOOCOMMERCE · MI CUENTA

   Esta pantalla no tenía una sola regla: WooCommerce la dibuja con
   su marcado viejo y salía como una lista de enlaces subrayados al
   lado de un párrafo. Es una de las cuatro páginas del recorrido de
   compra, así que lleva el mismo sistema que el resto.
   ============================================================ */
/* page.html envuelve el contenido en .medida, que son 760px de medida de
   lectura: correcto para prosa, angosto para un panel de dos columnas. En
   las pantallas de cuenta el panel se lleva el ancho grande. La clase va
   repetida y con el body delante para ganarle a .medida.medida. */
.woocommerce-account .medida.medida{ max-width:var(--ancho); }
.woocommerce-account .entry-content.entry-content{ max-width:none; }
/* y WooCommerce le pone 1000px al contenedor */
.woocommerce-account .woocommerce{ max-width:var(--ancho) !important; }

/* WooCommerce flota la navegación y le da un ancho en porcentaje; dentro de
   una grilla eso la deja en 139px. Se la suelta de las dos cosas. */
.woocommerce-MyAccount-navigation{ float:none !important; width:auto !important; margin:0; }
.woocommerce-MyAccount-content{ float:none !important; width:auto !important; }

.woocommerce-account .woocommerce{
	display:grid; grid-template-columns:250px minmax(0,1fr);
	gap:var(--aire-columna); align-items:start;
	max-width:var(--ancho); margin-inline:auto; width:100%;
	padding-block:var(--aire-banda);
}
.woocommerce-account .woocommerce-notices-wrapper{ grid-column:1/-1; }
/* la ubicación va declarada: WooCommerce mete envoltorios sueltos entre
   los dos paneles y sin esto la navegación se va a la columna equivocada */
.woocommerce-account .woocommerce-MyAccount-navigation{ grid-column:1; grid-row:2; }
.woocommerce-account .woocommerce-MyAccount-content{ grid-column:2; grid-row:2; }
@media (max-width:820px){
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content{ grid-column:1; grid-row:auto; }
}

.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
/* el peso del selector es para ganarle al margen que WooCommerce le pone a
   cada <li>: la lista tiene que leerse como una pila continua de pestañas */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link{ margin:0; padding:0; }
.woocommerce-MyAccount-navigation-link a{
	display:block; padding:.85rem 1rem; text-decoration:none;
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.12em; text-transform:uppercase; color:var(--navy);
	background:var(--blanco);
	border:var(--troquel-fino) solid rgba(18,48,94,.2); border-bottom-width:0;
	transition:background .16s ease, color .16s ease;
}
.woocommerce-MyAccount-navigation-link:last-child a{ border-bottom-width:var(--troquel-fino); }
.woocommerce-MyAccount-navigation-link a:hover{ background:var(--celeste-pale); }
.woocommerce-MyAccount-navigation-link.is-active a{
	background:var(--navy); color:var(--blanco); border-color:var(--navy);
}
.woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--naranja-tinta); }
.woocommerce-MyAccount-navigation-link--customer-logout.is-active a{ color:var(--blanco); }

.woocommerce-MyAccount-content{
	background:var(--blanco); color:var(--navy);
	border:var(--troquel) solid var(--navy); border-radius:var(--radio-ficha);
	box-shadow:var(--golpe-corto);
	padding:var(--aire-ficha-grande);
}
.woocommerce-MyAccount-content > *:first-child{ margin-block-start:0; }
.woocommerce-MyAccount-content > *:last-child{ margin-block-end:0; }
.woocommerce-MyAccount-content p{ margin:0 0 .9rem; }
.woocommerce-MyAccount-content a:not(.wp-element-button){ color:var(--naranja-tinta); }

/* las tablas de pedidos y descargas */
.woocommerce-MyAccount-content table{
	width:100%; border-collapse:collapse; font-size:var(--t-cuerpo-sm);
}
.woocommerce-MyAccount-content th{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.14em; text-transform:uppercase; text-align:left; color:var(--navy);
	padding:.7rem .8rem; border-bottom:var(--troquel) solid var(--naranja); white-space:nowrap;
}
.woocommerce-MyAccount-content td{
	padding:.9rem .8rem; border-bottom:var(--troquel-fino) solid rgba(18,48,94,.14); vertical-align:top;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a{ font-family:var(--mono); font-weight:700; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-total{
	font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
}

/* formularios de la cuenta: heredan el sistema de campos del taller */
.woocommerce-MyAccount-content form .form-row,
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row{ display:grid; gap:.45rem; margin:0 0 1.1rem; }
.woocommerce-MyAccount-content label,
.woocommerce-form label{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.14em; text-transform:uppercase; color:var(--nota);
}
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea,
.woocommerce-form input.input-text{
	width:100%; font-family:var(--display); font-size:var(--t-cuerpo); line-height:1.45; color:var(--navy);
	background:var(--blanco); border:var(--troquel-fino) solid var(--navy); border-radius:var(--radio);
	padding:.85rem 1rem;
	transition:border-color .16s ease, box-shadow .16s ease;
}
.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce-form input.input-text:focus{
	outline:none; border-color:var(--naranja); box-shadow:0 0 0 3px var(--celeste-pale);
}
.woocommerce-MyAccount-content fieldset{
	border:var(--troquel-fino) solid rgba(18,48,94,.2); border-radius:var(--radio-ficha);
	padding:var(--aire-ficha); margin:1.5rem 0 1.1rem;
}
.woocommerce-MyAccount-content legend{
	font-family:var(--display); font-weight:800; font-stretch:var(--ancho-titulo);
	text-transform:uppercase; font-size:var(--t-ficha); padding-inline:.4rem;
}
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-form button[type="submit"]{
	display:inline-flex; align-items:center; justify-content:center;
	font-family:var(--display); font-weight:700; font-stretch:var(--ancho-ui);
	font-size:var(--t-boton); letter-spacing:.02em; text-transform:uppercase;
	padding:.95rem 1.6rem; cursor:pointer;
	background:var(--naranja-fuerte); color:var(--blanco);
	border:var(--troquel) solid var(--navy); border-radius:var(--radio);
	box-shadow:var(--golpe-corto);
	transition:transform .18s var(--curva), box-shadow .18s var(--curva), background-color .18s ease;
}
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-form button[type="submit"]:hover{
	background:var(--navy); transform:translate(-2px,-2px); box-shadow:var(--golpe);
}
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error{
	list-style:none; margin:0 0 1.25rem; padding:1rem 1.2rem;
	background:var(--blanco); border:var(--troquel-fino) solid var(--navy);
	border-left:8px solid var(--celeste); border-radius:var(--radio-ficha);
	font-size:var(--t-cuerpo-sm);
}
.woocommerce-notices-wrapper .woocommerce-error{ border-left-color:var(--naranja); }

/* el portón de ingreso, cuando nadie inició sesión */
.woocommerce-account:not(.logged-in) .woocommerce{ grid-template-columns:minmax(0,1fr); }
.woocommerce-account .u-columns{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:var(--aire-grilla);
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2{ min-width:0; }
.woocommerce-account h2{ font-size:var(--t-sub); margin:0 0 1rem; }

@media (max-width:820px){
	.woocommerce-account .woocommerce{ grid-template-columns:minmax(0,1fr); }
}

/* ============================================================
   17 · CONTENIDO EDITORIAL
   ============================================================ */
.entrada__cabeza{ max-width:var(--medida); margin-inline:auto; }
.wp-block-post-content > *{ margin-block:1.1em 0; }
.wp-block-post-content > *:first-child{ margin-block-start:0; }
.wp-block-quote{
	border-left:5px solid var(--naranja); margin:1.75rem 0; padding:.25rem 0 .25rem 1.25rem;
	font-style:normal;
}
.wp-block-quote cite{ font-family:var(--mono); font-size:var(--t-dato); font-style:normal; color:var(--nota); }
.wp-block-post-content :where(ul,ol){ padding-left:1.25rem; }
.wp-block-post-content li{ margin-block:.35rem; }
.wp-block-table td, .wp-block-table th{ border-color:rgba(18,48,94,.2); }

/* ============================================================
   18 · RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
	.rubros{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.tienda{ grid-template-columns:minmax(0,1fr); }
	.footer__grilla{ grid-template-columns:minmax(0,1fr) 1fr; }
}
@media (max-width:900px){
	.portada__grilla{ grid-template-columns:minmax(0,1fr); text-align:left; }
	.portada__calco{ order:-1; justify-self:start; }
	.portada__calco img{ width:clamp(150px,34vw,220px); }
	.arco--portada{ right:-38%; top:-34%; width:min(96vw,560px); }
	.historia{ grid-template-columns:minmax(0,1fr); }
	.producto{ grid-template-columns:minmax(0,1fr); }
	.lista{ grid-template-columns:minmax(0,1fr); }
	.wp-block-woocommerce-product-collection{ --cols:2; }
	.wp-block-woocommerce-product-collection.cols-4{ --cols:2; }
}
@media (max-width:760px){
	/* El encabezado se apilaba en tres filas —marca, acciones, hamburguesa— y
	   se comía 140px antes de que empezara la página. Queda en una sola fila:
	   marca · cuenta · carrito · menú. El buscador sale del encabezado: en el
	   celular abría una cuarta fila, y Tienda está en el menú con sus filtros. */
	.sitio-header__barra{ flex-wrap:nowrap; row-gap:0; gap:.55rem; }
	.sitio-header .wp-block-navigation{ order:4; flex:0 0 auto; }
	.header__acciones{ order:3; margin-left:0; gap:.35rem; flex:0 0 auto; }
	.header__acciones .wp-block-search{ display:none; }
	/* la marca no se encogía y con sus dos renglones medía 308 de los 354
	   disponibles: empujaba el carrito y el menú fuera de la pantalla */
	.marca{ min-width:0; }
	.marca__texto{ min-width:0; }
	.marca__nombre{ white-space:nowrap; }
	.marca__lugar{ display:none; }
	/* el bloque de cuenta cuelga directo de la barra, no de .header__acciones */
	.sitio-header .wp-block-woocommerce-customer-account{ order:2; margin-left:auto; flex:0 0 auto; }
	.parte{ grid-template-columns:minmax(0,1fr); }
	.parte__item{ border-left:0; border-top:2px solid rgba(18,48,94,.18); }
	.parte__item:first-child{ border-top:0; }
	.beneficios{ grid-template-columns:minmax(0,1fr); }
	.seccion__cabeza{ align-items:flex-start; }
}
@media (max-width:560px){
	.rubros{ grid-template-columns:minmax(0,1fr); }
	.rubro{ aspect-ratio:16/10; }
	.footer__grilla{ grid-template-columns:minmax(0,1fr); }
	.wp-block-woocommerce-product-collection,
	.wp-block-woocommerce-product-collection.cols-4{ --cols:1; }
}

/* ============================================================
   19 · MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:.001ms!important; animation-iteration-count:1!important;
		transition-duration:.001ms!important; scroll-behavior:auto!important;
	}
	.arco, .portada__calco img, .portada__grilla > * > *{ animation:none!important; opacity:1!important; transform:none!important; }
	.portada__calco img{ transform:rotate(-5deg)!important; }
}

/* ============================================================
   20 · EDITOR
   Las animaciones de entrada no corren en el editor: sin ellas
   los bloques quedarían invisibles al editarlos.
   ============================================================ */
.editor-styles-wrapper .arco,
.editor-styles-wrapper .portada__calco img,
.editor-styles-wrapper .portada__grilla > * > *{
	animation:none!important; opacity:1!important;
}

/* --- ficha de producto: alto de la galería y meta --- */
.producto .wp-block-woocommerce-product-image-gallery,
.producto .woocommerce-product-gallery{ margin:0; }
.producto .woocommerce-product-gallery__image img,
.producto .wp-block-woocommerce-product-image-gallery img:not(.zoomImg){
	width:100%; aspect-ratio:4/5; object-fit:cover;
	border:var(--troquel) solid var(--navy); border-radius:var(--radio-ficha);
}
.producto .woocommerce-product-gallery__trigger{ z-index:4; }
/* La lupa de WooCommerce inyecta un <img class="zoomImg"> con el ancho de la
   imagen original —504px sobre una columna de 354— y eso daba scroll
   horizontal en el celular. El recorte va en el envoltorio, que es lo que la
   lupa espera; el zoom sigue funcionando. */
.producto .woocommerce-product-gallery__image,
.producto .woocommerce-product-gallery__wrapper{ overflow:hidden; }
.pmeta{
	gap:1.25rem; font-family:var(--mono); font-size:var(--t-etiqueta-sm); letter-spacing:.08em;
	text-transform:uppercase; color:var(--nota);
	margin-top:1.25rem; padding-top:1rem; border-top:2px solid rgba(18,48,94,.18);
}
.pmeta a{ color:var(--naranja-tinta); }
.wp-block-woocommerce-product-details .wc-tabs li a,
.woocommerce-tabs .wc-tabs li a{
	font-family:var(--mono); font-size:var(--t-dato); font-weight:700;
	letter-spacing:.12em; text-transform:uppercase; color:var(--navy); text-decoration:none;
}
.wp-block-woocommerce-product-details .wc-tabs li.active a,
.woocommerce-tabs .wc-tabs li.active a{ color:var(--naranja-tinta); }

/* --- títulos de paso del checkout y del carrito --- */
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title{
	font-family:var(--display); font-weight:800; font-stretch:var(--ancho-titulo);
	text-transform:uppercase; letter-spacing:-.008em; color:var(--navy);
}
.wc-block-components-checkout-step__description{ color:var(--nota); }

/* --- pedido recibido ---
   WooCommerce dibuja esta pantalla con sus propios bloques y sin plantilla del
   tema. Es el último paso del recorrido —y el único que quedaba sin diseño—,
   así que se le da el aire, la tipografía y las fichas del resto del sitio. */
.wc-block-order-confirmation-status,
.wc-block-order-confirmation-summary,
.wc-block-order-confirmation-totals,
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-additional-information,
.wc-block-order-confirmation-downloads,
.woocommerce-verify-email{
	max-width:var(--ancho); margin-inline:auto;
}
.wc-block-order-confirmation-status{
	padding-top:var(--aire-banda);
	font-family:var(--display); font-weight:900; font-stretch:var(--ancho-cartel);
	text-transform:uppercase; letter-spacing:-.018em; line-height:1.02;
	font-size:var(--t-titulo); color:var(--navy);
}
/* la clase trae .alignwide, que en el núcleo vale 1240px: hay que ganarle
   para que el párrafo tenga una medida legible */
.wc-block-order-confirmation-status .wc-block-order-confirmation-status-description,
.wc-block-order-confirmation-status-description{
	font-family:var(--display); font-weight:400; font-stretch:var(--ancho-ui);
	text-transform:none; letter-spacing:0; line-height:1.62;
	font-size:var(--t-cuerpo); color:var(--navy);
	max-width:62ch; margin-top:1rem;
}
.wc-block-order-confirmation-totals table,
.wc-block-order-confirmation-summary{
	background:var(--blanco); border:var(--troquel) solid var(--navy);
	border-radius:var(--radio-ficha); box-shadow:var(--golpe-corto);
	padding:var(--aire-ficha); width:100%;
}
.wc-block-order-confirmation-totals th,
.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item__key{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.14em; text-transform:uppercase; color:var(--nota); text-align:left;
}
.wc-block-order-confirmation-totals td,
.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item__value{
	font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; color:var(--navy);
}
.wc-block-order-confirmation-billing-address address,
.wc-block-order-confirmation-shipping-address address{
	font-style:normal; line-height:1.6;
}
/* el portón de verificación por correo usa el marcado viejo de WooCommerce */
.woocommerce-verify-email{ padding-bottom:var(--aire-banda); }
.woocommerce-verify-email .form-row{ display:grid; gap:.45rem; max-width:420px; }
.woocommerce-verify-email label{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.14em; text-transform:uppercase; color:var(--nota);
}
.woocommerce-verify-email input.input-text{
	width:100%; font-family:var(--display); font-size:var(--t-cuerpo); color:var(--navy);
	background:var(--blanco); border:2px solid var(--navy); border-radius:var(--radio);
	padding:.85rem 1rem;
}
.woocommerce-verify-email input.input-text:focus{
	outline:none; border-color:var(--naranja); box-shadow:0 0 0 3px var(--celeste-pale);
}

/* ============================================================
   21 · PÁGINAS DE CONTENIDO
   Piezas que arman Nosotros, Envíos y Contacto.
   ============================================================ */

/* --- índice de la página --- */
.indice{
	display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
	padding:1rem 0; border-block:2px solid rgba(18,48,94,.16);
}
.indice__label{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.16em; text-transform:uppercase; color:var(--nota); margin:0 .4rem 0 0;
}
.indice a{
	font-family:var(--mono); font-size:var(--t-dato); font-weight:700;
	letter-spacing:.06em; text-decoration:none; color:var(--navy);
	padding:.45rem .8rem; border:2px solid var(--navy); border-radius:2px; background:var(--blanco);
	transition:background .16s ease, color .16s ease;
}
.indice a:hover{ background:var(--navy); color:var(--blanco); }

/* --- pasos: es una secuencia real, por eso van numerados --- */
.pasos{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:paso; }
.paso{
	display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1.25rem;
	align-items:start; padding:1.4rem 0; border-top:2px solid rgba(18,48,94,.16);
	counter-increment:paso;
}
.paso:last-child{ border-bottom:2px solid rgba(18,48,94,.16); }
.paso::before{
	content:counter(paso,decimal-leading-zero);
	font-family:var(--mono); font-size:var(--t-dato); font-weight:700; color:var(--naranja-tinta);
	padding-top:.2rem;
}
.paso h3{ margin:0 0 .4rem; font-size:var(--t-sub); }
.paso p{ margin:0; font-size:var(--t-cuerpo-sm); }
.paso__cuando{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700; letter-spacing:.08em;
	text-transform:uppercase; color:var(--nota); white-space:nowrap; padding-top:.25rem;
}
.banda--navy .paso, .banda--noche .paso{ border-color:rgba(231,238,244,.22); }
.banda--navy .paso__cuando, .banda--noche .paso__cuando{ color:var(--celeste); }

/* --- preguntas frecuentes --- */
.faq{ display:grid; gap:0; }
.faq details{
	border-top:2px solid rgba(18,48,94,.16); padding:0;
}
.faq details:last-of-type{ border-bottom:2px solid rgba(18,48,94,.16); }
.faq summary{
	cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative;
	font-family:var(--display); font-weight:700; font-stretch:var(--ancho-titulo);
	font-size:var(--t-ficha); color:var(--navy);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
	content:""; position:absolute; right:.35rem; top:1.45rem;
	width:14px; height:14px; pointer-events:none;
	background:
		linear-gradient(var(--naranja-fuerte),var(--naranja-fuerte)) center/14px 3px no-repeat,
		linear-gradient(var(--naranja-fuerte),var(--naranja-fuerte)) center/3px 14px no-repeat;
	transition:transform .2s var(--curva);
}
.faq details[open] summary::after{ background-size:14px 3px, 3px 0; }  /* la barra vertical se va: queda un menos */
.faq summary:hover{ color:var(--naranja-tinta); }
.faq__cuerpo{ padding:0 2.5rem 1.35rem 0; }
.faq__cuerpo > *:first-child{ margin-block-start:0; }
.faq__cuerpo p{ margin:0 0 .8rem; font-size:var(--t-cuerpo-sm); }
.faq__cuerpo p:last-child{ margin-bottom:0; }
.faq__cuerpo ul{ margin:.4rem 0 0; padding-left:1.15rem; font-size:var(--t-cuerpo-sm); }
.faq__cuerpo li{ margin-block:.35rem; }

/* --- tabla de zonas --- */
.tabla-scroll{ overflow-x:auto; }
.zonas{ width:100%; border-collapse:collapse; font-size:var(--t-cuerpo-sm); min-width:640px; }
.zonas caption{
	text-align:left; font-family:var(--mono); font-size:var(--t-etiqueta-sm); letter-spacing:.08em;
	text-transform:uppercase; color:var(--nota); padding-bottom:.85rem;
}
.zonas th{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700; letter-spacing:.14em;
	text-transform:uppercase; text-align:left; color:var(--navy);
	padding:.7rem .9rem; border-bottom:3px solid var(--naranja); white-space:nowrap;
}
.zonas td{ padding:1rem .9rem; border-bottom:2px solid rgba(18,48,94,.14); vertical-align:top; }
.zonas tbody tr:hover{ background:var(--celeste-pale); }
.zonas__zona{ font-family:var(--display); font-weight:800; font-stretch:var(--ancho-titulo); text-transform:uppercase; color:var(--navy); display:block; }
.zonas__nota{ display:block; font-size:var(--t-cuerpo-sm); color:var(--nota); margin-top:.2rem; }
.zonas__precio{ font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zonas__gratis{ display:block; font-family:var(--mono); font-size:var(--t-etiqueta-sm); font-weight:700; color:var(--naranja-tinta); margin-top:.2rem; }
.tabla-nota{ font-family:var(--mono); font-size:var(--t-etiqueta-sm); letter-spacing:.06em; color:var(--nota); margin:.85rem 0 0; }

/* --- umbral de envío gratis --- */
.umbral{ display:grid; gap:1rem; align-items:center; }
.umbral__barra{
	position:relative; height:16px; background:var(--blanco);
	border:var(--troquel) solid var(--navy); border-radius:99px; overflow:hidden;
}
.umbral__lleno{ position:absolute; inset:0 auto 0 0; background:var(--naranja); }
.umbral__pie{
	display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
	font-family:var(--mono); font-size:var(--t-dato); font-weight:700;
	letter-spacing:.06em; color:var(--navy); font-variant-numeric:tabular-nums;
}
.umbral__falta{ color:var(--naranja-tinta); }

/* --- datos de contacto --- */
.datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--aire-grilla); }
.dato-ficha{ padding:1.15rem 1.25rem 1.3rem; }
.dato-ficha h3{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700; font-stretch:var(--ancho-ui);
	letter-spacing:.16em; text-transform:uppercase; color:var(--nota);
	margin:0 0 .55rem; padding-bottom:.5rem; border-bottom:2px solid var(--naranja);
}
.dato-ficha p{ margin:0; font-size:var(--t-cuerpo); }
.dato-ficha a{ font-weight:600; }
.dato-ficha .nota{ display:block; font-size:var(--t-cuerpo-sm); color:var(--nota); margin-top:.5rem; }

/* --- horarios --- */
.horarios{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.horarios li{
	display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
	padding:.8rem 0; border-top:2px solid rgba(18,48,94,.14);
}
.horarios li:last-child{ border-bottom:2px solid rgba(18,48,94,.14); }
.horarios .dia{ font-weight:600; }
.horarios .hora{ font-family:var(--mono); font-size:var(--t-dato); font-weight:700; font-variant-numeric:tabular-nums; }
.horarios .cerrado{ color:var(--nota); }

/* --- cifras del taller --- */
.cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--aire-grilla); }
.cifra{ padding:1.25rem; }
.cifra__n{
	font-family:var(--mono); font-weight:700; font-size:var(--t-cifra);
	color:var(--naranja-tinta); font-variant-numeric:tabular-nums; line-height:1; display:block;
}
.banda--navy .cifra__n, .banda--noche .cifra__n{ color:var(--oro); }
.cifra__q{ display:block; margin-top:.6rem; font-size:var(--t-cuerpo-sm); }

/* --- listas de reglas y excepciones --- */
.lista-check{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.lista-check li{ position:relative; padding-left:1.9rem; font-size:var(--t-cuerpo-sm); }
.lista-check li::before{
	content:""; position:absolute; left:0; top:.42em; width:11px; height:11px;
	background:var(--naranja); border:2px solid var(--navy); border-radius:2px;
}
.lista-check--no li::before{ background:var(--celeste-pale); }
.banda--navy .lista-check li::before, .banda--noche .lista-check li::before{ border-color:var(--blanco); }

/* --- cierre de página --- */
.cierre{ display:grid; gap:1.25rem; justify-items:start; max-width:62ch; }
.cierre .wp-block-buttons{ margin-top:.35rem; }

/* ============================================================
   22 · FORMULARIO DEL TALLER
   El mismo sistema de campos que hereda el checkout.
   ============================================================ */
.formulario{ display:grid; gap:1.15rem; }
.formulario__par{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; }
.campo{ display:grid; gap:.45rem; margin:0; }
.campo label{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.14em; text-transform:uppercase; color:var(--nota);
}
.campo .req{ color:var(--naranja-tinta); }
.campo input[type="text"],
.campo input[type="email"],
.campo select,
.campo textarea{
	width:100%; font-family:var(--display); font-size:var(--t-cuerpo); line-height:1.45; color:var(--navy);
	background:var(--blanco); border:2px solid var(--navy); border-radius:var(--radio);
	padding:.85rem 1rem;
	transition:border-color .16s ease, box-shadow .16s ease;
}
.campo textarea{ resize:vertical; min-height:150px; }
.campo input::placeholder, .campo textarea::placeholder{ color:var(--nota); }
.campo input:focus, .campo select:focus, .campo textarea:focus{
	outline:none; border-color:var(--naranja); box-shadow:0 0 0 3px var(--celeste-pale);
}
.campo__ayuda{ font-size:var(--t-cuerpo-sm); color:var(--nota); }
.campo__err{ font-size:var(--t-cuerpo-sm); font-weight:600; color:var(--naranja-tinta); }
.campo--error input, .campo--error select, .campo--error textarea{
	border-color:var(--naranja-fuerte); background:#FDF0EA;
}
.campo--check{ grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.7rem; }
.campo--check input{ width:19px; height:19px; accent-color:var(--naranja-fuerte); margin:0; }
.campo--check label{
	font-family:var(--display); font-size:var(--t-cuerpo-sm); font-weight:400;
	letter-spacing:0; text-transform:none; color:var(--navy);
}
.formulario__enviar{ margin:.35rem 0 0; }
.formulario__enviar button{ cursor:pointer; }

.aviso{
	border:var(--troquel) solid var(--navy); border-radius:var(--radio-ficha);
	padding:1.25rem 1.4rem 1.4rem; box-shadow:var(--golpe-corto); background:var(--blanco);
}
.aviso h3{ margin:.4rem 0 .7rem; font-size:var(--t-sub); }
.aviso p{ margin:0 0 .6rem; font-size:var(--t-cuerpo-sm); }
.aviso p:last-child{ margin-bottom:0; }
.aviso ul{ margin:.4rem 0 0; padding-left:1.15rem; font-size:var(--t-cuerpo-sm); }
.aviso--ok{ border-left:10px solid var(--celeste); }
.aviso--ok .dato{ color:var(--aqua-ink,#1D6460); }
.aviso--error{ border-left:10px solid var(--naranja); }
.aviso--error .dato{ color:var(--naranja-tinta); }

/* --- comprobante de transferencia (plugin johnson-surf-pagos) ---------
   La caja donde el cliente sube el comprobante, en la confirmación del
   pedido y en Mi cuenta. Es la misma ficha que .aviso; el borde izquierdo
   en oro marca que el pago está a verificar. */
.comprobante{
	display:grid; gap:.85rem; margin-block:1.75rem;
	border:var(--troquel) solid var(--navy); border-radius:var(--radio-ficha);
	padding:1.25rem 1.4rem 1.4rem; box-shadow:var(--golpe-corto); background:var(--blanco);
}
.comprobante--verificar{ border-left:10px solid var(--oro); }
.comprobante > p{ margin:0; font-size:var(--t-cuerpo-sm); }
.comprobante .dato{ margin:0; }
.comprobante__titulo{ margin:0; font-size:var(--t-sub); }
.comprobante .aviso{ box-shadow:none; }
.comprobante .wc-bacs-bank-details{
	margin:0; padding:.9rem 1.1rem; list-style:none; display:grid; gap:.35rem;
	background:var(--bruma); border-radius:var(--radio-ficha);
	font-size:var(--t-cuerpo-sm);
}
.comprobante .wc-bacs-bank-details strong{ font-family:var(--mono); font-size:var(--t-dato); overflow-wrap:anywhere; }
.comprobante input[type="file"]{
	width:100%; font:inherit; font-size:var(--t-cuerpo-sm); color:var(--navy);
	padding:1rem; border:var(--troquel-fino) dashed var(--navy); border-radius:var(--radio-ficha);
	background:var(--bruma); cursor:pointer;
}
.comprobante input[type="file"]:focus-visible{ outline:3px solid var(--oro); outline-offset:2px; }
.comprobante input[type="file"]::file-selector-button{
	font:inherit; font-weight:700; margin-right:.9rem; padding:.45rem .9rem;
	border:var(--troquel-fino) solid var(--navy); border-radius:var(--radio-ficha);
	background:var(--blanco); color:var(--navy); cursor:pointer;
}

@media (max-width:700px){
	.formulario__par{ grid-template-columns:minmax(0,1fr); }
	.paso{ grid-template-columns:auto minmax(0,1fr); }
	.paso__cuando{ grid-column:2; padding-top:.5rem; }
}

/* ============================================================
   23 · SISTEMA DE PÁGINAS DE CONTENIDO
   La mesa de corte llevada a la página: una regla con cotas al
   borde, tres niveles de ficha en vez de uno, el dato que falta
   declarado con un sello, y la ranura que espera a la foto.
   ============================================================ */

/* --- la regla de medida --- */
.riel{ position:relative; padding-left:var(--riel-sangria); }
.riel::before{
	content:""; position:absolute; left:0; top:.35rem; bottom:.35rem; width:13px;
	border-right:2px solid var(--naranja);
	background-image:repeating-linear-gradient(to bottom,var(--naranja) 0 1.5px,transparent 1.5px 12px);
	background-size:8px 12px; background-position:right 2px top 0; background-repeat:repeat-y;
}
.banda--navy .riel::before, .banda--noche .riel::before{
	border-right-color:var(--oro);
	background-image:repeating-linear-gradient(to bottom,var(--oro) 0 1.5px,transparent 1.5px 12px);
}
/* la cota: dice en qué punto de la historia estás. Reemplaza al eyebrow. */
.cota{
	position:absolute; left:-1px; top:0; margin:0; z-index:2;
	writing-mode:vertical-rl; text-orientation:mixed;
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.18em; text-transform:uppercase;
	color:var(--naranja-tinta); padding:.55rem .15rem;
}
.banda--bruma .cota{ background:var(--bruma); }
.banda--celeste .cota{ background:var(--celeste-pale); }
.banda--navy .cota{ background:var(--navy); color:var(--oro); }
.banda--noche .cota{ background:var(--noche); color:var(--oro); }
.banda--blanca .cota{ background:var(--blanco); }
@media (max-width:640px){
	.riel{ padding-left:0; }
	.riel::before{ display:none; }
	.cota{
		position:static; writing-mode:horizontal-tb; display:inline-block;
		padding:.25rem .55rem; margin-bottom:.9rem;
		border:2px solid currentColor; border-radius:2px;
	}
}

/* --- banda blanca: hacía falta un fondo neutro para el muestrario --- */
.banda--blanca{ background:var(--blanco); color:var(--navy); }

/* --- segundo nivel de ficha: filete fino, sin sombra --- */
.placa{
	background:var(--blanco); color:var(--navy);
	border:2px solid rgba(18,48,94,.2); border-radius:var(--radio-ficha);
	padding:var(--aire-ficha);
}
.banda--navy .placa, .banda--noche .placa{
	background:transparent; border-color:rgba(199,224,242,.26); color:var(--tinta-clara);
}
.banda--navy .placa :where(h2,h3,h4), .banda--noche .placa :where(h2,h3,h4){ color:var(--blanco); }

/* --- el dato que todavía no tenemos, declarado --- */
.sello{
	display:inline-block;
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.1em; text-transform:uppercase;
	color:var(--naranja-tinta);
	border:2px solid var(--naranja-tinta); border-radius:3px;
	padding:.3rem .55rem; transform:rotate(-3deg);
	box-shadow:inset 0 0 0 1px rgba(196,64,15,.22);
}
.banda--navy .sello, .banda--noche .sello{
	color:var(--oro); border-color:var(--oro);
	box-shadow:inset 0 0 0 1px rgba(255,182,39,.26);
}

/* --- ranura de foto: el hueco dice qué foto va y para qué --- */
.ranura{
	display:grid; place-content:center; gap:.45rem; text-align:center;
	padding:var(--aire-ficha); border-radius:var(--radio-ficha);
	border:3px dashed var(--naranja); color:var(--navy); min-height:9rem;
	background:repeating-linear-gradient(45deg,rgba(232,83,31,.09) 0 8px,transparent 8px 16px);
}
.ranura__k{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.14em; text-transform:uppercase; color:var(--naranja-tinta); margin:0;
}
.ranura__q{ font-size:var(--t-cuerpo-sm); line-height:1.45; max-width:36ch; margin:0 auto; }
.ranura--ancha{ aspect-ratio:24/7; }
.ranura--media{ aspect-ratio:4/3; }
.ranura--alta{ aspect-ratio:4/5; }
.banda--navy .ranura, .banda--noche .ranura{
	border-color:var(--oro); color:var(--tinta-clara);
	background:repeating-linear-gradient(45deg,rgba(255,182,39,.11) 0 8px,transparent 8px 16px);
}
.banda--navy .ranura__k, .banda--noche .ranura__k{ color:var(--oro); }
@media (max-width:640px){ .ranura--ancha{ aspect-ratio:16/9; } }

/* --- par de bloque: texto y ranura, alternables --- */
.par-foto{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:var(--aire-columna); align-items:center;
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
.par-foto--espejo > *:first-child{ order:2; }
@media (max-width:820px){
	.par-foto{ grid-template-columns:minmax(0,1fr); }
	.par-foto--espejo > *:first-child{ order:0; }
}

/* --- muestrario: seis cosas que salen del taller --- */
.muestrario{
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
	gap:var(--aire-grilla);
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
@media (max-width:860px){ .muestrario{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .muestrario{ grid-template-columns:minmax(0,1fr); } }
.muestra{ display:grid; gap:.6rem; align-content:start; }
.muestra__nombre{
	font-family:var(--display); font-weight:800; font-stretch:var(--ancho-titulo);
	text-transform:uppercase; font-size:var(--t-ficha); letter-spacing:-.01em; margin:0;
}
.muestra__q{ font-size:var(--t-cuerpo-sm); color:var(--nota); margin:0; }

/* --- dos puertas: se elige el motivo antes de escribir --- */
.puertas{
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
	gap:var(--aire-grilla);
	max-width:var(--ancho); margin-inline:auto; width:100%;
}
@media (max-width:720px){ .puertas{ grid-template-columns:minmax(0,1fr); } }
.puerta{ display:grid; gap:.55rem; align-content:start; padding:var(--aire-ficha-grande); }
.puerta h3{ margin:0; font-size:var(--t-puerta); }
.puerta p{ margin:0; font-size:var(--t-cuerpo-sm); }
.puerta .wp-block-buttons{ margin-top:.6rem; }

/* --- canales ordenados por cuál contesta más rápido --- */
.canales{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
/* la primera columna va fija: si es auto, cada fila la calcula por su cuenta
   y las notas terminan arrancando en cuatro sangrías distintas */
.canal{
	display:grid; grid-template-columns:10.5rem minmax(0,1fr) auto; gap:.4rem 1.15rem;
	align-items:baseline; padding:.95rem 0; border-top:2px solid rgba(199,224,242,.22);
}
.canal:last-child{ border-bottom:2px solid rgba(199,224,242,.22); }
.canal__vel{
	font-family:var(--mono); font-size:var(--t-etiqueta); font-weight:700;
	letter-spacing:.12em; text-transform:uppercase; color:var(--oro);
	white-space:nowrap; font-variant-numeric:tabular-nums;
}
.canal__q{ font-family:var(--display); font-weight:800; font-stretch:var(--ancho-ui); font-size:var(--t-ficha); }
.canal__v{ font-size:var(--t-cuerpo-sm); overflow-wrap:anywhere; }
.canal__n{ grid-column:2/-1; font-size:var(--t-cuerpo-sm); opacity:.8; margin:0; }
@media (max-width:560px){
	.canal{ grid-template-columns:minmax(0,1fr); }
	.canal__n{ grid-column:1; }
}

/* --- dos cifras grandes en vez de cuatro cajas iguales --- */
.cifras--dos{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.cifras--dos .cifra__n{ font-size:var(--t-cifra-grande); }

/* ============================================================
   24 · FOTOS DEL TALLER
   Cuando la ranura se llena, la foto hereda el mismo troquel
   que el resto del sistema: filete, esquina viva y golpe corto.
   ============================================================ */
.marco{ margin:0; }
.marco img, .marco video, img.encuadre{
	display:block; width:100%; height:100%; object-fit:cover;
	border:var(--troquel) solid var(--navy); border-radius:var(--radio-ficha);
	background:var(--bruma); box-shadow:var(--golpe-corto);
}
.banda--navy .marco img, .banda--noche .marco img,
.banda--navy .marco video, .banda--noche .marco video,
.banda--navy img.encuadre, .banda--noche img.encuadre{
	border-color:var(--blanco); box-shadow:4px 4px 0 var(--celeste);
}
.marco--ancha img{ aspect-ratio:24/7; }
.marco--pano img{ aspect-ratio:16/9; }
.marco--media img{ aspect-ratio:4/3; }
.marco--alta img{ aspect-ratio:4/5; }
/* core writes the file's own ratio inline on <video>; the frame sets it here */
.marco--ancha video{ aspect-ratio:24/7 !important; }
.marco--pano video{ aspect-ratio:16/9 !important; }
.marco--media video{ aspect-ratio:4/3 !important; }
.marco--alta video{ aspect-ratio:4/5 !important; }
.encuadre--cuadrada{ aspect-ratio:1; }
.encuadre--media{ aspect-ratio:4/3; }
@media (max-width:640px){
	.marco--ancha img{ aspect-ratio:16/9; }
	.marco--ancha video{ aspect-ratio:16/9 !important; }
}

/* pie de foto discreto, en la voz de datos */
.marco figcaption{
	font-family:var(--mono); font-size:var(--t-etiqueta-sm); letter-spacing:.04em;
	color:var(--nota); margin-top:.6rem;
}
.banda--navy .marco figcaption, .banda--noche .marco figcaption{ color:var(--celeste); }