/* wapf-frontend */
:root{--apf-tooltip-bg:#121212;--apf-tooltip-color:#fff;--apf-margin-bottom:15px;--apf-input-border-color:#ddd;--apf-input-border-color-foc:#121212;--apf-input-height:38px;--apf-input-bg:#ffffff;--apf-radius:4px;--apf-label-size:1rem;--apf-label-weight:500;--apf-ts-radius:4px;--apf-ts-color-sel:#fff;--apf-ts-bg:transparent;--apf-ts-bg-hov:transparent;--apf-ts-bg-sel:#121212;--apf-ts-border-color-hov:#a4a4a4;--apf-ts-border-color-sel:#121212;--apf-ns-width:100%;--apf-ns-color:inherit;--apf-ns-bg:transparent;--apf-is-radius:50%;--apf-is-border-color-sel:#121212;--apf-is-border-color-hov:#a4a4a4;--apf-is-bg:transparent;--apf-is-bg-hov:transparent;--apf-is-bg-sel:transparent;--apf-progress-bg:#ddd;--apf-progress-color:#121212;--apf-file-border:2px dashed #121212;--apf-file-color:currentColor;--apf-cs-border-color-hov:#a4a4a4;--apf-cs-border-color-sel:#121212;--apf-date-color:currentColor;--apf-date-color-hov:currentColor;--apf-date-color-sel:#ffffff;--apf-date-bg:#fff;--apf-date-bg-hov:#dddddd;--apf-date-bg-sel:#212121;--apf-input-border:2px solid #ddd;--apf-ts-border:2px solid #ccc;--apf-is-border:1px solid #dddddd;--apf-cs-border:2px solid #dddddd;--apf-card-border:none;--apf-date-border-color:#dddddd;--apf-date-color-muted:rgba(33,33,33,0.45);--apf-cb-radius:4px;--apf-cb-bg-sel:#121212;--apf-cb-border-color-hov:#a4a4a4;--apf-cb-border-color-sel:#121212;--apf-cb-border:2px solid #ddd;--apf-radio-bg-sel:#121212;--apf-radio-border-color-hov:#a4a4a4;--apf-radio-border-color-sel:#121212;--apf-radio-border:2px solid #ddd;--apf-is-inner-radius:50%;--apf-is-padding:3px;--apf-cs-gap: inset 0 0 0 3px #ffffff}.wapf-checkbox input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;padding:0;}.wapf-checkbox .wapf-custom{min-height:16px;min-width:16px;height:1.1em;width:1.1em;position:relative;display:inline-block;background:var(--apf-cb-bg, transparent);border-radius:var(--apf-cb-radius, 0);border:var(--apf-cb-border, none);}.wapf-checkbox .wapf-input-label:hover .wapf-custom{background-color:var(--apf-cb-bg-hov, transparent);border-color:var(--apf-cb-border-color-hov, transparent);}.wapf-checkbox input[type=checkbox]:checked + .wapf-custom{background-color:var(--apf-cb-bg-sel, transparent);border-color:var(--apf-cb-border-color-sel, transparent);}.wapf-checkbox input:checked + .wapf-custom:after{position:absolute;top:0;left:0;bottom:0;right:0;content:'';background:no-repeat center center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.701 45.7'%3E%3Cpath fill='%23ffffff' d='M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z'/%3E%3C/svg%3E");background-size:.58em;}.wapf-radio input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;padding:0;}.wapf-radio .wapf-custom{min-height:16px;min-width:16px;height:1.1em;width:1.1em;position:relative;display:inline-block;background:var(--apf-radio-bg, transparent);border-radius:50px;border:var(--apf-radio-border, none);}.wapf-radio .wapf-input-label:hover .wapf-custom{background-color:var(--apf-radio-bg-hov, transparent);border-color:var(--apf-radio-border-color-hov, transparent);}.wapf-radio input[type=radio]:checked + .wapf-custom{background-color:var(--apf-radio-bg-sel, transparent);border-color:var(--apf-radio-border-color-sel, transparent);}.wapf-radio input:checked + .wapf-custom:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:no-repeat center url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='24' /%3E%3C/svg%3E");background-size:.42em;}.wapf select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 448 512'%3E%3Cpath fill='%23121212' d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") calc(100% - 12px) 12px no-repeat;margin:0;cursor:pointer;background-size:12px;-webkit-appearance:none;appearance:none;color:inherit;}body .wapf-dp-my select.wapf-dp-month{background-image:url("data:image/svg+xml,%3Csvg fill='%23currentColor' xmlns=\'http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 353.9l17-17L401 177l17-17L384 126.1l-17 17-143 143L81 143l-17-17L30.1 160l17 17L207 337l17 17z'/%3E%3C/svg%3E")!important;}/*! CSS_VAR_DIVIDER */:root{--lcp_live_preview_footer___build___:#212121}.woocommerce-variation-add-to-cart,form.cart{flex-wrap:wrap!important}.wapf{width:100%}.wapf-hide{display:none!important}.wapf-upload-thumbs{display:flex;gap:10px}.wapf-child-item .wc-block-cart-item__quantity{display:none}body,html{scroll-behavior:auto!important}.wapf img{max-width:100%}.wapf-wrapper{margin:0 0 20px -5px;width:100%}.wapf-field-group,.wapf-section{display:flex;flex-wrap:wrap}.wapf-cloner{margin-top:15px}.wapf-section .wapf-cloner{margin:0 0 15px 5px}.wapf-clone-title{margin:15px 0;padding-left:5px;width:100%}.wapf-input-label{font-weight:400;cursor:pointer}.wapf-label-text{padding-left:10px}.wapf-field-container{padding:0 5px var(--apf-margin-bottom,15px) 5px;box-sizing:border-box}.wapf-field-container .wapf-swatch--image{width:100%}.wapf input[type=email],.wapf input[type=number],.wapf input[type=text],.wapf input[type=url],.wapf select,.wapf textarea{width:100%;box-sizing:border-box;background-color:var(--apf-input-bg,#fff);border-radius:var(--apf-radius,0);height:var(--apf-input-height,38px);border:var(--apf-input-border,none);color:var(--apf-input-color,inherit);padding:0 .7em;outline:1px solid transparent;font-family:inherit;box-shadow:none}.wapf input[type=email]:focus,.wapf input[type=number]:focus,.wapf input[type=text]:focus,.wapf input[type=url]:focus,.wapf select:focus,.wapf textarea:focus{border-color:var(--apf-input-border-color-foc,#fff);box-shadow:none}.wapf textarea{min-height:100px;padding:.7em}.wapf input[type=checkbox],.wapf input[type=radio]{float:left;margin-top:5px}.wapf-field-label{display:flex;align-items:center}.label-above .wapf-field-label{margin-bottom:10px}.wapf-field-label label{color:var(--apf-label-color,currentColor);font-size:var(--apf-label-size,1rem);font-weight:var(--apf-label-weight,normal)}.wapf-field-description{font-size:85%;opacity:.8;padding:5px 0 0 0;margin:0}.wapf-pricing-hint{opacity:.7}.wapf-disabled{opacity:.5}.wapf-disabled label{cursor:default!important}.wapf-card,.wapf-swatch{box-sizing:border-box;cursor:pointer;position:relative;min-width:0}.wapf-card input[type=checkbox],.wapf-card input[type=radio],.wapf-swatch input[type=checkbox],.wapf-swatch input[type=radio]{position:absolute;opacity:0;height:1px;width:1px;padding:0}.wapf-swatch label{cursor:pointer;font-weight:400;display:block;width:100%;margin:0;z-index:1}.wapf--circle{border-radius:50%}.wapf--rounded{border-radius:4px}.wapf-swatch-wrapper{display:flex;flex-wrap:wrap}.wapf-card-wrap{display:grid;grid-template-columns:repeat(var(--wapf-cols),1fr);grid-auto-rows:auto;gap:1rem}@media all and (max-width:900px){.wapf-card-wrap{grid-template-columns:repeat(var(--wapf-cols-t),1fr)}}@media all and (max-width:768px){.wapf-card-wrap{grid-template-columns:repeat(var(--wapf-cols-m),1fr)}}.wapf-card{position:relative;background:var(--apf-card-bg,#fff);color:var(--apf-card-color,inherit);border-radius:var(--apf-card-radius,6px);border:var(--apf-card-border,none);box-shadow:var(--apf-card-shadow,none)}.wapf-card.is-qty-select{background:var(--apf-cq-bg,#fff);color:var(--apf-cq-color,inherit);border-radius:var(--apf-cq-radius,6px);border:var(--apf-cq-border,none);box-shadow:var(--apf-cq-shadow,none);cursor:default}.wapf-card:not(.is-qty-select):hover{color:var(--apf-card-color-hov,inherit);border-color:var(--apf-card-border-color-hov,transparent);background:var(--apf-card-bg-hov,transparent)}.wapf-card.wapf-checked:not(.is-qty-select){color:var(--apf-card-color-sel,inherit);border-color:var(--apf-card-border-color-sel,transparent);background:var(--apf-card-bg-sel,#fff)}.wapf-card-inner{padding:.7em;display:flex;gap:7px;font-size:.935rem;overflow:hidden;user-select:none}.wapf-card-img img{width:68px;height:68px;max-width:68px;max-height:68px;object-fit:var(--apf-img-fit,cover);object-position:center;border-radius:var(--apf-card-radius,6px);vertical-align:bottom}.wapf-card-body,.wapf-card-row{display:flex;gap:.5rem;flex-flow:column;width:100%}.wapf-card-row{flex-flow:row;justify-content:space-between;align-items:center}.wapf-card-title{font-weight:600;width:100%;flex:1}.wapf-card-link{display:flex;align-items:end}.wapf-card a{padding:0;text-decoration:underline;color:currentColor}.wapf-card-qty{width:100%}.wapf-card-info{white-space:nowrap}.wapf-card-vertical .wapf-card-inner{flex-flow:column;height:100%}.wapf-card-vertical .wapf-card-body{row-gap:.5rem;flex-grow:1}.wapf-card-vertical .wapf-card-row:last-child{margin-top:auto}.wapf-card-vertical .wapf-card-img img{width:100%;height:100%;max-width:100%;max-height:120px}.wapf-swatch--image{text-align:center;transition:all .1s;overflow:hidden}.wapf-swatch--image img{vertical-align:bottom;border-radius:var(--apf-is-inner-radius,0)}.wapf-swatch--image .apf-pick-box,.wapf-swatch--image.apf-pick-box{border:var(--apf-is-border,none);border-radius:var(--apf-is-radius,0);background:var(--apf-is-bg,none);padding:var(--apf-is-padding,0)}.wapf-swatch--image .apf-pick-box:hover,.wapf-swatch--image.apf-pick-box:hover{background:var(--apf-is-bg-hov,transparent);border-color:var(--apf-is-border-color-hov,transparent)}.wapf-swatch--image .wapf-swatch-label{color:var(--apf-is-color,inherit)}.wapf-swatch--image .wapf-swatch-label:hover{color:var(--apf-is-color-hov,inherit)}.wapf-swatch--image.wapf-checked .apf-pick-box,.wapf-swatch--image.wapf-checked.apf-pick-box{border-color:var(--apf-is-border-color-sel,transparent);color:var(--apf-is-color-sel,inherit);background:var(--apf-is-bg-sel,transparent)}.wapf-swatch--image.wapf-checked .wapf-swatch-label{color:var(--apf-is-color-sel,inherit)}.wapf-swatch-label{text-align:center;padding:4px}.wapf-swatch--image label{height:100%}.wapf-image-swatch-wrapper{display:grid;gap:10px;grid-template-columns:repeat(var(--wapf-cols),var(--apf-col-width,1fr))}@media all and (max-width:900px){.wapf-image-swatch-wrapper{grid-template-columns:repeat(var(--wapf-cols-t,var(--wapf-cols)),var(--apf-col-width,1fr))}}@media all and (max-width:768px){.wapf-image-swatch-wrapper{grid-template-columns:repeat(var(--wapf-cols-m,var(--wapf-cols)),var(--apf-col-width,1fr))}}.wapf-swatch--color{margin:0 15px 15px 0;position:relative;transition:all .1s}.wapf-swatch--color .wapf-color{margin:auto;box-shadow:var(--apf-cs-gap,none);border:var(--apf-cs-border,none)}.wapf-swatch--color:hover .wapf-color{border-color:var(--apf-cs-border-color-hov,transparent)}.wapf-swatch--color.wapf-checked .wapf-color{border-color:var(--apf-cs-border-color-sel,transparent)}.wapf-swatch--text{margin:0 15px 15px 0;border-radius:var(--apf-ts-radius,4px);border:var(--apf-ts-border,none);color:var(--apf-ts-color,inherit);background:var(--apf-ts-bg,transparent)}.wapf-swatch--text label{padding:7px 11px}.wapf-swatch--text:hover{color:var(--apf-ts-color-hov,inherit);border-color:var(--apf-ts-border-color-hov,transparent);background:var(--apf-ts-bg-hov,transparent)}.wapf-swatch--text.wapf-checked{border-color:var(--apf-ts-border-color-sel,transparent);background:var(--apf-ts-bg-sel,transparent);color:var(--apf-ts-color-sel,inherit)}.wapf-checkboxes,.wapf-radios{display:inline-grid;grid-template-columns:auto;gap:5px 1rem}.wapf-checkbox label,.wapf-radio label{display:flex;align-items:center}.apf-plusmin{display:inline-flex;border-radius:var(--apf-ns-radius,var(--apf-radius,0));border:var(--apf-ns-border,var(--apf-input-border,none));width:100%;max-width:var(--apf-ns-width,100%);height:var(--apf-input-height,38px);overflow:hidden}.apf-plusmin:focus-within{border-color:var(--apf-ns-border-color-foc,var(--apf-input-border-color-foc,transparent))}.wapf-card-vertical .apf-plusmin{max-width:100%}.wapf .apf-plusmin button,.wapf .apf-plusmin input{box-shadow:none;margin:0!important;line-height:0;border:0;border-radius:0;width:auto;outline:0;flex:1;height:100%}.apf-plusmin button{background:var(--apf-ns-bg,transparent);font-size:1rem;padding:0!important;max-width:40px;outline:0;fill:var(--apf-ns-color,inherit);touch-action:manipulation}.apf-plusmin button:focus,.apf-plusmin button:hover{background:var(--apf-ns-bg,transparent)!important;fill:var(--apf-ns-color,inherit)}.wapf button.apf-minus{border-right:var(--apf-ns-border-inner,none)}.wapf button.apf-plus{border-left:var(--apf-ns-border-inner,none)}.wapf .apf-plusmin input{text-align:center;-moz-appearance:textfield;min-width:40px;padding:0 .7em;background:var(--apf-ns-input-bg,var(--apf-input-bg,#fff));color:var(--apf-ns-input-color,var(--apf-input-color,inherit))}.apf-plusmin input::-webkit-inner-spin-button,.apf-plusmin input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.wapf-product-totals{width:100%}.wapf-total{margin:0;padding:0}.wapf-product-totals .wapf--inner{margin-bottom:20px}.wapf-product-totals .wapf--inner>div{padding-bottom:10px;clear:both}.wapf-product-totals .wapf--inner>div:last-child{padding-bottom:0}.wapf-product-totals div span:first-child{font-weight:700}.wapf-product-totals div span:last-child{float:right}.wttw{z-index:999999;position:fixed;max-width:200px;opacity:0;transition:opacity .2s;visibility:hidden;left:-100%}.rtl .wttw{left:100%}.wapf-ttp{padding:4px 9px;font-size:.9rem;border-radius:4px;color:var(--apf-tooltip-color,#fff);background:var(--apf-tooltip-bg,#353c4e)}.wapf-ttp:after{content:'';z-index:-1;position:absolute;width:8px;height:8px;background:var(--apf-tooltip-bg,#353c4e);transform-origin:center;transform:rotate(45deg)}.tt-v{visibility:visible;display:block;position:absolute;opacity:1}.tt-t .wapf-ttp:after{bottom:-4px;left:50%;margin-left:-4px}.tt-b .wapf-ttp:after{top:-4px;left:50%;margin-left:-4px}.tt-l .wapf-ttp:after{top:50%;right:-4px;margin-top:-4px}.tt-r .wapf-ttp:after{top:50%;left:-4px;margin-top:-4px}.wapf-tt-icon{margin-left:5px;padding:0 5px;fill:var(--apf-tooltip-icon,currentColor);display:flex;cursor:pointer}
/* 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-extra */
/* GENERADO por cabecera_css.py: reglas de cabecera/pie que estaban en diseno-portada.css. */
:where(.topbar,#hdr,.footer,#modelHelper) .mq-item{display:inline-flex;align-items:center;gap:9px;padding:0 22px;font-size:12px;color:rgba(255,255,255,.55);}
:where(.topbar,#hdr,.footer,#modelHelper) .mq-item .dot{width:3px;height:3px;border-radius:50%;background:rgba(232,160,32,.5);flex-shrink:0;}
:where(.topbar,#hdr,.footer,#modelHelper) .mq-item .hi{color:var(--y);font-weight:500;}
:where(.topbar,#hdr,.footer,#modelHelper) .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;}
:where(.topbar,#hdr,.footer,#modelHelper) .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;}
:where(.topbar,#hdr,.footer,#modelHelper) .tb-lang:hover{background:rgba(255,255,255,.05);}
:where(.topbar,#hdr,.footer,#modelHelper) .tb-lang .ar{font-size:9px;color:rgba(255,255,255,.5);}
:where(.topbar,#hdr,.footer,#modelHelper) .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;}
:where(.topbar,#hdr,.footer,#modelHelper) .tb-lang.open .dd{display:flex;}
:where(.topbar,#hdr,.footer,#modelHelper) .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;}
/* Paginas interiores: la cabecera (barra de 36 px + menu de 64 px) es fija,
   el contenido empieza debajo. En la portada lo resuelve el propio hero. */
body:not(.home) #main-content{padding-top:100px}
@media(max-width:680px){body:not(.home) #main-content{padding-top:64px}}
/* El .wrap de la portada (1280 px + 32 px de margen) no debe mandar dentro de
   las paginas interiores: cada prototipo define el suyo. */
[class*="cr-p-"] .wrap{max-width:none;padding-left:0;padding-right:0}


/* cr-pagina-compatibles */
/* ==========================================================================
   PAGINA · Producto Ray-Ban RB2140 Compatibles v1.html
   CSS del prototipo de Nicolas, tal cual, ENCERRADO en .cr-p-compatibles: solo afecta
   a esta pagina (ni a la cabecera ni al pie, que son los de la portada).
   Hojas incluidas: en linea + prototype-faq.css, product-trust.css, product-config-summary.css, product-ar-info.css, product-treatment-comparison.css.
   GENERADO por portar_pagina.py: no editar a mano.
   ========================================================================== */
.cr-p-compatibles{--y:#f5c400;--yd:#b88c00;--ink:#171715;--paper:#f7f6f1;--white:#fff;--muted:#6e6d67;--bd:#dcd9cf;--green:#4e8847;--fh:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;--fb:Inter,Arial,sans-serif}
.cr-p-compatibles *{box-sizing:border-box}
.cr-p-compatibles{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb)}
.cr-p-compatibles button, .cr-p-compatibles input{font:inherit}
.cr-p-compatibles .wrap{width:min(1420px,calc(100% - 48px));margin:auto}
.cr-p-compatibles .top{height:32px;background:#0e0e0e;color:#fff;font-size:10px}
.cr-p-compatibles .top .wrap, .cr-p-compatibles .nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.cr-p-compatibles .top b{color:var(--y)}
.cr-p-compatibles .nav{height:72px;background:#181817;color:#fff;border-bottom:2px solid var(--y)}
.cr-p-compatibles .brand{width:210px}
.cr-p-compatibles .navlinks{display:flex;gap:30px;font-size:11px;font-weight:600}
.cr-p-compatibles .navtools{display:flex;gap:9px}
.cr-p-compatibles .navtools input{width:210px;padding:11px 13px;border:1px solid #444;border-radius:6px;background:#292928;color:#fff}
.cr-p-compatibles .cart{width:43px;border:0;border-radius:6px;background:var(--y)}
.cr-p-compatibles .crumb{padding:21px 0;color:#777;font-size:10px}
.cr-p-compatibles .product{display:grid;grid-template-columns:minmax(430px,1fr) minmax(480px,.94fr);gap:56px;padding-bottom:55px}
.cr-p-compatibles .gallery{display:grid;grid-template-columns:78px 1fr;gap:14px}
.cr-p-compatibles .thumbs{display:grid;align-content:start;gap:10px}
.cr-p-compatibles .thumb{height:78px;border:1px solid var(--bd);border-radius:7px;background:#fff;overflow:hidden}
.cr-p-compatibles .thumb.active{border:2px solid var(--y)}
.cr-p-compatibles .thumb img{width:100%;height:100%;object-fit:contain}
.cr-p-compatibles .stage{position:sticky;top:18px;min-height:620px;display:grid;place-items:center;border:1px solid var(--bd);border-radius:10px;background:#fff;overflow:hidden}
.cr-p-compatibles .stage img{width:88%;height:500px;object-fit:contain;transition:.25s}
.cr-p-compatibles .stage-tag{position:absolute;top:20px;left:20px;padding:8px 10px;background:#111;color:#fff;font:700 12px var(--fh);text-transform:uppercase;letter-spacing:.06em}
.cr-p-compatibles .stage-note{position:absolute;right:18px;bottom:17px;padding:8px 11px;border:1px solid var(--bd);border-radius:999px;background:#fff;font-size:9px}
.cr-p-compatibles .buy .eyebrow, .cr-p-compatibles .section .eyebrow{display:flex;align-items:center;gap:10px;color:#896a00;font:700 11px var(--fh);letter-spacing:.12em;text-transform:uppercase}
.cr-p-compatibles .eyebrow:before{content:'';width:20px;height:2px;background:var(--y)}
.cr-p-compatibles h1{max-width:690px;margin:14px 0 14px;font:800 clamp(44px,4vw,61px)/.94 var(--fh);text-transform:uppercase;letter-spacing:-.015em}
.cr-p-compatibles h1 span{color:var(--yd)}
.cr-p-compatibles .rating{display:flex;gap:10px;align-items:center;font-size:10px}
.cr-p-compatibles .stars{color:#a47f00;letter-spacing:1px}
.cr-p-compatibles .intro{max-width:640px;margin:20px 0;color:var(--muted);font-size:14px;line-height:1.7}
.cr-p-compatibles .proofs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.cr-p-compatibles .proof{padding:8px 11px;border:1px solid #d8d3c3;border-radius:999px;background:#fff;font-size:9px;font-weight:700}
.cr-p-compatibles .proof:before{content:'✓';margin-right:5px;color:#9b7900}
.cr-p-compatibles .price{display:flex;align-items:end;gap:9px;margin:23px 0}
.cr-p-compatibles .price b{font:800 38px var(--fh)}
.cr-p-compatibles .price span{padding-bottom:6px;color:#777;font-size:10px}
.cr-p-compatibles .step{margin-top:17px;padding-top:17px;border-top:1px solid var(--bd)}
.cr-p-compatibles .step-head{display:flex;justify-content:space-between;gap:15px;align-items:baseline;margin-bottom:11px}
.cr-p-compatibles .step-head b{font-size:12px}
.cr-p-compatibles .step-head span{color:#7d7a72;font-size:9px}
.cr-p-compatibles .row{display:flex;gap:9px;flex-wrap:wrap}
.cr-p-compatibles .option{min-height:45px;padding:0 15px;border:1px solid #ccc8bb;border-radius:7px;background:#fff;font-size:11px;font-weight:700}
.cr-p-compatibles .option.active{border-color:#111;background:#111;color:#fff;box-shadow:0 0 0 3px rgba(245,196,0,.28)}
.cr-p-compatibles .switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#e9e7df}
.cr-p-compatibles .switch:before{content:'';position:absolute;inset:4px 50% 4px 4px;border-radius:999px;background:#111;transition:.25s}
.cr-p-compatibles .switch.graduated:before{transform:translateX(100%)}
.cr-p-compatibles .switch button{position:relative;z-index:1;height:39px;border:0;background:none;color:#57564f;font-weight:700}
.cr-p-compatibles .switch button.active{color:#fff}
.cr-p-compatibles .flow-panel{display:none}
.cr-p-compatibles .flow-panel.active{display:block}
.cr-p-compatibles .usage{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cr-p-compatibles .usage .option{height:66px;text-align:left}
.cr-p-compatibles .usage small{display:block;margin-top:3px;color:#777;font-size:8px;font-weight:500}
.cr-p-compatibles .usage .active small{color:#ddd}
.cr-p-compatibles .colors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cr-p-compatibles .color{position:relative;min-height:63px;padding:10px 9px 9px 42px;border:1px solid #d2cfc4;border-radius:7px;background:#fff;text-align:left}
.cr-p-compatibles .color:before{content:'';position:absolute;left:10px;top:13px;width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #999}
.cr-p-compatibles .color b{display:block;font-size:9px}
.cr-p-compatibles .color small{display:block;margin-top:3px;color:#777;font-size:8px}
.cr-p-compatibles .color.active{border-color:#c59d00;background:#fff8d8}
.cr-p-compatibles .color.active:after{content:'✓';position:absolute;top:7px;right:7px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--y);font-size:9px}
.cr-p-compatibles .prescription{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cr-p-compatibles .prescription .option{height:auto;padding:12px;text-align:left}
.cr-p-compatibles .prescription small{display:block;margin-top:4px;color:#777;font-size:8px;font-weight:500}
.cr-p-compatibles .summary{margin-top:21px;padding:17px;border:1px solid #d6d1c0;border-radius:9px;background:#fff}
.cr-p-compatibles .summary-top{display:flex;justify-content:space-between;gap:20px;margin-bottom:12px}
.cr-p-compatibles .summary h3{margin:0;font:700 22px var(--fh);text-transform:uppercase}
.cr-p-compatibles .summary dl{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0;color:#666;font-size:9px}
.cr-p-compatibles .summary dd{margin:0;color:#111;font-weight:700}
.cr-p-compatibles .stock{display:flex;align-items:center;gap:7px;margin:15px 0 11px;color:#3f7039;font-size:10px;font-weight:700}
.cr-p-compatibles .stock:before{content:'';width:8px;height:8px;border-radius:50%;background:#55a04c}
.cr-p-compatibles .add{display:grid;grid-template-columns:90px 1fr;gap:9px}
.cr-p-compatibles .qty{display:flex;border:1px solid #ccc;border-radius:6px;background:#fff}
.cr-p-compatibles .qty button{width:30px;border:0;background:none}
.cr-p-compatibles .qty output{display:grid;place-items:center;flex:1}
.cr-p-compatibles .addcart{height:52px;border:0;border-radius:6px;background:var(--y);font-weight:800}
.cr-p-compatibles .micro{margin-top:11px;color:#777;font-size:9px}
.cr-p-compatibles .section{padding:76px 0}
.cr-p-compatibles .section.alt{background:#fff}
.cr-p-compatibles .section.dark{background:#111;color:#fff}
.cr-p-compatibles .section-head{max-width:780px;margin-bottom:31px}
.cr-p-compatibles .section h2{margin:12px 0 10px;font:800 clamp(35px,3.5vw,50px)/1 var(--fh);text-transform:uppercase}
.cr-p-compatibles .section p{color:var(--muted);font-size:13px;line-height:1.7}
.cr-p-compatibles .dark p{color:#bbb}
.cr-p-compatibles .compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.cr-p-compatibles .compare article{padding:28px;background:#fff}
.cr-p-compatibles .compare article+article{border-left:1px solid var(--bd)}
.cr-p-compatibles .compare h3{font:700 27px var(--fh);text-transform:uppercase}
.cr-p-compatibles .badge{display:inline-block;padding:6px 8px;background:#111;color:#fff;font:700 10px var(--fh);text-transform:uppercase}
.cr-p-compatibles .badge.outline{border:1px solid #c9a000;background:#fff;color:#876900}
.cr-p-compatibles .compare ul{display:grid;gap:11px;padding:0;list-style:none;color:#57564f;font-size:11px}
.cr-p-compatibles .compare li:before{content:'✓';margin-right:8px;color:#b28a00}
.cr-p-compatibles .features, .cr-p-compatibles .reviews, .cr-p-compatibles .faqgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cr-p-compatibles .card{padding:24px;border:1px solid var(--bd);border-radius:9px;background:#fff}
.cr-p-compatibles .card h3{font:700 23px var(--fh);text-transform:uppercase}
.cr-p-compatibles .install{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.cr-p-compatibles .video{aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#000}
.cr-p-compatibles .video iframe{width:100%;height:100%;border:0}
.cr-p-compatibles .review p{font-size:11px}
.cr-p-compatibles .review small{color:#4c7445;font-weight:700}
.cr-p-compatibles .cta{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:35px;border:1px solid #5a4b00;border-radius:10px;background:linear-gradient(120deg,#171714,#2c2502)}
.cr-p-compatibles .cta h2{margin:0}
.cr-p-compatibles .cta button{height:48px;padding:0 20px;border:0;border-radius:6px;background:var(--y);font-weight:800}
.cr-p-compatibles .faqgrid{grid-template-columns:1fr 1fr}
.cr-p-compatibles .faqgrid details{padding:18px;border:1px solid var(--bd);border-radius:8px;background:#fff}
.cr-p-compatibles .faqgrid summary{font-size:11px;font-weight:700}
.cr-p-compatibles .faqgrid p{font-size:10px}
.cr-p-compatibles .copyright{margin-top:35px;padding-top:18px;border-top:1px solid #292929;font-size:9px}
@media(max-width:980px){
.cr-p-compatibles .product{grid-template-columns:1fr}
.cr-p-compatibles .stage{position:relative}
.cr-p-compatibles .usage{grid-template-columns:1fr 1fr}
.cr-p-compatibles .features, .cr-p-compatibles .reviews{grid-template-columns:1fr}
.cr-p-compatibles .install{grid-template-columns:1fr}
}
@media(max-width:620px){
.cr-p-compatibles .wrap{width:min(100% - 28px,1420px)}
.cr-p-compatibles .navlinks, .cr-p-compatibles .navtools input{display:none}
.cr-p-compatibles .product{gap:30px}
.cr-p-compatibles .gallery{grid-template-columns:1fr}
.cr-p-compatibles .thumbs{grid-template-columns:repeat(4,1fr);order:2}
.cr-p-compatibles .stage{min-height:420px}
.cr-p-compatibles .stage img{height:330px}
.cr-p-compatibles .colors, .cr-p-compatibles .prescription, .cr-p-compatibles .compare, .cr-p-compatibles .faqgrid{grid-template-columns:1fr}
.cr-p-compatibles .compare article+article{border-left:0;border-top:1px solid var(--bd)}
.cr-p-compatibles .usage{grid-template-columns:1fr 1fr}
}
.cr-p-compatibles *{margin:0;padding:0}
.cr-p-compatibles button, .cr-p-compatibles a{cursor:pointer}
.cr-p-compatibles a{color:inherit;text-decoration:none}
.cr-p-compatibles .top{height:30px;color:#aaa}
.cr-p-compatibles .top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.cr-p-compatibles .nav{height:76px;border-bottom:1px solid #333}
.cr-p-compatibles .nav .wrap{height:100%;display:grid;grid-template-columns:290px 1fr 330px;align-items:center;gap:24px}
.cr-p-compatibles .brand{display:block;width:188px;height:52px;object-fit:contain;object-position:left center}
.cr-p-compatibles .navlinks{justify-content:center;gap:34px;font-size:13px}
.cr-p-compatibles .navlinks span:after{content:'';display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border-right:1.5px solid #999;border-bottom:1.5px solid #999;transform:rotate(45deg)}
.cr-p-compatibles .navtools{justify-content:flex-end;gap:10px}
.cr-p-compatibles .navtools input{width:235px;height:38px;padding:0 12px}
.cr-p-compatibles .cart{position:relative;width:42px;height:42px;font-size:0}
.cr-p-compatibles .cart:before{content:'';position:absolute;left:13px;top:12px;width:14px;height:11px;border:1.8px solid #111;border-top:0;transform:skew(-7deg)}
.cr-p-compatibles .cart:after{content:'';position:absolute;left:14px;top:27px;width:4px;height:4px;border-radius:50%;background:#111;box-shadow:12px 0 #111}
.cr-p-compatibles .crumb{padding:18px 0;font-size:11px}
.cr-p-compatibles .product{grid-template-columns:minmax(0,1.05fr) minmax(480px,.82fr);gap:58px;align-items:start;padding:10px 0 56px}
.cr-p-compatibles .gallery{position:sticky;top:20px;grid-template-columns:84px minmax(0,1fr);align-items:start}
.cr-p-compatibles .thumb{height:auto;aspect-ratio:1;display:grid;place-items:center}
.cr-p-compatibles .thumb img{padding:7px}
.cr-p-compatibles .stage{position:relative;top:auto;width:100%;height:620px;min-height:0;background-color:#fff;background-image:radial-gradient(#ddd9ce .7px,transparent .7px);background-size:12px 12px}
.cr-p-compatibles .stage img{width:90%;height:520px;filter:drop-shadow(0 20px 18px rgba(0,0,0,.12))}
.cr-p-compatibles .stage-tag{font-size:10px;font-weight:800;letter-spacing:.08em}
.cr-p-compatibles .stage-note{bottom:16px;color:#666;font-size:10px;background:rgba(255,255,255,.92)}
.cr-p-compatibles .buy{padding-top:3px}
.cr-p-compatibles .buy .eyebrow{color:#755c00;font-weight:800}
.cr-p-compatibles .buy h1{max-width:650px;margin:16px 0 12px;font-size:clamp(40px,3.55vw,58px);font-weight:800;line-height:.98;letter-spacing:-.012em}
.cr-p-compatibles .buy h1 span{font-weight:700}
.cr-p-compatibles .rating{margin-bottom:18px;font-size:11px}
.cr-p-compatibles .rating a{text-decoration:underline;text-underline-offset:3px}
.cr-p-compatibles .intro{max-width:610px;margin:0;font-size:14px}
.cr-p-compatibles .proofs{margin:20px 0}
.cr-p-compatibles .proof{font-size:10px}
.cr-p-compatibles .price{margin:20px 0}
.cr-p-compatibles .price b{font-size:37px}
.cr-p-compatibles .price span{font-size:11px}
.cr-p-compatibles .degree-route{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin:20px 0 3px;padding:15px;border:1px solid #d8d3c3;border-radius:8px;background:#fff}
.cr-p-compatibles .degree-route b{font-size:11px}
.cr-p-compatibles .degree-route small{display:block;margin-top:4px;color:#777;font-size:9px}
.cr-p-compatibles .degree-route a{padding:10px 13px;border-radius:6px;background:#111;color:#fff;font-size:9px;font-weight:800}
.cr-p-compatibles .step{margin-top:18px;padding-top:18px}
.cr-p-compatibles .step[hidden]{display:none}
.cr-p-compatibles .step-head{margin-bottom:12px}
.cr-p-compatibles .step-head b{font-size:13px}
.cr-p-compatibles .step-head span{font-size:10px}
.cr-p-compatibles .option{min-height:46px}
.cr-p-compatibles .summary{margin-top:24px}
.cr-p-compatibles .section h2{font-size:clamp(34px,3vw,46px);font-weight:800}
.cr-p-compatibles .anchor-links{position:sticky;top:0;z-index:10;background:#fff;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.cr-p-compatibles .anchor-links.wrap{width:100%;max-width:none;padding:0 max(24px,calc((100% - 1420px)/2));min-height:56px;align-items:center}
.cr-p-compatibles .product-story{display:grid;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);gap:48px;align-items:center}
.cr-p-compatibles .story-copy{max-width:580px}
.cr-p-compatibles .story-copy h2{max-width:570px}
.cr-p-compatibles .story-copy p+p{margin-top:13px}
.cr-p-compatibles .story-note{margin-top:20px;padding:15px 17px;border-left:3px solid var(--y);background:#f4f1e8;color:#555;font-size:11px;line-height:1.6}
.cr-p-compatibles .process-video{position:relative;aspect-ratio:16/9;border:1px solid #3a3a38;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#161616,#282822);color:#fff}
.cr-p-compatibles .process-video video{width:100%;height:100%;object-fit:cover;background:#171717}
.cr-p-compatibles .process-placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;background:radial-gradient(circle at 38% 44%,rgba(245,196,0,.14),transparent 34%),linear-gradient(135deg,#121212,#28261d)}
.cr-p-compatibles .process-placeholder strong{display:block;font:700 29px var(--fh);text-transform:uppercase}
.cr-p-compatibles .process-placeholder span{display:block;max-width:390px;margin:8px auto 0;color:#c7c4bb;font-size:11px;line-height:1.55}
.cr-p-compatibles .process-label{position:absolute;left:16px;top:16px;z-index:2;padding:7px 10px;border-radius:999px;background:var(--y);color:#111;font-size:9px;font-weight:800;text-transform:uppercase}
.cr-p-compatibles .process-facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;border:1px solid var(--bd);border-radius:9px;overflow:hidden;background:#fff}
.cr-p-compatibles .process-facts div{padding:16px 18px}
.cr-p-compatibles .process-facts div+div{border-left:1px solid var(--bd)}
.cr-p-compatibles .process-facts small{display:block;margin-bottom:5px;color:#777;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.cr-p-compatibles .process-facts b{font-size:11px}
.cr-p-compatibles .process-proof{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.cr-p-compatibles .process-proof span{padding:7px 9px;border:1px solid #d8d3c3;border-radius:999px;background:#fff;font-size:9px;font-weight:700}
.cr-p-compatibles .process-proof span:before{content:'✓';margin-right:5px;color:#9b7900}
@media(max-width:980px){
.cr-p-compatibles .product-story{grid-template-columns:1fr}
.cr-p-compatibles .story-copy{max-width:none}
.cr-p-compatibles .process-facts{grid-template-columns:1fr 1fr}
.cr-p-compatibles .process-facts div:nth-child(3){border-left:0;border-top:1px solid var(--bd)}
.cr-p-compatibles .process-facts div:nth-child(4){border-top:1px solid var(--bd)}
}
@media(max-width:560px){
.cr-p-compatibles .process-facts{grid-template-columns:1fr}
.cr-p-compatibles .process-facts div+div{border-left:0;border-top:1px solid var(--bd)}
.cr-p-compatibles .process-video{aspect-ratio:4/3}
.cr-p-compatibles .process-placeholder strong{font-size:24px}
}
@media(max-width:1100px){
.cr-p-compatibles .nav .wrap{grid-template-columns:220px 1fr 250px}
.cr-p-compatibles .navlinks{gap:18px}
.cr-p-compatibles .product{grid-template-columns:1fr}
.cr-p-compatibles .gallery{position:static}
.cr-p-compatibles .buy{max-width:780px}
.cr-p-compatibles .stage{height:560px}
.cr-p-compatibles .stage img{height:470px}
}
@media(max-width:720px){
.cr-p-compatibles .top .wrap span:last-child, .cr-p-compatibles .navlinks, .cr-p-compatibles .navtools input, .cr-p-compatibles .anchor-links{display:none}
.cr-p-compatibles .nav{height:64px}
.cr-p-compatibles .nav .wrap{grid-template-columns:1fr auto}
.cr-p-compatibles .brand{width:165px;height:48px}
.cr-p-compatibles .product{gap:30px;padding-top:0}
.cr-p-compatibles .gallery{grid-template-columns:1fr}
.cr-p-compatibles .thumbs{grid-template-columns:repeat(4,1fr);order:2}
.cr-p-compatibles .stage{height:390px}
.cr-p-compatibles .stage img{height:340px}
.cr-p-compatibles .buy h1{font-size:40px}
.cr-p-compatibles .degree-route{grid-template-columns:1fr}
.cr-p-compatibles .degree-route a{text-align:center}
}
.cr-p-compatibles .brand-lockup{display:flex;align-items:center;gap:10px;width:max-content}
.cr-p-compatibles .brand-mark{width:42px;height:42px;object-fit:contain}
.cr-p-compatibles .brand-name{color:#fff;font:800 16px/1 var(--fh);text-transform:uppercase}
.cr-p-compatibles .brand-name small{display:block;margin-top:4px;color:#8e8e8a;font:700 7px/1 var(--fb);letter-spacing:.14em}
.cr-p-compatibles .engraving-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cr-p-compatibles .engraving-choice .option{height:auto;min-height:68px;text-align:left}
.cr-p-compatibles .engraving-choice small{display:block;margin-top:4px;color:#777;font-size:8px;font-weight:500}
.cr-p-compatibles .engraving-choice .active small{color:#ddd}
.cr-p-compatibles .engraving-detail{display:none;margin-top:12px;padding:16px;border:1px solid #d6d1c0;border-radius:9px;background:#fff}
.cr-p-compatibles .engraving-detail.visible{display:block}
.cr-p-compatibles .engraving-fields{display:grid;gap:14px}
.cr-p-compatibles .engraving-field{padding:14px;border:1px solid #e0ddd3;border-radius:8px;background:#faf9f5}
.cr-p-compatibles .engraving-field h4{margin:0 0 11px;font-size:11px}
.cr-p-compatibles .engraving-field-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(150px,.85fr);gap:10px}
.cr-p-compatibles .field-label{display:block;margin-bottom:6px;font-size:9px;font-weight:800}
.cr-p-compatibles .text-wrap{position:relative}
.cr-p-compatibles .text-wrap input{width:100%;height:43px;padding:0 48px 0 12px;border:1px solid #cbc7ba;border-radius:6px;background:#fff}
.cr-p-compatibles .char-count{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:#777;font-size:9px}
.cr-p-compatibles .font-select{width:100%;height:43px;padding:0 34px 0 11px;border:1px solid #cbc7ba;border-radius:6px;background:#fff}
.cr-p-compatibles .location-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.cr-p-compatibles .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cr-p-compatibles .mini-option{min-height:38px;padding:7px 9px;border:1px solid #ccc8bb;border-radius:6px;background:#fff;font-size:9px;font-weight:700;text-align:left}
.cr-p-compatibles .mini-option.active{border-color:#111;background:#111;color:#fff;box-shadow:0 0 0 2px rgba(245,196,0,.25)}
.cr-p-compatibles .engraving-preview{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.cr-p-compatibles .preview-lens{position:relative;aspect-ratio:1.65/1;border:1px solid #c8c4b8;border-radius:48% 44% 46% 42%;background:linear-gradient(145deg,#a4aa9a,#697060);overflow:hidden}
.cr-p-compatibles .preview-lens:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 45%)}
.cr-p-compatibles .preview-lens span{position:absolute;left:50%;transform:translateX(-50%);max-width:88%;color:#f7f7f0;font-size:11px;line-height:1;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.cr-p-compatibles .preview-lens span.top{top:17%}
.cr-p-compatibles .preview-lens span.bottom{bottom:17%}
.cr-p-compatibles .preview-caption{grid-column:1/-1;color:#777;font-size:8px;text-align:center}
.cr-p-compatibles .engraving-warning{margin-top:13px;padding:11px 12px;border-left:3px solid var(--y);background:#fff8dc;color:#5f5b50;font-size:9px;line-height:1.55}
.cr-p-compatibles .engraving-warning strong{color:#111}
.cr-p-compatibles .engraving-confirm{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:12px;border:1px solid #ded9c9;border-radius:7px;background:#fff}
.cr-p-compatibles .engraving-confirm input{width:16px;height:16px;margin-top:1px;accent-color:#111}
.cr-p-compatibles .engraving-confirm label{font-size:9px;line-height:1.5}
.cr-p-compatibles .machine-note{display:flex;align-items:flex-start;gap:9px;margin-top:10px;color:#666;font-size:9px;line-height:1.5}
.cr-p-compatibles .machine-note:before{content:'';flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--y);box-shadow:inset 0 0 0 6px #fff4bd}
.cr-p-compatibles .addcart:disabled{cursor:not-allowed;background:#d8d5cb;color:#8a8881}
.cr-p-compatibles .validation-note{display:none;margin-top:7px;color:#a24b2c;font-size:9px;font-weight:700}
.cr-p-compatibles .validation-note.visible{display:block}
@media(max-width:720px){
.cr-p-compatibles .brand-mark{width:38px;height:38px}
.cr-p-compatibles .brand-name{font-size:14px}
.cr-p-compatibles .engraving-choice, .cr-p-compatibles .engraving-field-grid, .cr-p-compatibles .location-row{grid-template-columns:1fr}
}
.cr-p-compatibles .buy h1 span{display:block;white-space:nowrap}
.cr-p-compatibles .usage{grid-template-columns:repeat(3,1fr)}
.cr-p-compatibles .treatments{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cr-p-compatibles .treatments.single{grid-template-columns:1fr}
.cr-p-compatibles .treatment{min-height:82px;padding:12px 13px;text-align:left}
.cr-p-compatibles .treatment b{display:block;font-size:10px}
.cr-p-compatibles .treatment small{display:block;margin-top:5px;color:#777;font-size:8px;line-height:1.4;font-weight:500}
.cr-p-compatibles .treatment.active small{color:#ddd}
.cr-p-compatibles .option-price{display:inline-block;margin-top:6px;color:#8b6c00;font-size:9px;font-weight:800}
.cr-p-compatibles .treatment.active .option-price{color:var(--y)}
.cr-p-compatibles .color-count{font-weight:600}
.cr-p-compatibles .availability-hint{margin-top:9px;color:#777;font-size:9px;line-height:1.5}
@media(max-width:720px){
.cr-p-compatibles .usage, .cr-p-compatibles .treatments{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
.cr-p-compatibles .usage, .cr-p-compatibles .treatments{grid-template-columns:1fr}
}
.cr-p-compatibles .process-video.has-video .process-placeholder{display:none}
.cr-p-compatibles .process-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transform:scale(1.01)}
.cr-p-compatibles .process-scope{position:absolute;z-index:2;left:14px;right:14px;bottom:13px;padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(10,10,10,.76);color:#eee;font-size:9px;line-height:1.4;backdrop-filter:blur(5px)}
.cr-p-compatibles .engraving-preview{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:14px 5%;border:1px solid #e0ddd3;border-radius:9px;background:#faf9f5;overflow:hidden}
.cr-p-compatibles .preview-lens{position:relative;border:0;border-radius:0;background-color:transparent;background-repeat:no-repeat;background-size:auto 100%;overflow:visible}
.cr-p-compatibles .preview-lens:first-child{background-image:url('/wp-content/themes/cristalesrepuesto/assets/css/../img/diseno/product-rayban-rb2140-compatible/lente-izquierda.svg');background-position:left center;transform:translateX(28%)}
.cr-p-compatibles .preview-lens:nth-child(2){background-image:url('/wp-content/themes/cristalesrepuesto/assets/css/../img/diseno/product-rayban-rb2140-compatible/lente-derecha.svg');background-position:right center;transform:translateX(-28%)}
.cr-p-compatibles .preview-lens:before{display:none}
.cr-p-compatibles .preview-lens span{position:absolute;z-index:2;width:max-content;max-width:42%;overflow:hidden;color:#f7f7f0;font-size:10px;line-height:1;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.72);background:transparent;height:auto;transform:none}
.cr-p-compatibles .preview-lens:first-child span{left:20%;right:auto;text-align:left}
.cr-p-compatibles .preview-lens:nth-child(2) span{left:auto;right:20%;text-align:right}
.cr-p-compatibles .preview-lens span.engraving-top{top:27%;bottom:auto}
.cr-p-compatibles .preview-lens span.engraving-bottom{top:auto;bottom:29%}
.cr-p-compatibles .preview-caption{position:relative;z-index:3;margin-top:0;padding-top:5px}
@media(max-width:560px){
.cr-p-compatibles .engraving-preview{padding-inline:2%}
.cr-p-compatibles .preview-lens:first-child{transform:translateX(24%)}
.cr-p-compatibles .preview-lens:nth-child(2){transform:translateX(-24%)}
.cr-p-compatibles .preview-lens:first-child span{left:18%}
.cr-p-compatibles .preview-lens:nth-child(2) span{right:16%}
}
.cr-p-compatibles .engraving-detail{padding:14px;background:#fff}
.cr-p-compatibles .engraving-section{padding:13px 0;border-top:1px solid #e6e1d4}
.cr-p-compatibles .engraving-section:first-child{padding-top:0;border-top:0}
.cr-p-compatibles .engraving-kicker{display:flex;align-items:center;gap:7px;margin:0 0 9px;color:#777;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.cr-p-compatibles .engraving-kicker:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--y)}
.cr-p-compatibles .engraving-mode, .cr-p-compatibles .placement-options, .cr-p-compatibles .font-options{display:grid;gap:7px}
.cr-p-compatibles .engraving-mode{grid-template-columns:1fr 1fr}
.cr-p-compatibles .placement-options{grid-template-columns:1fr 1fr}
.cr-p-compatibles .font-options{grid-template-columns:repeat(3,1fr)}
.cr-p-compatibles .choice-card{display:flex;align-items:center;gap:9px;min-height:48px;padding:9px 11px;border:1px solid #d8d4c8;border-radius:8px;background:#fff;color:#222;text-align:left}
.cr-p-compatibles .choice-card:before{content:'';flex:0 0 12px;width:12px;height:12px;border:1px solid #bfc3c7;border-radius:50%;box-shadow:inset 0 0 0 3px #fff}
.cr-p-compatibles .choice-card strong, .cr-p-compatibles .choice-card small{display:block}
.cr-p-compatibles .choice-card strong{font-size:10px}
.cr-p-compatibles .choice-card small{margin-top:2px;color:#777;font-size:8px;font-weight:500}
.cr-p-compatibles .choice-card.active{border-color:#008b87;background:#edf9f8;box-shadow:0 0 0 1px rgba(0,139,135,.06)}
.cr-p-compatibles .choice-card.active:before{border-color:#008b87;background:#008b87}
.cr-p-compatibles .choice-card .choice-price{margin-left:auto;color:#007b77;font-size:9px;font-weight:900;white-space:nowrap}
.cr-p-compatibles .font-card{min-height:54px}
.cr-p-compatibles .font-card[data-value="Times New Roman"] strong{font-family:"Times New Roman",serif;font-size:13px}
.cr-p-compatibles .font-card[data-value="Segoe Script"] strong{font-family:"Segoe Script",cursive;font-size:13px}
.cr-p-compatibles .mode-panel[hidden]{display:none}
.cr-p-compatibles .upload-requirements{margin:9px 0;padding:11px 12px;border-radius:7px;background:#eef5ff;color:#38548a;font-size:8px;line-height:1.6}
.cr-p-compatibles .upload-zone{display:flex;align-items:center;justify-content:center;min-height:74px;margin-top:10px;border:1px dashed #b9c5d7;border-radius:8px;background:#fbfdff;color:#777;font-size:9px;text-align:center;cursor:pointer}
.cr-p-compatibles .upload-zone input{position:absolute;width:1px;height:1px;opacity:0}
.cr-p-compatibles .upload-zone strong{display:block;margin-bottom:3px;color:#333;font-size:10px}
.cr-p-compatibles .rights-confirm{margin-top:10px}
.cr-p-compatibles .engraving-live-summary{margin-top:10px;padding:10px 12px;border-left:3px solid var(--y);background:#fff8dc;color:#504d45;font-size:9px;line-height:1.5}
.cr-p-compatibles .engraving-warning{margin-top:0}
.cr-p-compatibles .engraving-confirm{margin-top:10px}
.cr-p-compatibles .engraving-input-row{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:8px}
.cr-p-compatibles .engraving-input-row .font-sample{display:flex;align-items:center;justify-content:center;border:1px solid #d8d4c8;border-radius:6px;background:#faf9f5;color:#555;font-size:10px;text-align:center}
.cr-p-compatibles .engraving-detail .validation-note{margin-bottom:0}
@media(max-width:720px){
.cr-p-compatibles .engraving-mode, .cr-p-compatibles .placement-options, .cr-p-compatibles .font-options{grid-template-columns:1fr}
.cr-p-compatibles .engraving-input-row{grid-template-columns:1fr}
.cr-p-compatibles .choice-card{min-height:46px}
}
.cr-p-compatibles .compare article{padding:22px 26px 21px}
.cr-p-compatibles .compare .badge{margin-bottom:7px}
.cr-p-compatibles .compare h3{margin:0 0 5px;line-height:1}
.cr-p-compatibles .compare ul{gap:8px;margin:0;line-height:1.35}
.cr-p-compatibles .compare li{min-height:15px}
@media(max-width:620px){
.cr-p-compatibles .compare article{padding:20px}
.cr-p-compatibles .compare ul{gap:7px}
}
.cr-p-compatibles .placement-options .choice-card[hidden]{display:none!important}
.cr-p-compatibles .extras{margin-top:20px;padding-top:18px;border-top:1px solid var(--bd)}
.cr-p-compatibles .extras-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px}
.cr-p-compatibles .extras-head b{font-size:12px}
.cr-p-compatibles .extras-head span{color:#777;font-size:9px}
.cr-p-compatibles .extras-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cr-p-compatibles .extra-card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:center;min-height:76px;padding:8px;border:1px solid var(--bd);border-radius:8px;background:#fff;text-align:left}
.cr-p-compatibles .extra-card img{width:58px;height:58px;border-radius:6px;background:#f8f7f2;object-fit:contain}
.cr-p-compatibles .extra-card strong{display:block;font-size:10px}
.cr-p-compatibles .extra-card small{display:block;margin-top:4px;color:#777;font-size:8px;line-height:1.35}
.cr-p-compatibles .extra-card[aria-pressed="true"]{border-color:#c79b00;background:#fff8d8;box-shadow:inset 0 0 0 1px var(--y)}
.cr-p-compatibles .extra-card[aria-pressed="true"] strong:before{content:'\2713  ';color:#8c6c00}
.cr-p-compatibles .model-check{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:28px;padding:25px;border:1px solid var(--bd);border-radius:10px;background:#fff}
.cr-p-compatibles .model-check-visual{display:grid;place-items:center;min-height:220px;padding:22px;border-radius:8px;background:#171717}
.cr-p-compatibles .model-check-visual img{display:block;width:92%;max-width:610px;filter:invert(1);opacity:.94}
.cr-p-compatibles .model-check-copy{align-self:center}
.cr-p-compatibles .model-check-copy h3{margin:0 0 8px;font:700 25px/1 var(--fh);text-transform:uppercase}
.cr-p-compatibles .model-check-copy>p{margin:0 0 15px;font-size:11px;line-height:1.6}
.cr-p-compatibles .code-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cr-p-compatibles .code-item{padding:10px;border:1px solid #ded9ce;border-radius:7px;background:#faf9f5}
.cr-p-compatibles .code-item b{display:block;font-size:10px}
.cr-p-compatibles .code-item small{display:block;margin-top:3px;color:#777;font-size:8px}
.cr-p-compatibles .model-rule{margin-top:13px;padding:11px 12px;border-left:3px solid var(--y);background:#fff8dc;color:#555;font-size:9px;line-height:1.5}
.cr-p-compatibles .model-help{display:inline-flex;margin-top:12px;padding-bottom:2px;border-bottom:1px solid #111;font-size:9px;font-weight:800}
.cr-p-compatibles .model-help:after{content:'\2192';margin-left:7px}
.cr-p-compatibles .summary dl{grid-template-columns:minmax(120px,1fr) minmax(0,1.6fr)}
.cr-p-compatibles .summary dd{text-align:right}
@media(max-width:720px){
.cr-p-compatibles .stage{height:320px;min-height:320px}
.cr-p-compatibles .stage img{height:275px}
.cr-p-compatibles .thumb{height:62px;aspect-ratio:auto}
.cr-p-compatibles .colors{grid-template-columns:repeat(2,minmax(0,1fr))}
.cr-p-compatibles .extras-grid{grid-template-columns:1fr}
.cr-p-compatibles .model-check{grid-template-columns:1fr;padding:16px}
.cr-p-compatibles .model-check-visual{min-height:155px;padding:14px 8px}
.cr-p-compatibles .code-list{grid-template-columns:1fr 1fr}
.cr-p-compatibles .summary dl{grid-template-columns:1fr}
.cr-p-compatibles .summary dd{text-align:left;margin-bottom:5px}
}
@media(max-width:430px){
.cr-p-compatibles .colors, .cr-p-compatibles .code-list{grid-template-columns:1fr}
}
.cr-p-compatibles .selection-help{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;margin-top:10px;padding:12px;border:1px solid #ded9ce;border-radius:8px;background:#faf9f5}
.cr-p-compatibles .selection-help-visual, .cr-p-compatibles .benefit-visual{position:relative;overflow:hidden;background:linear-gradient(145deg,#d8d4c6,#777c6c);isolation:isolate}
.cr-p-compatibles .selection-help-visual{min-height:86px;border-radius:7px}
.cr-p-compatibles .selection-help-visual:before, .cr-p-compatibles .benefit-visual:before{content:'';position:absolute;inset:14% 12%;border-radius:48% 45% 43% 47%;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.05) 43%,rgba(16,20,17,.18));border:1px solid rgba(20,20,18,.35)}
.cr-p-compatibles .selection-help-visual:after, .cr-p-compatibles .benefit-visual:after{content:'';position:absolute;left:-12%;right:-12%;top:48%;height:2px;transform:rotate(-12deg);background:rgba(255,255,255,.66);box-shadow:0 0 12px 5px rgba(255,255,255,.18)}
.cr-p-compatibles .selection-help-visual[data-kind="plus"], .cr-p-compatibles .benefit-visual[data-kind="plus"]{background:linear-gradient(145deg,#dfe6df,#405d51)}
.cr-p-compatibles .selection-help-visual[data-kind="elite"], .cr-p-compatibles .benefit-visual[data-kind="elite"]{background:linear-gradient(145deg,#edf2ec,#273e35)}
.cr-p-compatibles .selection-help-visual[data-kind="clear"], .cr-p-compatibles .benefit-visual[data-kind="clear"]{background:linear-gradient(145deg,#fff,#dce4e6)}
.cr-p-compatibles .selection-help-visual[data-kind="ar"], .cr-p-compatibles .benefit-visual[data-kind="ar"]{background:linear-gradient(145deg,#f7fdff,#91b8c6)}
.cr-p-compatibles .selection-help-visual[data-kind="full"], .cr-p-compatibles .benefit-visual[data-kind="full"]{background:linear-gradient(145deg,#eefcff,#537c8f)}
.cr-p-compatibles .selection-help-copy b{display:block;font-size:11px}
.cr-p-compatibles .selection-help-copy p{margin:4px 0 8px;color:#666;font-size:9px;line-height:1.5}
.cr-p-compatibles .selection-help-tags{display:flex;flex-wrap:wrap;gap:5px}
.cr-p-compatibles .selection-help-tags span{padding:5px 7px;border:1px solid #d9d4c8;border-radius:999px;background:#fff;font-size:8px;font-weight:700}
.cr-p-compatibles .treatment-learning{background:#171717;color:#fff}
.cr-p-compatibles .treatment-learning .section-head p{color:#bbb}
.cr-p-compatibles .learning-switch{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:20px;padding:4px;border:1px solid #3c3c39;border-radius:999px;background:#20201f}
.cr-p-compatibles .learning-switch button{min-width:170px;padding:9px 16px;border:0;border-radius:999px;background:transparent;color:#bbb;font-size:9px;font-weight:800}
.cr-p-compatibles .learning-switch button.active{background:var(--y);color:#111}
.cr-p-compatibles .learning-panel[hidden]{display:none}
.cr-p-compatibles .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cr-p-compatibles .benefit-card{overflow:hidden;border:1px solid #3c3c39;border-radius:10px;background:#1e1e1d}
.cr-p-compatibles .benefit-visual{height:140px}
.cr-p-compatibles .benefit-body{padding:17px}
.cr-p-compatibles .benefit-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cr-p-compatibles .benefit-body h3{margin:0;font:700 24px/1 var(--fh);text-transform:uppercase}
.cr-p-compatibles .benefit-price{color:var(--y);font-size:10px;font-weight:900;white-space:nowrap}
.cr-p-compatibles .benefit-use{margin:8px 0 12px;color:#d6d3ca;font-size:10px;line-height:1.5}
.cr-p-compatibles .benefit-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.cr-p-compatibles .benefit-list li{color:#aaa;font-size:9px;line-height:1.4}
.cr-p-compatibles .benefit-list li:before{content:'\2713';margin-right:7px;color:var(--y);font-weight:900}
.cr-p-compatibles .learning-note{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:12px 14px;border:1px solid #3d3b32;border-radius:8px;background:#211f18;color:#c9c5ba;font-size:9px;line-height:1.5}
.cr-p-compatibles .learning-note:before{content:'i';display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--y);color:#111;font-weight:900}
.cr-p-compatibles .anchor-links{overflow-x:auto;white-space:nowrap}
.cr-p-compatibles .anchor-links::-webkit-scrollbar{height:3px}
.cr-p-compatibles .anchor-links::-webkit-scrollbar-thumb{background:#c5a000}
@media(max-width:820px){
.cr-p-compatibles .benefit-grid{grid-template-columns:1fr}
.cr-p-compatibles .benefit-card{display:grid;grid-template-columns:150px 1fr}
.cr-p-compatibles .benefit-visual{height:auto;min-height:150px}
.cr-p-compatibles .learning-switch{width:100%}
.cr-p-compatibles .learning-switch button{min-width:0}
.cr-p-compatibles .selection-help{grid-template-columns:88px 1fr}
}
@media(max-width:520px){
.cr-p-compatibles .benefit-card{grid-template-columns:1fr}
.cr-p-compatibles .benefit-visual{height:125px;min-height:0}
.cr-p-compatibles .selection-help{grid-template-columns:1fr}
.cr-p-compatibles .selection-help-visual{min-height:105px}
}
.cr-p-compatibles .selection-help{display:block;margin-top:9px;padding:10px 12px;border:0;border-left:3px solid var(--y);border-radius:0;background:#f6f3ea}
.cr-p-compatibles .selection-help-visual, .cr-p-compatibles .selection-help-tags{display:none}
.cr-p-compatibles .selection-help-copy b{font-size:10px;line-height:1.3}
.cr-p-compatibles .selection-help-copy p{margin:3px 0 0;font-size:8px;line-height:1.45;color:#68655d}
.cr-p-compatibles .treatment-learning .section-head{max-width:650px}
.cr-p-compatibles .treatment-learning .learning-panel{position:relative;min-height:420px}
.cr-p-compatibles .treatment-learning .benefit-grid{display:flex;width:39%;flex-direction:column;gap:9px}
.cr-p-compatibles .treatment-learning .benefit-card{position:static;overflow:visible;border-color:#454541;border-radius:13px;background:#f6f5f1;color:#171717;cursor:pointer;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.cr-p-compatibles .treatment-learning .benefit-card:hover{border-color:#8e8b7e}
.cr-p-compatibles .treatment-learning .benefit-card.active{border-color:var(--y);background:var(--y);box-shadow:7px 0 0 var(--y)}
.cr-p-compatibles .treatment-learning .benefit-body{padding:17px 18px}
.cr-p-compatibles .treatment-learning .benefit-body h3{font-size:22px}
.cr-p-compatibles .treatment-learning .benefit-price{color:#806a00}
.cr-p-compatibles .treatment-learning .benefit-use{margin:6px 0 0;color:#4d4a43}
.cr-p-compatibles .treatment-learning .benefit-list{display:none;margin-top:11px;padding-top:10px;border-top:1px solid rgba(17,17,17,.17)}
.cr-p-compatibles .treatment-learning .benefit-card.active .benefit-list{display:grid}
.cr-p-compatibles .treatment-learning .benefit-list li{color:#26241f}
.cr-p-compatibles .treatment-learning .benefit-list li:before{color:#111}
.cr-p-compatibles .treatment-learning .benefit-visual{position:absolute;left:calc(39% + 42px);right:0;top:0;height:100%;min-height:390px;border:1px solid #44443e;border-radius:16px;opacity:0;pointer-events:none;background:radial-gradient(circle at 52% 40%,rgba(255,216,31,.14),transparent 34%),linear-gradient(145deg,#242421,#111);transition:opacity .3s ease}
.cr-p-compatibles .treatment-learning .benefit-card.active .benefit-visual{opacity:1}
.cr-p-compatibles .treatment-learning .benefit-visual img{position:absolute;inset:22px 28px 52px;width:calc(100% - 56px);height:calc(100% - 74px);object-fit:contain;object-position:center;filter:drop-shadow(0 22px 26px rgba(0,0,0,.34));opacity:0;transform:translateY(14px) scale(.97)}
.cr-p-compatibles .treatment-learning .benefit-card.active .benefit-visual img{opacity:1;transform:none}
.cr-p-compatibles .treatment-learning .benefit-visual.is-animating img{animation:treatmentLayersIn .62s cubic-bezier(.22,.7,.2,1) both}
@keyframes treatmentLayersIn{0%{opacity:0;transform:translateY(18px) scale(.965)}62%{opacity:1;transform:translateY(-4px) scale(1.006)}100%{opacity:1;transform:none}}
.cr-p-compatibles .treatment-learning .benefit-visual:before{inset:auto;left:50%;top:45%;width:360px;height:150px;border:1px solid rgba(255,255,255,.48);border-radius:52% 45% 48% 44%;background:linear-gradient(145deg,rgba(255,255,255,.36),rgba(135,145,132,.19));transform:translate(-50%,-50%) rotate(-7deg);box-shadow:0 -17px 0 rgba(247,198,0,.38),0 -34px 0 rgba(205,211,204,.20);transition:box-shadow .3s ease}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="plus"]:before{box-shadow:0 -17px 0 rgba(247,198,0,.38),0 -34px 0 rgba(199,209,203,.22),0 -51px 0 rgba(87,133,117,.5)}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="elite"]:before{box-shadow:0 -15px 0 rgba(247,198,0,.38),0 -30px 0 rgba(199,209,203,.22),0 -45px 0 rgba(87,133,117,.48),0 -60px 0 rgba(111,147,193,.44)}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="clear"]:before{background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(214,227,231,.13));box-shadow:none}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="ar"]:before{background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(173,209,221,.14));box-shadow:0 -18px 0 rgba(201,211,207,.23),0 -36px 0 rgba(104,165,192,.42)}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="full"]:before{background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(173,209,221,.14));box-shadow:0 -13px 0 rgba(247,198,0,.28),0 -26px 0 rgba(201,211,207,.22),0 -39px 0 rgba(104,165,192,.38),0 -52px 0 rgba(85,185,196,.34),0 -65px 0 rgba(96,121,212,.32)}
.cr-p-compatibles .treatment-learning .benefit-visual:after{content:'Lente base  ·  Protección UV  ·  Endurecido';left:24px;right:24px;top:auto;bottom:24px;height:auto;padding-top:13px;border-top:1px solid #41413d;background:none;box-shadow:none;transform:none;color:#d9d6cd;font-size:10px;font-weight:750;text-align:center}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="plus"]:after{content:'Lente base  ·  Protección UV  ·  Endurecido  ·  Polarización'}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="elite"]:after{content:'Lente base  ·  Protección UV  ·  Endurecido  ·  Polarización  ·  Antirreflejante'}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="clear"]:after{content:'Lente transparente de policarbonato'}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="ar"]:after{content:'Policarbonato  ·  Hard Coat  ·  Antirreflejante'}
.cr-p-compatibles .treatment-learning .benefit-visual[data-kind="full"]:after{content:'Policarbonato  ·  UV400  ·  Hard Coat  ·  AR  ·  Hidrofóbico  ·  Filtro azul'}
.cr-p-compatibles .treatment-learning .benefit-visual:before{display:none}
.cr-p-compatibles .treatment-learning .learning-note{width:39%;margin-top:10px}
@media(max-width:900px){
.cr-p-compatibles .treatment-learning .learning-panel{min-height:0}
.cr-p-compatibles .treatment-learning .benefit-grid{width:100%}
.cr-p-compatibles .treatment-learning .benefit-card{display:block}
.cr-p-compatibles .treatment-learning .benefit-card.active{display:flex;flex-direction:column}
.cr-p-compatibles .treatment-learning .benefit-body{order:1}
.cr-p-compatibles .treatment-learning .benefit-visual{position:relative;left:auto;right:auto;top:auto;order:2;height:300px;min-height:0;margin:0 12px 12px;display:none}
.cr-p-compatibles .treatment-learning .benefit-card.active .benefit-visual{display:block}
.cr-p-compatibles .treatment-learning .learning-note{width:100%}
.cr-p-compatibles .treatment-learning .benefit-card.active{transform:none}
}
@media(max-width:520px){
.cr-p-compatibles .treatment-learning .benefit-visual{height:245px}
.cr-p-compatibles .treatment-learning .benefit-visual img{inset:14px 12px 48px;width:calc(100% - 24px);height:calc(100% - 62px)}
.cr-p-compatibles .treatment-learning .learning-switch{display:grid}
.cr-p-compatibles .treatment-learning .learning-switch button{font-size:8px;padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){
.cr-p-compatibles .treatment-learning .benefit-visual.is-animating img{animation:none;opacity:1;transform:none}
}
.cr-p-compatibles .stage{aspect-ratio:1;min-height:0;background:#fff}
.cr-p-compatibles .stage img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.cr-p-compatibles .stage.changing img{opacity:.28;transform:scale(.99)}
@media(max-width:980px){
.cr-p-compatibles .stage{min-height:0}
}
@media(max-width:620px){
.cr-p-compatibles .stage{min-height:0}
.cr-p-compatibles .stage img{width:100%;height:100%;max-width:none;max-height:none}
}
.cr-p-compatibles .material-section{background:#151515;color:#fff}
.cr-p-compatibles .material-section .section-head p{color:#bdbdbd}
.cr-p-compatibles .material-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(560px,1.22fr);gap:52px;align-items:start}
.cr-p-compatibles .material-intro{padding:27px;border:1px solid #3b3b3b;border-radius:10px;background:#1d1d1d}
.cr-p-compatibles .material-intro h3{margin:0;font:700 28px/1 var(--fh);text-transform:uppercase}
.cr-p-compatibles .material-intro p{margin:14px 0 0;color:#bbb;font-size:12px;line-height:1.75}
.cr-p-compatibles .material-chip{display:inline-flex;margin-top:20px;padding:7px 10px;border:1px solid #6d5a00;border-radius:999px;background:#28230d;color:var(--y);font-size:9px;font-weight:800;text-transform:uppercase}
.cr-p-compatibles .material-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cr-p-compatibles .material-benefit{display:grid;grid-template-columns:38px 1fr;gap:13px;align-items:start;min-height:142px;padding:22px;border:1px solid #3a3a3a;border-radius:9px;background:#1d1d1d}
.cr-p-compatibles .material-benefit i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--y);color:#111;font-size:18px}
.cr-p-compatibles .material-benefit h3{margin:2px 0 6px;font:700 20px/1 var(--fh);text-transform:uppercase}
.cr-p-compatibles .material-benefit p{margin:0;color:#aaa;font-size:10px;line-height:1.6}
.cr-p-compatibles .material-honesty{grid-column:1/-1;padding:14px 16px;border-left:3px solid var(--y);background:#222;color:#bbb;font-size:10px;line-height:1.65}
.cr-p-compatibles .material-honesty strong{color:#fff}
@media(max-width:980px){
.cr-p-compatibles .material-grid{grid-template-columns:1fr}
.cr-p-compatibles .material-benefits{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.cr-p-compatibles .material-benefits{grid-template-columns:1fr}
.cr-p-compatibles .material-intro{padding:22px}
.cr-p-compatibles .material-benefit{min-height:0}
}
.cr-p-compatibles #faq{padding:72px 0!important;background:var(--paper)!important}
.cr-p-compatibles #faq .section-head{margin-bottom:0}
.cr-p-compatibles #faq .faqgrid{display:block!important;width:100%;max-width:960px;margin-top:24px}
.cr-p-compatibles #faq .faqgrid details{display:block!important;margin:0!important;padding:0!important;border:0!important;border-top:1px solid var(--bd)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.cr-p-compatibles #faq .faqgrid details:last-child{border-bottom:1px solid var(--bd)!important}
.cr-p-compatibles #faq .faqgrid summary{display:grid!important;grid-template-columns:minmax(0,1fr) 34px;gap:18px;align-items:center;min-height:62px;padding:17px 0!important;list-style:none!important;font-size:13px!important;font-weight:700!important;cursor:pointer}
.cr-p-compatibles #faq .faqgrid summary::-webkit-details-marker{display:none!important}
.cr-p-compatibles #faq .faqgrid summary::marker{content:'';font-size:0}
.cr-p-compatibles #faq .faqgrid summary::after{content:''!important;display:block!important;justify-self:end;width:32px;height:32px;border:1px solid var(--bd);border-radius:50%;background-color:transparent;background-image:linear-gradient(45deg,transparent 48%,#8d6e00 49%,#8d6e00 58%,transparent 59%),linear-gradient(135deg,transparent 48%,#8d6e00 49%,#8d6e00 58%,transparent 59%);background-position:11px 12px,16px 12px;background-size:7px 7px;background-repeat:no-repeat;transition:.2s}
.cr-p-compatibles #faq .faqgrid details[open] summary::after{transform:rotate(180deg);background-color:#fff6c9;border-color:#e2bd18}
.cr-p-compatibles #faq .faq-caret{display:none!important}
.cr-p-compatibles #faq .faqgrid details>p{max-width:850px;margin:0!important;padding:0 52px 18px 0!important;color:var(--muted)!important;font-size:12px!important;line-height:1.7!important}
@media(max-width:620px){
.cr-p-compatibles #faq .faqgrid summary{min-height:58px;padding:14px 0!important;font-size:12px!important}
.cr-p-compatibles #faq .faqgrid details>p{padding:0 0 17px!important}
}
.cr-p-compatibles .config-reset{display:flex;margin:-11px 0 4px auto;padding:5px 0;border:0;background:none;color:#666;font-size:9px;font-weight:800;text-decoration:underline}
.cr-p-compatibles .process-video{aspect-ratio:16/9;min-height:0}
.cr-p-compatibles .process-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cr-p-compatibles .process-scope{pointer-events:none}
.cr-p-compatibles .section-return{display:inline-flex;align-items:center;gap:7px;margin-top:20px;padding:11px 15px;border:1px solid #5b5437;border-radius:7px;color:#fff;font-size:9px;font-weight:800;text-decoration:none}
.cr-p-compatibles .section-return:before{content:'↑';color:var(--y)}
.cr-p-compatibles .section-return:hover{border-color:var(--y)}
.cr-p-compatibles .process-facts{margin-top:16px}
.cr-p-compatibles .story-copy>p{max-width:720px}
.cr-p-compatibles .story-note{line-height:1.65}
@media(max-width:620px){
.cr-p-compatibles .config-reset{margin-top:-7px}
.cr-p-compatibles .process-video{min-height:225px}
.cr-p-compatibles .section-return{width:100%;justify-content:center}
.cr-p-compatibles .process-facts{grid-template-columns:1fr 1fr}
}
.cr-p-compatibles .faq{padding:72px 0!important;background:var(--paper,#f7f6f1)!important}
.cr-p-compatibles .faq .faq-list, .cr-p-compatibles .faq .faqgrid{display:block!important;grid-template-columns:none!important;gap:0!important;width:100%;max-width:960px;margin-top:24px}
.cr-p-compatibles .faq details{display:block;margin:0!important;padding:0!important;border:0!important;border-top:1px solid var(--bd,#dedcd4)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.cr-p-compatibles .faq details:last-child{border-bottom:1px solid var(--bd,#dedcd4)!important}
.cr-p-compatibles .faq summary{display:grid!important;grid-template-columns:minmax(0,1fr) 34px;gap:18px;align-items:center;min-height:62px;padding:17px 0!important;color:inherit;font-size:13px!important;font-weight:700!important;line-height:1.45;list-style:none;cursor:pointer}
.cr-p-compatibles .faq summary::-webkit-details-marker{display:none}
.cr-p-compatibles .faq summary::marker{content:'';font-size:0}
.cr-p-compatibles .faq summary::after{content:none!important;display:none!important}
.cr-p-compatibles .faq .faq-caret{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--bd,#dedcd4);border-radius:50%;color:#8d6e00;font-size:0;transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.cr-p-compatibles .faq .faq-caret::before{content:''!important;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.cr-p-compatibles .faq details[open] .faq-caret{transform:rotate(180deg);background:#fff6c9;border-color:#e2bd18}
.cr-p-compatibles .faq details>p, .cr-p-compatibles .faq details>.faq-answer{max-width:850px;margin:0!important;padding:0 52px 18px 0!important;color:var(--muted,#706f68)!important;font-size:12px!important;line-height:1.7!important}
.cr-p-compatibles .faq details>p a, .cr-p-compatibles .faq details>.faq-answer a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){
.cr-p-compatibles .faq .faq-list, .cr-p-compatibles .faq .faqgrid{margin-top:18px}
.cr-p-compatibles .faq summary{min-height:58px;padding:14px 0!important;font-size:12px!important}
.cr-p-compatibles .faq details>p, .cr-p-compatibles .faq details>.faq-answer{padding:0 0 17px!important}
}
.cr-p-compatibles .trust-section{padding:78px 0;background:#f0eee7;color:#171715}
.cr-p-compatibles .trust-layout{display:grid;grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr);gap:56px;align-items:stretch}
.cr-p-compatibles .trust-media{position:relative;min-height:500px;margin:0;overflow:hidden;border-radius:12px;background:#222}
.cr-p-compatibles .trust-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 34%}
.cr-p-compatibles .trust-media:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.cr-p-compatibles .trust-media-caption{position:absolute;z-index:1;right:24px;bottom:23px;left:24px;color:#fff}
.cr-p-compatibles .trust-media-caption span{display:block;color:#f5c400;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cr-p-compatibles .trust-media-caption strong{display:block;margin-top:6px;font:800 25px/1.05 var(--fh,'Barlow Condensed','Barlow Condensed Fallback',Arial,sans-serif);text-transform:uppercase}
.cr-p-compatibles .trust-copy{align-self:center}
.cr-p-compatibles .trust-copy h2{max-width:690px;margin:13px 0 14px;font:800 clamp(37px,3.4vw,54px)/.96 var(--fh,'Barlow Condensed','Barlow Condensed Fallback',Arial,sans-serif);letter-spacing:-.01em;text-transform:uppercase}
.cr-p-compatibles .trust-copy>p{max-width:680px;margin:0;color:#67655e;font-size:13px;line-height:1.7}
.cr-p-compatibles .trust-brand-lockup{display:flex;align-items:center;gap:18px;min-height:76px;margin-top:21px;padding:10px 16px;border:1px solid #d6d1c4;border-radius:9px;background:#fff}
.cr-p-compatibles .trust-brand-lockup img{display:block;width:auto;object-fit:contain}
.cr-p-compatibles .trust-brand-lockup .brand-essilor{width:190px;max-width:34%;height:auto}
.cr-p-compatibles .trust-brand-lockup .brand-rayban{width:118px;max-width:22%;height:auto}
.cr-p-compatibles .trust-brand-lockup .brand-divider{width:1px;height:37px;background:#d9d5ca}
.cr-p-compatibles .trust-brand-lockup span:last-child{margin-left:auto;color:#69665d;font-size:8px;font-weight:800;line-height:1.45;text-align:right;text-transform:uppercase}
.cr-p-compatibles .trust-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:25px}
.cr-p-compatibles .trust-point{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;min-height:116px;padding:18px;border:1px solid #d6d1c4;border-radius:9px;background:#fff}
.cr-p-compatibles .trust-point i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff3bd;color:#745b00;font-size:19px}
.cr-p-compatibles .trust-point strong{display:block;margin:2px 0 5px;font-size:11px}
.cr-p-compatibles .trust-point p{margin:0;color:#706e67;font-size:9px;line-height:1.55}
.cr-p-compatibles .trust-status{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;margin-top:11px;padding:15px 16px;border:1px solid #d6b227;border-radius:8px;background:#fff8dc}
.cr-p-compatibles .trust-status i{font-size:21px;color:#876800}
.cr-p-compatibles .trust-status strong{display:block;font-size:10px}
.cr-p-compatibles .trust-status span{display:block;margin-top:4px;color:#665f48;font-size:9px;line-height:1.55}
.cr-p-compatibles .trust-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.cr-p-compatibles .trust-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 15px;border:1px solid #1a1a18;border-radius:7px;background:#1a1a18;color:#fff;font-size:9px;font-weight:800;text-decoration:none}
.cr-p-compatibles .trust-link.secondary{background:transparent;color:#1a1a18}
.cr-p-compatibles .trust-link:hover{border-color:#9a7800;background:#9a7800;color:#fff}
@media(max-width:900px){
.cr-p-compatibles .trust-layout{grid-template-columns:1fr;gap:28px}
.cr-p-compatibles .trust-media{min-height:420px}
.cr-p-compatibles .trust-media img{object-position:center 30%}
}
@media(max-width:620px){
.cr-p-compatibles .trust-section{padding:58px 0}
.cr-p-compatibles .trust-layout{gap:22px}
.cr-p-compatibles .trust-media{min-height:390px}
.cr-p-compatibles .trust-brand-lockup{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.cr-p-compatibles .trust-brand-lockup .brand-divider{display:none}
.cr-p-compatibles .trust-brand-lockup .brand-essilor, .cr-p-compatibles .trust-brand-lockup .brand-rayban{justify-self:center;max-width:100%;height:auto}
.cr-p-compatibles .trust-brand-lockup .brand-essilor{width:180px}
.cr-p-compatibles .trust-brand-lockup .brand-rayban{width:105px}
.cr-p-compatibles .trust-brand-lockup span:last-child{grid-column:1/-1;margin:0;text-align:center}
.cr-p-compatibles .trust-points{grid-template-columns:1fr}
.cr-p-compatibles .trust-point{min-height:0}
.cr-p-compatibles .trust-actions{display:grid}
.cr-p-compatibles .trust-link{width:100%}
}
.cr-p-compatibles .summary.config-summary{margin-top:24px;padding:0;border:1px solid #d7d3c7;border-radius:9px;background:#fff;overflow:hidden}
.cr-p-compatibles .summary.config-summary .config-summary-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:15px 16px;border-bottom:1px solid #d7d3c7;background:#f1efe9}
.cr-p-compatibles .summary.config-summary .config-summary-head span{display:block;color:#777;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cr-p-compatibles .summary.config-summary .config-summary-head strong{display:block;margin-top:3px;font-size:13px}
.cr-p-compatibles .summary.config-summary .config-summary-head>strong{margin:0;font:800 20px var(--fh,'Barlow Condensed','Barlow Condensed Fallback',Arial,sans-serif);text-transform:uppercase;white-space:nowrap}
.cr-p-compatibles .summary.config-summary .config-summary-head>strong b{font:inherit}
.cr-p-compatibles .summary.config-summary dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;color:inherit;font-size:inherit}
.cr-p-compatibles .summary.config-summary dl>div{min-width:0;padding:12px 16px;border-right:1px solid #d7d3c7;border-bottom:1px solid #d7d3c7}
.cr-p-compatibles .summary.config-summary dl>div:nth-child(2n){border-right:0}
.cr-p-compatibles .summary.config-summary dt{margin:0;color:#85837b;font-size:8px;text-align:left;text-transform:uppercase}
.cr-p-compatibles .summary.config-summary dd{margin:5px 0 0;color:#171715;font-size:10px;font-weight:700;line-height:1.45;text-align:left;overflow-wrap:anywhere}
.cr-p-compatibles .summary.config-summary .summary-detail{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:12px 16px;border-bottom:1px solid #d7d3c7;font-size:9px;line-height:1.55}
.cr-p-compatibles .summary.config-summary .summary-detail b{text-transform:uppercase}
.cr-p-compatibles .summary.config-summary .summary-detail span{color:#666}
.cr-p-compatibles .summary.config-summary .config-summary-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 16px}
.cr-p-compatibles .summary.config-summary .config-summary-status{display:flex;align-items:center;gap:7px;margin:0;color:#397a24;font-size:9px;font-weight:800}
.cr-p-compatibles .summary.config-summary .config-summary-status i{font-size:14px}
.cr-p-compatibles .summary.config-summary .config-summary-total{display:flex;align-items:baseline;gap:6px;font-size:11px}
.cr-p-compatibles .summary.config-summary .config-summary-total span{font:800 24px var(--fh,'Barlow Condensed','Barlow Condensed Fallback',Arial,sans-serif);font-variant-numeric:tabular-nums}
.cr-p-compatibles .summary.config-summary .config-summary-quantity{color:#666;font-size:9px;white-space:nowrap}
.cr-p-compatibles .config-summary .config-summary-status{display:flex;align-items:center;gap:7px;margin-right:auto;color:#397a24;font-size:9px;font-weight:800}
.cr-p-compatibles .config-summary .config-summary-status i{font-size:14px}
.cr-p-compatibles .config-summary .config-summary-foot{flex-wrap:wrap}
@media(max-width:620px){
.cr-p-compatibles .summary.config-summary dl{grid-template-columns:1fr}
.cr-p-compatibles .summary.config-summary dl>div{border-right:0}
.cr-p-compatibles .summary.config-summary .config-summary-head{align-items:flex-start;flex-direction:column}
.cr-p-compatibles .summary.config-summary .config-summary-head>strong{font-size:18px}
.cr-p-compatibles .summary.config-summary .summary-detail{grid-template-columns:1fr;gap:5px}
.cr-p-compatibles .summary.config-summary .config-summary-foot{align-items:flex-start;flex-wrap:wrap}
.cr-p-compatibles .summary.config-summary .config-summary-status{width:100%}
.cr-p-compatibles .summary.config-summary .config-summary-total{margin-left:auto}
}
.cr-p-compatibles .ar-explainer{background:#111;color:#fff;overflow:hidden}
.cr-p-compatibles .ar-explainer .section-head{max-width:850px}
.cr-p-compatibles .ar-explainer .eyebrow{color:#f2c500}
.cr-p-compatibles .ar-explainer .section-head p{color:#c8c8c4;max-width:760px}
.cr-p-compatibles .ar-layout{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:54px;align-items:center;margin-top:34px}
.cr-p-compatibles .ar-facts{display:grid;gap:12px}
.cr-p-compatibles .ar-fact{display:grid;grid-template-columns:42px 1fr;gap:15px;padding:18px;border:1px solid #393936;border-radius:10px;background:#1b1b19}
.cr-p-compatibles .ar-fact-number{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f2c500;color:#111;font:800 14px/1 Arial,sans-serif}
.cr-p-compatibles .ar-fact h3{margin:1px 0 7px;color:#fff;font-size:17px}
.cr-p-compatibles .ar-fact p{margin:0;color:#c8c8c4;font-size:13px;line-height:1.62}
.cr-p-compatibles .ar-honesty{margin:14px 0 0;padding:14px 16px;border-left:3px solid #f2c500;background:#24231d;color:#d9d7cd;font-size:12px;line-height:1.6}
.cr-p-compatibles .ar-visual{margin:0;border:1px solid #3d3c36;border-radius:14px;background:#171715;overflow:hidden;isolation:isolate}
.cr-p-compatibles .ar-visual-head{padding:20px 22px 17px;border-bottom:1px solid #363632;background:linear-gradient(135deg,#22221e,#181816)}
.cr-p-compatibles .ar-visual-head span{display:block;margin-bottom:5px;color:#f2c500;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.cr-p-compatibles .ar-visual-head strong{display:block;color:#fff;font-size:17px;line-height:1.25}
.cr-p-compatibles .ar-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.cr-p-compatibles .ar-demo-card{position:relative;min-width:0;border:1px solid #3c3b36;border-radius:10px;background:linear-gradient(155deg,#20201d,#111);overflow:hidden}
.cr-p-compatibles .ar-demo-card.with-ar{border-color:#6d6020;box-shadow:inset 0 0 0 1px rgba(242,197,0,.08)}
.cr-p-compatibles .ar-demo-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 14px 0}
.cr-p-compatibles .ar-demo-title span{padding:5px 7px;border-radius:5px;background:#33332f;color:#cac9c1;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.cr-p-compatibles .ar-demo-card.with-ar .ar-demo-title span{background:#f2c500;color:#111}
.cr-p-compatibles .ar-demo-title strong{max-width:138px;color:#fff;font-size:11px;line-height:1.35;text-align:right}
.cr-p-compatibles .ar-diagram{display:block;width:100%;height:auto;min-height:226px}
.cr-p-compatibles .ar-diagram text{font-family:Arial,sans-serif;fill:#aaa99f;font-size:11px;font-weight:700}
.cr-p-compatibles .ar-diagram .ar-coating-label{fill:#8beaff;font-size:9px;letter-spacing:.04em}
.cr-p-compatibles .ar-lens-profile{fill:url(#arLensGradient);stroke:#d6f5ff;stroke-width:2;filter:drop-shadow(0 0 8px rgba(151,227,255,.32))}
.cr-p-compatibles .with-ar .ar-lens-profile{stroke:#8de3ff;filter:drop-shadow(0 0 10px rgba(105,217,255,.46))}
.cr-p-compatibles .ar-coating{fill:none;stroke:#79e5ff;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(99,224,255,.9));vector-effect:non-scaling-stroke}
.cr-p-compatibles .ar-coating-guide{fill:none;stroke:#79e5ff;stroke-width:1;stroke-dasharray:3 4;opacity:.7;vector-effect:non-scaling-stroke}
.cr-p-compatibles .ar-eye-shape{fill:#e8e5d6;stroke:#fff;stroke-width:1.4}
.cr-p-compatibles .ar-eye-iris{fill:#5e675f;stroke:#c9d0c8;stroke-width:2}
.cr-p-compatibles .ar-eye-pupil{fill:#10110f}
.cr-p-compatibles .ar-beam{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16 13;opacity:0;vector-effect:non-scaling-stroke}
.cr-p-compatibles .ar-impact{fill:#fff4a8;filter:drop-shadow(0 0 8px #ffd100);opacity:0}
.cr-p-compatibles .ar-visual.is-visible .ar-beam{opacity:1;animation:arBeamTravel 1.35s linear infinite}
.cr-p-compatibles .ar-visual.is-visible .ar-impact{opacity:1;animation:arImpact 1.35s ease-out infinite}
.cr-p-compatibles .ar-beam-in{stroke:#ffd100;stroke-width:6;filter:drop-shadow(0 0 6px rgba(255,209,0,.7))}
.cr-p-compatibles .no-ar .ar-beam-reflected{stroke:#ff714f;stroke-width:4.5;filter:drop-shadow(0 0 8px rgba(255,92,57,.9));animation-duration:1.1s!important}
.cr-p-compatibles .with-ar .ar-beam-reflected{stroke:#ff9c80;stroke-width:1.5;opacity:.2!important}
.cr-p-compatibles .ar-beam-entered{stroke:#ffe989;stroke-width:4;opacity:.55!important;filter:drop-shadow(0 0 4px rgba(255,226,102,.45))}
.cr-p-compatibles .with-ar .ar-beam-entered{stroke:#b8f2ff;stroke-width:5;opacity:.76!important;filter:drop-shadow(0 0 7px rgba(108,222,255,.7));animation-duration:1.05s!important}
.cr-p-compatibles .no-ar .ar-eye-iris{animation:arEyeAlert 2.7s ease-in-out infinite}
.cr-p-compatibles .with-ar .ar-eye-iris{fill:#738f81}
.cr-p-compatibles .ar-card-result{display:flex;align-items:center;gap:9px;margin:0 14px 14px;padding:10px;border-radius:7px;background:#272621;color:#d8d6ce;font-size:10px;line-height:1.35}
.cr-p-compatibles .ar-card-result:before{content:"";width:9px;height:9px;border-radius:50%;background:#ff714f;box-shadow:0 0 10px rgba(255,113,79,.8);flex:0 0 auto}
.cr-p-compatibles .with-ar .ar-card-result{background:#282712;color:#fff}
.cr-p-compatibles .with-ar .ar-card-result:before{background:#f2c500;box-shadow:0 0 10px rgba(242,197,0,.75)}
.cr-p-compatibles .ar-legend{display:flex;justify-content:space-between;gap:16px;margin:0;padding:14px 20px;border-top:1px solid #363632;color:#aaa99f;font-size:9px;line-height:1.5}
.cr-p-compatibles .ar-legend strong{color:#fff}
@keyframes arBeamTravel{to{stroke-dashoffset:-58}}
@keyframes arImpact{0%,50%{r:4;opacity:.35}72%{r:10;opacity:1}100%{r:14;opacity:0}}
@keyframes arEyeAlert{0%,45%,100%{fill:#5e675f;filter:none}60%,78%{fill:#a84631;filter:drop-shadow(0 0 7px rgba(255,113,79,.8))}}
@media(max-width:900px){
.cr-p-compatibles .ar-layout{grid-template-columns:1fr;gap:28px}
}
@media(max-width:620px){
.cr-p-compatibles .ar-layout{margin-top:24px}
.cr-p-compatibles .ar-fact{grid-template-columns:34px 1fr;padding:15px;gap:12px}
.cr-p-compatibles .ar-fact h3{font-size:15px}
.cr-p-compatibles .ar-fact p{font-size:12px}
.cr-p-compatibles .ar-comparison{grid-template-columns:1fr}
.cr-p-compatibles .ar-demo-title strong{max-width:none}
.cr-p-compatibles .ar-diagram{min-height:190px}
.cr-p-compatibles .ar-legend{display:block}
}
@media(prefers-reduced-motion:reduce){
.cr-p-compatibles .ar-beam, .cr-p-compatibles .ar-impact, .cr-p-compatibles .ar-eye-iris{animation:none!important}
.cr-p-compatibles .ar-beam, .cr-p-compatibles .ar-impact{opacity:1}
.cr-p-compatibles .with-ar .ar-beam-reflected{opacity:.2}
.cr-p-compatibles .ar-beam-entered{opacity:.55}
.cr-p-compatibles .with-ar .ar-beam-entered{opacity:.76}
}
.cr-p-compatibles .treatment-learning .section-head{max-width:760px}
.cr-p-compatibles .treatment-learning .section-head p{max-width:720px;line-height:1.65}
.cr-p-compatibles .treatment-learning .learning-panel{min-height:560px}
.cr-p-compatibles .treatment-learning .benefit-grid{width:40%}
.cr-p-compatibles .treatment-learning .benefit-card{position:static;border:1px solid #494842!important;background:#f6f5f1!important;color:#171717!important;box-shadow:none!important;transition:border-color .2s ease,transform .2s ease,background .2s ease!important}
.cr-p-compatibles .treatment-learning .benefit-card:hover{border-color:#8f8b7d!important;transform:translateX(2px)}
.cr-p-compatibles .treatment-learning .benefit-card.active{border:2px solid var(--y)!important;background:#fff!important;transform:none}
.cr-p-compatibles .treatment-learning .benefit-card.active .benefit-body{padding:16px 17px}
.cr-p-compatibles .treatment-learning .benefit-body h3{display:flex;align-items:center;gap:8px;font-size:21px}
.cr-p-compatibles .treatment-learning .benefit-body h3:before{content:"";width:9px;height:9px;border:1px solid #aaa69b;border-radius:50%;background:#fff;flex:0 0 auto}
.cr-p-compatibles .treatment-learning .benefit-card.active .benefit-body h3:before{border:3px solid #171717;background:var(--y);box-shadow:0 0 0 3px var(--y)}
.cr-p-compatibles .treatment-learning .benefit-card.active .benefit-body h3:after{content:"Seleccionado";padding:4px 6px;border-radius:999px;background:#fff4bd;color:#6f5e00;font:900 7px/1 Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.cr-p-compatibles .treatment-learning .benefit-price{color:#665600}
.cr-p-compatibles .treatment-learning .benefit-visual{left:calc(40% + 42px);min-height:540px!important;border-color:#45443e;background:#151513!important;overflow:hidden}
.cr-p-compatibles .treatment-learning .benefit-card.active .benefit-visual{pointer-events:auto}
.cr-p-compatibles .treatment-learning .benefit-visual:before, .cr-p-compatibles .treatment-learning .benefit-visual:after{display:none!important;content:none!important}
.cr-p-compatibles .treatment-demo{display:grid;grid-template-rows:auto 330px 1fr;height:100%;min-height:650px;color:#fff;background:radial-gradient(circle at 70% 15%,rgba(242,197,0,.08),transparent 32%),#151513}
.cr-p-compatibles .treatment-demo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px 15px;border-bottom:1px solid #393833}
.cr-p-compatibles .treatment-demo-head span{display:block;margin-bottom:5px;color:var(--y);font-size:8px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.cr-p-compatibles .treatment-demo-head strong{display:block;max-width:430px;font-size:15px;line-height:1.35}
.cr-p-compatibles .treatment-demo-head em{padding:6px 8px;border:1px solid #47463f;border-radius:999px;color:#bbb8ae;font-size:8px;font-style:normal;font-weight:800;white-space:nowrap}
.cr-p-compatibles .vision-scene{position:relative;overflow:hidden;border-bottom:1px solid #393833;isolation:isolate}
.cr-p-compatibles .real-vision-single, .cr-p-compatibles .real-vision-switcher{display:grid;grid-template-rows:1fr auto;margin:0;background:#10110f}
.cr-p-compatibles .real-vision-stage{position:relative;min-height:0;overflow:hidden}
.cr-p-compatibles .treatment-learning .benefit-visual .real-vision-stage img{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 66%!important;opacity:1!important;transform:none!important;filter:saturate(.96)!important;animation:none!important}
.cr-p-compatibles .treatment-learning .benefit-visual .is-basic .real-vision-stage img{filter:saturate(.62) contrast(.76) brightness(.94)!important}
.cr-p-compatibles .treatment-learning .benefit-visual .is-elite .real-vision-stage img{filter:saturate(1.03) contrast(1.04)!important}
.cr-p-compatibles .real-vision-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),transparent 52%,rgba(0,0,0,.38));pointer-events:none}
.cr-p-compatibles .real-vision-switcher .real-vision-stage img{position:absolute;inset:0}
.cr-p-compatibles .treatment-learning .benefit-visual .real-vision-switcher .real-vision-stage img:first-child{filter:saturate(.62) contrast(.76) brightness(.94)!important}
.cr-p-compatibles .treatment-learning .benefit-visual .real-vision-switcher .real-vision-stage img+img{opacity:0!important;filter:saturate(1.03) contrast(1.04)!important}
.cr-p-compatibles .treatment-learning .benefit-visual .real-vision-switcher[data-vision-view="polarized"] .real-vision-stage img:first-child{opacity:0!important}
.cr-p-compatibles .treatment-learning .benefit-visual .real-vision-switcher[data-vision-view="polarized"] .real-vision-stage img+img{opacity:1!important}
.cr-p-compatibles .treatment-learning .benefit-visual .real-vision-switcher[data-vision-view="ar"] .real-vision-stage img:first-child{opacity:0!important}
.cr-p-compatibles .treatment-learning .benefit-visual .real-vision-switcher[data-vision-view="ar"] .real-vision-stage img+img{opacity:1!important}
.cr-p-compatibles .real-vision-switcher .real-vision-stage img{transition:opacity .28s ease}
.cr-p-compatibles .real-vision-label{position:absolute;z-index:2;left:10px;top:10px;padding:6px 8px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(12,12,11,.8);color:#fff;font-size:8px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(5px)}
.cr-p-compatibles .is-elite .real-vision-label{border-color:rgba(242,197,0,.72);background:var(--y);color:#111}
.cr-p-compatibles .vision-focus-note{position:absolute;z-index:2;left:13px;bottom:13px;max-width:310px;padding:8px 10px;border-radius:6px;background:rgba(12,12,11,.84);font-size:9px;font-weight:800;line-height:1.3;backdrop-filter:blur(5px)}
.cr-p-compatibles .vision-switch{position:absolute;z-index:5;top:10px;left:10px;display:flex;padding:3px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(12,12,11,.82);backdrop-filter:blur(7px)}
.cr-p-compatibles .vision-switch button{min-height:27px;padding:0 11px;border:0;border-radius:999px;background:transparent;color:#fff;font:900 8px/1 Arial,sans-serif;cursor:pointer}
.cr-p-compatibles .vision-switch button[aria-pressed="true"]{background:var(--y);color:#111}
.cr-p-compatibles .vision-switch button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cr-p-compatibles .real-vision-single figcaption, .cr-p-compatibles .real-vision-switcher figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;padding:8px 13px;background:#171714;color:#fff}
.cr-p-compatibles .real-vision-single figcaption strong, .cr-p-compatibles .real-vision-switcher figcaption strong{font-size:9px;line-height:1.25}
.cr-p-compatibles .real-vision-single figcaption span, .cr-p-compatibles .real-vision-switcher figcaption span{color:#99978f;font-size:8px;text-align:right}
.cr-p-compatibles .is-elite{grid-template-rows:1fr auto auto}
.cr-p-compatibles .elite-treatment-difference{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #393833;background:#20201d}
.cr-p-compatibles .elite-treatment-difference>span{display:grid;grid-template-columns:25px 1fr;grid-template-rows:auto auto;column-gap:8px;padding:9px 12px;border-right:1px solid #393833}
.cr-p-compatibles .elite-treatment-difference>span:last-child{border-right:0}
.cr-p-compatibles .elite-treatment-difference b{grid-row:1/3;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--y);color:#111;font-size:10px}
.cr-p-compatibles .elite-treatment-difference strong{font-size:9px}
.cr-p-compatibles .elite-treatment-difference small{color:#aaa79e;font-size:7px;line-height:1.25}
.cr-p-compatibles .treatment-learning .benefit-visual .clear-treatment-visual .real-vision-stage img{object-position:center!important;filter:none!important}
.cr-p-compatibles .treatment-learning .benefit-visual .real-vision-switcher.clear-treatment-visual .real-vision-stage img:first-child, .cr-p-compatibles .treatment-learning .benefit-visual .real-vision-switcher.clear-treatment-visual .real-vision-stage img+img{filter:none!important}
.cr-p-compatibles .clear-treatment-visual .real-vision-stage:after{background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.38))}
.cr-p-compatibles .clear-treatment-visual .real-vision-label{border-color:rgba(116,225,255,.42);background:rgba(11,26,31,.82);color:#d9f8ff}
.cr-p-compatibles .clear-treatment-difference b{background:#72dff7}
.cr-p-compatibles .is-full-treatment{grid-template-rows:1fr auto auto}
.cr-p-compatibles .solar-scene{background:linear-gradient(#9eb7bd 0 42%,#626b63 42% 49%,#2b302c 49%)}
.cr-p-compatibles .scene-sun{position:absolute;right:13%;top:15%;width:42px;height:42px;border-radius:50%;background:#fff3a2;box-shadow:0 0 35px 16px rgba(255,236,132,.42)}
.cr-p-compatibles .scene-horizon{position:absolute;left:-5%;right:-5%;top:39%;height:36px;background:linear-gradient(165deg,#45554b 0 48%,#344239 49%);clip-path:polygon(0 100%,14% 28%,28% 73%,45% 16%,60% 68%,79% 22%,100% 100%)}
.cr-p-compatibles .scene-road{position:absolute;left:12%;right:12%;bottom:-20%;height:78%;background:linear-gradient(90deg,#202321,#494d49 48%,#242725);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
.cr-p-compatibles .scene-road:before, .cr-p-compatibles .scene-road:after{content:"";position:absolute;top:6%;bottom:0;width:3px;background:linear-gradient(#ece7c9 0 45%,transparent 46% 62%,#ece7c9 63%)}
.cr-p-compatibles .scene-road:before{left:44%;transform:skewX(-5deg)}
.cr-p-compatibles .scene-road:after{right:44%;transform:skewX(5deg)}
.cr-p-compatibles .scene-glare{position:absolute;left:23%;right:18%;bottom:35%;height:17px;border-radius:50%;transform:rotate(-4deg);background:#fff7cc;box-shadow:0 0 18px 8px rgba(255,247,204,.85),0 0 46px 19px rgba(255,230,128,.43);opacity:.92}
.cr-p-compatibles .scene-glare:after{content:"";position:absolute;left:14%;right:18%;top:23px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 17px 7px rgba(255,255,255,.55)}
.cr-p-compatibles .scene-glare.reduced{left:44%;right:36%;height:5px;box-shadow:0 0 10px 3px rgba(255,247,204,.34);opacity:.38}
.cr-p-compatibles .scene-glare.reduced:after{display:none}
.cr-p-compatibles .scene-filter{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(13,20,18,.055) 11px 12px);opacity:0}
.cr-p-compatibles [data-demo="plus"] .scene-filter, .cr-p-compatibles [data-demo="elite"] .scene-filter{opacity:1}
.cr-p-compatibles .scene-effect-label{position:absolute;left:14px;bottom:13px;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:6px;background:rgba(17,17,15,.86);font-size:9px;font-weight:800;backdrop-filter:blur(5px)}
.cr-p-compatibles .scene-effect-label:before{content:"";width:8px;height:8px;border-radius:50%;background:#ff7658;box-shadow:0 0 8px rgba(255,118,88,.8)}
.cr-p-compatibles [data-demo="plus"] .scene-effect-label:before, .cr-p-compatibles [data-demo="elite"] .scene-effect-label:before{background:var(--y);box-shadow:0 0 8px rgba(242,197,0,.65)}
.cr-p-compatibles .rear-ar-indicator{position:absolute;right:14px;bottom:13px;display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(116,225,255,.35);border-radius:6px;background:rgba(13,33,37,.8);color:#c6f6ff;font-size:8px;font-weight:800}
.cr-p-compatibles .rear-ar-indicator:before{content:"";width:18px;height:2px;background:#7ce5ff;box-shadow:0 0 8px #7ce5ff}
.cr-p-compatibles .clear-scene{background:radial-gradient(circle at 75% 26%,#cbc4a0 0 3%,rgba(225,217,175,.38) 4% 10%,transparent 22%),linear-gradient(145deg,#27313a,#0d1115 72%)}
.cr-p-compatibles .clear-window{position:absolute;left:17%;top:15%;width:46%;height:68%;border:2px solid rgba(208,239,248,.55);border-radius:48% 45% 46% 44%;background:linear-gradient(145deg,rgba(235,252,255,.16),rgba(108,163,180,.04));box-shadow:inset 0 0 28px rgba(213,247,255,.08)}
.cr-p-compatibles .clear-reflection{position:absolute;left:26%;top:31%;width:30%;height:12px;transform:rotate(-13deg);border-radius:50%;background:#fff;box-shadow:0 0 18px 8px rgba(255,255,255,.62);opacity:.9}
.cr-p-compatibles [data-demo="ar"] .clear-reflection, .cr-p-compatibles [data-demo="full"] .clear-reflection{height:4px;box-shadow:0 0 9px 3px rgba(255,255,255,.24);opacity:.35}
.cr-p-compatibles .clear-hardcoat{position:absolute;left:17%;top:15%;width:46%;height:68%;border-radius:48% 45% 46% 44%;border:3px solid rgba(113,221,247,.7);opacity:0}
.cr-p-compatibles [data-demo="ar"] .clear-hardcoat, .cr-p-compatibles [data-demo="full"] .clear-hardcoat{opacity:1}
.cr-p-compatibles .water-drops{position:absolute;inset:0;opacity:0}
.cr-p-compatibles .water-drops i{position:absolute;width:13px;height:16px;border-radius:60% 45% 60% 48%;background:linear-gradient(145deg,#d8fbff,rgba(119,219,239,.16));box-shadow:0 2px 5px rgba(0,0,0,.3)}
.cr-p-compatibles .water-drops i:nth-child(1){left:29%;top:34%}
.cr-p-compatibles .water-drops i:nth-child(2){left:43%;top:56%;transform:scale(.7)}
.cr-p-compatibles .water-drops i:nth-child(3){left:52%;top:29%;transform:scale(.55)}
.cr-p-compatibles [data-demo="full"] .water-drops{opacity:1}
.cr-p-compatibles .treatment-build{padding:15px 20px 18px;background:#1a1a18}
.cr-p-compatibles .treatment-build-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.cr-p-compatibles .treatment-build-head strong{font-size:11px;text-transform:uppercase}
.cr-p-compatibles .treatment-build-head span{color:#8f8d85;font-size:8px}
.cr-p-compatibles .component-list{display:grid;gap:5px}
.cr-p-compatibles .component-row{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:11px;min-height:28px;padding:5px 8px;border:1px solid #3b3a35;border-radius:6px;background:#22221f}
.cr-p-compatibles .component-row b{font-size:9px}
.cr-p-compatibles .component-row small{color:#aaa79e;font-size:8px;line-height:1.35}
.cr-p-compatibles .component-row[data-type="material"]{border-left:4px solid #d9edf2}
.cr-p-compatibles .component-row[data-type="protection"]{border-left:4px solid var(--y)}
.cr-p-compatibles .component-row[data-type="filter"]{border-left:4px solid #62bca7}
.cr-p-compatibles .component-row[data-type="surface"]{border-left:4px solid #72dff7}
.cr-p-compatibles .component-row[data-type="care"]{border-left:4px solid #9387e8}
.cr-p-compatibles .construction-note{margin:9px 0 0;color:#97958d;font-size:8px;line-height:1.45}
.cr-p-compatibles .treatment-learning .benefit-visual.is-animating .real-vision-stage{animation:photoReveal .7s ease-out both}
.cr-p-compatibles .treatment-learning .benefit-visual.is-animating .component-row{animation:treatmentComponent .35s ease-out both}
.cr-p-compatibles .treatment-learning .benefit-visual.is-animating .component-row:nth-child(2){animation-delay:.06s}
.cr-p-compatibles .treatment-learning .benefit-visual.is-animating .component-row:nth-child(3){animation-delay:.12s}
.cr-p-compatibles .treatment-learning .benefit-visual.is-animating .component-row:nth-child(4){animation-delay:.18s}
.cr-p-compatibles .treatment-learning .benefit-visual.is-animating .component-row:nth-child(5){animation-delay:.24s}
.cr-p-compatibles .treatment-learning .benefit-visual.is-animating .component-row:nth-child(6){animation-delay:.3s}
@keyframes treatmentGlare{0%{opacity:0;transform:rotate(-4deg) scaleX(.35)}100%{transform:rotate(-4deg) scaleX(1)}}
@keyframes photoReveal{from{opacity:.35}to{opacity:1}}
@keyframes treatmentComponent{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:900px){
.cr-p-compatibles .treatment-learning .learning-panel{min-height:0}
.cr-p-compatibles .treatment-learning .benefit-grid{width:100%}
.cr-p-compatibles .treatment-learning .benefit-visual{left:auto;min-height:620px!important;height:auto!important}
.cr-p-compatibles .treatment-learning .benefit-card.active .benefit-visual{display:block}
.cr-p-compatibles .treatment-demo{min-height:618px}
.cr-p-compatibles .treatment-learning .learning-note{width:100%}
}
@media(max-width:520px){
.cr-p-compatibles .treatment-demo{grid-template-rows:auto 285px auto;min-height:0}
.cr-p-compatibles .treatment-learning .benefit-visual{min-height:0!important}
.cr-p-compatibles .treatment-demo-head{display:block}
.cr-p-compatibles .treatment-demo-head em{display:inline-block;margin-top:9px}
.cr-p-compatibles .real-vision-single figcaption, .cr-p-compatibles .real-vision-switcher figcaption{align-items:flex-start;flex-direction:column;gap:3px}
.cr-p-compatibles .real-vision-single figcaption span, .cr-p-compatibles .real-vision-switcher figcaption span{text-align:left}
.cr-p-compatibles .real-vision-label{left:6px;top:6px;padding:5px 6px;font-size:7px}
.cr-p-compatibles .vision-focus-note{left:8px;right:8px;bottom:8px}
.cr-p-compatibles .elite-treatment-difference>span{padding:8px}
.cr-p-compatibles .component-row{grid-template-columns:82px 1fr}
.cr-p-compatibles .treatment-build{padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){
.cr-p-compatibles .real-vision-switcher .real-vision-stage img, .cr-p-compatibles .treatment-learning .benefit-visual.is-animating .real-vision-stage, .cr-p-compatibles .treatment-learning .benefit-visual.is-animating .component-row{animation:none;transition:none}
}

/* grabado distinto en cada lente (ficha.js, 29-09) */
.cr-p-compatibles .cr-g2-modo, .cr-p-compatibles .cr-g2-2{grid-template-columns:1fr 1fr}
.cr-p-compatibles .cr-g2-3{grid-template-columns:repeat(3,1fr)}
.cr-p-compatibles .cr-g2{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed #d8d4c8}
.cr-p-compatibles .cr-g2[hidden], .cr-p-compatibles .cr-g2 [hidden], .cr-p-compatibles .cr-g2-modo[hidden], .cr-p-compatibles .cr-err-marca[hidden], .cr-p-compatibles .cr-g2-l1[hidden]{display:none}
.cr-p-compatibles .cr-g2 input[type=text]{width:100%}
.cr-p-compatibles .cr-g2-subir{display:block;padding:12px;border:1px dashed #bfc3c7;border-radius:8px;font-size:11px}
.cr-p-compatibles .cr-err-marca{color:#b3261e;font-weight:700}
@media (max-width:600px){.cr-p-compatibles .cr-g2-3{grid-template-columns:1fr}}
/* posiciones del grabado con su imagen (Rafa 30-09) y ocultas las del otro lado con «distinto en cada lente» */
.cr-p-compatibles .choice-card[hidden]{display:none}
.cr-p-compatibles .cr-pos-img{flex:0 0 52px;width:52px;height:52px;border-radius:6px;object-fit:cover;background:#f1efe9}
/* Colores con muestra en forma de lente y agrupados, como en las graduadas (Rafa 30-09) */
.cr-p-compatibles .colors{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.cr-p-compatibles .colors-sub{grid-column:1/-1;margin:6px 0 -2px;font:800 11px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#77756d}
.cr-p-compatibles .colors-sub:first-child{margin-top:0}
.cr-p-compatibles .colors-sub[hidden],.cr-p-compatibles .color[hidden]{display:none}
.cr-p-compatibles .color{display:grid;justify-items:center;align-content:start;gap:6px;min-height:0;padding:14px 8px 12px;border:1px solid #d4d1c7;border-radius:8px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.cr-p-compatibles .color:before{content:none}
.cr-p-compatibles .color-sw{width:62px;height:42px;border-radius:40% 40% 48% 48%/34% 34% 66% 66%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 7px -7px 12px rgba(255,255,255,.3)}
.cr-p-compatibles .color b{font-size:13px;line-height:1.2}
.cr-p-compatibles .color .option-price{margin:0;font-size:11px}
.cr-p-compatibles .color:hover{border-color:#111}
.cr-p-compatibles .color.active{border-color:#111;background:#fffbea;box-shadow:inset 0 0 0 1px #111}
@media(max-width:560px){.cr-p-compatibles .colors{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cr-p-compatibles .color{padding:10px 4px 9px}.cr-p-compatibles .color-sw{width:48px;height:32px}.cr-p-compatibles .color b{font-size:12px}}
.cr-p-compatibles .color small{display:none}

/* ==========================================================================
   Grabado de compatibles con la apariencia de graduadas (Rafa 30-09): tarjetas con el precio en la esquina, aviso
   rojo de marcas registradas, barra «Mismo / Distinto», pestañas de cada lente y tarjetas sin circulito.
   ========================================================================== */
.cr-p-compatibles [data-cr-paso-grabado] .engraving-choice .option.cr-gr-op{display:grid;align-content:start;gap:3px;height:auto;min-height:64px;padding:12px 14px;border:1px solid #d4d1c7;border-radius:8px;background:#fff;color:#171715;text-align:left;box-shadow:none}
.cr-p-compatibles [data-cr-paso-grabado] .cr-gr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.cr-p-compatibles [data-cr-paso-grabado] .cr-gr-top b{font-size:13px;font-weight:700;line-height:1.3}
.cr-p-compatibles [data-cr-paso-grabado] .cr-gr-pr{font:800 14px var(--fh,'Barlow Condensed',sans-serif);white-space:nowrap;color:#111}
.cr-p-compatibles [data-cr-paso-grabado] .engraving-choice .cr-gr-op small{margin:0;font-size:11px;line-height:1.35;color:#77756d}
.cr-p-compatibles [data-cr-paso-grabado] .engraving-choice .cr-gr-op:hover{border-color:#111}
.cr-p-compatibles [data-cr-paso-grabado] .engraving-choice .cr-gr-op.active{border-color:#111;background:#fffbea;box-shadow:inset 0 0 0 1px #111;color:#171715}
.cr-p-compatibles [data-cr-paso-grabado] .engraving-choice .cr-gr-op.active small{color:#77756d}
/* aviso de marcas */
.cr-p-compatibles .cr-marcas{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;margin:0 0 14px;padding:14px 16px;border:2px solid #c0392b;border-radius:10px;background:#fdf0ee;color:#6e1d14}
.cr-p-compatibles .cr-marcas svg{width:24px;height:24px;color:#c0392b}
.cr-p-compatibles .cr-marcas b{display:block;font:900 17px var(--fh,'Barlow Condensed',sans-serif);text-transform:uppercase;letter-spacing:.03em;color:#a32a1e}
.cr-p-compatibles .cr-marcas p{margin:4px 0 0;font-size:12.5px;line-height:1.5}
/* mismo / distinto y pestañas */
.cr-p-compatibles .cr-g2-ctl{display:grid;gap:10px;margin:0 0 14px}
.cr-p-compatibles .cr-g2-ctl[hidden],.cr-p-compatibles .cr-g2-tabs[hidden],.cr-p-compatibles .cr-g2-fuera{display:none!important}
.cr-p-compatibles .cr-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:9px;background:#f1efe9}
.cr-p-compatibles .cr-seg button{height:42px;border:0;border-radius:6px;background:transparent;font:700 12.5px var(--fb,Inter,sans-serif);color:#555;cursor:pointer}
.cr-p-compatibles .cr-seg button[aria-pressed="true"]{background:#fff;color:#111;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.cr-p-compatibles .cr-g2-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:2px solid #e3e0d6}
.cr-p-compatibles .cr-g2-tabs button{height:42px;margin-bottom:-2px;border:0;border-bottom:3px solid transparent;background:transparent;font:800 14px var(--fh,'Barlow Condensed',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#8a877c;cursor:pointer}
.cr-p-compatibles .cr-g2-tabs button[aria-pressed="true"]{color:#111;border-bottom-color:#F5C200}
.cr-p-compatibles .cr-g2{margin-top:0;padding-top:0;border-top:0}
/* tarjetas del grabado como las de graduadas */
.cr-p-compatibles [data-cr-paso-grabado] .choice-card{gap:12px;min-height:56px;padding:12px 14px;border-color:#d4d1c7;color:#171715}
.cr-p-compatibles [data-cr-paso-grabado] .choice-card:before{display:none}
.cr-p-compatibles [data-cr-paso-grabado] .choice-card strong{font-size:13px;font-weight:700}
.cr-p-compatibles [data-cr-paso-grabado] .choice-card small{font-size:11px;color:#77756d}
.cr-p-compatibles [data-cr-paso-grabado] .choice-card:hover{border-color:#111}
.cr-p-compatibles [data-cr-paso-grabado] .choice-card.active{border-color:#111;background:#fffbea;box-shadow:inset 0 0 0 1px #111}
.cr-p-compatibles [data-cr-paso-grabado] .engraving-kicker{font-size:11px;color:#6f6d66}
/* mismo grabado en las dos: las dos lentes dibujadas */
.cr-p-compatibles .choice-card .cr-par-svg{flex:0 0 112px;width:112px;height:54px;padding:3px;border-radius:6px;background:#f7f6f1}
@media (max-width:600px){.cr-p-compatibles [data-cr-paso-grabado] .engraving-choice{grid-template-columns:1fr}}
/* color fantasía: solo sin polarizar (aviso visible, 30-09) */
.cr-p-compatibles .cr-aviso-fantasia{margin:10px 0 0;padding:10px 12px;border:1px solid #e0b400;border-left-width:4px;border-radius:8px;background:#fff8dc;color:#5a4700;font-size:12.5px;font-weight:600}
.cr-p-compatibles .cr-aviso-fantasia[hidden]{display:none}

/* cr-ficha-prestado */
/* GENERADO por ficha_css.py a partir de los prototipos. No editar a mano. */
/* Buscador de colores, video pendiente y 'sin opiniones' (prototipo RB3025) */
.cr-p-originales .selector-shell, .cr-p-varillas .selector-shell{padding:12px;border:1px solid var(--bd);border-radius:9px;background:#fff}
.cr-p-originales .selector-tools, .cr-p-varillas .selector-tools{display:grid;grid-template-columns:1fr auto;gap:9px;margin-bottom:10px}
.cr-p-originales .color-search, .cr-p-varillas .color-search{height:40px;border:1px solid var(--bd);border-radius:6px;padding:0 11px;font-size:10px;outline:0}
.cr-p-originales .color-search:focus, .cr-p-varillas .color-search:focus{border-color:#c39a00;box-shadow:0 0 0 3px rgba(245,196,0,.15)}
.cr-p-originales .result-count, .cr-p-varillas .result-count{display:flex;align-items:center;padding:0 11px;border-radius:6px;background:#f3f1ea;color:#666;font-size:9px;font-weight:700}
.cr-p-originales .filter-tabs, .cr-p-varillas .filter-tabs{display:flex;gap:6px;overflow:auto;padding-bottom:10px;scrollbar-width:thin}
.cr-p-originales .filter-tab, .cr-p-varillas .filter-tab{flex:0 0 auto;height:31px;padding:0 11px;border:1px solid var(--bd);border-radius:999px;background:#fff;color:#555;font-size:8px;font-weight:700}
.cr-p-originales .filter-tab.active, .cr-p-varillas .filter-tab.active{border-color:#111;background:#111;color:#fff}
.cr-p-originales .lens-colors.variant-grid, .cr-p-varillas .lens-colors.variant-grid{max-height:320px}
.cr-p-originales .lens-colors .color[hidden], .cr-p-varillas .lens-colors .color[hidden]{display:none}
.cr-p-originales .selector-empty, .cr-p-varillas .selector-empty{display:none;padding:24px 10px;color:#777;font-size:10px;text-align:center}
.cr-p-originales .selector-empty.show, .cr-p-varillas .selector-empty.show{display:block}
.cr-p-originales .install-placeholder, .cr-p-varillas .install-placeholder{display:grid;place-items:center;height:100%;min-height:330px;padding:35px;color:#fff;text-align:center;background:radial-gradient(circle at 50% 35%,#343434,#111 65%)}
.cr-p-originales .install-placeholder i, .cr-p-varillas .install-placeholder i{display:block;margin-bottom:12px;color:var(--y);font-size:44px}
.cr-p-originales .install-placeholder strong, .cr-p-varillas .install-placeholder strong{display:block;font:800 25px var(--fh);text-transform:uppercase}
.cr-p-originales .install-placeholder small, .cr-p-varillas .install-placeholder small{display:block;max-width:420px;margin-top:8px;color:#bbb;font-size:10px;line-height:1.6}
.cr-p-originales .reviews-empty, .cr-p-varillas .reviews-empty{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px;border:1px solid var(--bd);border-radius:9px;background:#fff}
.cr-p-originales .reviews-empty strong, .cr-p-varillas .reviews-empty strong{display:block;font:800 23px var(--fh);text-transform:uppercase}
.cr-p-originales .reviews-empty p, .cr-p-varillas .reviews-empty p{margin-top:6px;color:var(--muted);font-size:11px;line-height:1.6}
.cr-p-originales .reviews-empty .review-action, .cr-p-varillas .reviews-empty .review-action{flex:0 0 auto}
@media(max-width:720px){
.cr-p-originales .selector-tools, .cr-p-varillas .selector-tools{grid-template-columns:1fr}
.cr-p-originales .lens-colors.variant-grid, .cr-p-varillas .lens-colors.variant-grid{max-height:430px}
.cr-p-originales .reviews-empty, .cr-p-varillas .reviews-empty{align-items:stretch;flex-direction:column}
}
/* Opiniones (prototipo RB2140 originales) para compatibles y graduadas */
.cr-p-compatibles .cr-opiniones .stars, .cr-p-graduadas .cr-opiniones .stars{color:#a47f00;letter-spacing:1px}
.cr-p-compatibles .cr-opiniones .reviews-head, .cr-p-graduadas .cr-opiniones .reviews-head{display:grid;grid-template-columns:220px 1fr auto;gap:34px;align-items:center;padding:25px;border:1px solid var(--bd);border-radius:9px;background:#fff}
.cr-p-compatibles .cr-opiniones .review-score strong, .cr-p-graduadas .cr-opiniones .review-score strong{display:block;font:800 44px var(--fh)}
.cr-p-compatibles .cr-opiniones .review-score .stars, .cr-p-graduadas .cr-opiniones .review-score .stars{display:block;margin:4px 0}
.cr-p-compatibles .cr-opiniones .review-score small, .cr-p-graduadas .cr-opiniones .review-score small{color:var(--muted);font-size:9px}
.cr-p-compatibles .cr-opiniones .rating-bars, .cr-p-graduadas .cr-opiniones .rating-bars{display:grid;gap:7px}
.cr-p-compatibles .cr-opiniones .rating-bar, .cr-p-graduadas .cr-opiniones .rating-bar{display:grid;grid-template-columns:48px 1fr 24px;gap:10px;align-items:center;color:#777;font-size:9px}
.cr-p-compatibles .cr-opiniones .rating-bar i, .cr-p-graduadas .cr-opiniones .rating-bar i{height:5px;border-radius:999px;background:#e5e2d8;overflow:hidden}
.cr-p-compatibles .cr-opiniones .rating-bar i:after, .cr-p-graduadas .cr-opiniones .rating-bar i:after{content:'';display:block;width:var(--rating);height:100%;background:var(--y)}
.cr-p-compatibles .cr-opiniones .review-action, .cr-p-graduadas .cr-opiniones .review-action{min-height:43px;padding:0 17px;border:1px solid #111;border-radius:6px;background:#111;color:#fff;font-size:10px;font-weight:700}
.cr-p-compatibles .cr-opiniones .review-list, .cr-p-graduadas .cr-opiniones .review-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:17px}
.cr-p-compatibles .cr-opiniones .review-card, .cr-p-graduadas .cr-opiniones .review-card{display:flex;flex-direction:column;padding:23px;border:1px solid var(--bd);border-radius:9px;background:#fff}
.cr-p-compatibles .cr-opiniones .review-meta, .cr-p-graduadas .cr-opiniones .review-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:13px}
.cr-p-compatibles .cr-opiniones .review-meta b, .cr-p-graduadas .cr-opiniones .review-meta b{display:block;margin-top:6px;font-size:12px}
.cr-p-compatibles .cr-opiniones .review-meta time, .cr-p-graduadas .cr-opiniones .review-meta time{color:#888;font-size:9px;white-space:nowrap}
.cr-p-compatibles .cr-opiniones .review-card p, .cr-p-graduadas .cr-opiniones .review-card p{flex:1;color:#555;font-size:12px;line-height:1.7}
.cr-p-compatibles .cr-opiniones .verified, .cr-p-graduadas .cr-opiniones .verified{display:inline-flex;margin-top:15px;padding:5px 8px;border-radius:999px;background:#eef5e9;color:#42613c;font-size:8px;font-weight:700;text-transform:uppercase}
.cr-p-compatibles .cr-opiniones .review-source, .cr-p-graduadas .cr-opiniones .review-source{display:inline-flex;margin-top:15px;padding:5px 8px;border-radius:999px;background:#f1efe8;color:#6f6d65;font-size:8px;font-weight:700;text-transform:uppercase}
@media(max-width:900px){
.cr-p-compatibles .cr-opiniones .review-list, .cr-p-graduadas .cr-opiniones .review-list{grid-template-columns:1fr}
.cr-p-compatibles .cr-opiniones .reviews-head, .cr-p-graduadas .cr-opiniones .reviews-head{grid-template-columns:1fr}
}
@media(max-width:720px){
.cr-p-compatibles .cr-opiniones .review-action, .cr-p-graduadas .cr-opiniones .review-action{width:100%}
}
.cr-p-compatibles .cr-opiniones .review-score strong, .cr-p-graduadas .cr-opiniones .review-score strong{font-size:36px;line-height:1}
.cr-p-compatibles .cr-opiniones .reviews-empty, .cr-p-graduadas .cr-opiniones .reviews-empty{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px;border:1px solid var(--bd);border-radius:9px;background:#fff}
.cr-p-compatibles .cr-opiniones .reviews-empty strong, .cr-p-graduadas .cr-opiniones .reviews-empty strong{display:block;font:800 23px var(--fh);text-transform:uppercase}
.cr-p-compatibles .cr-opiniones .reviews-empty p, .cr-p-graduadas .cr-opiniones .reviews-empty p{margin-top:6px;color:var(--muted);font-size:11px;line-height:1.6}
.cr-p-compatibles .cr-opiniones .reviews-empty .review-action, .cr-p-graduadas .cr-opiniones .reviews-empty .review-action{flex:0 0 auto}
@media(max-width:720px){
.cr-p-compatibles .cr-opiniones .reviews-empty, .cr-p-graduadas .cr-opiniones .reviews-empty{align-items:stretch;flex-direction:column}
}

/* cr-ficha */
/* ==========================================================================
   FICHA DE PRODUCTO · lo que une el diseno de Nicolas con la tienda real
   --------------------------------------------------------------------------
   El aspecto lo pone pagina-<variante>.css (el prototipo tal cual). Aqui:
     1. lo de WooCommerce que el diseno ya ensena a su manera (fuera de vista);
     2. los campos de Advanced Product Fields con el aspecto de los pasos del
        diseno (calibre = botones, colores = tarjetas con foto, complementos =
        "Completa tu reparacion");
     3. estados que el prototipo no tenia: opcion no disponible, paso que
        falta, agotado, video con caratula, descripcion del producto.
   Variables: las de cada prototipo (--bd, --y, --muted...).
   ========================================================================== */

/* ---------------------------------------------------------------- 1 · WooCommerce */

.cr-ficha .cr-selects,
.cr-ficha .reset_variations,
.cr-ficha .woocommerce-variation.single_variation,
.cr-ficha .wapf-product-totals,
.cr-ficha .tooltip-container:empty { display: none !important; }

.cr-ficha .screen-reader-text,
.cr-ficha .reset_variations_alert {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* El formulario de WooCommerce lleva la clase "cart", que el diseno usa para
   el boton del carrito de la cabecera (cuadrado amarillo de 42 px). */
.cr-ficha form.cart {
	display: block !important; position: static; width: auto; height: auto; margin: 0;
	border: 0; border-radius: 0; background: none; font-size: inherit; place-items: initial;
}
.cr-ficha .variations_button,
.cr-ficha .single_variation_wrap { display: block; }

/* Avisos de WooCommerce ("Se ha anadido al carrito") con el estilo del diseno */
.woocommerce-notices-wrapper:not(:empty) { width: min(1420px, calc(100% - 48px)); margin: 18px auto 0; }
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 0 10px; padding: 14px 16px; list-style: none;
	border-left: 3px solid #f5c400; border-radius: 6px; background: #fff9df;
	color: #3d3b33; font: 500 13px/1.5 Inter, sans-serif;
}
.woocommerce-notices-wrapper .woocommerce-error { border-left-color: #b3261e; background: #fff1f0; }
.woocommerce-notices-wrapper .button {
	order: 2; padding: 9px 14px; border-radius: 6px; background: #111; color: #fff;
	font-size: 12px; font-weight: 700; text-decoration: none;
}

/* ---------------------------------------------------------------- galeria */

.cr-ficha .gallery.cr-sin-miniaturas { grid-template-columns: minmax(0, 1fr) !important; }
.cr-ficha .stage img[hidden] { display: none; }
.cr-ficha .stage.is-changing img { opacity: .3; }
.cr-ficha .thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------- pasos numerados */

/* El numero de cada paso lo pone el CSS: asi cuentan tambien los campos de
   APF que aparecen y desaparecen segun lo elegido. */
.cr-ficha .buy { counter-reset: cr-paso; }
.cr-ficha .cr-num::before,
.cr-ficha .wapf-field-container:not(.cr-extras):not(.wapf-field-p):not(.tenencuenta):not(.cr-apf-oculto) > .wapf-field-label label::before {
	counter-increment: cr-paso;
	content: counter(cr-paso) ". ";
}

/* Opcion que no existe con lo ya elegido (p. ej. ese color no hay en 54 mm) */
.cr-ficha .cr-no { opacity: .38; cursor: not-allowed; }
.cr-ficha .size.cr-no,
.cr-ficha .option.cr-no { text-decoration: line-through; }
.cr-ficha .color.cr-no img { filter: grayscale(1); }

/* Paso que falta al pulsar "Anadir al carrito" */
.cr-ficha .cr-falta { animation: cr-falta .5s ease 2; }
.cr-ficha .cr-falta .choice-head b,
.cr-ficha .cr-falta .step-head b { color: #b3261e; }
@keyframes cr-falta { 50% { transform: translateX(4px); } }

/* Colores: la rejilla con buscador puede ser larga */
.cr-ficha .variant-grid { max-height: 320px; overflow: auto; }
.cr-ficha .color[hidden] { display: none !important; }
.cr-ficha .color img { pointer-events: none; }

/* ---------------------------------------------------------------- 2 · campos de APF */

.cr-ficha .wapf { margin: 0; }
.cr-ficha .wapf-field-group { display: block; margin: 0; }
.cr-ficha .wapf-field-container {
	width: 100% !important; margin: 22px 0 0; padding: 20px 0 0;
	border-top: 1px solid var(--bd);
}
.cr-ficha .wapf-field-label { margin: 0 0 12px; }
.cr-ficha .wapf-field-label label { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.cr-ficha .wapf-field-label .required,
.cr-ficha .wapf-field-label abbr { color: #b88c00; text-decoration: none; }
.cr-ficha .wapf-field-description { margin-top: 10px; color: #777; font-size: 10px; line-height: 1.55; }
.cr-ficha .wapf-field-p { color: #6f6e67; font-size: 11px; line-height: 1.6; }
.cr-ficha .wapf-field-p .wapf-field-label { display: none; }

/* La casilla real de cada opcion queda oculta: se pulsa la tarjeta */
.cr-ficha .wapf-swatch input[type="radio"],
.cr-ficha .wapf-swatch input[type="checkbox"] {
	position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.cr-ficha .wapf-swatch label:has(input:focus-visible) { outline: 2px solid #111; outline-offset: 2px; }

/* Opciones de texto = botones del diseno (.option / .size) */
.cr-ficha .wapf-swatch-wrapper:not(.wapf-image-swatch-wrapper) { display: flex; flex-wrap: wrap; gap: 9px; }
.cr-ficha .wapf-swatch-wrapper:not(.wapf-image-swatch-wrapper):has(small) {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}
.cr-ficha .wapf-swatch--text { margin: 0; }
.cr-ficha .wapf-swatch--text label {
	display: flex; flex-direction: column; justify-content: center; height: 100%;
	min-height: 46px; margin: 0; padding: 10px 15px;
	border: 1px solid #ccc8bb; border-radius: 7px; background: #fff;
	font-size: 11px; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.cr-ficha .wapf-swatch--text label:hover { border-color: #8f8b7e; }
.cr-ficha .wapf-swatch--text .cr-op b { font-weight: 700; }
.cr-ficha .wapf-swatch--text .cr-op small { display: block; margin-top: 4px; color: #777; font-size: 8.5px; font-weight: 500; line-height: 1.4; }
.cr-ficha .wapf-swatch--text .option-price { display: block; margin-top: 4px; color: #8a6a00; font-size: 9px; font-style: normal; font-weight: 800; }
.cr-ficha .wapf-swatch--text.wapf-checked label {
	border-color: #111; background: #111; color: #fff;
	box-shadow: 0 0 0 3px rgba(245, 196, 0, .3);
}
.cr-ficha .wapf-swatch--text.wapf-checked small { color: #d8d8d8; }
.cr-ficha .wapf-swatch--text.wapf-checked .option-price { color: var(--y); }
/* Doble borde (Nicolás 30-09): APF pinta su propia caja (borde de 2 px, fondo, radio) en .wapf-swatch--text y el tema
   dibuja la tarjeta en el label de dentro. Fuera la del plugin; la del tema (negro + anillo dorado) se queda igual.
   Las graduadas no: su formulario va escondido tras los pasos de graduadas-pasos.js. */
.cr-ficha:not(.cr-p-graduadas) .wapf-swatch--text,
.cr-ficha:not(.cr-p-graduadas) .wapf-swatch--text:hover,
.cr-ficha:not(.cr-p-graduadas) .wapf-swatch--text.wapf-checked { padding: 0; border: 0; border-radius: 7px; background: none; box-shadow: none; outline: 0; }

/* Opciones con imagen = tarjetas de color del diseno */
.cr-ficha .wapf-image-swatch-wrapper {
	display: grid !important; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
}
.cr-ficha .wapf-swatch--image { width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 7px !important; background: none !important; box-shadow: none !important; }
.cr-ficha .wapf-pricing-hint:empty { display: none; }
.cr-ficha .wapf-swatch--image label {
	position: relative; display: block; height: 100%; margin: 0; padding: 6px;
	border: 1px solid #d4d1c7; border-radius: 7px; background: #fff; cursor: pointer;
	text-align: left; transition: border-color .15s, transform .15s;
}
.cr-ficha .wapf-swatch--image label:hover { border-color: #aaa69a; transform: translateY(-1px); }
.cr-ficha .wapf-swatch--image .apf-pick-box,
.cr-ficha .wapf-swatch--image img {
	display: block; width: 100%; height: 64px; margin: 0 0 5px; border-radius: 4px;
	background: #fafafa; object-fit: contain;
}
.cr-ficha .wapf-swatch--image .apf-pick-box img { margin: 0; }
.cr-ficha .wapf-swatch--image .wapf-swatch-label { padding: 0 3px; font-size: 9.5px; font-weight: 700; line-height: 1.3; }
.cr-ficha .wapf-pricing-hint { display: block; margin-top: 3px; color: #8a6a00; font-size: 8.5px; font-weight: 800; }
.cr-ficha .wapf-swatch--image.wapf-checked label {
	border-color: #c49b00; background: #fff9db; box-shadow: 0 0 0 2px rgba(245, 196, 0, .18);
}
.cr-ficha .wapf-swatch--image.wapf-checked label::after {
	content: '✓'; position: absolute; top: 6px; right: 6px; display: grid; place-items: center;
	width: 17px; height: 17px; border-radius: 50%; background: var(--y); font-size: 9px; font-weight: 800;
}

/* Complementos ("Quizas necesites...") = "Completa tu reparacion" */
.cr-ficha .cr-extras { margin-top: 18px; padding-top: 17px; }
.cr-ficha .cr-extras .extras-head { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 10px; }
.cr-ficha .cr-extras .extras-head label { font-size: 12px; }
.cr-ficha .cr-extras .extras-head > span { color: #777; font-size: 9px; }
.cr-ficha .cr-extras .wapf-image-swatch-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.cr-ficha .cr-extras .wapf-swatch--image label {
	display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 10px; align-items: center;
	min-height: 72px; padding: 8px; border-color: var(--bd);
}
.cr-ficha .cr-extras .wapf-swatch--image .apf-pick-box,
.cr-ficha .cr-extras .wapf-swatch--image label > img { width: 54px; height: 54px; margin: 0; background: #f8f7f3; }
/* Marco de la miniatura cerrado por los 4 lados (Nicolás 30-09): la caja mide 54 px con 3 px de relleno y 1 px de borde
   del plugin, pero la foto medía 54 de alto y se salía 8 px por abajo, tapando el borde inferior. Ahora ocupa el hueco. */
.cr-ficha .cr-extras .wapf-swatch--image .apf-pick-box { box-sizing: border-box; overflow: hidden; }
.cr-ficha .cr-extras .wapf-swatch--image .apf-pick-box img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.cr-ficha .cr-extras .wapf-swatch-label { padding: 0; font-size: 10px; text-align: left; }
.cr-ficha .cr-extras .wapf-swatch--image label { text-align: left; }
.cr-ficha .cr-extras .wapf-swatch--image.wapf-checked label { border-color: #d7a900; background: #fff8d8; box-shadow: inset 0 0 0 1px #f5c400; }
.cr-ficha .cr-extras .wapf-swatch--image.wapf-checked label::after { display: none; }
.cr-ficha .cr-extras .wapf-swatch--image.wapf-checked .wapf-swatch-label::before { content: '✓ '; color: #9a7600; }

/* Texto, desplegables y areas de texto */
.cr-ficha .wapf-field-input input[type="text"],
.cr-ficha .wapf-field-input input[type="number"],
.cr-ficha .wapf-field-input input[type="email"],
.cr-ficha .wapf-field-input select,
.cr-ficha .wapf-field-input textarea {
	width: 100%; min-height: 46px; padding: 10px 13px;
	border: 1px solid #ccc8bb; border-radius: 7px; background: #fff;
	color: inherit; font: 500 13px/1.4 var(--fb, Inter, sans-serif); outline: 0;
}
.cr-ficha .wapf-field-input textarea { min-height: 96px; resize: vertical; }
.cr-ficha .wapf-field-input input:focus,
.cr-ficha .wapf-field-input select:focus,
.cr-ficha .wapf-field-input textarea:focus { border-color: #c39a00; box-shadow: 0 0 0 3px rgba(245, 196, 0, .18); }

/* Casillas (confirmaciones) */
.cr-ficha .wapf-checkboxes { display: grid; gap: 8px; }
.cr-ficha .wapf-checkbox label,
.cr-ficha .wapf-input-label {
	display: flex; align-items: flex-start; gap: 10px; margin: 0;
	color: #4f4e48; font-size: 10.5px; line-height: 1.55; cursor: pointer;
}
.cr-ficha .wapf-checkbox input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #111; }
.cr-ficha .wapf-custom { display: none; }
.cr-ficha .tenencuenta { padding: 13px 14px; border: 1px solid #ecd27a; border-radius: 8px; background: #fffaf0; }

/* Errores de validacion de APF */
.cr-ficha .wapf-field-error,
.cr-ficha .wapf-error { margin-top: 7px; color: #b3261e; font-size: 10px; font-weight: 700; }
.cr-ficha .has-error input,
.cr-ficha .has-error select,
.cr-ficha .has-error textarea { border-color: #b3261e !important; }

/* Piezas que el prototipo de compatibles/graduadas no traia */
.cr-ficha .size-help { display: inline-block; margin-top: 11px; padding: 0; border: 0; background: none; color: inherit; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr-ficha .crumb span[aria-hidden] { margin: 0 7px; color: #aaa; }
.cr-ficha .crumb a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- resumen, stock, cantidad, boton */

.cr-ficha [data-cr-estado] svg { flex: 0 0 auto; }
.cr-ficha [data-cr-estado].cr-pendiente { color: #7a776d; }
.cr-ficha [data-cr-estado].cr-agotado { color: #b3261e; }
.cr-ficha .config-summary-foot .stock::before,
.cr-ficha .summary-foot .stock::before { display: none; }

.cr-ficha .qty .quantity { display: flex; flex: 1; min-width: 0; }
.cr-ficha .qty input.qty {
	width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent;
	font: 600 12px var(--fb, Inter, sans-serif); text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.cr-ficha .qty input.qty::-webkit-outer-spin-button,
.cr-ficha .qty input.qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.cr-ficha .qty button { display: grid; place-items: center; cursor: pointer; }

.cr-ficha .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.cr-ficha .single_add_to_cart_button svg { width: 17px; height: 17px; }
.cr-ficha .single_add_to_cart_button.disabled { opacity: .6; cursor: not-allowed; }
.cr-ficha .single_add_to_cart_button.loading { opacity: .7; }

.cr-ficha .micro a { display: block; color: inherit; text-decoration: none; }
.cr-ficha .cr-agotado { margin-top: 18px; padding: 14px 15px; border-left: 3px solid #b3261e; background: #fff1f0; color: #5e2a26; font-size: 12px; }
.cr-ficha .cr-ganchos:empty { display: none; }
.cr-ficha .cr-ganchos { margin-top: 12px; font-size: 12px; }

/* ---------------------------------------------------------------- videos con caratula */

.cr-ficha .cr-video-portada {
	position: relative; display: block; width: 100%; height: 100%; min-height: 220px;
	padding: 0; border: 0; background: #111; cursor: pointer; overflow: hidden;
}
.cr-ficha .video-frame .cr-video-portada { position: absolute; inset: 0; min-height: 0; }
.cr-ficha .cr-video-portada img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s, transform .4s; }
.cr-ficha .cr-video-portada:hover img { opacity: .95; transform: scale(1.02); }
.cr-ficha .cr-video-play {
	position: absolute; inset: 0; display: grid; place-items: center; width: 76px; height: 76px; margin: auto;
	border-radius: 50%; background: var(--y); color: #111; font-size: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.cr-ficha .video iframe,
.cr-ficha .video .cr-video-portada { width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------------------------------------------------------------- descripcion del producto */

.cr-ficha .cr-descripcion-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 52px; align-items: start; margin-top: 28px; }
.cr-ficha .cr-descripcion-grid.cr-sin-imagen { grid-template-columns: minmax(0, 880px); }
.cr-ficha .cr-prosa { color: #3d3c37; font-size: 14px; line-height: 1.75; }
.cr-ficha .cr-prosa [style] { font-family: inherit !important; line-height: inherit !important; }
.cr-ficha .cr-prosa h2,
.cr-ficha .cr-prosa h3,
.cr-ficha .cr-prosa h4 { margin: 30px 0 10px; color: #151513; font-family: var(--fh); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.cr-ficha .cr-prosa h2 { font-size: 27px; }
.cr-ficha .cr-prosa h3 { font-size: 21px; }
.cr-ficha .cr-prosa h4 { font-size: 17px; }
.cr-ficha .cr-prosa > :first-child { margin-top: 0; }
.cr-ficha .cr-prosa p { margin: 0 0 14px; }
.cr-ficha .cr-prosa ul,
.cr-ficha .cr-prosa ol { margin: 0 0 16px; padding-left: 20px; }
.cr-ficha .cr-prosa li { margin: 5px 0; }
.cr-ficha .cr-prosa li::marker { color: #b88c00; }
.cr-ficha .cr-prosa strong,
.cr-ficha .cr-prosa b { color: #151513; }
.cr-ficha .cr-prosa a { color: #151513; text-decoration: underline; text-decoration-color: var(--y); text-underline-offset: 3px; }
.cr-ficha .cr-prosa img { max-width: 100%; height: auto; border-radius: 8px; }
.cr-ficha .cr-prosa table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cr-ficha .cr-prosa td,
.cr-ficha .cr-prosa th { padding: 8px 10px; border-bottom: 1px solid var(--bd); text-align: left; }
.cr-ficha .cr-descripcion-img { position: sticky; top: 20px; margin: 0; }
.cr-ficha .cr-descripcion-img img { display: block; width: 100%; height: auto; border: 1px solid var(--bd); border-radius: 10px; background: #fff; }

/* Descripcion larga: plegada a ~560 px con "Leer toda la descripcion".
   El texto esta entero en el HTML (Google lo lee igual). */
.cr-ficha .cr-plegada .cr-prosa { max-height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.cr-ficha .cr-leer-mas {
	margin-top: 14px; padding: 11px 16px; border: 1px solid #111; border-radius: 6px;
	background: #fff; color: #111; font: 700 12px var(--fb, Inter, sans-serif); cursor: pointer;
}
.cr-ficha .cr-leer-mas:hover { background: #111; color: #fff; }

/* ---------------------------------------------------------------- escribir una opinion */

.cr-ficha .cr-opinar { margin-top: 18px; padding: 24px; border: 1px solid var(--bd); border-radius: 9px; background: #fff; }
.cr-ficha .cr-opinar h3 { margin: 0 0 14px; font: 800 22px/1.1 var(--fh); text-transform: uppercase; }
.cr-ficha .cr-opinar form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.cr-ficha .cr-opinar .comment-form-rating,
.cr-ficha .cr-opinar .comment-form-comment,
.cr-ficha .cr-opinar .form-submit,
.cr-ficha .cr-opinar .comment-form-cookies-consent,
.cr-ficha .cr-opinar .comment-notes { grid-column: 1 / -1; margin: 0; }
.cr-ficha .cr-opinar p { margin: 0; }
.cr-ficha .cr-opinar label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; }
.cr-ficha .cr-opinar input[type="text"],
.cr-ficha .cr-opinar input[type="email"],
.cr-ficha .cr-opinar select,
.cr-ficha .cr-opinar textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #ccc8bb; border-radius: 7px; background: #fff; font: 500 13px var(--fb, Inter, sans-serif); }
.cr-ficha .cr-opinar .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; }
.cr-ficha .cr-opinar .comment-form-cookies-consent label { font-weight: 500; }
.cr-ficha .cr-opinar .required { color: #b88c00; }

/* ---------------------------------------------------------------- moviles */

@media (max-width: 900px) {
	.cr-ficha .cr-descripcion-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.cr-ficha .cr-descripcion-img { position: static; }
}
@media (max-width: 560px) {
	.cr-ficha .cr-extras .wapf-image-swatch-wrapper { grid-template-columns: 1fr; }
	.cr-ficha .wapf-image-swatch-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cr-ficha .cr-opinar form { grid-template-columns: 1fr; }
	.cr-ficha .cr-prosa { font-size: 13.5px; }
}

/* Barra de anclas de compatibles: en el prototipo iba con estilo en linea */
.cr-p-compatibles .anchor-links { display: flex; gap: 24px; padding: 16px 0; overflow-x: auto; font-size: 10px; font-weight: 700; white-space: nowrap; scrollbar-width: none; }
.cr-p-compatibles .anchor-links a { color: inherit; text-decoration: none; }
.cr-p-compatibles .anchor-links a:hover { color: #8a6a00; }

/* Arreglo del prototipo: una regla posterior a sus media queries vuelve a
   poner dos columnas (la de compra con 480 px de minimo) tambien en el movil,
   y la pagina se sale por la derecha (pasa igual en el prototipo de Nicolas). */
@media (max-width: 1100px) {
	.cr-ficha .product-grid, .cr-ficha .product { grid-template-columns: minmax(0, 1fr) !important; }
	.cr-ficha .gallery { position: static; }
}
@media (max-width: 720px) {
	/* El prototipo de varillas pone la zona de compra a todo el ancho en el movil:
	   sin margen, el numero de cada paso («1. Color») quedaba cortado en el borde. */
	.cr-p-varillas .product-grid { width: calc(100% - 28px); }
	.cr-ficha .gallery { grid-template-columns: minmax(0, 1fr) !important; }
	.cr-ficha .thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); order: 2; }
	.cr-ficha .buy { min-width: 0; }
	.cr-ficha .proofs { flex-wrap: wrap; }
}
/* Videos del taller (compatibles y graduadas): en el movil no deben ensanchar la pagina */
.cr-ficha .process-video,
.cr-ficha .workshop-video { min-width: 0; max-width: 100%; }
@media (max-width: 900px) {
	.cr-ficha .product-story,
	.cr-ficha .fulfillment-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
	.cr-ficha .cr-prosa table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Como elegir el tamaño cuando la referencia tiene varios calibres (25-09-2026) */
.cr-ficha .cr-tallas p { margin: 0; }
.cr-ficha .cr-tallas ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; padding: 0; list-style: none; }
.cr-ficha .cr-tallas li { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 1px solid rgba(128,128,128,.4); border-radius: 7px; font-size: 12px; white-space: nowrap; }
.cr-ficha .cr-tallas li span { font-weight: 600; letter-spacing: .02em; }

/* Una fila de opciones larga (p. ej. muchos valores de un atributo) baja de linea
   en vez de estrujar los botones hasta dejarlos ilegibles */
.cr-ficha .sizes { flex-wrap: wrap; }
.cr-ficha .sizes > button { flex: 0 0 auto; white-space: nowrap; }

/* Antirreflejante: en el prototipo, «.section p{color:var(--muted)}» gana por
   especificidad a los colores de product-ar-info.css y deja estos dos textos en
   gris oscuro sobre fondo oscuro. Se aplican los colores que pide esa hoja. */
.cr-ficha .ar-explainer p.ar-honesty { color: #d9d7cd; }
.cr-ficha .ar-explainer .no-ar p.ar-card-result { color: #d8d6ce; }
.cr-ficha .ar-explainer .with-ar p.ar-card-result { color: #fff; }

/* ---------------------------------------------------------------- compatibles: diseno de pasos 2-5 */
/* Campos reales de APF que maneja el diseno: fuera de la vista, pero en la pagina y funcionando */
.cr-ficha .wapf-field-container.cr-apf-oculto {
	position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.cr-ficha .cr-diseno.step { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--bd); }
.cr-ficha .cr-diseno.step[hidden] { display: none; }
.cr-ficha .cr-diseno .step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.cr-ficha .cr-diseno .step-head b { font-size: 13px; }
.cr-ficha .cr-diseno .step-head span { color: #777; font-size: 11px; text-align: right; }
.cr-ficha .cr-diseno .usage .option b { display: block; }
.cr-ficha .cr-diseno .colors .color[hidden] { display: none !important; }
.cr-ficha .cr-diseno .colors .color .option-price { display: block; margin-top: 3px; color: #8a6a00; font-size: 8.5px; font-weight: 800; }
.cr-ficha .cr-diseno .engraving-choice .option { display: block; }
.cr-ficha .cr-diseno [data-cr-detalle-grabado][hidden],
.cr-ficha .cr-diseno .validation-note[hidden] { display: none; }
.cr-ficha .wapf-field-label:has(.cr-paso-valor) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cr-ficha .wapf-field-label .cr-paso-valor { color: #777; font-size: 11px; font-weight: 500; text-align: right; }
.cr-ficha .wapf-field-container .selection-help { margin-top: 10px; }

/* Grabado: la subida de APF dentro del diseno (25-09) */
.cr-ficha .cr-hueco-subida .wapf-field-container { margin: 0; }
.cr-ficha .cr-hueco-subida .wapf-field-label { display: none; }
.cr-ficha .cr-hueco-subida .dzone { min-height: 110px; border: 1.5px dashed #cbc8bd; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 14px; cursor: pointer; }
.cr-ficha .cr-hueco-subida .dz-message { font-size: 13.5px; color: #4a4841; text-align: center; }
.cr-ficha .cr-hueco-subida .dz-message span { text-decoration: underline; font-weight: 700; }
.cr-ficha .que-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cr-ficha .cr-hueco-subida input[type=file] { display: block; width: 100%; padding: 18px 14px; border: 1.5px dashed #cbc8bd; border-radius: 10px; background: #fff; font-size: 13.5px; cursor: pointer; }
.cr-ficha .cr-hueco-subida input[type=file]::file-selector-button { margin-right: 12px; padding: 9px 14px; border: 0; border-radius: 7px; background: #171715; color: #fff; font-weight: 700; cursor: pointer; }
.cr-ficha .cr-hueco-subida .wapf-field-description { display: none; }

/* Disponibilidad del almacén (PICKING): verde = envío inmediato, naranja = bajo pedido */
.cr-ficha [data-cr-estado].cr-almacen { color: #2f7d32; }
.cr-ficha [data-cr-estado].cr-almacen > .ph-fill { color: #2f7d32; }
.cr-ficha [data-cr-estado].cr-bajo-pedido { color: #b45309; }
.cr-ficha [data-cr-estado].cr-bajo-pedido > .ph-fill { color: #d97706; }

/* ==========================================================================
   Selector de piezas en tarjetas (assets/js/piezas.js, 30-09). Mismo componente para Ray-Ban y Oakley.
   La casilla real del plugin sigue ahí (oculta a la vista, no con display:none) y el label entero la activa.
   ========================================================================== */
.cr-ficha .cr-parts-selector {
	--parts-accent: #f5c200; --parts-accent-soft: #fff8dc; --parts-text: #171715; --parts-border: #d4d1c7; --parts-background: #fff;
}
.cr-ficha .cr-parts-selector .wapf-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cr-ficha .cr-part-option { position: relative; margin: 0; }
.cr-ficha .cr-part-option > label { display: block; height: 100%; margin: 0; padding: 0; cursor: pointer; }
.cr-ficha .cr-part-option input[type=checkbox] { position: absolute; top: 14px; left: 14px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cr-ficha .cr-part-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr-ficha .cr-part-card {
	display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 100%; min-height: 72px;
	padding: 12px 14px; border: 1px solid var(--parts-border); border-radius: 10px; background: var(--parts-background);
	box-shadow: 0 1px 2px rgba(0,0,0,.05); color: var(--parts-text); transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.cr-ficha .cr-part-option:hover .cr-part-card { border-color: #8f8b7e; background: #fdfcf8; box-shadow: 0 4px 12px rgba(0,0,0,.07); transform: translateY(-1px); }
.cr-ficha .cr-part-media { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; background: #f3f1ea; color: #6d6a60; overflow: hidden; }
.cr-ficha .cr-part-media svg { width: 26px; height: 26px; }
.cr-ficha .cr-part-media img { width: 100%; height: 100%; object-fit: contain; margin: 0; }
.cr-ficha .cr-part-num { position: absolute; right: 3px; bottom: 3px; min-width: 18px; padding: 1px 4px; border-radius: 5px; background: #171715; color: #fff; font: 800 10px/1.4 var(--fb); text-align: center; }
.cr-ficha .cr-part-body { display: grid; gap: 2px; min-width: 0; }
.cr-ficha .cr-part-code { font: 800 11px var(--fb); letter-spacing: .06em; color: #8a6a00; }
.cr-ficha .cr-part-name { font: 700 14px/1.3 var(--fb); overflow-wrap: anywhere; }
.cr-ficha .cr-part-meta { font-size: 12px; color: #77756d; }
.cr-ficha .cr-part-na { display: none; font-size: 11px; font-weight: 700; color: #a8321f; }
.cr-ficha .cr-part-side { display: grid; justify-items: end; gap: 8px; align-self: stretch; align-content: space-between; }
.cr-ficha .cr-part-price { font: 800 15px var(--fh, inherit); color: #171715; white-space: nowrap; }
.cr-ficha .cr-part-check { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid #bdb9ad; border-radius: 6px; background: #fff; color: transparent; }
.cr-ficha .cr-part-check svg { width: 15px; height: 15px; }
/* seleccionada: borde amarillo grueso, fondo suave y check visible (no solo color) */
.cr-ficha .cr-part-option.is-selected .cr-part-card,
.cr-ficha .cr-part-option input:checked ~ .cr-part-card { border: 2px solid var(--parts-accent); padding: 11px 13px; background: var(--parts-accent-soft); box-shadow: 0 0 0 1px rgba(197,157,0,.25); }
.cr-ficha .cr-part-option.is-selected .cr-part-check,
.cr-ficha .cr-part-option input:checked ~ .cr-part-card .cr-part-check { border-color: #171715; background: #171715; color: var(--parts-accent); }
/* teclado */
.cr-ficha .cr-part-option input:focus-visible ~ .cr-part-card { outline: 3px solid #171715; outline-offset: 2px; }
/* desactivada */
.cr-ficha .cr-part-option.is-disabled > label { cursor: not-allowed; }
.cr-ficha .cr-part-option.is-disabled .cr-part-card { opacity: .5; box-shadow: none; transform: none; background: #f7f6f2; }
.cr-ficha .cr-part-option.is-disabled .cr-part-na { display: block; }
@media (max-width: 560px) {
	.cr-ficha .cr-parts-selector .wapf-checkboxes { grid-template-columns: 1fr; }
	.cr-ficha .cr-part-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; min-height: 64px; padding: 10px 12px; }
	.cr-ficha .cr-part-media { width: 44px; height: 44px; }
}

/* Opción obligatoria sin elegir al añadir al carrito (ficha.js, 30-09) */
.cr-ficha .wapf-field-container.cr-falta { outline: 2px solid #c0392b; outline-offset: 6px; border-radius: 8px; }
.cr-ficha .cr-falta-msg { margin: 4px 0 8px; font-size: 13px; font-weight: 700; color: #b0301f; }
.cr-ficha form.cart :is(input, select, textarea) { scroll-margin-top: 140px; }