/* cr-tokens */
/* ==========================================================================
   TOKENS — la unica fuente de verdad del diseno.
   Mismos valores que el :root del diseno de Nicolas (diseno-comun.css). El prototipo llamaba al
   mismo negro --k, --ink, --text y --dark; aqui hay un solo nombre para cada
   cosa y, debajo, los alias antiguos para no romper nada durante la migracion.
   ========================================================================== */

:root {
	/* --- Color: marca ---------------------------------------------------- */
	--cr-amarillo:          #F5C200;  /* = --y del diseno */
	--cr-amarillo-oscuro:   #E8B000;  /* = --y2 */
	--cr-amarillo-texto:    #B98500;  /* = --y-text */  /* amarillo legible sobre blanco (contraste AA) */
	--cr-amarillo-suave:    #fff5c4;
	--cr-amarillo-borde:    rgba(245, 194, 0, .28);  /* = --yb */
	--cr-amarillo-fondo:    rgba(245, 194, 0, .10);  /* = --yd */

	/* --- Color: tinta y fondos ------------------------------------------- */
	--cr-tinta:             #1a1918;  /* = --text */  /* texto principal */
	--cr-tinta-fuerte:      #0d0d0d;  /* = --k */  /* titulares y fondos negros */
	--cr-tinta-media:       #1c1c1c;  /* = --k3 */
	--cr-gris-texto:        #6B6A66;  /* = --muted */  /* texto secundario */
	--cr-gris-suave:        #9a9990;
	--cr-gris-oscuro:       #5a5955;

	--cr-blanco:            #ffffff;
	--cr-papel:             #f8f7f4;  /* fondo general */
	--cr-papel-hueso:       #f0efe9;
	--cr-papel-gris:        #e3e2dc;
	--cr-borde:             #e2e1db;
	--cr-borde-oscuro:      rgba(255, 255, 255, .07);

	/* --- Color: estados --------------------------------------------------- */
	--cr-exito:             #2f6d3a;
	--cr-exito-claro:       #4e8847;
	--cr-error:             #b3261e;
	--cr-aviso:             #8a6100;

	/* --- Tipografia ------------------------------------------------------- */
	--cr-fuente-titular:    'Barlow Condensed','Barlow Condensed Fallback', 'Arial Narrow', Arial, sans-serif;
	--cr-fuente-texto:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	/* Escala fluida: se adapta sola entre movil y escritorio, sin saltos */
	--cr-t-xs:   clamp(.75rem,  .72rem + .15vw, .8125rem);
	--cr-t-sm:   clamp(.875rem, .85rem + .15vw, .9375rem);
	--cr-t-base: clamp(1rem,    .97rem + .15vw, 1.0625rem);
	--cr-t-lg:   clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
	--cr-t-xl:   clamp(1.5rem,  1.3rem + 1vw,   2.125rem);
	--cr-t-2xl:  clamp(2rem,    1.6rem + 2vw,   3.25rem);
	--cr-t-3xl:  clamp(2.5rem,  1.8rem + 3.4vw, 4.5rem);

	--cr-peso-normal:   400;
	--cr-peso-medio:    500;
	--cr-peso-semi:     600;
	--cr-peso-negrita:  700;
	--cr-peso-fuerte:   800;
	--cr-peso-extra:    900;

	--cr-interlinea-titular: 1.05;
	--cr-interlinea-texto:   1.6;

	/* --- Espacios (escala de 4 px) ---------------------------------------- */
	--cr-e-1:  .25rem;
	--cr-e-2:  .5rem;
	--cr-e-3:  .75rem;
	--cr-e-4:  1rem;
	--cr-e-5:  1.5rem;
	--cr-e-6:  2rem;
	--cr-e-7:  3rem;
	--cr-e-8:  4rem;
	--cr-e-9:  6rem;

	/* Margen lateral y ancho maximo: el prototipo usa min(1420px, 100% - 2rem) */
	--cr-ancho:   1420px;
	--cr-margen:  clamp(1rem, 4vw, 2rem);

	/* --- Formas ----------------------------------------------------------- */
	--cr-radio-s:  6px;
	--cr-radio-m:  10px;
	--cr-radio-l:  16px;
	--cr-radio-redondo: 999px;

	--cr-sombra-s: 0 1px 2px rgba(23, 23, 21, .06);
	--cr-sombra-m: 0 4px 16px rgba(23, 23, 21, .08);
	--cr-sombra-l: 0 12px 40px rgba(23, 23, 21, .12);

	/* --- Movimiento ------------------------------------------------------- */
	--cr-transicion: 180ms cubic-bezier(.2, .6, .3, 1);

	/* --- Capas ------------------------------------------------------------ */
	--cr-z-cabecera: 100;
	--cr-z-menu:     200;
	--cr-z-modal:    300;
	--cr-z-aviso:    400;
}

/* Quien pida no tener animaciones, no las tiene. */
@media (prefers-reduced-motion: reduce) {
	:root { --cr-transicion: 1ms; }
}

/* cr-base */
/* ==========================================================================
   BASE — tipografias, reset y utilidades. Va despues de tokens.css.
   ========================================================================== */

/* --- Tipografias servidas desde nuestro dominio --------------------------
   Con unicode-range el navegador solo descarga lo que la pagina necesita:
   una pagina en espanol nunca baja el juego latin-ext.
   ------------------------------------------------------------------------ */

/* El diseno pide Barlow Condensed 500-900 (las mismas que cargaba el
   prototipo desde Google Fonts). */
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/BarlowCondensed-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/BarlowCondensed-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/BarlowCondensed-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/BarlowCondensed-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/BarlowCondensed-800-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/BarlowCondensed-900-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Letra provisional con las medidas de Barlow Condensed (Arial encogido al 76 %: medido en el navegador, 800 = 0,758 del
   ancho de Arial). Mientras llega la buena, los títulos ocupan casi lo mismo y no saltan de 2 líneas a 1 (auditoría
   de velocidad 30-09: salto de 0,13–0,14 en las fichas de originales en alemán e inglés). */
@font-face {
	font-family: 'Barlow Condensed Fallback';
	font-weight: 400 650;
	src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
	size-adjust: 74%;
}
@font-face {
	font-family: 'Barlow Condensed Fallback';
	font-weight: 651 1000;
	src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold');
	size-adjust: 76%;
}

/* Inter variable: un solo fichero para los grosores 400 a 700 */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/Inter-400-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/Inter-400-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reset ---------------------------------------------------------------
   El reset y la tipografia de base los pone el CSS del diseno de Nicolas
   (diseno-comun.css: *{margin:0;padding:0}, body, a, img).

   OJO con las reglas por etiqueta (h2, p, svg...): pesan mas que su "*" aunque
   carguen antes, y le cambiarian margenes y tamanos a todo el diseno. Por eso
   las de abajo van ENCERRADAS en las plantillas propias del tema (paginas,
   404, WooCommerce), donde el diseno no llega.
   ------------------------------------------------------------------------- */

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

/* "font: inherit" arrastra tambien el interlineado: aplicado a todos los
   botones, cada boton del diseno salia unos pixeles mas alto que en el
   prototipo y desplazaba todo lo de debajo (lo destapo la comparacion
   medida elemento a elemento). Solo en las piezas propias del tema. */
:where(.cr-pagina, .cr-listado, .cr-404, .cr-woo, .cr-contacto, .cr-cookies, .cr-formulario, .cr-buscador__panel, .mh-resultados)
	:is(button, input, select, textarea) { font: inherit; color: inherit; }
button, [role="button"] { cursor: pointer; }
img, picture, video { max-width: 100%; }

/* Tipografia de las plantillas propias. :where() no suma especificidad. */
:where(.cr-pagina, .cr-listado, .cr-404, .cr-woo, .cr-contacto) :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--cr-e-4);
	font-family: var(--cr-fuente-titular);
	font-weight: var(--cr-peso-fuerte);
	line-height: var(--cr-interlinea-titular);
	letter-spacing: -.01em;
	text-wrap: balance;
}
:where(.cr-pagina, .cr-listado, .cr-404, .cr-woo, .cr-contacto) h1 { font-size: var(--cr-t-3xl); }
:where(.cr-pagina, .cr-listado, .cr-404, .cr-woo, .cr-contacto) h2 { font-size: var(--cr-t-2xl); }
:where(.cr-pagina, .cr-listado, .cr-404, .cr-woo, .cr-contacto) h3 { font-size: var(--cr-t-xl); }
:where(.cr-pagina, .cr-listado, .cr-404, .cr-woo, .cr-contacto) h4 { font-size: var(--cr-t-lg); }
:where(.cr-pagina, .cr-listado, .cr-404, .cr-woo, .cr-contacto) p { margin: 0 0 var(--cr-e-4); text-wrap: pretty; }
:where(.cr-pagina, .cr-listado, .cr-404, .cr-woo, .cr-contacto) img { height: auto; display: block; }
:where(.cr-pagina, .cr-listado, .cr-404, .cr-woo, .cr-contacto) {
	font-size: var(--cr-t-base);
	line-height: var(--cr-interlinea-texto);
}

/* Nadie debe perder el foco de vista al navegar con teclado */
:focus-visible {
	outline: 3px solid var(--cr-amarillo);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Utilidades ----------------------------------------------------------- */

.cr-contenedor {
	width: min(var(--cr-ancho), 100% - var(--cr-margen) * 2);
	margin-inline: auto;
}

/* Texto solo para lectores de pantalla */
.cr-oculto-visual {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* Saltar al contenido: lo primero que encuentra quien navega con teclado */
.cr-saltar {
	position: absolute;
	left: var(--cr-e-4);
	top: -100px;
	z-index: var(--cr-z-aviso);
	padding: var(--cr-e-3) var(--cr-e-4);
	background: var(--cr-tinta-fuerte);
	color: var(--cr-blanco);
	border-radius: var(--cr-radio-s);
	transition: top var(--cr-transicion);
}
.cr-saltar:focus { top: var(--cr-e-4); }

/* --- Iconos ---------------------------------------------------------------
   Sustituyen a la fuente Phosphor: 40 iconos en un sprite de 6 KB comprimido,
   frente a 242 KB de CSS mas tres ficheros de fuente.
   -------------------------------------------------------------------------- */
/* Iconos del diseno: SVG con las mismas clases que la fuente Phosphor
   (.ph, .ph-bold, .ph-fill). Un icono de fuente ocupa 1em x 1em y toma el
   color del texto: el SVG, igual. El resto lo pone el CSS de Nicolas. */
svg.ph, svg.ph-bold, svg.ph-fill { width: 1em; height: 1em; fill: currentColor; }


.cr-icono {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
	fill: currentColor;
	flex: none;
}

/* Reserva de espacio para que nada salte al cargar (evita cambios de layout) */
.cr-ratio { position: relative; overflow: hidden; }
.cr-ratio > img,
.cr-ratio > picture > img { width: 100%; height: 100%; object-fit: contain; }
.cr-ratio--cuadrado  { aspect-ratio: 1 / 1; }
.cr-ratio--producto  { aspect-ratio: 4 / 3; }
.cr-ratio--panoramico{ aspect-ratio: 16 / 9; }

/* hidden siempre oculta, aunque el diseno le ponga display a la clase */
[hidden] { display: none !important; }

/* Campo cebo del antispam: fuera de la vista */
.cr-cebo { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* cr-componentes */
/* ==========================================================================
   COMPONENTES — lo que se repite en todas las paginas.
   Cabecera, menu, buscador, botones, tarjetas, FAQ, pie, cookies y resenas.

   Dos diferencias con el prototipo, a proposito:

   1. Sin !important. En el prototipo hacia falta para ganarle al tema viejo.
      Aqui el tema es nuestro, asi que no hay contra quien pelear. Y sin esa
      guerra, cualquiera puede ajustar un detalle desde el personalizador.

   2. Los textos mas pequenos suben de 10-11 px a 12-13 px. A 10 px la barra
      superior es ilegible en un movil y no pasa las pautas de accesibilidad.
      El aspecto es el mismo; solo se lee.
   ========================================================================== */

/* ==========================================================================
   Botones
   ========================================================================== */

.cr-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cr-e-2);
	padding: var(--cr-e-3) var(--cr-e-5);
	border: 1px solid transparent;
	border-radius: var(--cr-radio-s);
	font-family: var(--cr-fuente-texto);
	font-size: var(--cr-t-sm);
	font-weight: var(--cr-peso-negrita);
	line-height: 1.2;
	text-decoration: none;
	transition: background var(--cr-transicion), border-color var(--cr-transicion),
	            color var(--cr-transicion), transform var(--cr-transicion);
}
.cr-boton:hover  { transform: translateY(-1px); }
.cr-boton:active { transform: none; }

.cr-boton--principal {
	background: var(--cr-amarillo);
	color: var(--cr-tinta-fuerte);
}
.cr-boton--principal:hover { background: var(--cr-amarillo-oscuro); }

.cr-boton--oscuro {
	background: var(--cr-tinta-fuerte);
	color: var(--cr-blanco);
}
.cr-boton--oscuro:hover { background: var(--cr-tinta-media); }

.cr-boton--fantasma {
	border-color: var(--cr-borde);
	background: transparent;
	color: var(--cr-tinta);
}
.cr-boton--fantasma:hover {
	border-color: var(--cr-amarillo);
	background: var(--cr-amarillo-fondo);
}

.cr-boton--grande { padding: var(--cr-e-4) var(--cr-e-6); font-size: var(--cr-t-base); }
.cr-boton--ancho  { width: 100%; }

.cr-enlace-suave {
	border: 0;
	background: none;
	padding: 0;
	color: var(--cr-gris-texto);
	font-size: var(--cr-t-sm);
	text-decoration: underline;
}
.cr-enlace-suave:hover { color: var(--cr-tinta); }

/* ==========================================================================
   Barra superior
   ========================================================================== */

.cr-barra {
	background: #0b0b0b;
	color: rgba(255, 255, 255, .68);
	font-size: var(--cr-t-xs);
	font-weight: var(--cr-peso-semi);
}
.cr-barra__pista {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cr-e-6);
	min-height: 32px;
	white-space: nowrap;
}
.cr-barra__dato { display: inline-flex; align-items: center; gap: var(--cr-e-2); }
.cr-barra b     { color: var(--cr-amarillo); font-weight: var(--cr-peso-negrita); }

/* ==========================================================================
   Cabecera
   ========================================================================== */

.cr-cabecera {
	position: sticky;
	top: 0;
	z-index: var(--cr-z-cabecera);
	background: #181818;
	color: var(--cr-blanco);
	border-bottom: 1px solid #333;
}
.cr-cabecera[data-compacta] { box-shadow: var(--cr-sombra-m); }

.cr-cabecera__fila {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--cr-e-5);
	min-height: 72px;
	transition: min-height var(--cr-transicion);
}
.cr-cabecera[data-compacta] .cr-cabecera__fila { min-height: 60px; }

/* --- Marca --- */
.cr-marca { display: flex; align-items: center; gap: var(--cr-e-3); color: inherit; text-decoration: none; }
.cr-marca img { width: 42px; height: 42px; object-fit: contain; }
.cr-marca strong {
	display: block;
	font-family: var(--cr-fuente-titular);
	font-size: 1rem;
	font-weight: var(--cr-peso-fuerte);
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.cr-marca small {
	display: block;
	margin-top: 3px;
	color: rgba(255, 255, 255, .45);
	font-family: var(--cr-fuente-titular);
	font-size: .625rem;
	font-weight: var(--cr-peso-semi);
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* --- Menu --- */
.cr-menu { display: flex; align-items: center; justify-content: center; gap: var(--cr-e-6); }
.cr-menu__punto { position: static; }

.cr-menu__boton {
	display: inline-flex;
	align-items: center;
	gap: var(--cr-e-2);
	padding: var(--cr-e-3) 0;
	border: 0;
	background: none;
	color: #ddd;
	font-size: var(--cr-t-sm);
	font-weight: var(--cr-peso-negrita);
	text-decoration: none;
}
.cr-menu__boton:hover { color: var(--cr-blanco); }
.cr-menu__boton .cr-icono { transition: transform var(--cr-transicion); }
.cr-menu__boton[aria-expanded="true"] .cr-icono { transform: rotate(180deg); }

/* --- Menu grande --- */
.cr-mega {
	position: absolute;
	left: 0;
	right: 0;
	padding: var(--cr-e-6) 0 var(--cr-e-7);
	background: var(--cr-blanco);
	color: var(--cr-tinta);
	border-top: 1px solid var(--cr-borde);
	box-shadow: 0 18px 32px rgba(0, 0, 0, .14);
}
/* Nace cerrado de verdad (display:none), no solo invisible: asi el teclado
   no se pierde dentro de un menu que nadie ve. */
.cr-mega[hidden] { display: none; }

.cr-mega__rejilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 270px;
	gap: var(--cr-e-6);
}
.cr-mega__columna h3 {
	margin: 0 0 var(--cr-e-2);
	padding-bottom: var(--cr-e-2);
	border-bottom: 2px solid var(--cr-amarillo);
	font-family: var(--cr-fuente-texto);
	font-size: var(--cr-t-xs);
	font-weight: var(--cr-peso-negrita);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.cr-mega__columna a {
	display: block;
	padding: var(--cr-e-2) 0;
	color: var(--cr-gris-oscuro);
	font-size: var(--cr-t-sm);
	text-decoration: none;
}
.cr-mega__columna a:hover { color: var(--cr-amarillo-texto); }

.cr-mega__nota {
	padding: var(--cr-e-4);
	border: 1px solid #ddd8ca;
	border-radius: var(--cr-radio-m);
	background: #f7f5ef;
}
.cr-mega__nota b { display: block; font-size: var(--cr-t-sm); }
.cr-mega__nota p { margin: var(--cr-e-2) 0 var(--cr-e-4); color: var(--cr-gris-texto); font-size: var(--cr-t-xs); }

/* --- Herramientas de la derecha --- */
.cr-herramientas { display: flex; align-items: center; justify-content: flex-end; gap: var(--cr-e-2); }

.cr-carrito {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: var(--cr-radio-s);
	background: var(--cr-amarillo);
	color: var(--cr-tinta-fuerte);
	font-size: 1.25rem;
}
.cr-carrito__cuenta {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--cr-radio-redondo);
	background: var(--cr-tinta-fuerte);
	color: var(--cr-blanco);
	font-size: .6875rem;
	font-weight: var(--cr-peso-negrita);
	line-height: 20px;
	text-align: center;
}
.cr-carrito__cuenta:empty,
.cr-carrito__cuenta[data-cero] { display: none; }

/* --- Boton de menu en movil --- */
.cr-hamburguesa {
	display: none;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid #444;
	border-radius: var(--cr-radio-s);
	background: transparent;
	color: var(--cr-blanco);
	font-size: 1.25rem;
}

/* ==========================================================================
   Buscador
   ========================================================================== */

.cr-buscador { position: relative; width: min(340px, 100%); }

.cr-buscador__campo {
	width: 100%;
	height: 40px;
	padding: 0 var(--cr-e-4) 0 38px;
	border: 1px solid #444;
	border-radius: var(--cr-radio-s);
	background: #252525 var(--cr-lupa) no-repeat 12px center;
	color: var(--cr-blanco);
	font-size: var(--cr-t-sm);
}
.cr-buscador__campo::placeholder { color: rgba(255, 255, 255, .45); }
.cr-buscador__campo:focus { border-color: var(--cr-amarillo); outline-offset: 0; }

.cr-buscador__lupa {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, .5);
	pointer-events: none;
}

/* El panel de resultados */
.cr-buscador__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: var(--cr-z-menu);
	max-height: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--cr-blanco);
	color: var(--cr-tinta);
	border: 1px solid var(--cr-borde);
	border-radius: var(--cr-radio-m);
	box-shadow: var(--cr-sombra-l);
}
.cr-buscador:not([data-abierto]) .cr-buscador__panel { display: none; }

.cr-buscador__panel[data-cargando]::before {
	content: '';
	display: block;
	height: 2px;
	background: linear-gradient(90deg, var(--cr-amarillo) 0 40%, transparent 40%);
	background-size: 250% 100%;
	animation: cr-barrido 1s linear infinite;
}
@keyframes cr-barrido { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
	.cr-buscador__panel[data-cargando]::before { animation: none; }
}

.cr-buscador__lista { margin: 0; padding: var(--cr-e-1); list-style: none; }

.cr-buscador__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: var(--cr-e-3);
	padding: var(--cr-e-2);
	border-radius: var(--cr-radio-s);
	color: inherit;
	text-decoration: none;
}
.cr-buscador__item img { width: 56px; height: 56px; object-fit: contain; }

/* El resaltado es el mismo para el raton y para las flechas del teclado */
.cr-buscador__item:hover,
[aria-selected="true"] > .cr-buscador__item { background: var(--cr-papel-hueso); }

.cr-buscador__texto  { min-width: 0; }
.cr-buscador__titulo {
	display: block;
	font-size: var(--cr-t-sm);
	font-weight: var(--cr-peso-semi);
	line-height: 1.3;
	/* Dos lineas como mucho: los nombres de producto son largos */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cr-buscador__titulo mark {
	padding: 0;
	background: var(--cr-amarillo-suave);
	color: inherit;
	font-weight: var(--cr-peso-fuerte);
}
.cr-buscador__sku {
	display: block;
	margin-top: 2px;
	color: var(--cr-gris-texto);
	font-size: var(--cr-t-xs);
}
.cr-buscador__precio {
	font-size: var(--cr-t-sm);
	font-weight: var(--cr-peso-fuerte);
	white-space: nowrap;
}

.cr-buscador__aviso {
	margin: 0;
	padding: var(--cr-e-5);
	color: var(--cr-gris-texto);
	font-size: var(--cr-t-sm);
	text-align: center;
}
.cr-buscador__todos {
	display: block;
	padding: var(--cr-e-3);
	border-top: 1px solid var(--cr-borde);
	color: var(--cr-amarillo-texto);
	font-size: var(--cr-t-sm);
	font-weight: var(--cr-peso-negrita);
	text-align: center;
	text-decoration: none;
}
.cr-buscador__todos:hover { background: var(--cr-amarillo-fondo); }

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */

.cr-tarjeta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cr-blanco);
	border: 1px solid var(--cr-borde);
	border-radius: var(--cr-radio-m);
	transition: border-color var(--cr-transicion), box-shadow var(--cr-transicion),
	            transform var(--cr-transicion);
}
.cr-tarjeta:hover {
	border-color: var(--cr-amarillo-borde);
	box-shadow: var(--cr-sombra-m);
	transform: translateY(-2px);
}
.cr-tarjeta__imagen { background: var(--cr-papel-hueso); }
.cr-tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--cr-e-2); padding: var(--cr-e-4); }

.cr-tarjeta__marca {
	color: var(--cr-gris-texto);
	font-size: var(--cr-t-xs);
	font-weight: var(--cr-peso-negrita);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cr-tarjeta__titulo { margin: 0; font-size: var(--cr-t-base); line-height: 1.25; }
.cr-tarjeta__titulo a { color: inherit; text-decoration: none; }
/* El enlace cubre la tarjeta entera: mas facil de acertar con el dedo */
.cr-tarjeta__titulo a::after { content: ''; position: absolute; inset: 0; }
.cr-tarjeta { position: relative; }

.cr-tarjeta__precio { margin-top: auto; font-size: var(--cr-t-lg); font-weight: var(--cr-peso-fuerte); }
.cr-tarjeta__precio del { margin-right: var(--cr-e-2); color: var(--cr-gris-suave); font-size: var(--cr-t-sm); font-weight: var(--cr-peso-normal); }

/* ==========================================================================
   Distintivos
   ========================================================================== */

.cr-distintivo {
	display: inline-flex;
	align-items: center;
	gap: var(--cr-e-1);
	padding: 3px var(--cr-e-2);
	border-radius: var(--cr-radio-redondo);
	font-size: var(--cr-t-xs);
	font-weight: var(--cr-peso-negrita);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.cr-distintivo--original { background: var(--cr-amarillo); color: var(--cr-tinta-fuerte); }
.cr-distintivo--stock    { background: rgba(47, 109, 58, .12); color: var(--cr-exito); }
.cr-distintivo--agotado  { background: var(--cr-papel-gris); color: var(--cr-gris-oscuro); }

/* ==========================================================================
   Avisos
   ========================================================================== */

.cr-aviso {
	display: flex;
	align-items: flex-start;
	gap: var(--cr-e-3);
	padding: var(--cr-e-4);
	border-radius: var(--cr-radio-m);
	font-size: var(--cr-t-sm);
	line-height: 1.5;
}
.cr-aviso .cr-icono { margin-top: .15em; font-size: 1.2em; }
.cr-aviso--ok  { background: rgba(47, 109, 58, .10); color: var(--cr-exito); }
.cr-aviso--mal { background: rgba(179, 38, 30, .08);  color: var(--cr-error); }

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */

.cr-faq { max-width: 960px; }
.cr-faq details {
	border-top: 1px solid var(--cr-borde);
}
.cr-faq details:last-child { border-bottom: 1px solid var(--cr-borde); }

.cr-faq summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 34px;
	align-items: center;
	gap: var(--cr-e-5);
	min-height: 62px;
	padding: var(--cr-e-4) 0;
	font-size: var(--cr-t-base);
	font-weight: var(--cr-peso-negrita);
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
}
.cr-faq summary::-webkit-details-marker { display: none; }
.cr-faq summary::marker { content: ''; }

.cr-faq__flecha {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--cr-borde);
	border-radius: 50%;
	color: var(--cr-amarillo-texto);
	transition: transform var(--cr-transicion), background var(--cr-transicion);
}
.cr-faq details[open] .cr-faq__flecha {
	transform: rotate(180deg);
	background: var(--cr-amarillo-fondo);
	border-color: var(--cr-amarillo-borde);
}
.cr-faq__respuesta { padding-bottom: var(--cr-e-5); color: var(--cr-gris-texto); }
.cr-faq__respuesta > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Resenas
   ========================================================================== */

.cr-resenas { padding: var(--cr-e-8) 0; }
.cr-resenas__cabecera { margin-bottom: var(--cr-e-6); text-align: center; }
.cr-resenas__titulo   { margin-bottom: var(--cr-e-3); }

.cr-resenas__nota {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cr-e-2);
	margin: 0;
	font-size: var(--cr-t-sm);
}
.cr-resenas__nota strong { font-size: var(--cr-t-lg); }
.cr-resenas__total { color: var(--cr-gris-texto); }

.cr-estrellas { display: inline-flex; gap: 2px; font-size: 1.125rem; }
.cr-estrellas--pequena { font-size: 1rem; }
.cr-estrella--llena { color: var(--cr-amarillo); }
.cr-estrella--vacia { color: var(--cr-papel-gris); }

.cr-resenas__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--cr-e-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.cr-resena {
	display: flex;
	flex-direction: column;
	gap: var(--cr-e-3);
	padding: var(--cr-e-5);
	background: var(--cr-blanco);
	border: 1px solid var(--cr-borde);
	border-radius: var(--cr-radio-m);
}
.cr-resena__texto {
	margin: 0;
	font-size: var(--cr-t-sm);
	line-height: 1.6;
}
.cr-resena__pie { display: flex; align-items: center; gap: var(--cr-e-3); margin-top: auto; }
.cr-resena__foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.cr-resena__autor { display: block; font-size: var(--cr-t-sm); }
.cr-resena__cuando { color: var(--cr-gris-texto); font-size: var(--cr-t-xs); }

.cr-resenas__todas {
	display: inline-flex;
	align-items: center;
	gap: var(--cr-e-2);
	margin-top: var(--cr-e-5);
	color: var(--cr-amarillo-texto);
	font-size: var(--cr-t-sm);
	font-weight: var(--cr-peso-negrita);
}

/* ==========================================================================
   Banner de cookies
   ========================================================================== */

.cr-cookies {
	position: fixed;
	left: var(--cr-e-4);
	right: var(--cr-e-4);
	bottom: var(--cr-e-4);
	z-index: var(--cr-z-aviso);
	display: flex;
	justify-content: center;
}
.cr-cookies__caja {
	width: min(640px, 100%);
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: var(--cr-e-5);
	background: var(--cr-blanco);
	border: 1px solid var(--cr-borde);
	border-radius: var(--cr-radio-l);
	box-shadow: var(--cr-sombra-l);
}
.cr-cookies__titulo { margin-bottom: var(--cr-e-2); font-size: var(--cr-t-lg); }
.cr-cookies__texto  { margin-bottom: var(--cr-e-4); color: var(--cr-gris-texto); font-size: var(--cr-t-sm); }
.cr-cookies__botones { display: flex; flex-wrap: wrap; gap: var(--cr-e-2); }
.cr-cookies__botones .cr-boton { flex: 1 1 auto; }

.cr-cookies__detalle {
	margin: var(--cr-e-5) 0 0;
	padding: var(--cr-e-4) 0 0;
	border: 0;
	border-top: 1px solid var(--cr-borde);
}
.cr-cookies__fila {
	display: flex;
	align-items: flex-start;
	gap: var(--cr-e-3);
	padding: var(--cr-e-3) 0;
	font-size: var(--cr-t-sm);
}
.cr-cookies__fila small { display: block; margin-top: 2px; color: var(--cr-gris-texto); }

/* ==========================================================================
   Formulario
   ========================================================================== */

.cr-formulario { max-width: 720px; }
.cr-formulario__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--cr-e-4);
}

.cr-campo { display: flex; flex-direction: column; gap: var(--cr-e-2); margin-bottom: var(--cr-e-4); }
.cr-campo label { font-size: var(--cr-t-sm); font-weight: var(--cr-peso-semi); }
.cr-campo label small { color: var(--cr-gris-texto); font-weight: var(--cr-peso-normal); }
.cr-campo__req { color: var(--cr-error); }

.cr-campo input,
.cr-campo select,
.cr-campo textarea {
	padding: var(--cr-e-3);
	border: 1px solid var(--cr-borde);
	border-radius: var(--cr-radio-s);
	background: var(--cr-blanco);
	font-size: var(--cr-t-base);
}
.cr-campo input:focus,
.cr-campo select:focus,
.cr-campo textarea:focus { border-color: var(--cr-amarillo); }

/* El navegador solo marca en rojo despues de intentar enviar, no mientras
   se escribe: senalar un correo "mal" a medio teclear es desesperante. */
.cr-formulario[data-enviado] :invalid { border-color: var(--cr-error); }

.cr-campo__pista { color: var(--cr-gris-texto); font-size: var(--cr-t-xs); line-height: 1.5; }

.cr-campo--casilla label { display: flex; align-items: flex-start; gap: var(--cr-e-3); font-weight: var(--cr-peso-normal); }
.cr-campo--casilla input { margin-top: .2em; }

/* El cebo antispam. Fuera de la pantalla, no display:none: los robots
   listos ignoran lo que esta oculto del todo. */
.cr-cebo {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cr-formulario__nota {
	display: flex;
	align-items: center;
	gap: var(--cr-e-2);
	margin-top: var(--cr-e-4);
	color: var(--cr-gris-texto);
	font-size: var(--cr-t-sm);
}

/* ==========================================================================
   Video y medidas
   ========================================================================== */

.cr-video { margin: var(--cr-e-6) 0; }
.cr-video__marco {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--cr-radio-m);
	overflow: hidden;
	background: var(--cr-tinta-fuerte);
	aspect-ratio: 16 / 9;
}
.cr-video__marco img { width: 100%; height: 100%; object-fit: cover; }
.cr-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--cr-blanco);
	font-size: 3rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
	transition: transform var(--cr-transicion);
}
.cr-video__marco:hover .cr-video__play { transform: scale(1.08); }
.cr-video__pie { margin-top: var(--cr-e-3); color: var(--cr-gris-texto); font-size: var(--cr-t-sm); }

.cr-medidas { margin: var(--cr-e-5) 0; padding: var(--cr-e-5); background: var(--cr-papel-hueso); border-radius: var(--cr-radio-m); }
.cr-medidas__titulo { display: flex; align-items: center; gap: var(--cr-e-2); font-size: var(--cr-t-lg); }
.cr-medidas__imagenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--cr-e-4); }
.cr-medidas__pista { margin: var(--cr-e-4) 0 0; color: var(--cr-gris-texto); font-size: var(--cr-t-sm); }

.cr-adicionales { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--cr-e-4); margin: var(--cr-e-6) 0; }
.cr-imagen-descripcion { margin: var(--cr-e-6) 0; }

/* ==========================================================================
   Pie
   ========================================================================== */

.cr-pie {
	padding: var(--cr-e-8) 0 0;
	background: #151515;
	color: var(--cr-blanco);
	border-top: 1px solid var(--cr-borde-oscuro);
}
.cr-pie__principal {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1fr;
	gap: var(--cr-e-8);
	padding-bottom: var(--cr-e-7);
	border-bottom: 1px solid var(--cr-borde-oscuro);
}
.cr-pie__marca img { width: 240px; max-width: 100%; height: auto; }
.cr-pie__lema {
	max-width: 330px;
	margin: var(--cr-e-4) 0;
	font-family: var(--cr-fuente-titular);
	font-size: 1.25rem;
	font-weight: var(--cr-peso-extra);
	line-height: 1.1;
	text-transform: uppercase;
}
.cr-pie__lema em { color: var(--cr-amarillo); font-style: normal; }
.cr-pie__texto { max-width: 360px; color: rgba(255, 255, 255, .55); font-size: var(--cr-t-sm); line-height: 1.65; }
.cr-pie__texto strong { color: var(--cr-blanco); font-weight: var(--cr-peso-semi); }

.cr-pie__columna h4 {
	margin: 0 0 var(--cr-e-4);
	color: #aaa;
	font-family: var(--cr-fuente-texto);
	font-size: var(--cr-t-xs);
	font-weight: var(--cr-peso-negrita);
	letter-spacing: .08em;
}
.cr-pie__columna ul { margin: 0; padding: 0; list-style: none; }
.cr-pie__columna a {
	display: block;
	margin-bottom: var(--cr-e-2);
	color: rgba(255, 255, 255, .65);
	font-size: var(--cr-t-sm);
	text-decoration: none;
}
.cr-pie__columna a:hover { color: var(--cr-amarillo); }

.cr-pie__social { display: flex; gap: var(--cr-e-2); margin-top: var(--cr-e-5); }
.cr-pie__social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	color: rgba(255, 255, 255, .7);
}
.cr-pie__social a:hover { border-color: var(--cr-amarillo); background: var(--cr-amarillo-fondo); color: var(--cr-amarillo); }

.cr-pie__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cr-e-5);
	padding: var(--cr-e-5) 0;
	color: rgba(255, 255, 255, .45);
	font-size: var(--cr-t-xs);
}
.cr-pie__legal a { color: inherit; }
.cr-pie__legal nav { display: flex; flex-wrap: wrap; gap: var(--cr-e-4); }

/* ==========================================================================
   Pantallas pequenas
   ========================================================================== */

@media (max-width: 900px) {
	.cr-barra__pista .cr-barra__dato:nth-child(n + 3) { display: none; }

	.cr-cabecera__fila { grid-template-columns: auto 1fr auto; min-height: 64px; }
	.cr-hamburguesa { display: grid; }
	.cr-marca img { width: 38px; height: 38px; }

	/* El menu pasa a ocupar la pantalla entera */
	.cr-menu {
		position: fixed;
		inset: 64px 0 0;
		z-index: var(--cr-z-menu);
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: var(--cr-e-4);
		overflow-y: auto;
		background: #181818;
	}
	.cr-menu[data-abierto] { display: flex; }
	.cr-menu__boton { justify-content: space-between; width: 100%; padding: var(--cr-e-4) 0; border-bottom: 1px solid #333; font-size: var(--cr-t-base); }

	.cr-mega { position: static; padding: var(--cr-e-4) 0; background: transparent; color: var(--cr-blanco); border: 0; box-shadow: none; }
	.cr-mega__rejilla { grid-template-columns: 1fr; gap: var(--cr-e-5); }
	.cr-mega__columna a { color: rgba(255, 255, 255, .7); }
	.cr-mega__nota { display: none; }

	.cr-buscador { width: 100%; }

	.cr-pie__principal { grid-template-columns: 1fr; gap: var(--cr-e-6); }
	.cr-pie__legal { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
	.cr-cookies { left: 0; right: 0; bottom: 0; }
	.cr-cookies__caja { border-radius: var(--cr-radio-l) var(--cr-radio-l) 0 0; }
	.cr-cookies__botones .cr-boton { flex: 1 1 100%; }

	.cr-buscador__item { grid-template-columns: 44px 1fr; }
	.cr-buscador__item img { width: 44px; height: 44px; }
	.cr-buscador__precio { grid-column: 2; }
}

/* cr-diseno */
/* ==========================================================================
   DISENO · COMUN A TODAS LAS PAGINAS (cabecera, menu, pie, ayuda)
   Portado del prototipo de Nicolas (Homepage v10, entrega del 24-09-2026) con
   su CSS tal cual: mismas clases, mismos valores. Solo se han cambiado las
   rutas de las imagenes (a las optimizadas del tema). Los iconos son SVG con
   las mismas clases que ponia la fuente Phosphor (.ph, .ph-bold...).
   NO EDITAR A MANO sin mirar antes el prototipo: si algo no coincide con el
   diseno, el fallo debe corregirse aqui igual que alli.
   ========================================================================== */
:root{--y:#F5C200; --y2:#E8B000; --y-text:#B98500; --yd:rgba(245,194,0,.10); --yb:rgba(245,194,0,.28);
  --k:#0d0d0d; --k2:#141414; --k3:#1c1c1c;
  --w:#ffffff; --off:#F8F7F4; --g1:#F0EFE9; --g2:#E3E2DC; --g3:#9A9990; --g4:#5A5955;
  --text:#1a1918; --muted:#6B6A66; --bd:#E2E1DB; --bdk:rgba(255,255,255,.07);
  --fh:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;
  --fb:'Inter',sans-serif;
  --r:6px;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--fb);background:var(--w);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
img{max-width:100%;display:block;}
::selection{background:var(--y);color:var(--k);}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;padding:10px 14px;background:var(--y);color:var(--k);font-weight:750;border-radius:4px;transform:translateY(-150%);transition:transform .15s;}
.skip-link:focus{transform:translateY(0);}
.topbar{position:fixed;top:0;left:0;right:0;z-index:300;background:var(--k);height:36px;display:flex;align-items:center;overflow:hidden;}
.tb-ship{display:flex;align-items:center;gap:8px;padding:0 18px;border-right:1px solid rgba(255,255,255,.1);white-space:nowrap;flex-shrink:0;}
.tb-ship .badge{background:var(--y);color:var(--k);font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:2px;text-transform:uppercase;}
.tb-ship .txt{font-size:12px;font-weight:500;color:#fff;}
.tb-ship .ac{color:var(--y);font-weight:600;}
.tb-mq{flex:1;overflow:hidden;position:relative;height:36px;display:flex;align-items:center;}
.tb-mq::before,.tb-mq::after{content:'';position:absolute;top:0;bottom:0;width:36px;z-index:2;pointer-events:none;}
.tb-mq::before{left:0;background:linear-gradient(90deg,var(--k),transparent);}
.tb-mq::after{right:0;background:linear-gradient(-90deg,var(--k),transparent);}
.mq-track{display:flex;white-space:nowrap;animation:mq 45s linear infinite;}
.mq-track:hover{animation-play-state:paused;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.tb-lang .dd a:hover,.tb-lang .dd a.on{background:rgba(232,160,32,.12);color:var(--y);}
.header{position:fixed;top:36px;left:0;right:0;z-index:200;background:var(--w);border-bottom:1px solid var(--bd);height:64px;display:flex;align-items:center;transition:box-shadow .2s;}
.header.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.06);}
.header-in{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;width:100%;gap:32px;}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.logo-mark{width:38px;height:38px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:900;font-size:14px;color:var(--k);letter-spacing:-.5px;}
.logo-mark.real{background:transparent;overflow:hidden;}
.logo-mark.real img{width:100%;height:100%;object-fit:contain;}
.logo-name{font-family:var(--fh);font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text);line-height:1;}
.logo-name small{display:block;font-size:9px;font-weight:600;letter-spacing:.18em;color:var(--g3);margin-top:3px;}
.nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.nav a{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--g4);padding:9px 14px;border-radius:var(--r);transition:color .15s,background .15s;position:relative;}
.nav a:hover{color:var(--text);background:var(--g1);}
.nav a.feat::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--y);margin-right:7px;vertical-align:middle;}
.header-r{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.h-search{display:flex;align-items:center;gap:8px;background:var(--g1);border:1px solid var(--bd);border-radius:var(--r);padding:8px 14px;font-size:12px;color:var(--g3);cursor:text;min-width:210px;transition:border-color .15s;}
.h-search:hover{border-color:rgba(232,160,32,.4);}
.h-search:focus-visible{outline:2px solid var(--y);outline-offset:2px;border-color:var(--y2);}
.h-cart{width:40px;height:40px;background:var(--y);border-radius:var(--r);display:flex;align-items:center;justify-content:center;transition:background .15s;position:relative;}
.h-cart:hover{background:var(--y2);}
.cart-n{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--k);color:var(--w);font-family:var(--fh);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--w);}
.burger{display:none;width:40px;height:40px;border:1px solid var(--bd);border-radius:var(--r);flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.burger span{display:block;width:18px;height:1.5px;background:var(--text);}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px;}
.btn:focus-visible,.prod-card:focus-visible,.blog-card:focus-visible,.fctaa:focus-visible,.nav a:focus-visible,.footer a:focus-visible,.footer summary:focus-visible{outline:3px solid var(--y);outline-offset:3px;}
@keyframes scr{0%{top:-100%}100%{top:200%}}
@media(max-width:1100px){
.nav,.h-search{display:none;}
.burger{display:flex;}
.header-in{padding:0 20px;}
.wrap{padding:0 20px;}
.rep-grid,.factory-in,.ovc-grid{grid-template-columns:1fr;}
}
@media(max-width:680px){
.topbar .tb-ship{padding:0 12px;}
.topbar .tb-ship .txt{font-size:11px;}
}
@media(max-width:1100px){
}
@media(max-width:680px){
}
.header{background:rgba(26,26,26,.97);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:blur(12px);}
.logo-name{color:#fff}
.logo-name small{color:rgba(255,255,255,.45)}
.nav a{color:rgba(255,255,255,.72)}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.h-search{background:#2a2a2a;border-color:#444;color:#aaa}
.h-search:hover{border-color:var(--y)}
.burger{border-color:rgba(255,255,255,.2)}
.burger span{background:#fff}
body{font-size:16px;line-height:1.5;}
.nav a{font-family:var(--fb);font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;padding:9px 12px;}
@media(max-width:680px){
.topbar{display:none;}
.header{top:0;height:64px;}
}
.nav-item{position:relative;display:flex;align-items:center;}
.nav-trigger{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:var(--r);font-family:var(--fb);font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72);transition:color .15s,background .15s;white-space:nowrap;}
.nav-trigger::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;}
.nav-item:hover .nav-trigger,.nav-item:focus-within .nav-trigger,.nav-item.open .nav-trigger{color:#fff;background:rgba(255,255,255,.08);}
.nav-item:hover .nav-trigger::after,.nav-item:focus-within .nav-trigger::after,.nav-item.open .nav-trigger::after{transform:rotate(225deg) translate(-1px,-1px);}
.mega-menu{position:fixed;top:64px;left:0;right:0;z-index:190;background:#fff;color:var(--text);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);border-radius:0 0 12px 12px;box-shadow:0 20px 46px rgba(13,13,13,.16);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;overflow:hidden;transition:opacity .18s,transform .18s,visibility .18s;}
.nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu,.nav-item.open .mega-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.mega-in{max-width:1280px;min-height:250px;margin:0 auto;padding:32px 32px 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 280px;gap:40px;align-items:start;}
.mega-col h3{font-family:var(--fb);font-size:11px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;padding-bottom:10px;margin-bottom:13px;border-bottom:2px solid var(--y);}
.mega-col a{display:block;padding:7px 0;border-radius:0;color:var(--text);font-family:var(--fb);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.35;}
.mega-col a:hover,.mega-col a:focus-visible{color:#9a6800;background:transparent;transform:translateX(3px);}
.mega-note{background:var(--off);border:1px solid var(--bd);border-radius:8px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;}
.mega-note strong{display:block;font-family:var(--fh);font-size:20px;line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere;}
.mega-note p{font-size:12px;line-height:1.55;color:var(--muted);}
.mega-note a{align-self:flex-start;padding:9px 13px;border-radius:5px;background:var(--y);color:var(--k);font-size:11.5px;font-weight:750;}
.mega-note a:hover{background:var(--y2);color:var(--k);transform:none;}
.mega-kicker{display:flex;align-items:center;gap:6px;margin-bottom:9px;font-size:10px;font-weight:750;color:#9a6800;text-transform:uppercase;letter-spacing:.08em;}
.mega-kicker::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--y);}
@media(max-width:1100px){
.nav{display:none;position:fixed;top:64px;left:0;right:0;max-height:calc(100vh - 64px);overflow:auto;background:var(--k2);padding:12px 18px 24px;align-items:stretch;justify-content:flex-start;flex-direction:column;gap:3px;border-top:1px solid rgba(255,255,255,.08);}
.nav.mobile-open{display:flex;}
.nav-item{display:block;}
.nav-trigger{width:100%;justify-content:space-between;padding:13px 10px;font-size:14px;}
.mega-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;pointer-events:auto;background:#fff;border:0;border-radius:7px;box-shadow:none;margin-bottom:8px;}
.nav-item:hover .mega-menu{display:none;}
.nav-item.open .mega-menu,.nav-item:focus-within .mega-menu{display:block;}
.mega-in{min-height:0;padding:20px;grid-template-columns:1fr;gap:22px;}
.mega-note{padding:16px;}
}
@media(min-width:681px) and (max-width:1100px){
.nav{top:100px;max-height:calc(100vh - 100px);}
}
@media(prefers-reduced-motion:reduce){
.mega-menu,.nav-trigger::after,.mega-col a{transition:none;}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
.mq-track,.scroll-line::after,.engrave-info .dot,.hero h1,.hero-sub,.hero-search,.hero-pills,.compare-handle{animation:none!important;}
*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;}
}
.model-helper{width:min(1400px,calc(100vw - 48px));max-height:calc(100vh - 40px);margin:auto;padding:0;border:0;border-radius:16px;background:#fff;color:var(--text);box-shadow:0 28px 90px rgba(0,0,0,.38);overflow:auto;}
.model-helper::backdrop{background:rgba(8,8,8,.74);backdrop-filter:blur(5px);}
.mh-top{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--y);color:var(--k);}
.mh-top svg{flex:0 0 auto;}
.mh-top strong{font-family:var(--fh);font-size:19px;text-transform:uppercase;letter-spacing:.02em;}
.mh-close{margin-left:auto;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(13,13,13,.28);border-radius:50%;font-size:22px;line-height:1;transition:background .2s,color .2s;}
.mh-close:hover,.mh-close:focus-visible{background:var(--k);color:#fff;outline:none;}
.mh-search{display:flex;gap:0;width:min(620px,100%);margin-left:12px;background:#fff;border:1px solid rgba(13,13,13,.18);border-radius:8px;overflow:hidden;}
.mh-search input{flex:1;min-width:0;border:0;outline:0;padding:13px 15px;font:600 14px var(--fb);color:var(--text);}
.mh-search button{padding:0 20px;background:var(--k);color:#fff;font-family:var(--fh);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.mh-grid{display:block;}
.mh-main{padding:28px 36px 22px;}
.mh-side{padding:22px 36px 30px;border-top:1px solid var(--bd);background:#faf9f6;}
.mh-title{font-family:var(--fh);font-size:26px;text-transform:uppercase;line-height:1;margin-bottom:8px;}
.mh-intro{font-size:13px;line-height:1.6;color:var(--muted);max-width:720px;}
.temple-guide{position:relative;margin:20px 0 16px;padding:18px 28px 8px;border:1px solid var(--bd);border-radius:12px;background:linear-gradient(135deg,#fff,#f5f3ed);overflow:hidden;}
.temple-guide img{display:block;width:min(100%,1100px);height:auto;margin:0 auto;object-fit:contain;}
.mh-codes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px;}
.mh-code{padding:13px 14px;border:1px solid var(--bd);border-radius:9px;background:#fff;}
.mh-code b{display:block;margin-bottom:3px;font-family:var(--fh);font-size:17px;letter-spacing:.04em;}
.mh-code span{font-size:11px;color:var(--muted);}
.mh-example{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-left:3px solid var(--y);background:#f8f6ef;font-size:12px;line-height:1.55;color:var(--muted);}
.mh-example strong{color:var(--text);}
.mh-side-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:14px;}
.mh-side h3{font-family:var(--fh);font-size:19px;text-transform:uppercase;margin:0;}
.mh-side-head p{font-size:12px;line-height:1.55;color:var(--muted);margin:0;}
.mh-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.mh-help button{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;width:100%;padding:13px;border:1px solid var(--bd);border-radius:9px;background:#fff;text-align:left;transition:border-color .2s,transform .2s;}
.mh-help button:hover,.mh-help button:focus-visible{border-color:var(--y);transform:translateY(-1px);outline:none;}
.mh-help-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--y);}
.mh-help-ic svg{width:17px;height:17px;fill:none;stroke:#111;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mh-help strong{font-size:12px;}
.mh-help small{display:block;margin-top:2px;color:var(--muted);font-size:10px;}
.mh-help-arr{font-size:18px;}
.mh-status{min-height:18px;margin-top:12px;font-size:11px;color:var(--muted);}
@media(max-width:780px){
.model-helper{width:calc(100vw - 16px);max-height:calc(100vh - 16px);margin:auto;border-radius:12px;}
.mh-top{align-items:flex-start;flex-wrap:wrap;padding:14px;}
.mh-top>svg{margin-top:9px}
.mh-top strong{font-size:16px;margin-top:8px}
.mh-close{order:2}
.mh-search{order:3;width:100%;margin:0}
.mh-search input{font-size:12px}
.mh-search button{padding:0 14px;font-size:9px}
.mh-main{padding:24px 18px}
.mh-side{padding:22px 18px}
.mh-title{font-size:22px}
.temple-guide{margin-top:18px;padding:10px 8px 4px}
.mh-codes{grid-template-columns:repeat(2,minmax(0,1fr))}
.mh-side-head{display:block}
.mh-side-head p{margin-top:6px}
.mh-help{grid-template-columns:1fr}
}

/* ---- Sistema de iconos del prototipo (prototype-icons-phosphor.css), tal cual ---- */
.ph,.ph-bold,.ph-fill{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:1;vertical-align:-.12em}
.ph-icon-label{display:inline-flex;align-items:center;gap:.5em}
.ph-stars{display:inline-flex;align-items:center;gap:2px;color:#a47f00;white-space:nowrap}
.ph-stars .ph-fill{font-size:.92em}
.ph-arrow-inline{margin-left:.38em;font-size:1em;transition:transform .18s ease}
a:hover>.ph-arrow-inline,button:hover>.ph-arrow-inline{transform:translateX(3px)}

/* Navegacion compartida */
.nav-trigger,.proto-v10-trigger,.navlinks a{display:inline-flex!important;align-items:center;gap:7px}
.nav-trigger::after,.proto-v10-trigger::after,.navlinks a::after{display:none!important}
.nav-trigger>.ph,.proto-v10-trigger>.ph,.navlinks a>.ph{color:#999;font-size:11px;transition:transform .18s ease}
.nav-item:hover>.nav-trigger>.ph,.nav-item:focus-within>.nav-trigger>.ph,
.proto-v10-item:hover>.proto-v10-trigger>.ph,.proto-v10-item:focus-within>.proto-v10-trigger>.ph{transform:rotate(180deg)}
.cart::before,.cart::after,.proto-v10-cart::before,.proto-v10-cart::after{display:none!important}
/* el icono del carrito de la cabecera; ni la tabla del carrito ni el formulario de compra de WooCommerce (también «cart») */
.cart:not(table):not(form):not(tr):not(tbody),.proto-v10-cart,.h-cart{display:inline-grid!important;place-items:center}
.cart>.ph-bold,.proto-v10-cart>.ph-bold,.h-cart>.ph-bold{font-size:19px;color:#111}
.mini-search{position:relative}
.mini-search>.ph{position:absolute;z-index:2;left:12px;top:50%;color:#8b8a83;font-size:15px;transform:translateY(-50%)}
.mini-search>input{padding-left:36px!important}

/* Acciones y estados */
.view-btn::before,.view-btn::after{display:none!important}.view-btn>.ph-bold{font-size:15px}
.helper-close>.ph,.media-close>.ph{font-size:19px}
.video-help-thumb::after{display:none!important}
.video-help-thumb>.ph-fill{position:absolute;z-index:2;left:50%;top:50%;width:34px;height:34px;border-radius:50%;background:#f5c400;color:#111;font-size:13px;transform:translate(-50%,-50%)}
.sort-trigger::after{display:none!important}
.sort-trigger>.ph{position:absolute;right:16px;top:50%;font-size:14px;transform:translateY(-50%);transition:transform .18s ease}
.sort-wrap.open .sort-trigger>.ph{transform:translateY(-50%) rotate(180deg)}
.trust-ic.phosphor-trust-icon::before{display:none!important}
.trust-ic.phosphor-trust-icon>.ph,.trust-ic.phosphor-trust-icon>.ph-fill,.trust-ic.phosphor-trust-icon>.ph-bold{font-size:16px}
.filter>summary.phosphor-disclosure::after,.faq details>summary.phosphor-disclosure::after{display:none!important}
.filter>summary.phosphor-disclosure>.ph,.faq details>summary.phosphor-disclosure>.ph{flex:0 0 auto;font-size:15px;transition:transform .18s ease}
.filter[open]>summary.phosphor-disclosure>.ph,.faq details[open]>summary.phosphor-disclosure>.ph{transform:rotate(180deg)}
.no-original .plus.phosphor-renew>.ph{font-size:19px}
.rating>.ph-stars{display:inline-flex;margin-right:5px;gap:1px;vertical-align:-1px}
.rating>.ph-stars>.ph-fill{font-size:11px}
.control-btn>.ph-bold,.review-action>.ph-bold,.add-cart>.ph-bold{font-size:15px}
.proof.phosphor-proof::before,.brand-proof.phosphor-proof::before,.stock.phosphor-stock::before{display:none!important}
.proof.phosphor-proof,.brand-proof.phosphor-proof,.stock.phosphor-stock{display:inline-flex;align-items:center;gap:6px}
.proof.phosphor-proof>.ph,.brand-proof.phosphor-proof>.ph{color:#9b7900;font-size:14px}
.stock.phosphor-stock>.ph-fill{color:#58a34d;font-size:14px}

/* Footer: redes con la misma familia visual; pagos y marcas conservan su identidad */

@media (prefers-reduced-motion:reduce){.ph-arrow-inline,.nav-trigger>.ph,.proto-v10-trigger>.ph,.sort-trigger>.ph{transition:none!important}}


/* cr-ajustes-comun */
/* Ajustes propios sobre diseno-comun.css (que se regenera desde los prototipos con
   portar_css.py): lo que pongamos aqui no se pierde al volver a portar. */

/* ---- Menu: el panel se abre 16 px por debajo de la palabra. Sin este puente
   invisible, al bajar el raton por ese hueco el menu se cerraba (25-09-2026). ---- */
@media (min-width: 1101px) {
	.nav-item.open::after,
	.nav-item:hover::after { content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 34px; }
}

/* ---- Ventana «Identificar mi modelo» (lupa): mas pequeña, como pidio Rafa (25-09-2026).
   960 px de ancho, hasta 820 px o el 85 % de la pantalla de alto, dibujo de 190-250 px. ---- */
.model-helper { width: min(960px, calc(100vw - 48px)); max-height: min(820px, 85vh); }
.mh-top { gap: 12px; padding: 12px 18px; }
.mh-top strong { font-size: 16px; }
.mh-close { width: 30px; height: 30px; font-size: 18px; }
.mh-search { width: min(420px, 100%); margin-left: 8px; }
.mh-search input { padding: 9px 12px; font-size: 13px; }
.mh-search button { padding: 0 14px; font-size: 10px; }
.mh-main { padding: 18px 22px 12px; }
.mh-title { font-size: 21px; margin-bottom: 4px; }
.mh-intro { font-size: 12px; line-height: 1.5; }
.temple-guide { margin: 12px 0 10px; padding: 10px 18px 4px; border-radius: 10px; }
.temple-guide img { width: auto; max-width: 100%; height: clamp(190px, 23vh, 250px); }
.mh-codes { gap: 8px; margin-bottom: 10px; }
.mh-code { padding: 9px 11px; border-radius: 8px; }
.mh-code b { font-size: 15px; margin-bottom: 1px; }
.mh-code span { font-size: 10.5px; }
.mh-example { padding: 8px 12px; font-size: 11.5px; }
.mh-side { padding: 14px 22px 18px; }
.mh-side-head { margin-bottom: 10px; }
.mh-side h3 { font-size: 16px; }
.mh-side-head p { font-size: 11px; max-width: 420px; }
.mh-help { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* «Consultar con soporte» es un enlace (va a Contacto): mismo aspecto que el boton */
.mh-help button,
.mh-help a.mh-help-link { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 1px solid var(--bd); border-radius: 9px; background: #fff; color: var(--text); text-align: left; text-decoration: none; transition: border-color .2s, transform .2s; }
.mh-help a.mh-help-link:hover,
.mh-help a.mh-help-link:focus-visible { border-color: var(--y); transform: translateY(-1px); outline: none; }
.mh-help-ic { width: 30px; height: 30px; }
.mh-help-ic svg { width: 15px; height: 15px; }
.mh-status { margin-top: 8px; }
@media (max-width: 780px) {
	.model-helper { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
	.mh-search { width: 100%; margin: 0; }
	.mh-main, .mh-side { padding-left: 16px; padding-right: 16px; }
	.mh-help { grid-template-columns: 1fr; }
	.temple-guide img { height: auto; width: 100%; max-height: 200px; }
}

/* ---------------------------------------------------------------- contacto: respuestas rapidas (25-09) */
.cr-p-contacto .cr-ayudas { margin: -10px 0 22px; }
.cr-p-contacto .cr-ayuda { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: #3d3b35; font-size: 13px; line-height: 1.6; }
.cr-p-contacto .cr-ayuda + .cr-ayuda { margin-top: 10px; }
.cr-p-contacto .cr-ayuda p { margin: 0 0 8px; }
.cr-p-contacto .cr-ayuda p:last-child { margin-bottom: 0; }
.cr-p-contacto .cr-ayuda ul, .cr-p-contacto .cr-ayuda ol { margin: 0 0 8px 18px; padding: 0; }
.cr-p-contacto .cr-ayuda img { display: block; max-width: 100%; height: auto; max-height: 220px; margin: 8px 0; border-radius: 8px; object-fit: contain; background: var(--paper); }
.cr-p-contacto .cr-ayuda-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
.cr-p-contacto .cr-ayuda-fotos figure { margin: 0; }
.cr-p-contacto .cr-ayuda-fotos img { max-height: 130px; width: 100%; }
.cr-p-contacto .cr-ayuda-fotos figcaption { font-size: 12px; color: var(--muted); }
.cr-p-contacto .cr-ayuda-nota { font-weight: 600; color: #625a3e; }
.cr-p-contacto .cr-ayuda-boton { display: inline-block; margin-right: 12px; padding: 9px 14px; border-radius: 7px; background: var(--ink); color: #fff !important; font-weight: 700; text-decoration: none; }
.cr-p-contacto .cr-ayuda-video { display: inline-block; margin-top: 4px; padding: 9px 14px; border-radius: 7px; background: var(--yellow-soft); border: 1px solid var(--yellow); color: var(--ink); font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------- enlace de devolucion */
.cr-devolucion .contact-layout { padding-top: 36px; padding-bottom: 56px; }
.cr-devolucion .cr-dev-plazo-caja { display: flex; gap: 10px; align-items: center; margin: 0 0 24px; padding: 14px 16px; border-radius: var(--radius); background: var(--yellow-soft); border: 1px solid var(--yellow); font-size: 15px; }
.cr-devolucion .cr-dev-plazo-caja .ph { font-size: 22px; color: var(--yellow-dark); }
.cr-devolucion .cr-dev-lineas { display: grid; gap: 8px; }
.cr-devolucion .cr-dev-linea { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px; }
.cr-devolucion .cr-dev-linea input { width: 18px; height: 18px; flex: none; }
.cr-devolucion .cr-dev-condiciones ul { margin: 0 0 14px 18px; padding: 0; font-size: 13.5px; line-height: 1.6; }
.cr-devolucion .cr-dev-condiciones li { margin-bottom: 6px; }
.cr-devolucion .cr-dev-h3 { margin: 22px 0 8px; font-family: var(--heading); font-size: 22px; text-transform: uppercase; }
.cr-devolucion .cr-dev-plazo { font-size: 15px; }
.cr-devolucion .cr-dev-pasos { margin: 0 0 0 18px; padding: 0; font-size: 13.5px; line-height: 1.6; }
.cr-devolucion .form-head .submit { display: inline-flex; margin-top: 10px; text-decoration: none; }

/* ---------------------------------------------------------------- newsletter del pie */

/* ---------------------------------------------------------------- profesionales */
.cr-pro .cr-pro-hero { padding: 40px 0 26px; }
.cr-pro .cr-pro-hero h1 { margin: 10px 0 12px; font-family: var(--heading); font-size: clamp(34px, 5vw, 60px); line-height: .95; text-transform: uppercase; }
.cr-pro .cr-pro-hero h1 span { color: var(--yellow-dark); }
.cr-pro .cr-pro-hero > p { max-width: 720px; font-size: 16px; line-height: 1.6; color: #3d3b35; }
.cr-pro .cr-pro-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 22px 0; max-width: 820px; }
.cr-pro .cr-pro-cifras div { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.cr-pro .cr-pro-cifras b { display: block; font-family: var(--heading); font-size: 28px; }
.cr-pro .cr-pro-cifras span { font-size: 13px; color: var(--muted); }
.cr-pro .cr-pro-hero .submit { display: inline-flex; text-decoration: none; }
.cr-pro .cr-pro-bloque { padding: 22px 0; }
.cr-pro .cr-pro-bloque h2 { margin: 0 0 12px; font-family: var(--heading); font-size: clamp(26px, 3.4vw, 38px); text-transform: uppercase; }
.cr-pro .cr-pro-bloque > p { max-width: 820px; font-size: 15px; line-height: 1.65; color: #3d3b35; }
.cr-pro .cr-pro-ventajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cr-pro .cr-pro-ventajas article { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.cr-pro .cr-pro-ventajas .ph { width: 26px; height: 26px; color: var(--yellow-dark); }
.cr-pro .cr-pro-ventajas h3 { margin: 8px 0 6px; font-size: 16px; }
.cr-pro .cr-pro-ventajas p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #4a4841; }
.cr-pro .cr-pro-tabla { width: 100%; max-width: 720px; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.cr-pro .cr-pro-tabla th, .cr-pro .cr-pro-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--soft); text-align: left; font-size: 14px; }
.cr-pro .cr-pro-tabla th { background: var(--ink); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.cr-pro .cr-pro-tabla td strong { font-size: 18px; }
.cr-pro .cr-pro-nota { font-size: 13px !important; color: var(--muted) !important; }
.cr-pro .field select { height: 46px; padding: 0 12px; }
.cr-pro .side-tip ul { margin: 0 0 0 18px; padding: 0; font-size: 13.5px; line-height: 1.6; }
.cr-pro .cr-pro-faq details { max-width: 820px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; margin-bottom: 10px; }
.cr-pro .cr-pro-faq summary { cursor: pointer; font-weight: 700; }
.cr-pro .cr-pro-faq details p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #4a4841; }
@media (max-width: 720px) { .cr-pro .cr-pro-tabla th, .cr-pro .cr-pro-tabla td { padding: 10px 8px; font-size: 13px; } }

/* Traducciones (26-09): en alemán y francés hay palabras largas que no cabían en móvil. Los títulos parten
   con guion según el idioma de la página (<html lang>) y, si aun así no caben, parten la palabra. */
/* Sin guiones automáticos en los títulos grandes («ORIGINA-LES»): solo parten una palabra si de verdad no cabe. */
h1, h2, h3, h4, .ovc-title, .factory-h, .sp-title { overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
@media (max-width: 600px) {
	.ovc-title { font-size: clamp(20px, 6.4vw, 30px); }
}

/* Preguntas de la propia ficha (varios párrafos por respuesta) */
.faq details>.faq-answer p{margin:0 0 8px!important;padding:0!important}
.faq details>.faq-answer p:last-child{margin-bottom:0!important}

/* Móvil: la barra de arriba estaba oculta (display:none) y con ella el selector de idioma y «Envío gratis».
   Ahora sale compacta (32 px): envío gratis + idioma; el carrusel de mensajes solo en pantallas anchas. */
@media(max-width:680px){
html .topbar{display:flex;height:32px}
html .topbar .tb-mq{display:none}
html .topbar .tb-ship{flex:1;min-width:0;border-right:0;padding:0 12px;overflow:hidden}
html .topbar .tb-ship .txt{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .topbar .tb-lang{padding:0 12px}
html .header{top:32px}
html .nav{top:96px;max-height:calc(100vh - 96px)}
html body:not(.home) #main-content{padding-top:96px}
html body .hero{padding-top:96px}
}

/* Gafas completas: repuestos del mismo modelo (26-09-2026) */
.cr-repuestos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:22px}
.cr-repuesto{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--bd,#e6e3da);border-radius:10px;padding:14px;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.cr-repuesto:hover{border-color:var(--y,#e8a020);transform:translateY(-2px)}
.cr-repuesto img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.cr-repuesto-nombre{font-size:14px;font-weight:600;line-height:1.3}
.cr-repuesto-precio{font-size:14px;color:var(--muted,#6d6a61)}

/* Selector de idioma (27-09): la barra de arriba tenía overflow:hidden y RECORTABA el desplegable (se abría pero no
   se veía). El recorte lo necesita solo la franja de mensajes (.tb-mq ya lo tiene). */
html .topbar{overflow:visible}
html .topbar .tb-lang .dd{box-shadow:0 12px 30px rgba(0,0,0,.35)}

/* ==========================================================================
   Pie v2 (prototipo «Footer v2» de Nicolás, 30-09-2026)
   Newsletter destacada → Marca | Catálogo | Ayuda | Empresa+Contacto → Idioma / Pagos → legal.
   En ≤720 px las columnas son acordeones <details> (tema.js, apartado 8).
   ========================================================================== */
.footer.ftn { --ftn-bg: #141414; --ftn-line: rgba(255,255,255,.09); --ftn-tx: #a9a79f; --ftn-hi: #fff; --ftn-y: #f5c400;
	background: var(--ftn-bg); color: var(--ftn-tx); padding: 36px 0 28px; }
.ftn a { color: var(--ftn-tx); text-decoration: none; transition: color .15s; }
.ftn a:hover { color: var(--ftn-hi); }
.ftn h4 { margin: 0; font-family: var(--fb); color: var(--ftn-hi); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Newsletter */
.ftn-nl { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,560px); gap: 48px; align-items: center; margin: 0;
	padding: 30px 34px; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: #1c1c1c; }
.ftn-nl-copy strong { display: block; color: var(--ftn-hi); font-size: 22px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 6px; }
.ftn-nl-copy p { margin: 0; font-size: 14px; }
.ftn .cr-nl-form { width: 100%; max-width: 560px; margin: 0; justify-self: end; }
.ftn .cr-nl-fila { display: flex; gap: 8px; }
.ftn .cr-nl-fila input[type=email] { flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 0 14px; border-radius: 8px;
	border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: var(--ftn-hi); font: inherit; font-size: 14px; }
.ftn .cr-nl-fila input[type=email]::placeholder { color: rgba(255,255,255,.45); }
.ftn .cr-nl-fila input[type=email]:focus { outline: 2px solid var(--ftn-y); outline-offset: 1px; }
.ftn .cr-nl-fila button { flex: 0 0 auto; height: 48px; margin: 0; padding: 0 22px; border: 0; border-radius: 8px; background: var(--ftn-y);
	color: #111; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.ftn .cr-nl-fila button:disabled { opacity: .6; }
.ftn .cr-nl-acepto { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12px; line-height: 1.5; }
.ftn .cr-nl-acepto a { color: var(--ftn-hi); text-decoration: underline; }
.ftn .cr-nl-msg { margin: 8px 0 0; font-size: 13px; }
.ftn .cr-nl-msg.ok { color: #7bd88f; }
.ftn .cr-nl-msg.error { color: #ff8a80; }

/* Columnas */
.ftn-main { display: grid; grid-template-columns: 1.4fr repeat(3,minmax(0,1fr)); gap: 40px; padding: 40px 0; border-bottom: 1px solid var(--ftn-line); }
.ftn-brand .footer-brand-logo { display: block; width: 150px; height: auto; }
.ftn-brand p { margin: 16px 0 18px; font-size: 14px; line-height: 1.6; max-width: 30ch; }
.ftn-brand p b { color: var(--ftn-hi); font-weight: 600; }
.ftn .foot-social { display: flex; gap: 8px; }
.ftn .fs-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--ftn-hi); }
.ftn .fs-btn:hover { background: var(--ftn-y); color: #111; }
.ftn .fs-btn svg { width: 18px; height: 18px; fill: currentColor; }
.ftn-stack { display: flex; flex-direction: column; gap: 30px; }
.ftn-col summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: default; margin-bottom: 16px; }
.ftn-col summary::-webkit-details-marker { display: none; }
.ftn-caret { display: none; width: 16px; height: 16px; fill: var(--ftn-tx); transition: transform .2s; }
.ftn-links { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.ftn .ftn-cta { margin-top: 6px; color: var(--ftn-y); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ftn-cta svg { width: 14px; height: 14px; fill: currentColor; }

/* Idioma y pagos */
.ftn-util { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 0; border-bottom: 1px solid var(--ftn-line); }
.ftn-util-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ftn-util-group h4 { font-size: 11px; }
.ftn .language-inline { display: flex; gap: 4px; flex-wrap: wrap; }
.ftn .language-inline a { font-size: 13px; font-weight: 600; padding: 5px 9px; border-radius: 6px; }
.ftn .language-inline a.on { background: rgba(245,196,0,.14); color: var(--ftn-y); }
.ftn .pay-icons { display: flex; gap: 6px; flex-wrap: wrap; }
.ftn .pay-ic { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--ftn-line); color: #cfcdc6; }

/* Legal */
.ftn-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; font-size: 12px; }
.ftn-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 1000px) {
	.ftn-main { grid-template-columns: repeat(3,minmax(0,1fr)); }
	.ftn-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
	.ftn-brand p { margin: 0; }
}
@media (max-width: 720px) {
	.footer.ftn { padding-top: 24px; }
	.ftn-nl { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
	.ftn .cr-nl-form { justify-self: stretch; max-width: none; }
	.ftn .cr-nl-fila { flex-direction: column; }
	.ftn .cr-nl-fila input[type=email] { flex: 0 0 auto; }
	.ftn .cr-nl-fila button { width: 100%; }
	.ftn-main { grid-template-columns: 1fr; gap: 0; padding: 28px 0 8px; }
	.ftn-brand { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 24px; }
	.ftn-stack { gap: 0; }
	.ftn-col { border-top: 1px solid var(--ftn-line); }
	.ftn-col summary { cursor: pointer; margin: 0; padding: 16px 0; }
	.ftn-caret { display: block; }
	.ftn-col[open] .ftn-caret { transform: rotate(180deg); }
	.ftn-links { padding-bottom: 18px; }
	.ftn-util { flex-direction: column; align-items: flex-start; }
	.ftn-bottom { flex-direction: column-reverse; }
}

/* Selector de moneda (tienda inglesa, 30-09): al lado del de idioma y con su diseño */
html .topbar .tb-cur + .tb-lang { margin-left: 0; }
html .topbar .tb-cur .dd { min-width: 130px; }
.tb-cur .cur-sim { display: inline-block; min-width: 22px; text-align: center; }
/* 01-10: en móvil se ocultaba «a partir de 38 €» y quedaba «GRATIS · Envío gratis» (parecía gratis siempre).
   Ahora se quita la etiqueta «Gratis» (repite lo mismo) y la condición se ve entera. */
@media (max-width: 480px) { html .topbar .tb-lang { padding: 0 9px; } html .topbar .tb-ship { padding: 0 10px; } html .topbar .tb-ship .badge { display: none; } html .topbar .tb-ship .txt { font-size: 11px; letter-spacing: -.01em; } }
@media (max-width: 359px) { html .topbar .tb-ship .txt { font-size: 10px; } }
/* Anclas (#repuesto, #faq-…): que el título no quede debajo de la barra y la cabecera fijas (36+64 / 32+64 px) */
html { scroll-padding-top: 112px; }

/* Banderas del selector de idioma (SVG en vez de emoji, que en Windows se veía «ES ES») */
.tb-flag{display:inline-block;width:18px;height:12px;vertical-align:-1px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.18);flex-shrink:0}
/* Móvil estrecho con selector de moneda (EN): «€ EUR» → «EUR» y el idioma solo con la bandera, para que
   «Free shipping on orders over 38 €» quepa entero (01-10). Los botones conservan su aria-label. */
@media (max-width: 400px) { html .topbar .tb-cur .cur-s { display: none; } html .topbar .tb-cur ~ .tb-lang .lang-c, html .topbar .tb-cur + .tb-lang .lang-c { display: none; } html .topbar .tb-cur { padding: 0 8px; } }
/* Cabecera en móviles de 320–400 px (01-10, Rafa «se salen de la pantalla»): logo 182 + hueco 32 + carrito/menú 88
   + márgenes 40 no cabían en 320 y el móvil ensanchaba TODA la página (barra de arriba, portada…). */
@media (max-width: 400px) { html .header-in { gap: 10px; padding: 0 14px; } html .logo { gap: 8px; min-width: 0; flex-shrink: 1; } }

/* cr-diseno-portada */
/* ==========================================================================
   DISENO · SOLO PORTADA
   Portado del prototipo de Nicolas (Homepage v10, entrega del 24-09-2026) con
   su CSS tal cual: mismas clases, mismos valores. Solo se han cambiado las
   rutas de las imagenes (a las optimizadas del tema). Los iconos son SVG con
   las mismas clases que ponia la fuente Phosphor (.ph, .ph-bold...).
   NO EDITAR A MANO sin mirar antes el prototipo: si algo no coincide con el
   diseno, el fallo debe corregirse aqui igual que alli.
   ========================================================================== */
.mq-item{display:inline-flex;align-items:center;gap:9px;padding:0 22px;font-size:12px;color:rgba(255,255,255,.55);}
.mq-item .dot{width:3px;height:3px;border-radius:50%;background:rgba(232,160,32,.5);flex-shrink:0;}
.mq-item .hi{color:var(--y);font-weight:500;}
.mq-item .tag{background:rgba(232,160,32,.12);color:var(--y);font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:2px;text-transform:uppercase;}
.tb-lang{margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 18px;height:100%;border-left:1px solid rgba(255,255,255,.10);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;flex-shrink:0;cursor:pointer;transition:background .15s;position:relative;}
.tb-lang:hover{background:rgba(255,255,255,.05);}
.tb-lang .ar{font-size:9px;color:rgba(255,255,255,.5);}
.tb-lang .dd{position:absolute;top:100%;right:0;background:var(--k);min-width:200px;border:1px solid rgba(255,255,255,.10);border-top:none;padding:6px;display:none;flex-direction:column;z-index:400;}
.tb-lang.open .dd{display:flex;}
.tb-lang .dd a{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:11.5px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.06em;transition:background .15s,color .15s;}
.eyebrow{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:var(--y);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;}
.eyebrow::before{content:'';display:block;width:22px;height:1.5px;background:var(--y);}
.eyebrow.c{justify-content:center;}
.eyebrow.c::before{display:none;}
.eyebrow.inv{color:var(--y);}
.sec-title{font-family:var(--fh);font-size:clamp(34px,4.4vw,56px);font-weight:900;text-transform:uppercase;letter-spacing:-.5px;line-height:.95;color:var(--text);}
.sec-title .ac{color:var(--y-text);}
.sec-title.inv .ac,.sec-dark .sec-title .ac,.sec-dark2 .sec-title .ac{color:var(--y);}
.sec-title.inv{color:#fff;}
.sec-sub{font-size:14.5px;color:var(--muted);margin-top:14px;max-width:600px;line-height:1.6;}
.sec-sub.c{margin-left:auto;margin-right:auto;text-align:center;}
.sec-sub.inv{color:rgba(255,255,255,.45);}
.sec{padding:96px 0;}
.sec-alt{background:var(--off);}
.sec-dark{background:var(--k);}
.sec-dark2{background:var(--k2);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;padding:12px 26px;border-radius:var(--r);transition:background-color .18s,color .18s,border-color .18s,transform .18s;text-decoration:none;}
.btn .arr{transition:transform .2s;}
.btn:hover .arr{transform:translateX(4px);}
.btn-y{background:var(--y);color:var(--k);}
.btn-y:hover{background:var(--y2);transform:translateY(-1px);}
.btn-k{background:var(--k);color:#fff;}
.btn-k:hover{background:var(--y);color:var(--k);}
.btn-dk{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.22);}
.btn-dk:hover{border-color:var(--y);color:var(--y);}
.btn-ln{background:transparent;color:var(--text);border:1.5px solid var(--bd);}
.btn-ln:hover{border-color:var(--y);color:var(--y);}
.hero{min-height:clamp(580px,calc(100vh - 190px),720px);background:var(--k);
  display:flex;flex-direction:column;justify-content:flex-start;
  position:relative;overflow:hidden;padding-top:clamp(145px,16vh,165px);}
.hero-bg{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 46% 42% at 70% 30%,rgba(255,244,154,.34) 0%,rgba(255,229,66,.13) 46%,transparent 76%),
    linear-gradient(180deg,#eac306 0%,#eac306 36%,#d5b105 58%,#9a8004 76%,#302802 91%,#050505 100%);}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 36% 44% at 72% 34%,rgba(255,255,255,.13),transparent 72%),
    linear-gradient(90deg,rgba(234,195,6,.08) 0%,transparent 56%,rgba(255,216,30,.08) 100%),
    linear-gradient(0deg,rgba(0,0,0,.20),transparent 38%);}
.hero::before{content:'';position:absolute;left:32px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(232,160,32,.30) 30%,rgba(232,160,32,.30) 70%,transparent);
  z-index:1;}
.hero-ghost{position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  font-family:var(--fh);font-size:clamp(180px,22vw,340px);font-weight:900;
  color:rgba(232,160,32,.045);line-height:1;user-select:none;pointer-events:none;z-index:1;
  letter-spacing:-.04em;}
.hero-body{position:relative;z-index:2;max-width:1360px;margin:0 auto;width:100%;padding:0 clamp(32px,4vw,68px) 24px;}
.hero-layout{display:grid;grid-template-columns:minmax(390px,.72fr) minmax(660px,1.28fr);gap:44px;align-items:center;}
.hero-copy{min-width:0;}
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#171717;}
.hero-eyebrow::before{content:'';width:22px;height:2px;background:#171717;flex:0 0 auto;}
.hero .hero-layout h1{font-size:clamp(46px,3.75vw,58px);max-width:620px;}
.hero-title-line{display:block;white-space:nowrap;}
.hero-exploded{width:100%;max-width:850px;justify-self:end;color:#fff;}
.exploded-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 2% 8px;}
.exploded-kicker{font-family:var(--fh);font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--y);}
.exploded-instruction{font-size:11px;color:rgba(255,255,255,.72);}
.exploded-stage{position:relative;aspect-ratio:16/9;isolation:isolate;outline:none;cursor:default;} /* 30-09 Rafa: la lupa confundía (el despiece se abre al pasar el ratón, el clic no amplía) */
.exploded-stage:focus-visible{box-shadow:0 0 0 2px var(--y);border-radius:12px;}
.exploded-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(255,255,255,.13)) drop-shadow(0 20px 22px rgba(0,0,0,.22));transition:transform .58s cubic-bezier(.2,.75,.2,1),opacity .34s ease;will-change:transform,opacity;}
.exploded-mounted{z-index:1;opacity:1;}
.exploded-piece{z-index:2;opacity:0;transform:translate3d(var(--from-x,0%),var(--from-y,0%),0) scale(.995);transition:transform .28s ease-in,opacity .12s ease;transition-delay:0s,0s;}
.exploded-frontal{--from-x:0%;--from-y:0%;--piece-delay:0s;}
.exploded-original{--from-x:13%;--from-y:-27%;--piece-delay:.02s;}
.exploded-compatible{--from-x:-9%;--from-y:-25%;--piece-delay:.05s;}
.exploded-temple{--from-x:-4%;--from-y:0%;--piece-delay:.08s;}
.exploded-screw{--from-x:-2.5%;--from-y:16%;--piece-delay:.12s;}
.exploded-trim-left{--from-x:1.25%;--from-y:11%;--piece-delay:.14s;}
.exploded-trim-right{--from-x:4%;--from-y:17%;--piece-delay:.16s;}
.exploded-logo{--from-x:-10%;--from-y:15.5%;--piece-delay:.18s;}
.exploded-reference{z-index:3;opacity:0;transform:scale(.998);transition-duration:.2s,.2s;}
.exploded-copy-layer{z-index:4;opacity:0;transform:translateY(5px);filter:none;}
.hero-exploded.is-exploded .exploded-mounted{opacity:0;transform:scale(.992);}
.hero-exploded.is-exploded .exploded-piece{opacity:1;transform:translate3d(0,0,0) scale(1);transition-duration:.82s,.18s;transition-timing-function:cubic-bezier(.18,.78,.18,1),ease;transition-delay:var(--piece-delay),0s;}
.hero-exploded.is-exploded .exploded-reference{opacity:1;transform:scale(1);transition-delay:.84s;}
.hero-exploded.is-exploded .exploded-copy-layer{opacity:1;transform:translateY(0);transition-delay:.90s;}
.exploded-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:10px;color:rgba(255,255,255,.56);transition:color .2s;}
.exploded-hint::before{content:'\2194';display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(245,194,0,.42);border-radius:50%;color:var(--y);}
.hero-exploded.is-exploded .exploded-hint{color:#fff;}
.hero h1{font-family:var(--fh);
  font-size:clamp(52px,8vw,110px);
  font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-2px;
  color:#fff;margin-bottom:26px;max-width:980px;}
.hero h1 .outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);display:inline;}
.hero h1 .gold{color:var(--y);display:block;}
.hero-sub{font-size:15.5px;color:rgba(255,255,255,.55);max-width:480px;line-height:1.75;margin-bottom:28px;}
.hero-sub strong{color:#fff;font-weight:600;}
.hero-search{display:flex;max-width:560px;margin-bottom:24px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s;}
.hero-search:focus-within{border-color:rgba(232,160,32,.6);}
.hero-search input{flex:1;background:transparent;border:none;outline:none;padding:15px 20px;color:#fff;font-family:var(--fb);font-size:14px;}
.hero-search input::placeholder{color:rgba(255,255,255,.30);}
.hero-search button{background:var(--y);padding:0 24px;font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--k);display:flex;align-items:center;gap:8px;}
.hero-search button:hover{background:var(--y2);}
.hero-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid rgba(255,255,255,.12);border-radius:40px;font-size:10px;color:rgba(255,255,255,.55);transition:border-color .15s,color .15s;}
.pill:hover{border-color:rgba(232,160,32,.45);color:#fff;}
.pill .dot{width:4px;height:4px;border-radius:50%;background:var(--y);flex-shrink:0;}
@media(max-width:900px){
.hero{min-height:940px;}
.hero-layout{grid-template-columns:1fr;gap:30px;}
.hero .hero-layout h1{max-width:780px;}
.hero-exploded{justify-self:start;max-width:720px;}
}
@media(max-width:680px){
.hero{min-height:0;padding-top:86px;}
.hero-body{padding:28px 20px 34px;}
.hero-layout{gap:22px;}
.hero-eyebrow{margin-bottom:11px;font-size:9px;}
.hero .hero-layout h1{font-size:clamp(37px,11vw,47px);line-height:.91;margin-bottom:18px;}
.hero-sub{font-size:13px;line-height:1.58;margin-bottom:20px;max-width:430px;color:rgba(15,15,15,.82);text-shadow:none;}
.hero-sub strong{color:#111;}
.hero-search{margin-bottom:14px;}
.hero-search input{min-width:0;padding:13px 14px;font-size:12px;}
.hero-search button{padding:0 16px;font-size:10px;}
.hero-pills{gap:6px;margin-top:0;}
.pill{padding:5px 9px;font-size:9px;background:rgba(10,10,10,.06);border-color:rgba(10,10,10,.18);color:rgba(10,10,10,.78);}
.hero-exploded{max-width:520px;margin:0 auto;}
.exploded-head{display:none;}
.exploded-stage{aspect-ratio:16/8.4;cursor:default;pointer-events:none;overflow:hidden;}
.exploded-mounted{opacity:1!important;transform:scale(1.35)!important;}
.exploded-piece,.exploded-reference,.exploded-copy-layer{display:none!important;}
.exploded-hint,.hero-scroll{display:none!important;}
}
.hero-scroll{position:absolute;bottom:28px;right:32px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;}
.scroll-line{width:1px;height:44px;background:rgba(255,255,255,.10);position:relative;overflow:hidden;}
.scroll-line::after{content:'';position:absolute;top:-100%;left:0;right:0;height:50%;background:var(--y);animation:scr 1.8s ease-in-out infinite;}
.scroll-lbl{font-family:var(--fh);font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.22);writing-mode:vertical-lr;}
.trust-bar{background:var(--w);border-top:3px solid var(--y);border-bottom:1px solid var(--bd);}
.trust-in{max-width:1280px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(4,1fr);}
.tb-item{display:flex;align-items:center;gap:13px;padding:22px 18px;border-right:1px solid var(--bd);transition:background .15s;}
.tb-item:last-child{border-right:none;}
.tb-item:hover{background:var(--yd);}
.tb-ic{width:38px;height:38px;border-radius:50%;background:var(--yd);border:1px solid var(--yb);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--y);}
.tb-ic .ph{font-size:19px;line-height:1;}
.tb-tx{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.3;}
.tb-tx small{display:block;font-size:11.5px;font-weight:400;color:var(--g3);margin-top:2px;}
.brands-sec{padding:64px 0 72px;background:var(--w);}
.brands-head{text-align:center;margin-bottom:32px;}
.brands-row{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
  background:var(--off);}
.brand-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:28px 16px;border-right:1px solid var(--bd);
  text-decoration:none;transition:background .18s;position:relative;}
.brand-item:last-child{border-right:none;}
.brand-item::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--y);transform:scaleX(0);transition:transform .2s;}
.brand-item:hover{background:var(--w);}
.brand-item:hover::after{transform:scaleX(1);}
.brand-item:focus-visible{outline:3px solid var(--y);outline-offset:-3px;background:var(--w);}
.brand-item:focus-visible::after{transform:scaleX(1);}
.brand-name{font-family:var(--fh);font-size:clamp(20px,2vw,26px);font-weight:900;
  color:var(--text);letter-spacing:-.02em;text-transform:uppercase;line-height:1;}
.brand-count{font-size:11px;color:var(--g3);font-weight:500;letter-spacing:.04em;}
.brand-item:hover .brand-count{color:var(--y);}
.rep-head{text-align:center;margin-bottom:48px;}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.rep-card{background:var(--w);border:1px solid var(--bd);border-radius:6px;
  padding:36px 36px 30px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .25s;}
.rep-card:hover{border-color:rgba(232,160,32,.5);box-shadow:0 10px 40px rgba(0,0,0,.06);}
.rep-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.rep-tag{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g3);}
.rep-go{width:38px;height:38px;border-radius:50%;background:var(--k);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .25s,color .2s;}
.rep-card:hover .rep-go{background:var(--y);color:var(--k);transform:rotate(-45deg);}
.rep-brand{font-family:var(--fh);font-size:clamp(48px,6vw,86px);font-weight:900;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.88;
  color:var(--text);margin-bottom:6px;}
.rep-brand .ac{color:var(--y);}
.rep-tagline{font-size:13.5px;color:var(--muted);margin-bottom:24px;max-width:380px;line-height:1.5;}
.rep-visual{aspect-ratio:16/7;background:var(--off);border:1px solid var(--bd);border-radius:4px;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  margin-bottom:22px;}
.rep-visual::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(0,0,0,.05) 1px,transparent 1px);
  background-size:14px 14px;}
.rep-visual img{position:relative;z-index:1;max-width:62%;max-height:82%;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(0,0,0,.12));}
.pt{position:absolute;width:28px;height:28px;border-radius:50%;
  background:var(--y);color:var(--k);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:12px;font-weight:900;
  cursor:pointer;z-index:3;
  box-shadow:0 2px 12px rgba(232,160,32,.45);
  transition:transform .25s ease,box-shadow .25s ease;}
.pt::before{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(232,160,32,.4);
  animation:none;
  pointer-events:none;}
@keyframes ptpulse{
  0%,100%{transform:scale(.85);opacity:.65;}
  50%{transform:scale(1.25);opacity:0;}
}
.pt:hover,.pt.on{transform:scale(1.18);
  box-shadow:0 0 0 12px rgba(232,160,32,.14),0 2px 14px rgba(232,160,32,.5);
  background:var(--k);color:var(--y);
  z-index:10;}
.pt-tip{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--k);color:#fff;
  font-family:var(--fb);font-size:11.5px;font-weight:500;
  padding:6px 11px;border-radius:3px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;
  letter-spacing:.02em;}
.pt-tip::before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-right-color:var(--k);}
.pt:hover .pt-tip,.pt.on .pt-tip{opacity:1;}
.pt.flip .pt-tip{left:auto;right:calc(100% + 12px);}
.pt.flip .pt-tip::before{right:auto;left:100%;border-right-color:transparent;border-left-color:var(--k);}
.pt.pt-varilla.flip .pt-tip{left:50%;right:auto;top:auto;bottom:calc(100% + 12px);
  transform:translateX(-50%);}
.pt.pt-varilla.flip .pt-tip::before{left:50%;right:auto;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--k);}
.pt.pt-cristal .pt-tip,.pt.pt-comp .pt-tip,.pt.pt-otros .pt-tip{left:50%;right:auto;top:auto;bottom:calc(100% + 12px);
  transform:translateX(-50%);}
.pt.pt-cristal .pt-tip::before,.pt.pt-comp .pt-tip::before,.pt.pt-otros .pt-tip::before{left:50%;right:auto;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--k);}
.rep-visual img{transition:transform .45s cubic-bezier(.2,.75,.25,1),filter .3s ease,opacity .18s ease;
  will-change:transform;}
.rep-visual img.changing{opacity:0;transform:scale(.985);}
.rep-card.has-selection .rep-visual img{filter:drop-shadow(0 14px 16px rgba(13,13,13,.12));}
.rep-card.has-selection .pt:not(.on){opacity:.58;transform:scale(.88);}
.rep-card.rb.has-selection .pt-cristal:not(.on),.rep-card.rb.has-selection .pt-comp:not(.on){transform:translate(-50%,-50%) scale(.88);}
.rep-card.rb.has-selection .pt-otros:not(.on){transform:translateX(-50%) scale(.88);}
.rep-card.ok.has-selection .pt-cristal:not(.on),.rep-card.ok.has-selection .pt-comp:not(.on){transform:translate(-50%,-50%) scale(.88);}
.rep-card.ok.has-selection .pt-otros:not(.on){transform:translateX(-50%) scale(.88);}
.rep-selection{min-height:24px;margin:10px 0 0;display:flex;align-items:center;gap:8px;
  font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--g3);transition:color .2s;}
.rep-selection::before{content:'';width:16px;height:1px;background:var(--bd);transition:width .2s,background .2s;}
.rep-card.has-selection .rep-selection{color:var(--text);}
.rep-card.has-selection .rep-selection::before{width:28px;background:var(--y);}
.rep-card.rb .pt-cristal{top:57%;left:34%;transform:translate(-50%,-50%);}
.rep-card.rb .pt-cristal:hover,.rep-card.rb .pt-cristal.on{transform:translate(-50%,-50%) scale(1.18);}
.rep-card.rb .pt-varilla{top:49%;left:82%;right:auto;}
.rep-card.rb .pt-comp{top:58%;left:56%;transform:translate(-50%,-50%);}
.rep-card.rb .pt-comp:hover,.rep-card.rb .pt-comp.on{transform:translate(-50%,-50%) scale(1.18);}
.rep-card.rb .pt-otros{top:45%;left:70%;transform:translateX(-50%);}
.rep-card.rb .pt-otros:hover,.rep-card.rb .pt-otros.on{transform:translateX(-50%) scale(1.18);}
.rep-card.rb .pt-acc{bottom:17%;right:14%;}
.rep-card.ok .pt-cristal{top:57%;left:27%;transform:translate(-50%,-50%);}
.rep-card.ok .pt-cristal:hover,.rep-card.ok .pt-cristal.on{transform:translate(-50%,-50%) scale(1.18);}
.rep-card.ok .pt-varilla{top:48%;left:82%;right:auto;}
.rep-card.ok .pt-comp{top:59%;left:57%;transform:translate(-50%,-50%);}
.rep-card.ok .pt-comp:hover,.rep-card.ok .pt-comp.on{transform:translate(-50%,-50%) scale(1.18);}
.rep-card.ok .pt-otros{top:45%;left:70%;transform:translateX(-50%);}
.rep-card.ok .pt-otros:hover,.rep-card.ok .pt-otros.on{transform:translateX(-50%) scale(1.18);}
.rep-card.ok .pt-acc{bottom:16%;right:14%;}
.pt-acc{background:#fff;border:1.5px dashed var(--y);color:var(--text);box-shadow:0 2px 10px rgba(13,13,13,.12);}
.rep-cat.hl{color:var(--text);padding-left:10px;padding-right:8px;background:var(--yd);box-shadow:inset 3px 0 0 var(--y);}
.rep-cat.hl .rep-cat-n{color:var(--y);}
.rep-cat.hl .rep-cat-ar{opacity:1;transform:translateX(3px);}
.rep-cats{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--bd);}
.rep-cat{display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--bd);
  text-decoration:none;color:var(--text);
  transition:color .15s,padding-left .2s,padding-right .2s,background .2s,box-shadow .2s;}
.rep-cat:last-child{border-bottom:none;}
.rep-cat:hover{color:var(--y);padding-left:6px;}
.rep-cat-n{font-family:var(--fh);font-size:11px;font-weight:700;color:var(--g3);width:28px;letter-spacing:.06em;flex-shrink:0;}
.rep-cat:hover .rep-cat-n{color:var(--y);}
.rep-cat-l{font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-.005em;text-transform:uppercase;flex:1;line-height:1.05;}
.rep-cat-meta{font-size:11px;color:var(--g3);font-family:var(--fb);font-weight:500;letter-spacing:.02em;text-transform:none;margin-right:14px;}
.rep-cat-ar{opacity:.35;transition:opacity .15s,transform .15s;}
.rep-explorer{max-width:1180px;margin:0 auto;}
.rep-brand-tabs{display:grid;grid-template-columns:1fr 1fr;max-width:620px;margin:0 auto 24px;padding:5px;background:var(--g1);border:1px solid var(--bd);border-radius:999px;position:relative;}
.rep-brand-tabs::before{content:'';position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--k);transform:translateX(var(--brand-index,0%));transition:transform .38s cubic-bezier(.2,.8,.2,1);}
.rep-brand-tab{position:relative;z-index:1;padding:12px 20px;border-radius:999px;font-size:13px;font-weight:750;color:var(--muted);transition:color .25s;}
.rep-brand-tab[aria-selected="true"]{color:#fff;}
.rep-brand-tab:focus-visible{outline:2px solid var(--y);outline-offset:3px;}
.rep-viewport{overflow:hidden;border-radius:10px;}
.rep-explorer .rep-grid{display:flex;gap:0;width:200%;transform:translateX(var(--brand-slide,0%));transition:transform .5s cubic-bezier(.2,.8,.2,1);align-items:stretch;}
.rep-explorer .rep-card{flex:0 0 50%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.85fr);grid-template-areas:"visual head" "visual brand" "visual tagline" "visual selection" "visual cats";grid-template-rows:auto auto auto auto 1fr;column-gap:38px;padding:36px;border-radius:10px;min-width:0;}
.rep-explorer .rep-card-head{grid-area:head;margin:0;align-items:center;}
.rep-explorer .rep-go{width:auto;height:auto;border-radius:5px;padding:9px 12px;gap:7px;font-size:11.5px;font-weight:750;white-space:nowrap;}
.rep-explorer .rep-card:hover .rep-go{transform:none;}
.rep-explorer .rep-brand{grid-area:brand;font-size:clamp(54px,6vw,82px);margin-top:18px;}
.rep-explorer .rep-tagline{grid-area:tagline;max-width:460px;margin:8px 0 12px;}
.rep-explorer .rep-visual{grid-area:visual;aspect-ratio:auto;min-height:520px;height:100%;margin:0;}
.rep-explorer .rep-visual img{max-width:82%;max-height:76%;}
.rep-explorer .rep-card:not(.detail-view) .rep-visual img{max-width:96%;max-height:96%;transform:scale(1.04);}
.rep-explorer .rep-selection{grid-area:selection;margin:8px 0 12px;}
.rep-explorer .rep-cats{grid-area:cats;align-self:stretch;}
.rep-explorer .rep-cat{padding:15px 0;}
.rep-explorer .rep-cat.hl{padding-left:14px;padding-right:8px;}
.rep-explorer .pt{width:36px;height:36px;font-size:15px;}
.rep-explorer .pt-tip{display:none;}
.rep-reset,.rep-detail-label{position:absolute;top:18px;z-index:12;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;}
.rep-reset{left:18px;display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:5px;background:rgba(13,13,13,.88);color:#fff;font-size:11.5px;font-weight:700;backdrop-filter:blur(5px);}
.rep-reset:hover{background:var(--k);}
.rep-detail-label{right:18px;padding:8px 11px;border:1px solid var(--yb);border-radius:999px;background:rgba(255,255,255,.9);color:var(--text);font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:.06em;backdrop-filter:blur(5px);}
.rep-card.detail-view .rep-reset,.rep-card.detail-view .rep-detail-label{opacity:1;visibility:visible;}
.rep-card.detail-view .rep-visual img{max-width:100%;max-height:88%;transform:scale(1.08);}
.rep-card.detail-view .pt{display:none;}
.rep-model{color:var(--text);}
.rep-model strong{color:var(--y-text);}
.rep-other-model{margin:22px auto 0;text-align:center;font-size:13px;line-height:1.6;color:var(--muted);}
.rep-other-model strong{color:var(--text);}
.rep-logo-clarity{max-width:760px;margin:20px auto 0;padding:11px 16px;border:1px solid var(--bd);border-radius:999px;background:#fff;text-align:center;font-size:11.5px;line-height:1.5;color:var(--muted);}
.rep-logo-clarity strong{color:var(--text);}
@media(max-width:900px){
.rep-explorer .rep-card{grid-template-columns:1fr;grid-template-areas:"head" "brand" "tagline" "visual" "selection" "cats";padding:28px;}
.rep-explorer .rep-visual{min-height:380px;margin-top:12px;}
}
@media(max-width:680px){
.rep-brand-tabs{margin-bottom:16px;}
.rep-brand-tab{padding:10px 8px;font-size:11.5px;}
.rep-explorer .rep-card{padding:22px 18px;}
.rep-explorer .rep-brand{font-size:50px;margin-top:14px;}
.rep-explorer .rep-visual{min-height:260px;}
.rep-explorer .rep-visual img{max-width:88%;max-height:72%;}
.rep-explorer .rep-card:not(.detail-view) .rep-visual img{max-width:97%;max-height:94%;transform:scale(1.02);}
.rep-explorer .pt{width:32px;height:32px;font-size:13px;}
.rep-card.detail-view .rep-visual img{transform:scale(1.15);}
.rep-reset{top:12px;left:12px;padding:8px 10px;font-size:10.5px;}
.rep-detail-label{top:12px;right:12px;font-size:9px;}
.rep-explorer .rep-cat{padding:13px 0;gap:9px;}
.rep-explorer .rep-cat.hl{padding-left:12px;padding-right:7px;}
}
.rep-cat:hover .rep-cat-ar{opacity:1;transform:translateX(3px);}
.factory-sec{background:var(--k);color:#fff;padding:88px 0;position:relative;overflow:hidden;}
.factory-bg{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(232,160,32,.05) 1px,transparent 1px);background-size:24px 24px;opacity:.7;}
.factory-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.factory-text .eyebrow{color:var(--y);}
.factory-h{font-family:var(--fh);font-size:clamp(36px,4.5vw,60px);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.025em;color:#fff;margin-bottom:18px;}
.factory-h .ac{color:var(--y);}
.factory-p{font-size:15px;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:26px;max-width:540px;}
.factory-points{list-style:none;margin-bottom:30px;}
.factory-points li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13.5px;color:rgba(255,255,255,.7);}
.factory-points li:last-child{border-bottom:none;}
.factory-points li::before{content:'';display:block;width:14px;height:14px;border-radius:50%;background:var(--yd);border:1px solid var(--y);flex-shrink:0;margin-top:3px;position:relative;}
.factory-points li::after{content:'';position:absolute;width:5px;height:5px;background:var(--y);border-radius:50%;margin:7px 0 0 4.5px;}
.factory-ctas{display:flex;flex-direction:column;gap:14px;}
.fctaa{background:var(--k2);border:1px solid rgba(255,255,255,.10);border-radius:6px;
  padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px;
  text-decoration:none;color:#fff;transition:all .2s;}
.fctaa:hover{border-color:var(--y);background:rgba(232,160,32,.06);}
.fcta-l{flex:1;}
.fcta-tag{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--y);margin-bottom:6px;}
.fcta-name{font-family:var(--fh);font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1;margin-bottom:6px;}
.fcta-sub{font-size:12.5px;color:rgba(255,255,255,.5);}
.fcta-go{width:42px;height:42px;border-radius:50%;background:var(--y);color:var(--k);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s;}
.fctaa:hover .fcta-go{transform:rotate(-45deg);}
.prod-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:34px;}
.ptabs{--tab-index:0;position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);min-width:252px;background:var(--g1);padding:4px;border-radius:40px;isolation:isolate;}
.ptabs::before{content:'';position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:40px;background:var(--k);box-shadow:0 2px 8px rgba(13,13,13,.18);transform:translateX(calc(var(--tab-index)*100%));transition:transform .34s cubic-bezier(.22,.8,.3,1),width .2s ease;}
.ptab{position:relative;font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;padding:9px 16px;border-radius:40px;color:var(--g4);transition:color .22s ease;}
.ptab.on{background:transparent;color:#fff;}
.ptab:hover:not(.on){color:var(--text);}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.prod-card{background:var(--w);border:1px solid var(--bd);border-radius:6px;overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;}
.prod-card:hover{border-color:rgba(232,160,32,.5);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.06);}
.prod-img{width:100%;aspect-ratio:1.05;background:var(--off);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;}
.prod-img::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.05) 1px,transparent 1px);background-size:16px 16px;}
.prod-glass{position:relative;z-index:1;width:72%;max-width:200px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.10));}
.prod-photo{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.prod-badge{position:absolute;top:10px;left:10px;background:var(--y);color:var(--k);font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:.10em;padding:4px 9px;border-radius:2px;z-index:2;text-transform:uppercase;}
.prod-badge.k{background:var(--k);color:#fff;}
.prod-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;min-height:156px;}
.prod-meta-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.prod-brand{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g3);}
.prod-ref{font-size:10px;color:var(--g3);letter-spacing:.04em;font-family:var(--fb);}
.prod-name{font-size:13.5px;font-weight:500;color:var(--text);line-height:1.4;margin-bottom:14px;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.prod-foot{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--bd);}
.prod-price{font-family:var(--fh);font-size:22px;font-weight:900;letter-spacing:-.01em;line-height:1;color:var(--text);}
.prod-price .from{font-size:10px;color:var(--g3);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-right:5px;}
.prod-add{width:34px;height:34px;border-radius:50%;background:var(--k);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .15s,transform .25s;}
.prod-card:hover .prod-add{background:var(--y);color:var(--k);transform:rotate(90deg);}
.products-cta{display:flex;justify-content:center;margin-top:36px;}
.pasos-head{text-align:center;margin-bottom:54px;}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);border-radius:6px;overflow:hidden;}
.paso{background:var(--k2);overflow:hidden;transition:background .2s;display:flex;flex-direction:column;}
.paso:hover{background:var(--k3);}
.paso-media{width:100%;aspect-ratio:16/10;background:#1e1e1e;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.05);}
.paso-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;}
.paso-media .bg-n{position:absolute;right:-15px;bottom:-25px;font-family:var(--fh);font-size:140px;font-weight:900;color:rgba(255,255,255,.025);line-height:1;user-select:none;z-index:1;}
.paso-media .tag{position:absolute;top:14px;left:14px;background:var(--y);color:var(--k);font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:.10em;padding:5px 11px;border-radius:2px;z-index:2;text-transform:uppercase;}
.paso-body{padding:28px 28px 30px;flex:1;display:flex;flex-direction:column;}
.paso-num{font-family:var(--fh);font-size:54px;font-weight:900;color:rgba(255,255,255,.05);line-height:1;margin-bottom:4px;}
.paso-t{font-family:var(--fh);font-size:23px;font-weight:800;text-transform:uppercase;color:#fff;margin-bottom:10px;letter-spacing:-.01em;}
.paso-t .ac{color:var(--y);}
.paso-d{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.7;flex:1;}
.rev-top{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:center;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--bdk);}
.g-block{display:flex;align-items:center;gap:24px;}
.g-logo{width:64px;height:64px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.g-svg{width:34px;height:34px;}
.rev-big{font-family:var(--fh);font-size:64px;font-weight:900;color:#fff;line-height:.95;letter-spacing:-.02em;}
.rev-big .of{color:rgba(255,255,255,.35);font-size:.45em;font-weight:700;}
.rev-stars{color:var(--y);font-size:18px;letter-spacing:3px;margin-top:6px;}
.rev-meta{font-size:11.5px;color:rgba(255,255,255,.4);letter-spacing:.05em;margin-top:6px;}
.rev-meta strong{color:#fff;font-weight:600;}
.rev-stats{display:flex;gap:36px;flex-wrap:wrap;}
.rs .n{font-family:var(--fh);font-size:38px;font-weight:900;color:var(--y);display:block;line-height:1;letter-spacing:-.01em;}
.rs .l{font-size:11px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.10em;margin-top:5px;}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.rc{background:rgba(255,255,255,.03);border:1px solid var(--bdk);border-radius:6px;padding:22px;transition:border-color .2s,background .2s;display:flex;flex-direction:column;gap:12px;}
.rc:hover{border-color:rgba(232,160,32,.25);background:rgba(232,160,32,.03);}
.rc-top{display:flex;justify-content:space-between;align-items:flex-start;}
.rc-stars{color:var(--y);font-size:13px;letter-spacing:2px;}
.rc-g{width:18px;height:18px;}
.rc-text{font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.7;flex:1;}
.rc-auth{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--bdk);}
.rc-av{width:30px;height:30px;border-radius:50%;background:rgba(232,160,32,.1);border:1px solid rgba(232,160,32,.25);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:11px;font-weight:800;color:var(--y);flex-shrink:0;}
.rc-name{font-size:12.5px;font-weight:600;color:#fff;}
.rc-loc{font-size:11px;color:rgba(255,255,255,.30);}
.rev-cta{display:flex;justify-content:center;margin-top:36px;}
.ovc-head{text-align:center;margin-bottom:48px;}
.ovc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.ovc-card{border-radius:6px;overflow:hidden;border:1px solid var(--bd);background:var(--w);position:relative;display:flex;flex-direction:column;}
.ovc-card.feat{border-color:var(--y);border-width:2px;}
.ovc-card.feat::before{content:'+ vendido';position:absolute;top:14px;right:14px;
  background:var(--y);color:var(--k);font-family:var(--fh);font-size:10px;font-weight:800;
  letter-spacing:.10em;text-transform:uppercase;padding:4px 10px;border-radius:2px;}
.ovc-h{padding:26px 28px 22px;border-bottom:1px solid var(--bd);}
.ovc-card.feat .ovc-h{background:var(--yd);border-bottom-color:rgba(232,160,32,.20);}
.ovc-badge{display:inline-block;font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;padding:4px 10px;border-radius:2px;margin-bottom:10px;}
.badge-orig{background:var(--k);color:var(--y);}
.badge-comp{background:var(--yd);color:#9c6c10;border:1px solid var(--yb);}
.ovc-title{font-family:var(--fh);font-size:30px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1;margin-bottom:10px;}
.ovc-price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.ovc-price{font-family:var(--fh);font-size:30px;font-weight:900;color:var(--text);line-height:1;letter-spacing:-.01em;}
.ovc-from{font-size:11.5px;color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase;}
.ovc-save{background:var(--k);color:var(--y);font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;padding:4px 9px;border-radius:2px;}
.ovc-body{padding:22px 28px 26px;display:flex;flex-direction:column;flex:1;}
.ovc-rows{list-style:none;flex:1;}
.ovc-rows li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--bd);}
.ovc-rows li:last-child{border-bottom:none;}
.ovc-rows li .ic{flex-shrink:0;color:var(--y);margin-top:2px;}
.ovc-rows li strong{display:block;font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:2px;}
.ovc-rows li span.d{font-size:12.5px;color:var(--muted);line-height:1.55;display:block;}
.ovc-foot{display:flex;justify-content:flex-start;padding-top:18px;border-top:1px solid var(--bd);margin-top:16px;}
.spread{padding:76px 0;background:var(--w);}
.spread.sec-dark{background:var(--k);}
.spread-inner{max-width:1280px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:72px;}
.spread .text{padding:0;display:flex;flex-direction:column;justify-content:center;}
.spread.flip .text{order:2;}
.spread .visual{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;aspect-ratio:4/3;align-self:center;border-radius:10px;}
.spread .visual.light{background:var(--g1);}
.spread .visual.dark{background:var(--k3);}
.spread .visual::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.05) 1px,transparent 1px);background-size:22px 22px;}
.spread .visual.dark::before{background-image:radial-gradient(circle,rgba(232,160,32,.05) 1px,transparent 1px);}
.spread .visual .big-mark{position:absolute;font-family:var(--fh);font-weight:900;font-size:clamp(220px,30vw,420px);line-height:.85;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(0,0,0,.08);user-select:none;pointer-events:none;}
.spread .visual.dark .big-mark{-webkit-text-stroke-color:rgba(255,255,255,.06);}
.spread .visual img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:none;}
.spread .visual.dark img{filter:none;}
.sp-title{font-family:var(--fh);font-size:clamp(40px,4.8vw,68px);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.02em;margin:14px 0 18px;}
.sp-title .ac{color:var(--y-text);}
.sp-title.inv{color:#fff;}
.sp-title.inv .ac{color:var(--y);}
.sp-p{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:22px;max-width:480px;}
.sp-p.inv{color:rgba(255,255,255,.55);}
.vsteps{margin-bottom:28px;max-width:480px;display:flex;flex-direction:column;gap:10px;}
.vs{display:flex;gap:14px;align-items:flex-start;background:var(--g1);border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px;transition:border-color .15s;}
.vs.inv{background:rgba(255,255,255,.04);border-color:var(--bdk);}
.vs:hover{border-color:var(--yb);}
.vs-n{width:28px;height:28px;border-radius:50%;background:var(--y);color:var(--k);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:12px;font-weight:900;}
.vs-t{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px;display:block;}
.vs.inv .vs-t{color:#fff;}
.vs-d{font-size:12.5px;color:var(--g3);line-height:1.5;}
.vs.inv .vs-d{color:rgba(255,255,255,.5);}
.sp-btns{display:flex;gap:12px;flex-wrap:wrap;}
.engrave-info{display:inline-flex;align-items:center;gap:10px;
  background:rgba(232,160,32,.08);border:1px solid rgba(232,160,32,.30);
  padding:8px 14px;border-radius:40px;font-size:12px;color:var(--y);
  font-weight:500;margin-bottom:8px;letter-spacing:.02em;}
.engrave-info .dot{width:6px;height:6px;border-radius:50%;background:var(--y);animation:pulse 1.6s ease-in-out 2;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.6);}}
.blog-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:38px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.blog-card{background:var(--w);border:1px solid var(--bd);border-radius:6px;overflow:hidden;transition:border-color .2s,transform .2s;text-decoration:none;color:inherit;display:flex;flex-direction:column;}
.blog-card:hover{border-color:rgba(232,160,32,.5);transform:translateY(-3px);}
.blog-img{width:100%;aspect-ratio:3/2;background:var(--g1);position:relative;overflow:hidden;}
.blog-img::before{content:'';position:absolute;inset:0;background-image:linear-gradient(45deg,#fff 25%,transparent 25%),linear-gradient(-45deg,#fff 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#fff 75%),linear-gradient(-45deg,transparent 75%,#fff 75%);background-size:8px 8px;opacity:.5;}
.blog-img .ph-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--fh);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--g3);padding:8px 14px;background:rgba(255,255,255,.85);border:1px solid var(--bd);border-radius:2px;}
.blog-img.has-photo::before,.blog-img.has-photo::after{display:none;}
.blog-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.blog-tag{position:absolute;top:12px;left:12px;background:var(--k);color:var(--y);font-family:var(--fh);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:2px;z-index:1;}
.blog-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.blog-cat{font-family:var(--fh);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--y);margin-bottom:8px;}
.blog-t{font-family:var(--fh);font-size:20px;font-weight:800;text-transform:uppercase;line-height:1.15;letter-spacing:-.005em;color:var(--text);margin-bottom:10px;}
.blog-x{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:14px;flex:1;}
.blog-more{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--y);display:inline-flex;align-items:center;gap:6px;transition:gap .15s;align-self:flex-start;}
.blog-card:hover .blog-more{gap:9px;}
.blog-more::after{content:'→';}
@media(max-width:1100px){
.hero-body{padding:0 20px 56px 40px;}
.trust-in{grid-template-columns:repeat(2,1fr);}
.tb-item:nth-child(2){border-right:none;}
.brands-row{grid-template-columns:repeat(3,1fr);}
.brand-item:nth-child(3n){border-right:none;}
.spread-inner{grid-template-columns:minmax(0,1fr);gap:38px;padding:0 20px;}
.spread .text,.spread.flip .text{padding:0;order:1;}
.spread .visual{min-height:0;order:2;}
.products-grid,.blog-grid,.pasos{grid-template-columns:repeat(2,1fr);}
.rev-grid{grid-template-columns:1fr;}
.rev-top{grid-template-columns:1fr;gap:24px;text-align:left;}
.rev-stats{justify-content:flex-start;}
.sec{padding:72px 0;}
.factory-sec{padding:64px 0;}
/* 01-10 Rafa «se salen de la pantalla»: estas dos rejillas se declaran más arriba en este fichero con 2 columnas y
   pisaban la columna única de diseno-comun.css (se carga antes). */
.factory-in{grid-template-columns:minmax(0,1fr);gap:40px;}
}
@media(max-width:400px){
.trust-in{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 14px;}
.tb-item{padding:16px 10px;min-width:0;}
}
@media(max-width:680px){
.ovc-grid{grid-template-columns:minmax(0,1fr);}
.products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.blog-grid,.pasos{grid-template-columns:1fr;}
.prod-head{align-items:flex-start;gap:18px;margin-bottom:24px;}
.ptabs{width:100%;min-width:0;}
.ptab{min-height:44px;padding:9px 7px;font-size:11px;}
.prod-img{aspect-ratio:1/1;}
.prod-badge{top:7px;left:7px;padding:3px 6px;font-size:8px;}
.prod-body{padding:11px 10px 12px;min-height:148px;}
.prod-meta-row{align-items:flex-start;flex-direction:column;gap:2px;margin-bottom:6px;}
.prod-brand,.prod-ref{font-size:8.5px;line-height:1.25;}
.prod-name{font-size:11.5px;line-height:1.35;margin-bottom:10px;-webkit-line-clamp:3;}
.prod-foot{padding-top:9px;}
.prod-price{font-size:17px;}
.prod-price .from{display:block;margin:0 0 2px;font-size:7.5px;}
.prod-add{width:30px;height:30px;}
.products-cta{margin-top:24px;}
.brands-row{grid-template-columns:repeat(2,1fr);}
.brand-item:nth-child(2n){border-right:none;}
.hero h1{font-size:clamp(40px,12vw,80px);}
.rep-card{padding:26px 22px;}
.pt-tip{display:none;}
}
.hero::before,.hero-ghost{display:none;}
@media(min-width:1101px){
.hero{height:680px;min-height:680px;padding-top:122px;}
.hero-body{padding-bottom:28px;}
.hero h1{line-height:.94;margin-bottom:26px;}
.hero-sub{margin-bottom:27px;}
.hero-search{margin-bottom:20px;}
.hero-pills{margin-top:8px;}
}
.paso-body{padding-top:24px;}
.engrave-info{width:max-content;max-width:100%;align-self:flex-start;padding:7px 14px;margin-bottom:20px;}
.blog-img{min-height:180px;}
.blog-img::after{content:'';position:absolute;inset:24% 32%;border:1px solid rgba(26,26,26,.08);border-radius:50%;box-shadow:0 0 0 18px rgba(245,194,0,.04),0 0 0 38px rgba(26,26,26,.025);}
@media(prefers-reduced-motion:reduce){
.pt::before{animation:none;}
.rep-visual img,.pt,.rep-cat{transition:none!important;}
.ptabs::before{transition:none;}
}
.steps-motion{position:relative;overflow:hidden;aspect-ratio:1280/520;margin:-18px 0 26px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#111;box-shadow:0 22px 50px rgba(0,0,0,.2)}
.motion-video{display:block;width:100%;height:100%;object-fit:cover;background:#111}
.steps-motion::after{content:'Secuencia visual · 9 segundos';position:absolute;right:12px;bottom:10px;padding:5px 8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(10,10,10,.68);color:rgba(255,255,255,.68);font-size:8px;font-weight:700;letter-spacing:.04em;pointer-events:none;backdrop-filter:blur(5px)}
.spread .visual.motion-visual{background:#111}
.spread .visual.motion-visual::before,.spread .visual.motion-visual .big-mark{display:none}
.spread .visual.motion-visual .motion-video{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover}
.motion-video-status{position:absolute;z-index:3;left:12px;bottom:11px;padding:6px 9px;border-radius:999px;background:rgba(12,12,11,.74);color:#fff;font-size:8px;font-weight:800;letter-spacing:.04em;pointer-events:none;backdrop-filter:blur(5px)}
@media(max-width:760px){
.steps-motion{margin-top:-8px;aspect-ratio:16/9}
.steps-motion .motion-video{object-fit:contain}
.steps-motion::after{display:none}
.motion-video-status{font-size:7px}
}
.hero-bg::after{background:radial-gradient(ellipse 36% 44% at 72% 34%,rgba(255,255,255,.13),transparent 72%),linear-gradient(90deg,rgba(234,195,6,.08) 0%,transparent 56%,rgba(255,216,30,.08) 100%),linear-gradient(0deg,rgba(0,0,0,.20),transparent 38%)}
.hero .hero-layout h1{color:#101010;text-shadow:none;}
.hero .hero-layout h1 .gold{color:#fff;}
.hero-sub{color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(0,0,0,.22);}
.hero-sub strong{color:#fff;}
.exploded-kicker{color:#101010;}
.exploded-instruction{color:rgba(13,13,13,.72);}
.hero h1{font-size:clamp(54px,7.4vw,100px);max-width:900px}
.hero-search{background:#fff;border:0;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.hero-search input{color:var(--text)}
.hero-search input::placeholder{color:#888}
.hero-pills{gap:10px}
.pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.75)}
.brands-sec{padding:34px 0}
.brands-head{margin-bottom:20px}
.brand-item{padding:22px 16px}
.rep-card{border-radius:10px;box-shadow:0 8px 30px rgba(13,13,13,.035)}
.rep-visual{border-radius:7px}
.rep-cat.hl{background:rgba(245,194,0,.09);box-shadow:inset 3px 0 0 var(--y)}
.lens-priority{display:inline-flex;align-items:center;gap:7px;margin-left:9px;padding:3px 8px;border-radius:30px;background:var(--y);color:var(--k);font-family:var(--fb);font-size:8px;font-weight:800;letter-spacing:.08em;vertical-align:middle}
.lens-priority.logo-yes{background:var(--k);color:#fff;}
.lens-priority.logo-no{background:var(--y);color:var(--k);}
.help-strip{margin-top:24px;padding:18px 20px;border:1px solid var(--bd);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}
.help-strip-copy{display:flex;align-items:center;gap:13px}
.help-strip-icon{width:38px;height:38px;border-radius:50%;background:var(--yd);color:var(--text);display:grid;place-items:center;font-weight:800;flex:0 0 auto}
.help-strip strong{display:block;font-family:var(--fh);font-size:17px;text-transform:uppercase}
.help-strip span{font-size:11.5px;color:var(--muted)}
.help-strip a{white-space:nowrap;font-family:var(--fh);font-size:12px;font-weight:800;text-transform:uppercase;border-bottom:2px solid var(--y);padding-bottom:3px}
.factory-sec{padding:76px 0}
.sec{padding:82px 0}
.prod-card{border-radius:8px;overflow:hidden}
.prod-badge{border-radius:4px}
.step-card,.rev-card,.blog-card{border-radius:10px}
@media(max-width:680px){
.help-strip{align-items:flex-start;flex-direction:column}
.help-strip a{margin-left:51px}
.hero-body{padding-left:20px}
.hero h1{letter-spacing:-1px}
.hero-search button{padding:0 16px}
.hero-search button svg{display:none}
.sec{padding:58px 0}
}
.eyebrow{font-family:var(--fb);font-size:10.5px;font-weight:700;letter-spacing:.16em;}
.sec-title{letter-spacing:-.025em;line-height:.98;}
.sec-sub{font-size:15px;line-height:1.7;}
.btn{font-family:var(--fb);font-size:12.5px;font-weight:700;letter-spacing:.01em;text-transform:none;padding:13px 23px;}
.hero-search button{font-family:var(--fb);font-size:12px;letter-spacing:.01em;text-transform:none;}
.pill{font-size:11.5px;}
.tb-tx{font-family:var(--fb);font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;}
.tb-tx small{font-size:11px;font-weight:400;}
.brand-name{letter-spacing:-.02em;}
.rep-tag{font-family:var(--fb);font-size:9px;font-weight:700;letter-spacing:.14em;}
.rep-tagline{font-size:13px;line-height:1.65;max-width:440px;}
.rep-cat{gap:12px;padding:13px 0;}
.rep-cat-l{font-family:var(--fb);font-size:14px;font-weight:650;letter-spacing:-.01em;text-transform:none;line-height:1.25;}
.rep-cat-n{font-family:var(--fb);font-size:10px;letter-spacing:.02em;}
.rep-cat-meta{font-size:11.5px;font-weight:400;}
.lens-priority{font-size:8px;letter-spacing:.05em;padding:3px 7px;}
.ptab{font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;}
.prod-brand,.prod-ref{font-family:var(--fb);letter-spacing:.02em;}
.prod-name{font-size:14px;font-weight:600;line-height:1.45;}
.prod-price{font-size:20px;}
.prod-price .from{font-family:var(--fb);font-size:9px;letter-spacing:.03em;}
.step-title{font-size:23px;text-transform:none;letter-spacing:-.01em;}
.step-desc{font-size:13px;line-height:1.65;}
.rev-quote{font-size:13.5px;line-height:1.7;}
.blog-cat{font-family:var(--fb);font-size:10px;letter-spacing:.10em;}
.blog-t{font-family:var(--fb);font-size:17px;font-weight:700;text-transform:none;line-height:1.35;letter-spacing:-.015em;}
.blog-x{font-size:13px;line-height:1.65;}
.blog-more{font-family:var(--fb);font-size:12px;letter-spacing:0;text-transform:none;}
.prod-card[hidden]{display:none;}
.sec{padding:72px 0;}
.factory-sec{padding:66px 0;}
.brands-sec{padding:28px 0 0;}
.brands-sec .brands-head{margin-bottom:14px;}
.brands-title{font-family:var(--fb);font-size:clamp(21px,2vw,27px);font-weight:650;line-height:1.2;letter-spacing:-.015em;color:var(--text);}
.brands-sub{margin:6px auto 0;font-size:12.5px;color:var(--muted);line-height:1.5;}
.compat-callout{margin-top:22px;padding:24px 26px;border:1px solid var(--yb);border-radius:9px;background:linear-gradient(105deg,#fffaf0 0%,#fff 72%);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;}
.compat-callout .copy{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;}
.compat-callout .mark{width:42px;height:42px;border-radius:50%;background:var(--y);display:grid;place-items:center;font-family:var(--fh);font-size:20px;font-weight:900;color:var(--k);}
.compat-callout h3{font-family:var(--fh);font-size:clamp(21px,2.2vw,30px);line-height:1;text-transform:uppercase;color:var(--text);}
.compat-callout p{margin-top:6px;max-width:720px;font-size:13px;line-height:1.55;color:var(--muted);}
.compat-callout .btn{white-space:nowrap;}
@media(max-width:680px){
.compat-callout{grid-template-columns:1fr;padding:21px 19px}
.compat-callout .copy{grid-template-columns:1fr}
.compat-callout .mark{width:36px;height:36px}
.compat-callout .btn{justify-content:center}
}
.rep-assistance-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
.rep-assistance-grid .help-strip,.rep-assistance-grid .compat-callout{margin-top:0;min-height:164px;}
.rep-assistance-grid .help-strip{padding:24px 26px;align-items:flex-start;flex-direction:column;justify-content:space-between;}
.rep-assistance-grid .compat-callout{grid-template-columns:1fr;padding:24px 26px;gap:18px;}
.rep-assistance-grid .compat-callout h3{font-size:clamp(20px,1.75vw,25px);}
.rep-assistance-grid .compat-callout .btn{justify-self:start;}
.compare-dark{background:var(--k);color:#fff;position:relative;overflow:hidden;}
.compare-dark::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(232,160,32,.055) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;}
.compare-dark .wrap{position:relative;z-index:1;}
.compare-dark .sec-title{color:#fff;}
.compare-dark .sec-sub{color:rgba(255,255,255,.6);}
.compare-dark .eyebrow{color:var(--y);}
.compare-dark .ovc-card{background:#fff;color:var(--text);box-shadow:0 16px 42px rgba(0,0,0,.2);}
.secondary-brands{padding:38px 0 0;border-top:1px solid var(--bd);background:#fff;}
@media(max-width:760px){
.rep-assistance-grid{grid-template-columns:1fr;}
.rep-assistance-grid .help-strip,.rep-assistance-grid .compat-callout{min-height:0;}
.rep-assistance-grid .compat-callout .btn{justify-self:stretch;}
}
#repuesto{padding-top:58px;}
.help-strip-copy{gap:0;}
.spread .text{padding-top:0;padding-bottom:0;}
@media(max-width:680px){
.hero{padding-top:64px;min-height:0;}
.hero-body{padding:28px 20px 34px;}
.hero h1{font-size:clamp(37px,11vw,47px);line-height:.91;}
.hero-sub{font-size:13px;line-height:1.58;color:rgba(15,15,15,.82);text-shadow:none;}
.hero-sub strong{color:#111;}
.hero-pills{gap:6px;}
.pill{font-size:9px;padding:5px 9px;background:rgba(10,10,10,.06);border-color:rgba(10,10,10,.18);color:rgba(10,10,10,.78);}
.sec{padding:52px 0;}
.sec-title{font-size:clamp(31px,10vw,42px);line-height:.98;}
.factory-h,.sp-title{font-size:clamp(35px,10.5vw,48px);line-height:.94;max-width:12ch;}
.sec-sub{font-size:14px;}
.rep-card{padding:24px 20px;}
.rep-cat-l{font-size:13.5px;}
.rep-cat-meta{font-size:10.5px;margin-right:6px;}
.lens-priority{font-size:7px;letter-spacing:.03em;padding:2px 5px;margin-left:5px;}
.rep-logo-clarity{border-radius:8px;padding:10px 12px;font-size:10.5px;}
.spread .text,.spread.flip .text{padding:48px 22px;}
.help-strip a{margin-left:0;}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.hero h1{animation:fadeUp .55s .06s both;}
.hero-sub{animation:fadeUp .5s .16s both;}
.hero-search{animation:fadeUp .5s .24s both;}
.hero-pills{animation:fadeUp .5s .31s both;}
@media(prefers-reduced-motion:reduce){
.exploded-layer{transition:opacity .01ms!important;}
}

/* Tres pasos en HTML para los idiomas sin vídeo (01-10-2026): misma secuencia que el vídeo de ES, 9 s, 3 s por paso. */
.pasos-anim{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:-18px 0 26px;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#111;box-shadow:0 22px 50px rgba(0,0,0,.2)}
.pa-card{position:relative;overflow:hidden;aspect-ratio:4/5;border:3px solid transparent;border-radius:10px;background:#1a1a1a;animation:pa-activa 9s infinite;animation-delay:calc(var(--pa-i) * 3s)}
.pa-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.55);transition:filter .5s;animation:pa-foto 9s infinite;animation-delay:inherit}
.pa-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.78) 100%)}
.pa-tag{position:absolute;z-index:2;top:18px;left:18px;padding:7px 11px;background:rgba(255,255,255,.55);color:#111;font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;animation:pa-tag 9s infinite;animation-delay:inherit}
.pa-txt{position:absolute;z-index:2;left:20px;right:20px;bottom:22px;opacity:.55;animation:pa-txt 9s infinite;animation-delay:inherit}
.pa-t{margin:0 0 6px;color:#fff;font-family:var(--fh);font-size:clamp(20px,2.4vw,34px);font-weight:800;line-height:1;text-transform:uppercase;text-wrap:balance}
.pa-d{margin:0;color:rgba(255,255,255,.85);font-size:14px;line-height:1.35}
.pa-barra{position:absolute;z-index:3;left:0;bottom:0;height:5px;width:0;background:var(--y,#f5c400);animation:pa-barra 9s infinite linear;animation-delay:inherit}
@keyframes pa-activa{0%,33%{border-color:var(--y,#f5c400)}34%,100%{border-color:transparent}}
@keyframes pa-foto{0%,33%{filter:none}34%,100%{filter:grayscale(.35) brightness(.55)}}
@keyframes pa-tag{0%,33%{background:var(--y,#f5c400)}34%,100%{background:rgba(255,255,255,.55)}}
@keyframes pa-txt{0%,33%{opacity:1}34%,100%{opacity:.55}}
@keyframes pa-barra{0%{width:0}33%{width:100%}33.01%,100%{width:0}}
@media (max-width:720px){.pasos-anim{grid-template-columns:1fr;padding:12px;gap:10px;margin-top:-8px}.pa-card{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.pa-card,.pa-card img,.pa-tag,.pa-txt,.pa-barra{animation:none}.pa-card img{filter:none}.pa-txt{opacity:1}}

/* cr-ajustes-portada */
/* ==========================================================================
   AJUSTES DE LA PORTADA
   Lo que NO viene del prototipo de Nicolas: lo que hubo que anadir para
   pasar de maqueta a tienda. El CSS del diseno esta intacto en
   diseno-portada.css; si algo de aqui choca con el, manda el diseno.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Rotulos del despiece
   --------------------------------------------------------------------------
   Antes eran un SVG de 109 KB con las letras en trazos (09-etiquetas-
   explosionadas.svg). Ahora son texto: se traducen, los lee Google y pesan
   16 KB de tipografia. Posiciones medidas sobre aquel SVG (lienzo 1600x900):
   izquierda/derecha y arriba en %, para que escalen con la escena.
   La tipografia es la del SVG original: Poppins seminegrita + cursiva fina.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/Poppins-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}
@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('/wp-content/themes/cristalesrepuesto/assets/css/../fonts/Poppins-300i-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

.cr-rotulos {
	container-type: size;          /* para medir la letra en % de la escena */
	font-family: 'Poppins', var(--fb);
	color: #0d0d0d;
}

.cr-rotulo {
	position: absolute;
	display: flex;
	flex-direction: column;
	line-height: 1.05;          /* medido en el SVG: de base a base, 1,03-1,07 em */
	white-space: nowrap;
}
.cr-rotulo b { font-weight: 600; font-style: normal; }
.cr-rotulo i { font-weight: 300; font-style: italic; }

/* Tallas medidas en el SVG original sobre el lienzo de 1600 px: los pequenos
   36,6 px y los grandes 47 px (ajustando Poppins SemiBold al ancho real de
   cada primera linea). En cqw, para que escalen con la escena. */
.cr-rotulo--peq { font-size: 2.288cqw; }
.cr-rotulo--gra { font-size: 2.938cqw; }

/* Los alineados a la derecha crecen hacia la izquierda: si una traduccion es
   mas larga (Scharnierschraube...), no se sale de la escena. */
.cr-rotulo--der { align-items: flex-end; text-align: right; }
.cr-rotulo--izq { align-items: flex-start; text-align: left; }

/* Posicion de cada rotulo: calculada desde la LINEA BASE de su primera linea
   en el SVG, con las metricas de Poppins (ascendente 1,05 · descendente 0,35),
   y desde el borde de la tinta corregido por el margen de cada letra. */
.cr-rotulo--front-rivets       { right: 77.50%; top: 12.33%; }
.cr-rotulo--hinge-screw        { right: 21.44%; top: 15.77%; }
.cr-rotulo--compatible-temples { left: 32.00%;  top: 19.11%; }
.cr-rotulo--original-logo      { right:  3.94%; top: 22.66%; }
.cr-rotulo--original-temples   { left: 73.88%;  top: 49.10%; }
.cr-rotulo--original-lenses    { left: 20.69%;  top: 80.10%; }
.cr-rotulo--compatible-lenses  { left: 73.69%;  top: 80.10%; }

/* --------------------------------------------------------------------------
   3 · Animaciones de entrada
   --------------------------------------------------------------------------
   El prototipo las hacia con GSAP (dos librerias, ~40 KB, desde un CDN).
   Aqui: mismo efecto, mismos tiempos y curvas, con CSS. El JS solo marca
   los elementos (data-cr-entra) y los activa al entrar en pantalla.

   Si el JS no llega, no se marca nada y todo se ve: el contenido nunca
   depende de la animacion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.cr-js [data-cr-entra] {
		opacity: 0;
		transform: translate3d(var(--cr-x, 0px), var(--cr-y, 18px), 0) scale(var(--cr-s, 1));
		transition:
			opacity var(--cr-dur, .58s) cubic-bezier(.25, .46, .45, .94),
			transform var(--cr-dur, .58s) var(--cr-curva, cubic-bezier(.25, .46, .45, .94));
		transition-delay: calc(var(--cr-retraso, 0s) + var(--i, 0) * var(--cr-escalon, .08s));
	}
	.cr-js [data-cr-entra].cr-dentro {
		opacity: var(--cr-final, 1);
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   4 · Videos
   En los idiomas sin video traducido, la seccion de graduadas se queda sin
   su panel de video: que la columna de texto ocupe su sitio.
   -------------------------------------------------------------------------- */
.spread:not(:has(.visual)) { grid-template-columns: 1fr; }